client/src/views/menubox.js

   1 _kiwi.view.MenuBox = Backbone.View.extend({
   2     events: {
   3         'click .ui_menu_foot .close, a.close_menu': 'dispose'
   4     },
   5
   6     initialize: function(title) {
   7         var that = this;
   8
   9         this.$el = $('<div class="ui_menu"><div class="items"></div></div>');
  10
  11         this._title = title || '';
  12         this._items = {};
  13         this._display_footer = true;
  14         this._close_on_blur = true;
  15     },
  16
  17
  18     render: function() {
  19         var that = this,
  20             $title,
  21             $items = that.$el.find('.items');
  22
  23         $items.find('*').remove();
  24
  25         if (this._title) {
  26             $title = $('<div class="ui_menu_title"></div>')
  27                 .text(this._title);
  28
  29             this.$el.prepend($title);
  30         }
  31
  32         _.each(this._items, function(item) {
  33             var $item = $('<div class="ui_menu_content hover"></div>')
  34                 .append(item);
  35
  36             $items.append($item);
  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>');
  41
  42     },
  43
  44
  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
  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
  76         if (this._close_proxy)
  77             $(document).off('click', this._close_proxy);
  78     },
  79
  80
  81     addItem: function(item_name, $item) {
  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() {
 103         var that = this,
 104             $controlbox, menu_height;
 105
 106         this.render();
 107         this.$el.appendTo(_kiwi.app.view.$el);
 108
 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
 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);
 129     }
 130 });