gistfile1.js

(function ($) {
    "use strict";

    $( document ).ready(function() {
        $('.jsSaveProjectDraft').on('click',function (event) {
            event.preventDefault();
            $('.jsProjectDraftForm').trigger('updateProject');
        });

        // Init the jquery plugin on the form
        var projectForm = $('.jsProjectDraftForm');
        projectForm.draftable({'url' : '/api/projects/'+ projectForm.find('input[name="projectId"]').val() +'/update'});

        // Autosave every 60 secs
        window.setInterval(function() {
            $('.jsProjectDraftForm').trigger('updateProject');
        }, 60000);
    });

    /**
     * Responsible for
     *  handling the displaying of success/error messages
     *  making the API call
     * @param options
     * @returns {$.fn}
     */
    $.fn.draftable = function (options) {
        var opts = $.extend({
            url : '/api/projects/0/update',
            output : '.notifications'
        }, options);
        this.each(function () {
            var el = $(this);
            el.on('updateProject', function(e) {
                // Call the API
                el.callApi(opts.url, el.serialize());
            });
            el.on('success', function(e, data) {
                var date = new Date;
                $(opts.output).show().text(projectWasSavedAt + date.toLocaleString()).fadeIn().delayedFadeOut();
            });
            el.on('failure', function(e, data) {
                //console.log('not saved');
            });
        });
        return this;
    };

    /**
     * Make an ajax call to a specific API uri
     * @param uri
     * @param params
     * @returns {*}
     */
    $.fn.callApi = function( uri, params ){
        return $(this).each(function(index, element){
            $.ajax(uri, {
                type : 'post',
                dataType : 'json',
                data : params,
                success: function(data) {
                    if(data.error) {
                        $(element).trigger('failure', data);
                    } else {
                        $(element).trigger('success', data);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log('error...', xhr);
                    $(element).trigger('failure', ajaxOptions);
                }
            });
        });
    };

    /**
     * Register as jquery plugin
     */
    $.fn.delayedFadeOut = function (options) {
        var opts = $.extend({
            milliseconds : 2500
        }, options);
        this.each(function () {
            var el = $(this);
            setTimeout(function() {
                $(el).fadeOut();
            }, opts.milliseconds);
        });
        return this;
    };

})(jQuery);

;(function ( $, window, document, undefined ) {
    // Create the defaults once
    var pluginName = "MySelectize",
        defaults = {};

    // The actual plugin constructor
    function MySelectize ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.selectOptions = '';
        this.inputTags = '';
        this.control = '';
        this.init();
    }

    // Avoid Plugin.prototype conflicts
    $.extend(MySelectize.prototype, {
        init: function () {
            this.storeRefreshedSelectOptions();
            this.makeSelectize();
        },
        makeSelectize: function () {
            var self = this;
            this.inputTags = $(this.element).selectize({
                plugins: ['remove_button'],
                valueField: 'iId',
                labelField: 'sName',
                searchField: 'sName',
                delimiter: ',',
                hideSelected: true,
                persist: false,
                openOnFocus: false,
                create: $.proxy(this.selectizeCreate, this),
                load: $.proxy(this.selectizeLoad, this),
                onType: function() {
                    self.control.loadedSearches = {};
                },
                render: {
                    option_create: function(data, escape) {
                        return '<div class="create">' + addTag + ' <strong>"' + escape(data.input) + '"</strong>&hellip;</div>';
                    },
                    item: function(data, escape) {
                        var text = escape(data.sName.trim());
                        if(text.length > 40){
                            text = text.slice(0,40)+"...";
                        }
                        var itemTpl = "<div class='item' data-value='" + data.iId + "'>" + text + "<a href='javascript:void(0)' class='remove' tabindex='-1' title='Remove'>×</a></div>";
                        return itemTpl;
                    }
        },
                onItemAdd: function() {
                    this.close();
                }
            });
            this.control = this.inputTags[0].selectize;
        },
        selectizeCreate: function(input, callback) {
            this.addTag(input, callback);
        },
        selectizeLoad: function(query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: baseurl + this.settings.findUri + query,
                type: 'GET',
                dataType: 'json',
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res.data);
                }
            });
        },
        addTag: function(tagName, successCallback) {
            $.ajax({
                url: baseurl + this.settings.createUri + tagName,
                type: 'GET',
                dataType: 'json',
                error: function() {
                },
                success: $.proxy(this.addTagSuccess, this, successCallback)
            });
        },
        addTagSuccess: function(successCallback, res) {
            successCallback({
                iId: res.data.iId,
                sName: res.data.sName
            });
            this.control.close();
        },
        storeRefreshedSelectOptions: function () {
            this.storeSelectOptions(this.getRefreshedSelectOptions());
        },
        getRefreshedSelectOptions: function() {
            return $.map($(this.element).find('option'), function(option) {
                return parseInt(option.value, 10);
            });
        },
        storeSelectOptions: function(selectOptions) {
            this.selectOptions = selectOptions;
        }
    });

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[ pluginName ] = function ( options ) {
        this.each(function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new MySelectize( this, options ) );
            }
        });
        return this;
    };

})( jQuery, window, document );

