Skip to content

Commit 2b61aed

Browse files
impronunciableimpronunciable
committed
Merge pull request Mango#61 from Mango/feature-add-slideout-events
Add slideout events
2 parents 98c8301 + ae9a445 commit 2b61aed

6 files changed

Lines changed: 301 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
- Native scrolling.
1010
- Easy customization.
1111
- CSS transforms & transitions.
12-
- Just 4 Kb!
12+
- Just 2 Kb! (min & gzip)
1313

1414
## Demo
1515

@@ -210,14 +210,14 @@ var slideout = new Slideout({
210210
```
211211

212212
### Slideout.open();
213-
Opens the slideout menu.
213+
Opens the slideout menu. It emits `beforeopen` and `open` events.
214214

215215
```js
216216
slideout.open();
217217
```
218218

219219
### Slideout.close();
220-
Closes the slideout menu.
220+
Closes the slideout menu. It emits `beforeclose` and `close` events.
221221

222222
```js
223223
slideout.close();
@@ -237,6 +237,44 @@ Returns `true` if the slideout is currently open, and `false` if it is closed.
237237
slideout.isOpen(); // true or false
238238
```
239239

240+
### Slideout.on(event, listener);
241+
```js
242+
slideout.on('open', function() { ... });
243+
```
244+
245+
### Slideout.once(event, listener);
246+
```js
247+
slideout.once('open', function() { ... });
248+
```
249+
250+
### Slideout.off(event, listener);
251+
```js
252+
slideout.off('open', listener);
253+
```
254+
255+
### Slideout.emit(event, ...data);
256+
```js
257+
slideout.emit('open');
258+
```
259+
260+
## Events
261+
262+
An instance of Slideout emits the following events:
263+
264+
- `beforeclose`
265+
- `close`
266+
- `beforeopen`
267+
- `open`
268+
- `translate`
269+
270+
The slideout emits `translate` event only when it is opening/closing via touch events.
271+
272+
```js
273+
slideout.on('translate', function(translated) {
274+
console.log(translated); // 120 in px
275+
});
276+
```
277+
240278
## npm-scripts
241279
```
242280
$ npm run build

‎dist/slideout.js‎

Lines changed: 179 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/slideout.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* Module dependencies
55
*/
66
var decouple = require('decouple');
7+
var Emitter = require('emitter');
78

89
/**
910
* Privates
@@ -33,6 +34,17 @@ var prefix = (function prefix() {
3334
if ('KhtmlOpacity' in styleDeclaration) { return '-khtml-'; }
3435
return '';
3536
}());
37+
function extend(destination, from) {
38+
for (var prop in from) {
39+
if (from[prop]) {
40+
destination[prop] = from[prop];
41+
}
42+
}
43+
return destination;
44+
}
45+
function inherits(child, uber) {
46+
child.prototype = extend(child.prototype || {}, uber.prototype);
47+
}
3648

3749
/**
3850
* Slideout constructor
@@ -69,17 +81,24 @@ function Slideout(options) {
6981
}
7082
}
7183

84+
/**
85+
* Inherits from Emitter
86+
*/
87+
inherits(Slideout, Emitter);
88+
7289
/**
7390
* Opens the slideout menu.
7491
*/
7592
Slideout.prototype.open = function() {
7693
var self = this;
94+
this.emit('beforeopen');
7795
if (html.className.search('slideout-open') === -1) { html.className += ' slideout-open'; }
7896
this._setTransition();
7997
this._translateXTo(this._padding);
8098
this._opened = true;
8199
setTimeout(function() {
82100
self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
101+
self.emit('open');
83102
}, this._duration + 50);
84103
return this;
85104
};
@@ -90,12 +109,14 @@ Slideout.prototype.open = function() {
90109
Slideout.prototype.close = function() {
91110
var self = this;
92111
if (!this.isOpen() && !this._opening) { return this; }
112+
this.emit('beforeclose');
93113
this._setTransition();
94114
this._translateXTo(0);
95115
this._opened = false;
96116
setTimeout(function() {
97117
html.className = html.className.replace(/ slideout-open/, '');
98-
self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
118+
self.panel.style.transition = self.panel.style['-webkit-transition'] = self.panel.style[prefix + 'transform'] = self.panel.style.transform = '';
119+
self.emit('close');
99120
}, this._duration + 50);
100121
return this;
101122
};
@@ -215,7 +236,7 @@ Slideout.prototype._initTouchEvents = function() {
215236
}
216237

217238
self.panel.style[prefix + 'transform'] = self.panel.style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
218-
239+
self.emit('translate', translateX);
219240
self._moved = true;
220241
}
221242

‎package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
"version": "0.1.6",
77
"scripts": {
88
"build": "node browserify.js",
9-
"test": "npm run build && node_modules/.bin/_mocha",
9+
"test": "npm run build && _mocha",
1010
"dist": "node browserify.js && uglifyjs ./dist/slideout.js -m -o ./dist/slideout.min.js",
1111
"hint": "jshint index.js"
1212
},
1313
"dependencies": {
14-
"decouple": "0.0.1"
14+
"decouple": "0.0.1",
15+
"emitter": "git+https://github.com/Mango/emitter.git#0.0.4"
1516
},
1617
"devDependencies": {
1718
"better-assert": "1.0.1",
@@ -31,7 +32,8 @@
3132
"license": "MIT",
3233
"spm": {
3334
"dependencies": {
34-
"decouple": "0.0.1"
35+
"decouple": "0.0.1",
36+
"emitter": "git+https://github.com/Mango/emitter.git#0.0.4"
3537
},
3638
"main": "index.js"
3739
}

‎test/test.js‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,29 @@ if (exports) {
88
}
99

1010
var doc = window.document;
11+
var beforeopenEvent = false;
12+
var openEvent = false;
13+
var beforecloseEvent = false;
14+
var closeEvent = false;
1115
var slideout = new Slideout({
1216
'panel': doc.getElementById('panel'),
1317
'menu': doc.getElementById('menu')
1418
});
1519

20+
slideout
21+
.on('beforeopen', function() {
22+
beforeopenEvent = true;
23+
})
24+
.on('open', function() {
25+
openEvent = true;
26+
})
27+
.on('beforeclose', function() {
28+
beforecloseEvent = true;
29+
})
30+
.on('close', function() {
31+
closeEvent = true;
32+
});
33+
1634
describe('Slideout', function () {
1735

1836
it('should be defined.', function () {
@@ -28,7 +46,19 @@ describe('Slideout', function () {
2846
});
2947

3048
describe('should have the following methods:', function () {
31-
var methods = ['open', 'close', 'toggle', 'isOpen', '_initTouchEvents', '_translateXTo', '_setTransition'];
49+
var methods = [
50+
'open',
51+
'close',
52+
'toggle',
53+
'isOpen',
54+
'_initTouchEvents',
55+
'_translateXTo',
56+
'_setTransition',
57+
'on',
58+
'once',
59+
'off',
60+
'emit'
61+
];
3262
var i = 0;
3363
var len = methods.length;
3464
for (i; i < len; i += 1) {
@@ -89,6 +119,18 @@ describe('Slideout', function () {
89119
it('should set _opened to true.', function () {
90120
assert(slideout._opened === true);
91121
});
122+
123+
it('should emit "beforeopen" event.', function () {
124+
assert(beforeopenEvent === true);
125+
});
126+
127+
it('should emit "open" event.', function (done) {
128+
setTimeout(function(){
129+
assert(openEvent === true);
130+
done();
131+
}, 400);
132+
133+
});
92134
});
93135

94136
describe('.isOpen()', function () {
@@ -109,14 +151,21 @@ describe('Slideout', function () {
109151
});
110152

111153
it('should translateX the panel to 0.', function () {
112-
var translate3d = exports ? 'translate3d(0px, 0, 0)' : 'translate3d(0px, 0px, 0px)';
113-
assert(slideout.panel.style.transform === translate3d);
154+
assert(slideout.panel.style.transform === '');
114155
assert(slideout.panel.style.transition === '');
115156
});
116157

117158
it('should set _opened to false.', function () {
118159
assert(slideout._opened === false);
119160
});
161+
162+
it('should emit "beforeclose" event.', function () {
163+
assert(beforecloseEvent === true);
164+
});
165+
166+
it('should emit "close" event.', function () {
167+
assert(closeEvent === true);
168+
});
120169
});
121170

122171
describe('.toggle()', function () {

0 commit comments

Comments
 (0)