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 |