Add hl-item-view and dropdown

2025-09-13 05:39:59 +00:00 · 2016-03-21 21:29:14 +08:00
parent 6483dc2a39
commit 6254417be8
6 changed files with 156 additions and 47 deletions
--- a/static/scripts/app/views/widgets/dropdown.js
+++ b/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;
+});