mirror of
https://github.com/moparisthebest/app-UI
synced 2024-08-13 16:54:00 -04:00
lots of bug fixes and tweaks
This commit is contained in:
parent
8b84884406
commit
89de0830f1
@ -36,7 +36,9 @@ SlidingView.prototype.setupEventHandlers = function() {
|
|||||||
this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup';
|
this.END_EVENT = this.touchSupported ? 'touchend' : 'mouseup';
|
||||||
|
|
||||||
var self = this;
|
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) {
|
SlidingView.prototype.onTouchStart = function(event) {
|
||||||
@ -48,8 +50,8 @@ SlidingView.prototype.onTouchStart = function(event) {
|
|||||||
this.touchMoveHandler = function( event ){ self.onTouchMove(event) };
|
this.touchMoveHandler = function( event ){ self.onTouchMove(event) };
|
||||||
this.touchUpHandler = function( event ){ self.onTouchEnd(event) };
|
this.touchUpHandler = function( event ){ self.onTouchEnd(event) };
|
||||||
|
|
||||||
this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler );
|
this.body.get()[0].addEventListener( this.MOVE_EVENT, this.touchMoveHandler, false );
|
||||||
this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler );
|
this.body.get()[0].addEventListener( this.END_EVENT, this.touchUpHandler, false );
|
||||||
this.body.stop();
|
this.body.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -105,10 +107,17 @@ SlidingView.prototype.updateBasedOnTouchPoints = function( currentPosition ) {
|
|||||||
|
|
||||||
//console.log( targetX );
|
//console.log( targetX );
|
||||||
//this.body.css("left", targetX );
|
//this.body.css("left", targetX );
|
||||||
console.log( this.body.css("left") );
|
//console.log( this.body.css("left") );
|
||||||
if ( this.body.css("left") != "0px" );
|
|
||||||
|
if ( this.body.css("left") != "0px" ) {
|
||||||
this.body.css("left", "0px" );
|
this.body.css("left", "0px" );
|
||||||
|
}
|
||||||
this.body.css("-webkit-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 );
|
||||||
|
|
||||||
|
|
||||||
/*if ( currentPosition != targetX ) {
|
/*if ( currentPosition != targetX ) {
|
||||||
|
|
||||||
@ -150,8 +159,8 @@ SlidingView.prototype.snapToPosition = function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
SlidingView.prototype.unbindEvents = function() {
|
SlidingView.prototype.unbindEvents = function() {
|
||||||
this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler );
|
this.body.get()[0].removeEventListener( this.MOVE_EVENT, this.touchMoveHandler, false );
|
||||||
this.body.get()[0].removeEventListener( this.END_EVENT, this.touchUpHandler );
|
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.animating = false;
|
||||||
this.animationDuration = 350;
|
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.contentOverlay = $('<div class="content_overlay_hidden" id="overlay'+this.uniqueId+'"></div>');
|
||||||
this.bodyContainer = $('<div class="splitViewNavigator_body"></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.bodyContainer );
|
||||||
this.rootElement.append( this.contentOverlay );
|
this.rootElement.append( this.contentOverlay );
|
||||||
@ -27,11 +29,21 @@ var SplitViewNavigator = function( target, toggleButtonLabel ) {
|
|||||||
this.rootElement.append( this.sidebarContainer );
|
this.rootElement.append( this.sidebarContainer );
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
$(window).resize( function(event){ self.resizeContent() } );
|
|
||||||
$(this.parent).resize( function(event){ self.resizeContent() } );
|
|
||||||
|
|
||||||
if ( "onorientationchange" in window ) {
|
/*if ( "onorientationchange" in window ) {
|
||||||
$(window).bind( "onorientationchange", function(event){ self.resizeContent() } )
|
$(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();
|
this.resizeContent();
|
||||||
@ -49,6 +61,8 @@ var SplitViewNavigator = function( target, toggleButtonLabel ) {
|
|||||||
SplitViewNavigator.prototype.resizeContent = function() {
|
SplitViewNavigator.prototype.resizeContent = function() {
|
||||||
|
|
||||||
this.applyStylesByOrientation();
|
this.applyStylesByOrientation();
|
||||||
|
this.sidebarViewNavigator.resizeContent();
|
||||||
|
this.bodyViewNavigator.resizeContent()
|
||||||
}
|
}
|
||||||
|
|
||||||
SplitViewNavigator.prototype.applyStylesByOrientation = function() {
|
SplitViewNavigator.prototype.applyStylesByOrientation = function() {
|
||||||
@ -144,13 +158,6 @@ SplitViewNavigator.prototype.replaceBodyView = function( viewDescriptor ) {
|
|||||||
this.bodyViewNavigator.replaceView( 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;
|
overflow:hide;
|
||||||
padding:0px;
|
padding:0px;
|
||||||
|
|
||||||
|
background: #666;
|
||||||
/*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 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewNavigator_header_backlink {
|
.viewNavigator_header_backlink {
|
||||||
@ -62,7 +53,7 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
|
||||||
max-width:30%;
|
max-width:30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -70,10 +61,8 @@ body {
|
|||||||
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:12px;
|
top:12px;
|
||||||
left:0%;
|
left:0px;
|
||||||
right:0%;
|
right:0px;
|
||||||
margin-left:auto;
|
|
||||||
margin-right:auto;
|
|
||||||
text-align:center;
|
text-align:center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
@ -81,7 +70,6 @@ body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
|
||||||
|
|
||||||
max-width:48%;
|
max-width:48%;
|
||||||
}
|
}
|
||||||
@ -106,10 +94,10 @@ body {
|
|||||||
-webkit-transform: translate3d(0,0,0);
|
-webkit-transform: translate3d(0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewNavigator_content * {
|
.viewNavigator_content div {
|
||||||
|
|
||||||
-webkit-transform: translate3d(0,0,0);
|
-webkit-transform: translate3d(0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewNavigator_contentHolder {
|
.viewNavigator_contentHolder {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
@ -123,67 +111,32 @@ body {
|
|||||||
margin:0px;
|
margin:0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-overflow-scrolling : touch;
|
-webkit-overflow-scrolling : touch;
|
||||||
|
min-width:100%;
|
||||||
|
min-height:100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewNavigator_backface {
|
.viewNavigator_backface {
|
||||||
-webkit-backface-visibility: hidden;
|
-webkit-backface-visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*http://www.red-team-design.com/just-another-awesome-css3-buttons*/
|
.viewNavigator_backButtonPosition {
|
||||||
.backLinkButton
|
position:absolute;
|
||||||
|
left: 5px;
|
||||||
|
top: .6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewNavigator_backButton
|
||||||
{
|
{
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
background-color: #ccc;
|
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;
|
border-radius: .2em;
|
||||||
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
padding: 4px 10px;
|
||||||
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
|
||||||
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
|
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-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.supportsBackKey = true; //phonegap on android only
|
||||||
this.animating = false;
|
this.animating = false;
|
||||||
@ -8,7 +8,7 @@ var ViewNavigator = function( target ) {
|
|||||||
this.animationDuration = 350;
|
this.animationDuration = 350;
|
||||||
this.history = [];
|
this.history = [];
|
||||||
this.scroller = null;
|
this.scroller = null;
|
||||||
this.headerPadding = 0;
|
this.headerPadding = 5;
|
||||||
|
|
||||||
this.uniqueId = this.guid();
|
this.uniqueId = this.guid();
|
||||||
|
|
||||||
@ -23,9 +23,20 @@ var ViewNavigator = function( target ) {
|
|||||||
|
|
||||||
this.parent = $( target );
|
this.parent = $( target );
|
||||||
|
|
||||||
|
this.backLinkCSS = backLinkCSS ? backLinkCSS : "viewNavigator_backButton";
|
||||||
|
|
||||||
var self = this;
|
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() } );
|
$(window).resize( function(event){ self.resizeContent() } );
|
||||||
$(this.parent).resize( function(event){ self.resizeContent() } );
|
}
|
||||||
|
else {
|
||||||
|
this.parent.resize( function(event){ self.resizeContent() } );
|
||||||
|
}
|
||||||
|
|
||||||
this.parent.append( this.rootElement );
|
this.parent.append( this.rootElement );
|
||||||
|
|
||||||
if ( window.viewNavigators == null || window.viewNavigators == undefined ) {
|
if ( window.viewNavigators == null || window.viewNavigators == undefined ) {
|
||||||
@ -92,7 +103,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
|
|||||||
|
|
||||||
var linkGuid = this.guid();
|
var linkGuid = this.guid();
|
||||||
if ( viewDescriptor.backLabel ) {
|
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.headerContent.append( this.headerBacklink );
|
||||||
|
|
||||||
//this is for proper handling in splitviewnavigator
|
//this is for proper handling in splitviewnavigator
|
||||||
@ -199,7 +210,7 @@ ViewNavigator.prototype.updateView = function( viewDescriptor ) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if ( viewDescriptor.backLabel ) {
|
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 ) {
|
if ( this.scroller != null ) {
|
||||||
this.scroller.destroy();
|
this.scroller.destroy();
|
||||||
}
|
}
|
||||||
if ( id ) {
|
if ( id && !(this.currentViewDescriptor && this.currentViewDescriptor.scroll == false)) {
|
||||||
var self = this;
|
var self = this;
|
||||||
setTimeout( function() { self.scroller = new iScroll( id ); }, 10 );
|
setTimeout( function() { self.scroller = new iScroll( id ); }, 10 );
|
||||||
//this.scroller = new iScroll( id );
|
//this.scroller = new iScroll( id );
|
||||||
|
Loading…
Reference in New Issue
Block a user