jdescopingtool/OLD/WebInterface/Scripts/widgets.js

(function ($) {
    //Create aliases
    var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget;

    //MVVM event names
    var DATABINDING = "dataBinding", DATABOUND = "dataBound", CHANGE = "change";

    /*
     * Global async template loader
     */
    var templateLoader = (function ($, host) {
        // Loads external templates from path and injects in to page DOM.
        return {
            /*
             * Loads external templates from path and injects in to page DOM
             */
            loadExtTemplate: function (path) {
                var tmplLoader = $.get(path)
                    .success(function (result) {
                        $("body").append(result);
                    })
                    .error(function (result) {
                        alert("Error Loading Widget Template");
                    })
                    .complete(function () {
                        // Publish an event that indicates when a template is done loading.
                        $(host).trigger("TEMPLATE_LOADED", [path]);
                    }
                );
            }
        };
    })(jQuery, document);

    /*
     * Data table widget with template upload/download and clear entries button
     */
    var TemplateTable = Widget.extend({

        /*
         * Widget initializer
         */
        init: function (element, options) {
            var that = this;

            //Call base initializer
            Widget.fn.init.call(that, element, options);

            //Configure template
            that.template = kendo.template(that.options.template);

            //Configure data source
            that._dataSource();
        },

        /*
         * Widget configuration values
         */
        options: {
            name: "TemplateTable",
            autoBind: false,
            template: "",
            widgetVisible: false,
            uploadURL: "",
            downloadURL: "",
            title: "",
            countText: ""
        },

        /*
         * DOM element updater
         */
        refresh: function () {
            var that = this,
                view = that.dataSource.view(),
                html = kendo.render(that.template, view);

            // Trigger the dataBinding event
            that.trigger(DATABINDING);

            // Update the DOM
            that.element.html(html);

            // Trigger the dataBound event
            that.trigger(DATABOUND);
        },

        /*
         * Sets up widget data source
         */
        _dataSource: function () {
            var that = this;

            // Sets the datasource to parameter datasource or creates one if using array or configuration object
            that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

            // Bind to the change event to refresh the widget
            that.dataSource.bind(CHANGE, function () {
                that.refresh();
            });

            // Fetch data if autobind is enabled
            if (that.options.autoBind) {
                that.dataSource.fetch();
            }
        },

        /*
         * Changes the datasource via MVVM
         */
        setDataSource: function (dataSource) {
            // Set the internal datasource equal to the one passed in by MVVM
            this.options.dataSource = dataSource;

            // Rebuild the datasource if necessary, or just reassign
            this._dataSource();
        },

        /*
         * MVVM event registration
         */
        events: [
            // dataBinding is called BEFORE updating DOM
            // (MVVM will traverse DOM, unbind any bound elements or widgets)
            DATABINDING,

            // dataBound is called AFTER updating DOM
            // (traverses DOM and binds ALL THE THINGS)
            DATABOUND
        ],

        /*
         * MVVM expects an array of dom elements that represent each item of the datasource (should be the outermost element's children)
         */
        items: function () {
            return this.element.children();
        },

        /*
         * Handles template download button click event
         */
        onTemplateDownloadClick: function() {
            console.log("onTemplateDownloadClick");
        },

        /*
         * Handles template upload button click event
         */
        onTemplateUploadClick: function() {
            console.log("onTemplateUploadClick");
        },

        /*
         * Handles clear button click event
         */
        onClearClick: function() {
            console.log("onClearClick");
        },

    });

    //Register the widget
    ui.plugin(TemplateTable);

})(jQuery);