From edc158996b9179a6d0323cfae67b005f2c2952ce Mon Sep 17 00:00:00 2001 From: guy Date: Fri, 3 Nov 2017 14:50:18 +0800 Subject: [PATCH] update --- bi/base.js | 642 ++++---- bi/sliders.css | 42 +- demo/js/fix-2.0/globalwatcher.js | 3 + dist/base.js | 642 ++++---- dist/bundle.js | 642 ++++---- dist/demo.js | 2413 +++++++++++++++--------------- dist/fix/fix.js | 196 ++- dist/sliders.css | 42 +- 8 files changed, 2338 insertions(+), 2284 deletions(-) diff --git a/bi/base.js b/bi/base.js index 3a8144459..50e78a4ec 100644 --- a/bi/base.js +++ b/bi/base.js @@ -16267,68 +16267,68 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { key: function (e) { } -});/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorTextToolbar - * @extends BI.Widget - */ -BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-text-toolbar bi-background", - buttons: [ - {type: "bi.rich_editor_size_chooser"}, - {type: "bi.rich_editor_bold_button"}, - {type: "bi.rich_editor_italic_button"}, - {type: "bi.rich_editor_underline_button"}, - {type: "bi.rich_editor_color_chooser"}, - {type: "bi.rich_editor_background_color_chooser"}, - {type: "bi.rich_editor_align_left_button"}, - {type: "bi.rich_editor_align_center_button"}, - {type: "bi.rich_editor_align_right_button"}, - {type: "bi.rich_editor_param_button"}, - ], - height: 28 - }); - }, - - _init: function () { - BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - BI.createWidget({ - type: "bi.left", - element: this, - items: BI.map(o.buttons, function (i, btn) { - return BI.extend(btn, { - editor: o.editor - }); - }), - hgap: 3, - vgap: 3 - }) - }, - - mounted: function () { - var self = this; - if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 - this.element.mousedown(function () { - self._noSelect(self.element[0]); - }); - this._noSelect(this.element[0]); - } - }, - - _noSelect: function (element) { - if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { - element.setAttribute('unselectable', 'on'); - } - for (var i = 0; i < element.childNodes.length; i++) { - this._noSelect(element.childNodes[i]); - } - } -}); +});/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorTextToolbar + * @extends BI.Widget + */ +BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-text-toolbar bi-background", + buttons: [ + {type: "bi.rich_editor_size_chooser"}, + {type: "bi.rich_editor_bold_button"}, + {type: "bi.rich_editor_italic_button"}, + {type: "bi.rich_editor_underline_button"}, + {type: "bi.rich_editor_color_chooser"}, + {type: "bi.rich_editor_background_color_chooser"}, + {type: "bi.rich_editor_align_left_button"}, + {type: "bi.rich_editor_align_center_button"}, + {type: "bi.rich_editor_align_right_button"}, + {type: "bi.rich_editor_param_button"}, + ], + height: 28 + }); + }, + + _init: function () { + BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); + var self = this, o = this.options; + BI.createWidget({ + type: "bi.left", + element: this, + items: BI.map(o.buttons, function (i, btn) { + return BI.extend(btn, { + editor: o.editor + }); + }), + hgap: 3, + vgap: 3 + }) + }, + + mounted: function () { + var self = this; + if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 + this.element.mousedown(function () { + self._noSelect(self.element[0]); + }); + this._noSelect(this.element[0]); + } + }, + + _noSelect: function (element) { + if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable', 'on'); + } + for (var i = 0; i < element.childNodes.length; i++) { + this._noSelect(element.childNodes[i]); + } + } +}); BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** * 富文本编辑器 * @@ -16609,57 +16609,57 @@ BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** } }); }()); -/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-background-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); +/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-background-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); BI.shortcut('bi.rich_editor_background_color_chooser_trigger', BI.RichEditorBackgroundChooserTrigger);/** * * Created by GUY on 2015/11/26. @@ -16927,214 +16927,214 @@ BI.RichEditorUnderlineButton = BI.inherit(BI.RichEditorAction, { this.underline.setSelected(false); }, }); -BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); -BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - }); - }, - - _init: function () { - BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_background_color_chooser_trigger", - title: BI.i18nText("BI-Widget_Background_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - var backgroundColor = this.getValue(); - o.editor.element.css({ - backgroundColor: backgroundColor, - color: BI.DOM.getContrastColor(backgroundColor) - }); - this.setValue(""); - }); - }, - - deactivate: function () { - } -}); -BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - command: "foreColor" - }); - }, - - _init: function () { - BI.RichEditorColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_color_chooser_trigger", - title: BI.i18nText("BI-Font_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - self.doCommand(this.getValue()); - }); - - }, - - deactivate: function () { - this.colorchooser.setValue(""); - } -}); -BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** - * 字体大小选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorSizeChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-size-chooser bi-border bi-card", - command: "FontSize", - width: 50, - height: 20 - }); - }, - - _items: [{ - value: 1, - text: "1(8pt)" - }, { - value: 2, - text: "2(10pt)" - }, { - value: 3, - text: "3(12pt)" - }, { - value: 4, - text: "4(14pt)" - }, { - value: 5, - text: "5(18pt)" - }, { - value: 6, - text: "6(24pt)" - }], - - _init: function () { - BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.trigger = BI.createWidget({ - type: "bi.text_trigger", - readonly: true, - height: o.height, - triggerWidth: 16, - text: BI.i18nText("BI-Font_Size") - }); - - this.combo = BI.createWidget({ - type: "bi.combo", - element: this, - el: this.trigger, - adjustLength: 1, - popup: { - maxWidth: 70, - minWidth: 70, - el: { - type: "bi.button_group", - items: BI.createItems(this._items, { - type: "bi.single_select_item" - }), - layouts: [{ - type: "bi.vertical" - }] - } - } - }); - this.combo.on(BI.Combo.EVENT_CHANGE, function () { - var val = this.getValue()[0]; - self.doCommand(val); - this.hideView(); - this.setValue([]); - }) - } -}); +BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); +BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + }); + }, + + _init: function () { + BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_background_color_chooser_trigger", + title: BI.i18nText("BI-Widget_Background_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + var backgroundColor = this.getValue(); + o.editor.element.css({ + backgroundColor: backgroundColor, + color: BI.DOM.getContrastColor(backgroundColor) + }); + this.setValue(""); + }); + }, + + deactivate: function () { + } +}); +BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + command: "foreColor" + }); + }, + + _init: function () { + BI.RichEditorColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_color_chooser_trigger", + title: BI.i18nText("BI-Font_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + self.doCommand(this.getValue()); + }); + + }, + + deactivate: function () { + this.colorchooser.setValue(""); + } +}); +BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** + * 字体大小选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorSizeChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-size-chooser bi-border bi-card", + command: "FontSize", + width: 50, + height: 20 + }); + }, + + _items: [{ + value: 1, + text: "1(8pt)" + }, { + value: 2, + text: "2(10pt)" + }, { + value: 3, + text: "3(12pt)" + }, { + value: 4, + text: "4(14pt)" + }, { + value: 5, + text: "5(18pt)" + }, { + value: 6, + text: "6(24pt)" + }], + + _init: function () { + BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.trigger = BI.createWidget({ + type: "bi.text_trigger", + readonly: true, + height: o.height, + triggerWidth: 16, + text: BI.i18nText("BI-Font_Size") + }); + + this.combo = BI.createWidget({ + type: "bi.combo", + element: this, + el: this.trigger, + adjustLength: 1, + popup: { + maxWidth: 70, + minWidth: 70, + el: { + type: "bi.button_group", + items: BI.createItems(this._items, { + type: "bi.single_select_item" + }), + layouts: [{ + type: "bi.vertical" + }] + } + } + }); + this.combo.on(BI.Combo.EVENT_CHANGE, function () { + var val = this.getValue()[0]; + self.doCommand(val); + this.hideView(); + this.setValue([]); + }) + } +}); BI.shortcut('bi.rich_editor_size_chooser', BI.RichEditorSizeChooser);/** * 富文本编辑器 * diff --git a/bi/sliders.css b/bi/sliders.css index 66780294e..a8d9688bb 100644 --- a/bi/sliders.css +++ b/bi/sliders.css @@ -24,15 +24,27 @@ -moz-border-radius: 7px; border-radius: 7px; } -.bi-single-slider-button .slider-button { - cursor: ew-resize; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; -} +.bi-single-slider-button .slider-button { + cursor: ew-resize; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} +.bi-slider-track .gray-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.bi-slider-track .blue-track { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} .bi-slider-track .gray-track { background-color: rgba(153, 153, 153, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); @@ -45,15 +57,3 @@ -moz-border-radius: 3px; border-radius: 3px; } -.bi-slider-track .gray-track { - background-color: rgba(153, 153, 153, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.bi-slider-track .blue-track { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} diff --git a/demo/js/fix-2.0/globalwatcher.js b/demo/js/fix-2.0/globalwatcher.js index 7fa8f79fa..57185e0c1 100644 --- a/demo/js/fix-2.0/globalwatcher.js +++ b/demo/js/fix-2.0/globalwatcher.js @@ -13,6 +13,9 @@ return model; }, watch: { + "*.*.n": function () { + debugger + }, "arr.**": function () { debugger }, diff --git a/dist/base.js b/dist/base.js index 3a8144459..50e78a4ec 100644 --- a/dist/base.js +++ b/dist/base.js @@ -16267,68 +16267,68 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { key: function (e) { } -});/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorTextToolbar - * @extends BI.Widget - */ -BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-text-toolbar bi-background", - buttons: [ - {type: "bi.rich_editor_size_chooser"}, - {type: "bi.rich_editor_bold_button"}, - {type: "bi.rich_editor_italic_button"}, - {type: "bi.rich_editor_underline_button"}, - {type: "bi.rich_editor_color_chooser"}, - {type: "bi.rich_editor_background_color_chooser"}, - {type: "bi.rich_editor_align_left_button"}, - {type: "bi.rich_editor_align_center_button"}, - {type: "bi.rich_editor_align_right_button"}, - {type: "bi.rich_editor_param_button"}, - ], - height: 28 - }); - }, - - _init: function () { - BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - BI.createWidget({ - type: "bi.left", - element: this, - items: BI.map(o.buttons, function (i, btn) { - return BI.extend(btn, { - editor: o.editor - }); - }), - hgap: 3, - vgap: 3 - }) - }, - - mounted: function () { - var self = this; - if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 - this.element.mousedown(function () { - self._noSelect(self.element[0]); - }); - this._noSelect(this.element[0]); - } - }, - - _noSelect: function (element) { - if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { - element.setAttribute('unselectable', 'on'); - } - for (var i = 0; i < element.childNodes.length; i++) { - this._noSelect(element.childNodes[i]); - } - } -}); +});/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorTextToolbar + * @extends BI.Widget + */ +BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-text-toolbar bi-background", + buttons: [ + {type: "bi.rich_editor_size_chooser"}, + {type: "bi.rich_editor_bold_button"}, + {type: "bi.rich_editor_italic_button"}, + {type: "bi.rich_editor_underline_button"}, + {type: "bi.rich_editor_color_chooser"}, + {type: "bi.rich_editor_background_color_chooser"}, + {type: "bi.rich_editor_align_left_button"}, + {type: "bi.rich_editor_align_center_button"}, + {type: "bi.rich_editor_align_right_button"}, + {type: "bi.rich_editor_param_button"}, + ], + height: 28 + }); + }, + + _init: function () { + BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); + var self = this, o = this.options; + BI.createWidget({ + type: "bi.left", + element: this, + items: BI.map(o.buttons, function (i, btn) { + return BI.extend(btn, { + editor: o.editor + }); + }), + hgap: 3, + vgap: 3 + }) + }, + + mounted: function () { + var self = this; + if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 + this.element.mousedown(function () { + self._noSelect(self.element[0]); + }); + this._noSelect(this.element[0]); + } + }, + + _noSelect: function (element) { + if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable', 'on'); + } + for (var i = 0; i < element.childNodes.length; i++) { + this._noSelect(element.childNodes[i]); + } + } +}); BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** * 富文本编辑器 * @@ -16609,57 +16609,57 @@ BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** } }); }()); -/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-background-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); +/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-background-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); BI.shortcut('bi.rich_editor_background_color_chooser_trigger', BI.RichEditorBackgroundChooserTrigger);/** * * Created by GUY on 2015/11/26. @@ -16927,214 +16927,214 @@ BI.RichEditorUnderlineButton = BI.inherit(BI.RichEditorAction, { this.underline.setSelected(false); }, }); -BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); -BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - }); - }, - - _init: function () { - BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_background_color_chooser_trigger", - title: BI.i18nText("BI-Widget_Background_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - var backgroundColor = this.getValue(); - o.editor.element.css({ - backgroundColor: backgroundColor, - color: BI.DOM.getContrastColor(backgroundColor) - }); - this.setValue(""); - }); - }, - - deactivate: function () { - } -}); -BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - command: "foreColor" - }); - }, - - _init: function () { - BI.RichEditorColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_color_chooser_trigger", - title: BI.i18nText("BI-Font_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - self.doCommand(this.getValue()); - }); - - }, - - deactivate: function () { - this.colorchooser.setValue(""); - } -}); -BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** - * 字体大小选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorSizeChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-size-chooser bi-border bi-card", - command: "FontSize", - width: 50, - height: 20 - }); - }, - - _items: [{ - value: 1, - text: "1(8pt)" - }, { - value: 2, - text: "2(10pt)" - }, { - value: 3, - text: "3(12pt)" - }, { - value: 4, - text: "4(14pt)" - }, { - value: 5, - text: "5(18pt)" - }, { - value: 6, - text: "6(24pt)" - }], - - _init: function () { - BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.trigger = BI.createWidget({ - type: "bi.text_trigger", - readonly: true, - height: o.height, - triggerWidth: 16, - text: BI.i18nText("BI-Font_Size") - }); - - this.combo = BI.createWidget({ - type: "bi.combo", - element: this, - el: this.trigger, - adjustLength: 1, - popup: { - maxWidth: 70, - minWidth: 70, - el: { - type: "bi.button_group", - items: BI.createItems(this._items, { - type: "bi.single_select_item" - }), - layouts: [{ - type: "bi.vertical" - }] - } - } - }); - this.combo.on(BI.Combo.EVENT_CHANGE, function () { - var val = this.getValue()[0]; - self.doCommand(val); - this.hideView(); - this.setValue([]); - }) - } -}); +BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); +BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + }); + }, + + _init: function () { + BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_background_color_chooser_trigger", + title: BI.i18nText("BI-Widget_Background_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + var backgroundColor = this.getValue(); + o.editor.element.css({ + backgroundColor: backgroundColor, + color: BI.DOM.getContrastColor(backgroundColor) + }); + this.setValue(""); + }); + }, + + deactivate: function () { + } +}); +BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + command: "foreColor" + }); + }, + + _init: function () { + BI.RichEditorColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_color_chooser_trigger", + title: BI.i18nText("BI-Font_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + self.doCommand(this.getValue()); + }); + + }, + + deactivate: function () { + this.colorchooser.setValue(""); + } +}); +BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** + * 字体大小选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorSizeChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-size-chooser bi-border bi-card", + command: "FontSize", + width: 50, + height: 20 + }); + }, + + _items: [{ + value: 1, + text: "1(8pt)" + }, { + value: 2, + text: "2(10pt)" + }, { + value: 3, + text: "3(12pt)" + }, { + value: 4, + text: "4(14pt)" + }, { + value: 5, + text: "5(18pt)" + }, { + value: 6, + text: "6(24pt)" + }], + + _init: function () { + BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.trigger = BI.createWidget({ + type: "bi.text_trigger", + readonly: true, + height: o.height, + triggerWidth: 16, + text: BI.i18nText("BI-Font_Size") + }); + + this.combo = BI.createWidget({ + type: "bi.combo", + element: this, + el: this.trigger, + adjustLength: 1, + popup: { + maxWidth: 70, + minWidth: 70, + el: { + type: "bi.button_group", + items: BI.createItems(this._items, { + type: "bi.single_select_item" + }), + layouts: [{ + type: "bi.vertical" + }] + } + } + }); + this.combo.on(BI.Combo.EVENT_CHANGE, function () { + var val = this.getValue()[0]; + self.doCommand(val); + this.hideView(); + this.setValue([]); + }) + } +}); BI.shortcut('bi.rich_editor_size_chooser', BI.RichEditorSizeChooser);/** * 富文本编辑器 * diff --git a/dist/bundle.js b/dist/bundle.js index 36d90b9a8..abcde83cb 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -42008,68 +42008,68 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { key: function (e) { } -});/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorTextToolbar - * @extends BI.Widget - */ -BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-text-toolbar bi-background", - buttons: [ - {type: "bi.rich_editor_size_chooser"}, - {type: "bi.rich_editor_bold_button"}, - {type: "bi.rich_editor_italic_button"}, - {type: "bi.rich_editor_underline_button"}, - {type: "bi.rich_editor_color_chooser"}, - {type: "bi.rich_editor_background_color_chooser"}, - {type: "bi.rich_editor_align_left_button"}, - {type: "bi.rich_editor_align_center_button"}, - {type: "bi.rich_editor_align_right_button"}, - {type: "bi.rich_editor_param_button"}, - ], - height: 28 - }); - }, - - _init: function () { - BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); - var self = this, o = this.options; - BI.createWidget({ - type: "bi.left", - element: this, - items: BI.map(o.buttons, function (i, btn) { - return BI.extend(btn, { - editor: o.editor - }); - }), - hgap: 3, - vgap: 3 - }) - }, - - mounted: function () { - var self = this; - if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 - this.element.mousedown(function () { - self._noSelect(self.element[0]); - }); - this._noSelect(this.element[0]); - } - }, - - _noSelect: function (element) { - if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { - element.setAttribute('unselectable', 'on'); - } - for (var i = 0; i < element.childNodes.length; i++) { - this._noSelect(element.childNodes[i]); - } - } -}); +});/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorTextToolbar + * @extends BI.Widget + */ +BI.RichEditorTextToolbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-text-toolbar bi-background", + buttons: [ + {type: "bi.rich_editor_size_chooser"}, + {type: "bi.rich_editor_bold_button"}, + {type: "bi.rich_editor_italic_button"}, + {type: "bi.rich_editor_underline_button"}, + {type: "bi.rich_editor_color_chooser"}, + {type: "bi.rich_editor_background_color_chooser"}, + {type: "bi.rich_editor_align_left_button"}, + {type: "bi.rich_editor_align_center_button"}, + {type: "bi.rich_editor_align_right_button"}, + {type: "bi.rich_editor_param_button"}, + ], + height: 28 + }); + }, + + _init: function () { + BI.RichEditorTextToolbar.superclass._init.apply(this, arguments); + var self = this, o = this.options; + BI.createWidget({ + type: "bi.left", + element: this, + items: BI.map(o.buttons, function (i, btn) { + return BI.extend(btn, { + editor: o.editor + }); + }), + hgap: 3, + vgap: 3 + }) + }, + + mounted: function () { + var self = this; + if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框 + this.element.mousedown(function () { + self._noSelect(self.element[0]); + }); + this._noSelect(this.element[0]); + } + }, + + _noSelect: function (element) { + if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable', 'on'); + } + for (var i = 0; i < element.childNodes.length; i++) { + this._noSelect(element.childNodes[i]); + } + } +}); BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** * 富文本编辑器 * @@ -42350,57 +42350,57 @@ BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/** } }); }()); -/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-background-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); +/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-background-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); BI.shortcut('bi.rich_editor_background_color_chooser_trigger', BI.RichEditorBackgroundChooserTrigger);/** * * Created by GUY on 2015/11/26. @@ -42668,214 +42668,214 @@ BI.RichEditorUnderlineButton = BI.inherit(BI.RichEditorAction, { this.underline.setSelected(false); }, }); -BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** - * 颜色选择trigger - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooserTrigger - * @extends BI.Widget - */ -BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - width: 20, - height: 20 - }); - }, - - _init: function () { - BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); - this.font = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-font" - }); - - this.underline = BI.createWidget({ - type: "bi.icon_button", - cls: "text-color-underline-font" - }); - - BI.createWidget({ - type: "bi.absolute", - element: this, - items: [{ - el: this.font, - top: 2, - left: 2 - }, { - el: this.underline, - top: 7, - left: 2 - }] - }) - }, - - setValue: function (color) { - this.underline.element.css("color", color); - }, - - getValue: function () { - return this.font.element.css("color"); - } -}); -BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorBackgroundColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - }); - }, - - _init: function () { - BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_background_color_chooser_trigger", - title: BI.i18nText("BI-Widget_Background_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - var backgroundColor = this.getValue(); - o.editor.element.css({ - backgroundColor: backgroundColor, - color: BI.DOM.getContrastColor(backgroundColor) - }); - this.setValue(""); - }); - }, - - deactivate: function () { - } -}); -BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** - * 颜色选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorColorChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { - width: 20, - height: 20, - command: "foreColor" - }); - }, - - _init: function () { - BI.RichEditorColorChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.colorchooser = BI.createWidget({ - type: "bi.color_chooser", - element: this, - width: o.width, - height: o.height, - el: { - type: "bi.rich_editor_color_chooser_trigger", - title: BI.i18nText("BI-Font_Colour"), - cls: "text-toolbar-button" - } - }); - this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { - self.doCommand(this.getValue()); - }); - - }, - - deactivate: function () { - this.colorchooser.setValue(""); - } -}); -BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** - * 字体大小选择 - * - * Created by GUY on 2015/11/26. - * @class BI.RichEditorSizeChooser - * @extends BI.RichEditorAction - */ -BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { - _defaultConfig: function () { - return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-rich-editor-size-chooser bi-border bi-card", - command: "FontSize", - width: 50, - height: 20 - }); - }, - - _items: [{ - value: 1, - text: "1(8pt)" - }, { - value: 2, - text: "2(10pt)" - }, { - value: 3, - text: "3(12pt)" - }, { - value: 4, - text: "4(14pt)" - }, { - value: 5, - text: "5(18pt)" - }, { - value: 6, - text: "6(24pt)" - }], - - _init: function () { - BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.trigger = BI.createWidget({ - type: "bi.text_trigger", - readonly: true, - height: o.height, - triggerWidth: 16, - text: BI.i18nText("BI-Font_Size") - }); - - this.combo = BI.createWidget({ - type: "bi.combo", - element: this, - el: this.trigger, - adjustLength: 1, - popup: { - maxWidth: 70, - minWidth: 70, - el: { - type: "bi.button_group", - items: BI.createItems(this._items, { - type: "bi.single_select_item" - }), - layouts: [{ - type: "bi.vertical" - }] - } - } - }); - this.combo.on(BI.Combo.EVENT_CHANGE, function () { - var val = this.getValue()[0]; - self.doCommand(val); - this.hideView(); - this.setValue([]); - }) - } -}); +BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/** + * 颜色选择trigger + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooserTrigger + * @extends BI.Widget + */ +BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, { + _defaultConfig: function () { + var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + width: 20, + height: 20 + }); + }, + + _init: function () { + BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments); + this.font = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-font" + }); + + this.underline = BI.createWidget({ + type: "bi.icon_button", + cls: "text-color-underline-font" + }); + + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.font, + top: 2, + left: 2 + }, { + el: this.underline, + top: 7, + left: 2 + }] + }) + }, + + setValue: function (color) { + this.underline.element.css("color", color); + }, + + getValue: function () { + return this.font.element.css("color"); + } +}); +BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorBackgroundColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + }); + }, + + _init: function () { + BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_background_color_chooser_trigger", + title: BI.i18nText("BI-Widget_Background_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + var backgroundColor = this.getValue(); + o.editor.element.css({ + backgroundColor: backgroundColor, + color: BI.DOM.getContrastColor(backgroundColor) + }); + this.setValue(""); + }); + }, + + deactivate: function () { + } +}); +BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/** + * 颜色选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorColorChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), { + width: 20, + height: 20, + command: "foreColor" + }); + }, + + _init: function () { + BI.RichEditorColorChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.colorchooser = BI.createWidget({ + type: "bi.color_chooser", + element: this, + width: o.width, + height: o.height, + el: { + type: "bi.rich_editor_color_chooser_trigger", + title: BI.i18nText("BI-Font_Colour"), + cls: "text-toolbar-button" + } + }); + this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { + self.doCommand(this.getValue()); + }); + + }, + + deactivate: function () { + this.colorchooser.setValue(""); + } +}); +BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/** + * 字体大小选择 + * + * Created by GUY on 2015/11/26. + * @class BI.RichEditorSizeChooser + * @extends BI.RichEditorAction + */ +BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, { + _defaultConfig: function () { + return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-rich-editor-size-chooser bi-border bi-card", + command: "FontSize", + width: 50, + height: 20 + }); + }, + + _items: [{ + value: 1, + text: "1(8pt)" + }, { + value: 2, + text: "2(10pt)" + }, { + value: 3, + text: "3(12pt)" + }, { + value: 4, + text: "4(14pt)" + }, { + value: 5, + text: "5(18pt)" + }, { + value: 6, + text: "6(24pt)" + }], + + _init: function () { + BI.RichEditorSizeChooser.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.trigger = BI.createWidget({ + type: "bi.text_trigger", + readonly: true, + height: o.height, + triggerWidth: 16, + text: BI.i18nText("BI-Font_Size") + }); + + this.combo = BI.createWidget({ + type: "bi.combo", + element: this, + el: this.trigger, + adjustLength: 1, + popup: { + maxWidth: 70, + minWidth: 70, + el: { + type: "bi.button_group", + items: BI.createItems(this._items, { + type: "bi.single_select_item" + }), + layouts: [{ + type: "bi.vertical" + }] + } + } + }); + this.combo.on(BI.Combo.EVENT_CHANGE, function () { + var val = this.getValue()[0]; + self.doCommand(val); + this.hideView(); + this.setValue([]); + }) + } +}); BI.shortcut('bi.rich_editor_size_chooser', BI.RichEditorSizeChooser);/** * 富文本编辑器 * diff --git a/dist/demo.js b/dist/demo.js index 432562092..b9f5b603f 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -8890,1211 +8890,1211 @@ BI.shortcut("demo.vtape", Demo.VtapeLayout);Demo.Face = BI.inherit(BI.Widget, { this._runGlobalStyle(); } }); -BI.shortcut("demo.face", Demo.Face);//change函数 -ChangeView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(ChangeView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-change" - }) - }, - - _init: function(){ - ChangeView.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.child){ - this._showModelData(); - } - if(changed.superiors){ - this._showModelData(); - } - }, - - _showModelData: function(){ - this.outerText.setText("父级Model层数据: " + JSON.stringify(this.model.toJSON())); - }, - - _createOuter: function(){ - this.outerText = BI.createWidget({ - type: "bi.label", - cls: "outer-text", - whiteSpace: "normal" - }); - - return BI.createWidget({ - type: "bi.border", - items: { - north: { - el: this.outerText, - height: 50 - }, - center: this._createInner() - } - }); - }, - - _createInner: function(){ - var innerPane = BI.createWidget({ - type: "bi.absolute", - cls: "inner" - }); - this.addSubVessel("innerPane", innerPane, { - defaultShowName: "inner" - }); - return innerPane; - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [this._createOuter()], - hgap: 100, - vgap: 100 - }); - - this._showModelData(); - }, - - refresh: function(){ - this.skipTo("inner", "innerPane", "superiors"); - } -}); - -ChangeModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(ChangeModel.superclass._defaultConfig.apply(this, arguments),{ - superiors: { - child: "default" - }, - child: "default" - }) - }, - - _init: function(){ - ChangeModel.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.superiors){ - this.set("child", changed.superiors.child); - } - } -}); - -//ChangeView 的子级 -ChangeInnerView = BI.inherit(BI.View, { - _init: function(){ - ChangeInnerView.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.child){ - this._showModelData(); - } - }, - - _createOuter: function(){ - var self = this; - this.text = BI.createWidget({ - type: "bi.label", - height: 26 - }); - - this.buttons = BI.createWidget({ - type: "bi.button_group", - items: BI.createItems(this.model.get("items"), { - type: "bi.text_button", - height: 30, - textAlign: "center", - hgap: 20 - }) - }); - - this.buttons.on(BI.ButtonGroup.EVENT_CHANGE, function(){ - self.model.set("child", this.getValue()[0]); - }); - - return BI.createWidget({ - type: "bi.vertical", - vgap: 20, - items: [{ - type: "bi.center", - items: [this.buttons], - height: 30 - }, this.text] - }); - }, - - _showModelData: function(){ - this.text.setText("子级Model层数据: " + JSON.stringify(this.model.toJSON())); - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [this._createOuter()] - }); - this._showModelData(); - } -}); - - -ChangeInnerModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(ChangeInnerModel.superclass._defaultConfig.apply(this, arguments),{ - - }) - }, - - _static: function(){ - return { - items: [{ - text: "Type-1", - value: "First", - cls: "type-first mvc-button" - }, { - text: "Type-2", - value: "Second", - cls: "type-second mvc-button" - }, { - text: "Type-3", - value: "third", - cls: "type-third mvc-button" - }] - } - }, - - _init: function(){ - ChangeInnerModel.superclass._init.apply(this, arguments); - } - -}); - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/change", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.change", Demo.Func);//local函数 -LocalView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(LocalView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-local" - }) - }, - - _init: function(){ - LocalView.superclass._init.apply(this, arguments); - this.buttons = {}; - }, - - _addElement2Vessel: function(id){ - var self = this; - this.buttons[id] = this.elementVessel.addItem({ - type: "bi.text_button", - text: "Button:" + id, - width: 180, - height: 22, - cls: "delete-button button", - handler: function(){ - self.set("delete", id); - } - }) - }, - - _deleteElement: function(id){ - this.buttons[id] && this.buttons[id].destroy(); - delete this.buttons[id]; - }, - - _createTop: function(){ - var self = this; - this.elementVessel = BI.createWidget({ - type: "bi.left", - height: 200, - cls: "vessel-border", - scrollable: true, - vgap: 10, - hgap: 10 - }); - - return BI.createWidget({ - type: "bi.vertical", - items: [ - { - el: { - type: "bi.text_button", - text: "点击添加元素", - cls: "top-button", - handler: function(){ - self.model.set("add", true); - }, - height: 30 - } - }, - this.elementVessel - ] - }) - }, - - _showModelData: function(){ - this.text.setText(JSON.stringify(this.model.toJSON())); - }, - - _createCenter: function(){ - var modelData = BI.createWidget({ - type: "bi.center", - vgap: 10, - hgap: 10, - cls: "vessel-border", - height: 200, - items: [{ - el: this.text = BI.createWidget({ - type: "bi.label", - hgap: 30, - textHeight: 30, - whiteSpace: "normal" - }) - }] - }); - - return BI.createWidget({ - type: "bi.vertical", - items: [ - { - el: { - type: "bi.label", - cls: "bottom-label", - text: "Model层数据", - height: 30 - } - }, - modelData - ] - }) - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.vertical", - element: vessel, - items: [{ - el :this._createTop() - },{ - el : this._createCenter() - }], - hgap: 50, - vgap: 20 - }); - - this._showModelData(); - }, - - local: function(){ - if(this.model.has("add")){ - var add = this.model.get("add"); - this._addElement2Vessel(this.model.getEditing()); - this._showModelData(); - return true; - } - if(this.model.has("delete")){ - var id = this.model.get("delete"); - this._deleteElement(id); - this._showModelData(); - return true; - } - return false; - } -}); - -LocalModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(LocalModel.superclass._defaultConfig.apply(this, arguments),{ - - }) - }, - - _init: function(){ - LocalModel.superclass._init.apply(this, arguments); - }, - - local: function(){ - if(this.has("add")){ - this.get("add"); - var id = BI.UUID(); - this.set(id, "这是新增的属性:"+id); - this.setEditing(id); - return true; - } - if(this.has("delete")){ - var id = this.get("delete"); - this.unset(id); - return true; - } - return false; - } - -}); - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/local", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.local", Demo.Func);//set、get函数 -SetGetView = BI.inherit(BI.View, { - _defaultConfig: function () { - return BI.extend(SetGetView.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-set-get" - }) - }, - - _init: function () { - SetGetView.superclass._init.apply(this, arguments); - }, - - change: function (changed) { - this._showModelData(); - }, - - _createLeft: function () { - var self = this; - return (this.left = BI.createWidget({ - type: "bi.border", - items: { - north: { - el: { - type: "bi.label", - cls: "left-title", - text: "get、set用法:", - height: 30 - }, - height: 30 - }, - center: { - el: { - type: "bi.button_group", - items: BI.createItems(this.model.get("arr"), { - type: "bi.text_button", - cls: "left-nav", - height: 30, - handler: function (v) { - self.model.set("click", v); - } - }), - layouts: [{ - type: "bi.vertical" - }] - } - } - } - })) - }, - - _showModelData: function () { - this.text.setText(JSON.stringify(this.model.toJSON())); - }, - - _createRight: function () { - return (this.right = BI.createWidget({ - type: "bi.border", - items: { - north: { - el: { - type: "bi.label", - cls: "right-title", - text: "Model层数据", - height: 30 - }, - height: 30 - }, - center: { - el: this.text = BI.createWidget({ - type: "bi.label", - whiteSpace: "normal", - textHeight: 50 - }) - } - } - })) - }, - - render: function (vessel) { - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [{ - el: this._createLeft() - }, { - el: this._createRight() - }], - hgap: 50, - vgap: 100 - }) - this._showModelData(); - } -}) - -SetGetModel = BI.inherit(BI.Model, { - _defaultConfig: function () { - return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments), { - arr: [ - {text: "item1", value: 1}, - {text: "item2", value: 2}, - {text: "item3", value: 3}, - {text: "item4", value: 4}, - {text: "item5", value: 5}, - {text: "item6", value: 6}, - {text: "item7", value: 7}, - {text: "item8", value: 8} - ] - }) - }, - - _init: function () { - SetGetModel.superclass._init.apply(this, arguments); - } - -}) - - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/setget", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.setget", Demo.Func);//skipTo 函数 -SkipToView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(SkipToView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-skip-to" - }) - }, - - _init: function(){ - SkipToView.superclass._init.apply(this, arguments); - }, - - _createNav: function(){ - var self = this; - var nav = BI.createWidget({ - type: "bi.button_group", - cls: "top-nav", - items: BI.createItems(this.model.get("items"), { - type: "bi.text_button", - height: 30, - textAlign: "center", - hgap: 20 - }), - layouts: [{ - type: "bi.left", - height: 40, - vgap: 5, - hgap: 3 - }] - }); - nav.on(BI.ButtonGroup.EVENT_CHANGE, function(){ - self.skipTo(this.getValue()[0], "pane", this.getValue()[0]); - }); - return nav; - }, - - _createPane: function(){ - var pane = BI.createWidget({ - type:"bi.center", - cls: "center-pane", - height: 200 - }); - this.addSubVessel("pane", pane, { - defaultShowName: "green" - }); - return pane; - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.vertical", - element: vessel, - items: [this._createNav(), this._createPane()], - vgap: 10, - hgap: 10 - }) - }, - - refresh: function(){ - this.skipTo("green", "pane", "green"); - } -}); - -SkipToModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(SkipToModel.superclass._defaultConfig.apply(this, arguments),{ - "red": { - text: "hotpink" - },"blue": { - text: "cornflowerblue" - },"green": { - text: "darkcyan" - },"yellow": { - text: "darkgoldenrod" - } - }) - }, - _static: function(){ - return { - items: [{ - text: "hotpink", - value: "red", - cls: "red-pane mvc-button" - }, { - text: "cornflowerblue", - value: "blue", - cls: "blue-pane mvc-button" - }, { - text: "darkcyan", - value: "green", - cls: "green-pane mvc-button", - selected: true - }, { - text: "darkgoldenrod", - value: "yellow", - cls: "yellow-pane mvc-button" - }] - } - }, - - _init: function(){ - SkipToModel.superclass._init.apply(this, arguments); - } -}); - -//Red pane #FF69B4 -SkipToRedView = BI.inherit(BI.View, { - _init: function(){ - SkipToRedView.superclass._init.apply(this, arguments); - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.absolute", - element: vessel, - cls: "red-pane", - items: [{ - el: { - type: "bi.label", - text: "Model Data: " + JSON.stringify(this.model.toJSON()), - hgap: 20, - height: 26 - } - }] - }) - } - -}); - -SkipToRedModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ - - }) - }, - - _init: function(){ - SkipToRedModel.superclass._init.apply(this, arguments); - } -}); - -//Blue pane #6495ED -SkipToBlueView = BI.inherit(BI.View, { - _init: function(){ - SkipToBlueView.superclass._init.apply(this, arguments); - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.absolute", - element: vessel, - cls: "blue-pane", - items: [{ - el: { - type: "bi.label", - text: "Model Data: " + JSON.stringify(this.model.toJSON()), - hgap: 20, - height: 26 - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] - }) - } -}); - -SkipToBlueModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ - }) - }, - - _init: function(){ - SkipToGreenModel.superclass._init.apply(this, arguments); - } -}); - -//Dark green pane #008B8B -SkipToGreenView = BI.inherit(BI.View, { - _init: function(){ - SkipToGreenView.superclass._init.apply(this, arguments); - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.absolute", - element: vessel, - cls: "green-pane", - items: [{ - el:{ - type: "bi.label", - text: "Model Data: " + JSON.stringify(this.model.toJSON()), - hgap: 20, - height: 26 - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] - }) - } -}); - -SkipToGreenModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ - }) - }, - - _init: function(){ - SkipToGreenModel.superclass._init.apply(this, arguments); - } -}); - -//Dark yellow pane #B8860B -SkipToYellowView = BI.inherit(BI.View, { - _init: function(){ - SkipToYellowView.superclass._init.apply(this, arguments); - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.absolute", - element: vessel, - cls: "yellow-pane", - items: [{ - el:{ - type: "bi.label", - text: "Model Data: " + JSON.stringify(this.model.toJSON()), - hgap: 20, - height: 26 - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] - }) - } -}); - -SkipToYellowModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ - }) - }, - - _init: function(){ - SkipToYellowModel.superclass._init.apply(this, arguments); - } -}); - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/skipTo", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.skipTo", Demo.Func); -//splice和duplicate函数 -SpliceDuplicateView = BI.inherit(BI.View, { - _defaultConfig: function () { - return BI.extend(SpliceDuplicateView.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-splice-duplicate" - }) - }, - - _init: function () { - SpliceDuplicateView.superclass._init.apply(this, arguments); - this.children = {}; - }, - - splice: function (old, key1, key2) { - this.children[key1].destroy(); - delete this.children[key1]; - this._showModelData(); - }, - - duplicate: function (copy, key1, key2) { - this.add(copy); - this._showModelData(); - }, - - _showModelData: function () { - //这里只是为了输出this.model.data 原则上是不允许这么调用的 - this.text.setText("父级数据：" + JSON.stringify(this.model.data)); - }, - - render: function (vessel) { - this.text = BI.createWidget({ - type: "bi.label", - height: 50, - cls: "superiors-label" - }); - this.container = BI.createWidget({ - type: "bi.vertical", - element: vessel, - items: [this.text], - hgap: 100, - vgap: 10 - }); - this._showModelData(); - }, - - add: function (id) { - this.children[id] = BI.createWidget({ - type: "bi.center", - hgap: 10, - vgap: 10 - }); - this.addSubVessel(id, this.children[id], { - defaultShowName: "sdSub" - }); - this.skipTo("sdSub", id, id); - this.container.addItem(this.children[id]); - }, - - refresh: function () { - var self = this; - BI.each(this.model.toJSON(), function (key, value) { - if (!self.children[key]) { - self.add(key); - } - }) - } -}); - -SpliceDuplicateModel = BI.inherit(BI.Model, { - _defaultConfig: function () { - return BI.extend(SpliceDuplicateModel.superclass._defaultConfig.apply(this, arguments), { - "1": { - name: "名字" - } - }) - }, - - splice: function (key1) { - delete this.data[key1]; - }, - - similar: function (value, key1) { - value.name = BI.Func.createDistinctName(this.data, this.get(key1).name); - return value; - }, - - duplicate: function (copy, key1) { - this.data[copy] = this.get(copy); - }, - - _init: function () { - SpliceDuplicateModel.superclass._init.apply(this, arguments); - }, - - refresh: function () { - this.data = BI.deepClone(this.toJSON()); - } -}); - -SDSubView = BI.inherit(BI.View, { - _defaultConfig: function () { - return SDSubView.superclass._defaultConfig.apply(this, arguments); - }, - - _init: function () { - SDSubView.superclass._init.apply(this, arguments); - }, - - render: function (vessel) { - var self = this; - BI.createWidget({ - type: "bi.center", - element: vessel, - cls: "sd-child", - height: 30, - items: [{ - type: "bi.text_button", - height: 30, - text: "复制 " + this.model.get("name") + " , 数据：" + JSON.stringify(this.model.toJSON()), - cls: "right-button-add", - handler: function () { - self.model.copy(); - } - }, { - type: "bi.text_button", - height: 30, - text: "删除", - cls: "right-button-del", - handler: function () { - self.model.destroy(); - } - }] - }) - } -}); - -SDSubModel = BI.inherit(BI.Model, { - _defaultConfig: function () { - return BI.extend(SDSubModel.superclass._defaultConfig.apply(this, arguments), {}); - }, - - _init: function () { - SDSubModel.superclass._init.apply(this, arguments); - } -}); - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/spliceDuplicate", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.spliceDuplicate", Demo.Func); -TmpView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(TmpView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-tmp" - }) - }, - - _init: function(){ - TmpView.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.data1){ - this._showModelData(); - } - }, - - _showModelData: function(){ - this.text.setText("父级Model层数据为："+JSON.stringify(this.model.toJSON())); - }, - - _createMain: function(){ - var self = this; - return BI.createWidget({ - type: "bi.border", - items: { - west: { - el: { - type: "bi.vertical", - vgap: 10, - items: [{ - el: (this.text = BI.createWidget({ - type: "bi.label", - whiteSpace: "normal" - })) - }, { - el: { - type: "bi.text_button", - cls: "tmp-button mvc-button", - text: "点击触发事件tmp('data1', {child: {type: {value: \"临时数据\"}}})", - height: 30, - handler: function(){ - self.model.tmp("data1", { - child: { - type: { - value: "临时数据" - } - } - }) - } - } - }, { - el: { - type: "bi.text_button", - cls: "tmp-button mvc-button", - text: "点击触发事件submit", - height: 30, - handler: function(){ - self.model.submit(); - } - } - }, { - el: { - type: "bi.text_button", - cls: "tmp-button mvc-button", - text: "点击跳转到右方", - height: 30, - handler: function(){ - self.addSubVessel("test", self.center).skipTo("child", "test", "data1"); - } - } - }] - }, - width: 200 - }, - center: { - el: (this.center = BI.createWidget()) - } - } - }) - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [{ - el: this._createMain() - }], - hgap: 50, - vgap: 100 - }) - }, - - refresh: function(){ - this._showModelData(); - } -}) - -TmpModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(TmpModel.superclass._defaultConfig.apply(this, arguments),{ - data1: { - child: { - type: { - value: "这是一个测试数据" - } - } - }, - data2: "test" - }) - }, - - _init: function(){ - TmpModel.superclass._init.apply(this, arguments); - } - -}) - -TmpChildView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(TmpChildView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-tmp-child" - }) - }, - - _init: function(){ - TmpChildView.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.child){ - this._showModelData(); - } - }, - - _showModelData: function(){ - this.text.setText("子级Model层数据为："+JSON.stringify(this.model.toJSON())); - }, - - _createMain: function(){ - var self = this; - return BI.createWidget({ - type: "bi.border", - items: { - west: { - el: { - type: "bi.vertical", - vgap: 10, - items: [{ - el: (this.text = BI.createWidget({ - type: "bi.label", - whiteSpace: "normal" - })) - }, { - el: { - type: "bi.text_button", - cls: "tmp-button mvc-button", - text: "点击触发事件set", - height: 30, - handler: function(){ - self.set("child", { - type: { - value: "值改变了" - } - }) - } - } - }, { - el: { - type: "bi.text_button", - cls: "tmp-button mvc-button", - text: "点击跳转到右方", - height: 30, - handler: function(){ - self.addSubVessel("test", self.center).skipTo("child", "test", "child"); - } - } - }] - }, - width: 200 - }, - center: { - el: (this.center = BI.createWidget()) - } - } - }) - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [{ - el: this._createMain() - }], - hgap: 50 - }) - }, - - refresh: function(){ - this._showModelData(); - } -}) - -TmpChildModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(TmpChildModel.superclass._defaultConfig.apply(this, arguments),{ - - }) - }, - - _init: function(){ - TmpChildModel.superclass._init.apply(this, arguments); - } - -}) -TmpChildChildView = BI.inherit(BI.View, { - _defaultConfig: function(){ - return BI.extend(TmpChildChildView.superclass._defaultConfig.apply(this, arguments),{ - baseCls: "bi-tmp-child-child" - }) - }, - - _init: function(){ - TmpChildChildView.superclass._init.apply(this, arguments); - }, - - change: function(changed){ - if(changed.type){ - this._showModelData(); - } - }, - - _showModelData: function(){ - this.text.setText("叶节点数据为："+JSON.stringify(this.model.toJSON())); - }, - - _createMain: function(){ - return (this.text = BI.createWidget({ - type: "bi.label", - whiteSpace: "normal" - })) - }, - - render: function(vessel){ - BI.createWidget({ - type: "bi.center", - element: vessel, - items: [{ - el: this._createMain() - }], - hgap: 50 - }) - }, - - refresh: function(){ - this._showModelData(); - } -}) - -TmpChildChildModel = BI.inherit(BI.Model, { - _defaultConfig: function(){ - return BI.extend(TmpChildChildModel.superclass._defaultConfig.apply(this, arguments),{ - - }) - }, - - _init: function(){ - TmpChildChildModel.superclass._init.apply(this, arguments); - } - -}) - -Demo.Func = BI.inherit(BI.Widget, { - render: function () { - var view = BI.View.createView("/tmp", {}, { - element: this - }); - view.populate(); - }, - - mounted: function () { - } -}); -BI.shortcut("demo.tmp", Demo.Func); +BI.shortcut("demo.face", Demo.Face);//change函数 +ChangeView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(ChangeView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-change" + }) + }, + + _init: function(){ + ChangeView.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.child){ + this._showModelData(); + } + if(changed.superiors){ + this._showModelData(); + } + }, + + _showModelData: function(){ + this.outerText.setText("父级Model层数据: " + JSON.stringify(this.model.toJSON())); + }, + + _createOuter: function(){ + this.outerText = BI.createWidget({ + type: "bi.label", + cls: "outer-text", + whiteSpace: "normal" + }); + + return BI.createWidget({ + type: "bi.border", + items: { + north: { + el: this.outerText, + height: 50 + }, + center: this._createInner() + } + }); + }, + + _createInner: function(){ + var innerPane = BI.createWidget({ + type: "bi.absolute", + cls: "inner" + }); + this.addSubVessel("innerPane", innerPane, { + defaultShowName: "inner" + }); + return innerPane; + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [this._createOuter()], + hgap: 100, + vgap: 100 + }); + + this._showModelData(); + }, + + refresh: function(){ + this.skipTo("inner", "innerPane", "superiors"); + } +}); + +ChangeModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(ChangeModel.superclass._defaultConfig.apply(this, arguments),{ + superiors: { + child: "default" + }, + child: "default" + }) + }, + + _init: function(){ + ChangeModel.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.superiors){ + this.set("child", changed.superiors.child); + } + } +}); + +//ChangeView 的子级 +ChangeInnerView = BI.inherit(BI.View, { + _init: function(){ + ChangeInnerView.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.child){ + this._showModelData(); + } + }, + + _createOuter: function(){ + var self = this; + this.text = BI.createWidget({ + type: "bi.label", + height: 26 + }); + + this.buttons = BI.createWidget({ + type: "bi.button_group", + items: BI.createItems(this.model.get("items"), { + type: "bi.text_button", + height: 30, + textAlign: "center", + hgap: 20 + }) + }); + + this.buttons.on(BI.ButtonGroup.EVENT_CHANGE, function(){ + self.model.set("child", this.getValue()[0]); + }); + + return BI.createWidget({ + type: "bi.vertical", + vgap: 20, + items: [{ + type: "bi.center", + items: [this.buttons], + height: 30 + }, this.text] + }); + }, + + _showModelData: function(){ + this.text.setText("子级Model层数据: " + JSON.stringify(this.model.toJSON())); + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [this._createOuter()] + }); + this._showModelData(); + } +}); + + +ChangeInnerModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(ChangeInnerModel.superclass._defaultConfig.apply(this, arguments),{ + + }) + }, + + _static: function(){ + return { + items: [{ + text: "Type-1", + value: "First", + cls: "type-first mvc-button" + }, { + text: "Type-2", + value: "Second", + cls: "type-second mvc-button" + }, { + text: "Type-3", + value: "third", + cls: "type-third mvc-button" + }] + } + }, + + _init: function(){ + ChangeInnerModel.superclass._init.apply(this, arguments); + } + +}); + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/change", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.change", Demo.Func);//local函数 +LocalView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(LocalView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-local" + }) + }, + + _init: function(){ + LocalView.superclass._init.apply(this, arguments); + this.buttons = {}; + }, + + _addElement2Vessel: function(id){ + var self = this; + this.buttons[id] = this.elementVessel.addItem({ + type: "bi.text_button", + text: "Button:" + id, + width: 180, + height: 22, + cls: "delete-button button", + handler: function(){ + self.set("delete", id); + } + }) + }, + + _deleteElement: function(id){ + this.buttons[id] && this.buttons[id].destroy(); + delete this.buttons[id]; + }, + + _createTop: function(){ + var self = this; + this.elementVessel = BI.createWidget({ + type: "bi.left", + height: 200, + cls: "vessel-border", + scrollable: true, + vgap: 10, + hgap: 10 + }); + + return BI.createWidget({ + type: "bi.vertical", + items: [ + { + el: { + type: "bi.text_button", + text: "点击添加元素", + cls: "top-button", + handler: function(){ + self.model.set("add", true); + }, + height: 30 + } + }, + this.elementVessel + ] + }) + }, + + _showModelData: function(){ + this.text.setText(JSON.stringify(this.model.toJSON())); + }, + + _createCenter: function(){ + var modelData = BI.createWidget({ + type: "bi.center", + vgap: 10, + hgap: 10, + cls: "vessel-border", + height: 200, + items: [{ + el: this.text = BI.createWidget({ + type: "bi.label", + hgap: 30, + textHeight: 30, + whiteSpace: "normal" + }) + }] + }); + + return BI.createWidget({ + type: "bi.vertical", + items: [ + { + el: { + type: "bi.label", + cls: "bottom-label", + text: "Model层数据", + height: 30 + } + }, + modelData + ] + }) + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.vertical", + element: vessel, + items: [{ + el :this._createTop() + },{ + el : this._createCenter() + }], + hgap: 50, + vgap: 20 + }); + + this._showModelData(); + }, + + local: function(){ + if(this.model.has("add")){ + var add = this.model.get("add"); + this._addElement2Vessel(this.model.getEditing()); + this._showModelData(); + return true; + } + if(this.model.has("delete")){ + var id = this.model.get("delete"); + this._deleteElement(id); + this._showModelData(); + return true; + } + return false; + } +}); + +LocalModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(LocalModel.superclass._defaultConfig.apply(this, arguments),{ + + }) + }, + + _init: function(){ + LocalModel.superclass._init.apply(this, arguments); + }, + + local: function(){ + if(this.has("add")){ + this.get("add"); + var id = BI.UUID(); + this.set(id, "这是新增的属性:"+id); + this.setEditing(id); + return true; + } + if(this.has("delete")){ + var id = this.get("delete"); + this.unset(id); + return true; + } + return false; + } + +}); + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/local", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.local", Demo.Func);//set、get函数 +SetGetView = BI.inherit(BI.View, { + _defaultConfig: function () { + return BI.extend(SetGetView.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-set-get" + }) + }, + + _init: function () { + SetGetView.superclass._init.apply(this, arguments); + }, + + change: function (changed) { + this._showModelData(); + }, + + _createLeft: function () { + var self = this; + return (this.left = BI.createWidget({ + type: "bi.border", + items: { + north: { + el: { + type: "bi.label", + cls: "left-title", + text: "get、set用法:", + height: 30 + }, + height: 30 + }, + center: { + el: { + type: "bi.button_group", + items: BI.createItems(this.model.get("arr"), { + type: "bi.text_button", + cls: "left-nav", + height: 30, + handler: function (v) { + self.model.set("click", v); + } + }), + layouts: [{ + type: "bi.vertical" + }] + } + } + } + })) + }, + + _showModelData: function () { + this.text.setText(JSON.stringify(this.model.toJSON())); + }, + + _createRight: function () { + return (this.right = BI.createWidget({ + type: "bi.border", + items: { + north: { + el: { + type: "bi.label", + cls: "right-title", + text: "Model层数据", + height: 30 + }, + height: 30 + }, + center: { + el: this.text = BI.createWidget({ + type: "bi.label", + whiteSpace: "normal", + textHeight: 50 + }) + } + } + })) + }, + + render: function (vessel) { + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [{ + el: this._createLeft() + }, { + el: this._createRight() + }], + hgap: 50, + vgap: 100 + }) + this._showModelData(); + } +}) + +SetGetModel = BI.inherit(BI.Model, { + _defaultConfig: function () { + return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments), { + arr: [ + {text: "item1", value: 1}, + {text: "item2", value: 2}, + {text: "item3", value: 3}, + {text: "item4", value: 4}, + {text: "item5", value: 5}, + {text: "item6", value: 6}, + {text: "item7", value: 7}, + {text: "item8", value: 8} + ] + }) + }, + + _init: function () { + SetGetModel.superclass._init.apply(this, arguments); + } + +}) + + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/setget", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.setget", Demo.Func);//skipTo 函数 +SkipToView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(SkipToView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-skip-to" + }) + }, + + _init: function(){ + SkipToView.superclass._init.apply(this, arguments); + }, + + _createNav: function(){ + var self = this; + var nav = BI.createWidget({ + type: "bi.button_group", + cls: "top-nav", + items: BI.createItems(this.model.get("items"), { + type: "bi.text_button", + height: 30, + textAlign: "center", + hgap: 20 + }), + layouts: [{ + type: "bi.left", + height: 40, + vgap: 5, + hgap: 3 + }] + }); + nav.on(BI.ButtonGroup.EVENT_CHANGE, function(){ + self.skipTo(this.getValue()[0], "pane", this.getValue()[0]); + }); + return nav; + }, + + _createPane: function(){ + var pane = BI.createWidget({ + type:"bi.center", + cls: "center-pane", + height: 200 + }); + this.addSubVessel("pane", pane, { + defaultShowName: "green" + }); + return pane; + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.vertical", + element: vessel, + items: [this._createNav(), this._createPane()], + vgap: 10, + hgap: 10 + }) + }, + + refresh: function(){ + this.skipTo("green", "pane", "green"); + } +}); + +SkipToModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(SkipToModel.superclass._defaultConfig.apply(this, arguments),{ + "red": { + text: "hotpink" + },"blue": { + text: "cornflowerblue" + },"green": { + text: "darkcyan" + },"yellow": { + text: "darkgoldenrod" + } + }) + }, + _static: function(){ + return { + items: [{ + text: "hotpink", + value: "red", + cls: "red-pane mvc-button" + }, { + text: "cornflowerblue", + value: "blue", + cls: "blue-pane mvc-button" + }, { + text: "darkcyan", + value: "green", + cls: "green-pane mvc-button", + selected: true + }, { + text: "darkgoldenrod", + value: "yellow", + cls: "yellow-pane mvc-button" + }] + } + }, + + _init: function(){ + SkipToModel.superclass._init.apply(this, arguments); + } +}); + +//Red pane #FF69B4 +SkipToRedView = BI.inherit(BI.View, { + _init: function(){ + SkipToRedView.superclass._init.apply(this, arguments); + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.absolute", + element: vessel, + cls: "red-pane", + items: [{ + el: { + type: "bi.label", + text: "Model Data: " + JSON.stringify(this.model.toJSON()), + hgap: 20, + height: 26 + } + }] + }) + } + +}); + +SkipToRedModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ + + }) + }, + + _init: function(){ + SkipToRedModel.superclass._init.apply(this, arguments); + } +}); + +//Blue pane #6495ED +SkipToBlueView = BI.inherit(BI.View, { + _init: function(){ + SkipToBlueView.superclass._init.apply(this, arguments); + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.absolute", + element: vessel, + cls: "blue-pane", + items: [{ + el: { + type: "bi.label", + text: "Model Data: " + JSON.stringify(this.model.toJSON()), + hgap: 20, + height: 26 + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + }] + }) + } +}); + +SkipToBlueModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ + }) + }, + + _init: function(){ + SkipToGreenModel.superclass._init.apply(this, arguments); + } +}); + +//Dark green pane #008B8B +SkipToGreenView = BI.inherit(BI.View, { + _init: function(){ + SkipToGreenView.superclass._init.apply(this, arguments); + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.absolute", + element: vessel, + cls: "green-pane", + items: [{ + el:{ + type: "bi.label", + text: "Model Data: " + JSON.stringify(this.model.toJSON()), + hgap: 20, + height: 26 + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + }] + }) + } +}); + +SkipToGreenModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ + }) + }, + + _init: function(){ + SkipToGreenModel.superclass._init.apply(this, arguments); + } +}); + +//Dark yellow pane #B8860B +SkipToYellowView = BI.inherit(BI.View, { + _init: function(){ + SkipToYellowView.superclass._init.apply(this, arguments); + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.absolute", + element: vessel, + cls: "yellow-pane", + items: [{ + el:{ + type: "bi.label", + text: "Model Data: " + JSON.stringify(this.model.toJSON()), + hgap: 20, + height: 26 + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + }] + }) + } +}); + +SkipToYellowModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(SetGetModel.superclass._defaultConfig.apply(this, arguments),{ + }) + }, + + _init: function(){ + SkipToYellowModel.superclass._init.apply(this, arguments); + } +}); + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/skipTo", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.skipTo", Demo.Func); +//splice和duplicate函数 +SpliceDuplicateView = BI.inherit(BI.View, { + _defaultConfig: function () { + return BI.extend(SpliceDuplicateView.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-splice-duplicate" + }) + }, + + _init: function () { + SpliceDuplicateView.superclass._init.apply(this, arguments); + this.children = {}; + }, + + splice: function (old, key1, key2) { + this.children[key1].destroy(); + delete this.children[key1]; + this._showModelData(); + }, + + duplicate: function (copy, key1, key2) { + this.add(copy); + this._showModelData(); + }, + + _showModelData: function () { + //这里只是为了输出this.model.data 原则上是不允许这么调用的 + this.text.setText("父级数据：" + JSON.stringify(this.model.data)); + }, + + render: function (vessel) { + this.text = BI.createWidget({ + type: "bi.label", + height: 50, + cls: "superiors-label" + }); + this.container = BI.createWidget({ + type: "bi.vertical", + element: vessel, + items: [this.text], + hgap: 100, + vgap: 10 + }); + this._showModelData(); + }, + + add: function (id) { + this.children[id] = BI.createWidget({ + type: "bi.center", + hgap: 10, + vgap: 10 + }); + this.addSubVessel(id, this.children[id], { + defaultShowName: "sdSub" + }); + this.skipTo("sdSub", id, id); + this.container.addItem(this.children[id]); + }, + + refresh: function () { + var self = this; + BI.each(this.model.toJSON(), function (key, value) { + if (!self.children[key]) { + self.add(key); + } + }) + } +}); + +SpliceDuplicateModel = BI.inherit(BI.Model, { + _defaultConfig: function () { + return BI.extend(SpliceDuplicateModel.superclass._defaultConfig.apply(this, arguments), { + "1": { + name: "名字" + } + }) + }, + + splice: function (key1) { + delete this.data[key1]; + }, + + similar: function (value, key1) { + value.name = BI.Func.createDistinctName(this.data, this.get(key1).name); + return value; + }, + + duplicate: function (copy, key1) { + this.data[copy] = this.get(copy); + }, + + _init: function () { + SpliceDuplicateModel.superclass._init.apply(this, arguments); + }, + + refresh: function () { + this.data = BI.deepClone(this.toJSON()); + } +}); + +SDSubView = BI.inherit(BI.View, { + _defaultConfig: function () { + return SDSubView.superclass._defaultConfig.apply(this, arguments); + }, + + _init: function () { + SDSubView.superclass._init.apply(this, arguments); + }, + + render: function (vessel) { + var self = this; + BI.createWidget({ + type: "bi.center", + element: vessel, + cls: "sd-child", + height: 30, + items: [{ + type: "bi.text_button", + height: 30, + text: "复制 " + this.model.get("name") + " , 数据：" + JSON.stringify(this.model.toJSON()), + cls: "right-button-add", + handler: function () { + self.model.copy(); + } + }, { + type: "bi.text_button", + height: 30, + text: "删除", + cls: "right-button-del", + handler: function () { + self.model.destroy(); + } + }] + }) + } +}); + +SDSubModel = BI.inherit(BI.Model, { + _defaultConfig: function () { + return BI.extend(SDSubModel.superclass._defaultConfig.apply(this, arguments), {}); + }, + + _init: function () { + SDSubModel.superclass._init.apply(this, arguments); + } +}); + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/spliceDuplicate", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.spliceDuplicate", Demo.Func); +TmpView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(TmpView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-tmp" + }) + }, + + _init: function(){ + TmpView.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.data1){ + this._showModelData(); + } + }, + + _showModelData: function(){ + this.text.setText("父级Model层数据为："+JSON.stringify(this.model.toJSON())); + }, + + _createMain: function(){ + var self = this; + return BI.createWidget({ + type: "bi.border", + items: { + west: { + el: { + type: "bi.vertical", + vgap: 10, + items: [{ + el: (this.text = BI.createWidget({ + type: "bi.label", + whiteSpace: "normal" + })) + }, { + el: { + type: "bi.text_button", + cls: "tmp-button mvc-button", + text: "点击触发事件tmp('data1', {child: {type: {value: \"临时数据\"}}})", + height: 30, + handler: function(){ + self.model.tmp("data1", { + child: { + type: { + value: "临时数据" + } + } + }) + } + } + }, { + el: { + type: "bi.text_button", + cls: "tmp-button mvc-button", + text: "点击触发事件submit", + height: 30, + handler: function(){ + self.model.submit(); + } + } + }, { + el: { + type: "bi.text_button", + cls: "tmp-button mvc-button", + text: "点击跳转到右方", + height: 30, + handler: function(){ + self.addSubVessel("test", self.center).skipTo("child", "test", "data1"); + } + } + }] + }, + width: 200 + }, + center: { + el: (this.center = BI.createWidget()) + } + } + }) + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [{ + el: this._createMain() + }], + hgap: 50, + vgap: 100 + }) + }, + + refresh: function(){ + this._showModelData(); + } +}) + +TmpModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(TmpModel.superclass._defaultConfig.apply(this, arguments),{ + data1: { + child: { + type: { + value: "这是一个测试数据" + } + } + }, + data2: "test" + }) + }, + + _init: function(){ + TmpModel.superclass._init.apply(this, arguments); + } + +}) + +TmpChildView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(TmpChildView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-tmp-child" + }) + }, + + _init: function(){ + TmpChildView.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.child){ + this._showModelData(); + } + }, + + _showModelData: function(){ + this.text.setText("子级Model层数据为："+JSON.stringify(this.model.toJSON())); + }, + + _createMain: function(){ + var self = this; + return BI.createWidget({ + type: "bi.border", + items: { + west: { + el: { + type: "bi.vertical", + vgap: 10, + items: [{ + el: (this.text = BI.createWidget({ + type: "bi.label", + whiteSpace: "normal" + })) + }, { + el: { + type: "bi.text_button", + cls: "tmp-button mvc-button", + text: "点击触发事件set", + height: 30, + handler: function(){ + self.set("child", { + type: { + value: "值改变了" + } + }) + } + } + }, { + el: { + type: "bi.text_button", + cls: "tmp-button mvc-button", + text: "点击跳转到右方", + height: 30, + handler: function(){ + self.addSubVessel("test", self.center).skipTo("child", "test", "child"); + } + } + }] + }, + width: 200 + }, + center: { + el: (this.center = BI.createWidget()) + } + } + }) + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [{ + el: this._createMain() + }], + hgap: 50 + }) + }, + + refresh: function(){ + this._showModelData(); + } +}) + +TmpChildModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(TmpChildModel.superclass._defaultConfig.apply(this, arguments),{ + + }) + }, + + _init: function(){ + TmpChildModel.superclass._init.apply(this, arguments); + } + +}) +TmpChildChildView = BI.inherit(BI.View, { + _defaultConfig: function(){ + return BI.extend(TmpChildChildView.superclass._defaultConfig.apply(this, arguments),{ + baseCls: "bi-tmp-child-child" + }) + }, + + _init: function(){ + TmpChildChildView.superclass._init.apply(this, arguments); + }, + + change: function(changed){ + if(changed.type){ + this._showModelData(); + } + }, + + _showModelData: function(){ + this.text.setText("叶节点数据为："+JSON.stringify(this.model.toJSON())); + }, + + _createMain: function(){ + return (this.text = BI.createWidget({ + type: "bi.label", + whiteSpace: "normal" + })) + }, + + render: function(vessel){ + BI.createWidget({ + type: "bi.center", + element: vessel, + items: [{ + el: this._createMain() + }], + hgap: 50 + }) + }, + + refresh: function(){ + this._showModelData(); + } +}) + +TmpChildChildModel = BI.inherit(BI.Model, { + _defaultConfig: function(){ + return BI.extend(TmpChildChildModel.superclass._defaultConfig.apply(this, arguments),{ + + }) + }, + + _init: function(){ + TmpChildChildModel.superclass._init.apply(this, arguments); + } + +}) + +Demo.Func = BI.inherit(BI.Widget, { + render: function () { + var view = BI.View.createView("/tmp", {}, { + element: this + }); + view.populate(); + }, + + mounted: function () { + } +}); +BI.shortcut("demo.tmp", Demo.Func); ;(function(){ var model = Fix.define({ name: "原始属性", @@ -10280,6 +10280,9 @@ BI.shortcut("demo.tmp", Demo.Func); return model; }, watch: { + "*.*.n": function () { + debugger + }, "arr.**": function () { debugger }, diff --git a/dist/fix/fix.js b/dist/fix/fix.js index b90d36145..d0408693d 100644 --- a/dist/fix/fix.js +++ b/dist/fix/fix.js @@ -400,7 +400,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons Observer.prototype.observeArray = function observeArray(items) { for (var i = 0, l = items.length; i < l; i++) { - items[i] = observe(items[i], this).model; + items[i] = observe(items[i], this, i).model; } return items; }; @@ -422,7 +422,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons } } - function observe(value, parentObserver) { + function observe(value, parentObserver, parentKey) { if (!_.isObject(value)) { return; } @@ -433,6 +433,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons ob = new Observer(value); } ob.parent = parentObserver || ob.parent; + ob.parentKey = parentKey; return ob; } @@ -445,7 +446,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons } var dep = observer && observer['__dep' + key] || new Dep(); observer && (observer['__dep' + key] = dep); - var childOb = !shallow && observe(val, observer); + var childOb = !shallow && observe(val, observer, key); props[key] = { enumerable: true, configurable: true, @@ -468,21 +469,33 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons return; } val = newVal; - childOb = !shallow && observe(newVal, observer); + childOb = !shallow && observe(newVal, observer, key); obj[key] = childOb ? childOb.model : newVal; dep.notify(); - //触发a.*绑定的hooks + //触发a.*绑定的依赖 _.each(model.__ob__._deps, function (dep) { dep.notify(); }); - //触发a.**绑定的hooks - var parent = model.__ob__; + //触发a.**绑定的依赖 + var parent = model.__ob__, + root = model.__ob__, + route = key; while (parent) { - _.each(parent._globalDeps, function (dep) { + _.each(parent._scopeDeps, function (dep) { dep.notify(); }); + if (parent.parentKey != null) { + route = parent.parentKey + '.' + route; + } + root = parent; parent = parent.parent; } + for (var _key2 in root._globalDeps) { + var reg = new RegExp(_key2); + if (reg.test(route)) { + root._globalDeps[_key2].notify(); + } + } } }; }); @@ -868,6 +881,65 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons } } + var VM = function () { + function VM(model) { + _classCallCheck(this, VM); + + var vm = this; + if (model instanceof Observer || model instanceof VM) { + model = model.model; + } + if (_.has(model, '__ob__')) { + this.$$model = model; + } else { + this.options = model || {}; + } + var keys = _.keys(this.$$model).concat(_.keys(this.computed)); + var props = {}; + + var _loop = function _loop(i, len) { + var key = keys[i]; + if (!(key in $$skipArray)) { + props[key] = { + enumerable: true, + configurable: true, + get: function get() { + return key in vm.$$computed ? vm.$$computed[key] : vm.$$model[key]; + }, + set: function set(val) { + if (!vm.$$model || !(key in vm.$$model)) { + return; + } + return vm.$$model[key] = val; + } + }; + } + }; + + for (var i = 0, len = keys.length; i < len; i++) { + _loop(i, len); + } + this.model = createViewModel$1({}, props); + this.$$model && (this.model.__ob__ = this.$$model.__ob__); + initComputed(this, this.computed); + initMethods(this, this.actions); + this._init(); + if (this.$$model) { + return this.model; + } + } + + VM.prototype._init = function _init() {}; + + VM.prototype.destroy = function destroy() { + for (var _key3 in this._computedWatchers) { + this._computedWatchers[_key3].teardown(); + } + }; + + return VM; + }(); + var falsy$1; var operators = { '||': falsy$1, @@ -887,6 +959,12 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons } return new Function('return ' + expr)(); } + + function routeToRegExp(route) { + route = route.replace(/\*./g, '[a-zA-Z0-9_]+.'); + return '^' + route + '$'; + } + function watch(model, expOrFn, cb, options) { if (isPlainObject(cb)) { options = cb; @@ -915,7 +993,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons if (_.has(operators, exp)) { return; } - if (/\*\*$|\*$/.test(exp)) { + //a.**或a.*形式 + if (/^[1-9a-zA-Z.]+(\*\*$|\*$)/.test(exp)) { var isGlobal = /\*\*$/.test(exp); if (isGlobal) { //a.**的形式 @@ -928,7 +1007,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons var v = getter.call(model, model); var dep = new Dep(); if (isGlobal) { - (v.__ob__._globalDeps || (v.__ob__._globalDeps = [])).push(dep); + (v.__ob__._scopeDeps || (v.__ob__._scopeDeps = [])).push(dep); } else { (v.__ob__._deps || (v.__ob__._deps = [])).push(dep); } @@ -938,11 +1017,39 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons }, cb); watchers.push(function unwatchFn() { w.teardown(); - v.__ob__._globalDeps && remove(v.__ob__._globalDeps, dep); + v.__ob__._scopeDeps && remove(v.__ob__._scopeDeps, dep); v.__ob__._deps && remove(v.__ob__._deps, dep); }); return; } + if (/\*\*/.test(exp)) { + throw new Error('not support'); + } + //其他含有*的情况，如*.a,*.*.a,a.*.a.* + if (/\*/.test(exp)) { + //补全路径 + var parent = model.__ob__.parent, + root = model.__ob__; + while (parent) { + exp = '*.' + exp; + root = parent; + parent = parent.parent; + } + var regStr = routeToRegExp(exp); + var _dep = new Dep(); + root._globalDeps || (root._globalDeps = {}); + root._globalDeps[regStr] = _dep; + + var _w = new Watcher(model, function () { + _dep.depend(); + return NaN; + }, cb); + watchers.push(function unwatchFn() { + _w.teardown(); + root._globalDeps && delete root._globalDeps[regStr]; + }); + return; + } var watcher = new Watcher(model, exp, function () { if (complete === true) { return; @@ -968,65 +1075,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons return watchers; } - var VM = function () { - function VM(model) { - _classCallCheck(this, VM); - - var vm = this; - if (model instanceof Observer || model instanceof VM) { - model = model.model; - } - if (_.has(model, '__ob__')) { - this.$$model = model; - } else { - this.options = model || {}; - } - var keys = _.keys(this.$$model).concat(_.keys(this.computed)); - var props = {}; - - var _loop = function _loop(i, len) { - var key = keys[i]; - if (!(key in $$skipArray)) { - props[key] = { - enumerable: true, - configurable: true, - get: function get() { - return key in vm.$$computed ? vm.$$computed[key] : vm.$$model[key]; - }, - set: function set(val) { - if (!vm.$$model || !(key in vm.$$model)) { - return; - } - return vm.$$model[key] = val; - } - }; - } - }; - - for (var i = 0, len = keys.length; i < len; i++) { - _loop(i, len); - } - this.model = createViewModel$1({}, props); - this.$$model && (this.model.__ob__ = this.$$model.__ob__); - initComputed(this, this.computed); - initMethods(this, this.actions); - this._init(); - if (this.$$model) { - return this.model; - } - } - - VM.prototype._init = function _init() {}; - - VM.prototype.destroy = function destroy() { - for (var _key2 in this._computedWatchers) { - this._computedWatchers[_key2].teardown(); - } - }; - - return VM; - }(); - function toJSON(model) { var result = void 0; if (_.isArray(model)) { @@ -1036,9 +1084,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons } } else if (isPlainObject(model)) { result = {}; - for (var _key3 in model) { - if (!_.has($$skipArray, _key3)) { - result[_key3] = toJSON(model[_key3]); + for (var _key4 in model) { + if (!_.has($$skipArray, _key4)) { + result[_key4] = toJSON(model[_key4]); } } } else { @@ -1055,7 +1103,6 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons exports.define = define; exports.version = version; exports.$$skipArray = $$skipArray; - exports.watch = watch; exports.VM = VM; exports.observerState = observerState; exports.Observer = Observer; @@ -1064,6 +1111,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons exports.set = set; exports.del = del; exports.Watcher = Watcher; + exports.watch = watch; exports.toJSON = toJSON; exports.__esModule = true; diff --git a/dist/sliders.css b/dist/sliders.css index 66780294e..a8d9688bb 100644 --- a/dist/sliders.css +++ b/dist/sliders.css @@ -24,15 +24,27 @@ -moz-border-radius: 7px; border-radius: 7px; } -.bi-single-slider-button .slider-button { - cursor: ew-resize; - -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; -} +.bi-single-slider-button .slider-button { + cursor: ew-resize; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} +.bi-slider-track .gray-track { + background-color: rgba(153, 153, 153, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.bi-slider-track .blue-track { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} .bi-slider-track .gray-track { background-color: rgba(153, 153, 153, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); @@ -45,15 +57,3 @@ -moz-border-radius: 3px; border-radius: 3px; } -.bi-slider-track .gray-track { - background-color: rgba(153, 153, 153, 0.3); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.bi-slider-track .blue-track { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -}