Skip to content
This repository was archived by the owner on Aug 5, 2020. It is now read-only.

Commit fdff1f6

Browse files
author
Marlow Payne
committed
Merge pull request #56 from mobify/disable-close
Disabled Bellows should prevent close behaviour
2 parents 2219133 + 39ebbde commit fdff1f6

File tree

8 files changed

+69
-34
lines changed

8 files changed

+69
-34
lines changed

‎CHANGELOG‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
5.1.2
2+
- Ensuring disabled items don't close on close
13
5.0.1
24
- Reworked test infrastructure to use more robust setup and teardown using iframes
35
5.0.0
46
- Upgrading to latest version of plugin factory
57
- Adding `destroy` method
6-
- Removing `event` option in favour of internalizing a namespaced event
8+
- Removing `event` option in favour of internalizing a namespaced event
79
4.1.2
810
- Moved gremlins.js dependency to devDependencies
911
4.1.1

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bellows",
3-
"version": "5.1.1",
3+
"version": "5.1.2",
44
"homepage": "https://github.com/mobify/bellows",
55
"authors": [
66
"Mobify <jobs@mobify.com>"

‎dist/bellows.js‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
Bellows.__super__.call(this, element, options, Bellows.DEFAULTS);
3434
}
3535

36-
Bellows.VERSION = '5.1.1';
36+
Bellows.VERSION = '5.1.2';
3737

