chrome/browser/resources/chromeos/login/bubble.js

   1 // Copyright (c) 2012 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 /**
   6  * @fileoverview Bubble implementation.
   7  */
   8
   9 // TODO(xiyuan): Move this into shared.
  10 cr.define('cr.ui', function() {
  11   /**
  12    * Creates a bubble div.
  13    * @constructor
  14    * @extends {HTMLDivElement}
  15    */
  16   var Bubble = cr.ui.define('div');
  17
  18   /**
  19    * Bubble attachment side.
  20    * @enum {string}
  21    */
  22   Bubble.Attachment = {
  23     RIGHT: 'bubble-right',
  24     LEFT: 'bubble-left',
  25     TOP: 'bubble-top',
  26     BOTTOM: 'bubble-bottom'
  27   };
  28
  29   Bubble.prototype = {
  30     __proto__: HTMLDivElement.prototype,
  31
  32     // Anchor element for this bubble.
  33     anchor_: undefined,
  34
  35     // If defined, sets focus to this element once bubble is closed. Focus is
  36     // set to this element only if there's no any other focused element.
  37     elementToFocusOnHide_: undefined,
  38
  39     // Whether to hide bubble when key is pressed.
  40     hideOnKeyPress_: true,
  41
  42     /** @override */
  43     decorate: function() {
  44       this.docKeyDownHandler_ = this.handleDocKeyDown_.bind(this);
  45       this.selfClickHandler_ = this.handleSelfClick_.bind(this);
  46       this.ownerDocument.addEventListener('click',
  47                                           this.handleDocClick_.bind(this));
  48       this.ownerDocument.addEventListener('keydown',
  49                                           this.docKeyDownHandler_);
  50       window.addEventListener('blur', this.handleWindowBlur_.bind(this));
  51       this.addEventListener('webkitTransitionEnd',
  52                             this.handleTransitionEnd_.bind(this));
  53       // Guard timer for 200ms + epsilon.
  54       ensureTransitionEndEvent(this, 250);
  55     },
  56
  57     /**
  58      * Element that should be focused on hide.
  59      * @type {HTMLElement}
  60      */
  61     set elementToFocusOnHide(value) {
  62       this.elementToFocusOnHide_ = value;
  63     },
  64
  65     /**
  66      * Whether to hide bubble when key is pressed.
  67      * @type {boolean}
  68      */
  69     set hideOnKeyPress(value) {
  70       this.hideOnKeyPress_ = value;
  71     },
  72
  73     /**
  74      * Whether to hide bubble when clicked inside bubble element.
  75      * Default is true.
  76      * @type {boolean}
  77      */
  78     set hideOnSelfClick(value) {
  79       if (value)
  80         this.removeEventListener('click', this.selfClickHandler_);
  81       else
  82         this.addEventListener('click', this.selfClickHandler_);
  83     },
  84
  85     /**
  86      * Handler for click event which prevents bubble auto hide.
  87      * @private
  88      */
  89     handleSelfClick_: function(e) {
  90       // Allow clicking on [x] button.
  91       if (e.target && e.target.classList.contains('close-button'))
  92         return;
  93
  94       e.stopPropagation();
  95     },
  96
  97     /**
  98      * Sets the attachment of the bubble.
  99      * @param {!Attachment} attachment Bubble attachment.
 100      */
 101     setAttachment_: function(attachment) {
 102       for (var k in Bubble.Attachment) {
 103         var v = Bubble.Attachment[k];
 104         this.classList.toggle(v, v == attachment);
 105       }
 106     },
 107
 108     /**
 109      * Shows the bubble for given anchor element.
 110      * @param {!Object} pos Bubble position (left, top, right, bottom in px).
 111      * @param {!Attachment} attachment Bubble attachment (on which side of the
 112      *     specified position it should be displayed).
 113      * @param {HTMLElement} opt_content Content to show in bubble.
 114      *     If not specified, bubble element content is shown.
 115      * @private
 116      */
 117     showContentAt_: function(pos, attachment, opt_content) {
 118       this.style.top = this.style.left = this.style.right = this.style.bottom =
 119           'auto';
 120       for (var k in pos) {
 121         if (typeof pos[k] == 'number')
 122           this.style[k] = pos[k] + 'px';
 123       }
 124       if (opt_content !== undefined) {
 125         this.innerHTML = '';
 126         this.appendChild(opt_content);
 127       }
 128       this.setAttachment_(attachment);
 129       this.hidden = false;
 130       this.classList.remove('faded');
 131     },
 132
 133     /**
 134      * Shows the bubble for given anchor element. Bubble content is not cleared.
 135      * @param {!HTMLElement} el Anchor element of the bubble.
 136      * @param {!Attachment} attachment Bubble attachment (on which side of the
 137      *     element it should be displayed).
 138      * @param {number=} opt_offset Offset of the bubble.
 139      * @param {number=} opt_padding Optional padding of the bubble.
 140      */
 141     showForElement: function(el, attachment, opt_offset, opt_padding) {
 142       this.showContentForElement(
 143           el, attachment, undefined, opt_offset, opt_padding);
 144     },
 145
 146     /**
 147      * Shows the bubble for given anchor element.
 148      * @param {!HTMLElement} el Anchor element of the bubble.
 149      * @param {!Attachment} attachment Bubble attachment (on which side of the
 150      *     element it should be displayed).
 151      * @param {HTMLElement} opt_content Content to show in bubble.
 152      *     If not specified, bubble element content is shown.
 153      * @param {number=} opt_offset Offset of the bubble attachment point from
 154      *     left (for vertical attachment) or top (for horizontal attachment)
 155      *     side of the element. If not specified, the bubble is positioned to
 156      *     be aligned with the left/top side of the element but not farther than
 157      *     half of its width/height.
 158      * @param {number=} opt_padding Optional padding of the bubble.
 159      */
 160     showContentForElement: function(el, attachment, opt_content,
 161                                     opt_offset, opt_padding) {
 162       /** @const */ var ARROW_OFFSET = 25;
 163       /** @const */ var DEFAULT_PADDING = 18;
 164
 165       if (opt_padding == undefined)
 166         opt_padding = DEFAULT_PADDING;
 167
 168       var origin = cr.ui.login.DisplayManager.getPosition(el);
 169       var offset = opt_offset == undefined ?
 170           [Math.min(ARROW_OFFSET, el.offsetWidth / 2),
 171            Math.min(ARROW_OFFSET, el.offsetHeight / 2)] :
 172           [opt_offset, opt_offset];
 173
 174       var pos = {};
 175       if (isRTL()) {
 176         switch (attachment) {
 177           case Bubble.Attachment.TOP:
 178             pos.right = origin.right + offset[0] - ARROW_OFFSET;
 179             pos.bottom = origin.bottom + el.offsetHeight + opt_padding;
 180             break;
 181           case Bubble.Attachment.RIGHT:
 182             pos.top = origin.top + offset[1] - ARROW_OFFSET;
 183             pos.right = origin.right + el.offsetWidth + opt_padding;
 184             break;
 185           case Bubble.Attachment.BOTTOM:
 186             pos.right = origin.right + offset[0] - ARROW_OFFSET;
 187             pos.top = origin.top + el.offsetHeight + opt_padding;
 188             break;
 189           case Bubble.Attachment.LEFT:
 190             pos.top = origin.top + offset[1] - ARROW_OFFSET;
 191             pos.left = origin.left + el.offsetWidth + opt_padding;
 192             break;
 193         }
 194       } else {
 195         switch (attachment) {
 196           case Bubble.Attachment.TOP:
 197             pos.left = origin.left + offset[0] - ARROW_OFFSET;
 198             pos.bottom = origin.bottom + el.offsetHeight + opt_padding;
 199             break;
 200           case Bubble.Attachment.RIGHT:
 201             pos.top = origin.top + offset[1] - ARROW_OFFSET;
 202             pos.left = origin.left + el.offsetWidth + opt_padding;
 203             break;
 204           case Bubble.Attachment.BOTTOM:
 205             pos.left = origin.left + offset[0] - ARROW_OFFSET;
 206             pos.top = origin.top + el.offsetHeight + opt_padding;
 207             break;
 208           case Bubble.Attachment.LEFT:
 209             pos.top = origin.top + offset[1] - ARROW_OFFSET;
 210             pos.right = origin.right + el.offsetWidth + opt_padding;
 211             break;
 212         }
 213       }
 214
 215       this.anchor_ = el;
 216       this.showContentAt_(pos, attachment, opt_content);
 217     },
 218
 219     /**
 220      * Shows the bubble for given anchor element.
 221      * @param {!HTMLElement} el Anchor element of the bubble.
 222      * @param {string} text Text content to show in bubble.
 223      * @param {!Attachment} attachment Bubble attachment (on which side of the
 224      *     element it should be displayed).
 225      * @param {number=} opt_offset Offset of the bubble attachment point from
 226      *     left (for vertical attachment) or top (for horizontal attachment)
 227      *     side of the element. If not specified, the bubble is positioned to
 228      *     be aligned with the left/top side of the element but not farther than
 229      *     half of its weight/height.
 230      * @param {number=} opt_padding Optional padding of the bubble.
 231      */
 232     showTextForElement: function(el, text, attachment,
 233                                  opt_offset, opt_padding) {
 234       var span = this.ownerDocument.createElement('span');
 235       span.textContent = text;
 236       this.showContentForElement(el, attachment, span, opt_offset, opt_padding);
 237     },
 238
 239     /**
 240      * Hides the bubble.
 241      */
 242     hide: function() {
 243       if (!this.classList.contains('faded'))
 244         this.classList.add('faded');
 245     },
 246
 247     /**
 248      * Hides the bubble anchored to the given element (if any).
 249      * @param {!Object} el Anchor element.
 250      */
 251     hideForElement: function(el) {
 252       if (!this.hidden && this.anchor_ == el)
 253         this.hide();
 254     },
 255
 256     /**
 257      * Handler for faded transition end.
 258      * @private
 259      */
 260     handleTransitionEnd_: function(e) {
 261       if (this.classList.contains('faded')) {
 262         this.hidden = true;
 263         if (this.elementToFocusOnHide_ &&
 264             document.activeElement == document.body) {
 265           // Restore focus to default element only if there's no other
 266           // element that is focused.
 267           this.elementToFocusOnHide_.focus();
 268         }
 269       }
 270     },
 271
 272     /**
 273      * Handler of document click event.
 274      * @private
 275      */
 276     handleDocClick_: function(e) {
 277       // Ignore clicks on anchor element.
 278       if (e.target == this.anchor_)
 279         return;
 280
 281       if (!this.hidden)
 282         this.hide();
 283     },
 284
 285     /**
 286      * Handle of document keydown event.
 287      * @private
 288      */
 289     handleDocKeyDown_: function(e) {
 290       if (this.hideOnKeyPress_ && !this.hidden) {
 291         this.hide();
 292         return;
 293       }
 294
 295       if (e.keyCode == 27 && !this.hidden) {
 296         if (this.elementToFocusOnHide_)
 297           this.elementToFocusOnHide_.focus();
 298         this.hide();
 299       }
 300     },
 301
 302     /**
 303      * Handler of window blur event.
 304      * @private
 305      */
 306     handleWindowBlur_: function(e) {
 307       if (!this.hidden)
 308         this.hide();
 309     }
 310   };
 311
 312   return {
 313     Bubble: Bubble
 314   };
 315 });