Fixing dropdown.

media/js/newsblur/social_page/social_page_login_view.js

@@ -1,12 +1,13 @@
 NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
     
     events: {
+        "click .NB-user-tab"        : "open_user_dropdown",
         "click .NB-menu-newsblur"   : "open_in_newsblur",
         "click .NB-menu-logout"     : "logout",
         "click .NB-login-button"    : "login",
         "click .NB-signup-button"   : "signup",
-        "click .NB-switch-login-button"   : "switch_login",
-        "click .NB-switch-signup-button"   : "switch_signup",
+        "click .NB-switch-login-button"  : "switch_login",
+        "click .NB-switch-signup-button" : "switch_signup",
         "keypress .NB-login input"  : "maybe_login",
         "keypress .NB-signup input" : "maybe_signup"
     },
@@ -43,11 +44,30 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
         }, this));
     },
     
+    open_user_dropdown: function(e) {
+        if (e.currentTarget != e.target && $(e.target).parent().get(0) != e.currentTarget) {
+            return;
+        }
+        var $button = this.$(".NB-user-tab");
+        
+        if (!$button.hasClass('open')) {
+            _.defer(function() {
+                $('html').one('click', function() {
+                    $button.removeClass('open');
+                });
+            });
+            $button.addClass('open');
+        } else {
+            $button.removeClass('open');
+        }
+    },
+    
     // ==========
     // = Events =
     // ==========
     
     open_in_newsblur: function(e) {
+        console.log(["open_in_newsblur", e]);
         e.preventDefault();
         window.location.href = NEWSBLUR.URLs.newsblur_page;
     },
@@ -89,7 +109,8 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
         this.error(error);
     },
      
-    logout: function() {
+    logout: function(e) {
+        e.preventDefault();
         NEWSBLUR.assets.logout(_.bind(this.post_logout, this), _.bind(this.logout_error, this));
     },
     

media/js/vendor/bootstrap-dropdown.js

@@ -1,161 +0,0 @@
-/* ============================================================
- * bootstrap-dropdown.js v2.2.2
- * http://twitter.github.com/bootstrap/javascript.html#dropdowns
- * ============================================================
- * Copyright 2012 Twitter, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============================================================ */
-
-
-!function ($) {
-
-  "use strict"; // jshint ;_;
-
-
- /* DROPDOWN CLASS DEFINITION
-  * ========================= */
-
-  var toggle = '[data-toggle=dropdown]'
-    , Dropdown = function (element) {
-        var $el = $(element).on('click.dropdown.data-api', this.toggle)
-        $('html').on('click.dropdown.data-api', function () {
-          $el.parent().removeClass('open')
-        })
-      }
-
-  Dropdown.prototype = {
-
-    constructor: Dropdown
-
-  , toggle: function (e) {
-      var $this = $(this)
-        , $parent
-        , isActive
-
-      if ($this.is('.disabled, :disabled')) return
-
-      $parent = getParent($this)
-
-      isActive = $parent.hasClass('open')
-
-      clearMenus()
-
-      if (!isActive) {
-        $parent.toggleClass('open')
-      }
-
-      $this.focus()
-
-      return false
-    }
-
-  , keydown: function (e) {
-      var $this
-        , $items
-        , $active
-        , $parent
-        , isActive
-        , index
-
-      if (!/(38|40|27)/.test(e.keyCode)) return
-
-      $this = $(this)
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      if ($this.is('.disabled, :disabled')) return
-
-      $parent = getParent($this)
-
-      isActive = $parent.hasClass('open')
-
-      if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
-
-      $items = $('[role=menu] li:not(.divider):visible a', $parent)
-
-      if (!$items.length) return
-
-      index = $items.index($items.filter(':focus'))
-
-      if (e.keyCode == 38 && index > 0) index--                                        // up
-      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
-      if (!~index) index = 0
-
-      $items
-        .eq(index)
-        .focus()
-    }
-
-  }
-
-  function clearMenus() {
-    $(toggle).each(function () {
-      getParent($(this)).removeClass('open')
-    })
-  }
-
-  function getParent($this) {
-    var selector = $this.attr('data-target')
-      , $parent
-
-    if (!selector) {
-      selector = $this.attr('href')
-      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
-    }
-
-    $parent = $(selector)
-    $parent.length || ($parent = $this.parent())
-
-    return $parent
-  }
-
-
-  /* DROPDOWN PLUGIN DEFINITION
-   * ========================== */
-
-  var old = $.fn.dropdown
-
-  $.fn.dropdown = function (option) {
-    return this.each(function () {
-      var $this = $(this)
-        , data = $this.data('dropdown')
-      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
-      if (typeof option == 'string') data[option].call($this)
-    })
-  }
-
-  $.fn.dropdown.Constructor = Dropdown
-
-
- /* DROPDOWN NO CONFLICT
-  * ==================== */
-
-  $.fn.dropdown.noConflict = function () {
-    $.fn.dropdown = old
-    return this
-  }
-
-
-  /* APPLY TO STANDARD DROPDOWN ELEMENTS
-   * =================================== */
-
-  $(document)
-    .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
-    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
-    .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
-    .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
-    .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
-
-}(window.jQuery);

templates/social/social_page.xhtml

@@ -116,8 +116,8 @@
                 </div>
             </li>
             {% if user.is_authenticated %}
-                <li class="NB-header-tab NB-user-tab dropdown">
-                    <div class="NB-tab-inner dropdown-toggle" data-toggle="dropdown">
+                <li class="NB-header-tab NB-user-tab dropdown" data-toggle="dropdown">
+                    <div class="NB-tab-inner">
                         <span><img src="{{ user_social_profile.large_photo_url }}" class="NB-user-avatar" /></span>
                         <img src="{{ MEDIA_URL }}img/icons/silk/bullet_arrow_down.png" class="NB-arrow" />
                         {{ user_social_profile.username }}