diff --git a/blocks/sg-datalist/sg-datalist.deps.js b/blocks/sg-datalist/sg-datalist.deps.js index 3406cc1..17484ea 100644 --- a/blocks/sg-datalist/sg-datalist.deps.js +++ b/blocks/sg-datalist/sg-datalist.deps.js @@ -1,5 +1,5 @@ [{ - mustDeps : { block : 'i-bem', elems : 'dom' }, + mustDeps : { block : 'i-bem-dom' }, shouldDeps : [ 'sg-dataprovider', 'menu' @@ -7,5 +7,5 @@ }, { tech : 'js', - mustDeps : { block : 'menu-item', tech : 'bemhtml' } + mustDeps : { block : 'menu', tech : 'bemhtml' } }] diff --git a/blocks/sg-datalist/sg-datalist.js b/blocks/sg-datalist/sg-datalist.js index 84b284a..6a8c7d0 100644 --- a/blocks/sg-datalist/sg-datalist.js +++ b/blocks/sg-datalist/sg-datalist.js @@ -1,23 +1,21 @@ modules.define( 'sg-datalist', - ['i-bem__dom', 'menu', 'BEMHTML'], + ['i-bem-dom', 'menu', 'BEMHTML'], function(provide, BemDom, Menu, BEMHTML) { -provide(BemDom.decl(this.name, { +provide(BemDom.declBlock(this.name, { onSetMod : { 'js' : { 'inited' : function() { + var menu = this._menu = this.findMixedBlock(Menu); this._dataprovider = null; - this._menu = this.findBlockOn(Menu.getName()) - .on({ - 'item-hover' : this._onMenuItemHover, - 'item-click' : this._onMenuItemClick - }, this); + this._events(menu).on('item-hover', this._onMenuItemHover, this); + this._events(menu).on('item-click', this._onMenuItemClick, this); } }, - 'focused' : function(modNam, modVal) { - this._menu.setMod(modNam, modVal); + 'focused' : function(modName, modVal) { + this._menu.setMod(modName, modVal); } }, @@ -50,7 +48,7 @@ provide(BemDom.decl(this.name, { // TODO: move to menu hoverNextItem : function(dir) { - var items = this._menu.getItems(), + var items = this._menu.getItems().toArray(), len = items.length; if(!len) return; @@ -84,13 +82,15 @@ provide(BemDom.decl(this.name, { * @protected */ _buildItemsBemjson : function(items) { - var mods = this._menu.getMods(); + var menu = this._menu; return items.map(function(item) { return { - block : 'menu-item', - mods : { - theme : mods.theme, - disabled : mods.disabled + block : 'menu', + elem : 'item', + mix : 'i-bem', + elemMods : { + theme : menu.getMod('theme'), + disabled : menu.getMod('disabled') }, val : item.val, content : item.text @@ -103,25 +103,26 @@ provide(BemDom.decl(this.name, { }, _onMenuItemHover : function(e, data) { - this.emit('item-hover', data); + this._emit('item-hover', data); }, _onMenuItemClick : function(e, data) { - this.emit('item-click', data); + this._emit('item-click', data); }, _onProviderGotData : function(e, data) { - this ._updateMenu(data.result); - this.emit('items', data); + this + ._emit('items', data) + ._updateMenu(data.result); }, _onProviderGotError : function(e, data) { // TODO: _onProviderGotError - this.emit('error', data); + this._emit('error', data); } }, { - live : true + lazyInit : true })); }); diff --git a/blocks/suggest/_has-dataprovider/suggest_has-dataprovider.js b/blocks/suggest/_has-dataprovider/suggest_has-dataprovider.js index 3ce6e74..2aa95f7 100644 --- a/blocks/suggest/_has-dataprovider/suggest_has-dataprovider.js +++ b/blocks/suggest/_has-dataprovider/suggest_has-dataprovider.js @@ -1,6 +1,6 @@ modules.define('suggest', function(provide, Suggest) { -provide(Suggest.decl({ modName : 'has-dataprovider' }, { +provide(Suggest.declMod({ modName : 'has-dataprovider', modVal : '*' }, { onSetMod : { 'js' : { 'inited' : function() { diff --git a/blocks/suggest/suggest.deps.js b/blocks/suggest/suggest.deps.js index 84f665b..cec518d 100644 --- a/blocks/suggest/suggest.deps.js +++ b/blocks/suggest/suggest.deps.js @@ -1,6 +1,6 @@ ({ mustDeps : [ - { block : 'i-bem', elems : 'dom' }, + { block : 'i-bem-dom' }, { block : 'jquery', elems : 'event', mods : { type : 'pointer' } } ], shouldDeps : [ diff --git a/blocks/suggest/suggest.js b/blocks/suggest/suggest.js index 40a8ffa..264c5a2 100644 --- a/blocks/suggest/suggest.js +++ b/blocks/suggest/suggest.js @@ -1,11 +1,11 @@ modules.define( 'suggest', - ['i-bem__dom', 'keyboard__codes', 'sg-datalist', 'popup', 'input'], - function(provide, BemDom, keyCodes, Datalist, Popup, Input) { + ['i-bem-dom', 'keyboard__codes', 'sg-datalist', 'popup', 'input', 'menu'], + function(provide, BemDom, keyCodes, Datalist, Popup, Input, Menu) { var CHANGE_SOURCE_DATALIST = 'datalist'; -provide(BemDom.decl(this.name, { +provide(BemDom.declBlock(this.name, { beforeSetMod : { 'opened' : { 'true' : function() { @@ -23,16 +23,19 @@ provide(BemDom.decl(this.name, { onSetMod : { 'js' : { 'inited' : function() { - this._input = this.findBlockInside(Input.getName()) - .on('change', this._onInputChange, this); + var input = this._input = this.findChildBlock(Input); + this._events(input).on('change', this._onInputChange, this); - this._popup = this.findBlockInside(Popup.getName()) - .setAnchor(this._input) - .on({ modName : 'visible', modVal : '' }, this._onPopupHide, this); + var popup = this._popup = this.findChildBlock(Popup); + popup.setAnchor(input); + this._events(popup).on({ + modName : 'visible', + modVal : false + }, this._onPopupHide, this); - this._datalist = this._popup.findBlockInside(Datalist.getName()) - .on('item-click', this._onMenuItemClick, this); - this._menu = this._datalist.findBlockOn('menu'); + var datalist = this._datalist = this._popup.findChildBlock(Datalist); + this._events(datalist).on('item-click', this._onMenuItemClick, this); + this._menu = datalist.findMixedBlock(Menu); this.hasMod('focused') && this._focus(); @@ -49,14 +52,12 @@ provide(BemDom.decl(this.name, { }, '' : function() { - this._datalist.un('items', this._onMenuGotItems, this); - this - .unbindFrom(this._popup.domElem, 'pointerpress', this._onPopupPointerPress) - .unbindFromDoc('keydown', this._onKeyDown) - .unbindFromDoc('keypress', this._onKeyPress) - .delMod('opened') - ._input - .delMod('focused'); + this._events(this._datalist).un('items', this._onMenuGotItems, this); + this._domEvents(this._popup).un('pointerpress', this._onPopupPointerPress); + this._domEvents(document).un('keydown', this._onKeyDown); + this._domEvents(document).un('keypress', this._onKeyPress); + this.delMod('opened'); + this._input.delMod('focused'); } }, @@ -67,12 +68,12 @@ provide(BemDom.decl(this.name, { 'true' : function() { this._popup.setMod('visible'); - this._datalist.on('item-hover', this._onMenuItemHover, this); + this._events(this._datalist).on('item-hover', this._onMenuItemHover, this); }, '' : function() { this._popup.delMod('visible'); - this._datalist.un('item-hover', this._onMenuItemHover, this); + this._events(this._datalist).un('item-hover', this._onMenuItemHover, this); this._isMenuEmpty = null; this._hoveredItem = null; @@ -126,19 +127,17 @@ provide(BemDom.decl(this.name, { }, _focus : function() { - this - .bindToDoc('keydown', this._onKeyDown) - .bindToDoc('keypress', this._onKeyPress) - .bindTo(this._popup.domElem, 'pointerpress', this._onPopupPointerPress) - ._input - .setMod('focused'); - this._datalist.on('items', this._onMenuGotItems, this); + this._domEvents(document).on('keydown', this._onKeyDown); + this._domEvents(document).on('keypress', this._onKeyPress); + this._domEvents(this._popup).on('pointerpress', this._onPopupPointerPress); + this._input.setMod('focused'); + this._events(this._datalist).on('items', this._onMenuGotItems, this); }, _refocusControl : function() { this._needRefocusControl = false; this._input.setMod('focused'); - this.unbindFromDoc('pointerrelease', this._refocusControl); + this._domEvents(document).un('pointerrelease', this._refocusControl); }, _hoverNextMenuItem : function(dir) { @@ -172,11 +171,9 @@ provide(BemDom.decl(this.name, { e.preventDefault(); this._hoverNextMenuItem(keyCode === keyCodes.UP? -1 : 1); } - } else { - if(isVertArrowKey && !e.shiftKey) { - e.preventDefault(); - this._requestData(this.getVal()); - } + } else if(isVertArrowKey && !e.shiftKey) { + e.preventDefault(); + this._requestData(this.getVal()); } }, @@ -194,14 +191,14 @@ provide(BemDom.decl(this.name, { _onPopupPointerPress : function() { this._needRefocusControl = true; - this.unbindFrom(this._popup.domElem, 'pointerpress', this._onPopupPointerPress); - this.bindToDoc('pointerrelease', this._refocusControl); + this._domEvents(this._popup).un('pointerpress', this._onPopupPointerPress); + this._domEvents(document).on('pointerrelease', this._refocusControl); }, _onMenuGotItems : function(e, data) { this._hoveredItem = null; if(this._isMenuEmpty = !data.result.length) { - this.delMod('opened') + this.delMod('opened'); } else { this .setMod('opened') @@ -223,16 +220,19 @@ provide(BemDom.decl(this.name, { if(this.hasMod('focused')) { this._requestData(e.target.getVal()); } - this.emit('change', data); + this._emit('change', data); }, _onInputFocusChange : function(e, data) { this.setMod('focused', data.modVal); } }, { - live : function() { - this.liveInitOnBlockInsideEvent({ modName : 'focused', modVal : '*' }, Input.getName(), - this.prototype._onInputFocusChange); + lazyInit : true, + onInit : function() { + this._events(Input).on({ + modName : 'focused', + modVal : '*' + }, this.prototype._onInputFocusChange); } })); diff --git a/blocks/suggest/suggest.tests/simple.blocks/suggest/_has-dataprovider/suggest_has-dataprovider_timezone.js b/blocks/suggest/suggest.tests/simple.blocks/suggest/_has-dataprovider/suggest_has-dataprovider_timezone.js index 5324400..3f7ad5a 100644 --- a/blocks/suggest/suggest.tests/simple.blocks/suggest/_has-dataprovider/suggest_has-dataprovider_timezone.js +++ b/blocks/suggest/suggest.tests/simple.blocks/suggest/_has-dataprovider/suggest_has-dataprovider_timezone.js @@ -3,7 +3,7 @@ modules.define( ['timezone-provider'], function(provide, TzDataProvider, Suggest) { -provide(Suggest.decl({ modName : 'has-dataprovider', modVal : 'timezone' }, { +provide(Suggest.declMod({ modName : 'has-dataprovider', modVal : 'timezone' }, { /** @override */ _createDataProvider : function() { return new TzDataProvider(this.params.data); diff --git a/blocks/suggest/suggest.tests/simple.blocks/test/test.styl b/blocks/suggest/suggest.tests/simple.blocks/test/test.styl index 7b471ee..bd3ce9d 100644 --- a/blocks/suggest/suggest.tests/simple.blocks/test/test.styl +++ b/blocks/suggest/suggest.tests/simple.blocks/test/test.styl @@ -2,3 +2,8 @@ { padding: 20px; } + +.sg-datalist +{ + max-height: 500px; +} diff --git a/bower.json b/bower.json index 542911f..104b58b 100644 --- a/bower.json +++ b/bower.json @@ -6,8 +6,7 @@ "Vladimir Varankin (http://github.com/narqo)" ], "dependencies": { - "bem-core": "^2.4.0", - "bem-components": "^2.1.0" + "bem-components": "^5.0.0" }, "devDependencies": { "bem-pr": "~0.10.0"