821 lines
26 KiB
JavaScript
821 lines
26 KiB
JavaScript
// 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);
|