hax-text-context.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../md-extra-icons/md-extra-icons.html">
<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../materializecss-styles/colors.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">
<link rel="import" href="hax-context-item-textop.html">
<link rel="import" href="hax-toolbar.html">
<!--
`hax-text-context`
A context menu that provides common text based authoring options.

@demo demo/index.html

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

<dom-module id="hax-text-context">
  <template>
    <style include="materializecss-styles-colors">
      :host {
        display: block;
        pointer-events: none;
        background-color: white;
      }
      paper-item {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        height: 32px;
        padding: 0 8px;
        min-height: 32px;
      }
      paper-item:hover {
        background-color: #d3d3d3;
        cursor: pointer;
      }
      iron-icon {
        padding: 8px;
      }
      paper-item strong {
        padding: 8px;
        font-size: 12px;
      }
      :host.hax-context-pin-top hax-toolbar {
        position: fixed;
        top: 64px;
        opacity: .95;
      }
      :host.hax-context-pin-bottom hax-toolbar {
        position: fixed;
        bottom: 0;
        opacity: .95;
      }
    </style>
    <hax-toolbar selected="[[selection]]" hide-transform>
      <hax-context-item-menu
        corner="left"
        slot="primary"
        selected-value="{{selectedValue}}"
        id="formatsize"
        icon="text-format"
        label="Format"
        event-name="text-tag">
        <paper-item value="p"><iron-icon icon="editor:format-textdirection-l-to-r"></iron-icon>Normal text <strong>&lt;P&gt;</strong></paper-item>
        <paper-item value="h2"><iron-icon icon="editor:title"></iron-icon>Title <strong>&lt;H2&gt;</strong></paper-item>
        <paper-item value="h3"><iron-icon icon="editor:title"></iron-icon>Content heading <strong>&lt;H3&gt;</strong></paper-item>
        <paper-item value="h4"><iron-icon icon="editor:text-fields"></iron-icon>Subheading <strong>&lt;H4&gt;</strong></paper-item>
        <paper-item value="h5"><iron-icon icon="editor:text-fields"></iron-icon>Deeper subheading <strong>&lt;H5&gt;</strong></paper-item>
        <paper-item value="blockquote"><iron-icon icon="editor:format-quote"></iron-icon>Quote<strong>&lt;blockquote&gt;</strong></paper-item>
        <paper-item value="code"><iron-icon icon="icons:code"></iron-icon>Code block<strong>&lt;code&gt;</strong></paper-item>
      </hax-context-item-menu>
      <hax-context-item-textop slot="primary" icon="editor:format-bold" label="Bold" event-name="text-bold"></hax-context-item-textop>
      <hax-context-item-textop slot="primary" icon="editor:format-italic" label="Italic" event-name="text-italic"></hax-context-item-textop>
      <hax-context-item-textop slot="primary" icon="editor:insert-link" label="Link" event-name="text-link"></hax-context-item-textop>
      <hax-context-item-menu
        slot="primary"
        selected-value="{{justifyValue}}"
        id="justify"
        icon="[[justifyIcon]]"
        label="Alignment">
        <paper-item value="" hidden></paper-item>
        <paper-item value="text-align-left">
          <iron-icon icon="editor:format-align-left"></iron-icon>
        </paper-item>
        <paper-item value="text-align-right">
          <iron-icon icon="editor:format-align-right"></iron-icon>
        </paper-item>
      </hax-context-item-menu>
      <hax-context-item-textop
        slot="primary"
        icon="editor:format-list-numbered"
        label="Numbered list"
        event-name="text-list-numbered"
        hidden$="[[!polyfillSafe]]"></hax-context-item-textop>
      <hax-context-item-textop
        slot="primary"
        icon="editor:format-list-bulleted"
        label="Bulleted list"
        event-name="text-list-bulleted"
        hidden$="[[!polyfillSafe]]"></hax-context-item-textop>
      <hax-context-item-textop
        slot="primary"
        icon="editor:format-indent-increase"
        label="Indent"
        event-name="text-indent"
        hidden$="[[!polyfillSafe]]"></hax-context-item-textop>
      <hax-context-item-textop
        slot="primary"
        icon="editor:format-indent-decrease"
        label="Outdent"
        event-name="text-outdent"
        hidden$="[[!polyfillSafe]]"></hax-context-item-textop>
      <hax-context-item-textop slot="primary" icon="editor:format-clear" label="Remove format" event-name="text-remove-format"></hax-context-item-textop>
      <hax-context-item slot="primary" icon="device:graphic-eq" label="Advanced item" event-name="insert-inline-gizmo"></hax-context-item>
      <hax-context-item-textop menu slot="more" icon="mdextra:unlink" event-name="text-unlink">Remove link</hax-context-item-textop>
      <hax-context-item-textop menu slot="more" icon="mdextra:subscript" event-name="text-subscript">Subscript</hax-context-item-textop>
      <hax-context-item-textop menu slot="more" icon="mdextra:superscript" event-name="text-superscript">Superscript</hax-context-item-textop>
      <hax-context-item-textop menu slot="more" icon="editor:format-strikethrough" event-name="text-strikethrough">Cross out</hax-context-item-textop>
    </hax-toolbar>
  </template>
  <script>
    Polymer({

      is: 'hax-text-context',
      listeners: {
        'hax-context-item-selected': '_haxContextOperation',
      },
      properties: {
        /**
         * Justify icon to reflect state.
         */
        justifyIcon: {
          type: String,
          value: 'editor:format-align-left',
        },
        /**
         * Polyfill safe; this helps remove options from polyfilled platforms
         * as far as text manipulation operations.
         */
        polyfillSafe: {
          type: Boolean,
        },
        /**
         * Selected value to match format of the tag currently.
         */
        selectedValue: {
          type: String,
          value: 'p',
          notify: true,
        },
        /**
         * Selected value to match text direction currently.
         */
        justifyValue: {
          type: String,
          value: 'text-align-left',
          notify: true,
        },
        /**
         * Selection tracking
         */
        selection: {
          type: Boolean,
          value: false,
        },
      },
      /**
       * Ready, figure out polyfill
       */
      ready: function() {
        this.polyfillSafe = Polymer.HaxStore.instance.computePolyfillSafe();
      },
      /**
       * Respond to simple modifications.
       */
      _haxContextOperation: function(e) {
        let detail = e.detail;
        let selection = window.getSelection();
        // support a simple insert event to bubble up or everything else
        switch(detail.eventName) {
          // wow these are way too easy
          case 'text-align-left':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'text-align-center':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'text-align-right':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'text-justify-full':
            this.justifyIcon = detail.target.children[0].attributes[0].value;
          break;
          case 'close-menu':
            this.$.justify.$.menu.hideMenu();
            this.$.formatsize.$.menu.hideMenu();
          break;
          case 'insert-inline-gizmo':
            // store placeholder because if this all goes through we'll want
            // to kill the originating text
            let values = {
              text: Polymer.HaxStore.instance.activePlaceHolder.toString(),
            };
            let type = 'inline';
            let haxElements = Polymer.HaxStore.guessGizmo(type, values);
            // see if we got anything
            if (haxElements.length > 0) {
              // hand off to hax-app-picker to deal with the rest of this
              Polymer.HaxStore.instance.haxAppPicker.presentOptions(haxElements, type, 'Transform selected text to..', 'gizmo');
            }
            break;
          // wow these are way too easy
          case 'text-bold':
            document.execCommand('bold');
            break;
          case 'text-italic':
            document.execCommand('italic');
            break;
          case 'text-underline':
            document.execCommand('underline');
            // silly hack to account for trigging a selection from
            // inside the menu that isn't from a paper-item
            this.$.toolbar.$.moremenu.$.menu.hideMenu();
            break;
          case 'text-subscript':
            document.execCommand('subscript');
            // silly hack to account for trigging a selection from
            // inside the menu that isn't from a paper-item
            this.$.toolbar.$.moremenu.$.menu.hideMenu();
            break;
          case 'text-superscript':
            document.execCommand('superscript');
            // silly hack to account for trigging a selection from
            // inside the menu that isn't from a paper-item
            this.$.toolbar.$.moremenu.$.menu.hideMenu();
            break;
          case 'text-remove-format':
            document.execCommand('removeFormat');
            break;
          case 'text-strikethrough':
            document.execCommand('strikeThrough');
            // silly hack to account for trigging a selection from
            // inside the menu that isn't from a paper-item
            this.$.toolbar.$.moremenu.$.menu.hideMenu();
            break;
          case 'text-link':
            var href = '';
            if (typeof selection.focusNode.parentNode.href !== typeof undefined) {
              href = selection.focusNode.parentNode.href;
            }
            // @todo put in a dialog instead of this
            let url = prompt("Enter a URL:", href);
            if (url) {
              document.execCommand('createLink', false, url);
            }
            break;
          case 'text-unlink':
            document.execCommand('unlink');
            break;
          /**
           * Our bad actors when it comes to polyfill'ed shadowDOM.
           * Naughty, naughty shadyDOM. Fortunately this is only IE11/Edge
           */
          case 'text-indent':
            document.execCommand('indent');
          break;
          case 'text-outdent':
            document.execCommand('outdent');
          break;
          case 'text-list-numbered':
            document.execCommand('insertOrderedList');
          break;
          case 'text-list-bulleted':
            document.execCommand('insertUnorderedList');
          break;
        }
      },
      /**
       * Test for safari, if it is don't place things in the menu
       */
      isSafari: function (typevalue) {
        let ua = navigator.userAgent.toLowerCase();
        // test to find safari to account for it's handling
        // of what's been selected. This isn't great UX but
        // there's literally nothing we can do for Safari
        // because of https://github.com/LRNWebComponents/hax-body/issues/38
        if (ua.indexOf('safari') != -1) {
          if (ua.indexOf('chrome') > -1) {
          } else {
            return true;
          }
        }
        return false;
      },
    });
  </script>
</dom-module>