Add swipe gesture to menu

Joshua Smith · Joshua Smith · commit 6f024de850d7 · 2013-12-19T10:05:54.000-05:00
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
   <script type="text/javascript" src="scripts/lib/lang-css.js"></script>
   <script type="text/javascript" src="scripts/lib/lang-wiki.js"></script>
   <script type="text/javascript" src="scripts/lib/stringview.js"></script>
-  <script type="text/javascript" src="scripts/lib/bugsense.js"></script>
+  <!--<script type="text/javascript" src="scripts/lib/bugsense.js"></script>-->
 
   <!-- Parsers -->
   <script type="text/javascript" src="scripts/parsers/base64.js"></script>
@@ -76,7 +76,7 @@
 <body role="application">
   <div class="spinner center" id="loadSpinner" style="z-index: 1000;"><div></div></div>
 
-  <section data-type="sidebar" id="sidebar_welcome">
+  <section data-type="sidebar" id="sidebar_welcome" data-swipe-left="sidebar" data-swipe-left-id="welcome">
     <header>
       <h1>Menu</h1>
     </header>
@@ -106,9 +106,11 @@ <h2>Other</h2>
     </nav>
   </section>
   
-  <section role="region" id="welcome">
+  <section role="region" id="welcome" 
+  	data-swipe-right="sidebar" data-swipe-right-id="welcome" data-swipe-right-state="open" 
+  	data-swipe-left="sidebar" data-swipe-left-id="welcome" data-swipe-left-state="close">
     <header>
-      <button data-click="sidebar" data-click-id="welcome"><span class="icon icon-menu"></span></button>
+      <button data-click="sidebar" data-click-id="welcome" class="drawerEnabled"><span class="icon icon-menu"></span></button>
       <menu type="toolbar">
         <button data-click="nav" data-click-location="add"><span class="icon icon-create"></span></button>
       </menu>
@@ -201,7 +203,7 @@ <h2>Documents on Dropbox</h2>
   </section>
   <div class="background"></div>
   
-  <section data-type="sidebar" id="sidebar_main" data-position="right">
+  <section data-type="sidebar" id="sidebar_main" data-position="right" data-swipe-right="sidebar" data-swipe-right-id="main">
     <header>
       <h1>Menu</h1>
     </header>
@@ -233,13 +235,15 @@ <h2>Other</h2>
     </nav>
   </section>
   
-  <section role="region" id="edit">
+  <section role="region" id="edit" 
+  	data-swipe-left="sidebar" data-swipe-left-id="main" data-swipe-left-state="open"
+  	data-swipe-right="sidebar" data-swipe-right-id="main" data-swipe-right-state="close">
     <header>
       <button data-click="closeFile"><span class="icon icon-close"></span></button>
       <menu type="toolbar">
         <button data-click="saveFromEditor" id="editorSaveButton"><span class="icon icon-save"></span></button>
         <button data-click="fullscreen"><span class="icon icon-fs"></span></button>
-        <button data-click="sidebar" data-click-id="main"><span class="icon icon-menu"></span></button>
+        <button data-click="sidebar" data-click-id="main" class="drawerEnabled"><span class="icon icon-menu"></span></button>
       </menu>
       <h1><span id="currentFileLocation" style="display:none;"></span><span id="currentFileDirectory" style="display:none;"></span><span id="currentFileName"></span><span id="currentFileType"></span></h1>
     </header>
