initial commit

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = null

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+bower_components
+.DS_Store
+.vscode

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Zeb Zhao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# Drawer Swipe
+
+A minimalistic swipe gesture library for emulating Android drawer swipe as closely as possible. Compatible with ES6, RequireJS, or plain JavaScript.
+
+Even works for emulating notification swipes, card swipes, etc.
+
+The library works by defining a touch area element, and letting the user handle the transformations that occur when the element is touched and swiped. The library can be implemented with a variety of CSS frameworks as well as customized components.
+
+## Getting Started
+
+### Install the library
+  * with [bower](http://bower.io): ```bower install drawer-swipe```
+  * with [npm](https://www.npmjs.com): ```npm install drawer-swipe```
+
+### Load the library:
+
+* Browser Global
+```javascript
+var swiper = new DrawerSwipeRecognizer('#drawer');
+```
+
+* AMD
+```javascript
+define(['DrawerSwipeRecognizer'] , function (DrawerSwipeRecognizer) {
+  var swiper = new DrawerSwipeRecognizer('#drawer');
+});
+```
+
+* CommonJS
+```javascript
+var DrawerSwipeRecognizer = require('DrawerSwipeRecognizer');
+var swiper = new DrawerSwipeRecognizer('#drawer');
+```
+
+* ES2015 Modules (after npm install)
+```javascript
+import {DrawerSwipeRecognizer} from 'drawer-swipe-recognizer';
+var swiper = new DrawerSwipeRecognizer('#editor');
+```

bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "drawer-swipe",
+  "description": "Drawer Swipe is a minimalistic swipe detection library for emulating Android drawer swipe gestures.",
+  "main": "dist/drawer-swipe.js",
+  "authors": [
+    "Zeb Zhao"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "android",
+    "drawer",
+    "swipe",
+    "gesture",
+    "emulate",
+    "realistic"
+  ],
+  "homepage": "https://github.com/zebzhao/drawer-swipe#readme",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "gulpfile.js",
+    ".gitignore"
+  ],
+  "dependencies": {}
+}

dist/drawer-swipe.js

