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>

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

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

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

@ -34,7 +34,9 @@
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Menu" );
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Menu'
});
window.splitViewNavigator.pushSidebarView( sidebarViewDescriptor );
window.splitViewNavigator.pushBodyView( bodyViewDescriptor );

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

Binary file not shown.

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

@ -1,3 +1,4 @@
body {
padding: 0;
margin: 0;
@ -39,16 +40,15 @@ h1 {
background:rgba(0,0,0,0.75);
padding:0;
margin:0 0 0 -100px;
border-radius: 10px;
-webkit-border-radius:10px;
}
#nav li {
display:block;
float:left;
width:14px;
height: 14px;
line-height: 14px;
border-radius: 7px;
height:14px; line-height:14px;
-webkit-border-radius:7px;
background:rgba(255,255,255,0.1);
overflow:hidden;
padding:0;
@ -72,28 +72,15 @@ h1 {
#swipeview-slider > div {
position:relative;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align:center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow:hidden;
}
#swipeview-slider span {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display:block;
text-align:center;
font-size:1.4em;

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

@ -215,13 +215,15 @@
if ( controller.tabletView ) {
//Setup the ViewNavigator
new SplitViewNavigator( 'body', "Movies" );
new SplitViewNavigator( 'body', {
toggleButtonLabel: 'Movies'
});
window.splitViewNavigator.pushSidebarView( controller.rootView );
window.splitViewNavigator.pushBodyView( defaultView );
}
else {
//phone view
window.viewNavigator = new ViewNavigator( 'body', "Movies" );
window.viewNavigator = new ViewNavigator( 'body' );
window.viewNavigator.pushView( controller.rootView );
}
} );

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

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

12
src/splitviewnavigator/splitviewnavigator.css
View File

