| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 // Action links are elements that are used to perform an in-page navigation or | 5 // Action links are elements that are used to perform an in-page navigation or |
| 6 // action (e.g. showing a dialog). | 6 // action (e.g. showing a dialog). |
| 7 // | 7 // |
| 8 // They look like normal anchor (<a>) tags as their text color is blue. However, | 8 // They look like normal anchor (<a>) tags as their text color is blue. However, |
| 9 // they're subtly different as they're not initially underlined (giving users a | 9 // they're subtly different as they're not initially underlined (giving users a |
| 10 // clue that underlined links navigate while action links don't). | 10 // clue that underlined links navigate while action links don't). |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 if (!this.disabled && e.key == 'Enter' && !this.href) { | 47 if (!this.disabled && e.key == 'Enter' && !this.href) { |
| 48 // Schedule a click asynchronously because other 'keydown' handlers | 48 // Schedule a click asynchronously because other 'keydown' handlers |
| 49 // may still run later (e.g. document.addEventListener('keydown')). | 49 // may still run later (e.g. document.addEventListener('keydown')). |
| 50 // Specifically options dialogs break when this timeout isn't here. | 50 // Specifically options dialogs break when this timeout isn't here. |
| 51 // NOTE: this affects the "trusted" state of the ensuing click. I | 51 // NOTE: this affects the "trusted" state of the ensuing click. I |
| 52 // haven't found anything that breaks because of this (yet). | 52 // haven't found anything that breaks because of this (yet). |
| 53 window.setTimeout(this.click.bind(this), 0); | 53 window.setTimeout(this.click.bind(this), 0); |
| 54 } | 54 } |
| 55 }); | 55 }); |
| 56 | 56 |
| 57 function preventDefault(e) { e.preventDefault(); } | 57 function preventDefault(e) { |
| 58 e.preventDefault(); |
| 59 } |
| 58 | 60 |
| 59 function removePreventDefault() { | 61 function removePreventDefault() { |
| 60 document.removeEventListener('selectstart', preventDefault); | 62 document.removeEventListener('selectstart', preventDefault); |
| 61 document.removeEventListener('mouseup', removePreventDefault); | 63 document.removeEventListener('mouseup', removePreventDefault); |
| 62 } | 64 } |
| 63 | 65 |
| 64 this.addEventListener('mousedown', function() { | 66 this.addEventListener('mousedown', function() { |
| 65 // This handlers strives to match the behavior of <a href="...">. | 67 // This handlers strives to match the behavior of <a href="...">. |
| 66 | 68 |
| 67 // While the mouse is down, prevent text selection from dragging. | 69 // While the mouse is down, prevent text selection from dragging. |
| 68 document.addEventListener('selectstart', preventDefault); | 70 document.addEventListener('selectstart', preventDefault); |
| 69 document.addEventListener('mouseup', removePreventDefault); | 71 document.addEventListener('mouseup', removePreventDefault); |
| 70 | 72 |
| 71 // If focus started via mouse press, don't show an outline. | 73 // If focus started via mouse press, don't show an outline. |
| 72 if (document.activeElement != this) | 74 if (document.activeElement != this) |
| 73 this.classList.add('no-outline'); | 75 this.classList.add('no-outline'); |
| 74 }); | 76 }); |
| 75 | 77 |
| 76 this.addEventListener( | 78 this.addEventListener('blur', function() { |
| 77 'blur', function() { this.classList.remove('no-outline'); }); | 79 this.classList.remove('no-outline'); |
| 80 }); |
| 78 }, | 81 }, |
| 79 | 82 |
| 80 /** @type {boolean} */ | 83 /** @type {boolean} */ |
| 81 set disabled(disabled) { | 84 set disabled(disabled) { |
| 82 if (disabled) | 85 if (disabled) |
| 83 HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', ''); | 86 HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', ''); |
| 84 else | 87 else |
| 85 HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled'); | 88 HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled'); |
| 86 this.tabIndex = disabled ? -1 : 0; | 89 this.tabIndex = disabled ? -1 : 0; |
| 87 }, | 90 }, |
| 88 get disabled() { return this.hasAttribute('disabled'); }, | 91 get disabled() { |
| 92 return this.hasAttribute('disabled'); |
| 93 }, |
| 89 | 94 |
| 90 /** @override */ | 95 /** @override */ |
| 91 setAttribute: function(attr, val) { | 96 setAttribute: function(attr, val) { |
| 92 if (attr.toLowerCase() == 'disabled') | 97 if (attr.toLowerCase() == 'disabled') |
| 93 this.disabled = true; | 98 this.disabled = true; |
| 94 else | 99 else |
| 95 HTMLAnchorElement.prototype.setAttribute.apply(this, arguments); | 100 HTMLAnchorElement.prototype.setAttribute.apply(this, arguments); |
| 96 }, | 101 }, |
| 97 | 102 |
| 98 /** @override */ | 103 /** @override */ |
| 99 removeAttribute: function(attr) { | 104 removeAttribute: function(attr) { |
| 100 if (attr.toLowerCase() == 'disabled') | 105 if (attr.toLowerCase() == 'disabled') |
| 101 this.disabled = false; | 106 this.disabled = false; |
| 102 else | 107 else |
| 103 HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments); | 108 HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments); |
| 104 }, | 109 }, |
| 105 }, | 110 }, |
| 106 | 111 |
| 107 extends: 'a', | 112 extends: 'a', |
| 108 }); | 113 }); |
| OLD | NEW |