lots of bug fixes and tweaks
This commit is contained in:
Andrew Trice
parent
8b84884406
commit
89de0830f1
|
|
@ -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 );
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
|
||||
this.bodyContainer = $('<div class="splitViewNavigator_body"></div>');
|
||||
|
||||
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 = $('<li class="viewNavigator_header_backlink backLinkButton hidden" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
|
||||
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
|
||||
|
||||
this.toggleSidebarButton = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + backLinkCSS + '" id="toggle' + this.uniqueId + '" onclick="window.splitViewNavigator.showSidebar()">'+toggleButtonLabel+'</li>');
|
||||
|
||||
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 );
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = $('<li class="viewNavigator_header_backlink backLinkButton" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
|
||||
this.headerBacklink = $('<li class="viewNavigator_header_backlink viewNavigator_backButtonPosition ' + this.backLinkCSS +'" id="link' + linkGuid + '" onclick="window.viewNavigators[\'' + this.uniqueId + '\'].popView()">'+ viewDescriptor.backLabel + '</li>');
|
||||
this.headerContent.append( this.headerBacklink );
|
||||
|
||||
//this is for proper handling in splitviewnavigator
|
||||
|
|
@ -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 );
|
||||
|
|
|
|||
Loading…
Reference in New Issue