From 6a767743bd55c152b6d59d336ed29f2618f6cdc3 Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 14:49:16 +0100 Subject: [PATCH 1/6] changed indent: spaces to tab spaces and tabs were mixed. Changed all spaces to tabs. Also deleted all spaces in empty lines. --- src/slidingview/slidingview.css | 2 +- src/slidingview/slidingview.js | 68 ++-- src/splitviewnavigator/splitviewnavigator.css | 2 +- src/splitviewnavigator/splitviewnavigator.js | 114 +++--- src/viewnavigator/viewnavigator.css | 68 ++-- src/viewnavigator/viewnavigator.js | 338 +++++++++--------- 6 files changed, 295 insertions(+), 297 deletions(-) diff --git a/src/slidingview/slidingview.css b/src/slidingview/slidingview.css index f8f426a..f0afd0a 100644 --- a/src/slidingview/slidingview.css +++ b/src/slidingview/slidingview.css @@ -65,4 +65,4 @@ body { overflow: hidden; padding: 0px; margin: 0px; -} \ No newline at end of file +} diff --git a/src/slidingview/slidingview.js b/src/slidingview/slidingview.js index 343fcdf..df3b9bc 100644 --- a/src/slidingview/slidingview.js +++ b/src/slidingview/slidingview.js @@ -13,24 +13,24 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); var SlidingView = function( sidebarId, bodyId ) { - + window.slidingView = this; - + this.gestureStarted = false; this.bodyOffset = 0; - + this.sidebarWidth = 250; - + this.sidebar = $("#"+sidebarId); this.body = $("#"+bodyId); - + this.sidebar.addClass( "slidingview_sidebar" ); this.body.addClass( "slidingview_body" ); - + var self = this; $(window).resize( function(event){ self.resizeContent() } ); $(this.parent).resize( function(event){ self.resizeContent() } ); - + if ( "onorientationchange" in window ) { $(window).bind( "onorientationchange", function(event){ self.resizeContent() } ) } @@ -41,7 +41,7 @@ var SlidingView = function( sidebarId, bodyId ) { SlidingView.prototype.setupEventHandlers = function() { this.touchSupported = ('ontouchstart' in window); - + this.START_EVENT = this.touchSupported ? 'touchstart' : 'mousedown'; this.MOVE_EVENT = this.touchSupported ? 'touchmove' : 'mousemove'; this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup'; @@ -54,13 +54,13 @@ SlidingView.prototype.setupEventHandlers = function() { SlidingView.prototype.onTouchStart = function(event) { //console.log( event.type ); - + this.gestureStartPosition = this.getTouchCoordinates( event ); - + var self = this; this.touchMoveHandler = function( event ){ self.onTouchMove(event) }; this.touchUpHandler = function( event ){ self.onTouchEnd(event) }; - + this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler, false ); this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler, false ); this.body.stop(); @@ -68,7 +68,7 @@ SlidingView.prototype.onTouchStart = function(event) { SlidingView.prototype.onTouchMove = function(event) { var currentPosition = this.getTouchCoordinates( event ); - + if ( this.gestureStarted ) { event.preventDefault(); event.stopPropagation(); @@ -79,13 +79,13 @@ SlidingView.prototype.onTouchMove = function(event) { //console.log( Math.abs( currentPosition.x - this.gestureStartPosition.x ) ); //detect the gesture if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) { - + //dragging veritcally - ignore this gesture this.unbindEvents(); return; } else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) { - + //dragging horizontally - let's handle this this.gestureStarted = true; event.preventDefault(); @@ -107,40 +107,40 @@ SlidingView.prototype.onTouchEnd = function(event) { SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) { - + var deltaX = (currentPosition.x - this.gestureStartPosition.x); var targetX = this.bodyOffset + deltaX; - + targetX = Math.max( targetX, 0 ); targetX = Math.min( targetX, this.sidebarWidth ); - + this.bodyOffset = targetX; - + //console.log( targetX ); //this.body.css("left", targetX ); //console.log( this.body.css("left") ); - + if ( this.body.css("left") != "0px" ) { this.body.css("left", "0px" ); } this.body.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" ); this.body.css("-moz-transform", "translate3d(" + targetX + "px,0,0)" ); this.body.css("transform", "translate3d(" + targetX + "px,0,0)" ); - + //console.log( this.body.css("-moz-transform"), targetX ); - - + + /*if ( currentPosition != targetX ) { - + this.body.stop(true,false).animate({ left:targetX, avoidTransforms:false, useTranslate3d: true }, 100); }*/ - + this.sidebar.trigger( "slidingViewProgress", { current: targetX, max:this.sidebarWidth } ); - + this.gestureStartPosition = currentPosition; } @@ -158,18 +158,18 @@ SlidingView.prototype.snapToPosition = function() { targetX = this.sidebarWidth; } this.bodyOffset = targetX; - + //console.log( currentPosition, halfWidth, targetX ); if ( currentPosition != targetX ) { - + this.body.stop(true, false).animate({ left:targetX, avoidTransforms:false, useTranslate3d: true }, 100); - - this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } ); + + this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } ); } } @@ -193,10 +193,10 @@ SlidingView.prototype.getTouchCoordinates = function(event) { SlidingView.prototype.resizeContent = function() { var $window = $(window) - var w = $window.width(); - var h = $window.height(); - - this.body.width( w ); + var w = $window.width(); + var h = $window.height(); + + this.body.width( w ); } - \ No newline at end of file + diff --git a/src/splitviewnavigator/splitviewnavigator.css b/src/splitviewnavigator/splitviewnavigator.css index 7132dff..f7394cf 100644 --- a/src/splitviewnavigator/splitviewnavigator.css +++ b/src/splitviewnavigator/splitviewnavigator.css @@ -80,4 +80,4 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. bottom:0px; right:0px; left:240px; -} \ No newline at end of file +} diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index e768d05..28cb27d 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -12,37 +12,37 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) { - + this.animating = false; this.animationDuration = 350; this.animationPerformed = false; - + this.uniqueId = this.guid(); this.parent = $( target ); - - var regexp = new RegExp("Windows Phone OS 7"); + + var regexp = new RegExp("Windows Phone OS 7"); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - + this.rootElement = $('
'); this.sidebarContainer = $('
'); this.contentOverlay = $('
'); this.bodyContainer = $('
'); - - this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false ); - + + this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false ); + this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false ); - + this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; - + this.toggleSidebarButton = $('
  • '+toggleButtonLabel+'
    • '); - + this.rootElement.append( this.bodyContainer ); this.rootElement.append( this.contentOverlay ); - + this.rootElement.append( this.sidebarContainer ); - + var self = this; - + /*if ( "onorientationchange" in window ) { $(window).bind( "orientationchange", function(event){ self.resizeContent() } ) } @@ -51,20 +51,20 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT //alert( this.parent.attr( "id" ) ); this.parent.resize( function(event){ self.resizeContent() } ); //} - + if ( bindToWindow != false ) { $(window).resize( function(event){ self.resizeContent() } ); } else { this.parent.resize( function(event){ self.resizeContent() } ); } - + this.resizeContent(); - + this.parent.append( this.rootElement ); - + this.contentOverlay.click( function(event){ self.hideSidebar() } ); - + new NoClickDelay( this.contentOverlay.get()[0] ); new NoClickDelay( this.toggleSidebarButton.get()[0] ); window.splitViewNavigator = this; @@ -74,68 +74,68 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT SplitViewNavigator.prototype.resizeContent = function() { this.applyStylesByOrientation(); - this.sidebarViewNavigator.resizeContent(); + this.sidebarViewNavigator.resizeContent(); this.bodyViewNavigator.resizeContent() } SplitViewNavigator.prototype.applyStylesByOrientation = function() { var $window = $(window) - var w = $window.width(); - var h = $window.height(); - - - var orientation = (w >= h) ? "landscape" : "portrait"; - this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); - - //landscape - if ( orientation == "landscape" && this.orientation != orientation ) { - this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" ); - this.bodyViewNavigator.setHeaderPadding( 0 ); - this.toggleSidebarButton.remove(); - if ( this.animationPerformed ) { - this.sidebarContainer.css( "left", 0 ); - } - this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" ); - } - - //portrait - else if ( this.orientation != orientation ) { - this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" ); - this.bodyViewNavigator.setHeaderPadding( "70px" ); + var w = $window.width(); + var h = $window.height(); + + + var orientation = (w >= h) ? "landscape" : "portrait"; + this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); + + //landscape + if ( orientation == "landscape" && this.orientation != orientation ) { + this.sidebarContainer.removeClass( "sidebar_portrait" ).addClass( "sidebar_landscape" ); + this.bodyViewNavigator.setHeaderPadding( 0 ); + this.toggleSidebarButton.remove(); + if ( this.animationPerformed ) { + this.sidebarContainer.css( "left", 0 ); + } + this.bodyContainer.removeClass( "body_portrait" ).addClass( "body_landscape" ); + } + + //portrait + else if ( this.orientation != orientation ) { + this.sidebarContainer.removeClass( "sidebar_landscape" ).addClass( "sidebar_portrait" ); + this.bodyViewNavigator.setHeaderPadding( "70px" ); this.bodyContainer.append( this.toggleSidebarButton ); - if ( this.animationPerformed ) { - this.sidebarContainer.css( "left", -this.sidebarContainer.width() ); - } - this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" ); - } - - this.orientation = orientation; + if ( this.animationPerformed ) { + this.sidebarContainer.css( "left", -this.sidebarContainer.width() ); + } + this.bodyContainer.removeClass( "body_landscape" ).addClass( "body_portrait" ); + } + + this.orientation = orientation; } SplitViewNavigator.prototype.showSidebar = function() { this.animationPerformed = true; if ( this.orientation == "portrait" ) { - this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" ); + this.contentOverlay.removeClass( "content_overlay_hidden" ).addClass( "content_overlay_visible" ); this.animating = true; this.sidebarContainer.animate({ left:0, avoidTransforms:false, useTranslate3d: true }, this.animationDuration, this.animationCompleteHandler()); - + } } SplitViewNavigator.prototype.hideSidebar = function() { if ( this.orientation == "portrait" ) { - this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); + this.contentOverlay.removeClass( "content_overlay_visible" ).addClass( "content_overlay_hidden" ); this.animating = true; this.sidebarContainer.animate({ left:-this.sidebarContainer.width(), avoidTransforms:false, useTranslate3d: true }, this.animationDuration, this.animationCompleteHandler()); - + } } @@ -143,7 +143,7 @@ SplitViewNavigator.prototype.animationCompleteHandler = function() { var self = this; return function() { self.animating = false; - //self.resetScroller(); + //self.resetScroller(); } } @@ -177,9 +177,9 @@ SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) { //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript SplitViewNavigator.prototype.S4 = function() { - return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } - + SplitViewNavigator.prototype.guid = function() { return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase(); -} \ No newline at end of file +} diff --git a/src/viewnavigator/viewnavigator.css b/src/viewnavigator/viewnavigator.css index 2052907..970a2d8 100644 --- a/src/viewnavigator/viewnavigator.css +++ b/src/viewnavigator/viewnavigator.css @@ -27,14 +27,14 @@ body { top:0px; bottom:0px; left:0px; - right:0px; + right:0px; overflow: hidden; padding: 0px; margin: 0px; - - backface-visibility: hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -52,7 +52,7 @@ body { height:46px; overflow:hide; padding:0px; - + background: rgb(167,207,223); /* Old browsers */ 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+ */ @@ -61,10 +61,10 @@ body { 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; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -74,13 +74,13 @@ body { top:0px; left:0px; z-index:2; - + white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - - max-width:30%; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + + max-width:30%; } .viewNavigator_header_title { @@ -95,18 +95,18 @@ body { font-weight: bold; color: #FFFFFF; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - - max-width:48%; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + + max-width:48%; } .viewNavigator_headerContent { - backface-visibility: hidden; + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); @@ -120,10 +120,10 @@ body { right:0px; bottom:0px; overflow:hidden; - - backface-visibility: hidden; + + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } @@ -133,23 +133,23 @@ body { .viewNavigator_content select { overflow:auto; position:relative; - backface-visibility: auto; + backface-visibility: auto; -webkit-backface-visibility: auto; } .viewNavigator_contentHolder > div:first-child { - min-height:100%; - border-bottom:1px solid #444; - border-top:1px solid #444; + min-height:100%; + border-bottom:1px solid #444; + border-top:1px solid #444; } .viewNavigator_content div { - backface-visibility: visible; - -webkit-backface-visibility: visible; - -webkit-transform: translate3d(0,0,0); + backface-visibility: visible; + -webkit-backface-visibility: visible; + -webkit-transform: translate3d(0,0,0); } .viewNavigator_contentHolder { @@ -162,14 +162,14 @@ body { overflow:auto; padding:0px; margin:0px; - overflow: hidden; + overflow: hidden; -webkit-overflow-scrolling : touch; min-width:100%; min-height:100% - backface-visibility: hidden; + backface-visibility: hidden; -webkit-backface-visibility: hidden; - + transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index c770a8c..26eb2ab 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -20,40 +20,40 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { this.history = []; this.scroller = null; this.headerPadding = 5; - + this.uniqueId = this.guid(); - - var regexp = new RegExp("Windows Phone OS 7"); + + var regexp = new RegExp("Windows Phone OS 7"); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - + this.rootElement = $('
    '); this.header = $('
    '); this.content = $('
    '); 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 ) { $(window).resize( function(event){ self.resizeContent() } ); } else { this.parent.resize( function(event){ self.resizeContent() } ); } - + this.parent.append( this.rootElement ); - + if ( window.viewNavigators == null || window.viewNavigators == undefined ) { window.viewNavigators = {}; } - window.viewNavigators[ this.uniqueId ] = this; + window.viewNavigators[ this.uniqueId ] = this; } @@ -61,7 +61,7 @@ ViewNavigator.prototype.replaceView = function( viewDescriptor ) { if (this.animating) return; viewDescriptor.animation = "pushEffect" - + //this is a hack to mimic behavior of pushView, then pop off the "current" from the history this.history.push( viewDescriptor ); this.updateView( viewDescriptor ); @@ -82,13 +82,13 @@ ViewNavigator.prototype.popView = function() { if (this.animating || this.history.length <= 1 ) return; - + var currentViewDescriptor = this.history[ this.history.length-1]; if ( currentViewDescriptor.backCallback ) { currentViewDescriptor.backCallback(); } - - this.history.pop(); + + this.history.pop(); var viewDescriptor = this.history[ this.history.length-1 ]; viewDescriptor.animation = "popEffect" this.updateView( viewDescriptor ); @@ -102,160 +102,160 @@ ViewNavigator.prototype.setHeaderPadding = function( amount ) { } ViewNavigator.prototype.updateView = function( viewDescriptor ) { - + this.animating = true; - - - - + + + + this.contentPendingRemove = this.contentViewHolder; this.headerContentPendingRemove = this.headerContent; - + this.headerContent = $('
    '); - + this.headerTitle = $("
    " + viewDescriptor.title + "
    "); this.headerContent.append( this.headerTitle ); - + var linkGuid = this.guid(); if ( viewDescriptor.backLabel ) { this.headerBacklink = $(''); this.headerContent.append( this.headerBacklink ); - + //this is for proper handling in splitviewnavigator this.setHeaderPadding( this.headerPadding ); } - + var id = this.guid(); this.contentViewHolder = $('
    '); this.contentViewHolder.append( viewDescriptor.view ); this.resizeContent(); - - if ( this.contentPendingRemove ){ - this.contentPendingRemove.stop() + + if ( this.contentPendingRemove ){ + this.contentPendingRemove.stop() } if ( this.headerContentPendingRemove ) { - this.headerContentPendingRemove.stop() + this.headerContentPendingRemove.stop() } this.headerContent.stop() this.contentViewHolder.stop() - - - + + + if ( this.scroller != null ) { - var scrollY = this.scroller.y; - this.scroller.destroy(); - this.scroller = null; - - if (this.contentPendingRemove) { - //console.log( scrollY ); - - //use this to mantain scroll position when scroller is destroyed - var children = $( this.contentPendingRemove.children()[0] ); - children.attr( "scrollY", scrollY ); - var originalTopMargin = children.css( "margin-top" ); - children.attr( "originalTopMargin", originalTopMargin ); - - var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)"; - children.css( "-webkit-transform", cssString ); - - // children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" ); - } - } - + var scrollY = this.scroller.y; + this.scroller.destroy(); + this.scroller = null; + + if (this.contentPendingRemove) { + //console.log( scrollY ); + + //use this to mantain scroll position when scroller is destroyed + var children = $( this.contentPendingRemove.children()[0] ); + children.attr( "scrollY", scrollY ); + var originalTopMargin = children.css( "margin-top" ); + children.attr( "originalTopMargin", originalTopMargin ); + + var cssString = "translate3d(0px, "+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+"px, 0px)"; + children.css( "-webkit-transform", cssString ); + + // children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" ); + } + } + $(this.contentPendingRemove).click(function(){ return false; }); - - + + if ( viewDescriptor.animation == "popEffect" ) { - + this.contentViewHolder.css( "left", -this.contentViewHolder.width() ); this.contentViewHolder.css( "opacity", 1 ); - this.content.prepend( this.contentViewHolder ); - + this.content.prepend( this.contentViewHolder ); + this.headerContent.css( "left", -this.animationX ); this.headerContent.css( "opacity", 0 ); this.header.append( this.headerContent ); - - var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - - this.contentPendingRemove.animate({ - left:this.contentViewHolder.width(), - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.8); - - //remove this to change back - this.contentViewHolder.animate({ - left:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration/2); - - this.headerContentPendingRemove.animate({ - left:this.animationX, - opacity:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration, func ); - - this.headerContent.animate({ - left:0, - opacity:1, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration/2 ); - - - //using a timeout to get around inconsistent response times for webkittransitionend event - //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - //setTimeout( func, this.animationDuration+90 ); + + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + + this.contentPendingRemove.animate({ + left:this.contentViewHolder.width(), + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.8); + + //remove this to change back + this.contentViewHolder.animate({ + left:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration/2); + + this.headerContentPendingRemove.animate({ + left:this.animationX, + opacity:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration, func ); + + this.headerContent.animate({ + left:0, + opacity:1, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration/2 ); + + + //using a timeout to get around inconsistent response times for webkittransitionend event + //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + //setTimeout( func, this.animationDuration+90 ); } else if ( this.history.length > 1 ) { - + this.contentViewHolder.css( "left", this.contentViewHolder.width() ); this.contentViewHolder.css( "opacity", 1 ); - - this.content.append( this.contentViewHolder ); - + + this.content.append( this.contentViewHolder ); + this.headerContent.css( "left", this.animationX ); this.headerContent.css( "opacity", 0 ); this.header.append( this.headerContent ); - var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - this.contentViewHolder.animate({ - left:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.75); - - this.contentPendingRemove.animate({ - left:-this.contentViewHolder.width()/2, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration, func); - - this.headerContent.animate({ - left:0, - opacity:1, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration*0.75); - - this.headerContentPendingRemove.animate({ - left:-this.animationX, - opacity:0, - avoidTransforms:false, - useTranslate3d: true - }, this.animationDuration ); - - //using a timeout to get around inconsistent response times for webkittransitionend event - //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); - //setTimeout( func, this.animationDuration+90 ); + this.contentViewHolder.animate({ + left:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.75); + + this.contentPendingRemove.animate({ + left:-this.contentViewHolder.width()/2, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration, func); + + this.headerContent.animate({ + left:0, + opacity:1, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration*0.75); + + this.headerContentPendingRemove.animate({ + left:-this.animationX, + opacity:0, + avoidTransforms:false, + useTranslate3d: true + }, this.animationDuration ); + + //using a timeout to get around inconsistent response times for webkittransitionend event + //var func = this.animationCompleteHandler(this.contentPendingRemove, this.headerContentPendingRemove, this.headerContent, this.contentViewHolder ); + //setTimeout( func, this.animationDuration+90 ); } else { this.contentViewHolder.css( "left", 0 ); this.contentViewHolder.css( "opacity", 1 ); - this.content.append( this.contentViewHolder ); + this.content.append( this.contentViewHolder ); this.headerContent.css( "left", 0 ); this.headerContent.css( "opacity", 1 ); @@ -263,87 +263,87 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.animating = false; this.resetScroller(); } - - if ( viewDescriptor.backLabel ) { - new NoClickDelay( this.headerBacklink.get()[0] ); + + if ( viewDescriptor.backLabel ) { + new NoClickDelay( this.headerBacklink.get()[0] ); } - + if ( viewDescriptor.showCallback ) { - viewDescriptor.showCallback(); + viewDescriptor.showCallback(); } } ViewNavigator.prototype.destroyScroller = function() { - + if ( !this.winPhone ) { if ( this.scroller != null ) { this.scroller.destroy(); this.scroller = null; } - } + } } ViewNavigator.prototype.resetScroller = function() { - - var id = this.contentViewHolder.attr( "id" ); - var currentViewDescriptor = this.history[ this.history.length-1]; - this.destroyScroller(); - + + var id = this.contentViewHolder.attr( "id" ); + var currentViewDescriptor = this.history[ this.history.length-1]; + this.destroyScroller(); + if ( !this.winPhone ) { if ( id && !(currentViewDescriptor && currentViewDescriptor.scroll == false)) { var self = this; if ( 'ontouchstart' in window ){ - setTimeout( function() { - - //use this to mantain scroll position when scroller is destroyed - var targetDiv = $( $("#"+id ).children()[0] ); - var scrollY= targetDiv.attr( "scrollY" ); - var originalTopMargin = targetDiv.attr( "originalTopMargin" ); - if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ){ - // console.log( "resetScroller scrollY: " + scrollY) - // targetDiv.css( "margin-top", originalTopMargin ); - var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)"; - targetDiv.css( "-webkit-transform", cssString ); - } - self.scroller = new iScroll( id ); - if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) { - self.scroller.scrollTo( 0, parseInt( scrollY ) ); - } - }, 10 ); - //this.scroller = new iScroll( id ); - } + setTimeout( function() { + + //use this to mantain scroll position when scroller is destroyed + var targetDiv = $( $("#"+id ).children()[0] ); + var scrollY= targetDiv.attr( "scrollY" ); + var originalTopMargin = targetDiv.attr( "originalTopMargin" ); + if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ){ + // console.log( "resetScroller scrollY: " + scrollY) + // targetDiv.css( "margin-top", originalTopMargin ); + var cssString = "translate3d(0px, "+(originalTopMargin).toString()+"px, 0px)"; + targetDiv.css( "-webkit-transform", cssString ); + } + self.scroller = new iScroll( id ); + if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != "" ) { + self.scroller.scrollTo( 0, parseInt( scrollY ) ); + } + }, 10 ); + //this.scroller = new iScroll( id ); + } else { - var target = $("#"+id ); - target.css( "overflow", "auto" ); + var target = $("#"+id ); + target.css( "overflow", "auto" ); } } - } + } } ViewNavigator.prototype.refreshScroller = function() { - + if ( !this.winPhone ) { if ( this.scroller != null ) { this.scroller.refresh(); } - } + } } ViewNavigator.prototype.animationCompleteHandler = function(removalTarget, headerRemovalTarget, headerView, contentView) { var self = this; return function() { self.animating = false; - self.resetScroller(); + self.resetScroller(); if ( removalTarget ) { removalTarget.unbind( "click" ); removalTarget.detach(); } if ( headerRemovalTarget ) { headerRemovalTarget.unbind( "click" ); - headerRemovalTarget.detach(); + headerRemovalTarget.detach(); } } } @@ -361,9 +361,9 @@ ViewNavigator.prototype.resizeContent = function(event) { //GUID logic from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript ViewNavigator.prototype.S4 = function() { - return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } - + ViewNavigator.prototype.guid = function() { return (this.S4() + this.S4() + "-" + this.S4() + "-4" + this.S4().substr(0,3) + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4()).toLowerCase(); } @@ -373,7 +373,7 @@ ViewNavigator.prototype.guid = function() { /* PHONEGAP INTEGRATION */ /* //android+phonegap specific back button support - will only work if phonegap is used on android (www.phonegap.com) -if ( typeof PhoneGap != 'undefined' ) { +if ( typeof PhoneGap != 'undefined' ) { document.addEventListener("deviceready", onDeviceReady, false); } @@ -389,9 +389,7 @@ function onBackKey( event ) { } } */ - + //block page scrolling document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); - - From 214f9cd9b62adf617d141b1a9a2d29f322c7fb9b Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 14:58:32 +0100 Subject: [PATCH 2/6] Changed default quotation marks Changed from double (") to single (') quotation marks --- src/slidingview/slidingview.js | 36 ++++---- src/splitviewnavigator/splitviewnavigator.js | 40 ++++----- src/viewnavigator/viewnavigator.js | 88 ++++++++++---------- 3 files changed, 82 insertions(+), 82 deletions(-) diff --git a/src/slidingview/slidingview.js b/src/slidingview/slidingview.js index df3b9bc..b97a3ff 100644 --- a/src/slidingview/slidingview.js +++ b/src/slidingview/slidingview.js @@ -21,18 +21,18 @@ var SlidingView = function( sidebarId, bodyId ) { this.sidebarWidth = 250; - this.sidebar = $("#"+sidebarId); - this.body = $("#"+bodyId); + this.sidebar = $('#'+sidebarId); + this.body = $('#'+bodyId); - this.sidebar.addClass( "slidingview_sidebar" ); - this.body.addClass( "slidingview_body" ); + this.sidebar.addClass( 'slidingview_sidebar' ); + this.body.addClass( 'slidingview_body' ); var self = this; $(window).resize( function(event){ self.resizeContent() } ); $(this.parent).resize( function(event){ self.resizeContent() } ); - if ( "onorientationchange" in window ) { - $(window).bind( "onorientationchange", function(event){ self.resizeContent() } ) + if ( 'onorientationchange' in window ) { + $(window).bind( 'onorientationchange', function(event){ self.resizeContent() } ) } this.resizeContent(); this.setupEventHandlers(); @@ -117,17 +117,17 @@ SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) { this.bodyOffset = targetX; //console.log( targetX ); - //this.body.css("left", targetX ); - //console.log( this.body.css("left") ); + //this.body.css('left', targetX ); + //console.log( this.body.css('left') ); - if ( this.body.css("left") != "0px" ) { - this.body.css("left", "0px" ); + if ( this.body.css('left') != '0px' ) { + this.body.css('left', '0px' ); } - this.body.css("-webkit-transform", "translate3d(" + targetX + "px,0,0)" ); - this.body.css("-moz-transform", "translate3d(" + targetX + "px,0,0)" ); - this.body.css("transform", "translate3d(" + targetX + "px,0,0)" ); + this.body.css('-webkit-transform', 'translate3d(' + targetX + 'px,0,0)' ); + this.body.css('-moz-transform', 'translate3d(' + targetX + 'px,0,0)' ); + this.body.css('transform', 'translate3d(' + targetX + 'px,0,0)' ); - //console.log( this.body.css("-moz-transform"), targetX ); + //console.log( this.body.css('-moz-transform'), targetX ); /*if ( currentPosition != targetX ) { @@ -139,15 +139,15 @@ SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) { }, 100); }*/ - this.sidebar.trigger( "slidingViewProgress", { current: targetX, max:this.sidebarWidth } ); + this.sidebar.trigger( 'slidingViewProgress', { current: targetX, max:this.sidebarWidth } ); this.gestureStartPosition = currentPosition; } SlidingView.prototype.snapToPosition = function() { - //this.body.css("-webkit-transform", "translate3d(0,0,0)" ); - this.body.css("left", "0px" ); + //this.body.css('-webkit-transform', 'translate3d(0,0,0)' ); + this.body.css('left', '0px' ); var currentPosition = this.bodyOffset; var halfWidth = this.sidebarWidth / 2; var targetX; @@ -169,7 +169,7 @@ SlidingView.prototype.snapToPosition = function() { useTranslate3d: true }, 100); - this.sidebar.trigger( "slidingViewProgress", { current:targetX, max:this.sidebarWidth } ); + this.sidebar.trigger( 'slidingViewProgress', { current:targetX, max:this.sidebarWidth } ); } } diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index 28cb27d..5e43bee 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -20,7 +20,7 @@ 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 = $('
    '); @@ -32,7 +32,7 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false ); - this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; + this.backLinkCSS = backLinkCSS ? backLinkCSS : 'viewNavigator_backButton'; this.toggleSidebarButton = $('
  • '+toggleButtonLabel+'
    • '); @@ -43,12 +43,12 @@ 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() } ); //} @@ -84,29 +84,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 +114,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 +127,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 +181,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(); } diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index 26eb2ab..f386e6f 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -23,7 +23,7 @@ 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 = $('
    '); @@ -34,7 +34,7 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { this.parent = $( target ); - this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; + this.backLinkCSS = backLinkCSS ? backLinkCSS : 'viewNavigator_backButton'; var self = this; //$(window).resize( function(event){ self.resizeContent() } ); @@ -60,9 +60,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 +73,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 +90,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); } } @@ -113,7 +113,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.headerContent = $('
    '); - this.headerTitle = $("
    " + viewDescriptor.title + "
    "); + this.headerTitle = $('
    ' + viewDescriptor.title + '
    '); this.headerContent.append( this.headerTitle ); var linkGuid = this.guid(); @@ -151,28 +151,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 ) + parseInt( originalTopMargin )).toString()+'px, 0px)'; + children.css( '-webkit-transform', cssString ); - // children.css( "margin-top", (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + "px" ); + // children.css( 'margin-top', (parseInt( scrollY ) + parseInt( originalTopMargin )).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 +211,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,12 +253,12 @@ 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(); @@ -287,7 +287,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 +298,25 @@ 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 != "" ) { + if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != '' ) { self.scroller.scrollTo( 0, parseInt( scrollY ) ); } }, 10 ); //this.scroller = new iScroll( id ); } else { - var target = $("#"+id ); - target.css( "overflow", "auto" ); + var target = $('#'+id ); + target.css( 'overflow', 'auto' ); } } } @@ -338,11 +338,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 +365,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 +374,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 ) { From 9f26e4204998c82623c16bef24a23d7593651ea3 Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 15:02:11 +0100 Subject: [PATCH 3/6] added the radix to parseInt() added the decimal radix (10) to the function calls of parseInt() --- src/viewnavigator/viewnavigator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index f386e6f..99f46a5 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -155,10 +155,10 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { var originalTopMargin = children.css( 'margin-top' ); children.attr( 'originalTopMargin', originalTopMargin ); - var cssString = 'translate3d(0px, '+(parseInt( scrollY ) + parseInt( originalTopMargin )).toString()+'px, 0px)'; + var cssString = 'translate3d(0px, '+(parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString()+'px, 0px)'; children.css( '-webkit-transform', cssString ); - // children.css( 'margin-top', (parseInt( scrollY ) + parseInt( originalTopMargin )).toString() + 'px' ); + // children.css( 'margin-top', (parseInt( scrollY, 10 ) + parseInt( originalTopMargin, 10 )).toString() + 'px' ); } } @@ -309,7 +309,7 @@ ViewNavigator.prototype.resetScroller = function() { } self.scroller = new iScroll( id ); if ( currentViewDescriptor.maintainScrollPosition !== false && scrollY != undefined && scrollY != '' ) { - self.scroller.scrollTo( 0, parseInt( scrollY ) ); + self.scroller.scrollTo( 0, parseInt( scrollY, 10 ) ); } }, 10 ); //this.scroller = new iScroll( id ); From 5f95713d87bb964ceff5a65ba78dcfc1d2d05255 Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 15:37:46 +0100 Subject: [PATCH 4/6] replaced parameter lists by an options object; minor fixes; replaced parameter list by an options object in viewNavigator and splitNavigator. Also updated examples and replaced spaced by tabs in examples files. --- .../01 - viewnavigator/01 - basic/index.html | 50 +- .../02 - movie reviews/index.html | 222 +- .../02 - movie reviews/phonegap-1.4.1.js | 4123 +++++++++++++++++ .../03 - multi instance/index.html | 68 +- .../04 - form elements/index.html | 50 +- .../01 - basic/index.html | 66 +- .../02 - movie reviews/index.html | 248 +- .../03 - slidingView/01 - basic/index.html | 34 +- .../02 - view navigators/index.html | 78 +- .../03 - swipeview/index.html | 344 +- .../03 - slidingView/03 - swipeview/style.css | 2 +- .../03 - slidingView/04 - oridomi/index.html | 138 +- .../05 - oridomi w viewnav/index.html | 180 +- samples/04 - browser history/index.html | 202 +- .../www/index.html | 438 +- src/splitviewnavigator/splitviewnavigator.js | 27 +- src/viewnavigator/viewnavigator.js | 30 +- 17 files changed, 5221 insertions(+), 1079 deletions(-) create mode 100644 samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js diff --git a/samples/01 - viewnavigator/01 - basic/index.html b/samples/01 - viewnavigator/01 - basic/index.html index 03bfc0b..9e96628 100644 --- a/samples/01 - viewnavigator/01 - basic/index.html +++ b/samples/01 - viewnavigator/01 - basic/index.html @@ -1,67 +1,67 @@ - View Navigator Sample - + View Navigator Sample + - - - - - - - + + + + + + + - \ No newline at end of file + diff --git a/samples/01 - viewnavigator/02 - movie reviews/index.html b/samples/01 - viewnavigator/02 - movie reviews/index.html index 8cc06d2..ead2a3e 100644 --- a/samples/01 - viewnavigator/02 - movie reviews/index.html +++ b/samples/01 - viewnavigator/02 - movie reviews/index.html @@ -1,42 +1,42 @@ - View Navigator Sample - + View Navigator Sample + - - - - - - - - - + + + + + + + + + + + + + + - - \ No newline at end of file + diff --git a/samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js b/samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js new file mode 100644 index 0000000..680e180 --- /dev/null +++ b/samples/01 - viewnavigator/02 - movie reviews/phonegap-1.4.1.js @@ -0,0 +1,4123 @@ +/* PhoneGap v1.4.1 */ +/* + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. +*/ + + +/* + * Some base contributions + * Copyright (c) 2011, Proyectos Equis Ka, S.L. + */ + +if (typeof PhoneGap === "undefined") { + +if (typeof(DeviceInfo) !== 'object'){ + DeviceInfo = {}; +} +/** + * This represents the PhoneGap API itself, and provides a global namespace for accessing + * information about the state of PhoneGap. + * @class + */ +PhoneGap = { + // This queue holds the currently executing command and all pending + // commands executed with PhoneGap.exec(). + commandQueue: [], + // Indicates if we're currently in the middle of flushing the command + // queue on the native side. + commandQueueFlushing: false, + _constructors: [], + documentEventHandler: {}, // Collection of custom document event handlers + windowEventHandler: {} +}; + +/** + * List of resource files loaded by PhoneGap. + * This is used to ensure JS and other files are loaded only once. + */ +PhoneGap.resources = {base: true}; + +/** + * Determine if resource has been loaded by PhoneGap + * + * @param name + * @return + */ +PhoneGap.hasResource = function(name) { + return PhoneGap.resources[name]; +}; + +/** + * Add a resource to list of loaded resources by PhoneGap + * + * @param name + */ +PhoneGap.addResource = function(name) { + PhoneGap.resources[name] = true; +}; + +/** + * Boolean flag indicating if the PhoneGap API is available and initialized. + */ // TODO: Remove this, it is unused here ... -jm +PhoneGap.available = DeviceInfo.uuid != undefined; + +/** + * Add an initialization function to a queue that ensures it will run and initialize + * application constructors only once PhoneGap has been initialized. + * @param {Function} func The function callback you want run once PhoneGap is initialized + */ +PhoneGap.addConstructor = function(func) { + var state = document.readyState; + if ( ( state == 'loaded' || state == 'complete' ) && DeviceInfo.uuid != null ) + { + func(); + } + else + { + PhoneGap._constructors.push(func); + } +}; + +(function() + { + var timer = setInterval(function() + { + + var state = document.readyState; + + if ( ( state == 'loaded' || state == 'complete' ) && DeviceInfo.uuid != null ) + { + clearInterval(timer); // stop looking + // run our constructors list + while (PhoneGap._constructors.length > 0) + { + var constructor = PhoneGap._constructors.shift(); + try + { + constructor(); + } + catch(e) + { + if (typeof(console['log']) == 'function') + { + console.log("Failed to run constructor: " + console.processMessage(e)); + } + else + { + alert("Failed to run constructor: " + e.message); + } + } + } + // all constructors run, now fire the deviceready event + var e = document.createEvent('Events'); + e.initEvent('deviceready'); + document.dispatchEvent(e); + } + }, 1); +})(); + +// session id for calls +PhoneGap.sessionKey = 0; + +// centralized callbacks +PhoneGap.callbackId = 0; +PhoneGap.callbacks = {}; +PhoneGap.callbackStatus = { + NO_RESULT: 0, + OK: 1, + CLASS_NOT_FOUND_EXCEPTION: 2, + ILLEGAL_ACCESS_EXCEPTION: 3, + INSTANTIATION_EXCEPTION: 4, + MALFORMED_URL_EXCEPTION: 5, + IO_EXCEPTION: 6, + INVALID_ACTION: 7, + JSON_EXCEPTION: 8, + ERROR: 9 + }; + +/** + * Creates a gap bridge iframe used to notify the native code about queued + * commands. + * + * @private + */ +PhoneGap.createGapBridge = function() { + gapBridge = document.createElement("iframe"); + gapBridge.setAttribute("style", "display:none;"); + gapBridge.setAttribute("height","0px"); + gapBridge.setAttribute("width","0px"); + gapBridge.setAttribute("frameborder","0"); + document.documentElement.appendChild(gapBridge); + return gapBridge; +} + +/** + * Execute a PhoneGap command by queuing it and letting the native side know + * there are queued commands. The native side will then request all of the + * queued commands and execute them. + * + * Arguments may be in one of two formats: + * + * FORMAT ONE (preferable) + * The native side will call PhoneGap.callbackSuccess or + * PhoneGap.callbackError, depending upon the result of the action. + * + * @param {Function} success The success callback + * @param {Function} fail The fail callback + * @param {String} service The name of the service to use + * @param {String} action The name of the action to use + * @param {String[]} [args] Zero or more arguments to pass to the method + * + * FORMAT TWO + * @param {String} command Command to be run in PhoneGap, e.g. + * "ClassName.method" + * @param {String[]} [args] Zero or more arguments to pass to the method + * object parameters are passed as an array object + * [object1, object2] each object will be passed as + * JSON strings + */ +PhoneGap.exec = function() { + if (!PhoneGap.available) { + alert("ERROR: Attempting to call PhoneGap.exec()" + +" before 'deviceready'. Ignoring."); + return; + } + + var successCallback, failCallback, service, action, actionArgs; + var callbackId = null; + if (typeof arguments[0] !== "string") { + // FORMAT ONE + successCallback = arguments[0]; + failCallback = arguments[1]; + service = arguments[2]; + action = arguments[3]; + actionArgs = arguments[4]; + + // Since we need to maintain backwards compatibility, we have to pass + // an invalid callbackId even if no callback was provided since plugins + // will be expecting it. The PhoneGap.exec() implementation allocates + // an invalid callbackId and passes it even if no callbacks were given. + callbackId = 'INVALID'; + } else { + // FORMAT TWO + splitCommand = arguments[0].split("."); + action = splitCommand.pop(); + service = splitCommand.join("."); + actionArgs = Array.prototype.splice.call(arguments, 1); + } + + // Start building the command object. + var command = { + className: service, + methodName: action, + arguments: [] + }; + + // Register the callbacks and add the callbackId to the positional + // arguments if given. + if (successCallback || failCallback) { + callbackId = service + PhoneGap.callbackId++; + PhoneGap.callbacks[callbackId] = + {success:successCallback, fail:failCallback}; + } + if (callbackId != null) { + command.arguments.push(callbackId); + } + + for (var i = 0; i < actionArgs.length; ++i) { + var arg = actionArgs[i]; + if (arg == undefined || arg == null) { + continue; + } else if (typeof(arg) == 'object') { + command.options = arg; + } else { + command.arguments.push(arg); + } + } + + // Stringify and queue the command. We stringify to command now to + // effectively clone the command arguments in case they are mutated before + // the command is executed. + PhoneGap.commandQueue.push(JSON.stringify(command)); + + // If the queue length is 1, then that means it was empty before we queued + // the given command, so let the native side know that we have some + // commands to execute, unless the queue is currently being flushed, in + // which case the command will be picked up without notification. + if (PhoneGap.commandQueue.length == 1 && !PhoneGap.commandQueueFlushing) { + if (!PhoneGap.gapBridge) { + PhoneGap.gapBridge = PhoneGap.createGapBridge(); + } + + PhoneGap.gapBridge.src = "gap://ready"; + } +} + +/** + * Called by native code to retrieve all queued commands and clear the queue. + */ +PhoneGap.getAndClearQueuedCommands = function() { + json = JSON.stringify(PhoneGap.commandQueue); + PhoneGap.commandQueue = []; + return json; +} + +/** + * Called by native code when returning successful result from an action. + * + * @param callbackId + * @param args + * args.status - PhoneGap.callbackStatus + * args.message - return value + * args.keepCallback - 0 to remove callback, 1 to keep callback in PhoneGap.callbacks[] + */ +PhoneGap.callbackSuccess = function(callbackId, args) { + if (PhoneGap.callbacks[callbackId]) { + + // If result is to be sent to callback + if (args.status == PhoneGap.callbackStatus.OK) { + try { + if (PhoneGap.callbacks[callbackId].success) { + PhoneGap.callbacks[callbackId].success(args.message); + } + } + catch (e) { + console.log("Error in success callback: "+callbackId+" = "+e); + } + } + + // Clear callback if not expecting any more results + if (!args.keepCallback) { + delete PhoneGap.callbacks[callbackId]; + } + } +}; + +/** + * Called by native code when returning error result from an action. + * + * @param callbackId + * @param args + */ +PhoneGap.callbackError = function(callbackId, args) { + if (PhoneGap.callbacks[callbackId]) { + try { + if (PhoneGap.callbacks[callbackId].fail) { + PhoneGap.callbacks[callbackId].fail(args.message); + } + } + catch (e) { + console.log("Error in error callback: "+callbackId+" = "+e); + } + + // Clear callback if not expecting any more results + if (!args.keepCallback) { + delete PhoneGap.callbacks[callbackId]; + } + } +}; + + +/** + * Does a deep clone of the object. + * + * @param obj + * @return + */ +PhoneGap.clone = function(obj) { + if(!obj) { + return obj; + } + + if(obj instanceof Array){ + var retVal = new Array(); + for(var i = 0; i < obj.length; ++i){ + retVal.push(PhoneGap.clone(obj[i])); + } + return retVal; + } + + if (obj instanceof Function) { + return obj; + } + + if(!(obj instanceof Object)){ + return obj; + } + + if (obj instanceof Date) { + return obj; + } + + retVal = new Object(); + for(i in obj){ + if(!(i in retVal) || retVal[i] != obj[i]) { + retVal[i] = PhoneGap.clone(obj[i]); + } + } + return retVal; +}; + +// Intercept calls to document.addEventListener +PhoneGap.m_document_addEventListener = document.addEventListener; + +// Intercept calls to window.addEventListener +PhoneGap.m_window_addEventListener = window.addEventListener; + +/** + * Add a custom window event handler. + * + * @param {String} event The event name that callback handles + * @param {Function} callback The event handler + */ +PhoneGap.addWindowEventHandler = function(event, callback) { + PhoneGap.windowEventHandler[event] = callback; +} + +/** + * Add a custom document event handler. + * + * @param {String} event The event name that callback handles + * @param {Function} callback The event handler + */ +PhoneGap.addDocumentEventHandler = function(event, callback) { + PhoneGap.documentEventHandler[event] = callback; +} + +/** + * Intercept adding document event listeners and handle our own + * + * @param {Object} evt + * @param {Function} handler + * @param capture + */ +document.addEventListener = function(evt, handler, capture) { + var e = evt.toLowerCase(); + + // If subscribing to an event that is handled by a plugin + if (typeof PhoneGap.documentEventHandler[e] !== "undefined") { + if (PhoneGap.documentEventHandler[e](e, handler, true)) { + return; // Stop default behavior + } + } + + PhoneGap.m_document_addEventListener.call(document, evt, handler, capture); +}; + +/** + * Intercept adding window event listeners and handle our own + * + * @param {Object} evt + * @param {Function} handler + * @param capture + */ +window.addEventListener = function(evt, handler, capture) { + var e = evt.toLowerCase(); + + // If subscribing to an event that is handled by a plugin + if (typeof PhoneGap.windowEventHandler[e] !== "undefined") { + if (PhoneGap.windowEventHandler[e](e, handler, true)) { + return; // Stop default behavior + } + } + + PhoneGap.m_window_addEventListener.call(window, evt, handler, capture); +}; + +// Intercept calls to document.removeEventListener and watch for events that +// are generated by PhoneGap native code +PhoneGap.m_document_removeEventListener = document.removeEventListener; + +// Intercept calls to window.removeEventListener +PhoneGap.m_window_removeEventListener = window.removeEventListener; + +/** + * Intercept removing document event listeners and handle our own + * + * @param {Object} evt + * @param {Function} handler + * @param capture + */ +document.removeEventListener = function(evt, handler, capture) { + var e = evt.toLowerCase(); + + // If unsubcribing from an event that is handled by a plugin + if (typeof PhoneGap.documentEventHandler[e] !== "undefined") { + if (PhoneGap.documentEventHandler[e](e, handler, false)) { + return; // Stop default behavior + } + } + + PhoneGap.m_document_removeEventListener.call(document, evt, handler, capture); +}; + +/** + * Intercept removing window event listeners and handle our own + * + * @param {Object} evt + * @param {Function} handler + * @param capture + */ +window.removeEventListener = function(evt, handler, capture) { + var e = evt.toLowerCase(); + + // If unsubcribing from an event that is handled by a plugin + if (typeof PhoneGap.windowEventHandler[e] !== "undefined") { + if (PhoneGap.windowEventHandler[e](e, handler, false)) { + return; // Stop default behavior + } + } + + PhoneGap.m_window_removeEventListener.call(window, evt, handler, capture); +}; + +/** + * Method to fire document event + * + * @param {String} type The event type to fire + * @param {Object} data Data to send with event + */ +PhoneGap.fireDocumentEvent = function(type, data) { + var e = document.createEvent('Events'); + e.initEvent(type); + if (data) { + for (var i in data) { + e[i] = data[i]; + } + } + document.dispatchEvent(e); +}; + +/** + * Method to fire window event + * + * @param {String} type The event type to fire + * @param {Object} data Data to send with event + */ +PhoneGap.fireWindowEvent = function(type, data) { + var e = document.createEvent('Events'); + e.initEvent(type); + if (data) { + for (var i in data) { + e[i] = data[i]; + } + } + window.dispatchEvent(e); +}; + +/** + * Method to fire event from native code + * Leaving this generic version to handle problems with iOS 3.x. Is currently used by orientation and battery events + * Remove when iOS 3.x no longer supported and call fireWindowEvent or fireDocumentEvent directly + */ +PhoneGap.fireEvent = function(type, target, data) { + var e = document.createEvent('Events'); + e.initEvent(type); + if (data) { + for (var i in data) { + e[i] = data[i]; + } + } + target = target || document; + if (target.dispatchEvent === undefined) { // ie window.dispatchEvent is undefined in iOS 3.x + target = document; + } + + target.dispatchEvent(e); +}; +/** + * Create a UUID + * + * @return + */ +PhoneGap.createUUID = function() { + return PhoneGap.UUIDcreatePart(4) + '-' + + PhoneGap.UUIDcreatePart(2) + '-' + + PhoneGap.UUIDcreatePart(2) + '-' + + PhoneGap.UUIDcreatePart(2) + '-' + + PhoneGap.UUIDcreatePart(6); +}; + +PhoneGap.UUIDcreatePart = function(length) { + var uuidpart = ""; + for (var i=0; i -1) { + me._batteryListener.splice(pos, 1); + } + } else if (eventType === "batterylow") { + var pos = me._lowListener.indexOf(handler); + if (pos > -1) { + me._lowListener.splice(pos, 1); + } + } else if (eventType === "batterycritical") { + var pos = me._criticalListener.indexOf(handler); + if (pos > -1) { + me._criticalListener.splice(pos, 1); + } + } + + // If there are no more registered event listeners stop the battery listener on native side. + if (me._batteryListener.length === 0 && me._lowListener.length === 0 && me._criticalListener.length === 0) { + PhoneGap.exec(null, null, "com.phonegap.battery", "stop", []); + } + } +}; + +/** + * Callback for battery status + * + * @param {Object} info keys: level, isPlugged + */ +Battery.prototype._status = function(info) { + if (info) { + var me = this; + if (me._level != info.level || me._isPlugged != info.isPlugged) { + // Fire batterystatus event + //PhoneGap.fireWindowEvent("batterystatus", info); + // use this workaround since iOS 3.x does have window.dispatchEvent + PhoneGap.fireEvent("batterystatus", window, info); + + // Fire low battery event + if (info.level == 20 || info.level == 5) { + if (info.level == 20) { + //PhoneGap.fireWindowEvent("batterylow", info); + // use this workaround since iOS 3.x does not have window.dispatchEvent + PhoneGap.fireEvent("batterylow", window, info); + } + else { + //PhoneGap.fireWindowEvent("batterycritical", info); + // use this workaround since iOS 3.x does not have window.dispatchEvent + PhoneGap.fireEvent("batterycritical", window, info); + } + } + } + me._level = info.level; + me._isPlugged = info.isPlugged; + } +}; + +/** + * Error callback for battery start + */ +Battery.prototype._error = function(e) { + console.log("Error initializing Battery: " + e); +}; + +PhoneGap.addConstructor(function() { + if (typeof navigator.battery === "undefined") { + navigator.battery = new Battery(); + PhoneGap.addWindowEventHandler("batterystatus", navigator.battery.eventHandler); + PhoneGap.addWindowEventHandler("batterylow", navigator.battery.eventHandler); + PhoneGap.addWindowEventHandler("batterycritical", navigator.battery.eventHandler); + } +}); +}if (!PhoneGap.hasResource("camera")) { + PhoneGap.addResource("camera"); + + +/** + * This class provides access to the device camera. + * @constructor + */ +Camera = function() { + +} +/** + * Available Camera Options + * {boolean} allowEdit - true to allow editing image, default = false + * {number} quality 0-100 (low to high) default = 100 + * {Camera.DestinationType} destinationType default = DATA_URL + * {Camera.PictureSourceType} sourceType default = CAMERA + * {number} targetWidth - width in pixels to scale image default = 0 (no scaling) + * {number} targetHeight - height in pixels to scale image default = 0 (no scaling) + * {Camera.EncodingType} - encodingType default = JPEG + * {boolean} correctOrientation - Rotate the image to correct for the orientation of the device during capture (iOS only) + * {boolean} saveToPhotoAlbum - Save the image to the photo album on the device after capture (iOS only) + */ +/** + * Format of image that is returned from getPicture. + * + * Example: navigator.camera.getPicture(success, fail, + * { quality: 80, + * destinationType: Camera.DestinationType.DATA_URL, + * sourceType: Camera.PictureSourceType.PHOTOLIBRARY}) + */ +Camera.DestinationType = { + DATA_URL: 0, // Return base64 encoded string + FILE_URI: 1 // Return file uri +}; +Camera.prototype.DestinationType = Camera.DestinationType; + +/** + * Source to getPicture from. + * + * Example: navigator.camera.getPicture(success, fail, + * { quality: 80, + * destinationType: Camera.DestinationType.DATA_URL, + * sourceType: Camera.PictureSourceType.PHOTOLIBRARY}) + */ +Camera.PictureSourceType = { + PHOTOLIBRARY : 0, // Choose image from picture library + CAMERA : 1, // Take picture from camera + SAVEDPHOTOALBUM : 2 // Choose image from picture library +}; +Camera.prototype.PictureSourceType = Camera.PictureSourceType; + +/** + * Encoding of image returned from getPicture. + * + * Example: navigator.camera.getPicture(success, fail, + * { quality: 80, + * destinationType: Camera.DestinationType.DATA_URL, + * sourceType: Camera.PictureSourceType.CAMERA, + * encodingType: Camera.EncodingType.PNG}) + */ +Camera.EncodingType = { + JPEG: 0, // Return JPEG encoded image + PNG: 1 // Return PNG encoded image +}; +Camera.prototype.EncodingType = Camera.EncodingType; + +/** + * Type of pictures to select from. Only applicable when + * PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM + * + * Example: navigator.camera.getPicture(success, fail, + * { quality: 80, + * destinationType: Camera.DestinationType.DATA_URL, + * sourceType: Camera.PictureSourceType.PHOTOLIBRARY, + * mediaType: Camera.MediaType.PICTURE}) + */ +Camera.MediaType = { + PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType + VIDEO: 1, // allow selection of video only, ONLY RETURNS URL + ALLMEDIA : 2 // allow selection from all media types +}; +Camera.prototype.MediaType = Camera.MediaType; + +/** + * Gets a picture from source defined by "options.sourceType", and returns the + * image as defined by the "options.destinationType" option. + + * The defaults are sourceType=CAMERA and destinationType=DATA_URL. + * + * @param {Function} successCallback + * @param {Function} errorCallback + * @param {Object} options + */ +Camera.prototype.getPicture = function(successCallback, errorCallback, options) { + // successCallback required + if (typeof successCallback != "function") { + console.log("Camera Error: successCallback is not a function"); + return; + } + + // errorCallback optional + if (errorCallback && (typeof errorCallback != "function")) { + console.log("Camera Error: errorCallback is not a function"); + return; + } + + PhoneGap.exec(successCallback, errorCallback, "com.phonegap.camera","getPicture",[options]); +}; + + + +PhoneGap.addConstructor(function() { + if (typeof navigator.camera == "undefined") navigator.camera = new Camera(); +}); +}; + +if (!PhoneGap.hasResource("device")) { + PhoneGap.addResource("device"); + +/** + * this represents the mobile device, and provides properties for inspecting the model, version, UUID of the + * phone, etc. + * @constructor + */ +Device = function() +{ + this.platform = null; + this.version = null; + this.name = null; + this.phonegap = null; + this.uuid = null; + try + { + this.platform = DeviceInfo.platform; + this.version = DeviceInfo.version; + this.name = DeviceInfo.name; + this.phonegap = DeviceInfo.gap; + this.uuid = DeviceInfo.uuid; + + } + catch(e) + { + // TODO: + } + this.available = PhoneGap.available = this.uuid != null; +} + +PhoneGap.addConstructor(function() { + if (typeof navigator.device === "undefined") { + navigator.device = window.device = new Device(); + } +}); +}; +if (!PhoneGap.hasResource("capture")) { + PhoneGap.addResource("capture"); +/** + * The CaptureError interface encapsulates all errors in the Capture API. + */ +function CaptureError() { + this.code = null; +}; + +// Capture error codes +CaptureError.CAPTURE_INTERNAL_ERR = 0; +CaptureError.CAPTURE_APPLICATION_BUSY = 1; +CaptureError.CAPTURE_INVALID_ARGUMENT = 2; +CaptureError.CAPTURE_NO_MEDIA_FILES = 3; +CaptureError.CAPTURE_NOT_SUPPORTED = 20; + +/** + * The Capture interface exposes an interface to the camera and microphone of the hosting device. + */ +function Capture() { + this.supportedAudioModes = []; + this.supportedImageModes = []; + this.supportedVideoModes = []; +}; + +/** + * Launch audio recorder application for recording audio clip(s). + * + * @param {Function} successCB + * @param {Function} errorCB + * @param {CaptureAudioOptions} options + * + * No audio recorder to launch for iOS - return CAPTURE_NOT_SUPPORTED + */ +Capture.prototype.captureAudio = function(successCallback, errorCallback, options) { + /*if (errorCallback && typeof errorCallback === "function") { + errorCallback({ + "code": CaptureError.CAPTURE_NOT_SUPPORTED + }); + }*/ + PhoneGap.exec(successCallback, errorCallback, "com.phonegap.mediacapture", "captureAudio", [options]); +}; + +/** + * Launch camera application for taking image(s). + * + * @param {Function} successCB + * @param {Function} errorCB + * @param {CaptureImageOptions} options + */ +Capture.prototype.captureImage = function(successCallback, errorCallback, options) { + PhoneGap.exec(successCallback, errorCallback, "com.phonegap.mediacapture", "captureImage", [options]); +}; + +/** + * Casts a PluginResult message property (array of objects) to an array of MediaFile objects + * (used in Objective-C) + * + * @param {PluginResult} pluginResult + */ +Capture.prototype._castMediaFile = function(pluginResult) { + var mediaFiles = []; + var i; + for (i=0; i} categories +* @param {ContactField[]} urls contact's web sites +*/ +var Contact = function(id, displayName, name, nickname, phoneNumbers, emails, addresses, + ims, organizations, birthday, note, photos, categories, urls) { + this.id = id || null; + this.displayName = displayName || null; + this.name = name || null; // ContactName + this.nickname = nickname || null; + this.phoneNumbers = phoneNumbers || null; // ContactField[] + this.emails = emails || null; // ContactField[] + this.addresses = addresses || null; // ContactAddress[] + this.ims = ims || null; // ContactField[] + this.organizations = organizations || null; // ContactOrganization[] + this.birthday = birthday || null; // JS Date + this.note = note || null; + this.photos = photos || null; // ContactField[] + this.categories = categories || null; + this.urls = urls || null; // ContactField[] +}; + +/** +* Converts Dates to milliseconds before sending to iOS +*/ +Contact.prototype.convertDatesOut = function() +{ + var dates = new Array("birthday"); + for (var i=0; i][;base64], + * + * @param file {File} File object containing file properties + */ +FileReader.prototype.readAsDataURL = function(file) { + this.fileName = ""; + + if (typeof file.fullPath === "undefined") { + this.fileName = file; + } else { + this.fileName = file.fullPath; + } + + // LOADING state + this.readyState = FileReader.LOADING; + + // If loadstart callback + if (typeof this.onloadstart === "function") { + var evt = File._createEvent("loadstart", this); + this.onloadstart(evt); + } + + var me = this; + + // Read file + navigator.fileMgr.readAsDataURL(this.fileName, + + // Success callback + function(r) { + var evt; + + // If DONE (cancelled), then don't do anything + if (me.readyState === FileReader.DONE) { + return; + } + + // Save result + me.result = r; + + // If onload callback + if (typeof me.onload === "function") { + evt = File._createEvent("load", me); + me.onload(evt); + } + + // DONE state + me.readyState = FileReader.DONE; + + // If onloadend callback + if (typeof me.onloadend === "function") { + evt = File._createEvent("loadend", me); + me.onloadend(evt); + } + }, + + // Error callback + function(e) { + var evt; + // If DONE (cancelled), then don't do anything + if (me.readyState === FileReader.DONE) { + return; + } + + // Save error + me.error = e; + + // If onerror callback + if (typeof me.onerror === "function") { + evt = File._createEvent("error", me); + me.onerror(evt); + } + + // DONE state + me.readyState = FileReader.DONE; + + // If onloadend callback + if (typeof me.onloadend === "function") { + evt = File._createEvent("loadend", me); + me.onloadend(evt); + } + } + ); +}; + +/** + * Read file and return data as a binary data. + * + * @param file The name of the file + */ +FileReader.prototype.readAsBinaryString = function(file) { + // TODO - Can't return binary data to browser. + this.fileName = file; +}; + +/** + * Read file and return data as a binary data. + * + * @param file The name of the file + */ +FileReader.prototype.readAsArrayBuffer = function(file) { + // TODO - Can't return binary data to browser. + this.fileName = file; +}; + +//----------------------------------------------------------------------------- +// File Writer +//----------------------------------------------------------------------------- + +/** + * This class writes to the mobile device file system. + * + @param file {File} a File object representing a file on the file system +*/ +FileWriter = function(file) { + this.fileName = ""; + this.length = 0; + if (file) { + this.fileName = file.fullPath || file; + this.length = file.size || 0; + } + + // default is to write at the beginning of the file + this.position = 0; + + this.readyState = 0; // EMPTY + + this.result = null; + + // Error + this.error = null; + + // Event handlers + this.onwritestart = null; // When writing starts + this.onprogress = null; // While writing the file, and reporting partial file data + this.onwrite = null; // When the write has successfully completed. + this.onwriteend = null; // When the request has completed (either in success or failure). + this.onabort = null; // When the write has been aborted. For instance, by invoking the abort() method. + this.onerror = null; // When the write has failed (see errors). +} + +// States +FileWriter.INIT = 0; +FileWriter.WRITING = 1; +FileWriter.DONE = 2; + +/** + * Abort writing file. + */ +FileWriter.prototype.abort = function() { + // check for invalid state + if (this.readyState === FileWriter.DONE || this.readyState === FileWriter.INIT) { + throw FileError.INVALID_STATE_ERR; + } + + // set error + var error = new FileError(), evt; + error.code = error.ABORT_ERR; + this.error = error; + + // If error callback + if (typeof this.onerror === "function") { + evt = File._createEvent("error", this); + this.onerror(evt); + } + // If abort callback + if (typeof this.onabort === "function") { + evt = File._createEvent("abort", this); + this.onabort(evt); + } + + this.readyState = FileWriter.DONE; + + // If write end callback + if (typeof this.onwriteend == "function") { + evt = File._createEvent("writeend", this); + this.onwriteend(evt); + } +}; + +/** + * @Deprecated: use write instead + * + * @param file to write the data to + * @param text to be written + * @param bAppend if true write to end of file, otherwise overwrite the file + */ +FileWriter.prototype.writeAsText = function(file, text, bAppend) { + // Throw an exception if we are already writing a file + if (this.readyState === FileWriter.WRITING) { + throw FileError.INVALID_STATE_ERR; + } + + if (bAppend !== true) { + bAppend = false; // for null values + } + + this.fileName = file; + + // WRITING state + this.readyState = FileWriter.WRITING; + + var me = this; + + // If onwritestart callback + if (typeof me.onwritestart === "function") { + var evt = File._createEvent("writestart", me); + me.onwritestart(evt); + } + + + // Write file + navigator.fileMgr.writeAsText(file, text, bAppend, + // Success callback + function(r) { + var evt; + + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + // Save result + me.result = r; + + // If onwrite callback + if (typeof me.onwrite === "function") { + evt = File._createEvent("write", me); + me.onwrite(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + }, + + // Error callback + function(e) { + var evt; + + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + // Save error + me.error = e; + + // If onerror callback + if (typeof me.onerror === "function") { + evt = File._createEvent("error", me); + me.onerror(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + } + ); +}; + +/** + * Writes data to the file + * + * @param text to be written + */ +FileWriter.prototype.write = function(text) { + // Throw an exception if we are already writing a file + if (this.readyState === FileWriter.WRITING) { + throw FileError.INVALID_STATE_ERR; + } + + // WRITING state + this.readyState = FileWriter.WRITING; + + var me = this; + + // If onwritestart callback + if (typeof me.onwritestart === "function") { + var evt = File._createEvent("writestart", me); + me.onwritestart(evt); + } + + // Write file + navigator.fileMgr.write(this.fileName, text, this.position, + + // Success callback + function(r) { + var evt; + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + + // position always increases by bytes written because file would be extended + me.position += r; + // The length of the file is now where we are done writing. + me.length = me.position; + + // If onwrite callback + if (typeof me.onwrite === "function") { + evt = File._createEvent("write", me); + me.onwrite(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + }, + + // Error callback + function(e) { + var evt; + + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + // Save error + me.error = e; + + // If onerror callback + if (typeof me.onerror === "function") { + evt = File._createEvent("error", me); + me.onerror(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + } + ); + +}; + +/** + * Moves the file pointer to the location specified. + * + * If the offset is a negative number the position of the file + * pointer is rewound. If the offset is greater than the file + * size the position is set to the end of the file. + * + * @param offset is the location to move the file pointer to. + */ +FileWriter.prototype.seek = function(offset) { + // Throw an exception if we are already writing a file + if (this.readyState === FileWriter.WRITING) { + throw FileError.INVALID_STATE_ERR; + } + + if (!offset) { + return; + } + + // See back from end of file. + if (offset < 0) { + this.position = Math.max(offset + this.length, 0); + } + // Offset is bigger then file size so set position + // to the end of the file. + else if (offset > this.length) { + this.position = this.length; + } + // Offset is between 0 and file size so set the position + // to start writing. + else { + this.position = offset; + } +}; + +/** + * Truncates the file to the size specified. + * + * @param size to chop the file at. + */ +FileWriter.prototype.truncate = function(size) { + // Throw an exception if we are already writing a file + if (this.readyState === FileWriter.WRITING) { + throw FileError.INVALID_STATE_ERR; + } + // what if no size specified? + + // WRITING state + this.readyState = FileWriter.WRITING; + + var me = this; + + // If onwritestart callback + if (typeof me.onwritestart === "function") { + var evt = File._createEvent("writestart", me); + me.onwritestart(evt); + } + + // Write file + navigator.fileMgr.truncate(this.fileName, size, + + // Success callback + function(r) { + var evt; + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + // Update the length of the file + me.length = r; + me.position = Math.min(me.position, r); + + // If onwrite callback + if (typeof me.onwrite === "function") { + evt = File._createEvent("write", me); + me.onwrite(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + }, + + // Error callback + function(e) { + var evt; + // If DONE (cancelled), then don't do anything + if (me.readyState === FileWriter.DONE) { + return; + } + + // Save error + me.error = e; + + // If onerror callback + if (typeof me.onerror === "function") { + evt = File._createEvent("error", me); + me.onerror(evt); + } + + // DONE state + me.readyState = FileWriter.DONE; + + // If onwriteend callback + if (typeof me.onwriteend === "function") { + evt = File._createEvent("writeend", me); + me.onwriteend(evt); + } + } + ); +}; + +LocalFileSystem = function() { +}; + +// File error codes +LocalFileSystem.TEMPORARY = 0; +LocalFileSystem.PERSISTENT = 1; +LocalFileSystem.RESOURCE = 2; +LocalFileSystem.APPLICATION = 3; + +/** + * Requests a filesystem in which to store application data. + * + * @param {int} type of file system being requested + * @param {Function} successCallback is called with the new FileSystem + * @param {Function} errorCallback is called with a FileError + */ +LocalFileSystem.prototype.requestFileSystem = function(type, size, successCallback, errorCallback) { + if (type < 0 || type > 3) { + if (typeof errorCallback == "function") { + errorCallback({ + "code": FileError.SYNTAX_ERR + }); + } + } + else { + PhoneGap.exec(successCallback, errorCallback, "com.phonegap.file", "requestFileSystem", [type, size]); + } +}; + +/** + * + * @param {DOMString} uri referring to a local file in a filesystem + * @param {Function} successCallback is called with the new entry + * @param {Function} errorCallback is called with a FileError + */ +LocalFileSystem.prototype.resolveLocalFileSystemURI = function(uri, successCallback, errorCallback) { + PhoneGap.exec(successCallback, errorCallback, "com.phonegap.file", "resolveLocalFileSystemURI", [uri]); +}; + +/** +* This function is required as we need to convert raw +* JSON objects into concrete File and Directory objects. +* +* @param a JSON Objects that need to be converted to DirectoryEntry or FileEntry objects. +* @returns an entry +*/ +LocalFileSystem.prototype._castFS = function(pluginResult) { + var entry = null; + entry = new DirectoryEntry(); + entry.isDirectory = pluginResult.message.root.isDirectory; + entry.isFile = pluginResult.message.root.isFile; + entry.name = pluginResult.message.root.name; + entry.fullPath = pluginResult.message.root.fullPath; + pluginResult.message.root = entry; + return pluginResult; +} + +LocalFileSystem.prototype._castEntry = function(pluginResult) { + var entry = null; + if (pluginResult.message.isDirectory) { + entry = new DirectoryEntry(); + } + else if (pluginResult.message.isFile) { + entry = new FileEntry(); + } + entry.isDirectory = pluginResult.message.isDirectory; + entry.isFile = pluginResult.message.isFile; + entry.name = pluginResult.message.name; + entry.fullPath = pluginResult.message.fullPath; + pluginResult.message = entry; + return pluginResult; +} + +LocalFileSystem.prototype._castEntries = function(pluginResult) { + var entries = pluginResult.message; + var retVal = []; + for (i=0; i - View Navigator Multiple Instances - + View Navigator Multiple Instances + - - - - - - - + + + + + + + + - - \ No newline at end of file + diff --git a/samples/03 - slidingView/01 - basic/index.html b/samples/03 - slidingView/01 - basic/index.html index b4bb846..c51fff9 100644 --- a/samples/03 - slidingView/01 - basic/index.html +++ b/samples/03 - slidingView/01 - basic/index.html @@ -1,27 +1,27 @@ - Sliding View Sample - + Sliding View Sample + - - - - - + + + + + - + + + body { + padding:0; + margin:0; + background:#fff; + -webkit-user-select:none; + -webkit-text-size-adjust:none; + color:#333; + font-family:helvetica; + font-size:12px; + text-align:center; + } + + h1 { + font-size:2em; + padding:20px 0; + margin:0; + } + + #swipeview { + 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; + -webkit-border-radius:10px; + } + + #nav li { + 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; + } + + #nav li#next { + margin-right:0; + background:transparent; + } + + #nav li.selected { + background:rgba(255,255,255,0.4); + } + + #swipeview-slider > div { + 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; + display:block; + text-align:center; + font-size:1.4em; + padding:0 20px; + } + + p { + padding:20px; + margin:0; + font-size:1.4em; + } + + + - + - +
    -
    -

    Swipe horizontally to reveal the sidebar

    -

    Created with http://oridomi.com/, works on iOS devices.

    + +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lorem nec vestibulum placerat, turpis nunc porttitor urna, non consectetur mauris eros vitae urna. Vestibulum at augue nisi. Suspendisse lobortis, libero vel adipiscing egestas, quam mi rhoncus justo, id imperdiet ligula nibh porta massa. - +
    +
    +

    Swipe horizontally to reveal the sidebar

    +

    Created with http://oridomi.com/, works on iOS devices.

    + +
    - + - \ No newline at end of file + diff --git a/samples/03 - slidingView/05 - oridomi w viewnav/index.html b/samples/03 - slidingView/05 - oridomi w viewnav/index.html index 8d387a1..b294a33 100644 --- a/samples/03 - slidingView/05 - oridomi w viewnav/index.html +++ b/samples/03 - slidingView/05 - oridomi w viewnav/index.html @@ -1,163 +1,163 @@ - Sliding View Sample - + Sliding View Sample + - - - - - - - - - - - - + + + + - + + - + - +
    - + - \ No newline at end of file + diff --git a/samples/04 - browser history/index.html b/samples/04 - browser history/index.html index 564218d..e62e17b 100644 --- a/samples/04 - browser history/index.html +++ b/samples/04 - browser history/index.html @@ -1,73 +1,73 @@ - TV Listings - + TV Listings + - - - - - + + + + + - - - - - + + + - + - \ No newline at end of file + diff --git a/samples/05 - multi-device form factor/www/index.html b/samples/05 - multi-device form factor/www/index.html index 8e61007..7d1daaf 100644 --- a/samples/05 - multi-device form factor/www/index.html +++ b/samples/05 - multi-device form factor/www/index.html @@ -1,233 +1,235 @@ - View Navigator Sample - + View Navigator Sample + - - - - - - - - - + - - - - + + + + - - - - + + + + + + + + + + - - - - \ No newline at end of file + } + + $( "#"+movie.id ).addClass( "listSelected" ); + + var html = "
    "; + html += "

    " + movie.title + "

    "; + html += "

    " + movie.mpaa_rating + ", " + movie.runtime + "min. - (" + movie.year + ")

    "; + html += ""; + html += "

    " + movie.synopsis + "

    "; + html += "

    Ratings:

    "; + html += "Audience: " + movie.ratings.audience_score + " - " + movie.ratings.audience_rating + "
    " + html += "Critics: " + movie.ratings.critics_score + " - " + movie.ratings.critics_rating + "
    " + html += "

    " + html += "

    What the critics say:

    " + movie.critics_consensus + "

    "; + html += "

    Cast:

      "; + + for ( var i = 0; i < movie.abridged_cast.length; i ++ ) + { + var actor = movie.abridged_cast[i]; + html += "
    • " + actor.name + ": "; + + if ( actor.characters ) { + for ( var j = 0; j < actor.characters.length; j ++ ) + { + if ( j > 0 ) { html += ", " }; + html += actor.characters[j]; + } + } + + html += "
      • "; + } + + html += "

    "; + + html += "
    "; + + var viewDescriptor = { title: movie.title, + view: $(html) + }; + + if ( controller.tabletView ) { + window.splitViewNavigator.replaceBodyView( viewDescriptor ); + } + else { + viewDescriptor.backLabel = "Back"; + window.viewNavigator.pushView( viewDescriptor ); + } + } + + + $(document).ready( function() { + + controller.init(); + var _w = Math.max( $(window).width(), $(window).height() ); + var _h = Math.min( $(window).width(), $(window).height() ); + controller.tabletView = (_w >= 1000 && _h >= 600); + + var defaultView = { title: "Rotten Tomatoes", + view: $("
    ") + }; + + if ( controller.tabletView ) { + //Setup the ViewNavigator + new SplitViewNavigator( 'body', { + toggleButtonLabel: 'Movies' + }); + window.splitViewNavigator.pushSidebarView( controller.rootView ); + window.splitViewNavigator.pushBodyView( defaultView ); + } + else { + //phone view + window.viewNavigator = new ViewNavigator( 'body' ); + window.viewNavigator.pushView( controller.rootView ); + } + } ); + + + + + + diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index 5e43bee..20992df 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -11,7 +11,16 @@ 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 + }; + + this.options = options = $.extend( {}, defaults, options ); this.animating = false; this.animationDuration = 350; @@ -23,18 +32,16 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT var regexp = new RegExp('Windows Phone OS 7'); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - this.rootElement = $('
    '); - this.sidebarContainer = $('
    '); + this.rootElement = $('
    '); + this.sidebarContainer = $('
    '); this.contentOverlay = $('
    '); - this.bodyContainer = $('
    '); + this.bodyContainer = $('
    '); - 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 = $('
  • '+toggleButtonLabel+'
    • '); + this.toggleSidebarButton = $('
  • ' + options.toggleButtonLabel + '
    • '); this.rootElement.append( this.bodyContainer ); this.rootElement.append( this.contentOverlay ); @@ -52,7 +59,7 @@ var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindT this.parent.resize( function(event){ self.resizeContent() } ); //} - if ( bindToWindow != false ) { + if ( options.bindToWindow != false ) { $(window).resize( function(event){ self.resizeContent() } ); } else { diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index 99f46a5..8155b53 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -11,7 +11,15 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ -var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { +var ViewNavigator = function( target, options ) { + + var defaults = { + CSSNamespace: 'viewNavigator_', + backLinkCSS: 'viewNavigator_backButton', + bindToWindow: true + }; + + this.options = options = $.extend( {}, defaults, options ); this.supportsBackKey = true; //phonegap on android only this.animating = false; @@ -26,22 +34,20 @@ var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { var regexp = new RegExp('Windows Phone OS 7'); this.winPhone = (navigator.userAgent.search(regexp) >= 0); - this.rootElement = $('
    '); - this.header = $('
    '); - this.content = $('
    '); + this.rootElement = $('
    '); + this.header = $('
    '); + this.content = $('
    '); 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 { @@ -106,19 +112,17 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.animating = true; - - this.contentPendingRemove = this.contentViewHolder; this.headerContentPendingRemove = this.headerContent; - this.headerContent = $('
    '); + this.headerContent = $('
    '); - this.headerTitle = $('
    ' + viewDescriptor.title + '
    '); + this.headerTitle = $('
    ' + viewDescriptor.title + '
    '); this.headerContent.append( this.headerTitle ); var linkGuid = this.guid(); if ( viewDescriptor.backLabel ) { - this.headerBacklink = $(''); + this.headerBacklink = $(''); this.headerContent.append( this.headerBacklink ); //this is for proper handling in splitviewnavigator @@ -126,7 +130,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { } var id = this.guid(); - this.contentViewHolder = $('
    '); + this.contentViewHolder = $('
    '); this.contentViewHolder.append( viewDescriptor.view ); this.resizeContent(); From 681925845fe75394d1886f20cf2ae4a67801472f Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 15:45:34 +0100 Subject: [PATCH 5/6] updated iScroll updated iScroll to version 4.2.5. Also fixed an error with this version of iScroll (an error where form elements could'nt be clicked) --- src/libs/iscroll.js | 312 ++++++++++++++++------------- src/viewnavigator/viewnavigator.js | 13 +- 2 files changed, 181 insertions(+), 144 deletions(-) mode change 100755 => 100644 src/libs/iscroll.js diff --git a/src/libs/iscroll.js b/src/libs/iscroll.js old mode 100755 new mode 100644 index bbf0d42..f8576f0 --- a/src/libs/iscroll.js +++ b/src/libs/iscroll.js @@ -1,60 +1,88 @@ /*! - * iScroll v4.1.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org + * iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org * Released under MIT license, http://cubiq.org/license */ -(function(){ +(function(window, doc){ var m = Math, - mround = function (r) { return r >> 0; }, - vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : - (/firefox/i).test(navigator.userAgent) ? 'Moz' : - (/trident/i).test(navigator.userAgent) ? 'ms' : - 'opera' in window ? 'O' : '', + dummyStyle = doc.createElement('div').style, + vendor = (function () { + var vendors = 't,webkitT,MozT,msT,OT'.split(','), + t, + i = 0, + l = vendors.length; + + for ( ; i < l; i++ ) { + t = vendors[i] + 'ransform'; + if ( t in dummyStyle ) { + return vendors[i].substr(0, vendors[i].length - 1); + } + } + + return false; + })(), + cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '', + + // Style properties + transform = prefixStyle('transform'), + transitionProperty = prefixStyle('transitionProperty'), + transitionDuration = prefixStyle('transitionDuration'), + transformOrigin = prefixStyle('transformOrigin'), + transitionTimingFunction = prefixStyle('transitionTimingFunction'), + transitionDelay = prefixStyle('transitionDelay'), // Browser capabilities - isAndroid = (/android/gi).test(navigator.appVersion), - isIDevice = (/iphone|ipad/gi).test(navigator.appVersion), - isPlaybook = (/playbook/gi).test(navigator.appVersion), - isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), + isAndroid = (/android/gi).test(navigator.appVersion), + isIDevice = (/iphone|ipad/gi).test(navigator.appVersion), + isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), - has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(), + has3d = prefixStyle('perspective') in dummyStyle, hasTouch = 'ontouchstart' in window && !isTouchPad, - hasTransform = vendor + 'Transform' in document.documentElement.style, - hasTransitionEnd = isIDevice || isPlaybook, + hasTransform = vendor !== false, + hasTransitionEnd = prefixStyle('transition') in dummyStyle, - nextFrame = (function() { - return window.requestAnimationFrame - || window.webkitRequestAnimationFrame - || window.mozRequestAnimationFrame - || window.oRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { return setTimeout(callback, 1); } - })(), - cancelFrame = (function () { - return window.cancelRequestAnimationFrame - || window.webkitCancelAnimationFrame - || window.webkitCancelRequestAnimationFrame - || window.mozCancelRequestAnimationFrame - || window.oCancelRequestAnimationFrame - || window.msCancelRequestAnimationFrame - || clearTimeout - })(), - - // Events RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize', START_EV = hasTouch ? 'touchstart' : 'mousedown', MOVE_EV = hasTouch ? 'touchmove' : 'mousemove', END_EV = hasTouch ? 'touchend' : 'mouseup', CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup', - WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel', + TRNEND_EV = (function () { + if ( vendor === false ) return false; + + var transitionEnd = { + '' : 'transitionend', + 'webkit' : 'webkitTransitionEnd', + 'Moz' : 'transitionend', + 'O' : 'otransitionend', + 'ms' : 'MSTransitionEnd' + }; + + return transitionEnd[vendor]; + })(), + + nextFrame = (function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback) { return setTimeout(callback, 1); }; + })(), + cancelFrame = (function () { + return window.cancelRequestAnimationFrame || + window.webkitCancelAnimationFrame || + window.webkitCancelRequestAnimationFrame || + window.mozCancelRequestAnimationFrame || + window.oCancelRequestAnimationFrame || + window.msCancelRequestAnimationFrame || + clearTimeout; + })(), // Helpers - trnOpen = 'translate' + (has3d ? '3d(' : '('), - trnClose = has3d ? ',0)' : ')', + translateZ = has3d ? ' translateZ(0)' : '', // Constructor iScroll = function (el, options) { var that = this, - doc = document, i; that.wrapper = typeof el == 'object' ? el : doc.getElementById(el); @@ -75,6 +103,7 @@ var m = Math, useTransition: false, topOffset: 0, checkDOMChanges: false, // Experimental + handleClick: true, // Scrollbar hScrollbar: true, @@ -118,27 +147,26 @@ var m = Math, that.y = that.options.y; // Normalize options - that.options.useTransform = hasTransform ? that.options.useTransform : false; + that.options.useTransform = hasTransform && that.options.useTransform; that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar; that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar; that.options.zoom = that.options.useTransform && that.options.zoom; that.options.useTransition = hasTransitionEnd && that.options.useTransition; // Helpers FIX ANDROID BUG! - // translate3d and scale doesn't work together! + // translate3d and scale doesn't work together! // Ignoring 3d ONLY WHEN YOU SET that.options.zoom if ( that.options.zoom && isAndroid ){ - trnOpen = 'translate('; - trnClose = ')'; + translateZ = ''; } // Set some default styles - that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left'; - that.scroller.style[vendor + 'TransitionDuration'] = '0'; - that.scroller.style[vendor + 'TransformOrigin'] = '0 0'; - if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)'; + that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + 'transform' : 'top left'; + that.scroller.style[transitionDuration] = '0'; + that.scroller.style[transformOrigin] = '0 0'; + if (that.options.useTransition) that.scroller.style[transitionTimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)'; - if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose; + if (that.options.useTransform) that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px)' + translateZ; else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px'; if (that.options.useTransition) that.options.fixedScrollbar = true; @@ -148,9 +176,10 @@ var m = Math, that._bind(RESIZE_EV, window); that._bind(START_EV); if (!hasTouch) { - that._bind('mouseout', that.wrapper); - if (that.options.wheelAction != 'none') - that._bind(WHEEL_EV); + if (that.options.wheelAction != 'none') { + that._bind('DOMMouseScroll'); + that._bind('mousewheel'); + } } if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () { @@ -175,17 +204,14 @@ iScroll.prototype = { switch(e.type) { case START_EV: if (!hasTouch && e.button !== 0) return; - var nodeName = e.target.nodeName.toUpperCase(); - if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return; that._start(e); break; case MOVE_EV: that._move(e); break; case END_EV: case CANCEL_EV: that._end(e); break; case RESIZE_EV: that._resize(); break; - case WHEEL_EV: that._wheel(e); break; - case 'mouseout': that._mouseout(e); break; - case 'webkitTransitionEnd': that._transitionEnd(e); break; + case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break; + case TRNEND_EV: that._transitionEnd(e); break; } }, @@ -198,12 +224,11 @@ iScroll.prototype = { _scrollbar: function (dir) { var that = this, - doc = document, bar; if (!that[dir + 'Scrollbar']) { if (that[dir + 'ScrollbarWrapper']) { - if (hasTransform) that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = ''; + if (hasTransform) that[dir + 'ScrollbarIndicator'].style[transform] = ''; that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']); that[dir + 'ScrollbarWrapper'] = null; that[dir + 'ScrollbarIndicator'] = null; @@ -219,7 +244,7 @@ iScroll.prototype = { if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase(); else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px'); - bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:opacity;-' + vendor + '-transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1'); + bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:opacity;' + cssVendor + 'transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1'); that.wrapper.appendChild(bar); that[dir + 'ScrollbarWrapper'] = bar; @@ -227,10 +252,10 @@ iScroll.prototype = { // Create the scrollbar indicator bar = doc.createElement('div'); if (!that.options.scrollbarClass) { - bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-' + vendor + '-background-clip:padding-box;-' + vendor + '-box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';-' + vendor + '-border-radius:3px;border-radius:3px'; + bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);' + cssVendor + 'background-clip:padding-box;' + cssVendor + 'box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';' + cssVendor + 'border-radius:3px;border-radius:3px'; } - bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0;-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose; - if (that.options.useTransition) bar.style.cssText += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)'; + bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:' + cssVendor + 'transform;' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);' + cssVendor + 'transition-duration:0;' + cssVendor + 'transform: translate(0,0)' + translateZ; + if (that.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)'; that[dir + 'ScrollbarWrapper'].appendChild(bar); that[dir + 'ScrollbarIndicator'] = bar; @@ -238,13 +263,13 @@ iScroll.prototype = { if (dir == 'h') { that.hScrollbarSize = that.hScrollbarWrapper.clientWidth; - that.hScrollbarIndicatorSize = m.max(mround(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8); + that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8); that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px'; that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize; that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX; } else { that.vScrollbarSize = that.vScrollbarWrapper.clientHeight; - that.vScrollbarIndicatorSize = m.max(mround(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8); + that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8); that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px'; that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize; that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY; @@ -260,14 +285,16 @@ iScroll.prototype = { }, _pos: function (x, y) { + if (this.zoomed) return; + x = this.hScroll ? x : 0; y = this.vScroll ? y : 0; if (this.options.useTransform) { - this.scroller.style[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')'; + this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ; } else { - x = mround(x); - y = mround(y); + x = m.round(x); + y = m.round(y); this.scroller.style.left = x + 'px'; this.scroller.style.top = y + 'px'; } @@ -290,14 +317,14 @@ iScroll.prototype = { if (pos < 0) { if (!that.options.fixedScrollbar) { - size = that[dir + 'ScrollbarIndicatorSize'] + mround(pos * 3); + size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3); if (size < 8) size = 8; that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px'; } pos = 0; } else if (pos > that[dir + 'ScrollbarMaxScroll']) { if (!that.options.fixedScrollbar) { - size = that[dir + 'ScrollbarIndicatorSize'] - mround((pos - that[dir + 'ScrollbarMaxScroll']) * 3); + size = that[dir + 'ScrollbarIndicatorSize'] - m.round((pos - that[dir + 'ScrollbarMaxScroll']) * 3); if (size < 8) size = 8; that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px'; pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size); @@ -306,9 +333,9 @@ iScroll.prototype = { } } - that[dir + 'ScrollbarWrapper'].style[vendor + 'TransitionDelay'] = '0'; + that[dir + 'ScrollbarWrapper'].style[transitionDelay] = '0'; that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1'; - that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = trnOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + trnClose; + that[dir + 'ScrollbarIndicator'].style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ; }, _start: function (e) { @@ -348,19 +375,20 @@ iScroll.prototype = { if (that.options.momentum) { if (that.options.useTransform) { // Very lame general purpose alternative to CSSMatrix - matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(','); - x = matrix[4] * 1; - y = matrix[5] * 1; + matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(','); + x = +(matrix[12] || matrix[4]); + y = +(matrix[13] || matrix[5]); } else { - x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1; - y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1; + x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, ''); + y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, ''); } if (x != that.x || y != that.y) { - if (that.options.useTransition) that._unbind('webkitTransitionEnd'); + if (that.options.useTransition) that._unbind(TRNEND_EV); else cancelFrame(that.aniTime); that.steps = []; that._pos(x, y); + if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); } } @@ -376,9 +404,9 @@ iScroll.prototype = { if (that.options.onScrollStart) that.options.onScrollStart.call(that, e); - that._bind(MOVE_EV); - that._bind(END_EV); - that._bind(CANCEL_EV); + that._bind(MOVE_EV, window); + that._bind(END_EV, window); + that._bind(CANCEL_EV, window); }, _move: function (e) { @@ -411,7 +439,7 @@ iScroll.prototype = { newX = this.originX - this.originX * that.lastScale + this.x, newY = this.originY - this.originY * that.lastScale + this.y; - this.scroller.style[vendor + 'Transform'] = trnOpen + newX + 'px,' + newY + 'px' + trnClose + ' scale(' + scale + ')'; + this.scroller.style[transform] = 'translate(' + newX + 'px,' + newY + 'px) scale(' + scale + ')' + translateZ; if (that.options.onZoom) that.options.onZoom.call(that, e); return; @@ -424,7 +452,7 @@ iScroll.prototype = { if (newX > 0 || newX < that.maxScrollX) { newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX; } - if (newY > that.minScrollY || newY < that.maxScrollY) { + if (newY > that.minScrollY || newY < that.maxScrollY) { newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY; } @@ -463,7 +491,7 @@ iScroll.prototype = { }, _end: function (e) { - if (hasTouch && e.touches.length != 0) return; + if (hasTouch && e.touches.length !== 0) return; var that = this, point = hasTouch ? e.changedTouches[0] : e, @@ -478,9 +506,9 @@ iScroll.prototype = { snap, scale; - that._unbind(MOVE_EV); - that._unbind(END_EV); - that._unbind(CANCEL_EV); + that._unbind(MOVE_EV, window); + that._unbind(END_EV, window); + that._unbind(CANCEL_EV, window); if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e); @@ -494,8 +522,8 @@ iScroll.prototype = { that.x = that.originX - that.originX * that.lastScale + that.x; that.y = that.originY - that.originY * that.lastScale + that.y; - that.scroller.style[vendor + 'TransitionDuration'] = '200ms'; - that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + that.scale + ')'; + that.scroller.style[transitionDuration] = '200ms'; + that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + that.scale + ')' + translateZ; that.zoomed = false; that.refresh(); @@ -517,7 +545,7 @@ iScroll.prototype = { that.options.onZoomEnd.call(that, e); }, 200); // 200 is default zoom duration } - } else { + } else if (this.options.handleClick) { that.doubleTapTimer = setTimeout(function () { that.doubleTapTimer = null; @@ -526,7 +554,7 @@ iScroll.prototype = { while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') { - ev = document.createEvent('MouseEvents'); + ev = doc.createEvent('MouseEvents'); ev.initMouseEvent('click', true, true, e.view, 1, point.screenX, point.screenY, point.clientX, point.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, @@ -538,7 +566,7 @@ iScroll.prototype = { } } - that._resetPos(200); + that._resetPos(400); if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e); return; @@ -551,8 +579,8 @@ iScroll.prototype = { newPosX = that.x + momentumX.dist; newPosY = that.y + momentumY.dist; - if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 }; - if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 }; + if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 }; + if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 }; } if (momentumX.dist || momentumY.dist) { @@ -571,7 +599,7 @@ iScroll.prototype = { } } - that.scrollTo(mround(newPosX), mround(newPosY), newDuration); + that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration); if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e); return; @@ -607,11 +635,11 @@ iScroll.prototype = { } if (that.hScrollbar && that.options.hideScrollbar) { - if (vendor == 'webkit') that.hScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms'; + if (vendor == 'webkit') that.hScrollbarWrapper.style[transitionDelay] = '300ms'; that.hScrollbarWrapper.style.opacity = '0'; } if (that.vScrollbar && that.options.hideScrollbar) { - if (vendor == 'webkit') that.vScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms'; + if (vendor == 'webkit') that.vScrollbarWrapper.style[transitionDelay] = '300ms'; that.vScrollbarWrapper.style.opacity = '0'; } @@ -666,39 +694,28 @@ iScroll.prototype = { if (deltaY > that.minScrollY) deltaY = that.minScrollY; else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY; - - that.scrollTo(deltaX, deltaY, 0); + + if (that.maxScrollY < 0) { + that.scrollTo(deltaX, deltaY, 0); + } }, - _mouseout: function (e) { - var t = e.relatedTarget; - - if (!t) { - this._end(e); - return; - } - - while (t = t.parentNode) if (t == this.wrapper) return; - - this._end(e); - }, - _transitionEnd: function (e) { var that = this; if (e.target != that.scroller) return; - that._unbind('webkitTransitionEnd'); + that._unbind(TRNEND_EV); that._startAni(); }, /** - * - * Utilities - * - */ + * + * Utilities + * + */ _startAni: function () { var that = this, startX = that.x, startY = that.y, @@ -724,7 +741,7 @@ iScroll.prototype = { that._transitionTime(step.time); that._pos(step.x, step.y); that.animating = false; - if (step.time) that._bind('webkitTransitionEnd'); + if (step.time) that._bind(TRNEND_EV); else that._resetPos(0); return; } @@ -754,9 +771,9 @@ iScroll.prototype = { _transitionTime: function (time) { time += 'ms'; - this.scroller.style[vendor + 'TransitionDuration'] = time; - if (this.hScrollbar) this.hScrollbarIndicator.style[vendor + 'TransitionDuration'] = time; - if (this.vScrollbar) this.vScrollbarIndicator.style[vendor + 'TransitionDuration'] = time; + this.scroller.style[transitionDuration] = time; + if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time; + if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time; }, _momentum: function (dist, time, maxDistUpper, maxDistLower, size) { @@ -765,7 +782,7 @@ iScroll.prototype = { newDist = (speed * speed) / (2 * deceleration), newTime = 0, outsideDist = 0; - // Proportinally reduce speed if we are outside of the boundaries + // Proportinally reduce speed if we are outside of the boundaries if (dist > 0 && newDist > maxDistUpper) { outsideDist = size / (6 / (newDist / speed * deceleration)); maxDistUpper = maxDistUpper + outsideDist; @@ -781,7 +798,7 @@ iScroll.prototype = { newDist = newDist * (dist < 0 ? -1 : 1); newTime = speed / deceleration; - return { dist: newDist, time: mround(newTime) }; + return { dist: newDist, time: m.round(newTime) }; }, _offset: function (el) { @@ -836,7 +853,7 @@ iScroll.prototype = { that.currPageY = page; // Snap with constant speed (proportional duration) - time = mround(m.max(sizeX, sizeY)) || 200; + time = m.round(m.max(sizeX, sizeY)) || 200; return { x: x, y: y, time: time }; }, @@ -851,14 +868,14 @@ iScroll.prototype = { /** - * - * Public methods - * - */ + * + * Public methods + * + */ destroy: function () { var that = this; - that.scroller.style[vendor + 'Transform'] = ''; + that.scroller.style[transform] = ''; // Remove the scrollbars that.hScrollbar = false; @@ -869,16 +886,16 @@ iScroll.prototype = { // Remove the event listeners that._unbind(RESIZE_EV, window); that._unbind(START_EV); - that._unbind(MOVE_EV); - that._unbind(END_EV); - that._unbind(CANCEL_EV); + that._unbind(MOVE_EV, window); + that._unbind(END_EV, window); + that._unbind(CANCEL_EV, window); if (!that.options.hasTouch) { - that._unbind('mouseout', that.wrapper); - that._unbind(WHEEL_EV); + that._unbind('DOMMouseScroll'); + that._unbind('mousewheel'); } - if (that.options.useTransition) that._unbind('webkitTransitionEnd'); + if (that.options.useTransition) that._unbind(TRNEND_EV); if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime); @@ -898,8 +915,8 @@ iScroll.prototype = { that.wrapperH = that.wrapper.clientHeight || 1; that.minScrollY = -that.options.topOffset || 0; - that.scrollerW = mround(that.scroller.offsetWidth * that.scale); - that.scrollerH = mround((that.scroller.offsetHeight + that.minScrollY) * that.scale); + that.scrollerW = m.round(that.scroller.offsetWidth * that.scale); + that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale); that.maxScrollX = that.wrapperW - that.scrollerW; that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY; that.dirX = 0; @@ -954,8 +971,8 @@ iScroll.prototype = { that._scrollbar('v'); if (!that.zoomed) { - that.scroller.style[vendor + 'TransitionDuration'] = '0'; - that._resetPos(200); + that.scroller.style[transitionDuration] = '0'; + that._resetPos(400); } }, @@ -1026,9 +1043,9 @@ iScroll.prototype = { this.enabled = false; // If disabled after touchstart we make sure that there are no left over events - this._unbind(MOVE_EV); - this._unbind(END_EV); - this._unbind(CANCEL_EV); + this._unbind(MOVE_EV, window); + this._unbind(END_EV, window); + this._unbind(CANCEL_EV, window); }, enable: function () { @@ -1036,7 +1053,7 @@ iScroll.prototype = { }, stop: function () { - if (this.options.useTransition) this._unbind('webkitTransitionEnd'); + if (this.options.useTransition) this._unbind(TRNEND_EV); else cancelFrame(this.aniTime); this.steps = []; this.moved = false; @@ -1062,8 +1079,8 @@ iScroll.prototype = { that.x = that.x > 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x; that.y = that.y > that.minScrollY ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y; - that.scroller.style[vendor + 'TransitionDuration'] = time + 'ms'; - that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + scale + ')'; + that.scroller.style[transitionDuration] = time + 'ms'; + that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + scale + ')' + translateZ; that.zoomed = false; }, @@ -1072,7 +1089,16 @@ iScroll.prototype = { } }; +function prefixStyle (style) { + if ( vendor === '' ) return style; + + style = style.charAt(0).toUpperCase() + style.substr(1); + return vendor + style; +} + +dummyStyle = null; // for the sake of it + if (typeof exports !== 'undefined') exports.iScroll = iScroll; else window.iScroll = iScroll; -})(); +})(window, document); diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index 8155b53..56d3363 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -311,7 +311,18 @@ ViewNavigator.prototype.resetScroller = function() { var cssString = 'translate3d(0px, '+(originalTopMargin).toString()+'px, 0px)'; targetDiv.css( '-webkit-transform', cssString ); } - self.scroller = new iScroll( id ); + 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 ) ); } From ba821049126de07acbd3497e7bbbbdb45723291c Mon Sep 17 00:00:00 2001 From: Andre Meyering Date: Wed, 23 Jan 2013 15:47:56 +0100 Subject: [PATCH 6/6] added ability to deactivate noClickDelay added ability to deactivate noClickDelay (e.g.: if it isn't needed) --- src/splitviewnavigator/splitviewnavigator.js | 9 ++++++--- src/viewnavigator/viewnavigator.js | 7 ++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index 20992df..9a94e01 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -17,7 +17,8 @@ var SplitViewNavigator = function( target, options ) { CSSNamespace: 'splitViewNavigator_', toggleButtonLabel: 'Menu', backLinkCSS: 'viewNavigator_backButton', - bindToWindow: true + bindToWindow: true, + useNoClickDelay: true }; this.options = options = $.extend( {}, defaults, options ); @@ -72,8 +73,10 @@ var SplitViewNavigator = function( target, options ) { this.contentOverlay.click( function(event){ self.hideSidebar() } ); - new NoClickDelay( this.contentOverlay.get()[0] ); - new NoClickDelay( this.toggleSidebarButton.get()[0] ); + if ( this.options.useNoClickDelay ) { + new NoClickDelay( this.contentOverlay.get()[0] ); + new NoClickDelay( this.toggleSidebarButton.get()[0] ); + } window.splitViewNavigator = this; } diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index 56d3363..0603254 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -16,7 +16,8 @@ var ViewNavigator = function( target, options ) { var defaults = { CSSNamespace: 'viewNavigator_', backLinkCSS: 'viewNavigator_backButton', - bindToWindow: true + bindToWindow: true, + useNoClickDelay: true }; this.options = options = $.extend( {}, defaults, options ); @@ -268,7 +269,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { this.resetScroller(); } - if ( viewDescriptor.backLabel ) { + if ( viewDescriptor.backLabel && this.options.useNoClickDelay ) { new NoClickDelay( this.headerBacklink.get()[0] ); } @@ -327,7 +328,7 @@ ViewNavigator.prototype.resetScroller = function() { self.scroller.scrollTo( 0, parseInt( scrollY, 10 ) ); } }, 10 ); - //this.scroller = new iScroll( id ); + } else { var target = $('#'+id );