moparisthebest
/
app-UI
mirror of https://github.com/moparisthebest/app-UI
1
0
Fork 0
Code Issues Releases Wiki Activity

merged commits from pull#38 

merged commits from pull #38
also added legacy support for any code pre-options parameters
This commit is contained in:
Andrew Trice 2013-02-08 16:22:05 -05:00
parent 03e2f76ab1
commit 8be7936004
19 changed files with 5974 additions and 928 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.idea/libraries/sass_stdlib.xml Normal file
View File

@ -0,0 +1,8 @@
<component name="libraryTable">
<library name="sass-stdlib">
<CLASSES />
<SOURCES>
<root url="file://$APPLICATION_HOME_DIR$/plugins/sass/lib/stubs/sass_functions.scss" />
</SOURCES>
</library>
</component>

50
samples/01 - viewnavigator/01 - basic/index.html
View File

@ -1,67 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View Navigator 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>
<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>
<script>
$(document).ready( function() {
//Setup the default view
var defaultView = getView();
defaultView.backLabel = null;
//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( defaultView );
} );
function pushView() {
function pushView() {
//create a view and push it onto the view navigator
var view = getView();
window.viewNavigator.pushView( view );
}
function popView() {
function popView() {
//pop a view from the view navigator
window.viewNavigator.popView();
}
function getView() {
//create a view descriptor with random content
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="pushView()" class="viewNavigator_backButton">push view</li> <li href="#" onclick="popView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
var links = bodyView.find('a');
return { title: "Default View " + parseInt(Math.random()*1000),
return { title: "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() * 25);
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>"
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></body>
</html>
</html>

4123
samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js Normal file
View File

File diff suppressed because it is too large Load Diff

66
samples/01 - viewnavigator/03 - multi instance/index.html
View File

@ -1,19 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View Navigator Multiple Instances</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>
<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>
<style>
#leftDiv {
position: absolute;
top: 0px;
@ -39,72 +39,72 @@
<script>
$(document).ready( function() {
//Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
//Setup the ViewNavigator
window.leftViewNavigator = new ViewNavigator( '#leftDiv' );
window.leftViewNavigator = new ViewNavigator( '#leftDiv' );
window.leftViewNavigator.pushView( leftView );
window.rightViewNavigator = new ViewNavigator( '#rightDiv' );
window.rightViewNavigator = new ViewNavigator( '#rightDiv' );
window.rightViewNavigator.pushView( rightView );
} );
function leftPushView() {
function leftPushView() {
//create a view and push it onto the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}
function leftPopView() {
function leftPopView() {
//pop a view from the view navigator
window.leftViewNavigator.popView();
}
function rightPushView() {
function rightPushView() {
//create a view and push it onto the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}
function rightPopView() {
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');
/*for ( var i=0; i<links.length; i++)
{
NoClickDelay( links[i] );
}*/
return { title: side + "Default View " + parseInt(Math.random()*1000),
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() * 25);
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>"
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>
@ -112,4 +112,4 @@
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</body>
</html>
</html>

50
samples/01 - viewnavigator/04 - form elements/index.html
View File

@ -1,57 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View Navigator 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>
<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>
<script>
$(document).ready( function() {
//Setup the default view
var defaultView = getView();
defaultView.backLabel = null;
//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( defaultView );
} );
function pushView() {
function pushView() {
//create a view and push it onto the view navigator
var view = getView();
window.viewNavigator.pushView( view );
}
function popView() {
function popView() {
//pop a view from the view navigator
window.viewNavigator.popView();
}
function getView() {
//create a view descriptor with random content
var bodyView =$('<div id="defaultView"><input type="text" placeholder="Email" /> <br/><textarea type="text" placeholder="Text Area" /> <br/>' +
'<select><option value="volvo">Red</option><option value="saab">White</option><option value="mercedes">Blue</option></select></div>');
var bodyView =$('<div id="defaultView"><input type="text" placeholder="Email" /> <br/><textarea type="text" placeholder="Text Area" /> <br/>' +
'<select><option value="volvo">Red</option><option value="saab">White</option><option value="mercedes">Blue</option></select></div>');
var links = bodyView.find('a');
return { title: "Default View " + parseInt(Math.random()*1000),
return { title: "Default View " + parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}
</script>
</head>
<body></body>
</html>
</html>

BIN
samples/01 - viewnavigator/05 - legacy/assets/header_bg_wood.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

208
samples/01 - viewnavigator/05 - legacy/index.html Normal file
View File

@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>
<head>
<title>TV Listings</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>
<script type="text/javascript" src="libs/jquery.address-1.4.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style>
body,ul,li,header,nav,aside,section,article,p,a {
padding:0;
margin:0;
border:0;
}
body {
font: normal 1.25em Helvetica;
background: #333;
}
object{
-webkit-overflow-scrolling: touch;
}
#iframeWrapper {
width: 100%;
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
iframe {
width: 100%;
min-height:100%;
background-color: rgba(0,0,0,0);
border: none;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.viewNavigator_header {
background-color: #333;
background: url("./assets/header_bg_wood.png") repeat;
font: bold 1em Helvetica;
}
.viewNavigator_content {
border-top: 2px solid #666;
background-color: #333;
}
.viewNavigator_contentHolder {
background-color: #333;
}
.viewNavigator_header_title {
max-width:100%;
text-shadow: 1px 2px #777;
}
.headerButton {
-webkit-box-shadow:inset 0px 1px 0px 0px #999;
box-shadow:inset 0px 1px 0px 0px #999;
background-color:rgba(128,128,128,0.65);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #777;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #736d73;
padding: 6px;
padding-top:5px;
padding-bottom:4px;
}.headerButton:active {
position:relative;
top:1px;
}
.listItem {
padding:0 10px;
background-color: #222;
color:white;
border-bottom:1px solid #888;
border-bottom:1px solid #444;
height:40px; line-height:40px;
font-weight:bold;
cursor:pointer;
text-shadow: 1px 2px #777;
display:block;
text-decoration:none;
}
.oddRow {
background-color: #333;
}
.listSelected {
background:#015FE6;
background-color:#015FE6;
color: #FFF;
font-weight:bold;
}
</style>
<script>
// jQuery Address Event handlers
$.address.externalChange(function(event) {
var text = event.value.substr(1);
if ( text.length > 0 ) {
loadView( text );
window.defaultView.find("a").each(function(i){
var $this = $(this);
if ($this.text() == text ) {
$this.addClass( "listSelected" );
}
});
$(this).addClass( "listSelected" );
}
else {
resetList();
window.viewNavigator.popView();
$.address.value("");
}
});
$(document).ready( function() {
//Setup the default view
var template = $("#defaultViewTemplate").html();
window.defaultView = $(template);
defaultViewDescriptor = { title: "TV Listings",
view: window.defaultView
};
//Setup the ViewNavigator
window.viewNavigator = new ViewNavigator( 'body', 'headerButton' );
window.viewNavigator.pushView( defaultViewDescriptor );
});
function loadView( title ) {
var html = "<div style='min-height:100%; background:#FFF; padding: 3px 15px;'><h1>" + title + "</h1><strong>Cable television</strong> is a system of providing television programs to consumers via radio frequency (RF) signals transmitted to televisions through coaxial cables or digital light pulses through fixed optical fibers located on the subscriber's property. This can be compared to over-the-air method used in traditional broadcast television (via radio waves) in which a television antenna is required. FM radio programming, high-speed Internet, telephony, and similar non-television services may also be provided through cable television. Source: <a href='http://en.wikipedia.org/wiki/Cable_tv'>http://en.wikipedia.org/wiki/Cable_tv</a></div>";
var iframeView = { title: title,
backLabel: "Home",
view: $(html),
backCallback: handleNavigateBack
};
window.viewNavigator.pushView( iframeView );
}
function handleNavigateBack() {
resetList();
history.back();
}
function resetList() {
window.defaultView.find("a").each(function(i){
$(this).removeClass( "listSelected" );
});
}
</script>
</head>
<body></body>
<script type="text/html" id="defaultViewTemplate">
<ul>
<a class="listItem" href="#CBS">CBS</a>
<a class="listItem oddRow" href="#NBC">NBC</a>
<a class="listItem" href="#FOX">FOX</a>
<a class="listItem oddRow" href="#ABC">ABC</a>
<a class="listItem" href="#TLC">TLC</a>
<a class="listItem oddRow" href="#CNN">CNN</a>
<a class="listItem" href="#Food Network">Food Network</a>
<a class="listItem oddRow" href="#ESPN">ESPN</a>
<a class="listItem" href="#TBS">TBS</a>
<a class="listItem oddRow" href="#USA">USA</a>
<a class="listItem" href="#MTV">MTV</a>
</ul>
</script>
</html>

655
samples/01 - viewnavigator/05 - legacy/libs/jquery.address-1.4.js Normal file
View File

@ -0,0 +1,655 @@
/*
* jQuery Address Plugin v1.4
* http://www.asual.com/jquery/address/
*
* Copyright (c) 2009-2010 Rostislav Hristov
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Date: 2011-05-04 14:22:12 +0300 (Wed, 04 May 2011)
*/
(function ($) {
$.address = (function () {
var _trigger = function(name) {
$($.address).trigger(
$.extend($.Event(name),
(function() {
var parameters = {},
parameterNames = $.address.parameterNames();
for (var i = 0, l = parameterNames.length; i < l; i++) {
parameters[parameterNames[i]] = $.address.parameter(parameterNames[i]);
}
return {
value: $.address.value(),
path: $.address.path(),
pathNames: $.address.pathNames(),
parameterNames: parameterNames,
parameters: parameters,
queryString: $.address.queryString()
};
}).call($.address)
)
);
},
_bind = function(value, data, fn) {
$().bind.apply($($.address), Array.prototype.slice.call(arguments));
return $.address;
},
_supportsState = function() {
return (_h.pushState && _opts.state !== UNDEFINED);
},
_hrefState = function() {
return ('/' + _l.pathname.replace(new RegExp(_opts.state), '') +
_l.search + (_hrefHash() ? '#' + _hrefHash() : '')).replace(_re, '/');
},
_hrefHash = function() {
var index = _l.href.indexOf('#');
return index != -1 ? _crawl(_l.href.substr(index + 1), FALSE) : '';
},
_href = function() {
return _supportsState() ? _hrefState() : _hrefHash();
},
_window = function() {
try {
return top.document !== UNDEFINED ? top : window;
} catch (e) {
return window;
}
},
_js = function() {
return 'javascript';
},
_strict = function(value) {
value = value.toString();
return (_opts.strict && value.substr(0, 1) != '/' ? '/' : '') + value;
},
_crawl = function(value, direction) {
if (_opts.crawlable && direction) {
return (value !== '' ? '!' : '') + value;
}
return value.replace(/^\!/, '');
},
_cssint = function(el, value) {
return parseInt(el.css(value), 10);
},
_search = function(el) {
var url, s;
for (var i = 0, l = el.childNodes.length; i < l; i++) {
try {
if ('src' in el.childNodes[i] && el.childNodes[i].src) {
url = String(el.childNodes[i].src);
}
} catch (e) {
// IE Invalid pointer problem with base64 encoded images
}
s = _search(el.childNodes[i]);
if (s) {
url = s;
}
}
return url;
},
_listen = function() {
if (!_silent) {
var hash = _href(),
diff = _value != hash;
if (diff) {
if (_msie && _version < 7) {
_l.reload();
} else {
if (_msie && _version < 8 && _opts.history) {
_st(_html, 50);
}
_value = hash;
_update(FALSE);
}
}
}
},
_update = function(internal) {
_trigger(CHANGE);
_trigger(internal ? INTERNAL_CHANGE : EXTERNAL_CHANGE);
_st(_track, 10);
},
_track = function() {
if (_opts.tracker !== 'null' && _opts.tracker !== null) {
var fn = $.isFunction(_opts.tracker) ? _opts.tracker : _t[_opts.tracker],
value = (_l.pathname + _l.search +
($.address && !_supportsState() ? $.address.value() : ''))
.replace(/\/\//, '/').replace(/^\/$/, '');
if ($.isFunction(fn)) {
fn(value);
} else if ($.isFunction(_t.urchinTracker)) {
_t.urchinTracker(value);
} else if (_t.pageTracker !== UNDEFINED && $.isFunction(_t.pageTracker._trackPageview)) {
_t.pageTracker._trackPageview(value);
} else if (_t._gaq !== UNDEFINED && $.isFunction(_t._gaq.push)) {
_t._gaq.push(['_trackPageview', decodeURI(value)]);
}
}
},
_html = function() {
var src = _js() + ':' + FALSE + ';document.open();document.writeln(\'<html><head><title>' +
_d.title.replace('\'', '\\\'') + '</title><script>var ' + ID + ' = "' + encodeURIComponent(_href()) +
(_d.domain != _l.hostname ? '";document.domain="' + _d.domain : '') +
'";</' + 'script></head></html>\');document.close();';
if (_version < 7) {
_frame.src = src;
} else {
_frame.contentWindow.location.replace(src);
}
},
_options = function() {
if (_url && _qi != -1) {
var param, params = _url.substr(_qi + 1).split('&');
for (i = 0; i < params.length; i++) {
param = params[i].split('=');
if (/^(autoUpdate|crawlable|history|strict|wrap)$/.test(param[0])) {
_opts[param[0]] = (isNaN(param[1]) ? /^(true|yes)$/i.test(param[1]) : (parseInt(param[1], 10) !== 0));
}
if (/^(state|tracker)$/.test(param[0])) {
_opts[param[0]] = param[1];
}
}
_url = null;
}
_value = _href();
},
_load = function() {
if (!_loaded) {
_loaded = TRUE;
_options();
var complete = function() {
_enable.call(this);
_unescape.call(this);
},
body = $('body').ajaxComplete(complete);
complete();
if (_opts.wrap) {
var wrap = $('body > *')
.wrapAll('<div style="padding:' +
(_cssint(body, 'marginTop') + _cssint(body, 'paddingTop')) + 'px ' +
(_cssint(body, 'marginRight') + _cssint(body, 'paddingRight')) + 'px ' +
(_cssint(body, 'marginBottom') + _cssint(body, 'paddingBottom')) + 'px ' +
(_cssint(body, 'marginLeft') + _cssint(body, 'paddingLeft')) + 'px;" />')
.parent()
.wrap('<div id="' + ID + '" style="height:100%;overflow:auto;position:relative;' +
(_webkit && !window.statusbar.visible ? 'resize:both;' : '') + '" />');
$('html, body')
.css({
height: '100%',
margin: 0,
padding: 0,
overflow: 'hidden'
});
if (_webkit) {
$('<style type="text/css" />')
.appendTo('head')
.text('#' + ID + '::-webkit-resizer { background-color: #fff; }');
}
}
if (_msie && _version < 8) {
var frameset = _d.getElementsByTagName('frameset')[0];
_frame = _d.createElement((frameset ? '' : 'i') + 'frame');
if (frameset) {
frameset.insertAdjacentElement('beforeEnd', _frame);
frameset[frameset.cols ? 'cols' : 'rows'] += ',0';
_frame.noResize = TRUE;
_frame.frameBorder = _frame.frameSpacing = 0;
} else {
_frame.style.display = 'none';
_frame.style.width = _frame.style.height = 0;
_frame.tabIndex = -1;
_d.body.insertAdjacentElement('afterBegin', _frame);
}
_st(function() {
$(_frame).bind('load', function() {
var win = _frame.contentWindow;
_value = win[ID] !== UNDEFINED ? win[ID] : '';
if (_value != _href()) {
_update(FALSE);
_l.hash = _crawl(_value, TRUE);
}
});
if (_frame.contentWindow[ID] === UNDEFINED) {
_html();
}
}, 50);
}
_st(function() {
_trigger('init');
_update(FALSE);
}, 1);
if (!_supportsState()) {
if ((_msie && _version > 7) || (!_msie && ('on' + HASH_CHANGE) in _t)) {
if (_t.addEventListener) {
_t.addEventListener(HASH_CHANGE, _listen, FALSE);
} else if (_t.attachEvent) {
_t.attachEvent('on' + HASH_CHANGE, _listen);
}
} else {
_si(_listen, 50);
}
}
}
},
_enable = function() {
var el,
elements = $('a'),
length = elements.size(),
delay = 1,
index = -1,
fn = function() {
if (++index != length) {
el = $(elements.get(index));
if (el.is('[rel*="address:"]')) {
el.address();
}
_st(fn, delay);
}
};
_st(fn, delay);
},
_popstate = function() {
if (_value != _href()) {
_value = _href();
_update(FALSE);
}
},
_unload = function() {
if (_t.removeEventListener) {
_t.removeEventListener(HASH_CHANGE, _listen, FALSE);
} else if (_t.detachEvent) {
_t.detachEvent('on' + HASH_CHANGE, _listen);
}
},
_unescape = function() {
if (_opts.crawlable) {
var base = _l.pathname.replace(/\/$/, ''),
fragment = '_escaped_fragment_';
if ($('body').html().indexOf(fragment) != -1) {
$('a[href]:not([href^=http]), a[href*="' + document.domain + '"]').each(function() {
var href = $(this).attr('href').replace(/^http:/, '').replace(new RegExp(base + '/?$'), '');
if (href === '' || href.indexOf(fragment) != -1) {
$(this).attr('href', '#' + href.replace(new RegExp('/(.*)\\?' + fragment + '=(.*)$'), '!$2'));
}
});
}
}
},
UNDEFINED,
ID = 'jQueryAddress',
STRING = 'string',
HASH_CHANGE = 'hashchange',
INIT = 'init',
CHANGE = 'change',
INTERNAL_CHANGE = 'internalChange',
EXTERNAL_CHANGE = 'externalChange',
TRUE = true,
FALSE = false,
_opts = {
autoUpdate: TRUE,
crawlable: FALSE,
history: TRUE,
strict: TRUE,
wrap: FALSE
},
_browser = $.browser,
_version = parseFloat($.browser.version),
_mozilla = _browser.mozilla,
_msie = _browser.msie,
_opera = _browser.opera,
_webkit = _browser.webkit || _browser.safari,
_supported = FALSE,
_t = _window(),
_d = _t.document,
_h = _t.history,
_l = _t.location,
_si = setInterval,
_st = setTimeout,
_re = /\/{2,9}/g,
_agent = navigator.userAgent,
_frame,
_form,
_url = _search(document),
_qi = _url ? _url.indexOf('?') : -1,
_title = _d.title,
_silent = FALSE,
_loaded = FALSE,
_justset = TRUE,
_juststart = TRUE,
_updating = FALSE,
_listeners = {},
_value = _href();
if (_msie) {
_version = parseFloat(_agent.substr(_agent.indexOf('MSIE') + 4));
if (_d.documentMode && _d.documentMode != _version) {
_version = _d.documentMode != 8 ? 7 : 8;
}
var pc = _d.onpropertychange;
_d.onpropertychange = function() {
if (pc) {
pc.call(_d);
}
if (_d.title != _title && _d.title.indexOf('#' + _href()) != -1) {
_d.title = _title;
}
};
}
_supported =
(_mozilla && _version >= 1) ||
(_msie && _version >= 6) ||
(_opera && _version >= 9.5) ||
(_webkit && _version >= 523);
if (_supported) {
if (_opera) {
history.navigationMode = 'compatible';
}
if (document.readyState == 'complete') {
var interval = setInterval(function() {
if ($.address) {
_load();
clearInterval(interval);
}
}, 50);
} else {
_options();
$(_load);
}
$(window).bind('popstate', _popstate).bind('unload', _unload);
} else if (!_supported && _hrefHash() !== '') {
_l.replace(_l.href.substr(0, _l.href.indexOf('#')));
} else {
_track();
}
return {
bind: function(type, data, fn) {
return _bind(type, data, fn);
},
init: function(fn) {
return _bind(INIT, fn);
},
change: function(fn) {
return _bind(CHANGE, fn);
},
internalChange: function(fn) {
return _bind(INTERNAL_CHANGE, fn);
},
externalChange: function(fn) {
return _bind(EXTERNAL_CHANGE, fn);
},
baseURL: function() {
var url = _l.href;
if (url.indexOf('#') != -1) {
url = url.substr(0, url.indexOf('#'));
}
if (/\/$/.test(url)) {
url = url.substr(0, url.length - 1);
}
return url;
},
autoUpdate: function(value) {
if (value !== UNDEFINED) {
_opts.autoUpdate = value;
return this;
}
return _opts.autoUpdate;
},
crawlable: function(value) {
if (value !== UNDEFINED) {
_opts.crawlable = value;
return this;
}
return _opts.crawlable;
},
history: function(value) {
if (value !== UNDEFINED) {
_opts.history = value;
return this;
}
return _opts.history;
},
state: function(value) {
if (value !== UNDEFINED) {
_opts.state = value;
var hrefState = _hrefState();
if (_opts.state !== UNDEFINED) {
if (_h.pushState) {
if (hrefState.substr(0, 3) == '/#/') {
_l.replace(_opts.state.replace(/^\/$/, '') + hrefState.substr(2));
}
} else if (hrefState != '/' && hrefState.replace(/^\/#/, '') != _hrefHash()) {
_st(function() {
_l.replace(_opts.state.replace(/^\/$/, '') + '/#' + hrefState);
}, 1);
}
}
return this;
}
return _opts.state;
},
strict: function(value) {
if (value !== UNDEFINED) {
_opts.strict = value;
return this;
}
return _opts.strict;
},
tracker: function(value) {
if (value !== UNDEFINED) {
_opts.tracker = value;
return this;
}
return _opts.tracker;
},
wrap: function(value) {
if (value !== UNDEFINED) {
_opts.wrap = value;
return this;
}
return _opts.wrap;
},
update: function() {
_updating = TRUE;
this.value(_value);
_updating = FALSE;
return this;
},
title: function(value) {
if (value !== UNDEFINED) {
_st(function() {
_title = _d.title = value;
if (_juststart && _frame && _frame.contentWindow && _frame.contentWindow.document) {
_frame.contentWindow.document.title = value;
_juststart = FALSE;
}
if (!_justset && _mozilla) {
_l.replace(_l.href.indexOf('#') != -1 ? _l.href : _l.href + '#');
}
_justset = FALSE;
}, 50);
return this;
}
return _d.title;
},
value: function(value) {
if (value !== UNDEFINED) {
value = _strict(value);
if (value == '/') {
value = '';
}
if (_value == value && !_updating) {
return;
}
_justset = TRUE;
_value = value;
if (_opts.autoUpdate || _updating) {
_update(TRUE);
if (_supportsState()) {
_h[_opts.history ? 'pushState' : 'replaceState']({}, '',
_opts.state.replace(/\/$/, '') + (_value === '' ? '/' : _value));
} else {
_silent = TRUE;
if (_webkit) {
if (_opts.history) {
_l.hash = '#' + _crawl(_value, TRUE);
} else {
_l.replace('#' + _crawl(_value, TRUE));
}
} else if (_value != _href()) {
if (_opts.history) {
_l.hash = '#' + _crawl(_value, TRUE);
} else {
_l.replace('#' + _crawl(_value, TRUE));
}
}
if ((_msie && _version < 8) && _opts.history) {
_st(_html, 50);
}
if (_webkit) {
_st(function(){ _silent = FALSE; }, 1);
} else {
_silent = FALSE;
}
}
}
return this;
}
if (!_supported) {
return null;
}
return _strict(_value);
},
path: function(value) {
if (value !== UNDEFINED) {
var qs = this.queryString(),
hash = this.hash();
this.value(value + (qs ? '?' + qs : '') + (hash ? '#' + hash : ''));
return this;
}
return _strict(_value).split('#')[0].split('?')[0];
},
pathNames: function() {
var path = this.path(),
names = path.replace(_re, '/').split('/');
if (path.substr(0, 1) == '/' || path.length === 0) {
names.splice(0, 1);
}
if (path.substr(path.length - 1, 1) == '/') {
names.splice(names.length - 1, 1);
}
return names;
},
queryString: function(value) {
if (value !== UNDEFINED) {
var hash = this.hash();
this.value(this.path() + (value ? '?' + value : '') + (hash ? '#' + hash : ''));
return this;
}
var arr = _value.split('?');
return arr.slice(1, arr.length).join('?').split('#')[0];
},
parameter: function(name, value, append) {
var i, params;
if (value !== UNDEFINED) {
var names = this.parameterNames();
params = [];
value = value ? value.toString() : '';
for (i = 0; i < names.length; i++) {
var n = names[i],
v = this.parameter(n);
if (typeof v == STRING) {
v = [v];
}
if (n == name) {
v = (value === null || value === '') ? [] :
(append ? v.concat([value]) : [value]);
}
for (var j = 0; j < v.length; j++) {
params.push(n + '=' + v[j]);
}
}
if ($.inArray(name, names) == -1 && value !== null && value !== '') {
params.push(name + '=' + value);
}
this.queryString(params.join('&'));
return this;
}
value = this.queryString();
if (value) {
var r = [];
params = value.split('&');
for (i = 0; i < params.length; i++) {
var p = params[i].split('=');
if (p[0] == name) {
r.push(p.slice(1).join('='));
}
}
if (r.length !== 0) {
return r.length != 1 ? r : r[0];
}
}
},
parameterNames: function() {
var qs = this.queryString(),
names = [];
if (qs && qs.indexOf('=') != -1) {
var params = qs.split('&');
for (var i = 0; i < params.length; i++) {
var name = params[i].split('=')[0];
if ($.inArray(name, names) == -1) {
names.push(name);
}
}
}
return names;
},
hash: function(value) {
if (value !== UNDEFINED) {
this.value(_value.split('#')[0] + (value ? '#' + value : ''));
return this;
}
var arr = _value.split('#');
return arr.slice(1, arr.length).join('#');
}
};
})();
$.fn.address = function(fn) {
if (!$(this).attr('address')) {
var f = function(e) {
if (e.shiftKey || e.ctrlKey || e.metaKey) {
return true;
}
if ($(this).is('a')) {
var value = fn ? fn.call(this) :
/address:/.test($(this).attr('rel')) ? $(this).attr('rel').split('address:')[1].split(' ')[0] :
$.address.state() !== undefined && $.address.state() != '/' ?
$(this).attr('href').replace(new RegExp('^(.*' + $.address.state() + '|\\.)'), '') :
$(this).attr('href').replace(/^(#\!?|\.)/, '');
$.address.value(value);
e.preventDefault();
}
};
$(this).click(f).live('click', f).live('submit', function(e) {
if ($(this).is('form')) {
var action = $(this).attr('action'),
value = fn ? fn.call(this) : (action.indexOf('?') != -1 ? action.replace(/&$/, '') : action + '?') +
$(this).serialize();
$.address.value(value);
e.preventDefault();
}
}).attr('address', true);
}
return this;
};
})(jQuery);

66
samples/02 - splitviewnavigator/01 - basic/index.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View Navigator 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/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<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/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style>
li {
@ -25,22 +25,24 @@
<script>
$(document).ready( function() {
var sidebarViewDescriptor = getSidebarView();
sidebarViewDescriptor.backLabel = null;
var bodyViewDescriptor = getBodyView();
bodyViewDescriptor.backLabel = null;
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Menu" );
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Menu'
});
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );
} );
function getSidebarView() {
var viewHTML = "<ul>" +
"<li onclick='pushSidebarView()' class='viewNavigator_backButton'>Push Sidebar View</li>" +
@ -48,44 +50,44 @@
"<li onclick='pushBodyView()' class='viewNavigator_backButton'>Push Body View</li>" +
"<li onclick='window.splitViewNavigator.popBodyView()' class='viewNavigator_backButton'>Pop Body View</li>" +
"</ul>";
return {
title: "Sidebar " + parseInt( Math.random() * 100 ).toString(),
return {
title: "Sidebar " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function getBodyView() {
var viewHTML = "<div>" +getMeat() + "</div>";
return {
title: "Body Content " + parseInt( Math.random() * 100 ).toString(),
return {
title: "Body Content " + parseInt( Math.random() * 100 ).toString(),
backLabel: "Back",
view: $(viewHTML)
};
}
function pushSidebarView() {
window.splitViewNavigator.pushSidebarView( getSidebarView() );
}
function pushBodyView() {
window.splitViewNavigator.pushBodyView( getBodyView() );
window.splitViewNavigator.hideSidebar();
}
function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 25);
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>"
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></body>
</html>
</html>

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

Binary file not shown.

34
samples/03 - slidingView/01 - basic/index.html
View File

@ -1,27 +1,27 @@
<!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">
<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/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>
$(document).ready( function() {
//Setup the ViewNavigator
new SlidingView( 'sidebar', 'body' );
new SlidingView( 'sidebar', 'body' );
} );
</script>
<style>
#sidebar {
background-color: red;
@ -35,11 +35,11 @@
</head>
<body>
<div class="slidingview_wrapper">
<div id="sidebar">sidebar here!</div>
<div id="body">body here!</div>
</div>
</body>
</html>
</html>

78
samples/03 - slidingView/02 - view navigators/index.html
View File

@ -1,27 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View Navigator Multiple Instances</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/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>
<style>
#sidebar {
padding:0px;
overflow:hidden;
}
#body {
padding:0px;
overflow:hidden;
@ -32,77 +32,77 @@
<script>
$(document).ready( function() {
//Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;
var rightView = getView( "right" );
rightView.backLabel = null;
new SlidingView( 'sidebar', 'body' );
//Setup the ViewNavigator
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
window.leftViewNavigator.pushView( leftView );
window.rightViewNavigator = new ViewNavigator( '#body' );
window.rightViewNavigator = new ViewNavigator( '#body' );
window.rightViewNavigator.pushView( rightView );
} );
function leftPushView() {
function leftPushView() {
//create a view and push it onto the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}
function leftPopView() {
function leftPopView() {
//pop a view from the view navigator
window.leftViewNavigator.popView();
}
function rightPushView() {
function rightPushView() {
//create a view and push it onto the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}
function rightPopView() {
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),
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>"
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 class="slidingview_wrapper">
<div id="sidebar"></div>
<div id="body"></div>
</div>
</body>
</html>
</html>

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

@ -1,3 +1,4 @@
body {
padding: 0;
margin: 0;
@ -15,93 +16,79 @@ body {
}
h1 {
font-size: 2em;
padding: 20px 0;
margin: 0;
font-size:2em;
padding:20px 0;
margin:0;
}
#wrapper {
width: 100%;
min-width: 320px;
height: 150px;
background: #ddd;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
width:100%;
min-width:320px;
height:150px;
background:#ddd;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
}
#nav {
position: absolute;
z-index: 100;
top: 8px;
width: 200px;
height: 20px;
left: 50%;
background: rgba(0,0,0,0.75);
padding: 0;
margin: 0 0 0 -100px;
border-radius: 10px;
position:absolute;
z-index:100;
top:8px;
width:200px;
height:20px;
left:50%;
background:rgba(0,0,0,0.75);
padding:0;
margin:0 0 0 -100px;
-webkit-border-radius:10px;
}
#nav li {
display: block;
float: left;
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 7px;
background: rgba(255,255,255,0.1);
overflow: hidden;
padding: 0;
margin: 3px 11px 0 0;
text-align: center;
display:block;
float:left;
width:14px;
height:14px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.1);
overflow:hidden;
padding:0;
margin:3px 11px 0 0;
text-align:center;
}
#nav li#prev {
margin-left: 5px;
background: transparent;
margin-left:5px;
background:transparent;
}
#nav li#next {
margin-right: 0;
background: transparent;
margin-right:0;
background:transparent;
}
#nav li.selected {
background: rgba(255,255,255,0.4);
background:rgba(255,255,255,0.4);
}
#swipeview-slider > div {
position: relative;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden;
position:relative;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
overflow:hidden;
}
#swipeview-slider span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
text-align: center;
font-size: 1.4em;
padding: 0 20px;
-webkit-box-sizing:border-box;
display:block;
text-align:center;
font-size:1.4em;
padding:0 20px;
}
p {
padding: 20px;
margin: 0;
font-size: 1.4em;
padding:20px;
margin:0;
font-size:1.4em;
}

438
samples/05 - multi-device form factor/www/index.html
View File

@ -1,233 +1,235 @@
<!DOCTYPE html>
<html>
<head>
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="phonegap-1.4.1.js"></script>
<script src="libs/jquery-1.7.1.js"></script>
<script src="libs/jquery.animate-enhanced.js"></script>
<script src="libs/iscroll.js"></script>
<script src="libs/noClickDelay.js"></script>
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
<script src="viewnavigator/viewnavigator.js"></script>
<script src="phonegap-1.4.1.js"></script>
<link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="splitviewnavigator/splitviewnavigator.js"></script>
<script src="libs/jquery-1.7.1.js"></script>
<script src="libs/jquery.animate-enhanced.js"></script>
<script src="libs/iscroll.js"></script>
<script src="libs/noClickDelay.js"></script>
<style>
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
#defaultView {
text-align:center;
padding-top:100px;
}
.moviePoster {
float:right;
width:120px;
height:178px;
overflow:hidden;
margin:10px;
padding:2px;
border:1px solid #999999;
}
.listSelected {
background-color:#424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9);
color: #FFF;
font-weight:bold;
}
ul,li {
padding:0;
margin:0;
border:0;
}
.viewNavigator_contentHolder li {
padding:0 10px;
border-bottom:1px solid #ccc;
height:40px; line-height:40px;
font-weight:normal;
cursor:pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style>
<script type="text/javascript" charset="utf-8">
var API_KEY = "put your rotten tomatoes API key here";
var sampleData;
/* ==================== Controller ==================== */
var controller = {
data : []
};
controller.init = function () {
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
console.log( url );
this.rootView = { title: "Rotten Tomatoes",
backLabel: null,
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
};
$.ajax({
url: url,
dataType: "json",
success: function(data, textStatus, jqXHR) {
controller.rootData = data;
controller.renderDefaultView();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error")
}
});
return;
};
controller.renderDefaultView = function () {
this.rootView.view.children().remove();
var html = "<ul>";
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
{
var movie = controller.rootData.movies[i];
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
}
html += "</ul>";
this.rootView.view.html( html );
if ( controller.tabletView ) {
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
<script src="viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="libs/css/activityIndicator.css" type="text/css" />
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="splitviewnavigator/splitviewnavigator.js"></script>
<style>
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
#defaultView {
text-align:center;
padding-top:100px;
}
.moviePoster {
float:right;
width:120px;
height:178px;
overflow:hidden;
margin:10px;
padding:2px;
border:1px solid #999999;
}
.listSelected {
background-color:#424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9);
color: #FFF;
font-weight:bold;
}
ul,li {
padding:0;
margin:0;
border:0;
}
.viewNavigator_contentHolder li {
padding:0 10px;
border-bottom:1px solid #ccc;
height:40px; line-height:40px;
font-weight:normal;
cursor:pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style>
<script type="text/javascript" charset="utf-8">
var API_KEY = "put your rotten tomatoes API key here";
var sampleData;
/* ==================== Controller ==================== */
var controller = {
data : []
};
controller.init = function () {
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=25&country=us&apikey=" + API_KEY;
console.log( url );
this.rootView = { title: "Rotten Tomatoes",
backLabel: null,
view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
};
$.ajax({
url: url,
dataType: "json",
success: function(data, textStatus, jqXHR) {
controller.rootData = data;
controller.renderDefaultView();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error")
}
});
return;
};
controller.renderDefaultView = function () {
this.rootView.view.children().remove();
var html = "<ul>";
for ( var i = 0; i < controller.rootData.movies.length; i ++ )
{
var movie = controller.rootData.movies[i];
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
}
html += "</ul>";
this.rootView.view.html( html );
if ( controller.tabletView ) {
setTimeout( function() {
window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
}, 10 );
}
}
controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index];
if ( controller.tabletView ) {
}
}
controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index];
if ( controller.tabletView ) {
window.splitViewNavigator.hideSidebar();
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
$(this).removeClass( "listSelected" );
});
}
else {
controller.rootView.view.find( "li" ).each(function(index) {
}
else {
controller.rootView.view.find( "li" ).each(function(index) {
$(this).removeClass( "listSelected" );
});
}
$( "#"+movie.id ).addClass( "listSelected" );
var html = "<div id='detail'>";
html += "<h1>" + movie.title + "</h1>";
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
html += "<p>" + movie.synopsis + "</p>";
html += "<h3>Ratings:</h3><p>";
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
html += "</p>"
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
html += "<h3>Cast:</h3><p><ul>";
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
{
var actor = movie.abridged_cast[i];
html += "<li><strong>" + actor.name + ":</strong> ";
if ( actor.characters ) {
for ( var j = 0; j < actor.characters.length; j ++ )
{
if ( j > 0 ) { html += ", " };
html += actor.characters[j];
}
}
html += "</li>";
}
html += "</ul></p>";
html += "</div>";
var viewDescriptor = { title: movie.title,
view: $(html)
};
if ( controller.tabletView ) {
window.splitViewNavigator.replaceBodyView( viewDescriptor );
}
else {
viewDescriptor.backLabel = "Back";
window.viewNavigator.pushView( viewDescriptor );
}
}
$(document).ready( function() {
controller.init();
var _w = Math.max( $(window).width(), $(window).height() );
var _h = Math.min( $(window).width(), $(window).height() );
controller.tabletView = (_w >= 1000 && _h >= 600);
var defaultView = { title: "Rotten Tomatoes",
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
};
if ( controller.tabletView ) {
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Movies" );
window.splitViewNavigator.pushSidebarView( controller.rootView );
window.splitViewNavigator.pushBodyView( defaultView );
}
else {
//phone view
window.viewNavigator = new ViewNavigator( 'body', "Movies" );
window.viewNavigator.pushView( controller.rootView );
}
} );
</script>
</head>
<body></body>
</html>
}
$( "#"+movie.id ).addClass( "listSelected" );
var html = "<div id='detail'>";
html += "<h1>" + movie.title + "</h1>";
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
html += "<p>" + movie.synopsis + "</p>";
html += "<h3>Ratings:</h3><p>";
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>"
html += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
html += "</p>"
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
html += "<h3>Cast:</h3><p><ul>";
for ( var i = 0; i < movie.abridged_cast.length; i ++ )
{
var actor = movie.abridged_cast[i];
html += "<li><strong>" + actor.name + ":</strong> ";
if ( actor.characters ) {
for ( var j = 0; j < actor.characters.length; j ++ )
{
if ( j > 0 ) { html += ", " };
html += actor.characters[j];
}
}
html += "</li>";
}
html += "</ul></p>";
html += "</div>";
var viewDescriptor = { title: movie.title,
view: $(html)
};
if ( controller.tabletView ) {
window.splitViewNavigator.replaceBodyView( viewDescriptor );
}
else {
viewDescriptor.backLabel = "Back";
window.viewNavigator.pushView( viewDescriptor );
}
}
$(document).ready( function() {
controller.init();
var _w = Math.max( $(window).width(), $(window).height() );
var _h = Math.min( $(window).width(), $(window).height() );
controller.tabletView = (_w >= 1000 && _h >= 600);
var defaultView = { title: "Rotten Tomatoes",
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
};
if ( controller.tabletView ) {
//Setup the ViewNavigator
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Movies'
});
window.splitViewNavigator.pushSidebarView( controller.rootView );
window.splitViewNavigator.pushBodyView( defaultView );
}
else {
//phone view
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( controller.rootView );
}
} );
</script>
</head>
<body></body>
</html>

312
src/libs/iscroll.js Executable file → Normal file
View File

@ -1,60 +1,88 @@
/*!
* iScroll v4.1.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
(function(){
(function(window, doc){
var m = Math,
mround = function (r) { return r >> 0; },
vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
(/firefox/i).test(navigator.userAgent) ? 'Moz' :
(/trident/i).test(navigator.userAgent) ? 'ms' :
'opera' in window ? 'O' : '',
dummyStyle = doc.createElement('div').style,
vendor = (function () {
var vendors = 't,webkitT,MozT,msT,OT'.split(','),
t,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
t = vendors[i] + 'ransform';
if ( t in dummyStyle ) {
return vendors[i].substr(0, vendors[i].length - 1);
}
}
return false;
})(),
cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',
// Style properties
transform = prefixStyle('transform'),
transitionProperty = prefixStyle('transitionProperty'),
transitionDuration = prefixStyle('transitionDuration'),
transformOrigin = prefixStyle('transformOrigin'),
transitionTimingFunction = prefixStyle('transitionTimingFunction'),
transitionDelay = prefixStyle('transitionDelay'),
// Browser capabilities
isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isPlaybook = (/playbook/gi).test(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
has3d = prefixStyle('perspective') in dummyStyle,
hasTouch = 'ontouchstart' in window && !isTouchPad,
hasTransform = vendor + 'Transform' in document.documentElement.style,
hasTransitionEnd = isIDevice || isPlaybook,
hasTransform = vendor !== false,
hasTransitionEnd = prefixStyle('transition') in dummyStyle,
nextFrame = (function() {
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { return setTimeout(callback, 1); }
})(),
cancelFrame = (function () {
return window.cancelRequestAnimationFrame
|| window.webkitCancelAnimationFrame
|| window.webkitCancelRequestAnimationFrame
|| window.mozCancelRequestAnimationFrame
|| window.oCancelRequestAnimationFrame
|| window.msCancelRequestAnimationFrame
|| clearTimeout
})(),
// Events
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
TRNEND_EV = (function () {
if ( vendor === false ) return false;
var transitionEnd = {
'' : 'transitionend',
'webkit' : 'webkitTransitionEnd',
'Moz' : 'transitionend',
'O' : 'otransitionend',
'ms' : 'MSTransitionEnd'
};
return transitionEnd[vendor];
})(),
nextFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) { return setTimeout(callback, 1); };
})(),
cancelFrame = (function () {
return window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout;
})(),
// Helpers
trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',
translateZ = has3d ? ' translateZ(0)' : '',
// Constructor
iScroll = function (el, options) {
var that = this,
doc = document,
i;
that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
@ -75,6 +103,7 @@ var m = Math,
useTransition: false,
topOffset: 0,
checkDOMChanges: false, // Experimental
handleClick: true,
// Scrollbar
hScrollbar: true,
@ -118,27 +147,26 @@ var m = Math,
that.y = that.options.y;
// Normalize options
that.options.useTransform = hasTransform ? that.options.useTransform : false;
that.options.useTransform = hasTransform && that.options.useTransform;
that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
that.options.zoom = that.options.useTransform && that.options.zoom;
that.options.useTransition = hasTransitionEnd && that.options.useTransition;
// Helpers FIX ANDROID BUG!
// translate3d and scale doesn't work together!
// translate3d and scale doesn't work together!
// Ignoring 3d ONLY WHEN YOU SET that.options.zoom
if ( that.options.zoom && isAndroid ){
trnOpen = 'translate(';
trnClose = ')';
translateZ = '';
}
// Set some default styles
that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left';
that.scroller.style[vendor + 'TransitionDuration'] = '0';
that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + 'transform' : 'top left';
that.scroller.style[transitionDuration] = '0';
that.scroller.style[transformOrigin] = '0 0';
if (that.options.useTransition) that.scroller.style[transitionTimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)';
if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
if (that.options.useTransform) that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px)' + translateZ;
else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
if (that.options.useTransition) that.options.fixedScrollbar = true;
@ -148,9 +176,10 @@ var m = Math,
that._bind(RESIZE_EV, window);
that._bind(START_EV);
if (!hasTouch) {
that._bind('mouseout', that.wrapper);
if (that.options.wheelAction != 'none')
that._bind(WHEEL_EV);
if (that.options.wheelAction != 'none') {
that._bind('DOMMouseScroll');
that._bind('mousewheel');
}
}
if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
@ -175,17 +204,14 @@ iScroll.prototype = {
switch(e.type) {
case START_EV:
if (!hasTouch && e.button !== 0) return;
var nodeName = e.target.nodeName.toUpperCase();
if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return;
that._start(e);
break;
case MOVE_EV: that._move(e); break;
case END_EV:
case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break;
case 'mouseout': that._mouseout(e); break;
case 'webkitTransitionEnd': that._transitionEnd(e); break;
case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break;
case TRNEND_EV: that._transitionEnd(e); break;
}
},
@ -198,12 +224,11 @@ iScroll.prototype = {
_scrollbar: function (dir) {
var that = this,
doc = document,
bar;
if (!that[dir + 'Scrollbar']) {
if (that[dir + 'ScrollbarWrapper']) {
if (hasTransform) that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = '';
if (hasTransform) that[dir + 'ScrollbarIndicator'].style[transform] = '';
that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']);
that[dir + 'ScrollbarWrapper'] = null;
that[dir + 'ScrollbarIndicator'] = null;
@ -219,7 +244,7 @@ iScroll.prototype = {
if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase();
else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');
bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:opacity;-' + vendor + '-transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1');
bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:opacity;' + cssVendor + 'transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1');
that.wrapper.appendChild(bar);
that[dir + 'ScrollbarWrapper'] = bar;
@ -227,10 +252,10 @@ iScroll.prototype = {
// Create the scrollbar indicator
bar = doc.createElement('div');
if (!that.options.scrollbarClass) {
bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-' + vendor + '-background-clip:padding-box;-' + vendor + '-box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';-' + vendor + '-border-radius:3px;border-radius:3px';
bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);' + cssVendor + 'background-clip:padding-box;' + cssVendor + 'box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';' + cssVendor + 'border-radius:3px;border-radius:3px';
}
bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0;-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose;
if (that.options.useTransition) bar.style.cssText += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:' + cssVendor + 'transform;' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);' + cssVendor + 'transition-duration:0;' + cssVendor + 'transform: translate(0,0)' + translateZ;
if (that.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
that[dir + 'ScrollbarWrapper'].appendChild(bar);
that[dir + 'ScrollbarIndicator'] = bar;
@ -238,13 +263,13 @@ iScroll.prototype = {
if (dir == 'h') {
that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
that.hScrollbarIndicatorSize = m.max(mround(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px';
that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
} else {
that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
that.vScrollbarIndicatorSize = m.max(mround(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px';
that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
@ -260,14 +285,16 @@ iScroll.prototype = {
},
_pos: function (x, y) {
if (this.zoomed) return;
x = this.hScroll ? x : 0;
y = this.vScroll ? y : 0;
if (this.options.useTransform) {
this.scroller.style[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')';
this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
} else {
x = mround(x);
y = mround(y);
x = m.round(x);
y = m.round(y);
this.scroller.style.left = x + 'px';
this.scroller.style.top = y + 'px';
}
@ -290,14 +317,14 @@ iScroll.prototype = {
if (pos < 0) {
if (!that.options.fixedScrollbar) {
size = that[dir + 'ScrollbarIndicatorSize'] + mround(pos * 3);
size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3);
if (size < 8) size = 8;
that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
}
pos = 0;
} else if (pos > that[dir + 'ScrollbarMaxScroll']) {
if (!that.options.fixedScrollbar) {
size = that[dir + 'ScrollbarIndicatorSize'] - mround((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
size = that[dir + 'ScrollbarIndicatorSize'] - m.round((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
if (size < 8) size = 8;
that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size);
@ -306,9 +333,9 @@ iScroll.prototype = {
}
}
that[dir + 'ScrollbarWrapper'].style[vendor + 'TransitionDelay'] = '0';
that[dir + 'ScrollbarWrapper'].style[transitionDelay] = '0';
that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1';
that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = trnOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + trnClose;
that[dir + 'ScrollbarIndicator'].style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ;
},
_start: function (e) {
@ -348,19 +375,20 @@ iScroll.prototype = {
if (that.options.momentum) {
if (that.options.useTransform) {
// Very lame general purpose alternative to CSSMatrix
matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(',');
x = matrix[4] * 1;
y = matrix[5] * 1;
matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');
x = +(matrix[12] || matrix[4]);
y = +(matrix[13] || matrix[5]);
} else {
x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '');
y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '');
}
if (x != that.x || y != that.y) {
if (that.options.useTransition) that._unbind('webkitTransitionEnd');
if (that.options.useTransition) that._unbind(TRNEND_EV);
else cancelFrame(that.aniTime);
that.steps = [];
that._pos(x, y);
if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
}
}
@ -376,9 +404,9 @@ iScroll.prototype = {
if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
that._bind(MOVE_EV);
that._bind(END_EV);
that._bind(CANCEL_EV);
that._bind(MOVE_EV, window);
that._bind(END_EV, window);
that._bind(CANCEL_EV, window);
},
_move: function (e) {
@ -411,7 +439,7 @@ iScroll.prototype = {
newX = this.originX - this.originX * that.lastScale + this.x,
newY = this.originY - this.originY * that.lastScale + this.y;
this.scroller.style[vendor + 'Transform'] = trnOpen + newX + 'px,' + newY + 'px' + trnClose + ' scale(' + scale + ')';
this.scroller.style[transform] = 'translate(' + newX + 'px,' + newY + 'px) scale(' + scale + ')' + translateZ;
if (that.options.onZoom) that.options.onZoom.call(that, e);
return;
@ -424,7 +452,7 @@ iScroll.prototype = {
if (newX > 0 || newX < that.maxScrollX) {
newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
}
if (newY > that.minScrollY || newY < that.maxScrollY) {
if (newY > that.minScrollY || newY < that.maxScrollY) {
newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;
}
@ -463,7 +491,7 @@ iScroll.prototype = {
},
_end: function (e) {
if (hasTouch && e.touches.length != 0) return;
if (hasTouch && e.touches.length !== 0) return;
var that = this,
point = hasTouch ? e.changedTouches[0] : e,
@ -478,9 +506,9 @@ iScroll.prototype = {
snap,
scale;
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
@ -494,8 +522,8 @@ iScroll.prototype = {
that.x = that.originX - that.originX * that.lastScale + that.x;
that.y = that.originY - that.originY * that.lastScale + that.y;
that.scroller.style[vendor + 'TransitionDuration'] = '200ms';
that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + that.scale + ')';
that.scroller.style[transitionDuration] = '200ms';
that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + that.scale + ')' + translateZ;
that.zoomed = false;
that.refresh();
@ -517,7 +545,7 @@ iScroll.prototype = {
that.options.onZoomEnd.call(that, e);
}, 200); // 200 is default zoom duration
}
} else {
} else if (this.options.handleClick) {
that.doubleTapTimer = setTimeout(function () {
that.doubleTapTimer = null;
@ -526,7 +554,7 @@ iScroll.prototype = {
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
ev = document.createEvent('MouseEvents');
ev = doc.createEvent('MouseEvents');
ev.initMouseEvent('click', true, true, e.view, 1,
point.screenX, point.screenY, point.clientX, point.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
@ -538,7 +566,7 @@ iScroll.prototype = {
}
}
that._resetPos(200);
that._resetPos(400);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
@ -551,8 +579,8 @@ iScroll.prototype = {
newPosX = that.x + momentumX.dist;
newPosY = that.y + momentumY.dist;
if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
}
if (momentumX.dist || momentumY.dist) {
@ -571,7 +599,7 @@ iScroll.prototype = {
}
}
that.scrollTo(mround(newPosX), mround(newPosY), newDuration);
that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
@ -607,11 +635,11 @@ iScroll.prototype = {
}
if (that.hScrollbar && that.options.hideScrollbar) {
if (vendor == 'webkit') that.hScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms';
if (vendor == 'webkit') that.hScrollbarWrapper.style[transitionDelay] = '300ms';
that.hScrollbarWrapper.style.opacity = '0';
}
if (that.vScrollbar && that.options.hideScrollbar) {
if (vendor == 'webkit') that.vScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms';
if (vendor == 'webkit') that.vScrollbarWrapper.style[transitionDelay] = '300ms';
that.vScrollbarWrapper.style.opacity = '0';
}
@ -666,39 +694,28 @@ iScroll.prototype = {
if (deltaY > that.minScrollY) deltaY = that.minScrollY;
else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
that.scrollTo(deltaX, deltaY, 0);
if (that.maxScrollY < 0) {
that.scrollTo(deltaX, deltaY, 0);
}
},
_mouseout: function (e) {
var t = e.relatedTarget;
if (!t) {
this._end(e);
return;
}
while (t = t.parentNode) if (t == this.wrapper) return;
this._end(e);
},
_transitionEnd: function (e) {
var that = this;
if (e.target != that.scroller) return;
that._unbind('webkitTransitionEnd');
that._unbind(TRNEND_EV);
that._startAni();
},
/**
*
* Utilities
*
*/
*
* Utilities
*
*/
_startAni: function () {
var that = this,
startX = that.x, startY = that.y,
@ -724,7 +741,7 @@ iScroll.prototype = {
that._transitionTime(step.time);
that._pos(step.x, step.y);
that.animating = false;
if (step.time) that._bind('webkitTransitionEnd');
if (step.time) that._bind(TRNEND_EV);
else that._resetPos(0);
return;
}
@ -754,9 +771,9 @@ iScroll.prototype = {
_transitionTime: function (time) {
time += 'ms';
this.scroller.style[vendor + 'TransitionDuration'] = time;
if (this.hScrollbar) this.hScrollbarIndicator.style[vendor + 'TransitionDuration'] = time;
if (this.vScrollbar) this.vScrollbarIndicator.style[vendor + 'TransitionDuration'] = time;
this.scroller.style[transitionDuration] = time;
if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time;
if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time;
},
_momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
@ -765,7 +782,7 @@ iScroll.prototype = {
newDist = (speed * speed) / (2 * deceleration),
newTime = 0, outsideDist = 0;
// Proportinally reduce speed if we are outside of the boundaries
// Proportinally reduce speed if we are outside of the boundaries
if (dist > 0 && newDist > maxDistUpper) {
outsideDist = size / (6 / (newDist / speed * deceleration));
maxDistUpper = maxDistUpper + outsideDist;
@ -781,7 +798,7 @@ iScroll.prototype = {
newDist = newDist * (dist < 0 ? -1 : 1);
newTime = speed / deceleration;
return { dist: newDist, time: mround(newTime) };
return { dist: newDist, time: m.round(newTime) };
},
_offset: function (el) {
@ -836,7 +853,7 @@ iScroll.prototype = {
that.currPageY = page;
// Snap with constant speed (proportional duration)
time = mround(m.max(sizeX, sizeY)) || 200;
time = m.round(m.max(sizeX, sizeY)) || 200;
return { x: x, y: y, time: time };
},
@ -851,14 +868,14 @@ iScroll.prototype = {
/**
*
* Public methods
*
*/
*
* Public methods
*
*/
destroy: function () {
var that = this;
that.scroller.style[vendor + 'Transform'] = '';
that.scroller.style[transform] = '';
// Remove the scrollbars
that.hScrollbar = false;
@ -869,16 +886,16 @@ iScroll.prototype = {
// Remove the event listeners
that._unbind(RESIZE_EV, window);
that._unbind(START_EV);
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (!that.options.hasTouch) {
that._unbind('mouseout', that.wrapper);
that._unbind(WHEEL_EV);
that._unbind('DOMMouseScroll');
that._unbind('mousewheel');
}
if (that.options.useTransition) that._unbind('webkitTransitionEnd');
if (that.options.useTransition) that._unbind(TRNEND_EV);
if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime);
@ -898,8 +915,8 @@ iScroll.prototype = {
that.wrapperH = that.wrapper.clientHeight || 1;
that.minScrollY = -that.options.topOffset || 0;
that.scrollerW = mround(that.scroller.offsetWidth * that.scale);
that.scrollerH = mround((that.scroller.offsetHeight + that.minScrollY) * that.scale);
that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);
that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
that.maxScrollX = that.wrapperW - that.scrollerW;
that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
that.dirX = 0;
@ -954,8 +971,8 @@ iScroll.prototype = {
that._scrollbar('v');
if (!that.zoomed) {
that.scroller.style[vendor + 'TransitionDuration'] = '0';
that._resetPos(200);
that.scroller.style[transitionDuration] = '0';
that._resetPos(400);
}
},
@ -1026,9 +1043,9 @@ iScroll.prototype = {
this.enabled = false;
// If disabled after touchstart we make sure that there are no left over events
this._unbind(MOVE_EV);
this._unbind(END_EV);
this._unbind(CANCEL_EV);
this._unbind(MOVE_EV, window);
this._unbind(END_EV, window);
this._unbind(CANCEL_EV, window);
},
enable: function () {
@ -1036,7 +1053,7 @@ iScroll.prototype = {
},
stop: function () {
if (this.options.useTransition) this._unbind('webkitTransitionEnd');
if (this.options.useTransition) this._unbind(TRNEND_EV);
else cancelFrame(this.aniTime);
this.steps = [];
this.moved = false;
@ -1062,8 +1079,8 @@ iScroll.prototype = {
that.x = that.x > 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x;
that.y = that.y > that.minScrollY ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
that.scroller.style[vendor + 'TransitionDuration'] = time + 'ms';
that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + scale + ')';
that.scroller.style[transitionDuration] = time + 'ms';
that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + scale + ')' + translateZ;
that.zoomed = false;
},
@ -1072,7 +1089,16 @@ iScroll.prototype = {
}
};
function prefixStyle (style) {
if ( vendor === '' ) return style;
style = style.charAt(0).toUpperCase() + style.substr(1);
return vendor + style;
}
dummyStyle = null; // for the sake of it
if (typeof exports !== 'undefined') exports.iScroll = iScroll;
else window.iScroll = iScroll;
})();
})(window, document);

80
src/splitviewnavigator/splitviewnavigator.css
View File

@ -12,75 +12,67 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
.splitViewNavigator_root {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.splitViewNavigator_sidebar {
position: absolute;
overflow: hidden;
position:absolute;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-right: 1px solid #999;
-webkit-transform: translate3d(0,0,0);
border-right:1px solid #999;
}
.splitViewNavigator_body {
position: absolute;
background: white;
overflow: hidden;
position:absolute;
background:white;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.content_overlay_visible {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.content_overlay_hidden {
position: absolute;
top: -1px;
left: -1px;
width: 0px;
height: 0px;
display: none;
position:absolute;
top:-1px;
left:-1px;
width:0px;
height:0px;
display:none;
}
.sidebar_portrait {
top: 0px;
bottom: 0px;
left: -240px;
width: 240px;
top:0px;
bottom:0px;
left:-240px;
width:240px;
}
.body_portrait {
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
.sidebar_landscape {
top: 0px;
bottom: 0px;
left: 0px;
width: 240px;
top:0px;
bottom:0px;
left:0px;
width:240px;
}
.body_landscape {

156
src/splitviewnavigator/splitviewnavigator.js
View File

@ -11,62 +11,72 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) {
var SplitViewNavigator = function( target, options ) {
var defaults = {
CSSNamespace: 'splitViewNavigator_',
toggleButtonLabel: 'Menu',
backLinkCSS: 'viewNavigator_backButton',
bindToWindow: true,
useNoClickDelay: true
};
this.options = options = $.extend( {}, defaults, options );
this.animating = false;
this.animationDuration = 350;
this.animationPerformed = false;
this.uniqueId = this.guid();
this.parent = $( target );
var regexp = new RegExp("Windows Phone OS 7");
var regexp = new RegExp('Windows Phone OS 7');
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="splitViewNavigator_root"></div>');
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>');
this.rootElement = $('<div class="' + options.CSSNamespace + 'root"></div>');
this.sidebarContainer = $('<div class="' + options.CSSNamespace + 'sidebar"></div>');
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false );
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
this.bodyContainer = $('<div class="' + options.CSSNamespace + 'body"></div>');
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], options.backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], options.backLinkCSS, false );
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + options.backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">' + options.toggleButtonLabel + '</li>');
this.rootElement.append( this.bodyContainer );
this.rootElement.append( this.contentOverlay );
this.rootElement.append( this.sidebarContainer );
var self = this;
/*if ( "onorientationchange" in window ) {
$(window).bind( "orientationchange", function(event){ self.resizeContent() } )
/*if ( 'onorientationchange' in window ) {
$(window).bind( 'orientationchange', function(event){ self.resizeContent() } )
}
else {*/
//$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.attr( "id" ) );
//alert( this.parent.attr( 'id' ) );
this.parent.resize( function(event){ self.resizeContent() } );
//}
if ( bindToWindow != false ) {
if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } );
}
else {
this.parent.resize( function(event){ self.resizeContent() } );
}
this.resizeContent();
this.parent.append( this.rootElement );
this.contentOverlay.click( function(event){ self.hideSidebar() } );
new NoClickDelay( this.contentOverlay.get()[0] );
new NoClickDelay( this.toggleSidebarButton.get()[0] );
if ( this.options.useNoClickDelay ) {
new NoClickDelay( this.contentOverlay.get()[0] );
new NoClickDelay( this.toggleSidebarButton.get()[0] );
}
window.splitViewNavigator = this;
}
@ -74,68 +84,68 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
SplitViewNavigator.prototype.resizeContent = function() {
this.applyStylesByOrientation();
this.sidebarViewNavigator.resizeContent();
this.sidebarViewNavigator.resizeContent();
this.bodyViewNavigator.resizeContent()
}
SplitViewNavigator.prototype.applyStylesByOrientation = function() {
var $window = $(window)
var w = $window.width();
var h = $window.height();
var orientation = (w >= h) ? "landscape" : "portrait";
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
//landscape
if ( orientation == "landscape" && this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" );
this.bodyViewNavigator.setHeaderPadding( 0 );
this.toggleSidebarButton.remove();
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", 0 );
}
this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" );
}
//portrait
else if ( this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" );
this.bodyViewNavigator.setHeaderPadding( "70px" );
var w = $window.width();
var h = $window.height();
var orientation = (w >= h) ? 'landscape' : 'portrait';
this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
//landscape
if ( orientation == 'landscape' && this.orientation != orientation ) {
this.sidebarContainer.removeClass( 'sidebar_portrait' ).addClass( 'sidebar_landscape' );
this.bodyViewNavigator.setHeaderPadding( 0 );
this.toggleSidebarButton.remove();
if ( this.animationPerformed ) {
this.sidebarContainer.css( 'left', 0 );
}
this.bodyContainer.removeClass( 'body_portrait' ).addClass( 'body_landscape' );
}
//portrait
else if ( this.orientation != orientation ) {
this.sidebarContainer.removeClass( 'sidebar_landscape' ).addClass( 'sidebar_portrait' );
this.bodyViewNavigator.setHeaderPadding( '70px' );
this.bodyContainer.append( this.toggleSidebarButton );
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", -this.sidebarContainer.width() );
}
this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" );
}
this.orientation = orientation;
if ( this.animationPerformed ) {
this.sidebarContainer.css( 'left', -this.sidebarContainer.width() );
}
this.bodyContainer.removeClass( 'body_landscape' ).addClass( 'body_portrait' );
}
this.orientation = orientation;
}
SplitViewNavigator.prototype.showSidebar = function() {
this.animationPerformed = true;
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" );
if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( 'content_overlay_hidden' ).addClass( 'content_overlay_visible' );
this.animating = true;
this.sidebarContainer.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler());
}
}
SplitViewNavigator.prototype.hideSidebar = function() {
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
this.animating = true;
this.sidebarContainer.animate({
left:-this.sidebarContainer.width(),
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, this.animationCompleteHandler());
}
}
@ -143,7 +153,7 @@ SplitViewNavigator.prototype.animationCompleteHandler = function() {
var self = this;
return function() {
self.animating = false;
//self.resetScroller();
//self.resetScroller();
}
}
@ -177,9 +187,9 @@ SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) {
//GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
SplitViewNavigator.prototype.S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
SplitViewNavigator.prototype.guid = function() {
return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase();
}
return (this.S4() + this.S4() + '-' + this.S4() + '-4' + this.S4().substr(0,3) + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4()).toLowerCase();
}

39
src/viewnavigator/viewnavigator.css
View File

@ -12,22 +12,22 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input,textarea {
input,
textarea {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body {
position: absolute;
top: 0px;
@ -48,10 +48,10 @@ body {
}
.viewNavigator_root {
width: 100%;
height: 100%;
background-color: 666666;
overflow: hidden;
width:100%;
height:100%;
background-color:666666;
overflow:hidden;
}
.viewNavigator_header {
@ -61,16 +61,18 @@ body {
overflow: hide;
padding: 0px;
background: rgb(167,207,223); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
@ -114,6 +116,9 @@ backface-visibility: hidden;
.viewNavigator_headerContent {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
@ -140,6 +145,7 @@ backface-visibility: hidden;
transform: translate3d(0,0,0);
}
/* ANDROID BUG WORKAROUND */
.viewNavigator_content select {
overflow: auto;
@ -148,6 +154,8 @@ backface-visibility: hidden;
-webkit-backface-visibility: auto;
}
.viewNavigator_contentHolder > div:first-child {
min-height: 100%;
border-bottom: 1px solid #444;
@ -180,6 +188,9 @@ backface-visibility: hidden;
min-width: 100%;
min-height: 100% backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);

428
src/viewnavigator/viewnavigator.js
View File

@ -10,8 +10,25 @@ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVE
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
var ViewNavigator = function( target, options ) {
var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
var defaults = {
CSSNamespace: 'viewNavigator_',
backLinkCSS: 'viewNavigator_backButton',
bindToWindow: true,
useNoClickDelay: true
};
//support legacy url signature
//function( target, backLinkCSS, bindToWindow ) {
if ( typeof(options) == "string" ){
options = {
backLinkCSS:arguments[1],
bindToWindow:arguments[2]
}
}
this.options = options = $.extend( {}, defaults, options );
this.supportsBackKey = true; //phonegap on android only
this.animating = false;
@ -20,49 +37,47 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
this.history = [];
this.scroller = null;
this.headerPadding = 5;
this.uniqueId = this.guid();
var regexp = new RegExp("Windows Phone OS 7");
var regexp = new RegExp('Windows Phone OS 7');
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="viewNavigator_root"></div>');
this.header = $('<div class="viewNavigator_header"></div>');
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>');
this.rootElement = $('<div class="' + this.options.CSSNamespace + 'root"></div>');
this.header = $('<div class="' + options.CSSNamespace + 'header"></div>');
this.content = $('<div class="' + options.CSSNamespace + 'content" id="contentRoot"></div>');
this.rootElement.append( this.header );
this.rootElement.append( this.content );
this.parent = $( target );
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
var self = this;
//$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.toString() );
//this.parent.resize( function(event){ self.resizeContent() } );
if ( bindToWindow != false ) {
if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } );
}
else {
this.parent.resize( function(event){ self.resizeContent() } );
}
this.parent.append( this.rootElement );
if ( window.viewNavigators == null || window.viewNavigators == undefined ) {
window.viewNavigators = {};
}
window.viewNavigators[ this.uniqueId ] = this;
window.viewNavigators[ this.uniqueId ] = this;
}
ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
//this is a hack to mimic behavior of pushView, then pop off the "current" from the history
viewDescriptor.animation = 'pushEffect'
//this is a hack to mimic behavior of pushView, then pop off the 'current' from the history
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
this.history.pop();
@ -73,7 +88,7 @@ ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
ViewNavigator.prototype.pushView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
viewDescriptor.animation = 'pushEffect'
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
}
@ -82,268 +97,277 @@ ViewNavigator.prototype.popView = function() {
if (this.animating || this.history.length <= 1 )
return;
var currentViewDescriptor = this.history[ this.history.length-1];
if ( currentViewDescriptor.backCallback ) {
currentViewDescriptor.backCallback();
}
this.history.pop();
this.history.pop();
var viewDescriptor = this.history[ this.history.length-1 ];
viewDescriptor.animation = "popEffect"
viewDescriptor.animation = 'popEffect'
this.updateView( viewDescriptor );
}
ViewNavigator.prototype.setHeaderPadding = function( amount ) {
this.headerPadding = amount;
if ( this.headerBacklink ) {
this.headerBacklink.css("left", amount);
this.headerBacklink.css('left', amount);
}
}
ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.animating = true;
this.contentPendingRemove = this.contentViewHolder;
this.headerContentPendingRemove = this.headerContent;
this.headerContent = $('<div class="viewNavigator_headerContent"></div>');
this.headerTitle = $("<div class='viewNavigator_header_title'>" + viewDescriptor.title + "</div>");
this.headerContent = $('<div class="' + this.options.CSSNamespace + 'headerContent"></div>');
this.headerTitle = $('<div class="' + this.options.CSSNamespace + 'header_title">' + viewDescriptor.title + '</div>');
this.headerContent.append( this.headerTitle );
var linkGuid = this.guid();
if ( viewDescriptor.backLabel ) {
this.headerBacklink = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + this.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
this.headerBacklink = $('<li class="' + this.options.CSSNamespace + 'header_backlink ' + this.options.CSSNamespace + 'backButtonPosition ' + this.options.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
this.headerContent.append( this.headerBacklink );
//this is for proper handling in splitviewnavigator
this.setHeaderPadding( this.headerPadding );
}
var id = this.guid();
this.contentViewHolder = $('<div class="viewNavigator_contentHolder" id="' + id + '"></div>');
this.contentViewHolder = $('<div class="' + this.options.CSSNamespace + 'contentHolder" id="' + id + '"></div>');
this.contentViewHolder.append( viewDescriptor.view );
this.resizeContent();
if ( this.contentPendingRemove ){
this.contentPendingRemove.stop()
if ( this.contentPendingRemove ){
this.contentPendingRemove.stop()
}
if ( this.headerContentPendingRemove ) {
this.headerContentPendingRemove.stop()
this.headerContentPendingRemove.stop()
}
this.headerContent.stop()
this.contentViewHolder.stop()
if ( this.scroller != null ) {
var scrollY = this.scroller.y;
this.scroller.destroy();
this.scroller = null;
if (this.contentPendingRemove) {
//console.log( scrollY );
//use this to mantain scroll position when scroller is destroyed
var children = $( this.contentPendingRemove.children()[0] );
children.attr( "scrollY", scrollY );
var originalTopMargin = children.css( "margin-top" );
children.attr( "originalTopMargin", originalTopMargin );
var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)";
children.css( "-webkit-transform", cssString );
// children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" );
}
}
var scrollY = this.scroller.y;
this.scroller.destroy();
this.scroller = null;
if (this.contentPendingRemove) {
//console.log( scrollY );
//use this to mantain scroll position when scroller is destroyed
var children = $( this.contentPendingRemove.children()[0] );
children.attr( 'scrollY', scrollY );
var originalTopMargin = children.css( 'margin-top' );
children.attr( 'originalTopMargin', originalTopMargin );
var cssString = 'translate3d(0px, '+(parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString()+'px, 0px)';
children.css( '-webkit-transform', cssString );
// children.css( 'margin-top', (parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString() + 'px' );
}
}
$(this.contentPendingRemove).click(function(){ return false; });
if ( viewDescriptor.animation == "popEffect" ) {
this.contentViewHolder.css( "left", -this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.content.prepend( this.contentViewHolder );
this.headerContent.css( "left", -this.animationX );
this.headerContent.css( "opacity", 0 );
if ( viewDescriptor.animation == 'popEffect' ) {
this.contentViewHolder.css( 'left', -this.contentViewHolder.width() );
this.contentViewHolder.css( 'opacity', 1 );
this.content.prepend( this.contentViewHolder );
this.headerContent.css( 'left', -this.animationX );
this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
this.contentPendingRemove.animate({
left:this.contentViewHolder.width(),
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.8);
//remove this to change back
this.contentViewHolder.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration/2);
this.headerContentPendingRemove.animate({
left:this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, func );
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration/2 );
//using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
this.contentPendingRemove.animate({
left:this.contentViewHolder.width(),
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.8);
//remove this to change back
this.contentViewHolder.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration/2);
this.headerContentPendingRemove.animate({
left:this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, func );
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration/2 );
//using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 );
}
else if ( this.history.length > 1 ) {
this.contentViewHolder.css( "left", this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", this.animationX );
this.headerContent.css( "opacity", 0 );
this.contentViewHolder.css( 'left', this.contentViewHolder.width() );
this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( 'left', this.animationX );
this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
this.contentViewHolder.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.75);
this.contentPendingRemove.animate({
left:-this.contentViewHolder.width()/2,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, func);
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.75);
this.headerContentPendingRemove.animate({
left:-this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
//using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 );
this.contentViewHolder.animate({
left:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.75);
this.contentPendingRemove.animate({
left:-this.contentViewHolder.width()/2,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration, func);
this.headerContent.animate({
left:0,
opacity:1,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.75);
this.headerContentPendingRemove.animate({
left:-this.animationX,
opacity:0,
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration );
//using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 );
}
else {
this.contentViewHolder.css( "left", 0 );
this.contentViewHolder.css( "opacity", 1 );
this.content.append( this.contentViewHolder );
this.contentViewHolder.css( 'left', 0 );
this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", 0 );
this.headerContent.css( "opacity", 1 );
this.headerContent.css( 'left', 0 );
this.headerContent.css( 'opacity', 1 );
this.header.append( this.headerContent );
this.animating = false;
this.resetScroller();
}
if ( viewDescriptor.backLabel ) {
new NoClickDelay( this.headerBacklink.get()[0] );
if ( viewDescriptor.backLabel && this.options.useNoClickDelay ) {
new NoClickDelay( this.headerBacklink.get()[0] );
}
if ( viewDescriptor.showCallback ) {
viewDescriptor.showCallback();
viewDescriptor.showCallback();
}
}
ViewNavigator.prototype.destroyScroller = function() {
if ( !this.winPhone ) {
if ( this.scroller != null ) {
this.scroller.destroy();
this.scroller = null;
}
}
}
}
ViewNavigator.prototype.resetScroller = function() {
var id = this.contentViewHolder.attr( "id" );
var currentViewDescriptor = this.history[ this.history.length-1];
this.destroyScroller();
var id = this.contentViewHolder.attr( 'id' );
var currentViewDescriptor = this.history[ this.history.length-1];
this.destroyScroller();
if ( !this.winPhone ) {
if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) {
var self = this;
if ( 'ontouchstart' in window ){
setTimeout( function() {
//use this to mantain scroll position when scroller is destroyed
var targetDiv = $( $("#"+id ).children()[0] );
var scrollY= targetDiv.attr( "scrollY" );
var originalTopMargin = targetDiv.attr( "originalTopMargin" );
if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ){
// console.log( "resetScroller scrollY: " + scrollY)
// targetDiv.css( "margin-top", originalTopMargin );
var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)";
targetDiv.css( "-webkit-transform", cssString );
}
self.scroller = new iScroll( id );
if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) {
self.scroller.scrollTo( 0, parseInt( scrollY ) );
}
}, 10 );
//this.scroller = new iScroll( id );
}
setTimeout( function() {
//use this to mantain scroll position when scroller is destroyed
var targetDiv = $( $('#'+id ).children()[0] );
var scrollY= targetDiv.attr( 'scrollY' );
var originalTopMargin = targetDiv.attr( 'originalTopMargin' );
if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != '' ){
// console.log( 'resetScroller scrollY: ' + scrollY)
// targetDiv.css( 'margin-top', originalTopMargin );
var cssString = 'translate3d(0px, '+(originalTopMargin).toString()+'px, 0px)';
targetDiv.css( '-webkit-transform', cssString );
}
self.scroller = new iScroll( id , {
useTransition: true,
onBeforeScrollStart: function (e) {
var target = e.target;
while ( target.nodeType != 1 ) target = target.parentNode;
if ( target.tagName !== 'SELECT' && target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' ) {
e.preventDefault();
}
}
});
if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != '' ) {
self.scroller.scrollTo( 0, parseInt( scrollY, 10 ) );
}
}, 10 );
}
else {
var target = $("#"+id );
target.css( "overflow", "auto" );
var target = $('#'+id );
target.css( 'overflow', 'auto' );
}
}
}
}
}
ViewNavigator.prototype.refreshScroller = function() {
if ( !this.winPhone ) {
if ( this.scroller != null ) {
this.scroller.refresh();
}
}
}
}
ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) {
var self = this;
return function() {
self.animating = false;
self.resetScroller();
self.resetScroller();
if ( removalTarget ) {
removalTarget.unbind( "click" );
removalTarget.unbind( 'click' );
removalTarget.detach();
}
if ( headerRemovalTarget ) {
headerRemovalTarget.unbind( "click" );
headerRemovalTarget.detach();
headerRemovalTarget.unbind( 'click' );
headerRemovalTarget.detach();
}
}
}
@ -361,11 +385,11 @@ ViewNavigator.prototype.resizeContent = function(event) {
//GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
ViewNavigator.prototype.S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
ViewNavigator.prototype.guid = function() {
return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase();
return (this.S4() + this.S4() + '-' + this.S4() + '-4' + this.S4().substr(0,3) + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4()).toLowerCase();
}
@ -373,12 +397,12 @@ ViewNavigator.prototype.guid = function() {
/* PHONEGAP INTEGRATION */
/*
//android+phonegap specific back button support - will only work if phonegap is used on android (www.phonegap.com)
if ( typeof PhoneGap != 'undefined' ) {
document.addEventListener("deviceready", onDeviceReady, false);
if ( typeof PhoneGap != 'undefined' ) {
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false);
document.addEventListener('backbutton', onBackKey, false);
}
function onBackKey( event ) {
@ -389,12 +413,10 @@ function onBackKey( event ) {
}
}
*/
//block page scrolling
if (!document.addEventListener)
document.attachEvent('touchmove', function (e) { e.preventDefault(); });
else
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);