kupshop/admin/static/js/chosen.image.js

/**
 * Image Select (Version 1.8)
 *
 * Image Select is an extention to the Chosen, a Select Box Enhancer for
 * jQuery and Prototype, full source at https://github.com/harvesthq/chosen
 *
 * This plugin extension was designed as a humanized UI element for social networking
 * sites that need to faciliate relations between people. Research shows that people
 * are extremely sensitvie to photos of others, so we needed to revamp the traditional
 * UI elements to make them more intuitive and human.
 *
 * Hope you find it helpful, and get back if you have any feedback/improvements.
 *
 * @author    Adnan M.Sagar, PhD <adnan@websemantics.ca>
 * @copyright 2002-2015 Web Semantics, Inc. (http://websemantics.ca) & AlterSpark Corp. (http://www.alterspark.com)
 * @license   http://www.opensource.org/licenses/mit-license.php MIT
 * @link      http://websemantics.ca
 * @package   websemantics/image-select
 */

(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}" />'

    function prependTemplate(element, option, template, rtl, multiple, cls){
        // summery:
        // This will fill-in the provided template with image source and css class
        // then add it to the element.
        //
        // element: Dom
        //          This is the span node
        // object: Object,
        //          The select option to get image url
        // template: String
        //          Html content
        // rtl: Boolean,
        //          Right to Left
        // multiple: Boolean
        //          Used to select the approperiate css class, default to 'true'
        // cls*: String (optional)
        //          Css styles class

        var src = $(option).data('img-src')

        if(src != undefined && src > ''){

            element = $(element)

            text     = $(option).text()
            multiple = (multiple != undefined) ? multiple : true
            cls      = cls || (multiple ? 'chose-image' : 'chose-image-small')
            cls      = rtl ? cls + ' rtl' : cls
            template = template.replace('{url}',src)
                .replace('{class_name}',cls)
                .replace('{text}',text)

            // Empty the element
            element.empty()

            // Insert after if ltr or multiple select, otherwise, insert before
            if(rtl && multiple){
                element.append(template)
            }
            else {
                element.prepend(template)
            }
        }
    }

    function getSelectedOptions(chosen){
        // summery:
        //      Return a list of selected items/options with the selected 'option' elements
        //      and chosen 'span' elements.
        //
        // chosen: Chosen
        //          The Chosen object

        var items    = []
        var options  = $(chosen.form_field).find('option:selected') || []
        var spans    = (chosen.is_multiple) ? $(chosen.container).find('.chosen-choices span'):
            $(chosen.container).find('.chosen-single span')

        for(var i = 0; i < options.length; i++)
            for(var j = 0; j < spans.length; j++)
                if($(spans[j]).text() == $(options[i]).text())
                    items.push({span:spans[j],option:options[i]})

        return items
    }

// Store the original 'chosen' method
    var fn_chosen = $.fn.chosen

    $.fn.extend({
        // summery:
        //  Extend the original 'chosen' method to support images
        chosen: function(params) {

            params = params || {}

            // Original behavior - use function.apply to preserve context
            var ret = fn_chosen.apply(this, arguments)

            // Process all select elements to attach event handlers
            // (change, hiding_dropdown and showing_dropdown)

            this.each(function() {

                var $this = $(this), chosen = $this.data('chosen')

                $this.on("chosen:hiding_dropdown", function(e, chosen){
                    // summery
                    //  Triggers when hidding dropdown, explain why:TODO.
                    //
                    // evt: Event
                    //      The event object
                    // _chosen: Object {chosen:Chosen}
                    //      Contains the current instance of Chosen class

                    var options       = getSelectedOptions(chosen.chosen)
                    var rtl           = chosen.chosen.is_rtl
                    var multiple      = chosen.chosen.is_multiple
                    var html_template = params.html_template ||
                        (rtl && multiple ? '{text}' + fn_template : fn_template + '{text}')

                    for(var i = 0; i < options.length; i++){
                        prependTemplate(options[i].span, options[i].option, html_template, rtl, multiple)
                    }
                })

                $this.on("chosen:showing_dropdown", function showing_dropdown(evt, chosen){
                    // summery
                    //    This function is triggered when the chosen instance dropdown list
                    //    becomes visible. 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 chosen        = chosen.chosen
                    var options       = chosen.form_field.options || []
                    var rtl           = chosen.is_rtl
                    var html_template = params.html_template ||
                        (rtl ? '{text}'+fn_template : fn_template+'{text}')

                    var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')

                    for(var i = 0; i < lis.length; i++){
                        var li      = lis[i]
                        var option  = $(options[i])
                        var idx     = $(li).attr('data-option-array-index')

                        /* correct option index */

                        if (idx){
                            option = options[chosen.results_data[idx].options_index]
                            prependTemplate(li, option, html_template, rtl, true, 'chose-image-list')
                        }

                    }
                })

                $this.on("chosen:ready", function change(e, chosen){
                    // summery:
                    //  Trigger hide dropdown when ready.
                    //  TODO: remove as it is never triggered!
                    $this.trigger('chosen:hiding_dropdown',chosen)
                })

                $this.on("chosen:updated", function change(e){
                    // summery
                    //  Update after `chosen:updated` event is triggered
                    $this.trigger('chosen:hiding_dropdown',{chosen:chosen})
                })

                $this.on('chosen:filter', function(evt, chosen){
                    // summery
                    //  Support search, pending: https://github.com/harvesthq/chosen/pull/2373
                    $this.trigger('chosen:showing_dropdown',{chosen:chosen.chosen})
                })

                // Finally, trigger hiding_dropdown on all select elements
                if(typeof chosen != 'undefined') {
                    $this.trigger('chosen:hiding_dropdown',{chosen:chosen})
                }
            })
            return $(this);
        }
    })


})(jQuery)