chrome/browser/resources/downloads/focus_row.js

   1 // Copyright 2015 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 cr.define('downloads', function() {
   6   /**
   7    * Provides an implementation for a single column grid.
   8    * @constructor
   9    * @extends {cr.ui.FocusRow}
  10    */
  11   function FocusRow() {}
  12
  13   /**
  14    * Decorates |focusRow| so that it can be treated as a FocusRow.
  15    * @param {Element} focusRow The element that has all the columns represented
  16    *     by |itemView|.
  17    * @param {!downloads.ItemView} itemView The item view this row cares about.
  18    * @param {Node} boundary Focus events are ignored outside of this node.
  19    */
  20   FocusRow.decorate = function(focusRow, itemView, boundary) {
  21     focusRow.__proto__ = FocusRow.prototype;
  22     focusRow.decorate(boundary);
  23     focusRow.addFocusableElements_();
  24   };
  25
  26   /**
  27    * Determines if element should be focusable.
  28    * @param {Element} element
  29    * @return {boolean}
  30    */
  31   FocusRow.shouldFocus = function(element) {
  32     if (!element)
  33       return false;
  34
  35     // Hidden elements are not focusable.
  36     var style = window.getComputedStyle(element);
  37     if (style.visibility == 'hidden' || style.display == 'none')
  38       return false;
  39
  40     // Verify all ancestors are focusable.
  41     return !element.parentElement ||
  42            FocusRow.shouldFocus(element.parentElement);
  43   };
  44
  45   FocusRow.prototype = {
  46     __proto__: cr.ui.FocusRow.prototype,
  47
  48     /** @override */
  49     getEquivalentElement: function(element) {
  50       if (this.focusableElements.indexOf(element) > -1)
  51         return assert(element);
  52
  53       // All elements default to another element with the same type.
  54       var columnType = element.getAttribute('column-type');
  55       var equivalent = this.querySelector('[column-type=' + columnType + ']');
  56
  57       if (this.focusableElements.indexOf(equivalent) < 0) {
  58         equivalent = null;
  59         var equivalentTypes =
  60             ['show', 'retry', 'pause', 'resume', 'remove', 'cancel'];
  61         if (equivalentTypes.indexOf(columnType) != -1) {
  62           var allTypes = equivalentTypes.map(function(type) {
  63             return '[column-type=' + type + ']:not([hidden])';
  64           }).join(', ');
  65           equivalent = this.querySelector(allTypes);
  66         }
  67       }
  68
  69       // Return the first focusable element if no equivalent element is found.
  70       return assert(equivalent || this.focusableElements[0]);
  71     },
  72
  73     /** @private */
  74     addFocusableElements_: function() {
  75       var possiblyFocusableElements = this.querySelectorAll('[column-type]');
  76       for (var i = 0; i < possiblyFocusableElements.length; ++i) {
  77         var possiblyFocusableElement = possiblyFocusableElements[i];
  78         if (FocusRow.shouldFocus(possiblyFocusableElement))
  79           this.addFocusableElement(possiblyFocusableElement);
  80       }
  81     },
  82   };
  83
  84   return {FocusRow: FocusRow};
  85 });