OLD | NEW |
(Empty) | |
| 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 |
| 3 // found in the LICENSE file. |
| 4 |
| 5 // Action links are elements that are used to perform an in-page navigation or |
| 6 // action (e.g. showing a dialog). |
| 7 // |
| 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 |
| 10 // clue that underlined links navigate while action links don't). |
| 11 // |
| 12 // Action links look very similar to normal links when hovered (hand cursor, |
| 13 // underlined). This gives the user an idea that clicking this link will do |
| 14 // something similar to navigation but in the same page. |
| 15 // |
| 16 // They can be created in JavaScript like this: |
| 17 // |
| 18 // var link = document.createElement('a', 'action-link'); // Note second arg. |
| 19 // |
| 20 // or with a constructor like this: |
| 21 // |
| 22 // var link = new ActionLink(); |
| 23 // |
| 24 // They can be used easily from HTML as well, like so: |
| 25 // |
| 26 // <a is="action-link">Click me!</a> |
| 27 // |
| 28 // NOTE: <action-link> and document.createElement('action-link') don't work. |
| 29 |
| 30 /** |
| 31 * @constructor |
| 32 * @extends {HTMLAnchorElement} |
| 33 */ |
| 34 var ActionLink = document.registerElement('action-link', { |
| 35 prototype: { |
| 36 __proto__: HTMLAnchorElement.prototype, |
| 37 |
| 38 createdCallback: function() { |
| 39 // Links aren't tabble unless there's an [href] attribute set. Setting |
| 40 // this adds undesirable "Open link in new tab..." context menu handlers |
| 41 // so just manually add to tab order instead. |
| 42 this.tabIndex = 0; |
| 43 |
| 44 this.addEventListener('keydown', function(e) { |
| 45 if (e.keyIdentifier == 'Enter') { |
| 46 // Schedule a click asynchronously because other 'keydown' handlers |
| 47 // may still run later (e.g. document.addEventListener('keydown')). |
| 48 // Specifically options dialogs break when this timeout isn't here. |
| 49 // NOTE: this affects the "trusted" state of the ensuing click. I |
| 50 // haven't found anything that breaks because of this (yet). |
| 51 window.setTimeout(this.click.bind(this), 0); |
| 52 } |
| 53 }); |
| 54 }, |
| 55 }, |
| 56 extends: 'a', |
| 57 }); |
OLD | NEW |