// Generated by CoffeeScript 1.3.3 (function() { 'use strict'; var $, OriDomi, css, defaults, devMode, extendObj, key, oriDomiSupport, prefixList, root, testEl, testProp, value; root = window; $ = root.$ || false; devMode = false; oriDomiSupport = true; testEl = document.createElement('div'); prefixList = ['Webkit', 'Moz', 'O', 'ms', 'Khtml']; css = { transform: 'transform', origin: 'transformOrigin', transformStyle: 'transformStyle', transitionProp: 'transitionProperty', transitionDuration: 'transitionDuration', transitionEasing: 'transitionTimingFunction', perspective: 'perspective', backface: 'backfaceVisibility' }; testProp = function(prop) { var capProp, prefix, _i, _len; if (testEl.style[prop] != null) { return prop; } capProp = prop.charAt(0).toUpperCase() + prop.slice(1); for (_i = 0, _len = prefixList.length; _i < _len; _i++) { prefix = prefixList[_i]; if (testEl.style[prefix + capProp] != null) { return prefix + capProp; } } return false; }; for (key in css) { value = css[key]; css[key] = testProp(value); if (!css[key]) { devMode && console.warn('oriDomi: Browser does not support oriDomi'); oriDomiSupport = false; break; } } css.gradientProp = (function() { var hyphenated, prefix, _i, _len; for (_i = 0, _len = prefixList.length; _i < _len; _i++) { prefix = prefixList[_i]; hyphenated = "-" + (prefix.toLowerCase()) + "-linear-gradient"; testEl.style.backgroundImage = "" + hyphenated + "(left, #000, #fff)"; if (testEl.style.backgroundImage.indexOf('gradient') !== -1) { return hyphenated; } } return 'linear-gradient'; })(); css.transformProp = (function() { var prefix; prefix = css.transform.match(/(\w+)Transform/i); if (prefix) { return "-" + (prefix[1].toLowerCase()) + "-transform"; } else { return 'transform'; } })(); css.transitionEnd = (function() { switch (css.transitionProp) { case 'transitionProperty': return 'transitionEnd'; case 'WebkitTransitionProperty': return 'webkitTransitionEnd'; case 'MozTransitionProperty': return 'transitionend'; case 'OTransitionProperty': return 'oTransitionEnd'; case 'MSTransitionProperty': return 'msTransitionEnd'; } })(); extendObj = function(target, source) { var prop; if (source !== Object(source)) { devMode && console.warn('oriDomi: Must pass an object to extend with'); return target; } if (target !== Object(target)) { target = {}; } for (prop in source) { if (!(target[prop] != null)) { target[prop] = source[prop]; } } return target; }; defaults = { vPanels: 3, hPanels: 3, perspective: 1000, shading: 'hard', speed: 700, oriDomiClass: 'oridomi', shadingIntensity: 1, easingMethod: '', showOnStart: false, forceAntialiasing: false }; OriDomi = (function() { function OriDomi(el, options) { var anchor, bleed, bottomShader, content, contentHolder, elStyle, hMask, hPanel, i, leftShader, panel, rightShader, shader, stage, topShader, vMask, vPanel, xOffset, yOffset, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _n, _o, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7; this.options = options; this.el = el.cloneNode(true); this.originalEl = el; ///this.restoreOriDomi(); var orgParent = $(this.originalEl).parent(); //if ( this.originalEl != undefined && orgParent.length > 0 ) { $(this.originalEl).detach(); orgParent.prepend( $(this.el) ); //} devMode && console.time('oridomiConstruction'); if (!oriDomiSupport) { return this.el; } if (!(this instanceof OriDomi)) { return new oriDomi(this.el, this.settings); } this.settings = extendObj(options, defaults); if (!((this.el != null) || this.el.nodeType !== 1)) { return devMode && console.warn('oriDomi: First argument must be a DOM element'); } _ref = this.settings, this.shading = _ref.shading, this.shadingIntensity = _ref.shadingIntensity, this.vPanels = _ref.vPanels, this.hPanels = _ref.hPanels; elStyle = root.getComputedStyle(this.el); this.width = parseInt(elStyle.width, 10) + parseInt(elStyle.paddingLeft, 10) + parseInt(elStyle.paddingRight, 10) + parseInt(elStyle.borderLeftWidth, 10) + parseInt(elStyle.borderRightWidth, 10); this.height = parseInt(elStyle.height, 10) + parseInt(elStyle.paddingTop, 10) + parseInt(elStyle.paddingBottom, 10) + parseInt(elStyle.borderTopWidth, 10) + parseInt(elStyle.borderBottomWidth, 10); this.panelWidth = this.width / this.vPanels; this.panelHeight = this.height / this.hPanels; this.lastAngle = 0; this.isFoldedUp = false; this.anchors = ['left', 'right', 'top', 'bottom']; this.lastAnchor = this.anchors[0]; this.panels = {}; this.stages = {}; stage = document.createElement('div'); stage.style.width = this.width + 'px'; stage.style.height = this.height + 'px'; stage.style.display = 'none'; stage.style.position = 'absolute'; stage.style.padding = '0'; stage.style.margin = '0'; stage.style[css.perspective] = this.settings.perspective + 'px'; _ref1 = this.anchors; for (_i = 0, _len = _ref1.length; _i < _len; _i++) { anchor = _ref1[_i]; this.panels[anchor] = []; this.stages[anchor] = stage.cloneNode(false); this.stages[anchor].className = 'oridomi-stage-' + anchor; } if (this.shading) { this.shaders = {}; _ref2 = this.anchors; for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) { anchor = _ref2[_j]; this.shaders[anchor] = {}; if (anchor === 'left' || anchor === 'right') { this.shaders[anchor].left = []; this.shaders[anchor].right = []; } else { this.shaders[anchor].top = []; this.shaders[anchor].bottom = []; } } shader = document.createElement('div'); shader.style[css.transitionProp] = 'opacity'; shader.style[css.transitionDuration] = this.settings.speed + 'ms'; shader.style[css.transitionEasing] = this.settings.easingMethod; shader.style.position = 'absolute'; shader.style.width = '100%'; shader.style.height = '100%'; shader.style.opacity = '0'; shader.style.top = '0'; shader.style.left = '0'; } contentHolder = this.el.cloneNode(true); contentHolder.classList.add('oridomi-content'); contentHolder.style.margin = '0'; contentHolder.style.position = 'relative'; contentHolder.style.float = 'none'; hMask = document.createElement('div'); hMask.className = 'oridomi-mask-h'; hMask.style.position = 'absolute'; hMask.style.overflow = 'hidden'; hMask.style.width = '100%'; hMask.style.height = '100%'; hMask.style[css.transform] = 'translate3d(0, 0, 0)'; hMask.appendChild(contentHolder); if (this.shading) { topShader = shader.cloneNode(false); topShader.className = 'oridomi-shader-top'; topShader.style.background = this._getShaderGradient('top'); bottomShader = shader.cloneNode(false); bottomShader.className = 'oridomi-shader-bottom'; bottomShader.style.background = this._getShaderGradient('bottom'); hMask.appendChild(topShader); hMask.appendChild(bottomShader); } bleed = 2; hPanel = document.createElement('div'); hPanel.className = 'oridomi-panel-h'; hPanel.style.width = '100%'; hPanel.style.height = this.panelHeight + bleed + 'px'; hPanel.style.padding = '0'; hPanel.style.position = 'relative'; hPanel.style[css.transitionProp] = css.transformProp; hPanel.style[css.transitionDuration] = this.settings.speed + 'ms'; hPanel.style[css.transitionEasing] = this.settings.easingMethod; hPanel.style[css.origin] = 'top'; hPanel.style[css.transformStyle] = 'preserve-3d'; hPanel.style[css.backface] = 'hidden'; if (this.settings.forceAntialiasing) { hPanel.style.outline = '1px solid transparent'; } hPanel.appendChild(hMask); _ref3 = ['top', 'bottom']; for (_k = 0, _len2 = _ref3.length; _k < _len2; _k++) { anchor = _ref3[_k]; for (i = _l = 0, _ref4 = this.hPanels; 0 <= _ref4 ? _l < _ref4 : _l > _ref4; i = 0 <= _ref4 ? ++_l : --_l) { panel = hPanel.cloneNode(true); content = panel.getElementsByClassName('oridomi-content')[0]; if (anchor === 'top') { yOffset = -(i * this.panelHeight); if (i === 0) { panel.style.top = '0'; } else { panel.style.top = this.panelHeight + 'px'; } } else { panel.style[css.origin] = 'bottom'; yOffset = -((this.hPanels * this.panelHeight) - (this.panelHeight * (i + 1))); if (i === 0) { panel.style.top = this.panelHeight * (this.vPanels - 1) - bleed + 'px'; } else { panel.style.top = -this.panelHeight + 'px'; } } content.style.top = yOffset + 'px'; if (this.shading) { this.shaders[anchor].top[i] = panel.getElementsByClassName('oridomi-shader-top')[0]; this.shaders[anchor].bottom[i] = panel.getElementsByClassName('oridomi-shader-bottom')[0]; } this.panels[anchor][i] = panel; if (i !== 0) { this.panels[anchor][i - 1].appendChild(panel); } } this.stages[anchor].appendChild(this.panels[anchor][0]); } vMask = hMask.cloneNode(true); vMask.className = 'oridomi-mask-v'; if (this.shading) { leftShader = vMask.getElementsByClassName('oridomi-shader-top')[0]; leftShader.className = 'oridomi-shader-left'; leftShader.style.background = this._getShaderGradient('left'); rightShader = vMask.getElementsByClassName('oridomi-shader-bottom')[0]; rightShader.className = 'oridomi-shader-right'; rightShader.style.background = this._getShaderGradient('right'); } vPanel = hPanel.cloneNode(false); vPanel.className = 'oridomi-panel-v'; vPanel.style.width = this.panelWidth + bleed + 'px'; vPanel.style.height = '100%'; vPanel.style[css.origin] = 'left'; vPanel.appendChild(vMask); _ref5 = ['left', 'right']; for (_m = 0, _len3 = _ref5.length; _m < _len3; _m++) { anchor = _ref5[_m]; for (i = _n = 0, _ref6 = this.vPanels; 0 <= _ref6 ? _n < _ref6 : _n > _ref6; i = 0 <= _ref6 ? ++_n : --_n) { panel = vPanel.cloneNode(true); content = panel.getElementsByClassName('oridomi-content')[0]; if (anchor === 'left') { xOffset = -(i * this.panelWidth); if (i === 0) { panel.style.left = '0'; } else { panel.style.left = this.panelWidth + 'px'; } } else { panel.style[css.origin] = 'right'; xOffset = -((this.vPanels * this.panelWidth) - (this.panelWidth * (i + 1))); if (i === 0) { panel.style.left = this.panelWidth * (this.vPanels - 1) - 1 + 'px'; } else { panel.style.left = -this.panelWidth + 'px'; } } content.style.left = xOffset + 'px'; if (this.shading) { this.shaders[anchor].left[i] = panel.getElementsByClassName('oridomi-shader-left')[0]; this.shaders[anchor].right[i] = panel.getElementsByClassName('oridomi-shader-right')[0]; } this.panels[anchor][i] = panel; if (i !== 0) { this.panels[anchor][i - 1].appendChild(panel); } } this.stages[anchor].appendChild(this.panels[anchor][0]); } this.el.classList.add(this.settings.oriDomiClass); this.el.style.padding = '0'; this.el.style.width = this.width + 'px'; this.el.style.height = this.height + 'px'; this.el.style.backgroundColor = 'transparent'; this.el.style.backgroundImage = 'none'; this.el.style.border = 'none'; this.el.style.outline = 'none'; this.stages.left.style.display = 'block'; this.el.innerHTML = ''; _ref7 = this.anchors; for (_o = 0, _len4 = _ref7.length; _o < _len4; _o++) { anchor = _ref7[_o]; this.el.appendChild(this.stages[anchor]); } if (this.settings.showOnStart) { this.el.style.display = 'block'; this.el.style.visibility = 'visible'; } if ($) { this.$el = $(this.el); } this._callback(this.settings); devMode && console.timeEnd('oridomiConstruction'); } OriDomi.prototype._callback = function(options) { var onTransitionEnd, _this = this; if (typeof options.callback === 'function') { onTransitionEnd = function(e) { e.currentTarget.removeEventListener(css.transitionEnd, onTransitionEnd, false); return options.callback(); }; if (this.lastAngle === 0) { return options.callback(); } else { return this.panels[this.lastAnchor][0].addEventListener(css.transitionEnd, onTransitionEnd, false); } } }; OriDomi.prototype._transform = function(angle, fracture) { var axes, _ref; switch (this.lastAnchor) { case 'left': axes = [0, 1, 0, angle]; break; case 'right': axes = [0, 1, 0, -angle]; break; case 'top': axes = [1, 0, 0, -angle]; break; case 'bottom': axes = [1, 0, 0, angle]; } if (fracture) { _ref = [1, 1, 1], axes[0] = _ref[0], axes[1] = _ref[1], axes[2] = _ref[2]; } return "rotate3d(" + axes[0] + ", " + axes[1] + ", " + axes[2] + ", " + axes[3] + "deg)"; }; OriDomi.prototype._normalizeAngle = function(angle) { angle = parseFloat(angle, 10); if (isNaN(angle)) { return 0; } else if (angle > 89) { devMode && console.warn('oriDomi: Maximum value is 89'); return 89; } else if (angle < -89) { devMode && console.warn('oriDomi: Minimum value is -89'); return -89; } else { return angle; } }; OriDomi.prototype._normalizeArgs = function(method, args) { var anchor, angle, options, _this = this; angle = this._normalizeAngle(args[0]); anchor = this._getLonghandAnchor(args[1]); options = extendObj(args[2], this._methodDefaults[method]); if (anchor !== this.lastAnchor || (method === 'foldUp' && this.lastAngle !== 0) || this.isFoldedUp) { this.reset(function() { _this._showStage(anchor); return setTimeout(function() { if (method === 'foldUp') { args.shift(); } return _this[method].apply(_this, args); }, 0); }); return false; } else { this.lastAngle = angle; return [angle, anchor, options]; } }; OriDomi.prototype._setShader = function(i, anchor, angle) { var a, abs, b, opacity; abs = Math.abs(angle); opacity = abs / 90 * this.shadingIntensity; if (this.shading === 'hard') { opacity *= .15; if (this.lastAngle < 0) { angle = abs; } else { angle = -abs; } } else { opacity *= .4; } switch (anchor) { case 'left': case 'top': if (angle < 0) { a = opacity; b = 0; } else { a = 0; b = opacity; } break; case 'right': case 'bottom': if (angle < 0) { a = 0; b = opacity; } else { a = opacity; b = 0; } } if (anchor === 'left' || anchor === 'right') { this.shaders[anchor].left[i].style.opacity = a; return this.shaders[anchor].right[i].style.opacity = b; } else { this.shaders[anchor].top[i].style.opacity = a; return this.shaders[anchor].bottom[i].style.opacity = b; } }; OriDomi.prototype._getShaderGradient = function(anchor) { return "" + css.gradientProp + "(" + anchor + ", rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, .35) 100%)"; }; OriDomi.prototype._showStage = function(anchor) { this.stages[anchor].style.display = 'block'; this.stages[this.lastAnchor].style.display = 'none'; return this.lastAnchor = anchor; }; OriDomi.prototype._getPanelType = function(anchor) { if (anchor === 'left' || anchor === 'right') { return this.vPanels; } else { return this.hPanels; } }; OriDomi.prototype._getLonghandAnchor = function(shorthand) { switch (shorthand) { case 'left': case 'l': case '4': case 4: return 'left'; case 'right': case 'r': case '2': case 2: return 'right'; case 'top': case 't': case '1': case 1: return 'top'; case 'bottom': case 'b': case '3': case 3: return 'bottom'; default: return 'left'; } }; OriDomi.prototype._methodDefaults = { accordion: { sticky: false, stairs: false, fracture: false, twist: false }, curl: { twist: false }, ramp: {}, foldUp: {} }; OriDomi.prototype.reset = function(callback) { var i, panel, _i, _len, _ref; if (this.isFoldedUp) { return this.unfold(callback); } _ref = this.panels[this.lastAnchor]; for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { panel = _ref[i]; panel.style[css.transform] = this._transform(0); if (this.shading) { this._setShader(i, this.lastAnchor, 0); } } return this._callback({ callback: callback }); }; OriDomi.prototype.accordion = function(angle, anchor, options) { var deg, i, normalized, panel, _i, _len, _ref; normalized = this._normalizeArgs('accordion', arguments); if (!normalized) { return; } angle = normalized[0], anchor = normalized[1], options = normalized[2]; _ref = this.panels[anchor]; for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { panel = _ref[i]; if (i % 2 !== 0 && !options.twist) { deg = -angle; } else { deg = angle; } if (options.sticky) { if (i === 0) { deg = 0; } else if (i > 1 || options.stairs) { deg *= 2; } } else { if (i !== 0) { deg *= 2; } } if (options.stairs) { deg = -deg; } panel.style[css.transform] = this._transform(deg, options.fracture); if (this.shading && !(i === 0 && options.sticky) && Math.abs(deg) !== 180) { this._setShader(i, anchor, deg); } } return this._callback(options); }; OriDomi.prototype.curl = function(angle, anchor, options) { var i, normalized, panel, _i, _len, _ref; normalized = this._normalizeArgs('curl', arguments); if (!normalized) { return; } angle = normalized[0], anchor = normalized[1], options = normalized[2]; angle /= this._getPanelType(anchor); _ref = this.panels[anchor]; for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { panel = _ref[i]; panel.style[css.transform] = this._transform(angle); if (this.shading) { this._setShader(i, anchor, 0); } } return this._callback(options); }; OriDomi.prototype.ramp = function(angle, anchor, options) { var i, normalized, panel, _i, _len, _ref; normalized = this._normalizeArgs('ramp', arguments); if (!normalized) { return; } angle = normalized[0], anchor = normalized[1], options = normalized[2]; this.panels[anchor][1].style[css.transform] = this._transform(angle); _ref = this.panels[anchor]; for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { panel = _ref[i]; if (i > 1) { this.panels[anchor][i].style[css.transform] = this._transform(0); } if (this.shading) { this._setShader(i, anchor, 0); } } return this._callback(options); }; OriDomi.prototype.foldUp = function(anchor, callback) { var angle, i, nextPanel, normalized, onTransitionEnd, _this = this; if (!anchor) { anchor = 'left'; } else if (typeof anchor === 'function') { callback = anchor; } normalized = this._normalizeArgs('foldUp', [0, anchor, {}]); if (!normalized) { return; } anchor = normalized[1]; this.isFoldedUp = true; i = this.panels[anchor].length - 1; angle = 100; nextPanel = function() { _this.panels[anchor][i].addEventListener(css.transitionEnd, onTransitionEnd, false); _this.panels[anchor][i].style[css.transform] = _this._transform(angle); if (_this.shading) { return _this._setShader(i, anchor, angle); } }; onTransitionEnd = function(e) { _this.panels[anchor][i].removeEventListener(css.transitionEnd, onTransitionEnd, false); _this.panels[anchor][i].style.display = 'none'; if (--i === 0) { if (typeof callback === 'function') { return callback(); } } else { return setTimeout(nextPanel, 0); } }; return nextPanel(); }; OriDomi.prototype.unfold = function(callback) { var angle, i, nextPanel, onTransitionEnd, _this = this; if (!this.isFoldedUp) { if (typeof callback === 'function') { callback(); } } this.isFoldedUp = false; i = 1; angle = 0; nextPanel = function() { _this.panels[_this.lastAnchor][i].style.display = 'block'; return setTimeout(function() { _this.panels[_this.lastAnchor][i].addEventListener(css.transitionEnd, onTransitionEnd, false); _this.panels[_this.lastAnchor][i].style[css.transform] = _this._transform(angle); if (_this.shading) { return _this._setShader(i, _this.lastAnchor, angle); } }, 0); }; onTransitionEnd = function(e) { _this.panels[_this.lastAnchor][i].removeEventListener(css.transitionEnd, onTransitionEnd, false); if (++i === _this.panels[_this.lastAnchor].length) { if (typeof callback === 'function') { return callback(); } } else { return setTimeout(nextPanel, 0); } }; return nextPanel(); }; OriDomi.prototype.collapse = function(anchor, options) { if (options == null) { options = {}; } options.sticky = false; return this.accordion(-89, anchor, options); }; OriDomi.prototype.collapseAlt = function(anchor, options) { if (options == null) { options = {}; } options.sticky = false; return this.accordion(89, anchor, options); }; OriDomi.prototype.reveal = function(angle, anchor, options) { if (options == null) { options = {}; } options.sticky = true; return this.accordion(angle, anchor, options); }; OriDomi.prototype.stairs = function(angle, anchor, options) { if (options == null) { options = {}; } options.stairs = true; options.sticky = true; return this.accordion(angle, anchor, options); }; OriDomi.prototype.fracture = function(angle, anchor, options) { if (options == null) { options = {}; } options.fracture = true; return this.accordion(angle, anchor, options); }; OriDomi.prototype.twist = function(angle, anchor, options) { if (options == null) { options = {}; } options.fracture = true; options.twist = true; return this.accordion(angle / 10, anchor, options); }; OriDomi.prototype.destroy = function() { var elParent = $(this.el).parent(); $(this.el).remove(); elParent.append( $(this.originalEl) ); $.data(this.originalEl, 'oriDomi', undefined); delete this; }; OriDomi.prototype.restoreDOM = function() { var elParent = $(this.el).parent(); if ( this.originalEl != undefined && elParent.length > 0 ) { $(this.el).detach(); elParent.prepend( $(this.originalEl) ); } }; OriDomi.prototype.restoreOriDomi = function() { var orgParent = $(this.originalEl).parent(); if ( this.originalEl != undefined && orgParent.length > 0 ) { //$(this.originalEl).detach(); //orgParent.prepend( $(this.el) ); var el = this.originalEl; var options = this.options; this.destroy(); $.data(el, 'oriDomi', new OriDomi(el, options)); } }; return OriDomi; })(); OriDomi.VERSION = '0.1.2'; OriDomi.devMode = function() { return devMode = true; }; root.OriDomi = OriDomi; if ($) { $.fn.oriDomi = function(options) { var args, el, instance, _i, _j, _len, _len1; if (!oriDomiSupport) { return this; } if (typeof options === 'string') { if (typeof OriDomi.prototype[options] !== 'function') { return devMode && console.warn("oriDomi: No such method '" + options + "'"); } for (_i = 0, _len = this.length; _i < _len; _i++) { el = this[_i]; instance = $.data(el, 'oriDomi'); if (instance == null) { return devMode && console.warn("oriDomi: Can't call " + options + ", oriDomi hasn't been initialized on this element"); } args = Array.prototype.slice.call(arguments); args.shift(); instance[options].apply(instance, args); } return this; } else { for (_j = 0, _len1 = this.length; _j < _len1; _j++) { el = this[_j]; instance = $.data(el, 'oriDomi'); if (instance) { return instance; } else { $.data(el, 'oriDomi', new OriDomi(el, options)); } } return this; } }; } }).call(this);