mobox 0.0.1

data/template/src/assets/javascripts/vendor/gfx/gfx.cube.js

@@ -0,0 +1,161 @@
+(function() {
+  var $, chrome11, chromeMatch, chromeRegex, defaults, sides;
+
+  $ = jQuery;
+
+  sides = {
+    front: {
+      rotateY: '0deg',
+      rotateX: '0deg'
+    },
+    back: {
+      rotateX: '-180deg',
+      rotateX: '0deg'
+    },
+    right: {
+      rotateY: '-90deg',
+      rotateX: '0deg'
+    },
+    left: {
+      rotateY: '90deg',
+      rotateX: '0deg'
+    },
+    top: {
+      rotateY: '0deg',
+      rotateX: '-90deg'
+    },
+    bottom: {
+      rotateY: '0deg',
+      rotateX: '90deg'
+    }
+  };
+
+  defaults = {
+    width: 300,
+    height: 300
+  };
+
+  $.fn.gfxCube = function(options) {
+    var back, bottom, element, front, left, opts, right, tZ, top, wrapper;
+    opts = $.extend({}, defaults, options);
+    element = $(this);
+    tZ = opts.translateZ || opts.width / 2;
+    if (typeof tZ === 'number') tZ += 'px';
+    element.transform({
+      position: 'relative',
+      width: opts.width,
+      height: opts.height,
+      '-webkit-perspective': '3000',
+      '-moz-perspective': '3000',
+      '-webkit-perspective-origin': '50% 50%',
+      '-moz-perspective-origin': '50% 50%'
+    });
+    wrapper = $('<div />');
+    wrapper.addClass('gfxCubeWrapper');
+    wrapper.transform({
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      overflow: 'visible',
+      rotateY: '0deg',
+      rotateX: '0deg',
+      translateZ: "-" + tZ,
+      '-webkit-transform-style': 'preserve-3d',
+      '-moz-transform-style': 'preserve-3d',
+      '-webkit-transform-origin': '50% 50%',
+      '-moz-transform-origin': '50% 50%'
+    });
+    element.children().wrapAll(wrapper).css({
+      display: 'block',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      overflow: 'hidden'
+    });
+    front = element.find('.front');
+    back = element.find('.back');
+    right = element.find('.right');
+    left = element.find('.left');
+    top = element.find('.top');
+    bottom = element.find('.bottom');
+    front.transform({
+      rotateY: '0deg',
+      translateZ: tZ
+    });
+    back.transform({
+      rotateY: '180deg',
+      translateZ: tZ
+    });
+    right.transform({
+      rotateY: '90deg',
+      translateZ: tZ
+    });
+    left.transform({
+      rotateY: '-90deg',
+      translateZ: tZ
+    });
+    top.transform({
+      rotateX: '90deg',
+      translateZ: tZ
+    });
+    bottom.transform({
+      rotateX: '-90deg',
+      translateZ: tZ
+    });
+    return $(this).bind('cube', function(e, type) {
+      wrapper = element.find('.gfxCubeWrapper');
+      return wrapper.gfx($.extend({}, {
+        translateZ: "-" + tZ
+      }, sides[type]));
+    });
+  };
+
+  chromeRegex = /(Chrome)[\/]([\w.]+)/;
+
+  chromeMatch = chromeRegex.exec(navigator.userAgent) || [];
+
+  chrome11 = chromeRegex[1] && chromeRegex[2].test(/^12\./);
+
+  if (!$.browser.webkit || chrome11) {
+    $.fn.gfxCube = function(options) {
+      var element, opts, wrapper;
+      opts = $.extend({}, defaults, options);
+      element = $(this);
+      element.css({
+        position: 'relative',
+        width: opts.width,
+        height: opts.height
+      });
+      wrapper = $('<div />');
+      wrapper.addClass('gfxCubeWrapper');
+      wrapper.transform({
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        overflow: 'visible'
+      });
+      element.children().wrapAll(wrapper).css({
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        overflow: 'hidden'
+      });
+      wrapper = element.find('.gfxCubeWrapper');
+      wrapper.children('*:not(.front)').hide();
+      return element.bind('cube', function(e, type) {
+        wrapper.children().hide();
+        return wrapper.children("." + type).show();
+      });
+    };
+  }
+
+}).call(this);

data/template/src/assets/javascripts/vendor/gfx/gfx.effects.js

