ractive-decorators-bootstrap-select.js

/*

	ractive-decorators-bootstrap-select
	=============================================

	Integrate Ractive with Bootstrap Select

	==========================

	Usage: Include this file on your page below Ractive, e.g:

	    <script src='lib/ractive.js'></script>
	    <script src='lib/ractive-decorators-bootstrap-select.js'></script>

	If you're using a module loader, it will be available soon so
	you can require it:

	    // requiring the plugin will 'activate' it - no need to use
	    // the return value
	    require( 'ractive-decorators-bootstrap-select' );

*/

(function ( global, factory ) {

	'use strict';

	// Common JS (i.e. browserify) environment
	if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) {
		factory( require( 'ractive' ), require( 'jquery' ) );
	}

	// AMD?
	else if ( typeof define === 'function' && define.amd ) {
		define([ 'ractive', 'jquery' ], factory );
	}

	// browser global
	else if ( global.Ractive && global.jQuery) {
		factory( global.Ractive, global.jQuery );
	}

	else {
		throw new Error( 'Could not find Ractive or jQuery! They must be loaded before the ractive-decorators-bootstrap-select plugin' );
	}

}( typeof window !== 'undefined' ? window : this, function ( Ractive, $ ) {

	'use strict';

    var bootstrapSelectDecorator;

    bootstrapSelectDecorator = function (node, type) {

        var nodeInfo = Ractive.getNodeInfo(node);
        var setting  = false;
        var observer;

        var options = {};
        if (type) {
            if (!bootstrapSelectDecorator.type.hasOwnProperty(type)) {
                throw new Error( 'Ractive Bootstrap Select type "' + type + '" is not defined!' );
            }

            options = bootstrapSelectDecorator.type[type];
            if (typeof options === 'function') {
                options = options.call(this, node);
            }
        }

        // Push changes from ractive to bootstrap select
        observer = nodeInfo.ractive.observe(nodeInfo.keypath, function (newvalue) {
            if (!setting) {
                setting = true;
                window.setTimeout(function () {
                    if (newvalue === "")
                        $(node).selectpicker("val", "");
                    
                    $(node).selectpicker('refresh');
                    setting = false;
                }, 0);
            }
        });

        // Pull changes from selectpicker to ractive
        $(node).selectpicker(options).on('change', function () {
            if (!setting) {
                setting = true;
                nodeInfo.ractive.updateModel();
                setting = false;
            }
        });

        return {
            teardown: function () {
                $(node).selectpicker('destroy');

                if (observer) {
                    observer.cancel();
                }
            }
        };
    };

    bootstrapSelectDecorator.type = {};

    Ractive.decorators.bootstrapSelect = bootstrapSelectDecorator;

}));