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       // Action links can start disabled (e.g. <a is="action-link" disabled>).
  41       this.tabIndex = this.disabled ? -1 : 0;
  42
  43       this.addEventListener('keydown', function(e) {
  44         if (!this.disabled && e.keyIdentifier == 'Enter') {
  45           // Schedule a click asynchronously because other 'keydown' handlers
  46           // may still run later (e.g. document.addEventListener('keydown')).
  47           // Specifically options dialogs break when this timeout isn't here.
  48           // NOTE: this affects the "trusted" state of the ensuing click. I
  49           // haven't found anything that breaks because of this (yet).
  50           window.setTimeout(this.click.bind(this), 0);
  51         }
  52       });
  53
  54       function preventDefault(e) {
  55         e.preventDefault();
  56       }
  57
  58       function removePreventDefault() {
  59         document.removeEventListener('selectstart', preventDefault);
  60         document.removeEventListener('mouseup', removePreventDefault);
  61       }
  62
  63       this.addEventListener('mousedown', function() {
  64         // This handlers strives to match the behavior of <a href="...">.
  65
  66         // While the mouse is down, prevent text selection from dragging.
  67         document.addEventListener('selectstart', preventDefault);
  68         document.addEventListener('mouseup', removePreventDefault);
  69
  70         // If focus started via mouse press, don't show an outline.
  71         if (document.activeElement != this)
  72           this.classList.add('no-outline');
  73       });
  74
  75       this.addEventListener('blur', function() {
  76         this.classList.remove('no-outline');
  77       });
  78     },
  79
  80     /** @type {boolean} */
  81     set disabled(disabled) {
  82       if (disabled)
  83         HTMLAnchorElement.prototype.setAttribute.call(this, 'disabled', '');
  84       else
  85         HTMLAnchorElement.prototype.removeAttribute.call(this, 'disabled');
  86       this.tabIndex = disabled ? -1 : 0;
  87     },
  88     get disabled() {
  89       return this.hasAttribute('disabled');
  90     },
  91
  92     /** @override */
  93     setAttribute: function(attr, val) {
  94       if (attr.toLowerCase() == 'disabled')
  95         this.disabled = true;
  96       else
  97         HTMLAnchorElement.prototype.setAttribute.apply(this, arguments);
  98     },
  99
 100     /** @override */
 101     removeAttribute: function(attr) {
 102       if (attr.toLowerCase() == 'disabled')
 103         this.disabled = false;
 104       else
 105         HTMLAnchorElement.prototype.removeAttribute.apply(this, arguments);
 106     },
 107   },
 108
 109   extends: 'a',
 110 });