cleaned up the code a bit, added some configurable sensetivity option…

…s and added an example
VinylFox · Jul 21, 2011 · 7f9bf8b · 7f9bf8b
1 parent 24a2411
commit 7f9bf8b
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 9 deletions.
diff --git a/README.rdoc b/README.rdoc
@@ -0,0 +1,12 @@
+== Ext.ux.touch.SwipeTabs
+
+A plugin that lets the user swipe between tabs in a TabPanel. No configuration is needed.
+
+= Sample Usage
+
+  {
+    xtype: 'tabpanel',
+    ...,
+    plugins: [new Ext.ux.touch.SwipeTabs()],
+    ...
+  }
diff --git a/examples/tabs/index.html b/examples/tabs/index.html
@@ -0,0 +1,110 @@
+<html>
+	<head>
+		<title>Useless Tweets</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="format-detection" content="address=no"/>
+    <link type="text/css" rel="stylesheet" href="../../../sencha-touch.css">
+    <script type="application/javascript" src="../../../sencha-touch-debug.js"></script>
+    <script type="application/javascript" src="../../src/Ext.ux.touch.AccelerometerTabs.js"></script>
+    <script type="application/javascript">
+    Ext.regApplication({
+        name: 'UselessTweets',
+        defaultTarget: 'viewport',
+        phoneStartupScreen: 'phone_startup.png',
+        icon: 'icon.png',
+        launch: function(){
+            new Ext.TabPanel({
+              fullscreen: true,
+              id: 'viewport',
+              application: this,
+              plugins: [new Ext.ux.touch.AccelerometerTabs({
+                threshold: 8,
+                buffer: 500
+              })],
+              activeItem: 0,
+                items: [{
+                    layout: 'fit',
+                    title: 'Foo Code',
+                    items: [{
+                        xtype: 'list',
+                        itemTpl: '{text}',
+                        store: UselessTweets.stores.Foos
+                    }]
+                },{
+                    layout: 'fit',
+                    title: 'IE Sucks',
+                    items: [{
+                        xtype: 'list',
+                        itemTpl: '{text}',
+                        store: UselessTweets.stores.IEs
+                    }]
+                },{
+                    layout: 'fit',
+                    title: 'Global Var',
+                    items: [{
+                        xtype: 'list',
+                        itemTpl: '{text}',
+                        store: UselessTweets.stores.Vars
+                    }]
+                }]
+            });
+        }
+    });
+
+    Ext.regModel('Twitter', {
+        fields: ['id','text']
+    });
+
+    UselessTweets.stores.Foos = new Ext.data.Store({
+        model: 'Twitter',
+        proxy: {
+            type: 'scripttag',
+            url: 'http://search.twitter.com/search.json',
+            extraParams: {
+              q: 'code+foo',
+              filters: []
+            },
+            reader: {
+                root: 'results'
+            }
+        },
+        autoLoad: true
+    });
+
+    UselessTweets.stores.IEs = new Ext.data.Store({
+        model: 'Twitter',
+        proxy: {
+            type: 'scripttag',
+            url: 'http://search.twitter.com/search.json',
+            extraParams: {
+              q: 'ie+sucks',
+              filters: []
+            },
+            reader: {
+                root: 'results'
+            }
+        },
+        autoLoad: true
+    });
+
+    UselessTweets.stores.Vars = new Ext.data.Store({
+        model: 'Twitter',
+        proxy: {
+            type: 'scripttag',
+            url: 'http://search.twitter.com/search.json',
+            extraParams: {
+              q: 'global+var',
+              filters: []
+            },
+            reader: {
+                root: 'results'
+            }
+        },
+        autoLoad: true
+    });
+    </script>
+	</head>
+	<body>
+	</body>
+</html>
diff --git a/src/Ext.ux.touch.AccelerometerTabs.js b/src/Ext.ux.touch.AccelerometerTabs.js
@@ -14,32 +14,48 @@ Ext.ns('Ext.ux.touch');
  * </code></pre>
  */
 Ext.ux.touch.AccelerometerTabs = Ext.extend(Ext.util.Observable, {
+  /**
+   * @cfg {Number} threshold This number specifies the amount of force needed to trigger a tab change.
+   */
+  threshold: 10,
+  /**
+   * @cfg {Number} buffer The number of milliseconds to wait after a motion event has been triggered before triggering the next. 
+   */
+  buffer: 1000,
+  /**
+   * @cfg {Number} pollmod The modulus of how often to inspect motion data to determine if a shake happened. 
+   */
+  pollmod: 10,
   // private
   flicked: false,
+  //private
   dmcnt: 0,
+  constructor: function(config){
+	Ext.apply(this, config || {});
+  },
   init: function(cmp){
-	var me = this;
     this.cmp = cmp;
     this.setFn = (Ext.versionDetail.major === 0) ? 'Card' : 'ActiveItem'; 
     cmp.on('render', this.initAccelerometerHandlers, this);
     window.addEventListener("devicemotion", Ext.createDelegate(this.deviceMotion,this), true);
   },
   // private
   deviceMotion: function(event) {
-  	if (this.dmcnt % 10 && event.acceleration){
-        if ((event.acceleration.x > 10 || event.acceleration.x < -10) && !this.flicked){
+  	if (this.dmcnt % this.pollmod && event.acceleration){
+  		var orientation = (Ext.Viewport.getOrientation() == 'landscape')?'y':'x';
+        if (!this.flicked && (event.acceleration[orientation] > this.threshold || event.acceleration[orientation] < (this.threshold*-1))){
           this.flicked = true;
           var ev = {
         	type: 'flick',
-        	direction: (event.acceleration.x < -10)?'left':'right'
+        	direction: (event.acceleration[orientation] < (this.threshold*-1))?'left':'right'
           };
           this.cmp.getActiveItem().fireEvent('devicemotion',ev);
-          setTimeout(function(){
+          setTimeout(Ext.createDelegate(function(){
             this.flicked = false;
-          },1000);
+          },this),this.buffer);
         }
     }
-	me.dmcnt++;
+	this.dmcnt++;
   },
   // private
   initAccelerometerHandlers: function(){
@@ -69,7 +85,6 @@ Ext.ux.touch.AccelerometerTabs = Ext.extend(Ext.util.Observable, {
   // private
   addAccelerometerLeft: function(itm, i){
     itm.on('devicemotion', function(ev) {
-    	console.log('devicemotion:'+ev.type+':'+ev.direction);
       if (ev.type == "flick" && ev.direction == "left") {
         this.cmp['set'+this.setFn](i + 1);
       }
@@ -78,7 +93,6 @@ Ext.ux.touch.AccelerometerTabs = Ext.extend(Ext.util.Observable, {
   // private
   addAccelerometerRight: function(itm, i){
     itm.on('devicemotion', function(ev) {
-    	console.log('devicemotion:'+ev.type+':'+ev.direction);
       if (ev.type == "flick" && ev.direction == "right") {
         this.cmp['set'+this.setFn](i - 1, {type : 'slide', direction : 'right'});
       }