Commit | Line | Data |
---|---|---|
50ac472f D |
1 | _kiwi.view.MenuBox = Backbone.View.extend({ |
2 | events: { | |
17de6c75 | 3 | 'click .ui_menu_foot .close, a.close_menu': 'dispose' |
50ac472f D |
4 | }, |
5 | ||
6 | initialize: function(title) { | |
7 | var that = this; | |
8 | ||
d4bcebc3 | 9 | this.$el = $('<div class="ui_menu"><div class="items"></div></div>'); |
50ac472f D |
10 | |
11 | this._title = title || ''; | |
12 | this._items = {}; | |
13 | this._display_footer = true; | |
14 | this._close_on_blur = true; | |
50ac472f D |
15 | }, |
16 | ||
17 | ||
18 | render: function() { | |
d4bcebc3 D |
19 | var that = this, |
20 | $title, | |
21 | $items = that.$el.find('.items'); | |
50ac472f | 22 | |
d4bcebc3 | 23 | $items.find('*').remove(); |
50ac472f D |
24 | |
25 | if (this._title) { | |
d4bcebc3 | 26 | $title = $('<div class="ui_menu_title"></div>') |
51686e79 | 27 | .text(this._title); |
50ac472f | 28 | |
d4bcebc3 D |
29 | this.$el.prepend($title); |
30 | } | |
50ac472f D |
31 | |
32 | _.each(this._items, function(item) { | |
33 | var $item = $('<div class="ui_menu_content hover"></div>') | |
34 | .append(item); | |
35 | ||
d4bcebc3 | 36 | $items.append($item); |
50ac472f D |
37 | }); |
38 | ||
39 | if (this._display_footer) | |
40 | this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>'); | |
d4bcebc3 | 41 | |
50ac472f D |
42 | }, |
43 | ||
44 | ||
51686e79 D |
45 | setTitle: function(new_title) { |
46 | this._title = new_title; | |
47 | ||
48 | if (!this._title) | |
49 | return; | |
50 | ||
51 | this.$el.find('.ui_menu_title').text(this._title); | |
52 | }, | |
53 | ||
54 | ||
50ac472f D |
55 | onDocumentClick: function(event) { |
56 | var $target = $(event.target); | |
57 | ||
58 | if (!this._close_on_blur) | |
59 | return; | |
60 | ||
61 | // If this is not itself AND we don't contain this element, dispose $el | |
62 | if ($target[0] != this.$el[0] && this.$el.has($target).length === 0) | |
63 | this.dispose(); | |
64 | }, | |
65 | ||
66 | ||
67 | dispose: function() { | |
68 | _.each(this._items, function(item) { | |
69 | item.dispose && item.dispose(); | |
70 | item.remove && item.remove(); | |
71 | }); | |
72 | ||
73 | this._items = null; | |
74 | this.remove(); | |
75 | ||
c3c793e0 D |
76 | if (this._close_proxy) |
77 | $(document).off('click', this._close_proxy); | |
50ac472f D |
78 | }, |
79 | ||
80 | ||
81 | addItem: function(item_name, $item) { | |
50ac472f D |
82 | if ($item.is('a')) $item.addClass('icon-chevron-right'); |
83 | this._items[item_name] = $item; | |
84 | }, | |
85 | ||
86 | ||
87 | removeItem: function(item_name) { | |
88 | delete this._items[item_name]; | |
89 | }, | |
90 | ||
91 | ||
92 | showFooter: function(show) { | |
93 | this._display_footer = show; | |
94 | }, | |
95 | ||
96 | ||
97 | closeOnBlur: function(close_it) { | |
98 | this._close_on_blur = close_it; | |
99 | }, | |
100 | ||
101 | ||
102 | show: function() { | |
d4bcebc3 D |
103 | var that = this, |
104 | $controlbox, menu_height; | |
c3c793e0 | 105 | |
50ac472f D |
106 | this.render(); |
107 | this.$el.appendTo(_kiwi.app.view.$el); | |
c3c793e0 | 108 | |
d4bcebc3 D |
109 | // Ensure the menu doesn't get too tall to overlap the input bar at the bottom |
110 | $controlbox = _kiwi.app.view.$el.find('.controlbox'); | |
111 | $items = this.$el.find('.items'); | |
112 | menu_height = this.$el.outerHeight() - $items.outerHeight(); | |
113 | ||
114 | $items.css({ | |
115 | 'overflow-y': 'auto', | |
116 | 'max-height': $controlbox.offset().top - this.$el.offset().top - menu_height | |
117 | }); | |
118 | ||
c3c793e0 D |
119 | // We add this document click listener on the next javascript tick. |
120 | // If the current tick is handling an existing click event (such as the nicklist click handler), | |
121 | // the click event bubbles up and hits the document therefore calling this callback to | |
122 | // remove this menubox before it's even shown. | |
123 | setTimeout(function() { | |
124 | that._close_proxy = function(event) { | |
125 | that.onDocumentClick(event); | |
126 | }; | |
127 | $(document).on('click', that._close_proxy); | |
128 | }, 0); | |
50ac472f | 129 | } |
25b2bb24 | 130 | }); |