crowdstart-checkout/lib/views/screenmanager.js

One Click Checkout for Crowdstart

// Generated by CoffeeScript 1.10.0
var Events, ScreenManager, View, crowdcontrol, requestAnimationFrame, riot,
  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
  hasProp = {}.hasOwnProperty;

riot = require('riot');

crowdcontrol = require('crowdcontrol');

Events = crowdcontrol.Events;

View = crowdcontrol.view.View;

requestAnimationFrame = crowdcontrol.utils.shim.requestAnimationFrame;

ScreenManager = (function(superClass) {
  var obj;

  extend(ScreenManager, superClass);

  function ScreenManager() {
    return ScreenManager.__super__.constructor.apply(this, arguments);
  }

  ScreenManager.prototype.tag = 'screen-manager';

  ScreenManager.prototype.html = require('../../templates/screenmanager.jade');

  ScreenManager.prototype.index = 0;

  ScreenManager.prototype.script = null;

  ScreenManager.prototype.scriptRefs = null;

  ScreenManager.prototype.style = '';

  ScreenManager.prototype.events = (
    obj = {},
    obj["" + Events.Screen.UpdateScript] = function(script, index) {
      return this.updateScript(script, index);
    },
    obj["" + Events.Screen.TryNext] = function() {
      return this.tryNext();
    },
    obj["" + Events.Screen.Next] = function() {
      return this.next();
    },
    obj["" + Events.Screen.Back] = function() {
      return this.back();
    },
    obj
  );

  ScreenManager.prototype.tryNext = function() {
    var ref1;
    if (this.index < this.script.length) {
      return (ref1 = this.scriptRefs[this.index]) != null ? ref1.submit() : void 0;
    }
  };

  ScreenManager.prototype.next = function() {
    var ref1;
    if (this.index < this.script.length - 1) {
      this.index++;
      this.updateConfirmAndBackAndInvoice();
      if ((ref1 = this.scriptRefs[this.index]) != null) {
        ref1.show();
      }
      return this.update();
    }
  };

  ScreenManager.prototype.back = function() {
    var ref1;
    if (this.index > 0) {
      this.index--;
      this.updateConfirmAndBackAndInvoice();
      if ((ref1 = this.scriptRefs[this.index]) != null) {
        ref1.show();
      }
      return this.update();
    }
  };

  ScreenManager.prototype.updateConfirmAndBackAndInvoice = function() {
    var disable, show;
    show = true;
    disable = false;
    if ((this.scriptRefs != null) && this.scriptRefs[this.index]) {
      if (!this.scriptRefs[this.index].showInvoice) {
        disable = true;
        this.obs.trigger(Events.Invoice.Hide);
      }
      if (!this.scriptRefs[this.index].showConfirm) {
        show = false;
        this.obs.trigger(Events.Confirm.Hide);
      }
    }
    if (show) {
      this.obs.trigger(Events.Confirm.Show);
    }
    if (!disable) {
      return this.obs.trigger(Events.Invoice.Show);
    }
  };

  ScreenManager.prototype.updateScript = function(script, index) {
    if (index == null) {
      index = 0;
    }
    if (this.script === script) {
      if (this.index !== index) {
        this.index = index;
        this.updateConfirmAndBackAndInvoice();
        this.update();
        return;
      }
      return;
    }
    this.script = script;
    this.index = index;
    return requestAnimationFrame((function(_this) {
      return function() {
        var $el, instance, j, k, len, len1, ref, ref1, ref2, ref3, total;
        if (_this.scriptRefs != null) {
          ref1 = _this.scriptRefs;
          for (j = 0, len = ref1.length; j < len; j++) {
            ref = ref1[j];
            if (ref != null) {
              ref.unmount();
            }
          }
        }
        _this.scriptRefs = [];
        $el = $('.crowdstart-screen-strip');
        $el.html('');
        total = _this.script.length;
        ref2 = _this.script;
        for (k = 0, len1 = ref2.length; k < len1; k++) {
          script = ref2[k];
          $el.append($("<" + script + ">"));
          instance = riot.mount(script, {
            model: _this.model,
            total: total,
            screenManagerObs: _this.obs,
            client: _this.client
          });
          _this.scriptRefs.push(instance[0]);
        }
        _this.updateConfirmAndBackAndInvoice();
        if ((ref3 = _this.scriptRefs[_this.index]) != null) {
          ref3.show();
        }
        _this.update();
        return riot.update();
      };
    })(this));
  };

  ScreenManager.prototype.js = function(opts) {
    var resizeFn;
    this.client = opts.client;
    this.updateScript(opts.script || []);
    resizeFn = (function(_this) {
      return function() {
        var $root;
        $root = $(_this.root);
        $root.width($root.parent().outerWidth());
        $root.height($($root.find('.crowdstart-screen-strip').children()[_this.index]).outerHeight());
        return $root;
      };
    })(this);
    $(window).on('resize', resizeFn);
    this.on('update', (function(_this) {
      return function() {
        var total;
        total = _this.script.length;
        return _this.style = "transform: translateX(-" + (_this.index * 100 / total) + "%); width: " + (total * 100) + "%;";
      };
    })(this));
    this.on('updated', (function(_this) {
      return function() {
        var $child, $children, $root, child, i, j, len;
        $root = resizeFn();
        $children = $root.find('.crowdstart-screen-strip').children();
        for (i = j = 0, len = $children.length; j < len; i = ++j) {
          child = $children[i];
          $child = $(child).children();
          if (i === _this.index) {
            $child.css('display', '');
            (function($child) {
              return requestAnimationFrame(function() {
                $child.css('opacity', 1);
                return $root.height($child.outerHeight());
              });
            })($child);
          } else {
            $child.css('opacity', 0);
            (function($child) {
              return setTimeout(function() {
                return $child.css('display', 'none');
              }, 500);
            })($child);
          }
        }
        _this.obs.trigger(Events.Screen.SyncScript, _this.scriptRefs, _this.index);
        return requestAnimationFrame(function() {
          return resizeFn();
        });
      };
    })(this));
    return this.on('unmount', function() {
      return $(window).off('resize', resizeFn);
    });
  };

  return ScreenManager;

})(View);

ScreenManager.register();

module.exports = ScreenManager;

//# sourceMappingURL=screenmanager.js.map