From 45566b056cc52831f15a4ed85ebb7a7469ab0f04 Mon Sep 17 00:00:00 2001 From: Dan T Date: Thu, 9 Apr 2015 22:32:28 -0400 Subject: [PATCH 1/2] Adds toggle and enable/disable methods to the SlidingView, and provides example of both with the basic sample --- .../03 - slidingView/01 - basic/index.html | 27 ++++++- src/slidingview/slidingview.js | 71 ++++++++++++------- 2 files changed, 68 insertions(+), 30 deletions(-) mode change 100644 => 100755 samples/03 - slidingView/01 - basic/index.html mode change 100644 => 100755 src/slidingview/slidingview.js diff --git a/samples/03 - slidingView/01 - basic/index.html b/samples/03 - slidingView/01 - basic/index.html old mode 100644 new mode 100755 index c51fff9..052d8ef --- a/samples/03 - slidingView/01 - basic/index.html +++ b/samples/03 - slidingView/01 - basic/index.html @@ -15,7 +15,17 @@ $(document).ready( function() { //Setup the ViewNavigator - new SlidingView( 'sidebar', 'body' ); + var slider = new SlidingView( 'sidebar', 'body' ); + + $("#slide").click(function() { + slider.toggle(); + }); + $("#enable").click(function() { + slider.enable(); + }); + $("#disable").click(function() { + slider.disable(); + }); } ); @@ -31,12 +41,23 @@ background-color: white; padding:10px; } + #header { + background-color: green; + min-height:20px; + } + #wrapper { + top:25px; + } - -
+ +
body here!
diff --git a/src/slidingview/slidingview.js b/src/slidingview/slidingview.js old mode 100644 new mode 100755 index 8503acd..5a26929 --- a/src/slidingview/slidingview.js +++ b/src/slidingview/slidingview.js @@ -18,7 +18,7 @@ var SlidingView = function( sidebarId, bodyId ) { this.gestureStarted = false; this.bodyOffset = 0; - + this.enabled = true; this.sidebarWidth = 250; this.sidebar = $("#"+sidebarId); @@ -67,32 +67,34 @@ SlidingView.prototype.onTouchStart = function(event) { } SlidingView.prototype.onTouchMove = function(event) { - var currentPosition = this.getTouchCoordinates( event ); - - if ( this.gestureStarted ) { - event.preventDefault(); - event.stopPropagation(); - this.updateBasedOnTouchPoints( currentPosition ); - return; - } - else { - //console.log( Math.abs( currentPosition.x - this.gestureStartPosition.x ) ); - //detect the gesture - if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) { - - //dragging veritcally - ignore this gesture - this.unbindEvents(); - return; - } - else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) { - - //dragging horizontally - let's handle this - this.gestureStarted = true; + if (this.enabled) { + var currentPosition = this.getTouchCoordinates( event ); + + if ( this.gestureStarted ) { event.preventDefault(); event.stopPropagation(); this.updateBasedOnTouchPoints( currentPosition ); return; } + else { + //console.log( Math.abs( currentPosition.x - this.gestureStartPosition.x ) ); + //detect the gesture + if ( Math.abs( currentPosition.y - this.gestureStartPosition.y ) > 50 ) { + + //dragging veritcally - ignore this gesture + this.unbindEvents(); + return; + } + else if ( Math.abs( currentPosition.x - this.gestureStartPosition.x ) > 50 ) { + + //dragging horizontally - let's handle this + this.gestureStarted = true; + event.preventDefault(); + event.stopPropagation(); + this.updateBasedOnTouchPoints( currentPosition ); + return; + } + } } } @@ -177,14 +179,29 @@ SlidingView.prototype.slideView = function(targetX) { } SlidingView.prototype.close = function() { - this.bodyOffset = 0; - this.slideView(0); + if (this.enabled) { + this.bodyOffset = 0; + this.slideView(0); + } } SlidingView.prototype.open = function() { - if(this.bodyOffset == this.sidebarWidth) return; - this.bodyOffset = this.sidebarWidth; - this.slideView(this.sidebarWidth); + if (this.enabled) { + if(this.bodyOffset == this.sidebarWidth) return; + this.bodyOffset = this.sidebarWidth; + this.slideView(this.sidebarWidth); + } +} + +SlidingView.prototype.toggle = function() { + (this.bodyOffset < this.sidebarWidth) ? this.open() : this.close(); +} + +SlidingView.prototype.enable = function () { + this.enabled = true; +} +SlidingView.prototype.disable = function () { + this.enabled = false; } SlidingView.prototype.unbindEvents = function() { From 266a9fa287fdb1b75212c00071dbacd682619e6e Mon Sep 17 00:00:00 2001 From: Dan T Date: Tue, 5 May 2015 19:15:58 -0400 Subject: [PATCH 2/2] Adds a sample using BackboneJS to render viewnavigator. Adds function to viewNavigator to replace the current view with the Root view, clearing the history stack. This will work for circular navigation, e.g. Screen A -> B -> C -> A. --- .../01 - basic/index.html | 19 ++++ .../01 - basic/main.js | 86 +++++++++++++++++++ .../backbone-min.js | 2 + .../underscore-min.js | 6 ++ src/viewnavigator/viewnavigator.js | 14 +++ 5 files changed, 127 insertions(+) create mode 100755 samples/06 - backbonejs viewnavigator/01 - basic/index.html create mode 100755 samples/06 - backbonejs viewnavigator/01 - basic/main.js create mode 100755 samples/06 - backbonejs viewnavigator/backbone-min.js create mode 100755 samples/06 - backbonejs viewnavigator/underscore-min.js mode change 100644 => 100755 src/viewnavigator/viewnavigator.js diff --git a/samples/06 - backbonejs viewnavigator/01 - basic/index.html b/samples/06 - backbonejs viewnavigator/01 - basic/index.html new file mode 100755 index 0000000..d91c9d2 --- /dev/null +++ b/samples/06 - backbonejs viewnavigator/01 - basic/index.html @@ -0,0 +1,19 @@ + + + + View Navigator Backbone Sample + + + + + + + + + + + + + + + diff --git a/samples/06 - backbonejs viewnavigator/01 - basic/main.js b/samples/06 - backbonejs viewnavigator/01 - basic/main.js new file mode 100755 index 0000000..28bc82a --- /dev/null +++ b/samples/06 - backbonejs viewnavigator/01 - basic/main.js @@ -0,0 +1,86 @@ +var BackboneView = Backbone.View.extend({ + backLabel: null, + + /** + * ViewNavigator hook for when page is loaded/resumed + */ + showCallback: function () { + // refresh view + this.render(); + }, + + events: { + + }, + + /** + * Initialize called once when view created + */ + initialize: function(string, viewId) { + this.string = string; + this.title = "Title: " + viewId; + this.view = this.$el; + this.numRenders = 0; + }, + + /** + * Render needs to be called when ViewNavigator fires ShowCompleted + */ + render: function() { + this.numRenders++; + var bodyView = $('
Rendered ' + this.numRenders + ' times
  • push view
  • pop view
  • replace view
  • replace with home view
    • ' + this.string + '
    '); + this.$el.html(bodyView); + //alert("rendered: " + this.viewId); + return this; + }, + + showCallback: function () { + this.render(); + } + +}); + +$(document).ready( function() { + + //Setup the default view + var myView = new BackboneView(getMeat(), Math.random().toString()); + + //Setup the ViewNavigator + window.viewNavigator = new ViewNavigator( 'body' ); + window.viewNavigator.pushView( myView ); + + +} ); + +function pushView() { + //create a view and push it onto the view navigator + var view = new BackboneView(getMeat(), Math.random().toString()); + window.viewNavigator.pushView( view ); +} + +function replaceView() { + //create a new view and replace the current view + var view = new BackboneView(getMeat(), Math.random().toString()); + window.viewNavigator.replaceView( view ); +} + +function replaceWithRootView() { + // clear the view stack down to the root view + window.viewNavigator.jumpHome(); +} + +function popView() { + //pop a view from the view navigator + window.viewNavigator.popView(); +} + +function getMeat() { + //randomly generate content + //text string generated by http://baconipsum.com/ + var iterations = 1 + parseInt(Math.random() * 25); + var result = ""; + for ( var i = 0; i < iterations; i ++ ) { + result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.
    " + } + return result; +} \ No newline at end of file diff --git a/samples/06 - backbonejs viewnavigator/backbone-min.js b/samples/06 - backbonejs viewnavigator/backbone-min.js new file mode 100755 index 0000000..8ea4b13 --- /dev/null +++ b/samples/06 - backbonejs viewnavigator/backbone-min.js @@ -0,0 +1,2 @@ +(function(t,e){if(typeof define==="function"&&define.amd){define(["underscore","jquery","exports"],function(i,r,s){t.Backbone=e(t,s,i,r)})}else if(typeof exports!=="undefined"){var i=require("underscore");e(t,exports,i)}else{t.Backbone=e(t,{},t._,t.jQuery||t.Zepto||t.ender||t.$)}})(this,function(t,e,i,r){var s=t.Backbone;var n=[];var a=n.push;var o=n.slice;var h=n.splice;e.VERSION="1.1.2";e.$=r;e.noConflict=function(){t.Backbone=s;return this};e.emulateHTTP=false;e.emulateJSON=false;var u=e.Events={on:function(t,e,i){if(!c(this,"on",t,[e,i])||!e)return this;this._events||(this._events={});var r=this._events[t]||(this._events[t]=[]);r.push({callback:e,context:i,ctx:i||this});return this},once:function(t,e,r){if(!c(this,"once",t,[e,r])||!e)return this;var s=this;var n=i.once(function(){s.off(t,n);e.apply(this,arguments)});n._callback=e;return this.on(t,n,r)},off:function(t,e,r){var s,n,a,o,h,u,l,f;if(!this._events||!c(this,"off",t,[e,r]))return this;if(!t&&!e&&!r){this._events=void 0;return this}o=t?[t]:i.keys(this._events);for(h=0,u=o.length;h").attr(t);this.setElement(r,false)}else{this.setElement(i.result(this,"el"),false)}}});e.sync=function(t,r,s){var n=T[t];i.defaults(s||(s={}),{emulateHTTP:e.emulateHTTP,emulateJSON:e.emulateJSON});var a={type:n,dataType:"json"};if(!s.url){a.url=i.result(r,"url")||M()}if(s.data==null&&r&&(t==="create"||t==="update"||t==="patch")){a.contentType="application/json";a.data=JSON.stringify(s.attrs||r.toJSON(s))}if(s.emulateJSON){a.contentType="application/x-www-form-urlencoded";a.data=a.data?{model:a.data}:{}}if(s.emulateHTTP&&(n==="PUT"||n==="DELETE"||n==="PATCH")){a.type="POST";if(s.emulateJSON)a.data._method=n;var o=s.beforeSend;s.beforeSend=function(t){t.setRequestHeader("X-HTTP-Method-Override",n);if(o)return o.apply(this,arguments)}}if(a.type!=="GET"&&!s.emulateJSON){a.processData=false}if(a.type==="PATCH"&&k){a.xhr=function(){return new ActiveXObject("Microsoft.XMLHTTP")}}var h=s.xhr=e.ajax(i.extend(a,s));r.trigger("request",r,h,s);return h};var k=typeof window!=="undefined"&&!!window.ActiveXObject&&!(window.XMLHttpRequest&&(new XMLHttpRequest).dispatchEvent);var T={create:"POST",update:"PUT",patch:"PATCH","delete":"DELETE",read:"GET"};e.ajax=function(){return e.$.ajax.apply(e.$,arguments)};var $=e.Router=function(t){t||(t={});if(t.routes)this.routes=t.routes;this._bindRoutes();this.initialize.apply(this,arguments)};var S=/\((.*?)\)/g;var H=/(\(\?)?:\w+/g;var A=/\*\w+/g;var I=/[\-{}\[\]+?.,\\\^$|#\s]/g;i.extend($.prototype,u,{initialize:function(){},route:function(t,r,s){if(!i.isRegExp(t))t=this._routeToRegExp(t);if(i.isFunction(r)){s=r;r=""}if(!s)s=this[r];var n=this;e.history.route(t,function(i){var a=n._extractParameters(t,i);n.execute(s,a);n.trigger.apply(n,["route:"+r].concat(a));n.trigger("route",r,a);e.history.trigger("route",n,r,a)});return this},execute:function(t,e){if(t)t.apply(this,e)},navigate:function(t,i){e.history.navigate(t,i);return this},_bindRoutes:function(){if(!this.routes)return;this.routes=i.result(this,"routes");var t,e=i.keys(this.routes);while((t=e.pop())!=null){this.route(t,this.routes[t])}},_routeToRegExp:function(t){t=t.replace(I,"\\$&").replace(S,"(?:$1)?").replace(H,function(t,e){return e?t:"([^/?]+)"}).replace(A,"([^?]*?)");return new RegExp("^"+t+"(?:\\?([\\s\\S]*))?$")},_extractParameters:function(t,e){var r=t.exec(e).slice(1);return i.map(r,function(t,e){if(e===r.length-1)return t||null;return t?decodeURIComponent(t):null})}});var N=e.History=function(){this.handlers=[];i.bindAll(this,"checkUrl");if(typeof window!=="undefined"){this.location=window.location;this.history=window.history}};var R=/^[#\/]|\s+$/g;var O=/^\/+|\/+$/g;var P=/msie [\w.]+/;var C=/\/$/;var j=/#.*$/;N.started=false;i.extend(N.prototype,u,{interval:50,atRoot:function(){return this.location.pathname.replace(/[^\/]$/,"$&/")===this.root},getHash:function(t){var e=(t||this).location.href.match(/#(.*)$/);return e?e[1]:""},getFragment:function(t,e){if(t==null){if(this._hasPushState||!this._wantsHashChange||e){t=decodeURI(this.location.pathname+this.location.search);var i=this.root.replace(C,"");if(!t.indexOf(i))t=t.slice(i.length)}else{t=this.getHash()}}return t.replace(R,"")},start:function(t){if(N.started)throw new Error("Backbone.history has already been started");N.started=true;this.options=i.extend({root:"/"},this.options,t);this.root=this.options.root;this._wantsHashChange=this.options.hashChange!==false;this._wantsPushState=!!this.options.pushState;this._hasPushState=!!(this.options.pushState&&this.history&&this.history.pushState);var r=this.getFragment();var s=document.documentMode;var n=P.exec(navigator.userAgent.toLowerCase())&&(!s||s<=7);this.root=("/"+this.root+"/").replace(O,"/");if(n&&this._wantsHashChange){var a=e.$('