3838
Bellows.DEFAULTS = {
3939
singleItemOpen: false,
@@ -67,9 +67,9 @@
6767
/**
6868
* Ghetto Event Delegation™
6969
70-
Zepto doesn't support descendant selectors in event delegation,
71-
so we compare against the closest bellows to ensure we are invoking
72-
the event from a direct child, not a bellows child from a nested bellows.
70+
Zepto doesn't support descendant selectors in event delegation,
71+
so we compare against the closest bellows to ensure we are invoking
72+
the event from a direct child, not a bellows child from a nested bellows.
7373
*/
7474
this.$bellows
7575
.on(events.CLICK, function(e) {
@@ -118,6 +118,14 @@
118118
return item;
119119
},
120120

121+
_isOpen: function($item) {
122+
return $item.hasClass(cssClasses.OPENED);
123+
},
124+
125+
_isDisabled: function($item) {
126+
return $item.hasClass(cssClasses.DISABLED);
127+
},
128+
121129
_wrapContent: function($items) {
122130
$items
123131
.find(selectors.ITEM_CONTENT)
@@ -138,7 +146,7 @@
138146
open: function($item) {
139147
$item = this._item($item);
140148

141-
if ($item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
149+
if (this._isOpen($item) || this._isDisabled($item)) {
142150
return;
143151
}
144152

@@ -149,7 +157,7 @@
149157
this.closeAll();
150158
}
151159

152-
this._trigger('open', { item: $item });
160+
this._trigger('open', {item: $item});
153161

154162
Velocity
155163
.animate($contentWrapper, 'slideDown', {
@@ -168,22 +176,22 @@
168176

169177
plugin._setHeight();
170178

171-
plugin._trigger('opened', { item: $item });
179+
plugin._trigger('opened', {item: $item});
172180
}
173181
});
174182
},
175183

176184
close: function($item) {
177185
$item = this._item($item);
178186

179-
if (!$item.hasClass(cssClasses.OPENED)) {
187+
if (!this._isOpen($item) || this._isDisabled($item)) {
180188
return;
181189
}
182190

183191
var plugin = this;
184192
var $contentWrapper = $item.find(selectors.ITEM_CONTENT_WRAPPER);
185193

186-
this._trigger('close', { item: $item });
194+
this._trigger('close', {item: $item});
187195

188196
Velocity
189197
.animate($contentWrapper, 'slideUp', {
@@ -203,7 +211,7 @@
203211

204212
plugin._setHeight();
205213

206-
plugin._trigger('closed', { item: $item });
214+
plugin._trigger('closed', {item: $item});
207215
}
208216
});
209217
},

‎dist/bellows.min.js‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"type" : "git",
55
"url" : "https://github.com/mobify/bellows.git"
66
},
7-
"version": "5.1.1",
7+
"version": "5.1.2",
88
"description": "A mobile first accordion UI plugin",
99
"devDependencies": {
1010
"grunt": "~0.4.x",

‎src/js/bellows.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@
6767
/**
6868
* Ghetto Event Delegation™
6969
70-
Zepto doesn't support descendant selectors in event delegation,
71-
so we compare against the closest bellows to ensure we are invoking
72-
the event from a direct child, not a bellows child from a nested bellows.
70+
Zepto doesn't support descendant selectors in event delegation,
71+
so we compare against the closest bellows to ensure we are invoking
72+
the event from a direct child, not a bellows child from a nested bellows.
7373
*/
7474
this.$bellows
7575
.on(events.CLICK, function(e) {
@@ -118,6 +118,14 @@
118118
return item;
119119
},
120120

121+
_isOpen: function($item) {
122+
return $item.hasClass(cssClasses.OPENED);
123+
},
124+
125+
_isDisabled: function($item) {
126+
return $item.hasClass(cssClasses.DISABLED);
127+
},
128+
121129
_wrapContent: function($items) {
122130
$items
123131
.find(selectors.ITEM_CONTENT)
@@ -138,7 +146,7 @@
138146
open: function($item) {
139147
$item = this._item($item);
140148

141-
if ($item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
149+
if (this._isOpen($item) || this._isDisabled($item)) {
142150
return;
143151
}
144152

@@ -149,7 +157,7 @@
149157
this.closeAll();
150158
}
151159

152-
this._trigger('open', { item: $item });
160+
this._trigger('open', {item: $item});
153161

154162
Velocity
155163
.animate($contentWrapper, 'slideDown', {
@@ -168,22 +176,22 @@
168176

169177
plugin._setHeight();
170178

171-
plugin._trigger('opened', { item: $item });
179+
plugin._trigger('opened', {item: $item});
172180
}
173181
});
174182
},
175183

176184
close: function($item) {
177185
$item = this._item($item);
178186

179-
if (!$item.hasClass(cssClasses.OPENED)) {
187+
if (!this._isOpen($item) || this._isDisabled($item)) {
180188
return;
181189
}
182190

183191
var plugin = this;
184192
var $contentWrapper = $item.find(selectors.ITEM_CONTENT_WRAPPER);
185193

186-
this._trigger('close', { item: $item });
194+
this._trigger('close', {item: $item});
187195

188196
Velocity
189197
.animate($contentWrapper, 'slideUp', {
@@ -203,7 +211,7 @@
203211

204212
plugin._setHeight();
205213

206-
plugin._trigger('closed', { item: $item });
214+
plugin._trigger('closed', {item: $item});
207215
}
208216
});
209217
},

‎tests/fixtures/open-disabled-item.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="bellows__item bellows--is-disabled bellows--is-open">
2+
<div class="bellows__header">Header</div>
3+
<div class="bellows__content">Content</div>
4+
</div>

‎tests/unit/plugin.js‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ define([
33
'text!fixtures/bellows.html',
44
'text!fixtures/items.html',
55
'text!fixtures/item.html',
6-
'text!fixtures/disableditem.html'
7-
], function(testSandbox, fixture, items, item, disabledItem) {
6+
'text!fixtures/disableditem.html',
7+
'text!fixtures/open-disabled-item.html'
8+
], function(testSandbox, fixture, items, item, disabledItem, openDisabledItem) {
89
var Bellows;
910
var $element;
1011
var $;
@@ -180,7 +181,7 @@ define([
180181
},
181182
closed: function(e, ui) {
182183
closeCount++;
183-
184+
184185
if (closeCount === 2) {
185186
expect($element.find('.bellows__item:not(.bellows--is-open)')).to.have.length(2);
186187
done();
@@ -251,7 +252,7 @@ define([
251252
});
252253

253254
describe('disabling a bellows item', function() {
254-
it('does not open item when header clicked', function(done) {
255+
it('does not open item when header clicked', function() {
255256
$element.bellows();
256257

257258
var $disabledItem = $(disabledItem);
@@ -262,12 +263,24 @@ define([
262263
.find('.bellows__header')
263264
.trigger('click');
264265

265-
setTimeout(function() {
266-
expect($disabledItem.hasClass('bellows--is-disabled')).to.be.true;
267-
expect($disabledItem.hasClass('bellows--is-open')).to.be.false;
268-
done();
269-
});
266+
expect($disabledItem.hasClass('bellows--is-disabled')).to.be.true;
267+
expect($disabledItem.hasClass('bellows--is-open')).to.be.false;
268+
});
269+
270+
it('does not close item when header clicked', function() {
271+
$element.bellows();
272+
273+
var $openDisabledItem = $(openDisabledItem);
274+
275+
$element.bellows('add', $openDisabledItem);
276+
277+
$openDisabledItem
278+
.find('.bellows__header')
279+
.trigger('click');
280+
281+
expect($openDisabledItem.hasClass('bellows--is-disabled')).to.be.true;
282+
expect($openDisabledItem.hasClass('bellows--is-open')).to.be.true;
270283
});
271284
});
272285
});
273-
});
286+
});

0 commit comments

Comments
 (0)