Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(95)

Side by Side Diff: ui/webui/resources/js/action_link.js

Issue 668983004: Add <a is="action-link">, a web component extension of <a> for in-page actions. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: merge Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/webui/resources/css/widgets.css ('k') | ui/webui/resources/js/util.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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 });
OLDNEW
« no previous file with comments | « ui/webui/resources/css/widgets.css ('k') | ui/webui/resources/js/util.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698