Selectik

main.js

(function(){

    var eventMatchers = {
        'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
        'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
    }
    var defaultOptions = {
        pointerX: 0,
        pointerY: 0,
        button: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false,
        bubbles: true,
        cancelable: true
    }

    Event.simulate = function(element, eventName) {
        var options = Object.extend(defaultOptions, arguments[2] || { });
        var oEvent, eventType = null;

        element = $(element);

        for (var name in eventMatchers) {
            if (eventMatchers[name].test(eventName)) { eventType = name; break; }
        }

        if (!eventType)
            throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

        if (document.createEvent) {
            oEvent = document.createEvent(eventType);
            if (eventType == 'HTMLEvents') {
                oEvent.initEvent(eventName, options.bubbles, options.cancelable);
            }
            else {
                oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
                    options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
                    options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
            }
            element.dispatchEvent(oEvent);
        }
        else {
            options.clientX = options.pointerX;
            options.clientY = options.pointerY;
            oEvent = Object.extend(document.createEventObject(), options);
            element.fireEvent('on' + eventName, oEvent);
        }
        return element;
    }

    Element.addMethods({ simulate: Event.simulate });
})();

// No conflict mode
jQuery.noConflict();

var APP;
APP = {};

APP.Form = (function(app, $){
    return {
        init: function(){
            this.initChackAndRadio();
            this.initSelect();
        },
        selectBaseOptons: {
            maxItems: 5,
            customScroll: 1,
            speedAnimation: 100,
            smartPosition: false
        },
        selectCustomMethods: {
            hideCSContainer: function(){
                this.$container.hide();
            },
            showCSContainer: function(){
                this.$container.show();
            }
        },
        initSelect: function(){
            var t = this;
            var select = $("select");

            select.each(function(){
                // select
                var sel = $(this);

                // extend options
                if(sel.attr('multiple')){
                    // init multiple select
                    //sel.multipleSelect(t.selectMultipleOpt);
                } else {

                    // init custom select
                    sel.selectik( t.selectBaseOptons, t.selectCustomMethods );

                    // trigger events
                    sel.on({
                        'showCS': function() {
                            console.log('show');
                        },
                        'hideCS': function() {
                            console.log('hide');
                        },
                        'changeCS': function() {
                            console.log('changed');
                        }
                    });
                }

            });
        },
        initChackAndRadio: function(){
            $('input').iCheck({
                checkboxClass: 'icheckbox_square',
                radioClass: 'iradio_square'
            });
            $('input').on({
                'ifChecked': function(){
                    this.simulate('click');
                },
                'ifUnchecked': function(){
                    this.simulate('click');
                }
            });
        },
        /**
         * Country State View
         * @param countryId - country select
         * @param regionSelectId - region select
         * @param regionInputId - region input
         */
        countryStateView: function(countryId, regionSelectId, regionInputId){

            var billingCountry     = $(countryId),
                billingStateSelect = $(regionSelectId),
                billingStateInput  = $(regionInputId);

            // private methods
            function checkState(num){
                // check option length
                if(num <= 1){
                    billingStateSelect.data('selectik').hideCSContainer();
                    billingStateSelect.data('selectik').refreshCS();
                    billingStateInput.show();
                } else {
                    billingStateSelect.data('selectik').refreshCS();
                    billingStateSelect.data('selectik').showCSContainer();
                }
            }

            // custom events
            billingCountry.on({
                'changeCS': function(){
                    var billingStateSelectOptLen = billingStateSelect.children().length;
                    checkState(billingStateSelectOptLen);
                }
            });
        }
    }
})(APP || {}, jQuery);



/**
 * Module: Checkout
 */
APP.Checkout = (function(app, $){
    return {
        init: function(){
            app.Form.countryStateView('#billing\\:country_id', '#billing\\:region_id', '#billing\\:region');
            app.Form.countryStateView('#shipping\\:country_id', '#shipping\\:region_id', '#shipping\\:region');
        },
        enabledPaymentInfoSelect: function(){
            var select = jQuery('#checkout-step-payment select');
            select.each(function(){
                var sel = $(this);
                if(sel.data('selectik')){
                    sel.data('selectik').enableCS();
                }
            });
        }
    }
})(APP || {}, jQuery);



/**
 * Module: Account
 */
APP.Account = (function(app, $){
    return {
        init: function(){
            app.Form.countryStateView('select#country', 'select#region_id', 'input#region');
        }
    }
})(APP || {}, jQuery);

/**
 * Module: PDP
 */
APP.Product = (function(app, $){
    return {
        init: function(){
            $('select.super-attribute-select').on({
                'hideCS': function(){
                    this.simulate('change');
                    $(this).data('selectik').refreshCS();
                }
            });
        }
    }
})(APP || {}, jQuery);

// use $ in local space
(function($){
	// DOM ready
	$(function(){

        APP.Form.init();

        APP.Checkout.init();

        APP.Account.init();

        APP.Product.init();

    });
})(jQuery);