ui/webui/resources/js/action_link.js

   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     /** @this {ActionLink} */
  39     createdCallback: function() {
  40       // Links aren't tabble unless there's an [href] attribute set. Setting
  41       // this adds undesirable "Open link in new tab..." context menu handlers
  42       // so just manually add to tab order instead.
  43       this.tabIndex = 0;
  44
  45       this.addEventListener('keydown', function(e) {
  46         if (e.keyIdentifier == 'Enter') {
  47           // Schedule a click asynchronously because other 'keydown' handlers
  48           // may still run later (e.g. document.addEventListener('keydown')).
  49           // Specifically options dialogs break when this timeout isn't here.
  50           // NOTE: this affects the "trusted" state of the ensuing click. I
  51           // haven't found anything that breaks because of this (yet).
  52           window.setTimeout(this.click.bind(this), 0);
  53         }
  54       });
  55     },
  56   },
  57   extends: 'a',
  58 });