605bc571e8
The change table editor is used to modify what columns appear in change lists with a series of checkboxes. These checkboxes have a click area that is slightly larger than the checkbox itself in order to make them easier to click on. This is accomplished by intercepting a click on the container and relaying it to the checkbox it contains. However, because one event handler was used for three different purposes, every time a user clicked on the checkbox container this would result in two calls to the handler. If the column was being added, this would mean that it would appear in the preference list twice. Duplicating preference names is avoided by splitting the event handlers so that each handler does one thing only. Updates to the preference list are made my querying the state of the checkboxes rather than making incremental updates. The cursor style of the checkbox is updated too. Change-Id: Icb8c4b94209c62c7794112f36e89183776c73ea8
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright (C) 2016 The Android Open Source Project
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
Polymer({
|
|
is: 'gr-change-table-editor',
|
|
|
|
properties: {
|
|
displayedColumns: {
|
|
type: Array,
|
|
notify: true,
|
|
},
|
|
showNumber: {
|
|
type: Boolean,
|
|
notify: true,
|
|
},
|
|
},
|
|
|
|
behaviors: [
|
|
Gerrit.ChangeTableBehavior,
|
|
],
|
|
|
|
/**
|
|
* Get the list of enabled column names from whichever checkboxes are
|
|
* checked (excluding the number checkbox).
|
|
* @return {!Array<string>}
|
|
*/
|
|
_getDisplayedColumns() {
|
|
return Polymer.dom(this.root)
|
|
.querySelectorAll('.checkboxContainer input:not([name=number])')
|
|
.filter(checkbox => checkbox.checked)
|
|
.map(checkbox => checkbox.name);
|
|
},
|
|
|
|
/**
|
|
* Handle a tap on a checkbox container and relay the tap to the checkbox it
|
|
* contains.
|
|
*/
|
|
_handleCheckboxContainerTap(e) {
|
|
const checkbox = Polymer.dom(e.target).querySelector('input');
|
|
if (!checkbox) { return; }
|
|
checkbox.click();
|
|
},
|
|
|
|
/**
|
|
* Handle a tap on the number checkbox and update the showNumber property
|
|
* accordingly.
|
|
*/
|
|
_handleNumberCheckboxTap(e) {
|
|
this.showNumber = Polymer.dom(e).rootTarget.checked;
|
|
},
|
|
|
|
/**
|
|
* Handle a tap on a displayed column checkboxes (excluding number) and
|
|
* update the displayedColumns property accordingly.
|
|
*/
|
|
_handleTargetTap(e) {
|
|
this.set('displayedColumns', this._getDisplayedColumns());
|
|
},
|
|
});
|
|
})();
|