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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Sample</title> <title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script> <script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script> <script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script> <script src="../../../src/viewnavigator/viewnavigator.js"></script>
<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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Multiple Instances</title> <title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script> <script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script> <script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script> <script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style> <style>

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

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Sample</title> <title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script> <script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script> <script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script> <script src="../../../src/viewnavigator/viewnavigator.js"></script>
<script> <script>
@ -41,7 +41,7 @@
function getView() { function getView() {
//create a view descriptor with random content //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/>' + 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'); var links = bodyView.find('a');
return { title: "Default View " + parseInt(Math.random()*1000), 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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Sample</title> <title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script> <script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script> <script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script> <script src="../../../src/splitviewnavigator/splitviewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script> <script src="../../../src/viewnavigator/viewnavigator.js"></script>
<style> <style>
li { li {
@ -34,7 +34,9 @@
//Setup the ViewNavigator //Setup the ViewNavigator
new SplitViewNavigator( 'body', "Menu" ); new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Menu'
});
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor ); window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor ); 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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Sliding View Sample</title> <title>Sliding View Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" /> <link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script> <script src="../../../src/slidingview/slidingview.js"></script>
<script> <script>

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

@ -1,19 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Multiple Instances</title> <title>View Navigator Multiple Instances</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <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-1.7.1.js"></script>
<script src="../../../src/libs/jquery.animate-enhanced.js"></script> <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
<script src="../../../src/libs/iscroll.js"></script> <script src="../../../src/libs/iscroll.js"></script>
<script src="../../../src/libs/noClickDelay.js"></script> <script src="../../../src/libs/noClickDelay.js"></script>
<link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
<script src="../../../src/viewnavigator/viewnavigator.js"></script> <script src="../../../src/viewnavigator/viewnavigator.js"></script>
<link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" /> <link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
<script src="../../../src/slidingview/slidingview.js"></script> <script src="../../../src/slidingview/slidingview.js"></script>
<style> <style>

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

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

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

@ -1,233 +1,235 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>View Navigator Sample</title> <title>View Navigator Sample</title>
<meta name="viewport" content="width=device-width, user-scalable=no"> <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-1.7.1.js"></script>
<script src="libs/jquery.animate-enhanced.js"></script> <script src="libs/jquery.animate-enhanced.js"></script>
<script src="libs/iscroll.js"></script> <script src="libs/iscroll.js"></script>
<script src="libs/noClickDelay.js"></script> <script src="libs/noClickDelay.js"></script>
<link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" /> <link rel="stylesheet" href="viewnavigator/viewnavigator.css" type="text/css" />
<script src="viewnavigator/viewnavigator.js"></script> <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" /> <link rel="stylesheet" href="splitviewnavigator/splitviewnavigator.css" type="text/css" />
<script src="splitviewnavigator/splitviewnavigator.js"></script> <script src="splitviewnavigator/splitviewnavigator.js"></script>
<style> <style>
* { * {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
#detail { #detail {
padding:10px; padding:10px;
} }
#defaultView { #defaultView {
text-align:center; text-align:center;
padding-top:100px; padding-top:100px;
} }
.moviePoster { .moviePoster {
float:right; float:right;
width:120px; width:120px;
height:178px; height:178px;
overflow:hidden; overflow:hidden;
margin:10px; margin:10px;
padding:2px; padding:2px;
border:1px solid #999999; border:1px solid #999999;
} }
.listSelected { .listSelected {
background-color:#424242; background-color:#424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9)); background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9); background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9); background-image:-o-linear-gradient(top, #0069d6, #999da9);
color: #FFF; color: #FFF;
font-weight:bold; font-weight:bold;
} }
ul,li { ul,li {
padding:0; padding:0;
margin:0; margin:0;
border:0; border:0;
} }
.viewNavigator_contentHolder li { .viewNavigator_contentHolder li {
padding:0 10px; padding:0 10px;
border-bottom:1px solid #ccc; border-bottom:1px solid #ccc;
height:40px; line-height:40px; height:40px; line-height:40px;
font-weight:normal; font-weight:normal;
cursor:pointer; cursor:pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
} }
#detail li { #detail li {
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
height:auto; 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 = { var controller = {
data : [] data : []
}; };
controller.init = function () { 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; 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 ); console.log( url );
this.rootView = { title: "Rotten Tomatoes", this.rootView = { title: "Rotten Tomatoes",
backLabel: null, backLabel: null,
view: $("<div id='rootView'><div class='activityIndicator'></div></div>") view: $("<div id='rootView'><div class='activityIndicator'></div></div>")
}; };
$.ajax({ $.ajax({
url: url, url: url,
dataType: "json", dataType: "json",
success: function(data, textStatus, jqXHR) { success: function(data, textStatus, jqXHR) {
controller.rootData = data; controller.rootData = data;
controller.renderDefaultView(); controller.renderDefaultView();
}, },
error: function(jqXHR, textStatus, errorThrown) { error: function(jqXHR, textStatus, errorThrown) {
alert("error") alert("error")
} }
}); });
return; return;
}; };
controller.renderDefaultView = function () { controller.renderDefaultView = function () {
this.rootView.view.children().remove(); this.rootView.view.children().remove();
var html = "<ul>"; var html = "<ul>";
for ( var i = 0; i < controller.rootData.movies.length; i ++ ) for ( var i = 0; i < controller.rootData.movies.length; i ++ )
{ {
var movie = controller.rootData.movies[i]; var movie = controller.rootData.movies[i];
html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>"; html += "<li id='" + movie.id + "'onclick='controller.renderDetails(\"" + i + "\")'>" + movie.title + "</li>";
} }
html += "</ul>"; html += "</ul>";
this.rootView.view.html( html ); this.rootView.view.html( html );
if ( controller.tabletView ) { if ( controller.tabletView ) {
setTimeout( function() { setTimeout( function() {
window.splitViewNavigator.sidebarViewNavigator.refreshScroller(); window.splitViewNavigator.sidebarViewNavigator.refreshScroller();
}, 10 ); }, 10 );
} }
} }
controller.renderDetails = function (index) { controller.renderDetails = function (index) {
var movie = controller.rootData.movies[index]; var movie = controller.rootData.movies[index];
if ( controller.tabletView ) { if ( controller.tabletView ) {
window.splitViewNavigator.hideSidebar(); window.splitViewNavigator.hideSidebar();
window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) { window.splitViewNavigator.sidebarViewNavigator.content.find( "li" ).each(function(index) {
$(this).removeClass( "listSelected" ); $(this).removeClass( "listSelected" );
}); });
} }
else { else {
controller.rootView.view.find( "li" ).each(function(index) { controller.rootView.view.find( "li" ).each(function(index) {
$(this).removeClass( "listSelected" ); $(this).removeClass( "listSelected" );
}); });
} }
$( "#"+movie.id ).addClass( "listSelected" ); $( "#"+movie.id ).addClass( "listSelected" );
var html = "<div id='detail'>"; var html = "<div id='detail'>";
html += "<h1>" + movie.title + "</h1>"; html += "<h1>" + movie.title + "</h1>";
html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>"; html += "<p><strong>" + movie.mpaa_rating + "</strong>, " + movie.runtime + "min. - (" + movie.year + ")</p>";
html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>"; html += "<img src=\"" + movie.posters.profile + "\" class='moviePoster'>";
html += "<p>" + movie.synopsis + "</p>"; html += "<p>" + movie.synopsis + "</p>";
html += "<h3>Ratings:</h3><p>"; html += "<h3>Ratings:</h3><p>";
html += "<strong>Audience:</strong> " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "<br>" 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 += "<strong>Critics:</strong> " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "<br>"
html += "</p>" html += "</p>"
html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>"; html += "<h4>What the critics say:</h4><p>" + movie.critics_consensus + "</p>";
html += "<h3>Cast:</h3><p><ul>"; html += "<h3>Cast:</h3><p><ul>";
for ( var i = 0; i < movie.abridged_cast.length; i ++ ) for ( var i = 0; i < movie.abridged_cast.length; i ++ )
{ {
var actor = movie.abridged_cast[i]; var actor = movie.abridged_cast[i];
html += "<li><strong>" + actor.name + ":</strong> "; html += "<li><strong>" + actor.name + ":</strong> ";
if ( actor.characters ) { if ( actor.characters ) {
for ( var j = 0; j < actor.characters.length; j ++ ) for ( var j = 0; j < actor.characters.length; j ++ )
{ {
if ( j > 0 ) { html += ", " }; if ( j > 0 ) { html += ", " };
html += actor.characters[j]; html += actor.characters[j];
} }
} }
html += "</li>"; html += "</li>";
} }
html += "</ul></p>"; html += "</ul></p>";
html += "</div>"; html += "</div>";
var viewDescriptor = { title: movie.title, var viewDescriptor = { title: movie.title,
view: $(html) view: $(html)
}; };
if ( controller.tabletView ) { if ( controller.tabletView ) {
window.splitViewNavigator.replaceBodyView( viewDescriptor ); window.splitViewNavigator.replaceBodyView( viewDescriptor );
} }
else { else {
viewDescriptor.backLabel = "Back"; viewDescriptor.backLabel = "Back";
window.viewNavigator.pushView( viewDescriptor ); window.viewNavigator.pushView( viewDescriptor );
} }
} }
$(document).ready( function() { $(document).ready( function() {
controller.init(); controller.init();
var _w = Math.max( $(window).width(), $(window).height() ); var _w = Math.max( $(window).width(), $(window).height() );
var _h = Math.min( $(window).width(), $(window).height() ); var _h = Math.min( $(window).width(), $(window).height() );
controller.tabletView = (_w >= 1000 && _h >= 600); controller.tabletView = (_w >= 1000 && _h >= 600);
var defaultView = { title: "Rotten Tomatoes", var defaultView = { title: "Rotten Tomatoes",
view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>") view: $("<div id='defaultView'><img src='assets/tomato.jpeg' /></div>")
}; };
if ( controller.tabletView ) { if ( controller.tabletView ) {
//Setup the ViewNavigator //Setup the ViewNavigator
new SplitViewNavigator( 'body', "Movies" ); new SplitViewNavigator( 'body', {
window.splitViewNavigator.pushSidebarView( controller.rootView ); toggleButtonLabel: 'Movies'
window.splitViewNavigator.pushBodyView( defaultView ); });
} window.splitViewNavigator.pushSidebarView( controller.rootView );
else { window.splitViewNavigator.pushBodyView( defaultView );
//phone view }
window.viewNavigator = new ViewNavigator( 'body', "Movies" ); else {
window.viewNavigator.pushView( controller.rootView ); //phone view
} window.viewNavigator = new ViewNavigator( 'body' );
} ); window.viewNavigator.pushView( controller.rootView );
}
} );
</script> </script>
</head> </head>
<body></body> <body></body>
</html> </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 * Released under MIT license, http://cubiq.org/license
*/ */
(function(){ (function(window, doc){
var m = Math, var m = Math,
mround = function (r) { return r >> 0; }, dummyStyle = doc.createElement('div').style,
vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : vendor = (function () {
(/firefox/i).test(navigator.userAgent) ? 'Moz' : var vendors = 't,webkitT,MozT,msT,OT'.split(','),
(/trident/i).test(navigator.userAgent) ? 'ms' : t,
'opera' in window ? 'O' : '', 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 // Browser capabilities
isAndroid = (/android/gi).test(navigator.appVersion), isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion), isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isPlaybook = (/playbook/gi).test(navigator.appVersion), isTouchPad = (/hp-tablet/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, hasTouch = 'ontouchstart' in window && !isTouchPad,
hasTransform = vendor + 'Transform' in document.documentElement.style, hasTransform = vendor !== false,
hasTransitionEnd = isIDevice || isPlaybook, 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', RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown', START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove', MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup', END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : '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 // Helpers
trnOpen = 'translate' + (has3d ? '3d(' : '('), translateZ = has3d ? ' translateZ(0)' : '',
trnClose = has3d ? ',0)' : ')',
// Constructor // Constructor
iScroll = function (el, options) { iScroll = function (el, options) {
var that = this, var that = this,
doc = document,
i; i;
that.wrapper = typeof el == 'object' ? el : doc.getElementById(el); that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
@ -75,6 +103,7 @@ var m = Math,
useTransition: false, useTransition: false,
topOffset: 0, topOffset: 0,
checkDOMChanges: false, // Experimental checkDOMChanges: false, // Experimental
handleClick: true,
// Scrollbar // Scrollbar
hScrollbar: true, hScrollbar: true,
@ -118,7 +147,7 @@ var m = Math,
that.y = that.options.y; that.y = that.options.y;
// Normalize options // 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.hScrollbar = that.options.hScroll && that.options.hScrollbar;
that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar; that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
that.options.zoom = that.options.useTransform && that.options.zoom; that.options.zoom = that.options.useTransform && that.options.zoom;
@ -128,17 +157,16 @@ var m = Math,
// translate3d and scale doesn't work together! // translate3d and scale doesn't work together!
// Ignoring 3d ONLY WHEN YOU SET that.options.zoom // Ignoring 3d ONLY WHEN YOU SET that.options.zoom
if ( that.options.zoom && isAndroid ){ if ( that.options.zoom && isAndroid ){
trnOpen = 'translate('; translateZ = '';
trnClose = ')';
} }
// Set some default styles // Set some default styles
that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left'; that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + 'transform' : 'top left';
that.scroller.style[vendor + 'TransitionDuration'] = '0'; that.scroller.style[transitionDuration] = '0';
that.scroller.style[vendor + 'TransformOrigin'] = '0 0'; that.scroller.style[transformOrigin] = '0 0';
if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)'; 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'; else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
if (that.options.useTransition) that.options.fixedScrollbar = true; if (that.options.useTransition) that.options.fixedScrollbar = true;
@ -148,9 +176,10 @@ var m = Math,
that._bind(RESIZE_EV, window); that._bind(RESIZE_EV, window);
that._bind(START_EV); that._bind(START_EV);
if (!hasTouch) { if (!hasTouch) {
that._bind('mouseout', that.wrapper); if (that.options.wheelAction != 'none') {
if (that.options.wheelAction != 'none') that._bind('DOMMouseScroll');
that._bind(WHEEL_EV); that._bind('mousewheel');
}
} }
if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () { if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
@ -175,17 +204,14 @@ iScroll.prototype = {
switch(e.type) { switch(e.type) {
case START_EV: case START_EV:
if (!hasTouch && e.button !== 0) return; if (!hasTouch && e.button !== 0) return;
var nodeName = e.target.nodeName.toUpperCase();
if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return;
that._start(e); that._start(e);
break; break;
case MOVE_EV: that._move(e); break; case MOVE_EV: that._move(e); break;
case END_EV: case END_EV:
case CANCEL_EV: that._end(e); break; case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break; case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break; case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break;
case 'mouseout': that._mouseout(e); break; case TRNEND_EV: that._transitionEnd(e); break;
case 'webkitTransitionEnd': that._transitionEnd(e); break;
} }
}, },
@ -198,12 +224,11 @@ iScroll.prototype = {
_scrollbar: function (dir) { _scrollbar: function (dir) {
var that = this, var that = this,
doc = document,
bar; bar;
if (!that[dir + 'Scrollbar']) { if (!that[dir + 'Scrollbar']) {
if (that[dir + 'ScrollbarWrapper']) { 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'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']);
that[dir + 'ScrollbarWrapper'] = null; that[dir + 'ScrollbarWrapper'] = null;
that[dir + 'ScrollbarIndicator'] = null; that[dir + 'ScrollbarIndicator'] = null;
@ -219,7 +244,7 @@ iScroll.prototype = {
if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase(); 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'); 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.wrapper.appendChild(bar);
that[dir + 'ScrollbarWrapper'] = bar; that[dir + 'ScrollbarWrapper'] = bar;
@ -227,10 +252,10 @@ iScroll.prototype = {
// Create the scrollbar indicator // Create the scrollbar indicator
bar = doc.createElement('div'); bar = doc.createElement('div');
if (!that.options.scrollbarClass) { 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; 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 += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)'; 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 + 'ScrollbarWrapper'].appendChild(bar);
that[dir + 'ScrollbarIndicator'] = bar; that[dir + 'ScrollbarIndicator'] = bar;
@ -238,13 +263,13 @@ iScroll.prototype = {
if (dir == 'h') { if (dir == 'h') {
that.hScrollbarSize = that.hScrollbarWrapper.clientWidth; 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.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px';
that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize; that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX; that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
} else { } else {
that.vScrollbarSize = that.vScrollbarWrapper.clientHeight; 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.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px';
that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize; that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY; that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
@ -260,14 +285,16 @@ iScroll.prototype = {
}, },
_pos: function (x, y) { _pos: function (x, y) {
if (this.zoomed) return;
x = this.hScroll ? x : 0; x = this.hScroll ? x : 0;
y = this.vScroll ? y : 0; y = this.vScroll ? y : 0;
if (this.options.useTransform) { 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 { } else {
x = mround(x); x = m.round(x);
y = mround(y); y = m.round(y);
this.scroller.style.left = x + 'px'; this.scroller.style.left = x + 'px';
this.scroller.style.top = y + 'px'; this.scroller.style.top = y + 'px';
} }
@ -290,14 +317,14 @@ iScroll.prototype = {
if (pos < 0) { if (pos < 0) {
if (!that.options.fixedScrollbar) { if (!that.options.fixedScrollbar) {
size = that[dir + 'ScrollbarIndicatorSize'] + mround(pos * 3); size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3);
if (size < 8) size = 8; if (size < 8) size = 8;
that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px'; that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
} }
pos = 0; pos = 0;
} else if (pos > that[dir + 'ScrollbarMaxScroll']) { } else if (pos > that[dir + 'ScrollbarMaxScroll']) {
if (!that.options.fixedScrollbar) { 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; if (size < 8) size = 8;
that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px'; that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size); 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 + '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) { _start: function (e) {
@ -348,19 +375,20 @@ iScroll.prototype = {
if (that.options.momentum) { if (that.options.momentum) {
if (that.options.useTransform) { if (that.options.useTransform) {
// Very lame general purpose alternative to CSSMatrix // Very lame general purpose alternative to CSSMatrix
matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(','); matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');
x = matrix[4] * 1; x = +(matrix[12] || matrix[4]);
y = matrix[5] * 1; y = +(matrix[13] || matrix[5]);
} else { } else {
x = getComputedStyle(that.scroller, null).left.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, '') * 1; y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '');
} }
if (x != that.x || y != that.y) { 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); else cancelFrame(that.aniTime);
that.steps = []; that.steps = [];
that._pos(x, y); 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); if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
that._bind(MOVE_EV); that._bind(MOVE_EV, window);
that._bind(END_EV); that._bind(END_EV, window);
that._bind(CANCEL_EV); that._bind(CANCEL_EV, window);
}, },
_move: function (e) { _move: function (e) {
@ -411,7 +439,7 @@ iScroll.prototype = {
newX = this.originX - this.originX * that.lastScale + this.x, newX = this.originX - this.originX * that.lastScale + this.x,
newY = this.originY - this.originY * that.lastScale + this.y; 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); if (that.options.onZoom) that.options.onZoom.call(that, e);
return; return;
@ -463,7 +491,7 @@ iScroll.prototype = {
}, },
_end: function (e) { _end: function (e) {
if (hasTouch && e.touches.length != 0) return; if (hasTouch && e.touches.length !== 0) return;
var that = this, var that = this,
point = hasTouch ? e.changedTouches[0] : e, point = hasTouch ? e.changedTouches[0] : e,
@ -478,9 +506,9 @@ iScroll.prototype = {
snap, snap,
scale; scale;
that._unbind(MOVE_EV); that._unbind(MOVE_EV, window);
that._unbind(END_EV); that._unbind(END_EV, window);
that._unbind(CANCEL_EV); that._unbind(CANCEL_EV, window);
if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e); 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.x = that.originX - that.originX * that.lastScale + that.x;
that.y = that.originY - that.originY * that.lastScale + that.y; that.y = that.originY - that.originY * that.lastScale + that.y;
that.scroller.style[vendor + 'TransitionDuration'] = '200ms'; that.scroller.style[transitionDuration] = '200ms';
that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + that.scale + ')'; that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + that.scale + ')' + translateZ;
that.zoomed = false; that.zoomed = false;
that.refresh(); that.refresh();
@ -517,7 +545,7 @@ iScroll.prototype = {
that.options.onZoomEnd.call(that, e); that.options.onZoomEnd.call(that, e);
}, 200); // 200 is default zoom duration }, 200); // 200 is default zoom duration
} }
} else { } else if (this.options.handleClick) {
that.doubleTapTimer = setTimeout(function () { that.doubleTapTimer = setTimeout(function () {
that.doubleTapTimer = null; that.doubleTapTimer = null;
@ -526,7 +554,7 @@ iScroll.prototype = {
while (target.nodeType != 1) target = target.parentNode; while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') { 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, ev.initMouseEvent('click', true, true, e.view, 1,
point.screenX, point.screenY, point.clientX, point.clientY, point.screenX, point.screenY, point.clientX, point.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 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); if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return; return;
@ -551,8 +579,8 @@ iScroll.prototype = {
newPosX = that.x + momentumX.dist; newPosX = that.x + momentumX.dist;
newPosY = that.y + momentumY.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.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.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
} }
if (momentumX.dist || momentumY.dist) { 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); if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return; return;
@ -607,11 +635,11 @@ iScroll.prototype = {
} }
if (that.hScrollbar && that.options.hideScrollbar) { 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'; that.hScrollbarWrapper.style.opacity = '0';
} }
if (that.vScrollbar && that.options.hideScrollbar) { 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'; that.vScrollbarWrapper.style.opacity = '0';
} }
@ -667,20 +695,9 @@ iScroll.prototype = {
if (deltaY > that.minScrollY) deltaY = that.minScrollY; if (deltaY > that.minScrollY) deltaY = that.minScrollY;
else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY; else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
that.scrollTo(deltaX, deltaY, 0); if (that.maxScrollY < 0) {
}, that.scrollTo(deltaX, deltaY, 0);
_mouseout: function (e) {
var t = e.relatedTarget;
if (!t) {
this._end(e);
return;
} }
while (t = t.parentNode) if (t == this.wrapper) return;
this._end(e);
}, },
_transitionEnd: function (e) { _transitionEnd: function (e) {
@ -688,17 +705,17 @@ iScroll.prototype = {
if (e.target != that.scroller) return; if (e.target != that.scroller) return;
that._unbind('webkitTransitionEnd'); that._unbind(TRNEND_EV);
that._startAni(); that._startAni();
}, },
/** /**
* *
* Utilities * Utilities
* *
*/ */
_startAni: function () { _startAni: function () {
var that = this, var that = this,
startX = that.x, startY = that.y, startX = that.x, startY = that.y,
@ -724,7 +741,7 @@ iScroll.prototype = {
that._transitionTime(step.time); that._transitionTime(step.time);
that._pos(step.x, step.y); that._pos(step.x, step.y);
that.animating = false; that.animating = false;
if (step.time) that._bind('webkitTransitionEnd'); if (step.time) that._bind(TRNEND_EV);
else that._resetPos(0); else that._resetPos(0);
return; return;
} }
@ -754,9 +771,9 @@ iScroll.prototype = {
_transitionTime: function (time) { _transitionTime: function (time) {
time += 'ms'; time += 'ms';
this.scroller.style[vendor + 'TransitionDuration'] = time; this.scroller.style[transitionDuration] = time;
if (this.hScrollbar) this.hScrollbarIndicator.style[vendor + 'TransitionDuration'] = time; if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time;
if (this.vScrollbar) this.vScrollbarIndicator.style[vendor + 'TransitionDuration'] = time; if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time;
}, },
_momentum: function (dist, time, maxDistUpper, maxDistLower, size) { _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
@ -781,7 +798,7 @@ iScroll.prototype = {
newDist = newDist * (dist < 0 ? -1 : 1); newDist = newDist * (dist < 0 ? -1 : 1);
newTime = speed / deceleration; newTime = speed / deceleration;
return { dist: newDist, time: mround(newTime) }; return { dist: newDist, time: m.round(newTime) };
}, },
_offset: function (el) { _offset: function (el) {
@ -836,7 +853,7 @@ iScroll.prototype = {
that.currPageY = page; that.currPageY = page;
// Snap with constant speed (proportional duration) // 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 }; return { x: x, y: y, time: time };
}, },
@ -851,14 +868,14 @@ iScroll.prototype = {
/** /**
* *
* Public methods * Public methods
* *
*/ */
destroy: function () { destroy: function () {
var that = this; var that = this;
that.scroller.style[vendor + 'Transform'] = ''; that.scroller.style[transform] = '';
// Remove the scrollbars // Remove the scrollbars
that.hScrollbar = false; that.hScrollbar = false;
@ -869,16 +886,16 @@ iScroll.prototype = {
// Remove the event listeners // Remove the event listeners
that._unbind(RESIZE_EV, window); that._unbind(RESIZE_EV, window);
that._unbind(START_EV); that._unbind(START_EV);
that._unbind(MOVE_EV); that._unbind(MOVE_EV, window);
that._unbind(END_EV); that._unbind(END_EV, window);
that._unbind(CANCEL_EV); that._unbind(CANCEL_EV, window);
if (!that.options.hasTouch) { if (!that.options.hasTouch) {
that._unbind('mouseout', that.wrapper); that._unbind('DOMMouseScroll');
that._unbind(WHEEL_EV); 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); if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime);
@ -898,8 +915,8 @@ iScroll.prototype = {
that.wrapperH = that.wrapper.clientHeight || 1; that.wrapperH = that.wrapper.clientHeight || 1;
that.minScrollY = -that.options.topOffset || 0; that.minScrollY = -that.options.topOffset || 0;
that.scrollerW = mround(that.scroller.offsetWidth * that.scale); that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);
that.scrollerH = mround((that.scroller.offsetHeight + that.minScrollY) * that.scale); that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
that.maxScrollX = that.wrapperW - that.scrollerW; that.maxScrollX = that.wrapperW - that.scrollerW;
that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY; that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
that.dirX = 0; that.dirX = 0;
@ -954,8 +971,8 @@ iScroll.prototype = {
that._scrollbar('v'); that._scrollbar('v');
if (!that.zoomed) { if (!that.zoomed) {
that.scroller.style[vendor + 'TransitionDuration'] = '0'; that.scroller.style[transitionDuration] = '0';
that._resetPos(200); that._resetPos(400);
} }
}, },
@ -1026,9 +1043,9 @@ iScroll.prototype = {
this.enabled = false; this.enabled = false;
// If disabled after touchstart we make sure that there are no left over events // If disabled after touchstart we make sure that there are no left over events
this._unbind(MOVE_EV); this._unbind(MOVE_EV, window);
this._unbind(END_EV); this._unbind(END_EV, window);
this._unbind(CANCEL_EV); this._unbind(CANCEL_EV, window);
}, },
enable: function () { enable: function () {
@ -1036,7 +1053,7 @@ iScroll.prototype = {
}, },
stop: function () { stop: function () {
if (this.options.useTransition) this._unbind('webkitTransitionEnd'); if (this.options.useTransition) this._unbind(TRNEND_EV);
else cancelFrame(this.aniTime); else cancelFrame(this.aniTime);
this.steps = []; this.steps = [];
this.moved = false; this.moved = false;
@ -1062,8 +1079,8 @@ iScroll.prototype = {
that.x = that.x > 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x; 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.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[transitionDuration] = time + 'ms';
that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + scale + ')'; that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + scale + ')' + translateZ;
that.zoomed = false; 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; if (typeof exports !== 'undefined') exports.iScroll = iScroll;
else window.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 { .splitViewNavigator_root {
position: absolute; position:absolute;
top: 0px; top:0px;
bottom: 0px; bottom:0px;
left: 0px; left:0px;
right: 0px; right:0px;
} }
.splitViewNavigator_sidebar { .splitViewNavigator_sidebar {
position: absolute; position:absolute;
overflow: hidden; overflow:hidden;
-webkit-backface-visibility: 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); transform: translate3d(0,0,0);
border-right: 1px solid #999; -webkit-transform: translate3d(0,0,0);
border-right:1px solid #999;
} }
.splitViewNavigator_body { .splitViewNavigator_body {
position: absolute; position:absolute;
background: white; background:white;
overflow: hidden; overflow:hidden;
-webkit-backface-visibility: 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); transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
} }
.content_overlay_visible { .content_overlay_visible {
position: absolute; position:absolute;
top: 0px; top:0px;
bottom: 0px; bottom:0px;
left: 0px; left:0px;
right: 0px; right:0px;
} }
.content_overlay_hidden { .content_overlay_hidden {
position: absolute; position:absolute;
top: -1px; top:-1px;
left: -1px; left:-1px;
width: 0px; width:0px;
height: 0px; height:0px;
display: none; display:none;
} }
.sidebar_portrait { .sidebar_portrait {
top: 0px; top:0px;
bottom: 0px; bottom:0px;
left: -240px; left:-240px;
width: 240px; width:240px;
} }
.body_portrait { .body_portrait {
top: 0px; top:0px;
bottom: 0px; bottom:0px;
right: 0px; right:0px;
left: 0px; left:0px;
} }
.sidebar_landscape { .sidebar_landscape {
top: 0px; top:0px;
bottom: 0px; bottom:0px;
left: 0px; left:0px;
width: 240px; width:240px;
} }
.body_landscape { .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.animating = false;
this.animationDuration = 350; this.animationDuration = 350;
@ -20,21 +30,19 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
this.uniqueId = this.guid(); this.uniqueId = this.guid();
this.parent = $( target ); 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.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="splitViewNavigator_root"></div>'); this.rootElement = $('<div class="' + options.CSSNamespace + 'root"></div>');
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>'); this.sidebarContainer = $('<div class="' + options.CSSNamespace + 'sidebar"></div>');
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></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 ' + options.backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">' + options.toggleButtonLabel + '</li>');
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
this.rootElement.append( this.bodyContainer ); this.rootElement.append( this.bodyContainer );
this.rootElement.append( this.contentOverlay ); this.rootElement.append( this.contentOverlay );
@ -43,16 +51,16 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
var self = this; var self = this;
/*if ( "onorientationchange" in window ) { /*if ( 'onorientationchange' in window ) {
$(window).bind( "orientationchange", function(event){ self.resizeContent() } ) $(window).bind( 'orientationchange', function(event){ self.resizeContent() } )
} }
else {*/ else {*/
//$(window).resize( function(event){ self.resizeContent() } ); //$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.attr( "id" ) ); //alert( this.parent.attr( 'id' ) );
this.parent.resize( function(event){ self.resizeContent() } ); this.parent.resize( function(event){ self.resizeContent() } );
//} //}
if ( bindToWindow != false ) { if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } ); $(window).resize( function(event){ self.resizeContent() } );
} }
else { else {
@ -65,8 +73,10 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
this.contentOverlay.click( function(event){ self.hideSidebar() } ); this.contentOverlay.click( function(event){ self.hideSidebar() } );
new NoClickDelay( this.contentOverlay.get()[0] ); if ( this.options.useNoClickDelay ) {
new NoClickDelay( this.toggleSidebarButton.get()[0] ); new NoClickDelay( this.contentOverlay.get()[0] );
new NoClickDelay( this.toggleSidebarButton.get()[0] );
}
window.splitViewNavigator = this; window.splitViewNavigator = this;
} }
@ -80,42 +90,42 @@ SplitViewNavigator.prototype.resizeContent = function() {
SplitViewNavigator.prototype.applyStylesByOrientation = function() { SplitViewNavigator.prototype.applyStylesByOrientation = function() {
var $window = $(window) var $window = $(window)
var w = $window.width(); var w = $window.width();
var h = $window.height(); var h = $window.height();
var orientation = (w >= h) ? "landscape" : "portrait"; var orientation = (w >= h) ? 'landscape' : 'portrait';
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
//landscape //landscape
if ( orientation == "landscape" && this.orientation != orientation ) { if ( orientation == 'landscape' && this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" ); this.sidebarContainer.removeClass( 'sidebar_portrait' ).addClass( 'sidebar_landscape' );
this.bodyViewNavigator.setHeaderPadding( 0 ); this.bodyViewNavigator.setHeaderPadding( 0 );
this.toggleSidebarButton.remove(); this.toggleSidebarButton.remove();
if ( this.animationPerformed ) { if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", 0 ); this.sidebarContainer.css( 'left', 0 );
} }
this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" ); this.bodyContainer.removeClass( 'body_portrait' ).addClass( 'body_landscape' );
} }
//portrait //portrait
else if ( this.orientation != orientation ) { else if ( this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" ); this.sidebarContainer.removeClass( 'sidebar_landscape' ).addClass( 'sidebar_portrait' );
this.bodyViewNavigator.setHeaderPadding( "70px" ); this.bodyViewNavigator.setHeaderPadding( '70px' );
this.bodyContainer.append( this.toggleSidebarButton ); this.bodyContainer.append( this.toggleSidebarButton );
if ( this.animationPerformed ) { if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", -this.sidebarContainer.width() ); this.sidebarContainer.css( 'left', -this.sidebarContainer.width() );
} }
this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" ); this.bodyContainer.removeClass( 'body_landscape' ).addClass( 'body_portrait' );
} }
this.orientation = orientation; this.orientation = orientation;
} }
SplitViewNavigator.prototype.showSidebar = function() { SplitViewNavigator.prototype.showSidebar = function() {
this.animationPerformed = true; this.animationPerformed = true;
if ( this.orientation == "portrait" ) { if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" ); this.contentOverlay.removeClass( 'content_overlay_hidden' ).addClass( 'content_overlay_visible' );
this.animating = true; this.animating = true;
this.sidebarContainer.animate({ this.sidebarContainer.animate({
left:0, left:0,
@ -127,8 +137,8 @@ SplitViewNavigator.prototype.showSidebar = function() {
} }
SplitViewNavigator.prototype.hideSidebar = function() { SplitViewNavigator.prototype.hideSidebar = function() {
if ( this.orientation == "portrait" ) { if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
this.animating = true; this.animating = true;
this.sidebarContainer.animate({ this.sidebarContainer.animate({
left:-this.sidebarContainer.width(), left:-this.sidebarContainer.width(),
@ -143,7 +153,7 @@ SplitViewNavigator.prototype.animationCompleteHandler = function() {
var self = this; var self = this;
return function() { return function() {
self.animating = false; 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 //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
SplitViewNavigator.prototype.S4 = function() { 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() { 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-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
input,textarea { input,
textarea {
-webkit-touch-callout: auto; -webkit-touch-callout: auto;
-webkit-user-select: auto; -webkit-user-select: auto;
-moz-user-select: auto; -moz-user-select: auto;
-ms-user-select: auto; -ms-user-select: auto;
user-select: auto; user-select: auto;
} }
body { body {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -48,10 +48,10 @@ body {
} }
.viewNavigator_root { .viewNavigator_root {
width: 100%; width:100%;
height: 100%; height:100%;
background-color: 666666; background-color:666666;
overflow: hidden; overflow:hidden;
} }
.viewNavigator_header { .viewNavigator_header {
@ -61,16 +61,18 @@ body {
overflow: hide; overflow: hide;
padding: 0px; padding: 0px;
background: rgb(167,207,223); /* Old browsers */ 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%); backface-visibility: hidden;
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;
-webkit-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); -moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0);
@ -115,6 +117,9 @@ backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0);
@ -140,6 +145,7 @@ backface-visibility: hidden;
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} }
/* ANDROID BUG WORKAROUND */ /* ANDROID BUG WORKAROUND */
.viewNavigator_content select { .viewNavigator_content select {
overflow: auto; overflow: auto;
@ -148,6 +154,8 @@ backface-visibility: hidden;
-webkit-backface-visibility: auto; -webkit-backface-visibility: auto;
} }
.viewNavigator_contentHolder > div:first-child { .viewNavigator_contentHolder > div:first-child {
min-height: 100%; min-height: 100%;
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
@ -181,6 +189,9 @@ backface-visibility: hidden;
min-height: 100% backface-visibility: hidden; min-height: 100% backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0);
-o-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. 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.supportsBackKey = true; //phonegap on android only
this.animating = false; this.animating = false;
@ -23,25 +40,23 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
this.uniqueId = this.guid(); 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.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="viewNavigator_root"></div>'); this.rootElement = $('<div class="' + this.options.CSSNamespace + 'root"></div>');
this.header = $('<div class="viewNavigator_header"></div>'); this.header = $('<div class="' + options.CSSNamespace + 'header"></div>');
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>'); this.content = $('<div class="' + options.CSSNamespace + 'content" id="contentRoot"></div>');
this.rootElement.append( this.header ); this.rootElement.append( this.header );
this.rootElement.append( this.content ); this.rootElement.append( this.content );
this.parent = $( target ); this.parent = $( target );
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
var self = this; var self = this;
//$(window).resize( function(event){ self.resizeContent() } ); //$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.toString() ); //alert( this.parent.toString() );
//this.parent.resize( function(event){ self.resizeContent() } ); //this.parent.resize( function(event){ self.resizeContent() } );
if ( bindToWindow != false ) { if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } ); $(window).resize( function(event){ self.resizeContent() } );
} }
else { else {
@ -60,9 +75,9 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
ViewNavigator.prototype.replaceView = function( viewDescriptor ) { ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
if (this.animating) if (this.animating)
return; 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.history.push( viewDescriptor );
this.updateView( viewDescriptor ); this.updateView( viewDescriptor );
this.history.pop(); this.history.pop();
@ -73,7 +88,7 @@ ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
ViewNavigator.prototype.pushView = function( viewDescriptor ) { ViewNavigator.prototype.pushView = function( viewDescriptor ) {
if (this.animating) if (this.animating)
return; return;
viewDescriptor.animation = "pushEffect" viewDescriptor.animation = 'pushEffect'
this.history.push( viewDescriptor ); this.history.push( viewDescriptor );
this.updateView( viewDescriptor ); this.updateView( viewDescriptor );
} }
@ -90,14 +105,14 @@ ViewNavigator.prototype.popView = function() {
this.history.pop(); this.history.pop();
var viewDescriptor = this.history[ this.history.length-1 ]; var viewDescriptor = this.history[ this.history.length-1 ];
viewDescriptor.animation = "popEffect" viewDescriptor.animation = 'popEffect'
this.updateView( viewDescriptor ); this.updateView( viewDescriptor );
} }
ViewNavigator.prototype.setHeaderPadding = function( amount ) { ViewNavigator.prototype.setHeaderPadding = function( amount ) {
this.headerPadding = amount; this.headerPadding = amount;
if ( this.headerBacklink ) { 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.animating = true;
this.contentPendingRemove = this.contentViewHolder; this.contentPendingRemove = this.contentViewHolder;
this.headerContentPendingRemove = this.headerContent; 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 ); this.headerContent.append( this.headerTitle );
var linkGuid = this.guid(); var linkGuid = this.guid();
if ( viewDescriptor.backLabel ) { 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.headerContent.append( this.headerBacklink );
//this is for proper handling in splitviewnavigator //this is for proper handling in splitviewnavigator
@ -126,15 +139,15 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
} }
var id = this.guid(); 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.contentViewHolder.append( viewDescriptor.view );
this.resizeContent(); this.resizeContent();
if ( this.contentPendingRemove ){ if ( this.contentPendingRemove ){
this.contentPendingRemove.stop() this.contentPendingRemove.stop()
} }
if ( this.headerContentPendingRemove ) { if ( this.headerContentPendingRemove ) {
this.headerContentPendingRemove.stop() this.headerContentPendingRemove.stop()
} }
this.headerContent.stop() this.headerContent.stop()
this.contentViewHolder.stop() this.contentViewHolder.stop()
@ -142,134 +155,134 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
if ( this.scroller != null ) { if ( this.scroller != null ) {
var scrollY = this.scroller.y; var scrollY = this.scroller.y;
this.scroller.destroy(); this.scroller.destroy();
this.scroller = null; this.scroller = null;
if (this.contentPendingRemove) { if (this.contentPendingRemove) {
//console.log( scrollY ); //console.log( scrollY );
//use this to mantain scroll position when scroller is destroyed //use this to mantain scroll position when scroller is destroyed
var children = $( this.contentPendingRemove.children()[0] ); var children = $( this.contentPendingRemove.children()[0] );
children.attr( "scrollY", scrollY ); children.attr( 'scrollY', scrollY );
var originalTopMargin = children.css( "margin-top" ); var originalTopMargin = children.css( 'margin-top' );
children.attr( "originalTopMargin", originalTopMargin ); children.attr( 'originalTopMargin', originalTopMargin );
var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)"; var cssString = 'translate3d(0px, '+(parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString()+'px, 0px)';
children.css( "-webkit-transform", cssString ); 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; }); $(this.contentPendingRemove).click(function(){ return false; });
if ( viewDescriptor.animation == "popEffect" ) { if ( viewDescriptor.animation == 'popEffect' ) {
this.contentViewHolder.css( "left", -this.contentViewHolder.width() ); this.contentViewHolder.css( 'left', -this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 ); this.contentViewHolder.css( 'opacity', 1 );
this.content.prepend( this.contentViewHolder ); this.content.prepend( this.contentViewHolder );
this.headerContent.css( "left", -this.animationX ); this.headerContent.css( 'left', -this.animationX );
this.headerContent.css( "opacity", 0 ); this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent ); 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({ this.contentPendingRemove.animate({
left:this.contentViewHolder.width(), left:this.contentViewHolder.width(),
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration*0.8); }, this.animationDuration*0.8);
//remove this to change back //remove this to change back
this.contentViewHolder.animate({ this.contentViewHolder.animate({
left:0, left:0,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration/2); }, this.animationDuration/2);
this.headerContentPendingRemove.animate({ this.headerContentPendingRemove.animate({
left:this.animationX, left:this.animationX,
opacity:0, opacity:0,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration, func ); }, this.animationDuration, func );
this.headerContent.animate({ this.headerContent.animate({
left:0, left:0,
opacity:1, opacity:1,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration/2 ); }, this.animationDuration/2 );
//using a timeout to get around inconsistent response times for webkittransitionend event //using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 ); //setTimeout( func, this.animationDuration+90 );
} }
else if ( this.history.length > 1 ) { else if ( this.history.length > 1 ) {
this.contentViewHolder.css( "left", this.contentViewHolder.width() ); this.contentViewHolder.css( 'left', this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 ); this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder ); this.content.append( this.contentViewHolder );
this.headerContent.css( "left", this.animationX ); this.headerContent.css( 'left', this.animationX );
this.headerContent.css( "opacity", 0 ); this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent ); 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({ this.contentViewHolder.animate({
left:0, left:0,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration*0.75); }, this.animationDuration*0.75);
this.contentPendingRemove.animate({ this.contentPendingRemove.animate({
left:-this.contentViewHolder.width()/2, left:-this.contentViewHolder.width()/2,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration, func); }, this.animationDuration, func);
this.headerContent.animate({ this.headerContent.animate({
left:0, left:0,
opacity:1, opacity:1,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration*0.75); }, this.animationDuration*0.75);
this.headerContentPendingRemove.animate({ this.headerContentPendingRemove.animate({
left:-this.animationX, left:-this.animationX,
opacity:0, opacity:0,
avoidTransforms:false, avoidTransforms:false,
useTranslate3d: true useTranslate3d: true
}, this.animationDuration ); }, this.animationDuration );
//using a timeout to get around inconsistent response times for webkittransitionend event //using a timeout to get around inconsistent response times for webkittransitionend event
//var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
//setTimeout( func, this.animationDuration+90 ); //setTimeout( func, this.animationDuration+90 );
} }
else { else {
this.contentViewHolder.css( "left", 0 ); this.contentViewHolder.css( 'left', 0 );
this.contentViewHolder.css( "opacity", 1 ); this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder ); this.content.append( this.contentViewHolder );
this.headerContent.css( "left", 0 ); this.headerContent.css( 'left', 0 );
this.headerContent.css( "opacity", 1 ); this.headerContent.css( 'opacity', 1 );
this.header.append( this.headerContent ); this.header.append( this.headerContent );
this.animating = false; this.animating = false;
this.resetScroller(); this.resetScroller();
} }
if ( viewDescriptor.backLabel ) { if ( viewDescriptor.backLabel && this.options.useNoClickDelay ) {
new NoClickDelay( this.headerBacklink.get()[0] ); new NoClickDelay( this.headerBacklink.get()[0] );
} }
if ( viewDescriptor.showCallback ) { if ( viewDescriptor.showCallback ) {
viewDescriptor.showCallback(); viewDescriptor.showCallback();
} }
} }
@ -281,45 +294,56 @@ ViewNavigator.prototype.destroyScroller = function() {
this.scroller.destroy(); this.scroller.destroy();
this.scroller = null; this.scroller = null;
} }
} }
} }
ViewNavigator.prototype.resetScroller = function() { ViewNavigator.prototype.resetScroller = function() {
var id = this.contentViewHolder.attr( "id" ); var id = this.contentViewHolder.attr( 'id' );
var currentViewDescriptor = this.history[ this.history.length-1]; var currentViewDescriptor = this.history[ this.history.length-1];
this.destroyScroller(); this.destroyScroller();
if ( !this.winPhone ) { if ( !this.winPhone ) {
if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) { if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) {
var self = this; var self = this;
if ( 'ontouchstart' in window ){ 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 { else {
var target = $("#"+id ); var target = $('#'+id );
target.css( "overflow", "auto" ); target.css( 'overflow', 'auto' );
} }
} }
} }
} }
@ -329,20 +353,20 @@ ViewNavigator.prototype.refreshScroller = function() {
if ( this.scroller != null ) { if ( this.scroller != null ) {
this.scroller.refresh(); this.scroller.refresh();
} }
} }
} }
ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) { ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) {
var self = this; var self = this;
return function() { return function() {
self.animating = false; self.animating = false;
self.resetScroller(); self.resetScroller();
if ( removalTarget ) { if ( removalTarget ) {
removalTarget.unbind( "click" ); removalTarget.unbind( 'click' );
removalTarget.detach(); removalTarget.detach();
} }
if ( headerRemovalTarget ) { if ( headerRemovalTarget ) {
headerRemovalTarget.unbind( "click" ); headerRemovalTarget.unbind( 'click' );
headerRemovalTarget.detach(); 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 //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
ViewNavigator.prototype.S4 = function() { 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() { 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) //android+phonegap specific back button support - will only work if phonegap is used on android (www.phonegap.com)
if ( typeof PhoneGap != 'undefined' ) { if ( typeof PhoneGap != 'undefined' ) {
document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener('deviceready', onDeviceReady, false);
} }
function onDeviceReady() { function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false); document.addEventListener('backbutton', onBackKey, false);
} }
function onBackKey( event ) { function onBackKey( event ) {
@ -396,5 +420,3 @@ if (!document.addEventListener)
else else
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);