Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…s and added an example
  • Loading branch information...
commit 7f9bf8bd1699a9285730a02b5ca5406db3ce85c8 1 parent 24a2411
Shea Frederick authored
12 README.rdoc
View
@@ -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()],
+ ...
+ }
110 examples/tabs/index.html
View
@@ -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>
32 src/Ext.ux.touch.AccelerometerTabs.js
View
@@ -14,11 +14,26 @@ 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);
@@ -26,20 +41,21 @@ Ext.ux.touch.AccelerometerTabs = Ext.extend(Ext.util.Observable, {
},
// 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'});
}
Please sign in to comment.
Something went wrong with that request. Please try again.