ntp4 info bubble

chrome/browser/resources/shared/js/cr/ui/bubble.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// require: event_tracker.js
+
+cr.define('cr.ui', function() {
+
+  /**
+   * Bubble is a free-floating informational bubble with a triangular arrow
+   * that points at a place of interest on the page. Currently the arrow is
+   * always positioned at the bottom left and points down.
+   */

[Rick Byers, 2011/08/12 21:54:00]

Nice, I like this class.

[Evan Stade, 2011/08/12 22:35:13]

side note: the alternative I have heard is used by many to create a triangle
shape is to create a very thick border on one side (border width = half of div
width). The borders on the 4 sides don't overlap, so each border will end up as
a triangle. Needless to say, this is ghastly. And it also doesn't offer much
flexibility, e.g. you couldn't add a drop shadow or border. html5 transforms to
the rescue.

+  var Bubble = cr.ui.define('div');
+
+  Bubble.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    decorate: function() {
+      this.className = 'bubble';
+      this.innerHTML =
+          '<div class=\"bubble-contents\"></div>' +
+          '<div class=\"bubble-shadow\"></div>' +
+          '<div class=\"bubble-arrow\"></div>';
+
+      this.hidden = true;
+    },
+
+    /**
+     * Sets the text message within the bubble.
+     * @param {String} text The message string.
+     */
+    setText: function(text) {
+      this.querySelector('.bubble-contents').textContent = text;
+    },
+
+    /**
+     * Sets the anchor node, i.e. the node that this bubble points at.
+     * @param {HTMLElement} node The new anchor node.
+     */
+    attach: function(node) {
+      this.anchorNode_ = node;
+    },
+
+    /**
+     * Updates the position of the bubble. This is automatically called when
+     * the window is resized, but should also be called any time the layout
+     * may have changed.
+     */
+    reposition: function() {
+      var node = this.anchorNode_;
+      var clientRect = node.getBoundingClientRect();
+
+      this.style.left = (clientRect.left + clientRect.right) / 2 + 'px';
+      this.style.top = (clientRect.top - this.clientHeight) + 'px';
+    },
+
+    /**
+     * Starts showing the bubble. The bubble will grab input and show until the
+     * user clicks away.
+     */
+    show: function() {

[Rick Byers, 2011/08/12 21:54:00]

add some protection against calling show twice (don't want, for example, to leak
the events).

[Evan Stade, 2011/08/12 22:35:13]

done (also improved attach)

+      document.body.appendChild(this);
+      this.hidden = false;
+      this.reposition();
+
+      this.eventTracker_ = new EventTracker;
+      this.eventTracker_.add(window, 'resize', this.reposition.bind(this));
+
+      var doc = this.ownerDocument;
+      this.eventTracker_.add(doc, 'keydown', this, true);
+      this.eventTracker_.add(doc, 'mousedown', this, true);
+    },
+
+    /**
+     * Hides the bubble from view.
+     */
+    hide: function() {
+      this.hidden = true;
+      this.eventTracker_.removeAll();
+      this.parentNode.removeChild(this);
+    },
+
+    /**
+     * Handles keywdown and mousedown events, dismissing the bubble if
+     * necessary.
+     * @param {Event} e The event.
+     */
+    handleEvent: function(e) {
+      switch (e.type) {
+        case 'keydown':
+          if (e.keyCode == 27 /* Esc */)
+            this.hide();
+          break;
+
+        case 'mousedown':
+          if (!this.contains(e.target))
+            this.hide();
+          break;
+      }
+
+      e.stopPropagation();
+      e.preventDefault();

[Rick Byers, 2011/08/12 21:54:00]

you really want to swallow all input on the document until the bubble is hidden?
 I thought the point of bubbles (as opposed to modal pop-ups) usually was to
overlay an otherwise functional UI?

[Evan Stade, 2011/08/12 22:35:13]

I guess this is up to one of the UI leads; I could see them wanting to leave the
bubble up until the user explicity dismisses it. But this mirrors the
functionality of chrome bubbles, which are app modal (actually they are desktop
modal but I think app modal is preferable in the webpage bubble case). I think
it's important to match what we've already taught users, because a user should
be able to accurately predict the behavior of a UI element based on its
appearance.

[Rick Byers, 2011/08/12 23:46:08]

I agree this should match behavior of other bubbles.  I was thinking of the
infobars when I was thinking it shouldn't be modal - sorry.  I also misread the
mousedown code - was thinking it disappeared only when clicked, when in fact it
disappears only when somewhere else on the document ins clicked.  That's much
better.  Sorry for the confusion.

+      return;
+    },
+  };
+
+  return {
+    Bubble: Bubble
+  };
+});