Added examples of "folding sidebar" using oriDomi open source toolkit
This commit is contained in:
parent
f8929fc583
commit
ebdf914795
|
@ -2,3 +2,27 @@
|
||||||
src/.DS_Store
|
src/.DS_Store
|
||||||
|
|
||||||
src/libs/.DS_Store
|
src/libs/.DS_Store
|
||||||
|
|
||||||
|
.idea/.name
|
||||||
|
|
||||||
|
.idea/app-UI.iml
|
||||||
|
|
||||||
|
.idea/encodings.xml
|
||||||
|
|
||||||
|
.idea/misc.xml
|
||||||
|
|
||||||
|
.idea/modules.xml
|
||||||
|
|
||||||
|
.idea/scopes/scope_settings.xml
|
||||||
|
|
||||||
|
.idea/vcs.xml
|
||||||
|
|
||||||
|
.idea/workspace.xml
|
||||||
|
|
||||||
|
examples/samples/.DS_Store
|
||||||
|
|
||||||
|
examples/samples/03 - slidingView/.DS_Store
|
||||||
|
|
||||||
|
samples/.DS_Store
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
|
|
Binary file not shown.
|
@ -1,4 +1,4 @@
|
||||||
html, body { height:100%; }
|
|
||||||
body {
|
body {
|
||||||
padding:0;
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
|
|
|
@ -0,0 +1,106 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/html">
|
||||||
|
<head>
|
||||||
|
<title>Sliding View Sample</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
|
||||||
|
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
||||||
|
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||||
|
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||||
|
<script src="../../../src/libs/oriDomi.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var sv;
|
||||||
|
$(document).ready( function() {
|
||||||
|
|
||||||
|
//Setup the ViewNavigator
|
||||||
|
sv = new SlidingView( 'sidebar', 'body' );
|
||||||
|
sv.sidebarWidth = 420;
|
||||||
|
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 });
|
||||||
|
sv.sidebar.oriDomi( 'accordion', 90 );
|
||||||
|
sv.sidebar.bind( "slidingViewProgress", function(event, data) {
|
||||||
|
|
||||||
|
var fudge = 1
|
||||||
|
var half = data.max/2;
|
||||||
|
if ( data.current < half ) {
|
||||||
|
fudge = (data.current)/half
|
||||||
|
} else if ( data.current > half ) {
|
||||||
|
fudge = (half-(data.current-half))/half
|
||||||
|
}
|
||||||
|
fudge *= 15
|
||||||
|
|
||||||
|
var angle = 90-((90*(data.current/data.max)));
|
||||||
|
//console.log( (angle+fudge) );
|
||||||
|
|
||||||
|
if ( (angle+fudge) > 0 ) {
|
||||||
|
|
||||||
|
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||||
|
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} );
|
||||||
|
|
||||||
|
function sidebarClick() {
|
||||||
|
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||||
|
console.log(color);
|
||||||
|
$('#sidebar').css('color', color );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width:400px;
|
||||||
|
height:100%;
|
||||||
|
padding:10px;
|
||||||
|
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
|
||||||
|
background-color: red;
|
||||||
|
padding:10px;
|
||||||
|
font-size:36pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
#body {
|
||||||
|
background-color: #555;
|
||||||
|
padding:10px;
|
||||||
|
text-align:center;
|
||||||
|
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="slidingview_wrapper">
|
||||||
|
<div id="sidebar">
|
||||||
|
<button ontouchstart="sidebarClick()">Tap To Change Text Color</button>
|
||||||
|
<hr/>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lorem nec vestibulum placerat, turpis nunc porttitor urna, non consectetur mauris eros vitae urna. Vestibulum at augue nisi. Suspendisse lobortis, libero vel adipiscing egestas, quam mi rhoncus justo, id imperdiet ligula nibh porta massa.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="body">
|
||||||
|
<h1 style="color:white; font-size:50pt;">Swipe horizontally to reveal the sidebar</h1>
|
||||||
|
<p style="color:white;">Created with <a href="http://oridomi.com/">http://oridomi.com/</a>, works on iOS devices.</p>
|
||||||
|
|
||||||
|
<img src="http://incubator.apache.org/cordova/images/cordova_256.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,163 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Sliding View Sample</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
|
||||||
|
<script src="../../../src/libs/jquery-1.7.1.js"></script>
|
||||||
|
<script src="../../../src/libs/jquery.animate-enhanced.js"></script>
|
||||||
|
<script src="../../../src/libs/iscroll.js"></script>
|
||||||
|
<script src="../../../src/libs/noClickDelay.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
|
||||||
|
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
|
||||||
|
<script src="../../../src/slidingview/slidingview.js"></script>
|
||||||
|
<script src="../../../src/libs/oriDomi.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #eee;
|
||||||
|
padding:0px;
|
||||||
|
overflow:hidden;
|
||||||
|
border-left:1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width:420px;
|
||||||
|
padding:0px;
|
||||||
|
overflow:hidden;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .viewNavigator_header {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar .viewNavigator_contentHolder,
|
||||||
|
#sidebar .viewNavigator_content {
|
||||||
|
background: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var sv;
|
||||||
|
$(document).ready( function() {
|
||||||
|
|
||||||
|
//Setup the ViewNavigator
|
||||||
|
//Setup the default views
|
||||||
|
var leftView = getView( "left" );
|
||||||
|
leftView.backLabel = null;
|
||||||
|
|
||||||
|
var rightView = getView( "right" );
|
||||||
|
rightView.backLabel = null;
|
||||||
|
|
||||||
|
|
||||||
|
sv = new SlidingView( 'sidebar', 'body' );
|
||||||
|
|
||||||
|
//Setup the ViewNavigator
|
||||||
|
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
|
||||||
|
window.leftViewNavigator.pushView( leftView );
|
||||||
|
|
||||||
|
window.rightViewNavigator = new ViewNavigator( '#body' );
|
||||||
|
window.rightViewNavigator.pushView( rightView );
|
||||||
|
|
||||||
|
//setup oridomi
|
||||||
|
sv.sidebarWidth = 420;
|
||||||
|
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 });
|
||||||
|
sv.sidebar.oriDomi( 'accordion', 90 );
|
||||||
|
sv.sidebar.bind( "slidingViewProgress", function(event, data) {
|
||||||
|
|
||||||
|
var fudge = 1
|
||||||
|
var half = data.max/2;
|
||||||
|
if ( data.current < half ) {
|
||||||
|
fudge = (data.current)/half
|
||||||
|
} else if ( data.current > half ) {
|
||||||
|
fudge = (half-(data.current-half))/half
|
||||||
|
}
|
||||||
|
fudge *= 15
|
||||||
|
|
||||||
|
var angle = 90-((90*(data.current/data.max)));
|
||||||
|
//console.log( (angle+fudge) );
|
||||||
|
|
||||||
|
if ( (angle+fudge) > 0 ) {
|
||||||
|
|
||||||
|
sv.sidebar.oriDomi( 'restoreOriDomi' );
|
||||||
|
sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sv.sidebar.oriDomi( 'restoreDOM' );
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} );
|
||||||
|
|
||||||
|
function sidebarClick() {
|
||||||
|
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
|
||||||
|
console.log(color);
|
||||||
|
$('#sidebar').css('color', color );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function leftPushView() {
|
||||||
|
//create a view and push it onto the view navigator
|
||||||
|
var view = getView("left");
|
||||||
|
window.leftViewNavigator.pushView( view );
|
||||||
|
}
|
||||||
|
|
||||||
|
function leftPopView() {
|
||||||
|
//pop a view from the view navigator
|
||||||
|
window.leftViewNavigator.popView();
|
||||||
|
}
|
||||||
|
|
||||||
|
function rightPushView() {
|
||||||
|
//create a view and push it onto the view navigator
|
||||||
|
var view = getView("right");
|
||||||
|
window.rightViewNavigator.pushView( view );
|
||||||
|
}
|
||||||
|
|
||||||
|
function rightPopView() {
|
||||||
|
//pop a view from the view navigator
|
||||||
|
window.rightViewNavigator.popView();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getView( side ) {
|
||||||
|
//create a view descriptor with random content
|
||||||
|
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="'+side+'PushView()" class="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
|
||||||
|
var links = bodyView.find('a');
|
||||||
|
|
||||||
|
return { title: side + "Default View " + parseInt(Math.random()*1000),
|
||||||
|
backLabel: "Back",
|
||||||
|
view: bodyView
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMeat() {
|
||||||
|
//randomly generate content
|
||||||
|
//text string generated by http://baconipsum.com/
|
||||||
|
var iterations = 1 + parseInt(Math.random() * 5);
|
||||||
|
var result = "";
|
||||||
|
for ( var i = 0; i < iterations; i ++ ) {
|
||||||
|
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="slidingview_wrapper">
|
||||||
|
<div id="sidebar"></div>
|
||||||
|
<div id="body"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,820 @@
|
||||||
|
// 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);
|
|
@ -139,6 +139,8 @@ SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) {
|
||||||
}, 100);
|
}, 100);
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
|
this.sidebar.trigger( "slidingViewProgress", { current: targetX, max:this.sidebarWidth } );
|
||||||
|
|
||||||
this.gestureStartPosition = currentPosition;
|
this.gestureStartPosition = currentPosition;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -166,6 +168,8 @@ SlidingView.prototype.snapToPosition = function() {
|
||||||
avoidTransforms:false,
|
avoidTransforms:false,
|
||||||
useTranslate3d: true
|
useTranslate3d: true
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue