lpio/app/html/settings/lp-settings.html

The last dashboard app you'll ever need

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="lp-settings"></dom-module>
<script>
    (function () {
        var instances = [];
        var vars = Object.create(Polymer.Base);

        Polymer({
            is: 'lp-settings',
            properties: {
                value: {
                    type: String,
                    notify: true,
                    readonly: false,
                    observer: '_dataChanged'
                },
                key: String
            },
            created: function () {
                var self = this;
                var key = this.getAttribute('key');
                if (!key){
                    throw('lp-settings element requires key');
                }

                instances.push({key:key, instance:this});
            },

            detached: function () {
                var key = this.getAttribute('key');
                var i = instances.indexOf({key:key, instance:this});
                if (i >= 0) {
                    instances.splice(i, 1);
                }
            },

            _dataChanged: function (newvalue, oldvalue) {
                var key = this.getAttribute('key');
                if (!key){
                    throw('_dataChanged: lp-settings element requires key');
                }
                vars.set(key, newvalue);

                // notify the instances with the correct key
                for (var i = 0; i < instances.length; i++)
                {
                    if(instances[i].key == key)
                    {
                        instances[i].instance.notifyPath('value', newvalue);
                    }
                }
            }
        });
    })();
</script>