editor: openSelect view - maxHeight/maxWidth options
[fnpeditor.git] / src / editor / views / openSelect / openSelect.js
1 define(function(require) {
2     
3 'use strict';
4
5 var _ = require('libs/underscore'),
6     $ = require('libs/jquery'),
7     Backbone = require('libs/backbone'),
8     template = require('libs/text!./template.html'),
9     itemTemplate = require('libs/text!./itemTemplate.html');
10
11
12 var OpenSelect = Backbone.View.extend({
13     className: 'openSelect',
14     events: {
15         'click a': 'onSelection',
16     },
17     initialize: function() {
18         this.$el.css('position', 'relative');
19         this.$el.append(_.template(template)({value: this.options.value || ''}));
20         this.$('.toggle').dropdown();
21         this.menu = this.$('.dropdown-menu');
22         this.toggleHandler(false);
23         if(this.options.inputTemplate) {
24             this.input = $(this.options.inputTemplate);
25             this.$('.input-wrapper').append(this.input);
26         }
27         if(this.options.maxHeight) {
28             this.menu.css('max-height', this.options.maxHeight);
29         }
30         if(this.options.maxWidth) {
31             this.menu.css('max-width', this.options.maxWidth);
32         }
33     },
34     toggleHandler: function(toggle) {
35         this.$('.toggle').css('visibility', toggle ? 'inherit' : 'hidden');
36     },
37     addItem: function(value) {
38         this.menu.append(_.template(itemTemplate)({value: value}));
39         this.toggleHandler(true);
40     },
41     clearItems: function() {
42         this.menu.empty();
43         this.toggleHandler(false);
44     },
45     setInput: function(value) {
46         if(this.options.setInput) {
47             this.options.setInput(this.input, value);
48         }
49     },
50     onSelection: function(e) {
51         var val = $(e.target).text();
52         this.setInput(val);
53         this.trigger('itemSelected', this.input.val());
54     }
55 });
56
57 return OpenSelect;
58
59 });