forked from websemantics/Image-Select
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageSelect.jquery.js
202 lines (156 loc) · 8.45 KB
/
ImageSelect.jquery.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
// Image Select, an extention to the Chosen, a Select Box Enhancer for jQuery and Prototype
// by Adnan Sagar, WebSemantics Inc. http://websemantics.ca & AlterSpark Corp. http://www.alterspark.com/
//
// Version 1.0.2
// Full source at https://github.com/harvesthq/chosen
// Copyright (c) 2014 WebSemantics http://websemantics.ca
// MIT License, https://github.com/websemantics/Image-Select/blob/master/LICENSE
(function($) {
// Image template, this can be overridden from the constructor (options.template),
// must contains {src} placeholder. Ther eare two class names 'chose-image' or 'chose-image-small', modifiy in CSS
var fn_template = '<img class="{class_name}" src="{url}" />';
// Store the original 'chosen' method
var fn_chosen = $.fn.chosen;
$.fn.extend({
// summery:
// Extend the original 'chosen' method to support images
chosen: function(options) {
options = options || {};
//options.containerWindow --container in which chosen has to decide to show upward or downward dropdown
options.mustInsideWindow = options.mustInsideWindow || true;
var html_template = options.html_template || fn_template;
// Attach Ready event before continue with chose
this.each(function(input_field) {
$this = $(this);
$this.on("chosen:ready", function change(e, chosen){
chosen = chosen.chosen;
var form_field = chosen.form_field;
var options = form_field.options;
var spans = $(chosen.container).find('.chosen-choices span');
if(options && options.length){
for(var i = 0 ; i < options.length; i++){
var option = options[i];
var selected = $(option).attr('selected');
var img_src = $(option).attr('data-img-src');
var text = $(option).text();
if(selected && img_src){
var template = html_template.replace('{url}',img_src);
if(spans.length){
for (var j = 0; j < spans.length; j++)
if(text == $(spans[j]).text()){
$(spans[j]).prepend(template.replace('{class_name}','chose-image'));
}
} else {
$(chosen.container).find('.chosen-single span').prepend(template.replace('{class_name}','chose-image-small'));
}
}
}
}
});
});
// original behavior - use function.apply to preserve context
var ret = fn_chosen.apply(this, arguments);
this.each(function(input_field) {
var $this, chosen;
$this = $(this);
chosen = $this.data('chosen');
$this.on("change", function change(evt,selected){
// summery
// This function is triggered when the chosen instance has changed,
// evt: Event
// The event object
// selected: Object
// Contains the value of the selected
//
var options = chosen.form_field.options;
if(selected != undefined && selected.selected != undefined && options && options.length){
for(var i = 0 ; i < options.length; i++){
var option = options[i];
var value = ($(option).attr('value')) ? $(option).attr('value') : $(option).text();
var img_src = $(option).attr('data-img-src');
if(img_src != undefined && selected.selected == value){
var template = html_template.replace('{url}',img_src);
// For multiple selection
span = $(chosen.container).find('.chosen-choices span').last()
span.find('img').remove();
span.empty();
span.prepend(template.replace('{class_name}','chose-image'));
// For single select
span = $(chosen.container).find('.chosen-single span')
span.find('img').remove();
span.empty();
span.prepend(template.replace('{class_name}','chose-image-small'));
}
}
}
});
//handle visiblity of dropdown inside the window or container
chosen.container.on("mousedown.chosen", function(e, _c){
if(options.mustInsideWindow){
//var $this = $(that);
var top = chosen.container.position().top;
var heightOfChosen = chosen.container.height(); //height of the select
var containerHeight = options.containerWindow ? $(options.containerWindow).height() : $(window).height(); //height of the container in which chosen is shown
//always show it downward if dc is not available/null
containerHeight = containerHeight == null ? 10000 : containerHeight;
var $cd = chosen.container.find('.chosen-drop');
//save the value in common variable
chosen.__heightDD = chosen.__heightDD || $cd.height();
if(containerHeight > (top+chosen.__heightDD)){
//show down ward
$cd.css('margin-top', '').removeClass('upward_state');
}
else {
//show upward
var mt = -1*(heightOfChosen + chosen.__heightDD) - 3;
$cd.css('margin-top', mt + 'px').addClass('upward_state');
}
}
});
$this.on("chosen:hiding_dropdown", function(e, _c){
var options = chosen.form_field.options;
var selected = $(chosen.form_field).find(':selected');
if(!selected) return;
var img_src = selected.attr('data-img-src');
if(!img_src) return;
var template = html_template.replace('{url}',img_src);
// For multiple selection
span = $(chosen.container).find('.chosen-choices span').last()
span.find('img').remove()
span.prepend(template.replace('{class_name}','chose-image'));
// For single select
span = $(chosen.container).find('.chosen-single span')
span.find('img').remove()
span.prepend(template.replace('{class_name}','chose-image-small'));
})
$this.on("chosen:showing_dropdown", function showing_dropdown(evt, _chosen){
// summery
// This function is triggered when the chosen instance dropdown list becomes visible
// For Chose custom events: http://forwebonly.com/jquery-chosen-custom-events-and-how-to-use-them/
//
// evt: Event
// The event object
// _chosen: Object {chosen:Chosen}
// Contains the current instance of Chosen class
var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
//var lis = $(chosen.container).find('.chosen-drop ul li');
var options = $(chosen.form_field).find('optgroup, option');
for(var i = 0; i < lis.length; i++){
var li = lis[i];
var option = options[i];
var img_src = $(option).attr('data-img-src');
if(img_src != undefined){
var template = html_template.replace('{url}',img_src);
var text = $(li).text();
$(li).empty();
$(li).append('<span>' + text + '</span>');
$(li).prepend(template.replace('{class_name}','chose-image-list'));
$(li).addClass('img-select');
}
}
});
});
return ret;
}
});
})(jQuery);