mirror of
https://github.com/moparisthebest/app-UI
synced 2024-12-21 23:18:52 -05:00
merged commits from pull#38
merged commits from pull #38 also added legacy support for any code pre-options parameters
This commit is contained in:
Andrew Trice
parent
03e2f76ab1
commit
8be7936004
8
.idea/libraries/sass_stdlib.xml
Normal file
8
.idea/libraries/sass_stdlib.xml
Normal 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
4123
samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
samples/01 - viewnavigator/05 - legacy/assets/header_bg_wood.png
Normal file
BIN
samples/01 - viewnavigator/05 - legacy/assets/header_bg_wood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
208
samples/01 - viewnavigator/05 - legacy/index.html
Normal file
208
samples/01 - viewnavigator/05 - legacy/index.html
Normal 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>
|
||||
@ -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);
|
||||
@ -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
BIN
samples/03 - slidingView/.DS_Store
vendored
Binary file not shown.
@ -1,3 +1,4 @@
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -15,93 +16,79 @@ body {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
font-size:2em;
|
||||
padding:20px 0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
height: 150px;
|
||||
background: #ddd;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
width:100%;
|
||||
min-width:320px;
|
||||
height:150px;
|
||||
background:#ddd;
|
||||
border-top:1px solid #aaa;
|
||||
border-bottom:1px solid #aaa;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 8px;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
background: rgba(0,0,0,0.75);
|
||||
padding: 0;
|
||||
margin: 0 0 0 -100px;
|
||||
border-radius: 10px;
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
top:8px;
|
||||
width:200px;
|
||||
height:20px;
|
||||
left:50%;
|
||||
background:rgba(0,0,0,0.75);
|
||||
padding:0;
|
||||
margin:0 0 0 -100px;
|
||||
-webkit-border-radius:10px;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
border-radius: 7px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 3px 11px 0 0;
|
||||
text-align: center;
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px; line-height:14px;
|
||||
-webkit-border-radius:7px;
|
||||
background:rgba(255,255,255,0.1);
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
margin:3px 11px 0 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#nav li#prev {
|
||||
margin-left: 5px;
|
||||
background: transparent;
|
||||
margin-left:5px;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li#next {
|
||||
margin-right: 0;
|
||||
background: transparent;
|
||||
margin-right:0;
|
||||
background:transparent;
|
||||
}
|
||||
|
||||
#nav li.selected {
|
||||
background: rgba(255,255,255,0.4);
|
||||
background:rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
#swipeview-slider > div {
|
||||
position: relative;
|
||||
|
||||
-moz-box-orient: vertical;
|
||||
-ms-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-box-pack: center;
|
||||
box-pack: center;
|
||||
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-box-align: center;
|
||||
box-align: center;
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-pack:center;
|
||||
-webkit-box-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#swipeview-slider span {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
padding: 0 20px;
|
||||
-webkit-box-sizing:border-box;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
padding:0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
padding:20px;
|
||||
margin:0;
|
||||
font-size:1.4em;
|
||||
}
|
||||
|
||||
@ -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
274
src/libs/iscroll.js
Executable file → Normal 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,75 +12,67 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
.splitViewNavigator_root {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
}
|
||||
|
||||
.splitViewNavigator_sidebar {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
border-right: 1px solid #999;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
border-right:1px solid #999;
|
||||
}
|
||||
|
||||
.splitViewNavigator_body {
|
||||
position: absolute;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
position:absolute;
|
||||
background:white;
|
||||
overflow:hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.content_overlay_visible {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
}
|
||||
|
||||
.content_overlay_hidden {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: none;
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
left:-1px;
|
||||
width:0px;
|
||||
height:0px;
|
||||
display:none;
|
||||
}
|
||||
|
||||
.sidebar_portrait {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: -240px;
|
||||
width: 240px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:-240px;
|
||||
width:240px;
|
||||
}
|
||||
|
||||
.body_portrait {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.sidebar_landscape {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 240px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:240px;
|
||||
}
|
||||
|
||||
.body_landscape {
|
||||
|
||||
@ -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();
|
||||
}
|
||||
@ -12,22 +12,22 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
* {
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input,textarea {
|
||||
input,
|
||||
textarea {
|
||||
-webkit-touch-callout: auto;
|
||||
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
@ -48,10 +48,10 @@ body {
|
||||
}
|
||||
|
||||
.viewNavigator_root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: 666666;
|
||||
overflow: hidden;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:666666;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.viewNavigator_header {
|
||||
@ -61,16 +61,18 @@ body {
|
||||
overflow: hide;
|
||||
padding: 0px;
|
||||
background: rgb(167,207,223); /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
|
||||
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
|
||||
background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
|
||||
backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
@ -115,6 +117,9 @@ backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
@ -140,6 +145,7 @@ backface-visibility: hidden;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
|
||||
/* ANDROID BUG WORKAROUND */
|
||||
.viewNavigator_content select {
|
||||
overflow: auto;
|
||||
@ -148,6 +154,8 @@ backface-visibility: hidden;
|
||||
-webkit-backface-visibility: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.viewNavigator_contentHolder > div:first-child {
|
||||
min-height: 100%;
|
||||
border-bottom: 1px solid #444;
|
||||
@ -181,6 +189,9 @@ backface-visibility: hidden;
|
||||
min-height: 100% backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user