Source: widget/LCAWidget.js

/**
 * Widget that provides filtering select for lidar coverage areas with
 * zoom button and shows flood level with plus and minus buttons
 * @module app/widget/LCASelect
 * @requires module:app/DataController
 * @author David Kristiansen <david.kristiansen@nscc.ca>
 * @copyright Nova Scotia Community College 2017
 */
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/topic",

    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",

    "dijit/registry",
    "dijit/form/FilteringSelect",
    "dijit/form/Button",

    "dstore/Memory",
    "dstore/legacy/DstoreAdapter",

    "dojo/_base/array",
    "dojo/dom",
    "dojo/dom-construct"
],
    function (
        declare,
        lang,
        on,
        topic,

        _WidgetBase,
        _OnDijitClickMixin,

        registry,
        FilteringSelect,
        Button,

        Memory,
        DstoreAdapter,

        arrayUtils,
        dom,
        domConstruct
    ) {

        return declare([_WidgetBase, _OnDijitClickMixin], {

            title: null,
            options: {
                dataStore: null,
                pane: null
            },
            /** @constructor
             * @param {object} args Object of properties to mixin
             * @param {object} srcRefNode Dom node for the widget to attach to
             **/
            constructor: function (param, srcRefNode) {
                /** mix in settings and defaults
                 * @mixin args
                 */
                declare.safeMixin(this.options, param);
                /** Dom widget node */
                this.domNode = srcRefNode;
                // properties
                this.title = this.options.title || "Lidar Coverage Area";
                this.set("dataStore", this.options.dataStore);
                this.set("pane", this.options.pane);
            },
            /**
             * Sets title and html content of the base class content pane.
             * Occurs after the constructor has run and dom elements have been created.
             *
             **/
            postCreate: function () {
                if (this.pane) {
                    this.pane.set("title", this.title);
                    this.pane.set("content", "<div id='waterLevel'><button id='btnMinus' type='button'></button><h1 id='fldLevel'>0 m</h1><button id='btnPlus' type='button'></button></div><label for='fsbLCA' class='ddLabel'>Lidar Coverage Area: </label><div id='lcaSelect'></div><button id='btnZoom' type='button'></button>");
                }
            },
            /**
             * Starts the widget after it has been constructed.
             * Checks to make sure the required data is loaded.
             * @public
             *
             **/
            startup: function () {
                /* Data not defined*/
                if (!this.dataStore) {
                    this.destroy();
                    console.warn("LCAWidget::data required");
                }
                /* When data is loaded*/
                if (this.dataStore) {
                    this._init();
                } else {
                    on(this.dataStore, "load", lang.hitch(this, function () {
                        this._init();
                    }));
                }
            },
            /**
             * Destroys widget
             * @public
             *
             **/
            destroy: function () {
                this.inherited(arguments);
            },
            /**
             * Creates the filtering select box, zoom buttons and flood level increment buttons
             * @private
             *
             **/
            _init: function () {
                var lcaDataStore = new DstoreAdapter(this.dataStore.lcaList);

                topic.publish("fsb/LCA", 6, lcaDataStore.get(6));

                //Filtering select box for study area
                var lcaSelect = new FilteringSelect({
                    id: "fsbLCA",
                    name: "lca",
                    value: "6",
                    store: lcaDataStore,
                    searchAttr: "name",
                    style: "width:205px; font-size:12px;",
                    invalidMessage: "Lidar coverage area not found.",
                    promptMessage: "Choose a lidar coverage area",
                    missingMessage: "Please choose a lidar coverage area",
                    fetchProperties: {
                        sort: [{
                            attribute: "name"
                                        }]
                    },
                    onChange: function (value) {
                        try {
                            var location = registry.byId('fsbLCA').get('item');
                            topic.publish("fsb/LCA", value, location);
                        } catch (err) {
                            console.error("Unable to get the lidar coverage area");
                        }
                    }
                }, "lcaSelect").startup();

                var zoomBtn = new Button({
                    label: "Zoom",
                    showLabel: false,
                    iconClass: "zoomIcon",
                    onClick: function () {
                        var location = registry.byId('fsbLCA').get('item');
                        topic.publish("fsb/Zoom", location.said);
                    }
                }, "btnZoom").startup();
                var plusBtn = new Button({
                    label: "+",
                    style: "margin-top:-20px;",
                    onClick: function () {
                        topic.publish("FldVal/Up");
                    }
                }, "btnPlus").startup();
                var minusBtn = new Button({
                    label: "-",
                    style: "margin-top:-20px;",
                    onClick: function () {
                        topic.publish("FldVal/Down");
                    }
                }, "btnMinus").startup();
                topic.publish("fsb/LCA/Loaded");
            },
            /**
             * NOT IMPLEMENTED
             * Set the current tide station externally to the widget using Dojo topic pub/sub events instead
             * @public
             **/
            setTideStation: function () {
                //                console.log("Setting tide station");
                try {
                    var location = registry.byId('fsbLCA').get('item');
                    topic.publish("fsb/LCA", location);
                } catch (err) {
                    console.error("Unable to get the lidar coverage area");
                }
            }
        });
    });