Source: widget/FloodLvlWidget.js

/**
 * Module that adds the Flood Level Slider to the map.
 * @module app/widget/FloodLvlWidget
 * @author David Kristiansen <david.kristiansen@nscc.ca>
 * @copyright Nova Scotia Community College 2017
 */
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/dom",
    "dojo/topic",
    "dojo/dom-style",

    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/registry",
    "dijit/form/FilteringSelect",
    "dijit/form/Button",
    "dijit/form/VerticalSlider",
    "dijit/form/VerticalRule",
    "dijit/form/VerticalRuleLabels"
     ],
    function (
        declare,
        lang,
        on,
        dom,
        topic,
        domStyle,

        _WidgetBase,
        _OnDijitClickMixin,
        registry,
        FilteringSelect,
        Button,
        VerticalSlider,
        VerticalRule,
        VerticalRuleLabels
    ) {
        return declare([_WidgetBase, _OnDijitClickMixin], {
            baseClass: "floodLvlWidget",
            /** @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;
            },
            postCreate: function () {
                //                 console.log("FloodLvlWidget::postCreate");
            },
            /**
             * Starts the widget after it has been constructed.
             * @public
             *
             **/
            startup: function () {
                //                 console.log("FloodLvlWidget::startup");
                this._init();
            },
            /**
             * Destroys widget
             * @public
             *
             **/
            destroy: function () {
                //                 console.log("FloodLvlWidget::destroy");
                this.inherited(arguments);
            },
            /**
             * Constructs the water level slider and listens for change events.
             * @private
             *
             **/
            _init: function () {
                //                 console.log("FloodLvlWidget::init");
                var minTide = 0; //minimum tide level in cm
                var maxTide = 1200; //maximum tide level in cm
                var step = 10; //step in cm
                var pageStep = 10; //step in meters when using page up/down
                var discreteLevel = ((minTide + maxTide) / 10) + 1; //number of stops on the slider
                var ruleTicks = discreteLevel - 1; //slider rule tick marks

                var sliderRules = new VerticalRule({
                    count: ruleTicks,
                    style: "width:1em;font-size:75%;color:lightgray;"
                }, "rulesNode").startup();

                var sliderLabels = new VerticalRuleLabels({
                    labels: ["0 m", "1 m", "2 m", "3 m", "4 m", "5 m", "6 m", "7 m", "8 m", "9 m", "10 m", "11 m", "12 m"],
                    //                     container: "leftDecoration",
                    style: "width:2.5em;font-size:75%;"
                }, "labelsNode");

                var slider = new VerticalSlider({
                    name: "vertical",
                    value: minTide,
                    minimum: minTide,
                    maximum: maxTide,
                    showButtons: false,
                    intermediateChanges: true,
                    discreteValues: discreteLevel,
                    pageIncrement: pageStep,
                    style: "height:500px;",
                    onChange: function (value) {
                        topic.publish("floodUpdate/slider", value, this.id);
                        var val = value / 100;
                        dom.byId("fldLevel").innerHTML = val + " m";

                    }
                }, "twlSlider").startup();

                topic.subscribe("FldVal/Up", function () {
                    var val = registry.byId("twlSlider").get('value');
                    if (val < 1200) {
                        registry.byId("twlSlider").set('value', parseInt(val) + 10);
                    }
                });
                topic.subscribe("FldVal/Down", function () {
                    var val = registry.byId("twlSlider").get('value');
                    if (val > 0) {
                        registry.byId("twlSlider").set('value', parseInt(val) - 10);
                    }
                });
            }
        });
    });