Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

dropdown: get rid of wrapping root div node (close #1392) #1393

Merged
merged 1 commit into from
Aug 14, 2015
Merged

dropdown: get rid of wrapping root div node (close #1392) #1393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion common.blocks/dropdown/__switcher/dropdown__switcher.bemhtml
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions common.blocks/dropdown/__switcher/dropdown__switcher.bh.js
View file
Open in desktop

This file was deleted.

18 changes: 11 additions & 7 deletions common.blocks/dropdown/_switcher/dropdown_switcher_button.bemhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
block('dropdown').mod('switcher', 'button').elem('switcher').content()(function() {
var content = this.ctx.content;
if(Array.isArray(content)) return content;
block('dropdown').mod('switcher', 'button').elem('switcher').def()(function() {
var dropdown = this._dropdown,
switcher = dropdown.switcher;

var res = this.isSimple(content)?
{ block : 'button', text : content } :
content;
if(Array.isArray(switcher)) return switcher;

var res = this.isSimple(switcher)?
{ block : 'button', text : switcher } :
switcher;

if(res.block === 'button') {
var resMods = res.mods || (res.mods = {}),
dropdownMods = this.mods;
resMods.size || (resMods.size = dropdownMods.size);
resMods.theme || (resMods.theme = dropdownMods.theme);
resMods.disabled = dropdownMods.disabled;

res.mix = apply('mix');
}

return res;
return applyCtx(res);
});
14 changes: 9 additions & 5 deletions common.blocks/dropdown/_switcher/dropdown_switcher_button.bh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
module.exports = function(bh) {

bh.match('dropdown_switcher_button__switcher', function(ctx, json) {
var content = ctx.content();
if(Array.isArray(content)) return content;
var dropdown = ctx.tParam('dropdown'),
switcher = dropdown.switcher;

var res = ctx.isSimple(content)?
{ block : 'button', text : content } :
content;
if(Array.isArray(switcher)) return switcher;

var res = ctx.isSimple(switcher)?
{ block : 'button', text : switcher } :
switcher;

if(res.block === 'button') {
var resMods = res.mods || (res.mods = {}),
dropdownMods = json.blockMods || json.mods;
resMods.size || (resMods.size = dropdownMods.size);
resMods.theme || (resMods.theme = dropdownMods.theme);
resMods.disabled = dropdownMods.disabled;

res.mix = ctx.tParam('mix');
}

return res;
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/dropdown/_switcher/dropdown_switcher_button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ provide(Dropdown.decl({ modName : 'switcher', modVal : 'button' }, /** @lends dr
}
}, /** @lends dropdown */{
live : function() {
this.liveInitOnBlockInsideEvent('click', 'button', this.onSwitcherClick);
this.liveInitOnBlockEvent('click', 'button', this.onSwitcherClick);
return this.__base.apply(this, arguments);
}
}));
Expand Down
18 changes: 11 additions & 7 deletions common.blocks/dropdown/_switcher/dropdown_switcher_link.bemhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
block('dropdown').mod('switcher', 'link').elem('switcher').content()(function() {
var content = this.ctx.content;
if(Array.isArray(content)) return content;
block('dropdown').mod('switcher', 'link').elem('switcher').def()(function() {
var dropdown = this._dropdown,
switcher = dropdown.switcher;

var res = this.isSimple(content)?
{ block : 'link', mods : { pseudo : true }, content : content } :
content;
if(Array.isArray(switcher)) return switcher;

var res = this.isSimple(switcher)?
{ block : 'link', mods : { pseudo : true }, content : switcher } :
switcher;

if(res.block === 'link') {
var resMods = res.mods || (res.mods = {}),
dropdownMods = this.mods;
resMods.theme || (resMods.theme = dropdownMods.theme);
resMods.disabled = dropdownMods.disabled;

res.mix = apply('mix');
}

return res;
return applyCtx(res);
});
14 changes: 9 additions & 5 deletions common.blocks/dropdown/_switcher/dropdown_switcher_link.bh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
module.exports = function(bh) {

bh.match('dropdown_switcher_link__switcher', function(ctx, json) {
var content = ctx.content();
if(Array.isArray(content)) return content;
var dropdown = ctx.tParam('dropdown'),
switcher = dropdown.switcher;

var res = ctx.isSimple(content)?
{ block : 'link', mods : { pseudo : true }, content : content } :
content;
if(Array.isArray(switcher)) return switcher;

var res = ctx.isSimple(switcher)?
{ block : 'link', mods : { pseudo : true }, content : switcher } :
switcher;

if(res.block === 'link') {
var resMods = res.mods || (res.mods = {}),
dropdownMods = json.blockMods || json.mods;
resMods.theme || (resMods.theme = dropdownMods.theme);
resMods.disabled = dropdownMods.disabled;

res.mix = ctx.tParam('mix');
}

return res;
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/dropdown/_switcher/dropdown_switcher_link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ modules.define('dropdown', ['link'], function(provide, _, Dropdown) {
*/
provide(Dropdown.decl({ modName : 'switcher', modVal : 'link' }, null, /** @lends dropdown */{
live : function() {
this.liveInitOnBlockInsideEvent('click', 'link', this.onSwitcherClick);
this.liveInitOnBlockEvent('click', 'link', this.onSwitcherClick);
Copy link
Member

Choose a reason for hiding this comment

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

Think about moving onSwitcherClick to prototype.

Copy link
Member

Choose a reason for hiding this comment

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

This part is not that obvious. As far as I remember it was made this way not but the mistake. One must check how clear this API will be from the pov of block inheritance. E.g. what will happen if someone will redefine onSwitcherClick within modifier without calling base?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cc @dfilatov

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I propose to think about it separately from this issue.

Copy link
Contributor

Choose a reason for hiding this comment

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

cc @dfilatov

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Considered to do #1502 in v3.

return this.__base.apply(this, arguments);
}
}));
Expand Down
37 changes: 30 additions & 7 deletions common.blocks/dropdown/dropdown.bemhtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,32 @@
block('dropdown')(
js()(true),
def()(function() {
return applyCtx([{ elem : 'switcher' }, { elem : 'popup' }]);
}),
def()(function() {
var ctx = this.ctx;

content()(function() {
var popup = this.ctx.popup;
ctx.js = this.extend(apply('js'), ctx.js);
return applyNext({ _dropdown : ctx });
}),
js()(function() {
return { id : this.generateId() };
}),
elem('switcher').def()(function() {
var dropdown = this._dropdown,
switcher = dropdown.switcher;

switcher.block && (switcher.mix = apply('mix'));

return applyCtx(switcher);
}),
elem('switcher').mix()(function() {
var dropdown = this._dropdown;

return [dropdown].concat(dropdown.switcher.mix || [], dropdown.mix || []);
}),
elem('popup').def()(function() {
var dropdown = this._dropdown,
popup = dropdown.popup;

if(this.isSimple(popup) || popup.block !== 'popup') {
popup = { block : 'popup', content : popup };
Expand All @@ -14,9 +38,8 @@ block('dropdown')(

popupMods.target = 'anchor';

return [
{ elem : 'switcher', content : this.ctx.switcher },
popup
];
popup.mix = [dropdown].concat(popup.mix || []);

return applyCtx(popup);
})
);
51 changes: 37 additions & 14 deletions common.blocks/dropdown/dropdown.bh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,47 @@
module.exports = function(bh) {

bh.match('dropdown', function(ctx, json) {
ctx.js(true);
bh.match({
'dropdown' : function(ctx) {
var dropdown = ctx.json();

var popup = json.popup;
ctx
.js(ctx.extend({ id : ctx.generateId() }, ctx.js()))
.tParam('dropdown', dropdown)
.tParam('theme', ctx.mod('theme'))
.tParam('mix', [dropdown].concat(
dropdown.switcher.mix || [],
dropdown.mix || []));

if(ctx.isSimple(popup) || popup.block !== 'popup') {
popup = { block : 'popup', content : popup };
}
return [{ elem : 'switcher' }, { elem : 'popup' }];
},

'dropdown__popup' : function(ctx) {
var dropdown = ctx.tParam('dropdown'),
popup = dropdown.popup;

if(ctx.isSimple(popup) || popup.block !== 'popup') {
popup = { block : 'popup', content : popup };
}

var popupMods = popup.mods || (popup.mods = {});
popupMods.theme || (popupMods.theme = ctx.tParam('theme'));
popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);

var popupMods = popup.mods || (popup.mods = {});
popupMods.theme || (popupMods.theme = ctx.mod('theme'));
popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);
popupMods.target = 'anchor';

popupMods.target = 'anchor';
popup.mix = [dropdown].concat(popup.mix || []);

ctx.content([
{ elem : 'switcher', content : json.switcher },
popup
], true);
return popup;
},

'dropdown__switcher' : function(ctx) {
var dropdown = ctx.tParam('dropdown'),
switcher = dropdown.switcher;

switcher.block && (switcher.mix = ctx.tParam('mix'));

return switcher;
}
});

};
1 change: 0 additions & 1 deletion common.blocks/dropdown/dropdown.deps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
[{
mustDeps : { block : 'i-bem', elem : 'dom' },
shouldDeps : [
{ elem : 'switcher' },
{
block : 'popup',
mods : {
Expand Down
4 changes: 2 additions & 2 deletions common.blocks/dropdown/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ provide(BEMDOM.decl(this.name, /** @lends dropdown.prototype */{
*/
getPopup : function() {
return this._popup ||
(this._popup = this.findBlockInside('popup')
(this._popup = this.findBlockOn('popup')
.setAnchor(this.getSwitcher())
.on({ modName : 'visible', modVal : '*' }, this._onPopupVisibilityChange, this));
},
Expand All @@ -63,7 +63,7 @@ provide(BEMDOM.decl(this.name, /** @lends dropdown.prototype */{
*/
getSwitcher : function() {
return this._switcher ||
(this._switcher = this.findBlockInside(this.getMod('switcher')));
(this._switcher = this.findBlockOn(this.getMod('switcher')));
},

_onPopupVisibilityChange : function(_, data) {
Expand Down
16 changes: 14 additions & 2 deletions common.blocks/dropdown/dropdown.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
modules.define(
'spec',
['dropdown', 'i-bem__dom', 'jquery', 'BEMHTML'],
function(provide, Dropdown, BEMDOM, $, BEMHTML) {
['dropdown', 'i-bem__dom', 'jquery', 'BEMHTML', 'sinon'],
function(provide, Dropdown, BEMDOM, $, BEMHTML, sinon) {

describe('dropdown', function() {
var body = $('body'),
Expand Down Expand Up @@ -69,6 +69,18 @@ describe('dropdown', function() {
.hasMod('opened').should.be.false;
});
});

describe('destruct', function() {
it('should destruct properly', function() {
var spy = sinon.spy();

dropdown.getPopup().on({ modName : 'js', modVal : '' }, spy);
dropdown.setMod('opened');
BEMDOM.destruct(dropdown.domElem);

spy.should.have.been.calledOnce;
});
});
});

provide();
Expand Down
10 changes: 4 additions & 6 deletions common.blocks/dropdown/dropdown.tests/gemini.bemjson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,17 @@
content : {
block : 'dropdown',
mods : { switcher : 'link', theme : 'islands' },
switcher : 'link',
popup : { block : 'popup', mods : { autoclosable : true, 'islands-link' : true }, content : 'popup' },
cls : 'islands-link'
switcher : { block : 'link', content : 'link', cls : 'islands-link' },
popup : { block : 'popup', mods : { autoclosable : true, 'islands-link' : true }, content : 'popup' }
}
},
{
block : 'test',
content : {
block : 'dropdown',
mods : { switcher : 'button', theme : 'islands', size : 's' },
switcher : 'link',
popup : { block : 'popup', mods : { autoclosable : true, 'islands-button' : true }, content : 'popup' },
cls : 'islands-button'
switcher : { block : 'button', text : 'link', cls : 'islands-button' },
popup : { block : 'popup', mods : { autoclosable : true, 'islands-button' : true }, content : 'popup' }
}
}
]
Expand Down
13 changes: 2 additions & 11 deletions common.blocks/dropdown/dropdown.tests/simple.bemjson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
switcher : 'disabled',
popup : 'bemjson'
}
].map(function(content) { return { tag : 'p', content : content }; })
].map(function(content) { return { tag : 'div', attrs : { style : 'margin: 1em 0' }, content : content }; })
},

{ tag : 'hr' },
Expand Down Expand Up @@ -73,7 +73,7 @@
switcher : 'disabled',
popup : 'bemjson'
}
].map(function(content) { return { tag : 'p', content : content }; })
].map(function(content) { return { tag : 'div', attrs : { style : 'margin: 1em 0' }, content : content }; })
},

{ tag : 'hr' },
Expand All @@ -100,15 +100,6 @@
switcher : 'button',
popup : { block : 'popup', mods : { autoclosable : true, theme : 'islands' }, content : 'custom popup' }
},
{
block : 'dropdown',
mods : { switcher : 'button', theme : 'islands' },
switcher : {
block : 'bla',
content : { block : 'button', mods : { theme : 'islands', size : 'm' }, text : 'wrapped button' }
},
popup : 'bemjson'
},
{
block : 'dropdown',
mods : { switcher : 'button', theme : 'islands', size : 'l' },
Expand Down
1 change: 1 addition & 0 deletions common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.bemjson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
({
block : 'dropdown',
js : { id : 'uniq14257605137441' },
mods : { switcher : 'link', theme : 'islands', disabled : true },
switcher : 'link',
popup : 'bemjson'
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><span class="link link_pseudo link_theme_islands link_disabled link__control i-bem" data-bem="{&quot;link&quot;:{}}">link</span><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
<span class="link link_pseudo link_theme_islands link_disabled link__control dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;link&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">link</span><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">bemjson</div>
1 change: 1 addition & 0 deletions common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.bemjson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
({
block : 'dropdown',
js : { id : 'uniq14257605137441' },
mods : { switcher : 'button', theme : 'islands', size : 'm', disabled : true },
switcher : 'button',
popup : 'bemjson'
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button" disabled="disabled"><span class="button__text">button</span></button><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
<button class="button button_size_m button_theme_islands button_disabled button__control dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;button&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}" role="button" type="button" disabled="disabled"><span class="button__text">button</span></button><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">bemjson</div>
1 change: 1 addition & 0 deletions common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.bemjson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
({
block : 'dropdown',
js : { id : 'uniq14257605137441' },
mods : { switcher : 'link' },
switcher : { block : 'link', mods : { theme : 'islands', disabled : true }, content : 'link' },
popup : { block : 'link', mods : { theme : 'islands' }, content : 'link' }
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="dropdown dropdown_switcher_link i-bem" data-bem="{&quot;dropdown&quot;:{}}"><a class="link link_theme_islands link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a><div class="popup popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}"><a class="link link_theme_islands link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a></div></div>
<a class="link link_theme_islands dropdown dropdown_switcher_link link__control i-bem" tabindex="0" data-bem="{&quot;link&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">link</a><div class="popup popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}"><a class="link link_theme_islands link__control i-bem" tabindex="0" data-bem="{&quot;link&quot;:{}}">link</a></div>
Loading