Added examples of "folding sidebar" using oriDomi open source toolkit
This commit is contained in:
Andrew Trice
parent
f8929fc583
commit
ebdf914795
|
|
@ -2,3 +2,27 @@
|
|||
src/.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 {
|
||||
padding: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);
|
||||
}*/
|
||||
|
||||
this.sidebar.trigger( "slidingViewProgress", { current: targetX, max:this.sidebarWidth } );
|
||||
|
||||
this.gestureStartPosition = currentPosition;
|
||||
}
|
||||
|
||||
|
|
@ -166,6 +168,8 @@ SlidingView.prototype.snapToPosition = function() {
|
|||
avoidTransforms:false,
|
||||
useTranslate3d: true
|
||||
}, 100);
|
||||
|
||||
this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue