|
|
|
@ -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.inline_vertical_adapt", |
|
|
|
|
scrollable: false, |
|
|
|
|
tagName: "ul", |
|
|
|
|
type: "bi.button_group", |
|
|
|
|
cls: "label-wrapper", |
|
|
|
|
ref: function (_ref) { |
|
|
|
|
self.labelWrapper = _ref; |
|
|
|
|
}, |
|
|
|
|
items: [], |
|
|
|
|
layouts: [{ |
|
|
|
|
type: "bi.inline_vertical_adapt", |
|
|
|
|
scrollable: false, |
|
|
|
|
tagName: "ul", |
|
|
|
|
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); |
|
|
|
|