Hover bubble UI overhaul.

* Backbone
* Show event
* Display groups (for fast show/hide switching)
* Right alignment mode
* Slide animations

r2/r2/public/static/css/reddit.less

@@ -892,41 +892,67 @@ a.author { margin-right: 0.5em; }
     cursor: help;
 }
 
-.help-bubble {
+.hover-bubble {
     display: none;
     position: absolute;
-    width: 35em;
     background: white;
     color: #333;
     border: 1px solid gray;
     padding: 3px;
     box-shadow: 0 2px 10px rgba(0,0,0,.25);
+    z-index: 100;
+
+    &:before, &:after {
+        position: absolute;
+        display: block;
+        content: '';
+    }
+
+    &.anchor-top {
+        &:before, &:after {
+            right: 8px;
+            border: 9px solid transparent;
+        }
+
+        &:before {
+            top: -19px;
+            border-bottom-color: gray;
+        }
+
+        &:after {
+            top: -18px;
+            border-bottom-color: white;
+        }
+    }
+
+    &.anchor-right {
+        &:before, &:after {
+            top: 8px;
+            border: 9px solid transparent;
+        }
+
+        &:before {
+            right: -19px;
+            border-left-color: gray;
+        }
+
+        &:after {
+            right: -18px;
+            border-left-color: white;
+        }
+    }
 }
 
-.help-bubble p, .help-bubble form {
-    margin: .5em;
-}
+.help-bubble {
+    width: 35em;
 
-.help-bubble:before, .help-bubble:after {
-    position: absolute;
-    right: 8px;
-    display: block;
-    content: '';
-    border: 9px solid transparent;
-}
+    p, form {
+        margin: .5em;
+    }
 
-.help-bubble:before {
-    top: -19px;
-    border-bottom-color: gray;
-}
-
-.help-bubble:after {
-    top: -18px;
-    border-bottom-color: white;
-}
-
-.help-bubble a:hover {
-    text-decoration: underline
+    a:hover {
+        text-decoration: underline
+    }
 }
 
 .infotext { 

r2/r2/public/static/js/ui.js

@@ -24,7 +24,10 @@ r.ui.init = function() {
         $('body > .content > :not(.infobar):first').before(infobar)
     }
 
-    r.ui.HelpBubble.init()
+    $('.help-bubble').each(function(idx, el) {
+        $(el).data('HelpBubble', new r.ui.Bubble({el: el}))
+    })
+
     r.ui.PermissionEditor.init()
 }
 
@@ -131,46 +134,122 @@ r.ui.Form.prototype = $.extend(new r.ui.Base(), {
     }
 })
 
-r.ui.HelpBubble = function(el) {
-    r.ui.Base.call(this, el)
-    this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
-    this.$parent = this.$el.parent()
-    this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
-    this.$parent.click($.proxy(this, 'queueShow'))
-}
-r.ui.HelpBubble.init = function() {
-    $('.help-bubble').each(function(idx, el) {
-        $(el).data('HelpBubble', new r.ui.HelpBubble(el))
-    })
-}
-r.ui.HelpBubble.prototype = $.extend(new r.ui.Base(), {
+r.ui.Bubble = Backbone.View.extend({
     showDelay: 150,
     hideDelay: 750,
+    animateDuration: 150,
+
+    initialize: function() {
+        this.$el.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+        this.$parent = this.options.parent || this.$el.parent()
+        this.$parent.hover($.proxy(this, 'queueShow'), $.proxy(this, 'queueHide'))
+        this.$parent.click($.proxy(this, 'queueShow'))
+    },
+
+    position: function() {
+        var parentPos = this.$parent.offset(),
+            bodyOffset = $('body').offset(),
+            offsetX, offsetY
+        if (this.$el.is('.anchor-top')) {
+            offsetX = this.$parent.outerWidth(true) - this.$el.outerWidth(true)
+            offsetY = this.$parent.outerHeight(true) + 5
+            this.$el.css({
+                left: parentPos.left + offsetX,
+                top: parentPos.top + offsetY - bodyOffset.top
+            })
+        } else if (this.$el.is('.anchor-right')) {
+            offsetX = 16
+            offsetY = 0
+            parentPos.right = $(window).width() - parentPos.left
+            this.$el.css({
+                right: parentPos.right + offsetX,
+                top: parentPos.top + offsetY - bodyOffset.top
+            })
+        }
+    },
 
     show: function() {
         this.cancelTimeout()
+        if (this.$el.is(':visible')) {
+            return
+        }
+
+        this.trigger('show')
 
         $('body').append(this.$el)
 
-        var parentPos = this.$parent.offset()
-        this.$el
-            .show()
-            .offset({
-                left: parentPos.left + this.$parent.outerWidth(true) - this.$el.outerWidth(true),
-                top: parentPos.top + this.$parent.outerHeight(true) + 5
-            })
+        this.render()
+        this.position()
+        this.$el.css('opacity', 1).show()
+
+        var isSwitch = this.options.group && this.options.group.current && this.options.group.current != this
+        if (isSwitch) {
+            this.options.group.current.hideNow()
+        } else {
+            this._animate('show')
+        }
+
+        if (this.options.group) {
+            this.options.group.current = this
+        }
+    },
+
+    hideNow: function() {
+        this.cancelTimeout()
+        if (this.options.group) {
+            this.options.group.current = null
+        }
+        this.$el.hide()
+        this.$parent.append(this.$el)
     },
 
     hide: function(callback) {
-        this.$el.fadeOut(150, $.proxy(function() {
-            this.$el.hide()
-            this.$parent.append(this.$el)
-            if (callback) {
-                callback()
-            }
+        if (!this.$el.is(':visible')) {
+            callback && callback()
+            return
+        }
+
+        this._animate('hide', $.proxy(function() {
+            this.hideNow()
+            callback && callback()
         }, this))
     },
 
+    _animate: function(action, callback) {
+        if (!this.animateDuration) {
+            callback && callback()
+            return
+        }
+
+        var animProp, animOffset
+        if (this.$el.is('.anchor-top')) {
+            animProp = 'top'
+            animOffset = '-=5'
+        } else if (this.$el.is('.anchor-right')) {
+            animProp = 'right'
+            animOffset = '-=5'
+        }
+        var curOffset = this.$el.css(animProp)
+
+        hideProps = {'opacity': 0}
+        hideProps[animProp] = animOffset
+        showProps = {'opacity': 1}
+        showProps[animProp] = curOffset
+
+        var start, end
+        if (action == 'show') {
+            start = hideProps
+            end = showProps
+        } else if (action == 'hide') {
+            start = showProps
+            end = hideProps
+        }
+
+        this.$el
+            .css(start)
+            .animate(end, this.animateDuration, callback)
+    },
+
     cancelTimeout: function() {
         if (this.timeout) {
             clearTimeout(this.timeout)

r2/r2/templates/spotlightlisting.html

@@ -49,7 +49,7 @@
 
   <div class="help help-hoverable">
     ${_("what's this?")}
-    <div id="spotlight-help" class="help-bubble">
+    <div id="spotlight-help" class="hover-bubble help-bubble anchor-top">
       <div class="help-section help-promoted">
         <p>
           ${text_with_links(