value-transform.html

<!--
See https://github.com/Polymer/polymer/issues/3563

This is designed for use within a dom-bind or other element. It allows two-way computed
binding via a pair of functions that encode and decode.  It is helpful when you have
two elements that need to be bound together but they don't agree on a data format.

<paper-slider min="0" max="10" step="1" value="{{something_ugly}}"></paper-slider>
<value-transform  raw_value="{{something_ugly}}" value="{{something_beautiful}}"
    encode="_to_beautiful" decode="_to_ugly"></value-transform>
The current value is: [[something_beautiful]].

...

<script>

my_element._to_beautiful = function(the_int){
    return the_int > 0 ? the_int : "off";
}

my_element._to_ugly = function(the_str){
    return parseInt(the_str) || 0; // "off" is mapped to 0
}

</script>

Note that if the forward and reverse transformations do not match up then the
values will end up in an inconsistent state (recursion is prevent at the very
first level, so there is no oppurtunity for values to oscillate back and forth
before agreeing).
-->


<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="value-transform">
<template></template>
<script>
    "use strict";
    Polymer({
        is:'value-transform',
        properties: {
            value_a: {
                notify: true
            },
            value_b: {
                notify: true
            },
            a_to_b: {
                type: String
            },
            b_to_a: {
                type: String
            }
        }, observers: [
            '_value_a_changed(value_a.*)',
            '_value_b_changed(value_b.*)'
        ], attached: function(){
            let host = this.domHost || this.dataHost; // TODO: is that right?
            this._a_to_b_func = host ? host[this.a_to_b] : null;
            this._b_to_a_func = host ? host[this.b_to_a] : null;
            this._is_attached = true;
        }, _value_a_changed: function(e){
            if(this._changing || !this._is_attached){
                return;
            }
            this._changing = true;            
            if(this._a_to_b_func){
                this.set('value_b', this._a_to_b_func(this.value_a));
            } else {
                let sub_path =  e.path.slice("value_a".length);
                if(sub_path && !this.value_b){
                    this.set('value_b', this.value_a);
                } else {
                    this.set('value_b' + sub_path, e.value);
                }
            }
            this._changing = false;
        }, _value_b_changed: function(e){
            if(this._changing || !this._is_attached){
                return;
            }
            this._changing = true;
            if(this._b_to_a_func){
                this.set('value_a', this._b_to_a_func(this.value_b));
            } else {
                let sub_path =  e.path.slice("value_b".length);
                if(sub_path && !this.value_a){
                    this.set('value_a', this.value_b);
                } else {
                    this.set('value_a' + sub_path, e.value);
                }
            }
            this._changing = false;
        }
    });
</script>
</dom-module>