mostly-filter.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="behaviors/mostly-filters-behavior.html">
<script>
  /**
   * Stamps the template if and only if all of its conditions are met.
   *
   * Evaluation context includes `document` and `user` which need to be set if used.
   *
   * Example:
   *
   *     <mostly-filter document="[[document]]" type="Picture"
   *                   user="[[user]]" group="Administrator">
   *       <template>
   *         ...
   *       </template>
   *     </mostly-filter>
   *
   * @demo demo/mostly-filter/index.html
   */
  Polymer({
    is: 'mostly-filter',

    properties: {

      /**
       * The context document
       */
      document: {
        type: Object,
        value: {}
      },

      /**
       * The context user
       */
      user: {
        type: Object,
        value: {}
      },

      /**
       * Document has one of these types
       */
      type: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document'],  // the context made available to the filter function
          fn: 'hasType',      // the filter function name
          multiple: true      // flag to indicate if the property takes csv values
        }
      },

      /**
       * Document has one of these facets
       */
      facet: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document'],
          fn: 'hasFacet',
          multiple: true
        }
      },

      /**
       * Document state
       */
      state: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document'],
          fn: 'hasState',
          multiple: true
        }
      },

      /**
       * Document path starts with
       */
      path: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document'],
          fn: 'pathStartsWith'
        }
      },

      /**
       * User has one of these permissions in the document
       */
      permission: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document'],
          fn: 'hasPermission',
          multiple: true
        }
      },

      /**
       * Javascript expression to evaluate
       */
      expression: {
        type: String,
        value: '',
        _filter: {
          ctx: ['document', 'user'],
          fn: '_evaluate'
        }
      },

      /**
       * User is member of one of these groups
       */
      group: {
        type: String,
        value: '',
        _filter: {
          ctx: ['user'],
          fn: 'isMember',
          multiple: true
        }
      }

    },

    behaviors: [
      Polymer.Templatizer, Mostly.FiltersBehavior
    ],

    observers: [
      '_update(document, user, facet, type, state, path, permission, expression, group)'
    ],

    _evaluate: function(document, user, expression) {
      try {
        var fn = new Function(['document', 'user'], 'return ' + expression + ';');
        return fn.apply(this, [document, user]);
      } catch (err) {
        return false;
      }
    },

    // Evaluate the filter
    check: function() {
      for (var k in this.properties) {
        var v = this[k],
            filter = this.properties[k]._filter;
        if (v && filter) {
          var args = filter.ctx.map(arg => {
            return this[arg];
          });
          // if filter supports multiple values apply the function to each one
          var values = filter.multiple? v.trim().split(/\s*,\s*/) : [v];
          var fn = this[filter.fn];

          // pass if any check returns true, basically Array.some()
          var pass = false;
          for (var i = 0; i < values.length; i++) {
            if ((pass = fn.apply(this, args.concat(values[i])))) {
              break;
            }
          }

          // if any of the filters fail the check fails
          if (!pass) {
            return false;
          }
        }
      }
      return true;
    },

    _update: function() {
      this.__renderDebouncer = Polymer.Debouncer.debounce(
        this.__renderDebouncer,
        Polymer.Async.microTask,
        () => {
          this.check()? this._render() : this._clear();
        });
      // enqueuing is needed for testing, as it allows content to be stamped on flush
      Polymer.enqueueDebouncer(this.__renderDebouncer);
    },

    _render: function() {
      if (this._instance) {
        return;
      }
      var parentNode = Polymer.dom(this).parentNode;
      if (parentNode) {
        var template = Polymer.dom(this).querySelector('template');
        var parent = Polymer.dom(parentNode);
        if (template) {
          delete template.__templatizeOwner;
          this.templatize(template);
          this._instance = this.stamp();
          for (var prop in this.properties) {
            this._instance._setPendingProperty(prop, this[prop]);
          }
          this._instance._flushProperties();
          var root = this._instance.root;
          parent.insertBefore(root, this);
        }
      }
    },

    attached: function() {
      this._update();
    },

    detached: function() {
      this._clear();
    },

    _clear: function() {
      if (this._instance) {
        var c$ = this._instance.children;
        if (c$ && c$.length) {
          // use first child parent, for case when dom-if may have been detached
          var parent = Polymer.dom(Polymer.dom(c$[0]).parentNode);
          for (var i=0, n; (i<c$.length) && (n=c$[i]); i++) {
            parent.removeChild(n);
          }
        }
        this._instance = null;
      }
    },

    _forwardHostPropV2: function(prop, value) {
      if (this._instance) {
        this._instance.forwardHostProp(prop, value);
      }
    }
  });
</script>