@@ -0,0 +1,199 @@
+;(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.DrawerSwipe = factory();
+  }
+}(this, function() {
+var DrawerSwipe = function (direction, element) {
+  var $this = this;
+  $this.percent = 0;
+  $this.lastTouch = null;
+  $this._buffer = [];
+  $this._bufferLength = 5;
+  $this._distanceX = 0;
+  $this.closeInProgress = false;
+  $this.positionThreshold = 60;
+  $this.speedThreshold = 30;
+  $this.minimumSpeed = 20;
+  $this.minimumPercentageThreshold = 5;
+  $this.direction = direction;
+  $this.beganPan = false;
+  $this.getWidth = function () { return 0 };
+  $this.onPanStart = function () { return true };
+  $this.onPan = function () { return true };
+  $this.onCompleteSwipe = function () {};
+  $this.onIncompleteSwipe = function () {};
+  $this.applyChanges = function () {};
+
+  element.addEventListener("touchmove", function (e) {
+    var firstTouch = e.touches[0];
+    if ($this.onPanStart(e)) {
+      if ($this.lastTouch) {
+        var deltaX = firstTouch.screenX - $this.lastTouch.screenX;
+        $this._distanceX += deltaX;
+        $this.addBuffer(deltaX);
+        $this.pan($this._distanceX);
+        $this.beganPan = true;
+      }
+      $this.lastTouch = firstTouch;
+    }
+  });
+
+  element.addEventListener("touchend", function (e) {
+    $this.lastTouch = null;
+    $this._distanceX = 0;
+
+    var maxValue = Math.max.apply(null, $this._buffer);
+    var minValue = Math.min.apply(null, $this._buffer);
+    $this._buffer.length = 0;
+
+    var leftToRight = $this.direction & DrawerSwipeDirection.LEFT_TO_RIGHT;
+    var rightToLeft = $this.direction & DrawerSwipeDirection.RIGHT_TO_LEFT;
+    var closeToRight = leftToRight && maxValue >= $this.speedThreshold;
+    var closeToLeft = rightToLeft && minValue <= -$this.speedThreshold;
+
+    if (Math.abs($this.percent) >= $this.positionThreshold || closeToRight || closeToLeft) {
+      $this.animate({
+        maxValue: closeToRight && maxValue,
+        minValue: closeToLeft && minValue
+      });
+    }
+    else if ($this.beganPan) {
+      $this.animate(null, true);
+    }
+  });
+};
+
+!(function () {
+  var raf = window.requestAnimationFrame || window.setImmediate || function(c) { return setTimeout(c, 0); };
+
+  DrawerSwipe.prototype = {
+    addBuffer: function (value) {
+      var buffer = this._buffer;
+      var bufferLength = this._bufferLength;
+      if (buffer.unshift(value) > bufferLength) buffer.length = bufferLength;
+    },
+
+    pan: function (distanceX) {
+      var $this = this;
+
+      if ($this.closeInProgress) {
+        return;
+      }
+      else if (!$this.onPan(distanceX)) {
+        $this.reset();
+        return;
+      }
+
+      var width = $this.getWidth();
+      var leftToRight = $this.direction & DrawerSwipeDirection.LEFT_TO_RIGHT;
+      var rightToLeft = $this.direction & DrawerSwipeDirection.RIGHT_TO_LEFT;
+      var percent = Math.round(distanceX / width * 100);
+
+      if (!(leftToRight && percent > 0 || rightToLeft && percent < 0)) {
+        percent = 0;
+      }
+
+      if (percent != $this.percent && Math.abs(percent) >= $this.minimumPercentageThreshold) {
+        if (Math.abs(percent) >= 100) {
+          $this.animate();
+        }
+        else {
+          $this.applyChanges(percent);
+          $this.percent = percent;
+        }
+      }
+    },
+
+    animate: function (speed, reverse, restart) {
+      var $this = this;
+      var width = $this.getWidth();
+
+      if (restart) {
+        $this.closeInProgress = false;
+        $this.percent = $this.direction == DrawerSwipeDirection.LEFT_TO_RIGHT ? 100 : -100;
+      }
+
+      if (!$this.closeInProgress) {
+        if (raf) {
+          $this.closeInProgress = true;
+          raf(update);
+        }
+        else {
+          $this.onCompleteSwipe();
+          $this.reset();
+        }
+      }
+
+      function update() {
+        var deltaPercent = 0;
+        var leftToRight = $this.direction & DrawerSwipeDirection.LEFT_TO_RIGHT;
+        var rightToLeft = $this.direction & DrawerSwipeDirection.RIGHT_TO_LEFT;
+
+        if (speed && speed.maxValue) {
+          deltaPercent = Math.max(speed.maxValue/3, $this.minimumSpeed)/width * 100;
+        }
+        else if (speed && speed.minValue) {
+          deltaPercent = Math.min(speed.minValue/3, -$this.minimumSpeed)/width * 100;
+        }
+        else if (leftToRight) {
+          deltaPercent = $this.minimumSpeed/width * (reverse ? -100 : 100);
+        }
+        else if (rightToLeft) {
+          deltaPercent = -$this.minimumSpeed/width * (reverse ? -100 : 100);
+        }
+        $this.percent += deltaPercent;
+        var percent = $this.percent;
+
+        if (leftToRight && percent >= 100) {
+          percent = 100;
+        }
+        else if (rightToLeft && percent <= -100) {
+          percent = -100;
+        }
+        else if (reverse) {
+          if (leftToRight && percent <= 0) {
+            percent = 0;
+          }
+          else if (rightToLeft && percent >= 0) {
+            percent = 0;
+          }
+        }
+
+        $this.percent = percent;
+        $this.applyChanges(percent);
+
+        if (Math.abs(percent) == 100) {
+          $this.reset();
+          $this.onCompleteSwipe();
+        }
+        else if (percent == 0) {
+          $this.reset();
+          $this.onIncompleteSwipe();
+        }
+        else {
+          raf(update);
+        }
+      }
+    },
+
+    reset: function () {
+      this.beganPan = false;
+      this.closeInProgress = false;
+    }
+  }
+
+  DrawerSwipe.Direction = {
+    LEFT_TO_RIGHT: 1,
+    LTR: 1,
+    RIGHT_TO_LEFT: 2,
+    RTL: 2,
+    BOTH: 3
+  };  
+}());
+
+return DrawerSwipe;
+}));

dist/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+var DrawerSwipe = require('./drawer-swipe');
+module.exports.DrawerSwipe = DrawerSwipe;

gulpfile.js

@@ -0,0 +1,30 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
+var umd = require('gulp-umd');
+var pump = require('pump');
+
+gulp.task('build', ['build-minify', 'build-debug']);
+
+gulp.task('build-debug', function () {
+  return gulp.src(['src/**/*.js'])
+    .pipe(concat('drawer-swipe.js'))
+    .pipe(umd({
+      exports: function (file) {
+        return 'DrawerSwipe';
+      },
+      namespace: function (file) {
+        return 'DrawerSwipe';
+      }
+    }))
+    .pipe(gulp.dest('./dist'));
+});
+
+gulp.task('build-minify', ['build-debug'], function (cb) {
+  pump([
+    gulp.src(['dist/drawer-swipe.js']),
+    concat('drawer-swipe.min.js'),
+    uglify(),
+    gulp.dest('./dist/')
+  ], cb);
+});

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "drawer-swipe",
+  "version": "0.1.0",
+  "description": "Drawer Swipe is a minimalistic swipe detection library for emulating Android drawer swipe gestures.",
+  "module": "dist/index.js",
+  "main": "dist/drawer-swipe.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zebzhao/drawer-swipe.git"
+  },
+  "keywords": [
+    "android",
+    "drawer",
+    "swipe",
+    "gesture",
+    "emulate",
+    "realistic"
+  ],
+  "author": "Zeb Zhao",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zebzhao/drawer-swipe/issues"
+  },
+  "homepage": "https://github.com/zebzhao/drawer-swipe#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-uglify": "^3.0.1",
+    "gulp-umd": "^2.0.0",
+    "pump": "^3.0.0",
+    "gh-pages": "^1.2.0"
+  },
+  "dependencies": {}
+}