Synchronize interdependent Dojo widgets/values

http://stackoverflow.com/questions/10709426/synchronize-interdependent-dojo-widgets-values

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<!-- slider + spinner 1 -->
<div style="width: 400px;">
    <div
        id="slider1"
        style="width: 200px; float: left;"            
        data-dojo-type="dijit.form.HorizontalSlider"
        data-dojo-props="
            name: 'slider1',
            minimum: 0,
            maximum: 100,
            discreteValues: 101,
            pageIncrement: 10,        
            value: 10,
            intermediateChanges: true,
            slideDuration: 500
            "
    >
        <div 
            data-dojo-type="dijit.form.HorizontalRule"
            data-dojo-props="
                container:'bottomDecoration',
                count:5,
                style:{height:'5px'}
                "
        ></div>
        <ol 
            data-dojo-type="dijit.form.HorizontalRuleLabels"
            data-dojo-props="
                container: 'bottomDecoration',
                style: { height: '1em', fontSize: '75%'}  
            "
        >
            <li>lowest</li>
            <li>normal</li>
            <li>highest</li>
        </ol>       
    </div>
    
    <div
        id="spinner1"     
        style="width: 60px; margin-left: 20px;"    
        data-dojo-type="dijit.form.NumberSpinner"   
        data-dojo-props="
            name: 'spinner1',
            smallDelta: 1,
            largeDelta: 10,
            constrains: {min: 0, max: 100, places: 0},
            value: 10,
            intermediateChanges: true
        "    
    ></div>
</div>


<!-- slider + spinner 2 -->
<div style="width: 300px; margin-top: 50px;">
    <div
        id="slider2"
        style="width: 200px; float: left;"            
        data-dojo-type="dijit.form.HorizontalSlider"
        data-dojo-props="
            name: 'slider2',
            minimum: 0,
            maximum: 100,
            discreteValues: 101,
            pageIncrement: 10,        
           ...

CSS

body {
    padding: 40px;
}

JavaScript

require([
    "dojo/ready",
    "dojo/_base/array",
    "dojo/topic",
    "dijit/registry",
    
    "dijit/form/NumberSpinner",
    "dijit/form/HorizontalSlider",
    "dijit/form/HorizontalRule",
    "dijit/form/HorizontalRuleLabels"
    
], function(
    ready,
    array,
    topic,
    registry
) {
    
    ready(function() {
    
        var slider1 = registry.byId("slider1");
        var slider2 = registry.byId("slider2");
        var spinner1 = registry.byId("spinner1");
        var spinner2 = registry.byId("spinner2");
        var spinner3 = registry.byId("spinner3");
        
        // create sets of widgets to be synchronized
        var set1 = [slider1, spinner1];
        var set2 = [slider2, spinner2, spinner3];
        
        var synchronize = function(/*Array*/ widgets, /*String*/ topicName) {
            
            var synchronized = function() {
                var count = 0;
                array.forEach(widgets, function(widget) {
                    if(widget.get("synchronized") === true) { count++}                       
                });
                return (count == widgets.length);
            }
            
            array.forEach(widgets, function(w) {
                
                w.set("synchronized", false);
                
                w.on("change", function(value) {
                    array.forEach(widgets, function(widget) {
                        if(this !== widget) {
                            widget.set("value", value);
                            widget.set("synchronized", true);
                        }                                         
                    }, this);
                    
                    if(synchronized()) {
                        array.forEach(widgets, function(widget) {
                            widget.set("synchronized", false);                            
                        });
                        if(topicName) { topic.publish(topicName, value)};  
               ...