diff --git a/scripts/firetext.js b/scripts/firetext.js
@@ -47,10 +47,13 @@ window.addEventListener('DOMContentLoaded', function () { firetext.init(); });
 
 firetext.init = function () {
   // Initialize Bugsense
-  bugsenseInit();
+  //bugsenseInit();
 
   // Find device type
   checkDevice();
+  
+  // Initialize gestures
+  initGestures();
 
   /* Select important elements for later */
   // Misc
@@ -215,14 +218,14 @@ function updateAddDialog() {
 
 
 /* Bugsense
-------------------------*/
+------------------------
 function bugsenseInit() {
   if (firetext.settings.get('stats.enabled') != 'false') {
     bugsense = new Bugsense({ appversion: '0.3.1', apiKey: '' });
   } else {
     bugsense = null;
   }
-}
+}*/
 
 
 /* Doc lists
@@ -909,6 +912,13 @@ document.addEventListener('blur', function(event) {
   processActions('data-blur', event.target);
 });
 
+function initGestures () {
+  new GestureDetector(document.body).startDetecting();
+  document.body.addEventListener('swipe', function (event) {
+    processActions(('data-swipe-'+event.detail.direction), event.target);  
+  });
+}
+
 function processActions(eventAttribute, target) {
   if (target && target.getAttribute) {
     if (target.hasAttribute(eventAttribute) != true) {
@@ -931,7 +941,7 @@ function processActions(eventAttribute, target) {
     } else if (calledFunction == 'navBack') {
       regions.navBack();
     } else if (calledFunction == 'sidebar') {
-      regions.sidebar(target.getAttribute(eventAttribute + '-id'));
+      regions.sidebar(target.getAttribute(eventAttribute + '-id'), target.getAttribute(eventAttribute + '-state'));
     } else if (calledFunction == 'saveFromEditor') {
       saveFromEditor(true, true);
     } else if (calledFunction == 'closeFile') {
diff --git a/scripts/lib/gesture_detector.js b/scripts/lib/gesture_detector.js
@@ -34,6 +34,9 @@
  * also pass an optional object as the second constructor argument. If you're
  * interested in holdstart/holdmove/holdend events, pass {holdEvents:true} as
  * this second argument. Otherwise they will not be generated.
+ * If you want to customize the pan threshold, pass
+ * {panThreshold:X, mousePanThreshold:Y} (X and Y in pixels) in the options
+ * argument.
  *
  * Implementation note: event processing is done with a simple finite-state
  * machine. This means that in general, the various kinds of gestures are
@@ -58,6 +61,9 @@ var GestureDetector = (function() {
   function GD(e, options) {
     this.element = e;
     this.options = options || {};
+    this.options.panThreshold = this.options.panThreshold || GD.PAN_THRESHOLD;
+    this.options.mousePanThreshold =
+      this.options.mousePanThreshold || GD.MOUSE_PAN_THRESHOLD;
     this.state = initialState;
     this.timers = {};
     this.listeningForMouseEvents = true;
@@ -159,7 +165,7 @@ var GestureDetector = (function() {
     var event = this.element.ownerDocument.createEvent('CustomEvent');
     event.initCustomEvent(type, true, true, detail);
     this.target.dispatchEvent(event);
-  }
+  };
 
   //
   // Tuneable parameters
@@ -363,8 +369,8 @@ var GestureDetector = (function() {
       if (t.identifier !== d.touch1)
         return;
 
-      if (abs(t.screenX - d.start.screenX) > GD.PAN_THRESHOLD ||
-          abs(t.screenY - d.start.screenY) > GD.PAN_THRESHOLD) {
+      if (abs(t.screenX - d.start.screenX) > d.options.panThreshold ||
+          abs(t.screenY - d.start.screenY) > d.options.panThreshold) {
         d.clearTimer('holdtimeout');
         d.switchTo(panStartedState, e, t);
       }
@@ -711,8 +717,8 @@ var GestureDetector = (function() {
       // then switch to the mouse panning state. Otherwise remain
       // in this state
 
-      if (abs(e.screenX - d.start.screenX) > GD.MOUSE_PAN_THRESHOLD ||
-          abs(e.screenY - d.start.screenY) > GD.MOUSE_PAN_THRESHOLD) {
+      if (abs(e.screenX - d.start.screenX) > d.options.mousePanThreshold ||
+          abs(e.screenY - d.start.screenY) > d.options.mousePanThreshold) {
         d.clearTimer('holdtimeout');
         d.switchTo(mousePannedState, e);
       }
diff --git a/scripts/regions.js b/scripts/regions.js
@@ -99,9 +99,10 @@ regions.navBack = function () {
   regions.nav(regions.history.pop());
 }
 
-regions.sidebar = function (name) {
+regions.sidebar = function (name, state) {
   if (document.getElementById('sidebar_' + name) && document.querySelector('.current')) {
-    if (document.querySelector('.current').getAttribute('data-state') == 'drawer') {
+    if ((state && (state != 'open' || state == 'close')) || 
+    	(!state && document.querySelector('.current').getAttribute('data-state') == 'drawer')) {
       document.getElementById('sidebar_' + name).classList.remove('active');
       document.querySelector('.current').setAttribute('data-state', 'none');
     } else {
diff --git a/style/bb/action_menu.css b/style/bb/action_menu.css
@@ -16,17 +16,16 @@ section[role="object"] {
   right: 0;
   bottom: 0;
   padding: 0 0 7rem;
-  transform: scale(2, 2);
-    -moz-transform: scale(2, 2);
-    -webkit-transform: scale(2, 2);
-    -o-transform: scale(2, 2);
-    -ms-transform: scale(2, 2);
-  opacity: 0;
+    -moz-transform: translateY(100%);
+    -webkit-transform: translateY(100%);
+    -o-transform: translateY(100%);
+    -ms-transform: translateY(100%);
+  transform: translateY(100%);
+    -moz-transition: all .4s ease;
+    -webkit-transition: all .4s ease;
+    -o-transition: all .4s ease;
+  transition: all .4s ease;
   pointer-events: none;
-  transition: all .4s;
-    -moz-transition: all .4s;
-    -webkit-transition: all .4s;
-    -o-transition: all .4s;
   /**
    * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created
    * by white spaces and line breaks in the code between inline-block elements.
@@ -40,11 +39,11 @@ section[role="object"].current,
 section[role="action"].parent,
 section[role="object"].parent {
   opacity: 1;
-  transform: none;
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
     -ms-transform: none;
+  transform: none;
   pointer-events: auto;
 }
 
diff --git a/style/bb/status.css b/style/bb/status.css
@@ -3,7 +3,6 @@
  * ---------------------------------- */
 section[role="status"] {
   background: #dfdfdf;
-  background-size: auto auto, 100% 100%;
   overflow: hidden;
   position: absolute;
   z-index: 100;
@@ -25,7 +24,7 @@ section[role="status"] p {
   font-size: 1.6rem;
   line-height: 1.4em;
   max-width: 75%;
-  margin: 1rem 0;
+  margin: 0;
   text-align: left;
 }
 
diff --git a/style/regions.css b/style/regions.css
@@ -96,6 +96,14 @@ section[role="dialog"].current {
   transform: translateX(80%) !important;
 }
 
+[data-state="drawer"].current > *:not(.drawerEnabled) {
+  pointer-events: none;   
+}
+
+[data-state="drawer"].current .drawerEnabled {
+  pointer-events: all;
+}
+
 [data-state="drawer"][data-position="right"].current {
     -moz-transform: translateX(-80%) !important;
     -webkit-transform: translateX(-80%) !important;