@ -23,12 +23,8 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
position:absolute;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-right:1px solid #999;
}
@ -37,12 +33,8 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
background:white;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.content_overlay_visible {

68
src/splitviewnavigator/splitviewnavigator.js
View File

@ -11,7 +11,17 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) {
var SplitViewNavigator = function( target, options ) {
var defaults = {
CSSNamespace: 'splitViewNavigator_',
toggleButtonLabel: 'Menu',
backLinkCSS: 'viewNavigator_backButton',
bindToWindow: true,
useNoClickDelay: true
};
this.options = options = $.extend( {}, defaults, options );
this.animating = false;
this.animationDuration = 350;
@ -20,21 +30,19 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
this.uniqueId = this.guid();
this.parent = $( target );
var regexp = new RegExp("Windows Phone OS 7");
var regexp = new RegExp('Windows Phone OS 7');
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="splitViewNavigator_root"></div>');
this.sidebarContainer = $('<div class="splitViewNavigator_sidebar"></div>');
this.rootElement = $('<div class="' + options.CSSNamespace + 'root"></div>');
this.sidebarContainer = $('<div class="' + options.CSSNamespace + 'sidebar"></div>');
this.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
this.bodyContainer = $('<div class="' + options.CSSNamespace + 'body"></div>');
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false );
this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], options.backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false );
this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], options.backLinkCSS, false );
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
this.toggleSidebarButton = $('<li class="viewNavigator_backButton viewNavigator_backButtonPosition ' + options.backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">' + options.toggleButtonLabel + '</li>');
this.rootElement.append( this.bodyContainer );
this.rootElement.append( this.contentOverlay );
@ -43,16 +51,16 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
var self = this;
/*if ( "onorientationchange" in window ) {
$(window).bind( "orientationchange", function(event){ self.resizeContent() } )
/*if ( 'onorientationchange' in window ) {
$(window).bind( 'orientationchange', function(event){ self.resizeContent() } )
}
else {*/
//$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.attr( "id" ) );
//alert( this.parent.attr( 'id' ) );
this.parent.resize( function(event){ self.resizeContent() } );
//}
if ( bindToWindow != false ) {
if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } );
}
else {
@ -65,8 +73,10 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT
this.contentOverlay.click( function(event){ self.hideSidebar() } );
if ( this.options.useNoClickDelay ) {
new NoClickDelay( this.contentOverlay.get()[0] );
new NoClickDelay( this.toggleSidebarButton.get()[0] );
}
window.splitViewNavigator = this;
}
@ -84,29 +94,29 @@ SplitViewNavigator.prototype.applyStylesByOrientation = function() {
var h = $window.height();
var orientation = (w >= h) ? "landscape" : "portrait";
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
var orientation = (w >= h) ? 'landscape' : 'portrait';
this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
//landscape
if ( orientation == "landscape" && this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" );
if ( orientation == 'landscape' && this.orientation != orientation ) {
this.sidebarContainer.removeClass( 'sidebar_portrait' ).addClass( 'sidebar_landscape' );
this.bodyViewNavigator.setHeaderPadding( 0 );
this.toggleSidebarButton.remove();
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", 0 );
this.sidebarContainer.css( 'left', 0 );
}
this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" );
this.bodyContainer.removeClass( 'body_portrait' ).addClass( 'body_landscape' );
}
//portrait
else if ( this.orientation != orientation ) {
this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" );
this.bodyViewNavigator.setHeaderPadding( "70px" );
this.sidebarContainer.removeClass( 'sidebar_landscape' ).addClass( 'sidebar_portrait' );
this.bodyViewNavigator.setHeaderPadding( '70px' );
this.bodyContainer.append( this.toggleSidebarButton );
if ( this.animationPerformed ) {
this.sidebarContainer.css( "left", -this.sidebarContainer.width() );
this.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;
@ -114,8 +124,8 @@ SplitViewNavigator.prototype.applyStylesByOrientation = function() {
SplitViewNavigator.prototype.showSidebar = function() {
this.animationPerformed = true;
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" );
if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( 'content_overlay_hidden' ).addClass( 'content_overlay_visible' );
this.animating = true;
this.sidebarContainer.animate({
left:0,
@ -127,8 +137,8 @@ SplitViewNavigator.prototype.showSidebar = function() {
}
SplitViewNavigator.prototype.hideSidebar = function() {
if ( this.orientation == "portrait" ) {
this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" );
if ( this.orientation == 'portrait' ) {
this.contentOverlay.removeClass( 'content_overlay_visible' ).addClass( 'content_overlay_hidden' );
this.animating = true;
this.sidebarContainer.animate({
left:-this.sidebarContainer.width(),
@ -181,5 +191,5 @@ SplitViewNavigator.prototype.S4 = 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();
}

27
src/viewnavigator/viewnavigator.css
View File

@ -12,22 +12,22 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input,textarea {
input,
textarea {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body {
position: absolute;
top: 0px;
@ -61,16 +61,18 @@ body {
overflow: hide;
padding: 0px;
background: rgb(167,207,223); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
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: -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 */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
@ -115,6 +117,9 @@ backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
@ -140,6 +145,7 @@ backface-visibility: hidden;
transform: translate3d(0,0,0);
}
/* ANDROID BUG WORKAROUND */
.viewNavigator_content select {
overflow: auto;
@ -148,6 +154,8 @@ backface-visibility: hidden;
-webkit-backface-visibility: auto;
}
.viewNavigator_contentHolder > div:first-child {
min-height: 100%;
border-bottom: 1px solid #444;
@ -181,6 +189,9 @@ backface-visibility: hidden;
min-height: 100% backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);

144
src/viewnavigator/viewnavigator.js
View File

@ -10,8 +10,25 @@ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVE
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
var ViewNavigator = function( target, options ) {
var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
var defaults = {
CSSNamespace: 'viewNavigator_',
backLinkCSS: 'viewNavigator_backButton',
bindToWindow: true,
useNoClickDelay: true
};
//support legacy url signature
//function( target, backLinkCSS, bindToWindow ) {
if ( typeof(options) == "string" ){
options = {
backLinkCSS:arguments[1],
bindToWindow:arguments[2]
}
}
this.options = options = $.extend( {}, defaults, options );
this.supportsBackKey = true; //phonegap on android only
this.animating = false;
@ -23,25 +40,23 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
this.uniqueId = this.guid();
var regexp = new RegExp("Windows Phone OS 7");
var regexp = new RegExp('Windows Phone OS 7');
this.winPhone = (navigator.userAgent.search(regexp) >= 0);
this.rootElement = $('<div class="viewNavigator_root"></div>');
this.header = $('<div class="viewNavigator_header"></div>');
this.content = $('<div class="viewNavigator_content" id="contentRoot"></div>');
this.rootElement = $('<div class="' + this.options.CSSNamespace + 'root"></div>');
this.header = $('<div class="' + options.CSSNamespace + 'header"></div>');
this.content = $('<div class="' + options.CSSNamespace + 'content" id="contentRoot"></div>');
this.rootElement.append( this.header );
this.rootElement.append( this.content );
this.parent = $( target );
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
var self = this;
//$(window).resize( function(event){ self.resizeContent() } );
//alert( this.parent.toString() );
//this.parent.resize( function(event){ self.resizeContent() } );
if ( bindToWindow != false ) {
if ( options.bindToWindow != false ) {
$(window).resize( function(event){ self.resizeContent() } );
}
else {
@ -60,9 +75,9 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) {
ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
viewDescriptor.animation = 'pushEffect'
//this is a hack to mimic behavior of pushView, then pop off the "current" from the history
//this is a hack to mimic behavior of pushView, then pop off the 'current' from the history
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
this.history.pop();
@ -73,7 +88,7 @@ ViewNavigator.prototype.replaceView = function( viewDescriptor ) {
ViewNavigator.prototype.pushView = function( viewDescriptor ) {
if (this.animating)
return;
viewDescriptor.animation = "pushEffect"
viewDescriptor.animation = 'pushEffect'
this.history.push( viewDescriptor );
this.updateView( viewDescriptor );
}
@ -90,14 +105,14 @@ ViewNavigator.prototype.popView = function() {
this.history.pop();
var viewDescriptor = this.history[ this.history.length-1 ];
viewDescriptor.animation = "popEffect"
viewDescriptor.animation = 'popEffect'
this.updateView( viewDescriptor );
}
ViewNavigator.prototype.setHeaderPadding = function( amount ) {
this.headerPadding = amount;
if ( this.headerBacklink ) {
this.headerBacklink.css("left", amount);
this.headerBacklink.css('left', amount);
}
}
@ -106,19 +121,17 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
this.animating = true;
this.contentPendingRemove = this.contentViewHolder;
this.headerContentPendingRemove = this.headerContent;
this.headerContent = $('<div class="viewNavigator_headerContent"></div>');
this.headerContent = $('<div class="' + this.options.CSSNamespace + 'headerContent"></div>');
this.headerTitle = $("<div class='viewNavigator_header_title'>" + viewDescriptor.title + "</div>");
this.headerTitle = $('<div class="' + this.options.CSSNamespace + 'header_title">' + viewDescriptor.title + '</div>');
this.headerContent.append( this.headerTitle );
var linkGuid = this.guid();
if ( viewDescriptor.backLabel ) {
this.headerBacklink = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + this.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
this.headerBacklink = $('<li class="' + this.options.CSSNamespace + 'header_backlink ' + this.options.CSSNamespace + 'backButtonPosition ' + this.options.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
this.headerContent.append( this.headerBacklink );
//this is for proper handling in splitviewnavigator
@ -126,7 +139,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
}
var id = this.guid();
this.contentViewHolder = $('<div class="viewNavigator_contentHolder" id="' + id + '"></div>');
this.contentViewHolder = $('<div class="' + this.options.CSSNamespace + 'contentHolder" id="' + id + '"></div>');
this.contentViewHolder.append( viewDescriptor.view );
this.resizeContent();
@ -151,28 +164,28 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
//use this to mantain scroll position when scroller is destroyed
var children = $( this.contentPendingRemove.children()[0] );
children.attr( "scrollY", scrollY );
var originalTopMargin = children.css( "margin-top" );
children.attr( "originalTopMargin", originalTopMargin );
children.attr( 'scrollY', scrollY );
var originalTopMargin = children.css( 'margin-top' );
children.attr( 'originalTopMargin', originalTopMargin );
var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)";
children.css( "-webkit-transform", cssString );
var cssString = 'translate3d(0px, '+(parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString()+'px, 0px)';
children.css( '-webkit-transform', cssString );
// children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" );
// children.css( 'margin-top', (parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString() + 'px' );
}
}
$(this.contentPendingRemove).click(function(){ return false; });
if ( viewDescriptor.animation == "popEffect" ) {
if ( viewDescriptor.animation == 'popEffect' ) {
this.contentViewHolder.css( "left", -this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.contentViewHolder.css( 'left', -this.contentViewHolder.width() );
this.contentViewHolder.css( 'opacity', 1 );
this.content.prepend( this.contentViewHolder );
this.headerContent.css( "left", -this.animationX );
this.headerContent.css( "opacity", 0 );
this.headerContent.css( 'left', -this.animationX );
this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
@ -211,13 +224,13 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
}
else if ( this.history.length > 1 ) {
this.contentViewHolder.css( "left", this.contentViewHolder.width() );
this.contentViewHolder.css( "opacity", 1 );
this.contentViewHolder.css( 'left', this.contentViewHolder.width() );
this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", this.animationX );
this.headerContent.css( "opacity", 0 );
this.headerContent.css( 'left', this.animationX );
this.headerContent.css( 'opacity', 0 );
this.header.append( this.headerContent );
var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder );
@ -253,18 +266,18 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
//setTimeout( func, this.animationDuration+90 );
}
else {
this.contentViewHolder.css( "left", 0 );
this.contentViewHolder.css( "opacity", 1 );
this.contentViewHolder.css( 'left', 0 );
this.contentViewHolder.css( 'opacity', 1 );
this.content.append( this.contentViewHolder );
this.headerContent.css( "left", 0 );
this.headerContent.css( "opacity", 1 );
this.headerContent.css( 'left', 0 );
this.headerContent.css( 'opacity', 1 );
this.header.append( this.headerContent );
this.animating = false;
this.resetScroller();
}
if ( viewDescriptor.backLabel ) {
if ( viewDescriptor.backLabel && this.options.useNoClickDelay ) {
new NoClickDelay( this.headerBacklink.get()[0] );
}
@ -287,7 +300,7 @@ ViewNavigator.prototype.destroyScroller = 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];
this.destroyScroller();
@ -298,25 +311,36 @@ ViewNavigator.prototype.resetScroller = 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 );
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 ) );
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 );
//this.scroller = new iScroll( id );
}
else {
var target = $("#"+id );
target.css( "overflow", "auto" );
var target = $('#'+id );
target.css( 'overflow', 'auto' );
}
}
}
@ -338,11 +362,11 @@ ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, heade
self.animating = false;
self.resetScroller();
if ( removalTarget ) {
removalTarget.unbind( "click" );
removalTarget.unbind( 'click' );
removalTarget.detach();
}
if ( headerRemovalTarget ) {
headerRemovalTarget.unbind( "click" );
headerRemovalTarget.unbind( 'click' );
headerRemovalTarget.detach();
}
}
@ -365,7 +389,7 @@ ViewNavigator.prototype.S4 = 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)
if ( typeof PhoneGap != 'undefined' ) {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKey, false);
document.addEventListener('backbutton', onBackKey, false);
}
function onBackKey( event ) {
@ -396,5 +420,3 @@ if (!document.addEventListener)
else
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);