@@ -0,0 +1,330 @@
+(function() {
+
+  $.fn.gfxPopIn = function(options) {
+    if (options == null) options = {};
+    if (options.scale == null) options.scale = '.2';
+    $(this).queueNext(function() {
+      return $(this).transform({
+        '-webkit-transform-origin': '50% 50%',
+        '-moz-transform-origin': '50% 50%',
+        scale: options.scale
+      }).show();
+    });
+    return $(this).gfx({
+      scale: '1',
+      opacity: '1'
+    }, options);
+  };
+
+  $.fn.gfxPopOut = function(options) {
+    $(this).queueNext(function() {
+      return $(this).transform({
+        '-webkit-transform-origin': '50% 50%',
+        '-moz-transform-origin': '50% 50%',
+        scale: '1',
+        opacity: '1'
+      });
+    });
+    $(this).gfx({
+      scale: '.2',
+      opacity: '0'
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).hide().transform({
+        opacity: '1',
+        scale: '1'
+      });
+    });
+  };
+
+  $.fn.gfxFadeIn = function(options) {
+    if (options == null) options = {};
+    if (options.duration == null) options.duration = 1000;
+    $(this).queueNext(function() {
+      return $(this).css({
+        opacity: '0'
+      }).show();
+    });
+    return $(this).gfx({
+      opacity: 1
+    }, options);
+  };
+
+  $.fn.gfxFadeOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).css({
+        opacity: 1
+      });
+    });
+    $(this).gfx({
+      opacity: 0
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).hide().css({
+        opacity: 1
+      });
+    });
+  };
+
+  $.fn.gfxShake = function(options) {
+    var distance;
+    if (options == null) options = {};
+    if (options.duration == null) options.duration = 100;
+    if (options.easing == null) options.easing = 'ease-out';
+    distance = options.distance || 20;
+    $(this).gfx({
+      translateX: "-" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "-" + distance + "px"
+    }, options);
+    $(this).gfx({
+      translateX: "" + distance + "px"
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).transform({
+        translateX: 0
+      });
+    });
+  };
+
+  $.fn.gfxBlip = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '1.15');
+    $(this).gfx({
+      scale: options.scale
+    }, options);
+    return $(this).gfx({
+      scale: '1'
+    }, options);
+  };
+
+  $.fn.gfxExplodeIn = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '3');
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: options.scale,
+        opacity: '0'
+      }).show();
+    });
+    return $(this).gfx({
+      scale: '1',
+      opacity: '1'
+    }, options);
+  };
+
+  $.fn.gfxExplodeOut = function(options) {
+    if (options == null) options = {};
+    options.scale || (options.scale = '3');
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: '1',
+        opacity: '1'
+      });
+    });
+    $(this).gfx({
+      scale: options.scale,
+      opacity: '0'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).hide().transform({
+          scale: '1',
+          opacity: '1'
+        });
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxFlipIn = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: '180deg',
+        scale: '.8',
+        display: 'block'
+      });
+    });
+    return $(this).gfx({
+      rotateY: 0,
+      scale: 1
+    }, options);
+  };
+
+  $.fn.gfxFlipOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: 0,
+        scale: 1
+      });
+    });
+    $(this).gfx({
+      rotateY: '-180deg',
+      scale: '.8'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).transform({
+          scale: 1,
+          rotateY: 0,
+          display: 'none'
+        });
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxRotateOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: 0
+      }).fix();
+    });
+    $(this).gfx({
+      rotateY: '-180deg'
+    }, options);
+    if (options.reset !== false) {
+      $(this).queueNext(function() {
+        return $(this).transform({
+          rotateY: 0,
+          display: 'none'
+        }).unfix();
+      });
+    }
+    return this;
+  };
+
+  $.fn.gfxRotateIn = function(options) {
+    var $;
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        rotateY: '180deg',
+        display: 'block'
+      }).fix();
+    });
+    $(this).gfx({
+      rotateY: 0
+    }, options);
+    $(this).queueNext(function() {
+      return $(this).unfix();
+    });
+    return $ = jQuery;
+  };
+
+  $.fn.gfxSlideOut = function(options) {
+    var distance, opacity;
+    if (options == null) options = {};
+    options.direction || (options.direction = 'right');
+    distance = options.distance || 100;
+    if (options.direction === 'left') distance *= -1;
+    distance += "%";
+    opacity = options.fade ? 0 : 1;
+    $(this).queueNext(function() {
+      return $(this).show();
+    });
+    $(this).gfx({
+      translate3d: "" + distance + ",0,0",
+      opacity: opacity
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).transform({
+        translate3d: "0,0,0",
+        opacity: 1
+      }).hide();
+    });
+  };
+
+  $.fn.gfxSlideIn = function(options) {
+    var distance, opacity;
+    if (options == null) options = {};
+    options.direction || (options.direction = 'right');
+    distance = options.distance || 100;
+    if (options.direction === 'left') distance *= -1;
+    distance += "%";
+    opacity = options.fade ? 0 : 1;
+    $(this).queueNext(function() {
+      return $(this).transform({
+        translate3d: "" + distance + ",0,0",
+        opacity: opacity
+      }).show();
+    });
+    return $(this).gfx({
+      translate3d: "0,0,0",
+      opacity: 1
+    }, options);
+  };
+
+  $.fn.gfxRaisedIn = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: '1',
+        opacity: '0',
+        translate3d: '0,-15px,0'
+      }).show();
+    });
+    return $(this).gfx({
+      scale: '1',
+      opacity: '1',
+      translate3d: '0,0,0'
+    }, options);
+  };
+
+  $.fn.gfxRaisedOut = function(options) {
+    if (options == null) options = {};
+    $(this).queueNext(function() {
+      return $(this).transform({
+        scale: '1',
+        opacity: '1',
+        translate3d: '0,0,0'
+      });
+    });
+    $(this).gfx({
+      scale: '1',
+      opacity: '0',
+      translate3d: '0,-8px,0'
+    }, options);
+    return $(this).queueNext(function() {
+      return $(this).hide().transform({
+        scale: '1',
+        opacity: '1',
+        translate3d: '0,0,0'
+      });
+    });
+  };
+
+  $.fn.fix = function() {
+    return $(this).each(function() {
+      var element, parentOffset, styles;
+      element = $(this);
+      styles = element.offset();
+      parentOffset = element.parent().offset();
+      styles.left -= parentOffset.left;
+      styles.top -= parentOffset.top;
+      styles.position = 'absolute';
+      return element.css(styles);
+    });
+  };
+
+  $.fn.unfix = function() {
+    return $(this).each(function() {
+      var element;
+      element = $(this);
+      return element.css({
+        position: '',
+        top: '',
+        left: ''
+      });
+    });
+  };
+
+}).call(this);