-
-
Notifications
You must be signed in to change notification settings - Fork 91
/
selectionwell.js
73 lines (71 loc) · 2.12 KB
/
selectionwell.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
define([
'jquery',
'underscore',
'mockup-ui-url/views/popover',
'text!mockup-patterns-structure-url/templates/selection_item.xml'
], function($, _, PopoverView, ItemTemplate) {
'use strict';
var WellView = PopoverView.extend({
className: 'popover selected-items',
title: _.template(
'<input type="text" class="filter" placeholder="<%- _t("Filter") %>" />' +
'<a href="#" class=" remove-all">' +
'<span class="glyphicon glyphicon-remove-circle"></span> <%- _t("remove all") %></a>'
),
content: _.template(
'<% collection.each(function(item) { %>' +
'<%= item_template(item.toJSON()) %>' +
'<% }); %>'
),
events: {
'click a.remove': 'itemRemoved',
'keyup input.filter': 'filterSelected',
'click .remove-all': 'removeAll'
},
initialize: function(options) {
PopoverView.prototype.initialize.apply(this, [options]);
var self = this;
var timeout = 0;
this.listenTo(this.collection, 'reset all add remove', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
self.render();
}, 50);
});
this.options['item_template'] = _.template(ItemTemplate); // jshint ignore:line
},
render: function() {
PopoverView.prototype.render.call(this);
if (this.collection.length === 0) {
this.$el.removeClass('active');
}
return this;
},
itemRemoved: function(e) {
e.preventDefault();
var uid = $(e.currentTarget).data('uid');
this.collection.removeByUID(uid);
if (this.collection.length !== 0) {
// re-rendering causes it to close, reopen
this.show();
}
},
filterSelected: function(e) {
var val = $(e.target).val().toLowerCase();
$('.selected-item', this.$el).each(function() {
var $el = $(this);
if ($el.text().toLowerCase().indexOf(val) === -1) {
$el.hide();
} else {
$el.show();
}
});
},
removeAll: function(e) {
e.preventDefault();
this.collection.reset();
this.hide();
}
});
return WellView;
});