Skip to content
This repository was archived by the owner on Aug 5, 2020. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
2 changes: 1 addition & 1 deletion dist/bellows.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@
close: function($item) {
$item = this._item($item);

if (!$item.hasClass(cssClasses.OPENED)) {
if (!$item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
return;
}

Expand Down
2 changes: 1 addition & 1 deletion dist/bellows.min.js

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

2 changes: 1 addition & 1 deletion src/js/bellows.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@
close: function($item) {
$item = this._item($item);

if (!$item.hasClass(cssClasses.OPENED)) {
if (!$item.hasClass(cssClasses.OPENED) || $item.hasClass(cssClasses.DISABLED)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if now we should have an _isOpen function to encapsulate this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A good option if there's any more usage for it, but at the moment I think the logic is trivial enough to not need any more abstraction.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I don't feel like it's abstraction, but rather will provide better readability. We're using this same check in two places, with a ! to invert the result. I would rather see it in one place. If we had done this before, the disabled check would have automatically been applied to both without the need for this change. Get my meaning?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see your reasoning @scalvert but I don't really understand why we should encapsulate here, since a single function such as _isOpen won't adequately capture the logic. If we would have lumped in the disabled check with the opened check then negating both of them would be the wrong logic.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do agree that in this case you can't really encapsulate this while incorporating the negation, but my guess is there's still a way. I think we want to go for readability whenever we can, and the point I'm trying to make here is that reducing conditional logic into a simple method with semantic meaning can go a long way.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree.
Would something like if (!_isOpen || _isDisabled) be good enough? Or would we need something like if (_isClosed || _isDisabled)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if we did:

if (!this._isOpen() || this._isDisabled())

would work.

return;
}

Expand Down
4 changes: 4 additions & 0 deletions tests/fixtures/open-disabled-item.html
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>
27 changes: 23 additions & 4 deletions tests/unit/plugin.js
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 @@ -268,6 +269,24 @@ define([
done();
});
});

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

var $openDisabledItem = $(openDisabledItem);

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

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

setTimeout(function() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the setTimeout for?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@scalvert I was copying the test structure of MQ's test above it. Most likely reason why MQ had it in his test was to re-queue execution (which I doubt is necessary) or if the tests fails, to allow for Bellows' animation.

TL:DR; It was like that when I got here. :P

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