Skip to content

Commit 51f9ee1

Browse files
author
adunn
committed
ss4upgrade: fixed template and requirements issues
1 parent e3ef861 commit 51f9ee1

File tree

1 file changed

+75
-42
lines changed

1 file changed

+75
-42
lines changed

‎javascript/ImageSelect.jquery.js‎

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
// Store the original 'chosen' method
1919
var fn_chosen = $.fn.chosen;
2020

21-
$.fn.extend({
21+
$.fn.extend({
2222
// summery:
2323
// Extend the original 'chosen' method to support images
2424

@@ -28,22 +28,32 @@
2828

2929
var html_template = options.html_template || fn_template;
3030

31+
var self = this;
32+
3133
// Attach Ready event before continue with chose
3234
this.each(function(input_field) {
3335

3436
$this = $(this);
3537

36-
$this.on("liszt:ready", function change(e, chosen){
37-
38+
$this.on("chosen:ready", function change(e, chosen){
3839
chosen = chosen.chosen;
3940

41+
// The change event handler used further down doesn't pass in the chosen object so we need to store this for later.
42+
self.chosen = chosen;
43+
44+
// The ready event is being triggered twice so ensure we only handle it once
45+
if (self.readyEventTriggered) {
46+
return;
47+
} else {
48+
self.readyEventTriggered = true;
49+
}
50+
4051
var form_field = chosen.form_field;
4152

4253
var options = form_field.options;
43-
var spans = $(chosen.container).find('.chzn-choices span');
44-
54+
var spans = $(chosen.container).find('.chosen-choices span');
4555

46-
if(options && options.length){
56+
if(options && options.length){
4757

4858
for(var i = 0 ; i < options.length; i++){
4959

@@ -54,35 +64,33 @@
5464

5565
if(selected && img_src){
5666

57-
var template = html_template.replace('{url}',img_src);
67+
var template = html_template.replace('{url}',img_src);
5868

59-
if(spans.length){
60-
for (var j = 0; j < spans.length; j++)
61-
if(text == $(spans[j]).text()){
62-
$(spans[j]).prepend(template.replace('{class_name}','chose-image'));
63-
}
69+
if(spans.length){
70+
for (var j = 0; j < spans.length; j++)
71+
if(text == $(spans[j]).text()){
72+
$(spans[j]).prepend(template.replace('{class_name}','chose-image'));
73+
}
6474
} else {
65-
$(chosen.container).find('.chzn-single span').prepend(template.replace('{class_name}','chose-image-small'));
75+
$(chosen.container).find('.chosen-single span').prepend(template.replace('{class_name}','chose-image-small'));
6676
}
6777
}
6878

6979
}
7080
}
7181

72-
});
82+
});
7383
});
7484

7585
// original behavior - use function.apply to preserve context
7686
var ret = fn_chosen.apply(this, arguments);
7787

7888
this.each(function(input_field) {
7989

80-
var $this, chosen;
90+
var $this;
8191

8292
$this = $(this);
8393

84-
chosen = $this.data('chosen');
85-
8694
$this.on("change", function change(evt,selected){
8795
// summery
8896
// This function is triggered when the chosen instance has changed,
@@ -91,6 +99,8 @@
9199
// selected: Object
92100
// Contains the value of the selected
93101
//
102+
103+
var chosen = self.chosen;
94104
var options = chosen.form_field.options;
95105

96106
if(selected != undefined && selected.selected != undefined && options && options.length){
@@ -104,22 +114,25 @@
104114
var template = html_template.replace('{url}',img_src);
105115

106116
// For multiple selection
107-
span = $(chosen.container).find('.chzn-choices span').last()
117+
span = $(chosen.container).find('.chosen-choices span').last()
108118
span.find('img').remove()
109119
span.prepend(template.replace('{class_name}','chose-image'));
110120

111121
// For single select
112-
span = $(chosen.container).find('.chzn-single span')
122+
span = $(chosen.container).find('.chosen-single span')
113123
span.find('img').remove()
114124
span.prepend(template.replace('{class_name}','chose-image-small'));
115125
}
116126
}
117127
}
118128
});
119129

120-
$this.on("liszt:hiding_dropdown", function(e, _c){
121-
122-
var options = chosen.form_field.options;
130+
$this.on("chosen:hiding_dropdown", function(e, chosen){
131+
if (!chosen) {
132+
return;
133+
}
134+
chosen = chosen.chosen;
135+
var options = chosen.form_field; //.options;
123136

124137
var selected = $(chosen.form_field).find(':selected');
125138

@@ -132,17 +145,17 @@
132145
var template = html_template.replace('{url}',img_src);
133146

134147
// For multiple selection
135-
span = $(chosen.container).find('.chzn-choices span').last()
148+
span = $(chosen.container).find('.chosen-choices span').last()
136149
span.find('img').remove()
137150
span.prepend(template.replace('{class_name}','chose-image'));
138151

139152
// For single select
140-
span = $(chosen.container).find('.chzn-single span')
153+
span = $(chosen.container).find('.chosen-single span')
141154
span.find('img').remove()
142155
span.prepend(template.replace('{class_name}','chose-image-small'));
143156
})
144157

145-
$this.on("liszt:showing_dropdown", function showing_dropdown(evt, _chosen){
158+
$this.on("chosen:showing_dropdown", function showing_dropdown(evt, _chosen){
146159
// summery
147160
// This function is triggered when the chosen instance dropdown list becomes visible
148161
// For Chose custom events: http://forwebonly.com/jquery-chosen-custom-events-and-how-to-use-them/
@@ -151,28 +164,48 @@
151164
// The event object
152165
// _chosen: Object {chosen:Chosen}
153166
// Contains the current instance of Chosen class
154-
var lis = $(chosen.container).find('.chzn-drop ul li')
155-
var options = $(chosen.form_field).find('optgroup, option:not(:empty)');
156167

157-
// SS uses a modified Chosen.js and after the 'showing_dropdown' event the
168+
// Ensure images have not already been processed (occurs because this dropdown event seems to be
169+
// triggered twice.
170+
var hasImage = $(_chosen.chosen.container).find('.chosen-drop ul li img');
171+
if (hasImage.length > 0) {
172+
return;
173+
}
174+
175+
var lis = $(_chosen.chosen.container).find('.chosen-drop ul li')
176+
var options = $(_chosen.chosen.form_field).find('optgroup, option:not(:empty)');
177+
178+
// SS uses a modified Chosen.js and after the 'showing_dropdown' event the
158179
// values get immediatelly reset, also removing the images. Solved it with setTimeout.
159-
setTimeout(function(lis, options){
160-
for(var i = 0; i < lis.length; i++){
161-
var li = lis[i];
162-
var option = options[i];
163-
var img_src = $(option).attr('data-img-src');
164180

165-
if(typeof img_src != 'undefined' && img_src != ''){
166-
var template = html_template.replace('{url}',img_src);
167-
$(li).prepend(template.replace('{class_name}','chose-image-list'));
168-
}
181+
for(var i = 0; i < lis.length; i++){
182+
var li = lis[i];
183+
var option = options[i];
184+
var img_src = $(option).attr('data-img-src');
185+
186+
if(typeof img_src != 'undefined' && img_src != ''){
187+
var template = html_template.replace('{url}',img_src);
188+
$(li).prepend(template.replace('{class_name}','chose-image-list'));
169189
}
170-
}, 1, lis, options);
190+
}
191+
192+
/* setTimeout(function(lis, options){
193+
for(var i = 0; i < lis.length; i++){
194+
var li = lis[i];
195+
var option = options[i];
196+
var img_src = $(option).attr('data-img-src');
197+
198+
if(typeof img_src != 'undefined' && img_src != ''){
199+
var template = html_template.replace('{url}',img_src);
200+
$(li).prepend(template.replace('{class_name}','chose-image-list'));
201+
}
202+
}
203+
}, 1, lis, options);*/
171204
});
172-
});
173-
$this.trigger('liszt:hiding_dropdown');
205+
});
206+
$this.trigger('chosen:hiding_dropdown');
174207
return ret;
175208
}
176-
});
209+
});
177210

178-
})(jQuery);
211+
})(jQuery);

0 commit comments

Comments
 (0)