Commit 4d7d1f55 authored by dpapad's avatar dpapad Committed by Commit Bot

WebUI: Update action-link element to use Shadow DOM v1.

Bug: 837381
Change-Id: I5421657d43646c768def7a5ccf235b9eb483e2e2
Reviewed-on: https://chromium-review.googlesource.com/c/1336548Reviewed-by: default avatarScott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608224}
parent 31391ba3
......@@ -27,90 +27,78 @@
//
// NOTE: <action-link> and document.createElement('action-link') don't work.
/**
* See crbug.com/837381
* @suppress {deprecated}
*
* @constructor
* @extends {HTMLAnchorElement}
*/
var ActionLink = document.registerElement('action-link', {
prototype: {
__proto__: HTMLAnchorElement.prototype,
class ActionLink extends HTMLAnchorElement {
connectedCallback() {
// Action links can start disabled (e.g. <a is="action-link" disabled>).
this.tabIndex = this.disabled ? -1 : 0;
/** @this {ActionLink} */
createdCallback: function() {
// Action links can start disabled (e.g. <a is="action-link" disabled>).
this.tabIndex = this.disabled ? -1 : 0;
if (!this.hasAttribute('role'))
this.setAttribute('role', 'link');
if (!this.hasAttribute('role'))
this.setAttribute('role', 'link');
this.addEventListener('keydown', function(e) {
if (!this.disabled && e.key == 'Enter' && !this.href) {
// Schedule a click asynchronously because other 'keydown' handlers
// may still run later (e.g. document.addEventListener('keydown')).
// Specifically options dialogs break when this timeout isn't here.
// NOTE: this affects the "trusted" state of the ensuing click. I
// haven't found anything that breaks because of this (yet).
window.setTimeout(this.click.bind(this), 0);
}
});
function preventDefault(e) {
e.preventDefault();
this.addEventListener('keydown', function(e) {
if (!this.disabled && e.key == 'Enter' && !this.href) {
// Schedule a click asynchronously because other 'keydown' handlers
// may still run later (e.g. document.addEventListener('keydown')).
// Specifically options dialogs break when this timeout isn't here.
// NOTE: this affects the "trusted" state of the ensuing click. I
// haven't found anything that breaks because of this (yet).
window.setTimeout(this.click.bind(this), 0);
}
});
function removePreventDefault() {
document.removeEventListener('selectstart', preventDefault);
document.removeEventListener('mouseup', removePreventDefault);
}
function preventDefault(e) {
e.preventDefault();
}
function removePreventDefault() {
document.removeEventListener('selectstart', preventDefault);
document.removeEventListener('mouseup', removePreventDefault);
}
this.addEventListener('mousedown', function() {
// This handlers strives to match the behavior of <a href="...">.
this.addEventListener('mousedown', function() {
// This handlers strives to match the behavior of <a href="...">.
// While the mouse is down, prevent text selection from dragging.
document.addEventListener('selectstart', preventDefault);
document.addEventListener('mouseup', removePreventDefault);
// While the mouse is down, prevent text selection from dragging.
document.addEventListener('selectstart', preventDefault);
document.addEventListener('mouseup', removePreventDefault);
// If focus started via mouse press, don't show an outline.
if (document.activeElement != this)
this.classList.add('no-outline');
});
// If focus started via mouse press, don't show an outline.
if (document.activeElement != this)
this.classList.add('no-outline');
});
this.addEventListener('blur', function() {
this.classList.remove('no-outline');
});
},
this.addEventListener('blur', function() {
this.classList.remove('no-outline');
});
}
/** @type {boolean} */
set disabled(disabled) {
if (disabled)
HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
else
HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
this.tabIndex = disabled ? -1 : 0;
},
get disabled() {
return this.hasAttribute('disabled');
},
/** @param {boolean} disabled */
set disabled(disabled) {
if (disabled)
HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
else
HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
this.tabIndex = disabled ? -1 : 0;
}
/** @override */
setAttribute: function(attr, val) {
if (attr.toLowerCase() == 'disabled')
this.disabled = true;
else
HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
},
get disabled() {
return this.hasAttribute('disabled');
}
/** @override */
removeAttribute: function(attr) {
if (attr.toLowerCase() == 'disabled')
this.disabled = false;
else
HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
},
},
/** @override */
setAttribute(attr, val) {
if (attr.toLowerCase() == 'disabled')
this.disabled = true;
else
HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
}
extends: 'a',
});
/** @override */
removeAttribute(attr) {
if (attr.toLowerCase() == 'disabled')
this.disabled = false;
else
HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
}
}
customElements.define('action-link', ActionLink, {extends: 'a'});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment