hax-ce-context.html

<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-swatch-picker/paper-swatch-picker.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="hax-context-item-menu.html">
<link rel="import" href="hax-context-item.html">

<!--
`hax-ce-context`
A context menu that provides common custom-element based authoring options. While
trying to call for haxProperties which can automatically generate the buttons
required for populating input.

@demo demo/index.html

@microcopy - the mental model for this element
 - context menu - this is a menu of custom-element based buttons and events for use in a larger solution.
-->

<dom-module id="hax-ce-context">
  <template>
    <style>
      :host {
        display: block;
      }
      app-toolbar {
        background-color: white;
        padding: 0;
        height: 40px;
      }
      hax-context-item {
        margin: 0;
        width: 40px;
        height: 40px;
      }
      .close-cap {
        margin: 0;
        padding: 0;
        border-right: 1px solid black;
      }
      #elementoptions {
        height: inherit;
      }
    </style>
    <app-toolbar>
      <hax-context-item
        icon="close"
        label="Close menu"
        event-name="close-menu"
        class="close-cap"
        direction="left"></hax-context-item>
      <template is="dom-if" if="[[haxProperties.canPosition]]">
        <hax-context-item-menu
          selected-value="{{justifyValue}}"
          id="justify"
          icon="[[justifyIcon]]"
          label="Alignment">
          <paper-item value="hax-align-left">
            <iron-icon icon="editor:format-align-left"></iron-icon>
          </paper-item>
          <paper-item value="hax-align-center">
            <iron-icon icon="editor:format-align-center"></iron-icon>
          </paper-item>
          <paper-item value="hax-align-right">
            <iron-icon icon="editor:format-align-right"></iron-icon>
          </paper-item>
        </hax-context-item-menu>
      </template>
      <template is="dom-if" if="[[haxProperties.canScale]]">
        <paper-slider id="slider" pin min="25" step="25" max="100" value="{{ceSize}}"></paper-slider>
        <paper-tooltip
          for="slider"
          position="top"
          offset="10">
          Resize
        </paper-tooltip>
      </template>
      <span id="elementoptions">
        <slot></slot>
      </span>
      <hax-context-item
        icon="settings"
        label="Settings"
        event-name="hax-manager-configure" hidden$="[[!__hasSettingsForm]]"></hax-context-item>
    </app-toolbar>
  </template>

  <script>
    Polymer({

      is: 'hax-ce-context',
      listeners: {
        'hax-context-item-selected': '_haxContextOperation',
      },
      properties: {
        /**
         * ce size.
         */
        ceSize: {
          type: Number,
          value: 50,
          observer: '_ceSizeChanged',
        },
        /**
         * Justify icon to reflect state.
         */
        justifyIcon: {
          type: String,
          value: 'editor:format-align-left',
        },
        /**
         * Selected value to match ce direction currently.
         */
        justifyValue: {
          type: String,
          value: 'hax-align-left',
          notify: true,
        },
        /**
         * Selected value to match ce direction currently.
         */
        haxProperties: {
          type: Object,
          value: {},
          observer: '_haxPropertiesChanged',
        },
      },
      /**
       * Set haxProperties.
       */
      setHaxProperties: function(props) {
        // be aggressive w/ reset
        this.set('haxProperties', {});
        this.set('haxProperties', props);
      },
      /**
       * ce size changed.
       */
      _ceSizeChanged: function(newValue, oldValue) {
        if (typeof newValue !== typeof undefined) {
          this.fire('hax-context-item-selected', {eventName: 'hax-size-change', value: newValue});
        }
      },
      /**
       * HAX properties changed, update buttons available.
       */
      _haxPropertiesChanged: function(newValue, oldValue) {
        if (typeof oldValue !== typeof undefined && typeof newValue.settings !== typeof undefined) {
          // clear current slot for the tag
          let slot = Polymer.dom(this.$.elementoptions);
          while (slot.firstChild !== null) {
            slot.removeChild(slot.firstChild);
          }
          let settings = newValue.settings.quick;
          let configure = newValue.settings.configure;
          let advanced = newValue.settings.advanced;
          // support things that could technically have no configuration
          // or advanced form but have quick settings
          // This doesn't make a ton of sense but it is possible
          if (configure.length || advanced.length) {
            this.__hasSettingsForm = true;
          }
          else {
            this.__hasSettingsForm = false;
          }
          var item;
          // @todo kick stuff into the local dom as options
          for (i = 0; i < settings.length; i++) {
            let setting = settings[i];
            // create a new context item for the quick
            item = document.createElement('hax-context-item');
            item.eventName = 'hax-edit-property';
            item.label = setting.title;
            item.options = setting.options;
            item.icon = setting.icon;
            item.inputMethod = setting.inputMethod;
            item.required = setting.required;
            item.options = setting.options;
            item.validation = setting.validation;
            item.validationType = setting.validationType;
            item.description = setting.description;
            // property or slot if it doesn't exist
            if (typeof setting.property !== typeof undefined) {
              item.propertyToBind = setting.property;
            }
            else {
              item.slotToBind = setting.slot;
            }
            slot.appendChild(item);
          }
        }
      },
      /**
       * Respond to simple modifications.
       */
      _haxContextOperation: function(e) {
        let detail = e.detail;
        // support a simple insert event to bubble up or everything else
        switch(detail.eventName) {
          case 'hax-align-left':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'hax-align-center':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'hax-align-right':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'close-menu':
            if (this.$$('#justify')) {
              this.$$('#justify').hideMenu();
            }
          break;
        }
      },
    });
  </script>
</dom-module>