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

Disabled Bellows should prevent close behaviour #56

Merged
marlowpayne merged 6 commits into from
Apr 21, 2015
Merged

Disabled Bellows should prevent close behaviour #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2403454
Disabling Bellows should also prevent open Bellows' items from closing
Apr 20, 2015
7ac98db
Add a test for trying to close disabled open items
Apr 20, 2015
c201449
Added helper methods for determining an item's open and disabled states
Apr 21, 2015
cff793d
Removed the setTimeout in the test. We don't need this because we're …
Apr 21, 2015
bd82156
Bump version number
Apr 21, 2015
39ebbde
Updating changelog
Apr 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
5.1.2
- Ensuring disabled items don't close on close
5.0.1
- Reworked test infrastructure to use more robust setup and teardown using iframes
5.0.0
- Upgrading to latest version of plugin factory
- Adding `destroy` method
- Removing `event` option in favour of internalizing a namespaced event
- Removing `event` option in favour of internalizing a namespaced event
4.1.2
- Moved gremlins.js dependency to devDependencies
4.1.1
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bellows",
"version": "5.1.1",
"version": "5.1.2",
"homepage": "https://github.com/mobify/bellows",
"authors": [
"Mobify <jobs@mobify.com>"
Expand Down
28 changes: 18 additions & 10 deletions dist/bellows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
Bellows.__super__.call(this, element, options, Bellows.DEFAULTS);
}

Bellows.VERSION = '5.1.1';
Bellows.VERSION = '5.1.2';

