From 6bbd7f249a7daff41ca85e9122d01ff559fd0f5d Mon Sep 17 00:00:00 2001 From: Patrik Kullman Date: Sun, 9 Sep 2018 21:24:23 +0200 Subject: [PATCH] omnitable es6 updates - core omnitable - eslint object shorthand rule - eslint prefer-arrow rule Save(autofix) 5-6 times in vscode, reformat document if autofix broke indentation. Autoformatting may have adjusted whole files on occasion. Minor es6 changes. Signed-off-by: Patrik Kullman --- .eslintrc.json | 2 + cosmoz-omnitable-group-row.html | 16 +++---- cosmoz-omnitable-header-row.html | 8 ++-- cosmoz-omnitable-item-expand.html | 16 +++---- cosmoz-omnitable-item-row.html | 36 +++++++--------- cosmoz-omnitable-item.html | 7 ++-- cosmoz-omnitable-repeater-behavior.html | 56 ++++++++++--------------- cosmoz-omnitable-templatizer.html | 31 +++++++------- cosmoz-omnitable.js | 14 +++---- gulpfile.js | 24 +++++------ 10 files changed, 97 insertions(+), 113 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 01c1846f..8024646e 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -91,6 +91,7 @@ "no-use-before-define": "error", "no-useless-call": "error", "no-useless-concat": "error", + "object-shorthand": ["error", "always"], "one-var": [ "error", { @@ -102,6 +103,7 @@ "error", "always" ], + "prefer-arrow-callback": "error", "quotes": [ "error", "single" diff --git a/cosmoz-omnitable-group-row.html b/cosmoz-omnitable-group-row.html index f33921be..7dc15e4a 100644 --- a/cosmoz-omnitable-group-row.html +++ b/cosmoz-omnitable-group-row.html @@ -46,7 +46,7 @@ _slotName: 'group-row', - _columnChanged: function (newColumn) { + _columnChanged(newColumn) { if (!newColumn) { return; } @@ -57,15 +57,15 @@ this.columns = [newColumn]; }, - _getTemplateInstance: function (column) { + _getTemplateInstance(column) { return column.dataTemplatizer.getInstance(); }, - _detachTemplateInstance: function (instance, column, element) { + _detachTemplateInstance(instance, column, element) { column.dataTemplatizer.detachInstance(instance, element); }, - _configureTemplateInstance: function (instance) { + _configureTemplateInstance(instance) { if (instance.item !== this.item && this.item !== undefined) { this._forwardProperty(instance, 'item', this.item); this._forwardProperty(instance, 'selected', this.selected); @@ -74,7 +74,7 @@ } }, - _itemUpdated: function (itemChange) { + _itemUpdated(itemChange) { if (itemChange.path === 'item') { this.elements.forEach(function (element) { this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true); @@ -86,19 +86,19 @@ } }, - _selectedChanged: function (selected) { + _selectedChanged(selected) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'selected', selected, true); }); }, - _expandedChanged: function (expanded) { + _expandedChanged(expanded) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'expanded', expanded, true); }); }, - _foldedChanged: function (folded) { + _foldedChanged(folded) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'folded', folded, true); }); diff --git a/cosmoz-omnitable-header-row.html b/cosmoz-omnitable-header-row.html index 48571e24..f474759f 100644 --- a/cosmoz-omnitable-header-row.html +++ b/cosmoz-omnitable-header-row.html @@ -39,23 +39,23 @@ _slotName: 'header-cell', - _getTemplateInstance: function (column) { + _getTemplateInstance(column) { return column.headerTemplatizer.getInstance(); }, - _detachTemplateInstance: function (instance, column, element) { + _detachTemplateInstance(instance, column, element) { if (column.headerTemplatizer) { column.headerTemplatizer.detachInstance(instance, element); } }, - _configureElement: function (element, column) { + _configureElement(element, column) { this.toggleClass(column.headerCellClass, true, element); this.toggleClass('header-cell', true, element); element.setAttribute('title', column.title); }, - _configureTemplateInstance: function (instance) { + _configureTemplateInstance(instance) { this._forwardPropertiesFlush(instance); } }); diff --git a/cosmoz-omnitable-item-expand.html b/cosmoz-omnitable-item-expand.html index 83b92a09..fcbc1315 100644 --- a/cosmoz-omnitable-item-expand.html +++ b/cosmoz-omnitable-item-expand.html @@ -71,19 +71,19 @@ _slotName: 'item-expand-line', - _getTemplateInstance: function (column) { + _getTemplateInstance(column) { return column.dataTemplatizer.getInstance(); }, - _detachTemplateInstance: function (instance, column, element) { + _detachTemplateInstance(instance, column, element) { column.dataTemplatizer.detachInstance(instance, element); }, - _configureElement: function (element, column) { + _configureElement(element, column) { element.column = column; }, - _configureTemplateInstance: function (instance) { + _configureTemplateInstance(instance) { if (instance.item !== this.item && this.item !== undefined) { this._forwardProperty(instance, 'item', this.item); this._forwardProperty(instance, 'selected', this.selected); @@ -92,7 +92,7 @@ } }, - _updateSize: function (columnsCount) { + _updateSize(columnsCount) { this.hidden = columnsCount === 0; if (this.expanded) { // Notify omnitable that this item is expanded and my need individual resize @@ -100,7 +100,7 @@ } }, - _itemUpdated: function (itemChange) { + _itemUpdated(itemChange) { if (itemChange.path === 'item') { this.elements.forEach(function (element) { this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true); @@ -112,13 +112,13 @@ } }, - _selectedChanged: function (selected) { + _selectedChanged(selected) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'selected', selected, true); }); }, - _expandedChanged: function (expanded) { + _expandedChanged(expanded) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'expanded', expanded, true); }); diff --git a/cosmoz-omnitable-item-row.html b/cosmoz-omnitable-item-row.html index 94b4f04f..d4fabe3d 100644 --- a/cosmoz-omnitable-item-row.html +++ b/cosmoz-omnitable-item-row.html @@ -65,15 +65,13 @@ _slotName: 'item-cell', - _getTemplateInstance: function (column) { - return column.dataTemplatizer.getInstance(); - }, + _getTemplateInstance: column => column.dataTemplatizer.getInstance(), - _detachTemplateInstance: function (instance, column, element) { + _detachTemplateInstance(instance, column, element) { column.dataTemplatizer.detachInstance(instance, element); }, - _configureElement: function (element, column) { + _configureElement(element, column) { element.style.flexBasis = column.editable ? column.editWidth : column.width; element.style.minWidth = column.editable ? column.editMinWidth : column.minWidth; element.style.flexGrow = column.flex; @@ -81,7 +79,7 @@ element.setAttribute('class', this._computeItemRowCellClasses(column)); }, - _configureTemplateInstance: function (instance) { + _configureTemplateInstance(instance) { if (instance.item !== this.item && this.item !== undefined) { this._forwardProperty(instance, 'item', this.item); this._forwardProperty(instance, 'selected', this.selected); @@ -90,41 +88,37 @@ } }, - _computeItemRowCellClasses: function (column) { - var originalIndex = column.__index; - return 'itemRow-cell' + _computeItemRowCellClasses: column => + 'itemRow-cell' + (column.cellClass ? ' ' + column.cellClass + ' ' : '') - + ' cosmoz-omnitable-column-' + originalIndex; - }, + + ' cosmoz-omnitable-column-' + column.__index, - _itemUpdated: function (itemChange) { + _itemUpdated(itemChange) { if (itemChange.path === 'item') { - this.elements.forEach(function (element) { + this.elements.forEach(element => { this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true); element.setAttribute('title', this._getCellTitle(this.getElementColumn(element), this.item)); - }, this); + }); } else { - this.elements.forEach(function (element) { + this.elements.forEach(element => { this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true); - }, this); + }); } }, - _selectedChanged: function (selected) { + _selectedChanged(selected) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'selected', selected, true); }); }, - _expandedChanged: function (expanded) { + _expandedChanged(expanded) { this.templateInstances.forEach(instance => { this._forwardProperty(instance, 'expanded', expanded, true); }); }, - _getCellTitle: function (column, item) { - return column && column.getString(item, column.valuePath); - }, + _getCellTitle: (column, item) => column && column.getString(item, column.valuePath) }); }()); diff --git a/cosmoz-omnitable-item.html b/cosmoz-omnitable-item.html index 759ceaec..c8662833 100644 --- a/cosmoz-omnitable-item.html +++ b/cosmoz-omnitable-item.html @@ -33,10 +33,11 @@ // HACK: ensure paper-dropdown-menu updates current selected item label after translation change // See https://github.com/PolymerElements/paper-dropdown-menu/issues/197 - _labelChanged: function () { + _labelChanged() { if (this.classList.contains('iron-selected')) { - this.fire('iron-deselect', { item: this}); - this.fire('iron-select', { item: this}); + const detail = { item: this }; + this.fire('iron-deselect', detail); + this.fire('iron-select', detail); } } }); diff --git a/cosmoz-omnitable-repeater-behavior.html b/cosmoz-omnitable-repeater-behavior.html index ecc2a32b..35875ccd 100644 --- a/cosmoz-omnitable-repeater-behavior.html +++ b/cosmoz-omnitable-repeater-behavior.html @@ -49,7 +49,7 @@ * @param {Object} column - The column. * @return {Object} - The instance. */ - _getTemplateInstance: function (column) {}, + _getTemplateInstance(column) {}, /** * Detach and release the template instance associated with @@ -60,7 +60,7 @@ * @param {Object} element - The element. * @return {undefined} */ - _detachTemplateInstance: function (instance, column, element) {}, + _detachTemplateInstance(instance, column, element) {}, /** * Configure a newly created repeated element @@ -68,7 +68,7 @@ * @param {Object} element - The element. * @return {undefined} */ - _configureElement: function (element) {}, + _configureElement(element) {}, /** * Configure a newly created cell template instance @@ -76,7 +76,7 @@ * @param {Object} instance - The instance. * @return {undefined} */ - _configureTemplateInstance: function (instance) {}, + _configureTemplateInstance(instance) {}, /* eslint-enable no-empty-function, no-unused-vars */ @@ -93,9 +93,7 @@ get templateInstances() { if (this._elements) { - return this._elements.map(function (element) { - return element.__instance; - }); + return this._elements.map(element => element.__instance); } return []; }, @@ -105,26 +103,22 @@ * @param {Object} element - The element. * @return {Object} - The instance. */ - getElementTemplateInstance: function (element) { - return element.__instance; - }, + getElementTemplateInstance: element => element.__instance, /** * Get the column that was used to rendered the specified element * @param {Object} element - The element. * @return {Object} - The column. */ - getElementColumn: function (element) { - return element.__column; - }, + getElementColumn: element => element.__column, - _columnsChanged: function ({path, base, value}) { + _columnsChanged({path, base, value}) { let removedColumns, reMatch = editableRegex.exec(path); if (path === 'columns') { if (this._elements && this._elements.length) { - removedColumns = this._elements.map(function (element) { + removedColumns = this._elements.map(element => { return element.__column; }); this._removeElements(0, removedColumns); @@ -145,29 +139,25 @@ } }, - _renderSplices: function (splices) { - splices.forEach(function (splice) { + _renderSplices(splices) { + splices.forEach(splice => { if (splice.removed.length) { this._removeElements(splice.index, splice.removed); } if (splice.addedCount > 0) { this._addElements(splice.index, splice.addedCount); } - }, this); + }); }, - _addElements: function (start, count) { - var i, - end = start + count, - column, - instance, - element, + _addElements(start, count) { + const end = start + count, parent = Polymer.dom(this); - for (i = start; i < end; i++) { - column = this.columns[i]; - element = document.createElement(this._elementType); - instance = this._getTemplateInstance(column); + for (let i = start; i < end; i++) { + const column = this.columns[i], + element = document.createElement(this._elementType), + instance = this._getTemplateInstance(column); element.__instance = instance; element.__column = column; @@ -200,7 +190,7 @@ } }, - _removeElements: function (start, removedColumns) { + _removeElements(start, removedColumns) { this._elements .splice(start, removedColumns.length) .forEach(element => { @@ -210,7 +200,7 @@ }); }, - _groupOnColumnChanged: function (column, previousColumn) { + _groupOnColumnChanged(column, previousColumn) { if (!this._elements || !this._elements.length) { return; } @@ -228,7 +218,7 @@ } }, - _forwardProperty: function (instance, name, value, flush = false) { + _forwardProperty(instance, name, value, flush = false) { if (IS_V2) { instance._setPendingProperty(name, value); } else { @@ -239,7 +229,7 @@ } }, - _forwardNotifyPath: function (instance, path, value, isPathNotification = false, flush = false) { + _forwardNotifyPath(instance, path, value, isPathNotification = false, flush = false) { if (IS_V2) { instance._setPendingPropertyOrPath(path, value, false, isPathNotification); } else { @@ -250,7 +240,7 @@ } }, - _forwardPropertiesFlush: function (instance) { + _forwardPropertiesFlush(instance) { if (instance._flushProperties) { instance._flushProperties(true); } diff --git a/cosmoz-omnitable-templatizer.html b/cosmoz-omnitable-templatizer.html index 54ec99bd..5ea87db1 100644 --- a/cosmoz-omnitable-templatizer.html +++ b/cosmoz-omnitable-templatizer.html @@ -17,36 +17,33 @@ _reusableTemplateInstances: null, _parentModel: true, - ready: function () { - - var instanceProps = {}; - - instanceProps['item'] = true; - - this._instanceProps = instanceProps; + ready() { + this._instanceProps = { + item: true + }; this._templateInstancesInUse = []; this._reusableTemplateInstances = []; }, - init: function (template, host) { + init(template, host) { this._template = template; this._templateHost = host; this._methodHost = host; this.dataHost = host; }, - _getRootDataHost: function () { + _getRootDataHost() { return this._templateHost; }, - _ensureTemplatized: function () { + _ensureTemplatized() { if (!this.ctor) { this.templatize(this._template); } }, - _forwardParentProp: function (prop, value) { + _forwardParentProp(prop, value) { const set = instance => { instance[prop] = value; }; @@ -54,7 +51,7 @@ this._reusableTemplateInstances.forEach(set); }, - _forwardParentPath: function (path, value) { + _forwardParentPath(path, value) { const notify = instance => { instance.notifyPath(path, value, true); }; @@ -62,7 +59,7 @@ this._reusableTemplateInstances.forEach(notify); }, - _forwardHostPropV2: function (prop, value) { + _forwardHostPropV2(prop, value) { const forward = instance => { instance.forwardHostProp(prop, value); }; @@ -70,7 +67,7 @@ this._reusableTemplateInstances.forEach(forward); }, - getInstance: function () { + getInstance() { var instance; if (this._reusableTemplateInstances.length > 0) { @@ -85,12 +82,12 @@ return instance; }, - detachInstance: function (instance) { + detachInstance(instance) { this.releaseInstance(instance); this._performInstanceDetach(instance); }, - releaseInstance: function (instance) { + releaseInstance(instance) { const index = this._templateInstancesInUse.indexOf(instance); if (index < 0) { return; @@ -105,7 +102,7 @@ this._templateInstancesInUse.splice(0); }, - releaseInstances: function () { + releaseInstances() { this._reusableTemplateInstances = this._templateInstancesInUse; this._templateInstancesInUse = []; }, diff --git a/cosmoz-omnitable.js b/cosmoz-omnitable.js index 88cffb1c..ab359c00 100644 --- a/cosmoz-omnitable.js +++ b/cosmoz-omnitable.js @@ -282,7 +282,7 @@ this._fitDropdowns(); }, - detached: function () { + detached() { if (this._columnObserver) { Polymer.dom(this).unobserveNodes(this._columnObserver); } @@ -353,9 +353,9 @@ } }, - _onColumnEditableChanged(event, {column}) { + _onColumnEditableChanged(event, { column }) { event.stopPropagation(); - const {visibleColumns: columns} = this; + const { visibleColumns: columns } = this; if (!Array.isArray(columns) || columns.length === 0) { return; } @@ -539,7 +539,7 @@ return column; }, - _filterChanged: function (e, detail) { + _filterChanged(e, detail) { if (!Array.isArray(this.columns) || this.columns.length < 1 || this.columns.indexOf(detail.column) < 0) { return; } @@ -567,7 +567,7 @@ } } else { this.filteredItems = []; - this.filteredGroupedItems = []; + this.filteredGroupedItems = []; this.sortedFilteredGroupedItems = []; this._groupsCount = 0; } @@ -998,7 +998,7 @@ */ _toggleGroup(event) { const firstRow = this.$.groupedList.getFirstVisibleItemElement(), - {model: {folded, item}} = event; + { model: { folded, item } } = event; this.$.groupedList.toggleFold(item); @@ -1188,7 +1188,7 @@ } const path = ['_routeHash', this.hashParam + '-' + key], - hashValue = this.get(path), + hashValue = this.get(path), value = this.get(key), serialized = this.serialize(value, this.properties[key].type); diff --git a/gulpfile.js b/gulpfile.js index 2c1f85da..e5553acc 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,8 +8,8 @@ var fs = require('fs'), exec = require('child_process').exec, gitRun = function (cmd, cwd, callback) { exec(cmd, { - cwd: cwd - }, function (err, stdout, stderr) { + cwd + }, (err, stdout, stderr) => { if (err) { console.error('Gah error! ', err, stdout, stderr); return; @@ -18,35 +18,35 @@ var fs = require('fs'), }); }; -gulp.task('update', function () { - fs.readdir('bower_components', function (err, bowerDirs) { +gulp.task('update', () => { + fs.readdir('bower_components', (err, bowerDirs) => { if (err) { console.error('Gah error! ', err); return; } - bowerDirs.forEach(function (bowerDir) { + bowerDirs.forEach(bowerDir => { if (bowerDir.indexOf('cosmoz-') === 0) { var repo = 'bower_components' + path.sep + bowerDir; - fs.lstat(repo, function (err, stats) { + fs.lstat(repo, (err, stats) => { if (stats.isSymbolicLink()) { - fs.realpath(repo, function (err, resolvedPath) { + fs.realpath(repo, (err, resolvedPath) => { if (err) { console.error('Gah error! ', err, resolvedPath); return; } console.log('repo needs git pull:' + resolvedPath); - gitRun('git status --porcelain', resolvedPath, function (output) { + gitRun('git status --porcelain', resolvedPath, output => { var needsStash = output.length > 0; if (needsStash) { - gitRun('git stash', resolvedPath, function () { - gitRun('git pull', resolvedPath, function () { - gitRun('git stash pop', resolvedPath, function () { + gitRun('git stash', resolvedPath, () => { + gitRun('git pull', resolvedPath, () => { + gitRun('git stash pop', resolvedPath, () => { console.log('stash pull stash done'); }); }); }); } else { - gitRun('git pull', resolvedPath, function () { + gitRun('git pull', resolvedPath, () => { console.log('pull done'); }); }