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

merged commits from pull#38

Browse Source 
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>

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

@ -1,16 +1,16 @@
<!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>
<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/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script>

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

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

@ -1,16 +1,16 @@
<!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>
<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/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style>

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

@ -1,16 +1,16 @@
<!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>
<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/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script>
@ -41,7 +41,7 @@
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>');
'<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),

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

24
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>
<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/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>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style>
li {
@ -34,7 +34,9 @@
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Menu" );
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Menu'
});
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );

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

Binary file not shown.

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

@ -1,14 +1,14 @@
<!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>
<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>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script>
<script>

20
samples/03 - slidingView/02 - view navigators/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>
<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/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>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script>
<style>

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

344
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="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>
<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>
<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="libs/css/activityIndicator.css" type="text/css" />
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="splitviewnavigator/splitviewnavigator.js"></script>
<style>
<style>
* {
font-family: Arial, sans-serif;
}
* {
font-family: Arial, sans-serif;
}
#detail {
padding:10px;
}
#detail {
padding:10px;
}
#defaultView {
text-align:center;
padding-top:100px;
}
#defaultView {
text-align:center;
padding-top:100px;
}
.moviePoster {
float:right;
width:120px;
height:178px;
overflow:hidden;
margin:10px;
padding:2px;
border:1px solid #999999;
}
.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;
}
.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;
}
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');
}
.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 {
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
white-space: normal;
overflow: visible;
height:auto;
}
</style>
</style>
<script type="text/javascript" charset="utf-8">
<script type="text/javascript" charset="utf-8">
var API_KEY = "put your rotten tomatoes API key here";
var API_KEY = "put your rotten tomatoes API key here";
var sampleData;
var sampleData;
/* ==================== Controller ==================== */
/* ==================== Controller ==================== */
var controller = {
data : []
};
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 );
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>")
};
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) {
$.ajax({
url: url,
dataType: "json",
success: function(data, textStatus, jqXHR) {
controller.rootData = data;
controller.renderDefaultView();
controller.rootData = data;
controller.renderDefaultView();
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error")
}
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error")
}
});
return;
};
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 ) {
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];
controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index];
if ( controller.tabletView ) {
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" );
$( "#"+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>";
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> ";
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];
}
}
if ( actor.characters ) {
for ( var j = 0; j < actor.characters.length; j ++ )
{
if ( j > 0 ) { html += ", " };
html += actor.characters[j];
}
}
html += "</li>";
}
html += "</li>";
}
html += "</ul></p>";
html += "</ul></p>";
html += "</div>";
html += "</div>";
var viewDescriptor = { title: movie.title,
view: $(html)
};
var viewDescriptor = { title: movie.title,
view: $(html)
};
if ( controller.tabletView ) {
window.splitViewNavigator.replaceBodyView( viewDescriptor );
}
else {
viewDescriptor.backLabel = "Back";
window.viewNavigator.pushView( viewDescriptor );
}
}
if ( controller.tabletView ) {
window.splitViewNavigator.replaceBodyView( viewDescriptor );
}
else {
viewDescriptor.backLabel = "Back";
window.viewNavigator.pushView( viewDescriptor );
}
}
$(document).ready( function() {
$(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);
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>")
};
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 );
}
} );
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>
</script>
</head>
<body></body>
</head>
<body></body>
</html>

