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>');
  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
  21         this.$el.find('*').remove();
  22
  23         if (this._title) {
  24             $('<div class="ui_menu_title"></div>')
  25                 .text(this._title)
  26                 .appendTo(this.$el);
  27         }
  28
  29
  30         _.each(this._items, function(item) {
  31             var $item = $('<div class="ui_menu_content hover"></div>')
  32                 .append(item);
  33
  34             that.$el.append($item);
  35         });
  36
  37         if (this._display_footer)
  38             this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');
  39     },
  40
  41
  42     onDocumentClick: function(event) {
  43         var $target = $(event.target);
  44
  45         if (!this._close_on_blur)
  46             return;
  47
  48         // If this is not itself AND we don't contain this element, dispose $el
  49         if ($target[0] != this.$el[0] && this.$el.has($target).length === 0)
  50             this.dispose();
  51     },
  52
  53
  54     dispose: function() {
  55         _.each(this._items, function(item) {
  56             item.dispose && item.dispose();
  57             item.remove && item.remove();
  58         });
  59
  60         this._items = null;
  61         this.remove();
  62
  63         if (this._close_proxy)
  64             $(document).off('click', this._close_proxy);
  65     },
  66
  67
  68     addItem: function(item_name, $item) {
  69         $item = $($item);
  70         if ($item.is('a')) $item.addClass('icon-chevron-right');
  71         this._items[item_name] = $item;
  72     },
  73
  74
  75     removeItem: function(item_name) {
  76         delete this._items[item_name];
  77     },
  78
  79
  80     showFooter: function(show) {
  81         this._display_footer = show;
  82     },
  83
  84
  85     closeOnBlur: function(close_it) {
  86         this._close_on_blur = close_it;
  87     },
  88
  89
  90     show: function() {
  91         var that = this;
  92
  93         this.render();
  94         this.$el.appendTo(_kiwi.app.view.$el);
  95
  96         // We add this document click listener on the next javascript tick.
  97         // If the current tick is handling an existing click event (such as the nicklist click handler),
  98         // the click event bubbles up and hits the document therefore calling this callback to
  99         // remove this menubox before it's even shown.
 100         setTimeout(function() {
 101             that._close_proxy = function(event) {
 102                 that.onDocumentClick(event);
 103             };
 104             $(document).on('click', that._close_proxy);
 105         }, 0);
 106     }
 107 });