moparisthebest/app-UI
1
0
Fork 0
mirror of https://github.com/moparisthebest/app-UI synced 2024-12-21 23:18:52 -05:00
Code Issues Releases Wiki Activity

Added examples of "folding sidebar" using oriDomi open source toolkit

Browse Source
This commit is contained in:
Andrew Trice 2012-08-29 16:01:26 -04:00
parent f8929fc583
commit ebdf914795
7 changed files with 1118 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored
View File

@ -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

BIN
samples/03 - slidingView/.DS_Store vendored
View File

Binary file not shown.

2
samples/03 - slidingView/03 - swipeview/style.css
View File

@ -1,4 +1,4 @@
html, body { height:100%; }
body {
padding:0;
margin:0;

106
samples/03 - slidingView/04 - oridomi/index.html Normal file
View File

@ -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>

163
samples/03 - slidingView/05 - oridomi w viewnav/index.html Normal file
View File

@ -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>

820
src/libs/oriDomi.js Normal file
View File

@ -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);

4
src/slidingview/slidingview.js
View File

@ -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 } );
}
}