mostly-slots.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="es6-polyfills.html">

<dom-module id="mostly-slot">
  <script>
    (function() {

      // global slot registry
      var REGISTRY = {};

      function _getRegistry(slot) {
        REGISTRY[slot] = REGISTRY[slot] || { nodes: [], slots: [] };
        return REGISTRY[slot];
      }

      function _same(n1, n2) {
        var k1 = n1.getAttribute('name'),
            k2 = n2.getAttribute('name');
        return k1 && k2 && (k1 === k2);
      }

      function _registerContent(node, slot) {
        var registry = _getRegistry(slot);
        // if content with same name exists check if we should override it
        var idx = registry.nodes.findIndex(n => _same(node, n));
        if (idx !== -1) {
          // if new content has same or higher priority then do the override
          if (node.priority >= registry.nodes[idx].priority) {
            // if content has a template replace existing one
            if (node.template) {
              registry.nodes[idx] = node;
            } else { // merge
              registry.nodes[idx]._merge(node);
            }
          }
        } else {
          registry.nodes.push(node);
        }
        registry.nodes.sort((a, b) => { return a.order - b.order; });
        registry.slots.forEach(s => s._updateContent());
      }

      function _unregisterContent(node, slot) {
        var registry = _getRegistry(slot);
        var idx = registry.nodes.findIndex(n => _same(node, n));
        if (idx !== -1) {
          registry.nodes.splice(idx, 1);
          registry.slots.forEach(s => s._updateContent());
        }
      }

      // shared model
      var sharedModel = {};
      window.Mostly = window.Mostly || {};
      window.Mostly.slots = window.Mostly.slots || {};
      window.Mostly.slots.setSharedModel = function(model) {
        sharedModel = model;
        Object.keys(REGISTRY).forEach(k => {
          return REGISTRY[k] && REGISTRY[k].slots && REGISTRY[k].slots.forEach(slot => {
            slot._updateSharedModel();
          });
        });
      };

      /**
       * Custom element to help build pluggable applications.
       * Slots allow dynamic registration of content which will be stamped in the slot's parent.
       *
       * Example:
       *
       *     <mostly-slot name="MY_SLOT">
       *       <!-- <mostly-slot-content slot="MY_SLOT"> will appear here -->
       *     </mostly-slot>
       *
       * @demo demo/mostly-slots/index.html
       **/
      Polymer({
        is: 'mostly-slot',
        //behaviors: [Polymer.Templatizer],
        properties: {

          /**
           * A unique name for this slot.
           */
          slot: {
            type: String,
            observer: '_register'
          },

          /**
           * An object containing key/values to serve as properties in stamped slot content.
           */
          model: {
            type: Object,
            value: function() { return {}; }
          },

          /**
           * Returns true if this slot is empty.
           */
          empty: {
            type: Boolean,
            value: false,
            notify: true
          }
        },

        observers: [
          '_updateModel(model.*)'
        ],

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

        detached: function() {
          this._unregister(this.slot);
        },

        _register: function(newSlot, oldSlot) {
          if (oldSlot) {
            this._unregister(oldSlot);
          }
          _getRegistry(newSlot).slots.push(this);
        },

        _unregister: function(slot) {
          var idx = _getRegistry(slot).slots.indexOf(this);
          _getRegistry(slot).slots.splice(idx, 1);
        },

        _clearContent: function() {
          if (!this._instances) {
            return;
          }
          this._instances.forEach(instance => {
            var c$ = instance.children;
            if (c$ && c$.length) {
              // use first child parent, for case when dom-if may have been detached
              var p = Polymer.dom(Polymer.dom(c$[0]).parentNode);
              for (var i = 0, n; (i < c$.length) && (n = c$[i]); i++) {
                p.removeChild(n);
              }
            }
          });
        },

        _render: function() {
          // render
          var parent = Polymer.dom(Polymer.dom(this).parentNode);
          // keep track of stamped instances
          this._instances = [];
          _getRegistry(this.slot).nodes.forEach(node => {
            var template = node.template;
            if (!node.disabled && template) {
              delete template.__templatizeOwner;
              var ctor = Polymer.Templatize.templatize(template, this);
              // setting the model in the constructor seems to require instanceProps to be properly set
              // so we're doing it ourselves after
              var el =  new ctor({});
              // set slot shared model on render
              for (var shared in sharedModel) {
                el._setPendingProperty(shared, sharedModel[shared]);
              }
              for (var prop in this.model) {
                el._setPendingProperty(prop, this.model[prop]);
              }
              el._flushProperties();
              this._instances.push(el);
              parent.insertBefore(el.root, this);
            }
          });
          this.set('empty', this._instances.length === 0);
        },

        _updateContent: function() {
          this._clearContent();
          this._render();
          /* TODO debounce nuxeo-slot content update, some page load too slow?
          this.__renderDebouncer = Polymer.Debouncer.debounce(
            this.__renderDebouncer,
            Polymer.Async.microTask, //Polymer.Async.timeOut.after(2000),
            () => {
              this._clearContent();
              this._render();
            });
          // enqueuing is needed for testing, as it allows content to be stamped on flush
          Polymer.enqueueDebouncer(this.__renderDebouncer);
          */
        },

        // Forward model changes as properties
        _updateModel: function(change) {
          if (change.path === 'model') {
            Object.keys(change.value).forEach(prop => {
              this._forwardHostProp(prop, change.value[prop]);
            });
          } else {
            this._forwardHostProp(change.path.slice('model.'.length + 1), change.value);
          }
        },

        _updateSharedModel: function() {
          Object.keys(sharedModel).forEach(prop => {
            this._forwardHostProp(prop, sharedModel[prop]);
          });
        },

        // Implements extension point from Templatizer mixin
        // Called as side-effect of a host property change, responsible for
        // notifying parent.<prop> path change on instance
        _forwardHostProp: function(prop, value) {
          if (!this._instances) {
            return;
          }
          this._instances.forEach(instance => {
            instance.set(prop, value);
          });
        }
      });

      /**
       * Registers the given template as content in a `mostly-slot`.
       * Each content should have a unique `name` that can later be used to override properties
       * (ex: disabling previously contributed content)
       *
       * Example:
       *     <mostly-slot-content slot="MY_SLOT">
       *       <template>
       *         This content will go into MY_SLOT
       *       </template>
       *     </mostly-slot-content>
       *
       * @demo demo/mostly-slots/index.html
       **/
      Polymer({
        is: 'mostly-slot-content',

        properties: {
          /**
           * The name of the slot where this content is to be displayed.
           * Multiple slot names can be set as comma separated values, ex: SLOT1, SLOT2
           */
          slot: {
            type: String,
            value: '',
            observer: '_slotChanged'
          },

          /**
           * Allows dynamic attach/detach of slot content.
           */
          disabled: {
            type: Boolean,
            value: false
          },

          /**
           * Controls ordering of slot content nodes in a slot.
           */
          order: {
            type: Number,
            value: 0
          },

          /**
           * Controls merging of slot content with same name.
           */
          priority: {
            type: Number,
            value: 0
          }
        },

        observers: [
          '_register(disabled, order, priority)'
        ],

        detached: function() {
          this._unregister(this.slot);
        },

        get template() {
          return Polymer.dom(this).querySelector('template');
        },

        _merge: function(other) {
          this.slot = other.slot;
          this.disabled = other.disabled;
          this.order = other.order;
          this.priority = other.priority;
        },

        _slotChanged: function(_, oldSlot) {
          if (oldSlot) {
            this._unregister(oldSlot);
          }
          this._register();
        },

        _register: function() {
          this.slot.split(',').forEach(slot => {
            _registerContent(this, slot);
          });
        },

        _unregister: function(slots) {
          slots.split(',').forEach(slot => {
            _unregisterContent(this, slot);
          })
        }
      });
    })();
  </script>
</dom-module>