res/imp/url-params-sk.html

<!--
  The common.js file must be included before this file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <url-param-sk>

  This element uses two-way* data binding to synchronize a URL parameter with
  a variable. On page load, if the parameter is provided in the URL, its value
  is assigned to the variable. When the variable changes, its new value is
  updated in the URL.

  * It's not exactly two-way, because the URL is not watched for changes. This
    is fine in most cases, since the page reloads when the URL is changed by the
    user, and it should be rare that the parameter is changed by a different
    piece of code.

  To use this file import it:

    <link href="/res/common/imp/url-param-sk.html" rel="import" />

  Usage:

    <template>
      <url-param-sk name="myParam" value="{{myValues}}" valid="{{validValues}}" multi></url-param-sk>
      ...
      <template repeat="{{val in myValues}}">
        <li>{{val}}</li>
      </template>
    </template>
    <script>
    Polymer({
      ...
      created: function() {
        ...
        validValues = ["a", "b", "c"];
        myValues = ["a"]; // Default; overwritten by URL params if provided.
        ...
      },
      ...
    });
    </script>

  Attributes:
    name: (string) The name of the URL parameter.
    value: (string) The initial value of the parameter.
    multi: (bool) Whether the variable can take multiple values. Default is
        false.  If true, 'value' must be an array of strings.
    valid: (array of strings) Acceptable values. Default is null. If empty or
        null, any value is accepted. If an invalid value is provided in the
        URL parameters, the existing or default value is used.

  Events:
    None

  Methods:
    None
-->
<link rel="import" href="/res/imp/bower_components/paper-toast/paper-toast.html">
<dom-module id="url-param-sk">
  <template>
    <paper-toast id="toast"></paper-toast>
  </template>
  <script>
    Polymer({
      is: 'url-param-sk',
      properties: {
        multi: {
          type: Boolean,
          value: false,
        },
        name: {
          type: String,
        },
        valid: {
          type: Array,
          value: null,
        },
        default: {
          type: String,
        },
        value: {
          type: String,
          value: '',
          notify: true,
          observer: 'valueChanged',
        },
        _loaded: {
          type: Boolean,
          value: false,
        }
      },
      // Listens to array changes for multi urls
      observers: ["valueChanged(value.splices)"],

      ready: function () {
        this._loaded = true;
        if (this.default=="[]") {
          this.default=[];
        }
        // Read the URL parameters. If our variable is set, save its value.
        // Otherwise, place our value in the URL.
        var val = this.getURL();
        if (val && this.isValid(val)) {
          this.set('value', val);
        } else if (this.default && this.isValid(this.default)) {
          this.set('value', this.default);
        }
        else {
          this.putURL();
        }
      },
      // Retrieve the value for our variable from the URL.
      getURL: function () {
        var vals = sk.query.toParamSet(window.location.search.substring(1))[this.name];
        if (!vals) {
          return null;
        }
        if (this.multi) {
          return vals;
        }
        if (vals.length > 1) {
          this.error('Multiple values provided for ' + this.name + ' but only one accepted: ' + vals);
          return null;
        }
        return vals[0];
      },
      // Store the value for our variable in the URL.
      putURL: function () {
        var params = sk.query.toParamSet(window.location.search.substring(1));
        delete params[this.name];
        if (!this.value || Array.isArray(this.value) && this.value.length == 0) {
        } else
          // Don't insert undefined/empty values.
          {
            if (this.multi) {
              params[this.name] = this.value;
            } else {
              params[this.name] = [this.value];
            }
          }
        var newUrl = window.location.href.split('?')[0] + '?' + sk.query.fromParamSet(params);
        window.history.replaceState('', '', newUrl);
      },
      // Check to see whether the given value is valid.
      isValid: function (val) {
        var that = this;
        var checkValid = function (val) {
          if (that.valid) {
            for (var i = 0; i < that.valid.length; i++) {
              if (val == that.valid[i]) {
                return true;
              }
            }
            that.error('Invalid value for ' + that.name + ': "' + val + '". Must be one of: ' + that.valid);
            return false;
          }
          return true;
        };
        if (this.multi) {
          // Verify that it's an array and that all elements are valid.
          if (!Array.isArray(val)) {
            this.error('url-param-sk: Value is not an array: ' + val);
            return false;
          }
          for (var i = 0; i < val.length; i++) {
            if (!checkValid(val[i])) {
              return false;
            }
          }
        } else {
          if (Array.isArray(val)) {
            this.error('Multiple values provided for ' + this.name + ' but only one accepted: ' + val);
          }
          return checkValid(val);
        }
        return true;
      },
      valueChanged: function () {
        if (this._loaded) {
          // Save our value to the URL.
          this.putURL();
        }
      },
      error: function (msg) {
        console.log('[ERROR] '+msg);
        this.set('$.toast.text', msg);
        this.$.toast.show();
      }
    });
  </script>
</dom-module>