From 89de0830f1d983ec3ffd723de7efc0bcd7fb7444 Mon Sep 17 00:00:00 2001 From: Andrew Trice Date: Mon, 9 Apr 2012 11:30:52 -0400 Subject: [PATCH] lots of bug fixes and tweaks --- src/slidingview/slidingview.js | 25 ++++-- src/splitviewnavigator/splitviewnavigator.js | 37 +++++---- src/viewnavigator/viewnavigator.css | 81 ++++---------------- src/viewnavigator/viewnavigator.js | 25 ++++-- 4 files changed, 74 insertions(+), 94 deletions(-) diff --git a/src/slidingview/slidingview.js b/src/slidingview/slidingview.js index 106539b..de64bc0 100644 --- a/src/slidingview/slidingview.js +++ b/src/slidingview/slidingview.js @@ -36,7 +36,9 @@ SlidingView.prototype.setupEventHandlers = function() { this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup'; var self = this; - this.body.get()[0].addEventListener( this.START_EVENT, function( event ){ self.onTouchStart(event), true } ); + var func = function( event ){ self.onTouchStart(event), true }; + var body = this.body.get()[0]; + body.addEventListener( this.START_EVENT, func, false ); } SlidingView.prototype.onTouchStart = function(event) { @@ -48,8 +50,8 @@ SlidingView.prototype.onTouchStart = function(event) { this.touchMoveHandler = function( event ){ self.onTouchMove(event) }; this.touchUpHandler = function( event ){ self.onTouchEnd(event) }; - this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler ); - this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler ); + 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(); } @@ -105,10 +107,17 @@ SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) { //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" ); + //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 ) { @@ -150,8 +159,8 @@ SlidingView.prototype.snapToPosition = function() { } SlidingView.prototype.unbindEvents = function() { - this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler ); - this.body.get()[0].removeEventListener( this.END_EVENT, this.touchUpHandler ); + this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler, false ); + this.body.get()[0].removeEventListener( this.END_EVENT, this.touchUpHandler, false ); } diff --git a/src/splitviewnavigator/splitviewnavigator.js b/src/splitviewnavigator/splitviewnavigator.js index 0148bc0..77b91df 100644 --- a/src/splitviewnavigator/splitviewnavigator.js +++ b/src/splitviewnavigator/splitviewnavigator.js @@ -1,4 +1,4 @@ -var SplitViewNavigator = function( target, toggleButtonLabel ) { +var SplitViewNavigator = function( target, toggleButtonLabel, backLinkCSS, bindToWindow ) { this.animating = false; this.animationDuration = 350; @@ -15,11 +15,13 @@ var SplitViewNavigator = function( target, toggleButtonLabel ) { this.contentOverlay = $('
'); this.bodyContainer = $('
'); - this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0] ); + this.sidebarViewNavigator = new ViewNavigator( this.sidebarContainer.get()[0], backLinkCSS, false ); - this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0] ); + this.bodyViewNavigator = new ViewNavigator( this.bodyContainer.get()[0], backLinkCSS, false ); - this.toggleSidebarButton = $(''); + this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; + + this.toggleSidebarButton = $(''); this.rootElement.append( this.bodyContainer ); this.rootElement.append( this.contentOverlay ); @@ -27,11 +29,21 @@ var SplitViewNavigator = function( target, toggleButtonLabel ) { this.rootElement.append( this.sidebarContainer ); 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( "orientationchange", function(event){ self.resizeContent() } ) + } + else {*/ + //$(window).resize( function(event){ self.resizeContent() } ); + //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(); @@ -49,6 +61,8 @@ var SplitViewNavigator = function( target, toggleButtonLabel ) { SplitViewNavigator.prototype.resizeContent = function() { this.applyStylesByOrientation(); + this.sidebarViewNavigator.resizeContent(); + this.bodyViewNavigator.resizeContent() } SplitViewNavigator.prototype.applyStylesByOrientation = function() { @@ -144,13 +158,6 @@ SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) { this.bodyViewNavigator.replaceView( viewDescriptor ); } -/* -SplitViewNavigator.prototype.setBodyView = function( viewDescriptor ) { - - this.bodyHeaderTitle.text( viewDescriptor.title ); - this.bodyContent.empty(); - this.bodyContent.append( viewDescriptor.view ); -}*/ diff --git a/src/viewnavigator/viewnavigator.css b/src/viewnavigator/viewnavigator.css index 428312a..ab07b29 100644 --- a/src/viewnavigator/viewnavigator.css +++ b/src/viewnavigator/viewnavigator.css @@ -40,16 +40,7 @@ body { overflow:hide; padding:0px; - - /*http://www.colorzilla.com/gradient-editor/*/ - background: rgb(149,149,149); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */ + background: #666; } .viewNavigator_header_backlink { @@ -62,7 +53,7 @@ body { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; - -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); + max-width:30%; } @@ -70,10 +61,8 @@ body { position:absolute; top:12px; - left:0%; - right:0%; - margin-left:auto; - margin-right:auto; + left:0px; + right:0px; text-align:center; font-weight: bold; color: #FFFFFF; @@ -81,7 +70,6 @@ body { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; - -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); max-width:48%; } @@ -106,10 +94,10 @@ body { -webkit-transform: translate3d(0,0,0); } -.viewNavigator_content * { +.viewNavigator_content div { -webkit-transform: translate3d(0,0,0); - } +} .viewNavigator_contentHolder { position:absolute; @@ -123,67 +111,32 @@ body { margin:0px; overflow: hidden; -webkit-overflow-scrolling : touch; + min-width:100%; + min-height:100% } .viewNavigator_backface { -webkit-backface-visibility: hidden; } -/*http://www.red-team-design.com/just-another-awesome-css3-buttons*/ -.backLinkButton +.viewNavigator_backButtonPosition { + position:absolute; + left: 5px; + top: .6em; +} + +.viewNavigator_backButton { cursor:pointer; display: inline-block; white-space: nowrap; background-color: #ccc; - background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); - background-image: -webkit-linear-gradient(top, #eee, #ccc); - background-image: -moz-linear-gradient(top, #eee, #ccc); - background-image: -ms-linear-gradient(top, #eee, #ccc); - background-image: -o-linear-gradient(top, #eee, #ccc); - background-image: linear-gradient(top, #eee, #ccc); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); - border: 1px solid #777; - padding: 4px 10px; - margin: 0.5em; - font: bold Arial, Helvetica; - text-decoration: none; - color: #333; - text-shadow: 0 1px 0 rgba(255,255,255,.8); - -moz-border-radius: 8px; - -webkit-border-radius: 8px; border-radius: .2em; - -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); - -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); + padding: 4px 10px; box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } -.backLinkButton:hover +.viewNavigator_backButton:active { background-color: #ddd; - background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); - background-image: -webkit-linear-gradient(top, #fafafa, #ddd); - background-image: -moz-linear-gradient(top, #fafafa, #ddd); - background-image: -ms-linear-gradient(top, #fafafa, #ddd); - background-image: -o-linear-gradient(top, #fafafa, #ddd); - background-image: linear-gradient(top, #fafafa, #ddd); - filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } - - -.pressed, -.backLinkButton:active -{ - -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; - -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; - box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; - position: relative; - top: 1px; -} - -.backLinkButton:focus -{ - outline: 0; - background: #fafafa; -} - diff --git a/src/viewnavigator/viewnavigator.js b/src/viewnavigator/viewnavigator.js index 9d2906e..c031197 100644 --- a/src/viewnavigator/viewnavigator.js +++ b/src/viewnavigator/viewnavigator.js @@ -1,6 +1,6 @@ -var ViewNavigator = function( target ) { +var ViewNavigator = function( target, backLinkCSS, bindToWindow ) { this.supportsBackKey = true; //phonegap on android only this.animating = false; @@ -8,7 +8,7 @@ var ViewNavigator = function( target ) { this.animationDuration = 350; this.history = []; this.scroller = null; - this.headerPadding = 0; + this.headerPadding = 5; this.uniqueId = this.guid(); @@ -23,9 +23,20 @@ var ViewNavigator = function( target ) { this.parent = $( target ); + this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton"; + var self = this; - $(window).resize( function(event){ self.resizeContent() } ); - $(this.parent).resize( function(event){ self.resizeContent() } ); + //$(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 ) { @@ -92,7 +103,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { var linkGuid = this.guid(); if ( viewDescriptor.backLabel ) { - this.headerBacklink = $(''); + this.headerBacklink = $(''); this.headerContent.append( this.headerBacklink ); //this is for proper handling in splitviewnavigator @@ -199,7 +210,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) { } if ( viewDescriptor.backLabel ) { - new NoClickDelay( this.headerBacklink.get()[0] ); + //new NoClickDelay( this.headerBacklink.get()[0] ); } } @@ -212,7 +223,7 @@ ViewNavigator.prototype.resetScroller = function() { if ( this.scroller != null ) { this.scroller.destroy(); } - if ( id ) { + if ( id && !(this.currentViewDescriptor && this.currentViewDescriptor.scroll == false)) { var self = this; setTimeout( function() { self.scroller = new iScroll( id ); }, 10 ); //this.scroller = new iScroll( id );