From 720f711828ac3f5b0640d1b6d3cb609215b9b16d Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 16 May 2019 17:28:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../trigger/editor.block.multiselect.js | 102 +++++++++++++++--- .../trigger/searcher.list.multi.tree.js | 1 + 2 files changed, 86 insertions(+), 17 deletions(-) diff --git a/src/widget/multiselect/trigger/editor.block.multiselect.js b/src/widget/multiselect/trigger/editor.block.multiselect.js index ba00f6291..d884fc564 100644 --- a/src/widget/multiselect/trigger/editor.block.multiselect.js +++ b/src/widget/multiselect/trigger/editor.block.multiselect.js @@ -8,7 +8,10 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { props: { baseCls: "bi-multi-select-block-editor", - el: {} + el: {}, + valueFormatter: function (v) { + return v; + } }, render: function () { @@ -17,17 +20,25 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { type: "bi.inline_vertical_adapt", scrollx: false, items: [{ - el: { + type: "bi.button_group", + cls: "label-wrapper", + ref: function (_ref) { + self.labelWrapper = _ref; + }, + items: [], + layouts: [{ type: "bi.inline_vertical_adapt", scrollable: false, tagName: "ul", - cls: "label-wrapper", - ref: function (_ref) { - self.labelWrapper = _ref; - }, - items: [], hgap: 5 - } + }], + listeners: [{ + eventName: BI.ButtonGroup.EVENT_CHANGE, + action: function () { + self.selection = this.getIndexByValue(this.getValue()[0]); + self._bindKeyDownEvent(); + } + }] }, { type: "bi.sign_editor", allowBlank: true, @@ -51,12 +62,14 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { self.fireEvent(BI.MultiSelectBlockEditor.EVENT_STOP); } }, { - eventName: BI.SignEditor.EVENT_KEY_DOWN, - action: function (keyCode) { - // if(keyCode === ) { - // - // } - self.fireEvent(BI.MultiSelectBlockEditor.EVENT_KEY_DOWN); + eventName: BI.SignEditor.EVENT_FOCUS, + action: function () { + // self._bindKeyDownEvent(); + } + }, { + eventName: BI.SignEditor.EVENT_BLUR, + action: function () { + self._unbindKeyDownEvent(); } }], height: 22 @@ -64,6 +77,56 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { }; }, + _bindKeyDownEvent: function () { + console.log("bind"); + BI.Widget._renderEngine.createElement(document).unbind("keydown." + this.getName()); + BI.Widget._renderEngine.createElement(document).bind("keydown." + this.getName(), BI.bind(this._dealBlockByKey, this)); + }, + + _unbindKeyDownEvent: function () { + console.log("unbind"); + BI.Widget._renderEngine.createElement(document).unbind("keydown." + this.getName()); + }, + + _dealBlockByKey: function (e) { + switch (e.keyCode) { + case BI.KeyCode.LEFT: + this._selectBlock(-1); + break; + case BI.KeyCode.RIGHT: + this._selectBlock(1); + break; + case BI.KeyCode.BACKSPACE: + case BI.KeyCode.DELETE: + !this.editor.isEditing() && this._deleteBlock(); + break; + default: + break; + } + }, + + _deleteBlock: function () { + this.fireEvent(BI.MultiSelectBlockEditor.EVENT_DELETE); + }, + + _selectBlock: function (direction) { + var self = this; + var length = this._getBlocksLength(); + if (length === 0) { + this.selection = null; + } else { + this.selection = BI.clamp(BI.isNull(this.selection) ? length - 1 : this.selection + direction, 0, length - 1); + } + var button = BI.find(this.labelWrapper.getAllButtons(), function (idx) { + return idx === self.selection; + }); + BI.isNotNull(button) && this.labelWrapper.setValue(button.getValue()); + }, + + _getBlocksLength: function () { + return this.labelWrapper.getAllButtons().length; + }, + _checkPosition: function () { var width = this.element.width(); var blockRegionWidth = width - 25 > 0 ? width - 25 : 0; @@ -82,7 +145,9 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { }, setState: function (state) { - var self = this; + var self = this, o = this.options; + this.selection = null; + this.editor.isEditing() ? this._bindKeyDownEvent() : this._unbindKeyDownEvent(); var values = BI.map(state, function (idx, path) { return BI.last(path); }); @@ -90,8 +155,10 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { return { type: "bi.text_button", tagName: "li", - cls: "bi-border-radius bi-list-item-select label-item", - text: value + cls: "bi-border-radius bi-list-item-select", + text: o.valueFormatter(value), + value: value, + stopPropagation: true }; })); BI.defer(function () { @@ -126,4 +193,5 @@ BI.MultiSelectBlockEditor = BI.inherit(BI.Widget, { }); BI.MultiSelectBlockEditor.EVENT_PAUSE = "EVENT_PAUSE"; BI.MultiSelectBlockEditor.EVENT_STOP = "EVENT_STOP"; +BI.MultiSelectBlockEditor.EVENT_DELETE = "EVENT_DELETE"; BI.shortcut("bi.multi_select_block_editor", BI.MultiSelectBlockEditor); diff --git a/src/widget/multitree/trigger/searcher.list.multi.tree.js b/src/widget/multitree/trigger/searcher.list.multi.tree.js index 8ddcffb52..4cd242909 100644 --- a/src/widget/multitree/trigger/searcher.list.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.list.multi.tree.js @@ -25,6 +25,7 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { var self = this, o = this.options; this.editor = BI.createWidget({ type: "bi.multi_select_block_editor", + valueFormatter: o.valueFormatter, height: o.height, el: { type: "bi.simple_state_editor",