· 7 years ago · Jun 07, 2018, 09:28 AM
1(function($) {
2
3 $.widget("ui.singleselect", {
4 options: {
5 // sortable: true,
6 // searchable: true,
7 animated: 'fast',
8 show: 'slideDown',
9 hide: 'slideUp'
10 },
11 _create: function() {
12 this.element.hide();
13 this.id = this.element.attr("id");
14 this.container = $('<div class="ui-singleselect ui-helper-clearfix ui-widget"></div>').insertAfter(this.element);
15 this.listContainer = $('<div class="list-container"></div>').appendTo(this.container);
16 this.listActions = $('<div class="actions ui-widget-header ui-helper-clearfix"><a href="#" class="remove-all">'+$.ui.singleselect.locale.removeAll+'</a></div>').appendTo(this.listContainer);
17 this.listItems = $('<ul class="list-items connected-list"><li class="ui-helper-hidden-accessible"></li></ul>').bind('selectstart', function(){return false;}).appendTo(this.listContainer);
18
19 var that = this;
20
21 // fix list height to match <option> depending on their individual header's heights
22 this.listItems.height(Math.max(this.element.height()-this.listActions.height(),100));
23
24 if ( !this.options.animated ) {
25 this.options.show = 'show';
26 this.options.hide = 'hide';
27 }
28 // init lists
29 this._populateLists(this.element.find('option'));
30
31 },
32 destroy: function() {
33 this.element.show();
34 this.container.remove();
35
36 $.widget.prototype.destroy.apply(this, arguments);
37 },
38 _populateLists: function(options) {
39 this.listItems.children('.ui-element').remove();
40 this.count = 0;
41
42 var that = this;
43 var items = $(options.map(function(i) {
44 var item = that._getOptionNode(this).appendTo(that.listItems).show();
45 that._applyItemState(item);
46 item.data('idx', i);
47 return item[0];
48 }));
49 },
50 _getOptionNode: function(option) {
51 option = $(option);
52 var node = $('<li class="ui-state-default ui-element" title="'+option.text()+'"><span class="ui-icon"/>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
53 node.data('optionLink', option);
54 return node;
55 },
56 // clones an item with associated data
57 // didn't find a smarter away around this
58 _cloneWithData: function(clonee) {
59 var clone = clonee.clone();
60 clone.data('optionLink', clonee.data('optionLink'));
61 clone.data('idx', clonee.data('idx'));
62 return clone;
63 },
64 _applyItemState: function(item) {
65 item.children('span').removeClass('ui-icon-arrowthick-2-n-s').addClass('ui-helper-hidden').removeClass('ui-icon');
66 item.find('a.action span').addClass('ui-icon-minus').removeClass('ui-icon-plus');
67 this._registerRemoveEvents(item.find('a.action'));
68
69 this._registerHoverEvents(item);
70 },
71 // taken from John Resig's liveUpdate script
72 _filter: function(list) {
73 var input = $(this);
74 var rows = list.children('li'),
75 cache = rows.map(function(){
76
77 return $(this).text().toLowerCase();
78 });
79
80 var term = $.trim(input.val().toLowerCase()), scores = [];
81
82 if (!term) {
83 rows.show();
84 } else {
85 rows.hide();
86
87 cache.each(function(i) {
88 if (this.indexOf(term)>-1) { scores.push(i); }
89 });
90
91 $.each(scores, function() {
92 $(rows[this]).show();
93 });
94 }
95 },
96 _registerHoverEvents: function(elements) {
97 elements.removeClass('ui-state-hover');
98 elements.mouseover(function() {
99 $(this).addClass('ui-state-hover');
100 });
101 elements.mouseout(function() {
102 $(this).removeClass('ui-state-hover');
103 });
104 },
105 _registerRemoveEvents: function(elements) {
106 var that = this;
107 elements.click(function() {
108 return false;
109 });
110 },
111 });
112
113 $.extend($.ui.singleselect, {
114 locale: {
115 removeAll:'Remove all',
116 itemsCount:'items selected'
117 }
118 });
119
120
121})(jQuery);