diff --git a/README.md b/README.md index eb344db..10c3141 100644 --- a/README.md +++ b/README.md @@ -299,14 +299,28 @@ An instance of Slideout emits the following events: - `close` - `beforeopen` - `open` +- `translatestart` - `translate` +- `translateend` -The slideout emits `translate` event only when it is opening/closing via touch events. +The slideout emits `translatestart`, `translate` and `translateend` events only when it is opening/closing via touch events. ```js +slideout.on('translatestart', function() { + console.log('Start'); +}); + slideout.on('translate', function(translated) { - console.log(translated); // 120 in px + console.log('Translate: ' + translated); // 120 in px }); + +slideout.on('translateend', function() { + console.log('End'); +}); + +// 'Start' +// 'Translate 120' +// 'End' ``` ## npm-scripts diff --git a/index.js b/index.js index e85cf9c..c06f7f9 100644 --- a/index.js +++ b/index.js @@ -218,6 +218,7 @@ Slideout.prototype._initTouchEvents = function() { */ this._onTouchEndFn = function() { if (self._moved) { + self.emit('translateend'); (self._opening && Math.abs(self._currentOffsetX) > self._tolerance) ? self.open() : self.close(); } self._moved = false; @@ -251,6 +252,10 @@ Slideout.prototype._initTouchEvents = function() { return; } + if (!self._moved) { + self.emit('translatestart'); + } + if (oriented_dif_x <= 0) { translateX = dif_x + self._padding * self._orientation; self._opening = false;