;(function ( $, window, document, undefined ) {
    var pluginName = "SearchProducts",
        defaults = {
            'removeClass': '.removeclass'
        };

    function SearchProducts ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.productCategory = '';
        this.categorySelect = '';
        this.productSelectControl = '';
        this.categorySelectControl = '';
        this.init();
    }

    // Avoid SearchProducts.prototype conflicts
    $.extend(SearchProducts.prototype, {
        makeSelectized : function() {
            var self = this;

            this.categorySelect = $(this.settings.categorySelect).selectize({
                onChange: function(value) {
                    self.getProducts(value);
                }
            });

            this.categorySelect.parent().find('input').attr('disabled', true);

            this.productSelect = $(this.settings.productSelect).selectize({
                valueField: 'iId',
                labelField: 'sName',
                onChange: function(value) {
                    if (!value) {
                        return;
                    }
                    var id = value.split(':')[0];
                    var input = $('input[data-id='+id+']');
                    if (input.length === 0) {
                        $(self.settings.addProductButton).show();
                        $(self.settings.productAddedWrapper).hide();
                        $(self.settings.productExistsWrapper).hide();
                    } else {
                        $(self.settings.addProductButton).hide();
                        $(self.settings.productExistsWrapper).show();
                        $(self.settings.productAddedWrapper).hide();
                    }
                }
            });

            this.productSelect.parent().find('input').attr('disabled', true);

            this.productSelectControl = this.productSelect[0].selectize;
            this.categorySelectControl = this.categorySelect[0].selectize;
        },
        getProducts: function (value) {
            $.ajax({
                type: 'GET',
                dataType : 'json',
                url: baseurl + '/api/products/findByCategory/' + value ,
                success: $.proxy(this.addProducts, this),
                error:function (xhr, ajaxOptions, thrownError){
                    console.log('error...', xhr);
                }
            });
        },
        addProducts: function(res) {
            var self = this;
            self.productSelectControl.clearOptions();
            jQuery.each(res.data, function(i, val) {
                self.productSelectControl.addOption({
                    iId: val.iId + ':' + val.sNameLngFr,
                    sName: val.sNameLngFr
                });
            });
        },
        listenRemoveProduct: function () {
            $(this.settings.removeClass).on('click', function(e) {
                e.preventDefault();
                $(this).parent('div').remove();
            });
        },
        addSelectedProduct: function () {
            var id = this.settings.productSelect.val().split(':')[0];
            var name = this.settings.productSelect.val().split(':')[1];

            var template = '<div><p><input type="text" readonly="readonly" name="project_products['+id+']" data-id="'+id+'" value="'+name+'" ></p><a href="#" class="removeclass">×</a></div>';
            this.settings.addProductsWrapper.append(template);
            $(this.settings.addProductButton).hide();
            // Confirmation message
            $(this.settings.productAddedWrapper).fadeIn();
            // Reset the select
            this.productSelectControl.clear();
            // Listen for remove product event
            this.listenRemoveProduct();
        },
        init: function () {
            this.makeSelectized();
            this.getProducts($(this.settings.categorySelect).val());
            var self = this;
            $(this.settings.addProductButton).on('click', function(e) {
                e.preventDefault();
                self.addSelectedProduct();
            });
            this.listenRemoveProduct();
        }
    });

    $.fn[ pluginName ] = function ( options ) {
        this.each(function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new SearchProducts( this, options ) );
            }
        });

        // chain jQuery functions
        return this;
    };

})( jQuery, window, document );