Merge pull request #61 from Mango/feature-add-slideout-events

Add slideout events

Author: impronunciable

README.md

@@ -9,7 +9,7 @@
 - Native scrolling.
 - Easy customization.
 - CSS transforms & transitions.
-- Just 4 Kb!
+- Just 2 Kb! (min & gzip)
 
 ## Demo
 
@@ -210,14 +210,14 @@ var slideout = new Slideout({
 ```
 
 ### Slideout.open();
-Opens the slideout menu.
+Opens the slideout menu. It emits `beforeopen` and `open` events.
 
 ```js
 slideout.open();
 ```
 
 ### Slideout.close();
-Closes the slideout menu.
+Closes the slideout menu. It emits `beforeclose` and `close` events.
 
 ```js
 slideout.close();
@@ -237,6 +237,44 @@ Returns `true` if the slideout is currently open, and `false` if it is closed.
 slideout.isOpen(); // true or false
 ```
 
+### Slideout.on(event, listener);
+```js
+slideout.on('open', function() { ... });
+```
+
+### Slideout.once(event, listener);
+```js
+slideout.once('open', function() { ... });
+```
+
+### Slideout.off(event, listener);
+```js
+slideout.off('open', listener);
+```
+
+### Slideout.emit(event, ...data);
+```js
+slideout.emit('open');
+```
+
+## Events
+
+An instance of Slideout emits the following events:
+
+- `beforeclose`
+- `close`
+- `beforeopen`
+- `open`
+- `translate`
+
+The slideout emits `translate` event only when it is opening/closing via touch events.
+
+```js
+slideout.on('translate', function(translated) {
+  console.log(translated); // 120 in px
+});
+```
+
 ## npm-scripts
 ```
 $ npm run build

dist/slideout.js

@@ -4,6 +4,7 @@
  * Module dependencies
  */
 var decouple = require('decouple');
+var Emitter = require('emitter');
 
 /**
  * Privates
@@ -33,6 +34,17 @@ var prefix = (function prefix() {
   if ('KhtmlOpacity' in styleDeclaration) { return '-khtml-'; }
   return '';
 }());
+function extend(destination, from) {
+  for (var prop in from) {
+    if (from[prop]) {
+      destination[prop] = from[prop];
+    }
+  }
+  return destination;
+}
+function inherits(child, uber) {
+  child.prototype = extend(child.prototype || {}, uber.prototype);
+}
 
 /**
  * Slideout constructor
@@ -69,17 +81,24 @@ function Slideout(options) {
   }
 }
 
+/**
+ * Inherits from Emitter
+ */
+inherits(Slideout, Emitter);
+
 /**
  * Opens the slideout menu.
  */
 Slideout.prototype.open = function() {
   var self = this;
+  this.emit('beforeopen');
   if (html.className.search('slideout-open') === -1) { html.className += ' slideout-open'; }
   this._setTransition();
   this._translateXTo(this._padding);
   this._opened = true;
   setTimeout(function() {
     self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
+    self.emit('open');
   }, this._duration + 50);
   return this;
 };
@@ -90,12 +109,14 @@ Slideout.prototype.open = function() {
 Slideout.prototype.close = function() {
   var self = this;
   if (!this.isOpen() && !this._opening) { return this; }
+  this.emit('beforeclose');
   this._setTransition();
   this._translateXTo(0);
   this._opened = false;
   setTimeout(function() {
     html.className = html.className.replace(/ slideout-open/, '');
-    self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
+    self.panel.style.transition = self.panel.style['-webkit-transition'] = self.panel.style[prefix + 'transform'] = self.panel.style.transform = '';
+    self.emit('close');
   }, this._duration + 50);
   return this;
 };
@@ -215,7 +236,7 @@ Slideout.prototype._initTouchEvents = function() {
       }
 
       self.panel.style[prefix + 'transform'] = self.panel.style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
-
+      self.emit('translate', translateX);
       self._moved = true;
     }
 

dist/slideout.min.js

@@ -6,12 +6,13 @@
   "version": "0.1.6",
   "scripts": {
     "build": "node browserify.js",
-    "test": "npm run build && node_modules/.bin/_mocha",
+    "test": "npm run build && _mocha",
     "dist": "node browserify.js && uglifyjs ./dist/slideout.js -m -o ./dist/slideout.min.js",
     "hint": "jshint index.js"
   },
   "dependencies": {
-    "decouple": "0.0.1"
+    "decouple": "0.0.1",
+    "emitter": "git+https://github.com/Mango/emitter.git#0.0.4"
   },
   "devDependencies": {
     "better-assert": "1.0.1",
@@ -31,7 +32,8 @@
   "license": "MIT",
   "spm": {
     "dependencies": {
-      "decouple": "0.0.1"
+      "decouple": "0.0.1",
+      "emitter": "git+https://github.com/Mango/emitter.git#0.0.4"
     },
     "main": "index.js"
   }

index.js

@@ -8,11 +8,29 @@ if (exports) {
 }
 
 var doc = window.document;
+var beforeopenEvent = false;
+var openEvent = false;
+var beforecloseEvent = false;
+var closeEvent = false;
 var slideout = new Slideout({
   'panel': doc.getElementById('panel'),
   'menu': doc.getElementById('menu')
 });
 
+slideout
+  .on('beforeopen', function() {
+    beforeopenEvent = true;
+  })
+  .on('open', function() {
+    openEvent = true;
+  })
+  .on('beforeclose', function() {
+    beforecloseEvent = true;
+  })
+  .on('close', function() {
+    closeEvent = true;
+  });
+
 describe('Slideout', function () {
 
   it('should be defined.', function () {
@@ -28,7 +46,19 @@ describe('Slideout', function () {
   });
 
   describe('should have the following methods:', function () {
-    var methods = ['open', 'close', 'toggle', 'isOpen', '_initTouchEvents', '_translateXTo', '_setTransition'];
+    var methods = [
+      'open',
+      'close',
+      'toggle',
+      'isOpen',
+      '_initTouchEvents',
+      '_translateXTo',
+      '_setTransition',
+      'on',
+      'once',
+      'off',
+      'emit'
+    ];
     var i = 0;
     var len = methods.length;
     for (i; i < len; i += 1) {
@@ -89,6 +119,18 @@ describe('Slideout', function () {
     it('should set _opened to true.', function () {
       assert(slideout._opened === true);
     });
+
+    it('should emit "beforeopen" event.', function () {
+      assert(beforeopenEvent === true);
+    });
+
+    it('should emit "open" event.', function (done) {
+      setTimeout(function(){
+        assert(openEvent === true);
+        done();
+      }, 400);
+
+    });
   });
 
   describe('.isOpen()', function () {
@@ -109,14 +151,21 @@ describe('Slideout', function () {
     });
 
     it('should translateX the panel to 0.', function () {
-      var translate3d = exports ? 'translate3d(0px, 0, 0)' : 'translate3d(0px, 0px, 0px)';
-      assert(slideout.panel.style.transform === translate3d);
+      assert(slideout.panel.style.transform === '');
       assert(slideout.panel.style.transition === '');
     });
 
     it('should set _opened to false.', function () {
       assert(slideout._opened === false);
     });
+
+    it('should emit "beforeclose" event.', function () {
+      assert(beforecloseEvent === true);
+    });
+
+    it('should emit "close" event.', function () {
+      assert(closeEvent === true);
+    });
   });
 
   describe('.toggle()', function () {