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