Bellows.DEFAULTS = {
singleItemOpen: false,
Expand Down Expand Up @@ -67,9 +67,9 @@
/**
* Ghetto Event Delegation™

Zepto doesn't support descendant selectors in event delegation,
so we compare against the closest bellows to ensure we are invoking
the event from a direct child, not a bellows child from a nested bellows.
Zepto doesn't support descendant selectors in event delegation,
so we compare against the closest bellows to ensure we are invoking
the event from a direct child, not a bellows child from a nested bellows.
*/
this.$bellows
.on(events.CLICK, function(e) {
Expand Down Expand Up @@ -118,6 +118,14 @@
return item;
},

_isOpen: function($item) {
return $item.hasClass(cssClasses.OPENED);
},

_isDisabled: function($item) {
return $item.hasClass(cssClasses.DISABLED);
},

_wrapContent: function($items) {
$items
.find(selectors.ITEM_CONTENT)
Expand All @@ -138,7 +146,7 @@
open: function($item) {
$item = this._item($item);

if ($item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
if (this._isOpen($item) || this._isDisabled($item)) {
return;
}

Expand All @@ -149,7 +157,7 @@
this.closeAll();
}

this._trigger('open', { item: $item });
this._trigger('open', {item: $item});

Velocity
.animate($contentWrapper, 'slideDown', {
Expand All @@ -168,22 +176,22 @@

plugin._setHeight();

plugin._trigger('opened', { item: $item });
plugin._trigger('opened', {item: $item});
}
});
},

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

if (!$item.hasClass(cssClasses.OPENED)) {
if (!this._isOpen($item) || this._isDisabled($item)) {
return;
}

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

this._trigger('close', { item: $item });
this._trigger('close', {item: $item});

Velocity
.animate($contentWrapper, 'slideUp', {
Expand All @@ -203,7 +211,7 @@

plugin._setHeight();

plugin._trigger('closed', { item: $item });
plugin._trigger('closed', {item: $item});
}
});
},
Expand Down
4 changes: 2 additions & 2 deletions dist/bellows.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"type" : "git",
"url" : "https://github.com/mobify/bellows.git"
},
"version": "5.1.1",
"version": "5.1.2",
"description": "A mobile first accordion UI plugin",
"devDependencies": {
"grunt": "~0.4.x",
Expand Down
26 changes: 17 additions & 9 deletions src/js/bellows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@
/**
* Ghetto Event Delegation™

Zepto doesn't support descendant selectors in event delegation,
so we compare against the closest bellows to ensure we are invoking
the event from a direct child, not a bellows child from a nested bellows.
Zepto doesn't support descendant selectors in event delegation,
so we compare against the closest bellows to ensure we are invoking
the event from a direct child, not a bellows child from a nested bellows.
*/
this.$bellows
.on(events.CLICK, function(e) {
Expand Down Expand Up @@ -118,6 +118,14 @@
return item;
},

_isOpen: function($item) {
return $item.hasClass(cssClasses.OPENED);
},

_isDisabled: function($item) {
return $item.hasClass(cssClasses.DISABLED);
},

_wrapContent: function($items) {
$items
.find(selectors.ITEM_CONTENT)
Expand All @@ -138,7 +146,7 @@
open: function($item) {
$item = this._item($item);

if ($item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
if (this._isOpen($item) || this._isDisabled($item)) {
return;
}

Expand All @@ -149,7 +157,7 @@
this.closeAll();
}

this._trigger('open', { item: $item });
this._trigger('open', {item: $item});

Velocity
.animate($contentWrapper, 'slideDown', {
Expand All @@ -168,22 +176,22 @@

plugin._setHeight();

plugin._trigger('opened', { item: $item });
plugin._trigger('opened', {item: $item});
}
});
},

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

if (!$item.hasClass(cssClasses.OPENED)) {
if (!this._isOpen($item) || this._isDisabled($item)) {
return;
}

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

this._trigger('close', { item: $item });
this._trigger('close', {item: $item});

Velocity
.animate($contentWrapper, 'slideUp', {
Expand All @@ -203,7 +211,7 @@

plugin._setHeight();

plugin._trigger('closed', { item: $item });
plugin._trigger('closed', {item: $item});
}
});
},
Expand Down
4 changes: 4 additions & 0 deletions tests/fixtures/open-disabled-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="bellows__item bellows--is-disabled bellows--is-open">
<div class="bellows__header">Header</div>
<div class="bellows__content">Content</div>
</div>
33 changes: 23 additions & 10 deletions tests/unit/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ define([
'text!fixtures/bellows.html',
'text!fixtures/items.html',
'text!fixtures/item.html',
'text!fixtures/disableditem.html'
], function(testSandbox, fixture, items, item, disabledItem) {
'text!fixtures/disableditem.html',
'text!fixtures/open-disabled-item.html'
], function(testSandbox, fixture, items, item, disabledItem, openDisabledItem) {
var Bellows;
var $element;
var $;
Expand Down Expand Up @@ -180,7 +181,7 @@ define([
},
closed: function(e, ui) {
closeCount++;

if (closeCount === 2) {
expect($element.find('.bellows__item:not(.bellows--is-open)')).to.have.length(2);
done();
Expand Down Expand Up @@ -251,7 +252,7 @@ define([
});

describe('disabling a bellows item', function() {
it('does not open item when header clicked', function(done) {
it('does not open item when header clicked', function() {
$element.bellows();

var $disabledItem = $(disabledItem);
Expand All @@ -262,12 +263,24 @@ define([
.find('.bellows__header')
.trigger('click');

setTimeout(function() {
expect($disabledItem.hasClass('bellows--is-disabled')).to.be.true;
expect($disabledItem.hasClass('bellows--is-open')).to.be.false;
done();
});
expect($disabledItem.hasClass('bellows--is-disabled')).to.be.true;
expect($disabledItem.hasClass('bellows--is-open')).to.be.false;
});

it('does not close item when header clicked', function() {
$element.bellows();

var $openDisabledItem = $(openDisabledItem);

$element.bellows('add', $openDisabledItem);

$openDisabledItem
.find('.bellows__header')
.trigger('click');

expect($openDisabledItem.hasClass('bellows--is-disabled')).to.be.true;
expect($openDisabledItem.hasClass('bellows--is-open')).to.be.true;
});
});
});
});
});