Add hl-item-view and dropdown

seahub/templates/js/templates.html

@@ -1377,9 +1377,13 @@
     <td><%- device_name %></td>
     <td><%- last_login_ip %></td>
     <td><time title='<%- time %>'><%- time_from_now %></time></td>
-    <td class="popover-container">
+    <td class="popover-container js-dropdown">
-        <span class="js-toggle-repos cspt"><%- synced_repos_length %><% if (synced_repos.length > 0) { %> <span class="dir-icon icon-caret-down"></span><% } %></span>
+        <% if (synced_repos.length > 0) { %>
-        <div class="lib-list device-libs-popover popover hide">
+        <span class="js-toggle-repos js-dropdown-toggle cspt"><%- synced_repos_length %> <span class="dir-icon icon-caret-down"></span></span>
+        <% } else { %>
+        <span class="cspt">0</span>
+        <% } %>
+        <div class="lib-list device-libs-popover popover js-dropdown-content hide">
             <div class="popover-con">
             <ul>
                 <% for (var i = 0, len = synced_repos_length; i < len; i++) { %>

seahub/templates/libraries.html

@@ -263,6 +263,10 @@ app["pageOptions"] = {
     file_audit_enabled: {% if file_audit_enabled %} true {% else %} false {% endif %},
     cur_note: {% if request.cur_note %} {'id': '{{ request.cur_note.id }}'} {% else %} null {% endif %}
 };
+app.ui = {
+    currentDropdown: null,
+    currentHighlightedItem: null
+};
 </script>
 {% if debug %}
 <script data-main="{% static "scripts/main.js" %}" src="{% static "scripts/lib/require.js" %}"></script>

static/scripts/app/views/device.js

@@ -3,23 +3,23 @@ define([
     'underscore',
     'backbone',
     'common',
-    'moment'
+    'moment',
-], function($, _, Backbone, Common, Moment) {
+    'app/views/widgets/hl-item-view',
+    'app/views/widgets/dropdown'
+], function($, _, Backbone, Common, Moment, HLItemView, DropdownView) {
     'use strict';
 
-    var DeviceView = Backbone.View.extend({
+    var DeviceView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#device-item-tmpl').html()),
 
         events: {
-            'mouseenter': 'highlight',
+            'click .unlink-device': 'unlinkDevice'
-            'mouseleave': 'rmHighlight',
-            'click .unlink-device': 'unlinkDevice',
-            'click .js-toggle-repos': 'toggleSyncedRepos'
         },
 
         initialize: function() {
+            HLItemView.prototype.initialize.call(this);
         },
 
         render: function() {
@@ -48,23 +48,13 @@ define([
 
             this.$el.html(this.template(data));
 
+            new DropdownView({
+                el: this.$('.js-dropdown')
+            });
+
             return this;
         },
 
-        highlight: function() {
-            if ($('.device-libs-popover:visible').length) {
-                return;
-            }
-            this.$el.addClass('hl').find('.op-icon').removeClass('vh');
-        },
-
-        rmHighlight: function() {
-            if ($('.device-libs-popover:visible').length) {
-                return;
-            }
-            this.$el.removeClass('hl').find('.op-icon').addClass('vh');
-        },
-
         _hidePopover: function(e) {
             var view = e.data.view;
             var target = e.target || event.srcElement;
@@ -77,19 +67,15 @@ define([
         },
 
         toggleSyncedRepos: function(e) {
-            if (this.model.get('synced_repos') == 0) {
-                return false;
-            }
-
             var $icon= this.$('.dir-icon'),
                 $popover = this.$('.device-libs-popover');
 
             if ($popover.is(':hidden')) {
-                $icon.removeClass('icon-caret-up').addClass('icon-caret-down');
+                $icon.removeClass('icon-caret-down').addClass('icon-caret-up');
                 $popover.removeClass('hide');
                 $(document).on('click', { view: this }, this._hidePopover);
             } else {
-                $icon.removeClass('icon-caret-down').addClass('icon-caret-up');
+                $icon.removeClass('icon-caret-up').addClass('icon-caret-down');
                 $popover.addClass('hide');
                 $(document).off('click', this._hidePopover);
             }

static/scripts/app/views/starred-file-item.js

@@ -2,22 +2,22 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
+    'common',
-], function($, _, Backbone, Common) {
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
     'use strict';
 
-    var StarredFileView = Backbone.View.extend({
+    var StarredFileView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#starred-file-item-tmpl').html()),
 
         events: {
-            'mouseenter': 'showAction',
-            'mouseleave': 'hideAction',
             'click .unstar': 'removeShare'
         },
 
         initialize: function() {
+            HLItemView.prototype.initialize.call(this);
         },
 
         render: function () {
@@ -48,16 +48,6 @@ define([
                     Common.ajaxErrorHandler(xhr);
                 }
             });
-        },
-
-        showAction: function() {
-            this.$el.addClass('hl');
-            this.$el.find('.op-icon').removeClass('vh');
-        },
-
-        hideAction: function() {
-            this.$el.removeClass('hl');
-            this.$el.find('.op-icon').addClass('vh');
         }
 
     });

static/scripts/app/views/widgets/dropdown.js

@@ -0,0 +1,84 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    /*
+     * Dropdown View.
+    */
+
+    // There can be only one visible dropdown view
+    $(document).click(function(e) {
+        var view = app.ui.currentDropdown;
+        var target = e.target || event.srcElement;
+
+        if (!view) {
+            return true;
+        }
+
+        if (!view.$('.js-dropdown-content').is(target)
+            && !view.$('.js-dropdown-content').find('*').is(target))
+        {
+            view.hide();
+            if (app.ui.currentHighlightedItem) {
+                app.ui.currentHighlightedItem.rmHighlight();
+            }
+        }
+        return true;
+    });
+
+    var DropdownView = Backbone.View.extend({
+
+        toggleClass: '.js-dropdown-toggle',
+        popupClass: '.js-dropdown-content',
+
+        initialize: function(options) {
+            this.$el.on('click', '.js-dropdown-toggle', _.bind(this.toggleDropdown, this));
+        },
+
+        _hideDropdown: function(e) {
+            var view = e.data.view;
+            var target = e.target || event.srcElement;
+            if (!view.$(view.popupClass).is(target)
+                && !view.$(view.popupClass).find('*').is(target)
+                && !view.$(view.toggleClass).is(target)) {
+                $(view.popupClass).addClass('hide');
+                view.rmHighlight();
+                $(document).off('click', view._hidePopup);
+                if (view.onPopupHide) {
+                    view.onPopupHide();
+                }
+            }
+        },
+
+        hide: function() {
+            app.ui.currentDropdown = null;
+            this.$('.js-dropdown-content').addClass('hide');
+        },
+
+        show: function() {
+            app.ui.currentDropdown = this;
+            this.$('.js-dropdown-content').removeClass('hide');
+        },
+
+        toggleDropdown: function() {
+            if (app.ui.currentDropdown && app.ui.currentDropdown != this) {
+                app.ui.currentDropdown.hide();
+            }
+
+            if (this.$('.js-dropdown-content').is(':hidden')) {
+                this.show();
+            } else {
+                this.hide();
+            }
+
+            return false;
+        }
+
+    });
+
+    return DropdownView;
+});

static/scripts/app/views/widgets/hl-item-view.js

@@ -0,0 +1,41 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    /*
+     * Hightable Item View.
+    */
+    var HLItemView = Backbone.View.extend({
+        tagName: 'tr',
+
+        hiddenOperationClass: '.op-icon',
+
+        initialize: function(options) {
+            this.$el.on('mouseenter', _.bind(this.highlight, this));
+            this.$el.on('mouseleave', _.bind(this.rmHighlight, this));
+        },
+
+        highlight: function() {
+            if (app.ui.currentDropdown) {
+                return;
+            }
+            app.ui.currentHighlightedItem = this;
+            this.$el.addClass('hl').find(this.hiddenOperationClass).removeClass('vh');
+        },
+
+        rmHighlight: function() {
+            if (app.ui.currentDropdown) {
+                return;
+            }
+            app.ui.currentHighlightedItem = null;
+            this.$el.removeClass('hl').find(this.hiddenOperationClass).addClass('vh');
+        }
+
+    });
+
+    return HLItemView;
+});