302
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,7 +147,7 @@ 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;
@ -128,17 +157,16 @@ var m = Math,
// 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;
@ -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';
}
@ -667,20 +695,9 @@ iScroll.prototype = {
if (deltaY > that.minScrollY) deltaY = that.minScrollY;
else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
that.scrollTo(deltaX, deltaY, 0);
},
_mouseout: function (e) {
var t = e.relatedTarget;
if (!t) {
this._end(e);
return;
if (that.maxScrollY < 0) {
that.scrollTo(deltaX, deltaY, 0);
}
while (t = t.parentNode) if (t == this.wrapper) return;
this._end(e);
},
_transitionEnd: function (e) {
@ -688,17 +705,17 @@ iScroll.prototype = {
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) {
@ -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 {

104
src/splitviewnavigator/splitviewnavigator.js
View File

@ -11,7 +11,17 @@ 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;
@ -20,21 +30,19 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
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.bodyContainer = $('<div class="' + options.CSSNamespace + 'body"></div>');
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false );
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], options.backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], options.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.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 );
@ -43,16 +51,16 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
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 {
@ -65,8 +73,10 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
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;
}
@ -80,42 +90,42 @@ SplitViewNavigator.prototype.resizeContent = function() {
SplitViewNavigator.prototype.applyStylesByOrientation = function() {
var $window = $(window)
var w = $window.width();
var h = $window.height();
var w = $window.width();
var h = $window.height();
var orientation = (w >= h) ? "landscape" : "portrait";
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
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" );
}
//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" );
//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" );
}
if ( this.animationPerformed ) {
this.sidebarContainer.css( 'left', -this.sidebarContainer.width() );
}
this.bodyContainer.removeClass( 'body_landscape' ).addClass( 'body_portrait' );
}
this.orientation = orientation;
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,
@ -127,8 +137,8 @@ SplitViewNavigator.prototype.showSidebar = function() {
}
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(),
@ -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);
@ -115,6 +117,9 @@ backface-visibility: hidden;
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);
-o-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;
@ -181,6 +189,9 @@ backface-visibility: hidden;
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);
-o-transform: translate3d(0,0,0);

306
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;
@ -23,25 +40,23 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
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 {
@ -60,9 +75,9 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
viewDescriptor.animation = 'pushEffect'
//this is a hack to mimic behavior of pushView, then pop off the "current" from the history
//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 );
}
@ -90,14 +105,14 @@ ViewNavigator.prototype.popView = function() {
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);
}
}
@ -106,19 +121,17 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.animating = true;
this.contentPendingRemove = this.contentViewHolder;
this.headerContentPendingRemove = this.headerContent;
this.headerContent = $('<div class="viewNavigator_headerContent"></div>');
this.headerContent = $('<div class="' + this.options.CSSNamespace + 'headerContent"></div>');
this.headerTitle = $("<div class='viewNavigator_header_title'>" + viewDescriptor.title + "</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
@ -126,15 +139,15 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
}
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()
this.contentPendingRemove.stop()
}
if ( this.headerContentPendingRemove ) {
this.headerContentPendingRemove.stop()
this.headerContentPendingRemove.stop()
}
this.headerContent.stop()
this.contentViewHolder.stop()
@ -142,134 +155,134 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
if ( this.scroller != null ) {
var scrollY = this.scroller.y;
this.scroller.destroy();
this.scroller = null;
var scrollY = this.scroller.y;
this.scroller.destroy();
this.scroller = null;
if (this.contentPendingRemove) {
//console.log( scrollY );
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 );
//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 );
var cssString = 'translate3d(0px, '+(parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString()+'px, 0px)';
children.css( '-webkit-transform', cssString );
// children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" );
}
}
// children.css( 'margin-top', (parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString() + 'px' );
}
}
$(this.contentPendingRemove).click(function(){ return false; });
if ( viewDescriptor.animation == "popEffect" ) {
if ( viewDescriptor.animation == 'popEffect' ) {
this.contentViewHolder.css( "left", -this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.content.prepend( this.contentViewHolder );
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.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.contentPendingRemove.animate({
left:this.contentViewHolder.width(),
avoidTransforms:false,
useTranslate3d: true
}, this.animationDuration*0.8);
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);
//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.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 );
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 );
//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.contentViewHolder.css( 'left', this.contentViewHolder.width() );
this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", this.animationX );
this.headerContent.css( "opacity", 0 );
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.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.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.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 );
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 );
//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();
}
}
@ -281,45 +294,56 @@ ViewNavigator.prototype.destroyScroller = function() {
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() {
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 );
//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 );
}
else {
var target = $("#"+id );
target.css( "overflow", "auto" );
var target = $('#'+id );
target.css( 'overflow', 'auto' );
}
}
}
}
}
@ -329,20 +353,20 @@ ViewNavigator.prototype.refreshScroller = function() {
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.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();
}
@ -374,11 +398,11 @@ ViewNavigator.prototype.guid = function() {
/*
//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);
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false);
document.addEventListener('backbutton', onBackKey, false);
}
function onBackKey( event ) {
@ -396,5 +420,3 @@ if (!document.addEventListener)
else
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);