https://www.funkhaus-koeln.de/assets/vendor/image-select/src/ImageSelect.jquery.js

1/**
2 * Image Select (Version 1.8)
3 *
4 * Image Select is an extention to the Chosen, a Select Box Enhancer for
5 * jQuery and Prototype, full source at https://github.com/harvesthq/chosen
6 *
7 * This plugin extension was designed as a humanized UI element for social networking
8 * sites that need to faciliate relations between people. Research shows that people
9 * are extremely sensitvie to photos of others, so we needed to revamp the traditional
10 * UI elements to make them more intuitive and human.
11 *
12 * Hope you find it helpful, and get back if you have any feedback/improvements.
13 *
14 * @author    Adnan M.Sagar, PhD <[email protected]>
15 * @copyright 2002-2015 Web Semantics, Inc. (http://websemantics.ca) & AlterSpark Corp. (http://www.alterspark.com)
16 * @license   http://www.opensource.org/licenses/mit-license.php MIT
17 * @link      http://websemantics.ca
18 * @package   websemantics/image-select
19 */
20
21(function($) {
22
23// Image template, this can be overridden from the constructor (options.template),
24// must contains {src} placeholder. Ther eare two class names
25// 'chose-image' or 'chose-image-small', modifiy in CSS
26var fn_template = '<img class="{class_name}" src="{url}" />'
27
28function prependTemplate(element, option, template, rtl, multiple, cls){
29    // summery:
30    // This will fill-in the provided template with image source and css class
31    // then add it to the element.
32    //
33    // element: Dom
34    //          This is the span node
35    // object: Object,
36    //          The select option to get image url
37    // template: String
38    //          Html content
39    // rtl: Boolean,
40    //          Right to Left
41    // multiple: Boolean
42    //          Used to select the approperiate css class, default to 'true'
43    // cls*: String (optional)
44    //          Css styles class
45
46    var src = $(option).data('img-src')
47
48    if(src != undefined && src > ''){
49
50        element = $(element)
51
52        text     = $(option).text()
53        multiple = (multiple != undefined) ? multiple : true
54        cls      = cls || (multiple ? 'chose-image' : 'chose-image-small')
55        cls      = rtl ? cls + ' rtl' : cls
56        template = template.replace('{url}',src)
57                           .replace('{class_name}',cls)
58                           .replace('{text}',text)
59
60        // Empty the element
61        element.empty()
62
63        // Insert after if ltr or multiple select, otherwise, insert before
64        if(rtl && multiple){
65            element.append(template)
66        }
67        else {
68            element.prepend(template)
69        }
70    }
71}
72
73function getSelectedOptions(chosen){
74    // summery:
75    //      Return a list of selected items/options with the selected 'option' elements
76    //      and chosen 'span' elements.
77    //
78    // chosen: Chosen
79    //          The Chosen object
80
81    var items    = []
82    var options  = $(chosen.form_field).find('option:selected') || []
83    var spans    = (chosen.is_multiple) ? $(chosen.container).find('.chosen-choices span'):
84                                          $(chosen.container).find('.chosen-single span')
85
86    for(var i = 0; i < options.length; i++)
87        for(var j = 0; j < spans.length; j++)
88            if($(spans[j]).text() == $(options[i]).text())
89                items.push({span:spans[j],option:options[i]})
90
91    return items
92}
93
94// Store the original 'chosen' method
95var fn_chosen = $.fn.chosen
96
97$.fn.extend({
98 // summery:
99 //  Extend the original 'chosen' method to support images
100 chosen: function(params) {
101
102    params = params || {}
103
104    // Original behavior - use function.apply to preserve context
105    var ret = fn_chosen.apply(this, arguments)
106
107    // Process all select elements to attach event handlers
108    // (change, hiding_dropdown and showing_dropdown)
109
110    this.each(function() {
111
112        var $this = $(this), chosen = $this.data('chosen')
113
114        $this.on("chosen:hiding_dropdown", function(e, chosen){
115            // summery
116            //  Triggers when hidding dropdown, explain why:TODO.
117            //
118            // evt: Event
119            //      The event object
120            // _chosen: Object {chosen:Chosen}
121            //      Contains the current instance of Chosen class
122
123            var options       = getSelectedOptions(chosen.chosen)
124            var rtl           = chosen.chosen.is_rtl
125            var multiple      = chosen.chosen.is_multiple
126            var html_template = params.html_template ||
127                                (rtl && multiple ? '{text}' + fn_template : fn_template + '{text}')
128
129            for(var i = 0; i < options.length; i++){
130                prependTemplate(options[i].span, options[i].option, html_template, rtl, multiple)
131            }
132        })
133
134        $this.on("chosen:showing_dropdown", function showing_dropdown(evt, chosen){
135            // summery
136            //    This function is triggered when the chosen instance dropdown list
137            //    becomes visible. http://forwebonly.com/jquery-chosen-custom-events-and-how-to-use-them/
138            //
139            // evt: Event
140            //      The event object
141            // chosen: Object {chosen:Chosen}
142            //      Contains the current instance of Chosen class
143
144            var chosen        = chosen.chosen
145            var options       = chosen.form_field.options || []
146            var rtl           = chosen.is_rtl
147            var html_template = params.html_template ||
148                                rtl ? '{text}'+fn_template : fn_template+'{text}'
149
150            var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')
151
152            for(var i = 0; i < lis.length; i++){
153                var li      = lis[i]
154                var option  = $(options[i])
155                var idx     = $(li).attr('data-option-array-index')
156
157                /* correct option index */
158
159                if (idx){
160                  option = options[chosen.results_data[idx].options_index]
161                  prependTemplate(li, option, html_template, rtl, true, 'chose-image-list')
162                }
163
164            }
165        })
166
167        $this.on("chosen:ready", function change(e, chosen){
168            // summery:
169            //  Trigger hide dropdown when ready.

170            //  This never triggers. TODO: remove.
171            $this.trigger('chosen:hiding_dropdown',chosen)
172        })
173
174        $this.on('chosen:filter', function(evt, chosen){
175            // summery
176            //  Support search, pending: https://github.com/harvesthq/chosen/pull/2373
177          $this.trigger('chosen:showing_dropdown',{chosen:chosen.chosen})
178        })
179
180        // Finally, trigger hiding_dropdown on all select elements
181        $this.trigger('chosen:hiding_dropdown',{chosen:chosen})
182    })
183 }
184})
185
186
187})(jQuery)