Convert legacy Polyemer elements to class-based This commit converts almost all Polymer elements from Polymer-function based components to class-based components. There are few files which should be converted manually after this commit. Change-Id: I9e597e79053e0a6b5d5c0f1b54676d11b9d81db7
diff --git a/polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.js b/polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.js index ed96bb2..ce9db61 100644 --- a/polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.js +++ b/polygerrit-ui/app/elements/edit/gr-default-editor/gr-default-editor.js
@@ -17,23 +17,28 @@ (function() { 'use strict'; - Polymer({ - is: 'gr-default-editor', - + class GrDefaultEditor extends Polymer.GestureEventListeners( + Polymer.LegacyElementMixin( + Polymer.Element)) { + static get is() { return 'gr-default-editor'; } /** * Fired when the content of the editor changes. * * @event content-change */ - properties: { - fileContent: String, - }, + static get properties() { + return { + fileContent: String, + }; + } _handleTextareaInput(e) { this.dispatchEvent(new CustomEvent( 'content-change', {detail: {value: e.target.value}, bubbles: true, composed: true})); - }, - }); + } + } + + customElements.define(GrDefaultEditor.is, GrDefaultEditor); })();
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js index 32aad5a..6a585e1 100644 --- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js +++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.js
@@ -17,47 +17,52 @@ (function() { 'use strict'; - Polymer({ - is: 'gr-edit-controls', + /** + * @appliesMixin Gerrit.PatchSetMixin + */ + class GrEditControls extends Polymer.mixinBehaviors( [ + Gerrit.PatchSetBehavior, + ], Polymer.GestureEventListeners( + Polymer.LegacyElementMixin( + Polymer.Element))) { + static get is() { return 'gr-edit-controls'; } - properties: { - change: Object, - patchNum: String, + static get properties() { + return { + change: Object, + patchNum: String, - /** + /** * TODO(kaspern): by default, the RESTORE action should be hidden in the * file-list as it is a per-file action only. Remove this default value * when the Actions dictionary is moved to a shared constants file and * use the hiddenActions property in the parent component. */ - hiddenActions: { - type: Array, - value() { return [GrEditConstants.Actions.RESTORE.id]; }, - }, - - _actions: { - type: Array, - value() { return Object.values(GrEditConstants.Actions); }, - }, - _path: { - type: String, - value: '', - }, - _newPath: { - type: String, - value: '', - }, - _query: { - type: Function, - value() { - return this._queryFiles.bind(this); + hiddenActions: { + type: Array, + value() { return [GrEditConstants.Actions.RESTORE.id]; }, }, - }, - }, - behaviors: [ - Gerrit.PatchSetBehavior, - ], + _actions: { + type: Array, + value() { return Object.values(GrEditConstants.Actions); }, + }, + _path: { + type: String, + value: '', + }, + _newPath: { + type: String, + value: '', + }, + _query: { + type: Function, + value() { + return this._queryFiles.bind(this); + }, + }, + }; + } _handleTap(e) { e.preventDefault(); @@ -76,7 +81,7 @@ this.openRestoreDialog(); return; } - }, + } /** * @param {string=} opt_path @@ -84,7 +89,7 @@ openOpenDialog(opt_path) { if (opt_path) { this._path = opt_path; } return this._showDialog(this.$.openDialog); - }, + } /** * @param {string=} opt_path @@ -92,7 +97,7 @@ openDeleteDialog(opt_path) { if (opt_path) { this._path = opt_path; } return this._showDialog(this.$.deleteDialog); - }, + } /** * @param {string=} opt_path @@ -100,7 +105,7 @@ openRenameDialog(opt_path) { if (opt_path) { this._path = opt_path; } return this._showDialog(this.$.renameDialog); - }, + } /** * @param {string=} opt_path @@ -108,7 +113,7 @@ openRestoreDialog(opt_path) { if (opt_path) { this._path = opt_path; } return this._showDialog(this.$.restoreDialog); - }, + } /** * Given a path string, checks that it is a valid file path. @@ -118,11 +123,11 @@ _isValidPath(path) { // Double negation needed for strict boolean return type. return !!path.length && !path.endsWith('/'); - }, + } _computeRenameDisabled(path, newPath) { return this._isValidPath(path) && this._isValidPath(newPath); - }, + } /** * Given a dom event, gets the dialog that lies along this event path. @@ -134,7 +139,7 @@ if (!element.classList) { return false; } return element.classList.contains('dialog'); }); - }, + } _showDialog(dialog) { // Some dialogs may not fire their on-close event when closed in certain @@ -148,12 +153,12 @@ if (autocomplete) { autocomplete.focus(); } this.async(() => { this.$.overlay.center(); }, 1); }); - }, + } _hideAllDialogs() { const dialogs = Polymer.dom(this.root).querySelectorAll('.dialog'); for (const dialog of dialogs) { this._closeDialog(dialog); } - }, + } /** * @param {Element|undefined} dialog @@ -175,18 +180,18 @@ dialog.classList.toggle('invisible', true); return this.$.overlay.close(); - }, + } _handleDialogCancel(e) { this._closeDialog(this._getDialogFromEvent(e)); - }, + } _handleOpenConfirm(e) { const url = Gerrit.Nav.getEditUrlForDiff(this.change, this._path, this.patchNum); Gerrit.Nav.navigateToRelativeUrl(url); this._closeDialog(this._getDialogFromEvent(e), true); - }, + } _handleDeleteConfirm(e) { // Get the dialog before the api call as the event will change during bubbling @@ -198,7 +203,7 @@ this._closeDialog(dialog, true); Gerrit.Nav.navigateToChange(this.change); }); - }, + } _handleRestoreConfirm(e) { const dialog = this._getDialogFromEvent(e); @@ -208,7 +213,7 @@ this._closeDialog(dialog, true); Gerrit.Nav.navigateToChange(this.change); }); - }, + } _handleRenameConfirm(e) { const dialog = this._getDialogFromEvent(e); @@ -218,17 +223,19 @@ this._closeDialog(dialog, true); Gerrit.Nav.navigateToChange(this.change); }); - }, + } _queryFiles(input) { return this.$.restAPI.queryChangeFiles(this.change._number, this.patchNum, input).then(res => res.map(file => { return {name: file}; })); - }, + } _computeIsInvisible(id, hiddenActions) { return hiddenActions.includes(id) ? 'invisible' : ''; - }, - }); + } + } + + customElements.define(GrEditControls.is, GrEditControls); })();
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.js b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.js index 250816b..ddd2d29 100644 --- a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.js +++ b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.js
@@ -17,38 +17,41 @@ (function() { 'use strict'; - Polymer({ - is: 'gr-edit-file-controls', - + class GrEditFileControls extends Polymer.GestureEventListeners( + Polymer.LegacyElementMixin( + Polymer.Element)) { + static get is() { return 'gr-edit-file-controls'; } /** * Fired when an action in the overflow menu is tapped. * * @event file-action-tap */ - properties: { - filePath: String, - _allFileActions: { - type: Array, - value: () => Object.values(GrEditConstants.Actions), - }, - _fileActions: { - type: Array, - computed: '_computeFileActions(_allFileActions)', - }, - }, + static get properties() { + return { + filePath: String, + _allFileActions: { + type: Array, + value: () => Object.values(GrEditConstants.Actions), + }, + _fileActions: { + type: Array, + computed: '_computeFileActions(_allFileActions)', + }, + }; + } _handleActionTap(e) { e.preventDefault(); e.stopPropagation(); this._dispatchFileAction(e.detail.id, this.filePath); - }, + } _dispatchFileAction(action, path) { this.dispatchEvent(new CustomEvent( 'file-action-tap', {detail: {action, path}, bubbles: true, composed: true})); - }, + } _computeFileActions(actions) { // TODO(kaspern): conditionally disable some actions based on file status. @@ -58,6 +61,8 @@ id: action.id, }; }); - }, - }); + } + } + + customElements.define(GrEditFileControls.is, GrEditFileControls); })();
diff --git a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.js b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.js index bbcb90c..ab50921 100644 --- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.js +++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.js
@@ -24,9 +24,21 @@ const STORAGE_DEBOUNCE_INTERVAL_MS = 100; - Polymer({ - is: 'gr-editor-view', - + /** + * @appliesMixin Gerrit.FireMixin + * @appliesMixin Gerrit.KeyboardShortcutMixin + * @appliesMixin Gerrit.PatchSetMixin + * @appliesMixin Gerrit.PathListMixin + */ + class GrEditorView extends Polymer.mixinBehaviors( [ + Gerrit.FireBehavior, + Gerrit.KeyboardShortcutBehavior, + Gerrit.PatchSetBehavior, + Gerrit.PathListBehavior, + ], Polymer.GestureEventListeners( + Polymer.LegacyElementMixin( + Polymer.Element))) { + static get is() { return 'gr-editor-view'; } /** * Fired when the title of the page should change. * @@ -39,69 +51,69 @@ * @event show-alert */ - properties: { + static get properties() { + return { /** * URL params passed from the router. */ - params: { - type: Object, - observer: '_paramsChanged', - }, + params: { + type: Object, + observer: '_paramsChanged', + }, - _change: Object, - _changeEditDetail: Object, - _changeNum: String, - _patchNum: String, - _path: String, - _type: String, - _content: String, - _newContent: String, - _saving: { - type: Boolean, - value: false, - }, - _successfulSave: { - type: Boolean, - value: false, - }, - _saveDisabled: { - type: Boolean, - value: true, - computed: '_computeSaveDisabled(_content, _newContent, _saving)', - }, - _prefs: Object, - }, + _change: Object, + _changeEditDetail: Object, + _changeNum: String, + _patchNum: String, + _path: String, + _type: String, + _content: String, + _newContent: String, + _saving: { + type: Boolean, + value: false, + }, + _successfulSave: { + type: Boolean, + value: false, + }, + _saveDisabled: { + type: Boolean, + value: true, + computed: '_computeSaveDisabled(_content, _newContent, _saving)', + }, + _prefs: Object, + }; + } - behaviors: [ - Gerrit.FireBehavior, - Gerrit.KeyboardShortcutBehavior, - Gerrit.PatchSetBehavior, - Gerrit.PathListBehavior, - ], + get keyBindings() { + return { + 'ctrl+s meta+s': '_handleSaveShortcut', + }; + } - listeners: { - 'content-change': '_handleContentChange', - }, - - keyBindings: { - 'ctrl+s meta+s': '_handleSaveShortcut', - }, + created() { + super.created(); + this.addEventListener('content-change', + e => this._handleContentChange(e)); + } attached() { + super.attached(); this._getEditPrefs().then(prefs => { this._prefs = prefs; }); - }, + } get storageKey() { return `c${this._changeNum}_ps${this._patchNum}_${this._path}`; - }, + } _getLoggedIn() { return this.$.restAPI.getLoggedIn(); - }, + } _getEditPrefs() { return this.$.restAPI.getEditPreferences(); - }, + } _paramsChanged(value) { if (value.view !== Gerrit.Nav.View.EDIT) { @@ -126,13 +138,13 @@ promises.push( this._getFileData(this._changeNum, this._path, this._patchNum)); return Promise.all(promises); - }, + } _getChangeDetail(changeNum) { return this.$.restAPI.getDiffChangeDetail(changeNum).then(change => { this._change = change; }); - }, + } _handlePathChanged(e) { const path = e.detail; @@ -146,13 +158,13 @@ this._successfulSave = true; this._viewEditInChangeView(); }); - }, + } _viewEditInChangeView() { const patch = this._successfulSave ? this.EDIT_NAME : this._patchNum; Gerrit.Nav.navigateToChange(this._change, patch, null, patch !== this.EDIT_NAME); - }, + } _getFileData(changeNum, path, patchNum) { const storedContent = @@ -183,7 +195,7 @@ this._type = ''; } }); - }, + } _saveEdit() { this._saving = true; @@ -198,7 +210,7 @@ this._content = this._newContent; this._successfulSave = true; }); - }, + } _showAlert(message) { this.dispatchEvent(new CustomEvent('show-alert', { @@ -206,7 +218,7 @@ bubbles: true, composed: true, })); - }, + } _computeSaveDisabled(content, newContent, saving) { // Polymer 2: check for undefined @@ -222,12 +234,12 @@ return true; } return content === newContent; - }, + } _handleCloseTap() { // TODO(kaspern): Add a confirm dialog if there are unsaved changes. this._viewEditInChangeView(); - }, + } _handleContentChange(e) { this.debounce('store', () => { @@ -239,13 +251,15 @@ this.$.storage.eraseEditableContentItem(this.storageKey); } }, STORAGE_DEBOUNCE_INTERVAL_MS); - }, + } _handleSaveShortcut(e) { e.preventDefault(); if (!this._saveDisabled) { this._saveEdit(); } - }, - }); + } + } + + customElements.define(GrEditorView.is, GrEditorView); })();