295 lines
7.3 KiB
JavaScript
295 lines
7.3 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';
|
|
|
|
const REL_NOOPENER = 'noopener';
|
|
const REL_EXTERNAL = 'external';
|
|
|
|
Polymer({
|
|
is: 'gr-dropdown',
|
|
|
|
/**
|
|
* Fired when a non-link dropdown item with the given ID is tapped.
|
|
*
|
|
* @event tap-item-<id>
|
|
*/
|
|
|
|
/**
|
|
* Fired when a non-link dropdown item is tapped.
|
|
*
|
|
* @event tap-item
|
|
*/
|
|
|
|
properties: {
|
|
items: {
|
|
type: Array,
|
|
observer: '_resetCursorStops',
|
|
},
|
|
downArrow: Boolean,
|
|
topContent: Object,
|
|
horizontalAlign: {
|
|
type: String,
|
|
value: 'left',
|
|
},
|
|
|
|
/**
|
|
* Style the dropdown trigger as a link (rather than a button).
|
|
*/
|
|
link: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
verticalOffset: {
|
|
type: Number,
|
|
value: 40,
|
|
},
|
|
|
|
/**
|
|
* List the IDs of dropdown buttons to be disabled. (Note this only
|
|
* diisables bittons and not link entries.)
|
|
*/
|
|
disabledIds: {
|
|
type: Array,
|
|
value() { return []; },
|
|
},
|
|
|
|
/**
|
|
* The elements of the list.
|
|
*/
|
|
_listElements: {
|
|
type: Array,
|
|
value() { return []; },
|
|
},
|
|
},
|
|
|
|
behaviors: [
|
|
Gerrit.BaseUrlBehavior,
|
|
Gerrit.KeyboardShortcutBehavior,
|
|
],
|
|
|
|
keyBindings: {
|
|
'down': '_handleDown',
|
|
'enter space': '_handleEnter',
|
|
'tab': '_handleTab',
|
|
'up': '_handleUp',
|
|
},
|
|
|
|
/**
|
|
* Handle the up key.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleUp(e) {
|
|
if (this.$.dropdown.opened) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.$.cursor.previous();
|
|
} else {
|
|
this._open();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle the down key.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleDown(e) {
|
|
if (this.$.dropdown.opened) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.$.cursor.next();
|
|
} else {
|
|
this._open();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle the tab key.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleTab(e) {
|
|
if (this.$.dropdown.opened) {
|
|
// Tab in a native select is a no-op. Emulate this.
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle the enter key.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleEnter(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (this.$.dropdown.opened) {
|
|
// TODO(kaspern): This solution will not work in Shadow DOM, and
|
|
// is not particularly robust in general. Find a better solution
|
|
// when page.js has been abstracted away from components.
|
|
const el = this.$.cursor.target.querySelector(':not([hidden])');
|
|
if (el) { el.click(); }
|
|
} else {
|
|
this._open();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Handle a click on the iron-dropdown element.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleDropdownTap(e) {
|
|
this._close();
|
|
},
|
|
|
|
/**
|
|
* Hanlde a click on the button to open the dropdown.
|
|
* @param {!Event} e
|
|
*/
|
|
_dropdownTriggerTapHandler(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (this.$.dropdown.opened) {
|
|
this._close();
|
|
} else {
|
|
this._open();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Open the dropdown and initialize the cursor.
|
|
*/
|
|
_open() {
|
|
this.$.dropdown.open();
|
|
this.$.cursor.setCursorAtIndex(0);
|
|
Polymer.dom.flush();
|
|
this.$.cursor.target.focus();
|
|
},
|
|
|
|
_close() {
|
|
// async is needed so that that the click event is fired before the
|
|
// dropdown closes (This was a bug for touch devices).
|
|
this.async(() => {
|
|
this.$.dropdown.close();
|
|
}, 1);
|
|
},
|
|
|
|
/**
|
|
* Get the class for a top-content item based on the given boolean.
|
|
* @param {boolean} bold Whether the item is bold.
|
|
* @return {string} The class for the top-content item.
|
|
*/
|
|
_getClassIfBold(bold) {
|
|
return bold ? 'bold-text' : '';
|
|
},
|
|
|
|
/**
|
|
* Build a URL for the given host and path. If there is a base URL, it will
|
|
* be included between the host and the path.
|
|
* @param {!string} host
|
|
* @param {!string} path
|
|
* @return {!string} The scheme-relative URL.
|
|
*/
|
|
_computeURLHelper(host, path) {
|
|
return '//' + host + this.getBaseUrl() + path;
|
|
},
|
|
|
|
/**
|
|
* Build a scheme-relative URL for the current host. Will include the base
|
|
* URL if one is present. Note: the URL will be scheme-relative but absolute
|
|
* with regard to the host.
|
|
* @param {!string} path The path for the URL.
|
|
* @return {!string} The scheme-relative URL.
|
|
*/
|
|
_computeRelativeURL(path) {
|
|
const host = window.location.host;
|
|
return this._computeURLHelper(host, path);
|
|
},
|
|
|
|
/**
|
|
* Compute the URL for a link object.
|
|
* @param {!Object} link The object describing the link.
|
|
* @return {!string} The URL.
|
|
*/
|
|
_computeLinkURL(link) {
|
|
if (typeof link.url === 'undefined') {
|
|
return '';
|
|
}
|
|
if (link.target) {
|
|
return link.url;
|
|
}
|
|
return this._computeRelativeURL(link.url);
|
|
},
|
|
|
|
/**
|
|
* Compute the value for the rel attribute of an anchor for the given link
|
|
* object. If the link has a target value, then the rel must be "noopener"
|
|
* for security reasons.
|
|
* @param {!Object} link The object describing the link.
|
|
* @return {?string} The rel value for the link.
|
|
*/
|
|
_computeLinkRel(link) {
|
|
// Note: noopener takes precedence over external.
|
|
if (link.target) { return REL_NOOPENER; }
|
|
if (link.external) { return REL_EXTERNAL; }
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Handle a click on an item of the dropdown.
|
|
* @param {!Event} e
|
|
*/
|
|
_handleItemTap(e) {
|
|
const id = e.target.getAttribute('data-id');
|
|
const item = this.items.find(item => item.id === id);
|
|
if (id && !this.disabledIds.includes(id)) {
|
|
if (item) {
|
|
this.dispatchEvent(new CustomEvent('tap-item', {detail: item}));
|
|
}
|
|
this.dispatchEvent(new CustomEvent('tap-item-' + id));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* If a dropdown item is shown as a button, get the class for the button.
|
|
* @param {string} id
|
|
* @param {!Object} disabledIdsRecord The change record for the disabled IDs
|
|
* list.
|
|
* @return {!string} The class for the item button.
|
|
*/
|
|
_computeDisabledClass(id, disabledIdsRecord) {
|
|
return disabledIdsRecord.base.includes(id) ? 'disabled' : '';
|
|
},
|
|
|
|
/**
|
|
* Recompute the stops for the dropdown item cursor.
|
|
*/
|
|
_resetCursorStops() {
|
|
Polymer.dom.flush();
|
|
this._listElements = Polymer.dom(this.root).querySelectorAll('li');
|
|
},
|
|
|
|
_computeHasTooltip(tooltip) {
|
|
return !!tooltip;
|
|
},
|
|
|
|
_computeIsDownload(link) {
|
|
return !!link.download;
|
|
},
|
|
});
|
|
})();
|