Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fixed page and menu timeout hiding #5

Merged
merged 2 commits into from

2 participants

@cvrabie

No description provided.

@mjromper mjromper merged commit e9f4d44 into mjromper:cristian
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 24, 2012
  1. @cvrabie
  2. @cvrabie

    Update README.md

    cvrabie authored
This page is out of date. Refresh to see the latest.
Showing with 32 additions and 86 deletions.
  1. +1 −69 README.md
  2. +31 −17 jbackbone-mobile.js
View
70 README.md
@@ -2,72 +2,4 @@ jbackbone-mobile
================
Mobile Web App Framework for easy building Mobile Navigation Structures -> Just using native Javascript, HTML5 and CSS3.
-Working perfectly on iOS and Android devices.
-
-
-Main concepts:
--------------
-
-+ PAGES: one 'page' it is always linked from the Menu as an achor using its ID.
-+ SUB-PAGES, Level 1: one 'subpage level 1' could be linked from another PAGE using its ID, NEVER from the Menu.
-+ SUB-PAGES, Level 2: one 'subpage level 2' is always linked from another SUB-PAGE Level 1.
-...
-+ SUB-PAGES, Level N: one 'subpage level N' is always linked from another SUB-PAGE Level (N-1).
-
-
-So, A PAGE:
-- It should have a main DIV with a unique ID (i.e : 'sample-page').
-- As it is a PAGE referenced from Menu it must have JUST the 'block' class.
-- As it is a PAGE it should contains a "Menu button" in its header.
-- A page always has a 'section' where it contains the page content.
-- A page could contains one (or more) Link(s) to another SUBPAGE, then this SUBPAGE would be a supage level 1.
-
-Then, A SUB-PAGE:
-- It should have a main DIV with a unique ID (i.e : 'sample-subpage').
-- As it is a SUBPAGE referenced from another PAGE, it must have BOTH the 'block' and 'sub-block' classes.
-- As it is a SUBPAGEPAGE it should contain a "Back button" in its header.
-- A subpage always has a 'section' where it contains the subpage content.
-- A subpage could contains one (or more) Link(s) to another new SUB-PAGE, then this new SUB-PAGE would be a supage one level deeper.
-
-
-HOW TO USE IT
-------------------
-
-1.- Create an index.html page using the "index.html" sample code provided. Notice how to link the javascript library into the header section.
-
-2.- Add a javascript code in your header as this one, where to indicate which pages build your application.
-
- <script type="text/javascript">
- document.addEventListener("DOMContentLoaded", function () {
- /**
- IMPORTANT!!!!!
- 1. Read instructions before
- 2. JUST MODIFY THIS SECTION ADDING YOUR PAGES TO THE LIST BELOW
- **/
- var pages = [
-
- 'menu.html', /* This is how the menu should look like, IT SHOULD BE THE FIST PAGE in the list!!! */
- 'sample-page1.html', /* This is the fist page will be shown. Should be always following the menu */
-
-
- /* Rest of the pages. Don't worry about the order */
- 'sample-page2.html',
- 'sample-page3.html',
- 'sample-subpage-l1.html',
- 'sample-subpage-l2.html'
-
- ];
- /**
- END OF MODIFICATION SECTION
- **/
-
- jbackbone.loadAllStuff(pages);
-
- }, false);
-
- </script>
-
-3.- Implement as many PAGES and SUBPAGES as you want according the instructions given and examples provided.
-
-4.- HAVE FUN!!!
-
+Working perfectly on iOS and Android devices.
View
48 jbackbone-mobile.js
@@ -18,6 +18,7 @@ function JBackbone(){
this.width = 0;
this.box = null;
this.config = null;
+ this.timeouts = {};
this.ANIM_SLIDE_LEFT = "SLIDE_LEFT";
this.ANIM_SLIDE_RIGHT = "SLIDE_RIGHT";
@@ -34,6 +35,7 @@ JBackbone.prototype.init = function(config){
if(!config.DEFAULT_PAGE_ID) config.DEFAULT_PAGE_ID = "index";
if(!config.DEFAULT_MENU_ID) config.DEFAULT_MENU_ID = "menu-page"
if(!config.MENU_MARGIN) config.MENU_MARGIN = 100;
+ if(!config.HIDE_PAGE_TIMOUT) config.HIDE_PAGE_TIMOUT = 400;
var self = this; //save this so we can use it in closures
this.config = config;
@@ -96,12 +98,32 @@ JBackbone.prototype.goBack = function(){
this.notifyPageChange(oldPage, this.currentPage);
}
-JBackbone.prototype.hidePage = function(obj){
+JBackbone.prototype.hidePage = function(pageId){
+ var obj = document.getElementById(pageId);
obj.style.display = 'none';
obj.style.left = '-9999px';
}
+JBackbone.prototype.hidePageOnTimeout = function(pageId){
+ var self = this;
+ this.stopPageHide(pageId);
+ this.timeouts[pageId] = setTimeout(function(){
+ self.hidePage(pageId);
+ self.timeouts[pageId] = null;
+ }, this.config.HIDE_PAGE_TIMOUT);
+}
+
+JBackbone.prototype.stopPageHide = function(pageId){
+ if(this.timeouts[pageId]) {
+ clearTimeout(this.timeouts[pageId]);
+ this.timeouts[pageId] = null;
+ }
+}
+
JBackbone.prototype.swapPage = function(nextPage, animation){
+ //if we were about to hide the next page, don't!
+ this.stopPageHide(nextPage);
+
if(!animation) animation=this.ANIM_NONE;
var nextPageObject = document.getElementById(nextPage);
@@ -121,14 +143,8 @@ JBackbone.prototype.swapPage = function(nextPage, animation){
}
if(this.currentPage && this.currentPage!=nextPage){
- var currentPageObject = document.getElementById(this.currentPage);
- var self = this;
- if(animation!=this.ANIM_NONE){
- //needs to be done on timeout to leave the animation enough time to finish
- setTimeout(function(){ self.hidePage(currentPageObject); }, 1000);
- }else{
- self.hidePage(currentPageObject);
- }
+ if(animation!=this.ANIM_NONE) this.hidePageOnTimeout(this.currentPage);
+ else this.hidePage(this.currentPage);
}
}
@@ -158,6 +174,9 @@ JBackbone.prototype.showMenu = function(menuPage, config){
if(!menuPage) menuPage = this.config.DEFAULT_MENU_ID;
if(!config) config={};
if(!config.side) config.side = 'left';
+
+ //if we were about to hide this menu, then don't
+ this.stopPageHide(menuPage);
var menuObject = document.getElementById(menuPage);
@@ -178,17 +197,12 @@ JBackbone.prototype.showMenu = function(menuPage, config){
JBackbone.prototype.hideMenu = function(){
if(!this.menuVisible) return;
- var menuObject = document.getElementById(this.menuVisible);
- if(this.menuVisibleConfig.side=='right'){
- this.x -= (this.width-this.config.MENU_MARGIN);
- }else{
- this.x += (this.width-this.config.MENU_MARGIN);
- }
+ if(this.menuVisibleConfig.side=='right') this.x -= (this.width-this.config.MENU_MARGIN);
+ else this.x += (this.width-this.config.MENU_MARGIN);
this.box.style.left = '-'+this.x+'px';
- var self = this;
- setTimeout(function(){ self.hidePage(menuObject); }, 1000);
+ this.hidePageOnTimeout(this.menuVisible);
var menuPage = this.menuVisible;
var config = this.menuVisibleConfig;
Something went wrong with that request. Please try again.