dss/static/js/app/lib/panningRegion.js

// Generated by CoffeeScript 1.4.0
(function() {
  var __hasProp = {}.hasOwnProperty,
    __extends = 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; };

  define(['marionette'], function(Marionette) {
    var PanningRegion, getPrefixedCssProp;
    getPrefixedCssProp = function(baseProp) {
      var str;
      str = Modernizr.prefixed(baseProp);
      str = str.replace(/([A-Z])/g, function(str, m1) {
        return "-" + m1.toLowerCase();
      }).replace(/^ms-/, "-ms-");
      return str;
    };
    PanningRegion = (function(_super) {

      __extends(PanningRegion, _super);

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

      PanningRegion.prototype.el = "#content";

      PanningRegion.prototype.initialize = function() {
        var transEndEventNames;
        transEndEventNames = {
          WebkitTransition: "webkitTransitionEnd",
          MozTransition: "transitionend",
          OTransition: "oTransitionEnd",
          msTransition: "MSTransitionEnd",
          transition: "transitionend"
        };
        this.transEndEventName = transEndEventNames[Modernizr.prefixed("transition")];
        this.transformPropName = getPrefixedCssProp("transform");
        console.log(this.transEndEventName, this.transformPropName);
        return true;
      };

      PanningRegion.prototype.transitionToView = function(newView, type) {
        var self, view;
        self = this;
        view = this.currentView;
        if (!view || view.isClosed) {
          this.show(newView);
          return;
        }
        Marionette.triggerMethod.call(this, "willTransition", view);
        newView.on("render", function() {
          var $background, newViewMatrix, translation, worldBgMatrix, worldContentMatrix;
          self.$el.off(self.transEndEventName);
          translation = void 0;
          if (type === "slide") {
            translation = "translateX(100%)";
          } else if (type === "rotate") {
            translation = "translateX(100%) translateY(100%) rotate(" + ["20", "40", "60", "80", "90"][_.random(0, 4)] + "deg)";
          } else {
            if (type === "drop") {
              translation = "translateY(100%)";
            }
          }
          newView.$el.css(self.transformPropName, translation);
          self.$el.append(newView.el);
          $background = jQuery("#world-bg");
          worldContentMatrix = Matrix.initWithElem(self.$el);
          worldBgMatrix = Matrix.initWithElem($background);
          newViewMatrix = Matrix.initWithElem(newView.$el);
          self.$el.addClass("animated");
          $background.addClass("animated");
          self.$el.css(self.transformPropName, newViewMatrix.clone().invert().toMatrixString());
          $background.css(self.transformPropName, newViewMatrix.clone().invert().toMatrixString());
          return self.$el.on(self.transEndEventName, function() {
            self.$el.off(self.transEndEventName);
            self.close();
            self.currentView = newView;
            self.$el.removeClass("animated");
            $background.removeClass("animated");
            self.$el.css(self.transformPropName, (new Matrix()).toMatrixString());
            newView.$el.css(self.transformPropName, (new Matrix()).toMatrixString());
            $background.css("webkit-transform", (new Matrix()).toMatrixString());
            Marionette.triggerMethod.call(newView, "show");
            return Marionette.triggerMethod.call(self, "show", newView);
          });
        });
        newView.render();
        return true;
      };

      return PanningRegion;

    })(Marionette.Region);
    return PanningRegion;
  });

}).call(this);