From 4725e80119c392c2a42c3b49b272034aa54a7701 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 29 Jul 2019 14:24:20 +0300 Subject: [PATCH] [common] refactoring for components --- apps/common/main/lib/component/Button.js | 2 +- apps/common/main/lib/component/CheckBox.js | 16 +++++++--------- apps/common/main/lib/component/ColorPalette.js | 8 +++----- .../main/lib/component/ColorPaletteExt.js | 6 +++--- apps/common/main/lib/component/ComboBox.js | 7 +++---- .../common/main/lib/component/ComboDataView.js | 2 +- apps/common/main/lib/component/DataView.js | 4 ++-- .../main/lib/component/DimensionPicker.js | 4 ++-- .../main/lib/component/HSBColorPicker.js | 4 ++-- apps/common/main/lib/component/InputField.js | 7 +++---- apps/common/main/lib/component/MaskedField.js | 6 +++--- apps/common/main/lib/component/Menu.js | 8 ++++---- apps/common/main/lib/component/MenuItem.js | 13 ++++++------- .../common/main/lib/component/MetricSpinner.js | 8 ++++---- apps/common/main/lib/component/RadioBox.js | 5 ++--- apps/common/main/lib/component/Scroller.js | 2 +- apps/common/main/lib/component/Slider.js | 14 ++++++-------- apps/common/main/lib/component/Switcher.js | 7 +++---- apps/common/main/lib/component/TableStyler.js | 4 ++-- .../main/lib/component/ThemeColorPalette.js | 18 +++++++++--------- apps/common/main/lib/component/TreeView.js | 2 +- 21 files changed, 68 insertions(+), 79 deletions(-) diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 816c88988..76a0957e6 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -319,7 +319,7 @@ define([ me.trigger('render:before', me); - me.cmpEl = $(me.el); + me.cmpEl = me.$el || $(me.el); if (parentEl) { me.setElement(parentEl, false); diff --git a/apps/common/main/lib/component/CheckBox.js b/apps/common/main/lib/component/CheckBox.js index 5aaa8a112..0d3d35c75 100644 --- a/apps/common/main/lib/component/CheckBox.js +++ b/apps/common/main/lib/component/CheckBox.js @@ -104,27 +104,25 @@ define([ }, render: function (parentEl) { - var me = this, - el = $(this.el); + var me = this; if (!me.rendered) { if (parentEl) { this.setElement(parentEl, false); parentEl.html(this.template({ labelText: this.options.labelText })); - el = $(this.el); } else { - el.html(this.template({ + me.$el.html(this.template({ labelText: this.options.labelText })); } - this.$chk = el.find('input[type=button]'); - this.$label = el.find('label'); - this.$chk.on('click', _.bind(this.onItemCheck, this)); - } + this.$chk = me.$el.find('input[type=button]'); + this.$label = me.$el.find('label'); + this.$chk.on('click', this.onItemCheck.bind(this)); - this.rendered = true; + this.rendered = true; + } if (this.options.disabled) this.setDisabled(this.options.disabled); diff --git a/apps/common/main/lib/component/ColorPalette.js b/apps/common/main/lib/component/ColorPalette.js index 106cfb761..ba35ca857 100644 --- a/apps/common/main/lib/component/ColorPalette.js +++ b/apps/common/main/lib/component/ColorPalette.js @@ -91,16 +91,14 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + me.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } if (!me.rendered) { - var el = this.cmpEl; - - el.on('click', 'span.color-item', _.bind(this.itemClick, this)); + me.cmpEl.on('click', 'span.color-item', me.itemClick.bind(me)); } me.rendered = true; diff --git a/apps/common/main/lib/component/ColorPaletteExt.js b/apps/common/main/lib/component/ColorPaletteExt.js index 98eadf69d..a6b7e9c9a 100644 --- a/apps/common/main/lib/component/ColorPaletteExt.js +++ b/apps/common/main/lib/component/ColorPaletteExt.js @@ -108,12 +108,12 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } - this.cmpEl.on('click', _.bind(this.handleClick, this)); + this.cmpEl.on('click', me.handleClick.bind(me)); } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } me.rendered = true; diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js index 8b24e3caf..2cccb52e0 100644 --- a/apps/common/main/lib/component/ComboBox.js +++ b/apps/common/main/lib/component/ComboBox.js @@ -104,8 +104,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -158,10 +157,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); } if (!me.rendered) { diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js index c10d000ca..d2b1e9b3e 100644 --- a/apps/common/main/lib/component/ComboDataView.js +++ b/apps/common/main/lib/component/ComboDataView.js @@ -148,7 +148,7 @@ define([ me.trigger('render:before', me); - me.cmpEl = $(me.el); + me.cmpEl = me.$el || $(me.el); var templateEl = me.template({ id : me.id, diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 67a027902..09c9e0a32 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -135,7 +135,7 @@ define([ if (_.isUndefined(this.model.id)) return this; - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template(this.model.toJSON())); el.addClass('item'); @@ -262,7 +262,6 @@ define([ this.trigger('render:before', this); - this.cmpEl = $(this.el); if (parentEl) { this.setElement(parentEl, false); this.cmpEl = $(this.template({ @@ -272,6 +271,7 @@ define([ parentEl.html(this.cmpEl); } else { + this.cmpEl = me.$el || $(this.el); this.cmpEl.html(this.template({ groups: me.groups ? me.groups.toJSON() : null, style: me.style diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js index 72c4d6b25..dab30a9d2 100644 --- a/apps/common/main/lib/component/DimensionPicker.js +++ b/apps/common/main/lib/component/DimensionPicker.js @@ -97,7 +97,7 @@ define([ me = this; - rootEl = $(this.el); + rootEl = me.$el || $(this.el); me.itemSize = me.options.itemSize; me.minRows = me.options.minRows; @@ -133,7 +133,7 @@ define([ }, render: function() { - $(this.el).html(this.template()); + (this.$el || $(this.el)).html(this.template()); return this; }, diff --git a/apps/common/main/lib/component/HSBColorPicker.js b/apps/common/main/lib/component/HSBColorPicker.js index 1a17387e1..316d862c9 100644 --- a/apps/common/main/lib/component/HSBColorPicker.js +++ b/apps/common/main/lib/component/HSBColorPicker.js @@ -82,7 +82,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el), + el = me.$el || $(this.el), arrowSatBrightness, arrowHue, areaSatBrightness, areaHue, previewColor, previewTransparentColor, previewColorText, @@ -278,7 +278,7 @@ define([ }, render: function () { - $(this.el).html(this.template()); + (this.$el || $(this.el)).html(this.template()); this.trigger('render:after', this); return this; diff --git a/apps/common/main/lib/component/InputField.js b/apps/common/main/lib/component/InputField.js index 054721355..952dbe54b 100644 --- a/apps/common/main/lib/component/InputField.js +++ b/apps/common/main/lib/component/InputField.js @@ -94,8 +94,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -142,10 +141,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } if (!me.rendered) { diff --git a/apps/common/main/lib/component/MaskedField.js b/apps/common/main/lib/component/MaskedField.js index 611e80bb9..1c55f7026 100644 --- a/apps/common/main/lib/component/MaskedField.js +++ b/apps/common/main/lib/component/MaskedField.js @@ -48,7 +48,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); el.addClass('masked-field user-select'); el.attr('maxlength', me.options.maxLength); @@ -75,11 +75,11 @@ define([ setValue: function(value) { if (this.options.maskExp.test(value) && value.length<=this.options.maxLength) - $(this.el).val(value); + this.$el.val(value); }, getValue: function() { - $(this.el).val(); + this.$el.val(); } }); }); \ No newline at end of file diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js index bb04c6b57..597b0baa6 100644 --- a/apps/common/main/lib/component/Menu.js +++ b/apps/common/main/lib/component/Menu.js @@ -208,7 +208,7 @@ define([ this.trigger('render:before', this); - this.cmpEl = $(this.el); + this.cmpEl = me.$el || $(this.el); if (parentEl) { this.setElement(parentEl, false); @@ -225,7 +225,7 @@ define([ this.cmpEl = this.template({ options : me.options }); - $(this.el).append(this.cmpEl); + this.$el.append(this.cmpEl); } } @@ -246,7 +246,7 @@ define([ if (this.options.maxHeight) { menuRoot.css({'max-height': me.options.maxHeight}); this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), + el: me.$el.find('.dropdown-menu '), minScrollbarLength: 30, suppressScrollX: true, alwaysVisibleY: this.scrollAlwaysVisible @@ -543,7 +543,7 @@ define([ if (top + menuH > docH) { menuRoot.css('max-height', (docH - top) + 'px'); (!this.scroller) && (this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), + el: this.$el.find('.dropdown-menu '), minScrollbarLength: 30, suppressScrollX: true, alwaysVisibleY: this.scrollAlwaysVisible diff --git a/apps/common/main/lib/component/MenuItem.js b/apps/common/main/lib/component/MenuItem.js index 7b49b77e2..7d7193987 100644 --- a/apps/common/main/lib/component/MenuItem.js +++ b/apps/common/main/lib/component/MenuItem.js @@ -119,8 +119,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.id = me.options.id || Common.UI.getId(); this.cls = me.options.cls; @@ -148,7 +147,7 @@ define([ render: function() { var me = this, - el = $(this.el); + el = me.$el || $(this.el); me.trigger('render:before', me); @@ -159,7 +158,7 @@ define([ el.off('click'); Common.UI.ToggleManager.unregister(me); - $(this.el).html(this.template({ + el.html(this.template({ id : me.id, caption : me.caption, iconCls : me.iconCls, @@ -170,7 +169,7 @@ define([ if (me.menu) { el.addClass('dropdown-submenu'); - me.menu.render($(this.el)); + me.menu.render(el); el.mouseenter(_.bind(me.menu.alignPosition, me.menu)); // el.focusin(_.bind(me.onFocusItem, me)); el.focusout(_.bind(me.onBlurItem, me)); @@ -214,7 +213,7 @@ define([ } if (this.disabled) - $(this.el).toggleClass('disabled', this.disabled); + el.toggleClass('disabled', this.disabled); el.on('click', _.bind(this.onItemClick, this)); el.on('mousedown', _.bind(this.onItemMouseDown, this)); @@ -223,7 +222,7 @@ define([ } } - me.cmpEl = $(this.el); + me.cmpEl = el; me.rendered = true; me.trigger('render:after', me); diff --git a/apps/common/main/lib/component/MetricSpinner.js b/apps/common/main/lib/component/MetricSpinner.js index e64b61522..584db251d 100644 --- a/apps/common/main/lib/component/MetricSpinner.js +++ b/apps/common/main/lib/component/MetricSpinner.js @@ -128,7 +128,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); el.addClass('spinner'); @@ -165,7 +165,7 @@ define([ this.setRawValue(this.value); if (this.options.width) { - $(this.el).width(this.options.width); + el.width(this.options.width); } if (this.options.defaultValue===undefined) @@ -176,7 +176,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template); this.$input = el.find('.form-control'); @@ -189,7 +189,7 @@ define([ }, setDisabled: function(disabled) { - var el = $(this.el); + var el = this.$el || $(this.el); if (disabled !== this.disabled) { el.find('button').toggleClass('disabled', disabled); el.toggleClass('disabled', disabled); diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js index 8b7ff4b6f..1b0f7084b 100644 --- a/apps/common/main/lib/component/RadioBox.js +++ b/apps/common/main/lib/component/RadioBox.js @@ -76,8 +76,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; this.name = this.options.name || Common.UI.getId(); @@ -94,7 +93,7 @@ define([ }, render: function () { - var el = $(this.el); + var el = this.$el || $(this.el); el.html(this.template({ labelText: this.options.labelText, name: this.name diff --git a/apps/common/main/lib/component/Scroller.js b/apps/common/main/lib/component/Scroller.js index 53e3783dd..db564e0d4 100644 --- a/apps/common/main/lib/component/Scroller.js +++ b/apps/common/main/lib/component/Scroller.js @@ -78,7 +78,7 @@ define([ render: function() { var me = this; - me.cmpEl = $(this.el); + me.cmpEl = me.$el || $(this.el); if (!me.rendered) { me.cmpEl.perfectScrollbar(_.extend({}, me.options)); diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index d11430466..0ee059b7e 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -104,8 +104,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.minValue = me.options.minValue; @@ -131,10 +130,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + me.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = me.$el; } this.cmpEl.find('.track-center').width(me.options.width - 14); @@ -299,8 +298,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.minValue = me.options.minValue; @@ -326,10 +324,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } var el = this.cmpEl; diff --git a/apps/common/main/lib/component/Switcher.js b/apps/common/main/lib/component/Switcher.js index e393011d2..a474e40ae 100644 --- a/apps/common/main/lib/component/Switcher.js +++ b/apps/common/main/lib/component/Switcher.js @@ -65,8 +65,7 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); - var me = this, - el = $(this.el); + var me = this; me.width = me.options.width; me.thumbWidth = me.options.thumbWidth; @@ -89,10 +88,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } this.thumb = this.cmpEl.find('.thumb'); diff --git a/apps/common/main/lib/component/TableStyler.js b/apps/common/main/lib/component/TableStyler.js index 1f2868e90..fab6c9640 100644 --- a/apps/common/main/lib/component/TableStyler.js +++ b/apps/common/main/lib/component/TableStyler.js @@ -335,10 +335,10 @@ define([ this.setElement(parentEl, false); parentEl.html(this.cmpEl); } else { - $(this.el).html(this.cmpEl); + this.$el.html(this.cmpEl); } } else { - this.cmpEl = $(this.el); + this.cmpEl = this.$el; } me.rendered = true; diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index 98899fd45..10549495c 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -98,7 +98,7 @@ define([ Common.UI.BaseView.prototype.initialize.call(this, options); var me = this, - el = $(this.el); + el = me.$el || $(this.el); this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent); @@ -116,7 +116,7 @@ define([ }, render: function () { - $(this.el).html(this.template({colors: this.colors})); + this.$el.html(this.template({colors: this.colors})); return this; }, @@ -144,7 +144,7 @@ define([ }, updateCustomColors: function() { - var el = $(this.el); + var el = this.$el || $(this.el); if (el) { var selected = el.find('a.' + this.selectedCls), color = (selected.length>0 && /color-dynamic/.test(selected[0].className)) ? selected.attr('color') : undefined; @@ -221,7 +221,7 @@ define([ }, setCustomColor: function(color) { - var el = $(this.el); + var el = this.$el || $(this.el); color = /#?([a-fA-F0-9]{6})/.exec(color); if (color) { this.saveCustomColor(color[1]); @@ -272,7 +272,7 @@ define([ }, select: function(color, suppressEvent) { - var el = $(this.el); + var el = this.$el || $(this.el); el.find('a.' + this.selectedCls).removeClass(this.selectedCls); if (typeof(color) == 'object' ) { @@ -321,7 +321,7 @@ define([ }, selectByRGB: function(rgb, suppressEvent) { - var el = $(this.el); + var el = this.$el || $(this.el); el.find('a.' + this.selectedCls).removeClass(this.selectedCls); var color = (typeof(rgb) == 'object') ? rgb.color : rgb; @@ -351,7 +351,7 @@ define([ if (effectcolors===undefined || standartcolors===undefined) return; var me = this, - el = $(this.el); + el = me.$el || $(this.el); if (me.aColorElements === undefined) { me.aColorElements = el.find('a.palette-color'); @@ -407,7 +407,7 @@ define([ if (value) this.select(value, true); else { - var selected = $(this.el).find('a.' + this.selectedCls); + var selected = el.find('a.' + this.selectedCls); if (selected.length && selected.hasClass('palette-color-effect')) { this.value = selected[0].className.match(this.colorRe)[1].toUpperCase(); } @@ -416,7 +416,7 @@ define([ }, clearSelection: function(suppressEvent) { - $(this.el).find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls); this.value = undefined; }, diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js index c95bb9878..d8b645e2c 100644 --- a/apps/common/main/lib/component/TreeView.js +++ b/apps/common/main/lib/component/TreeView.js @@ -193,7 +193,7 @@ define([ }); if (view) { - var innerEl = $(this.el).find('.inner').addBack().filter('.inner'); + var innerEl = (this.$el || $(this.el)).find('.inner').addBack().filter('.inner'); if (innerEl) { (this.dataViewItems.length<1) && innerEl.find('.empty-text').remove();