hax-context-item-textop.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/editor-icons.html">
<link rel="import" href="../iron-icons/device-icons.html">
<link rel="import" href="../iron-icons/hardware-icons.html">
<link rel="import" href="../iron-icons/social-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../iron-icons/image-icons.html">
<link rel="import" href="../iron-icons/maps-icons.html">
<link rel="import" href="../materializecss-styles/colors.html">
<link rel="import" href="../neon-animation/web-animations.html">

<!--
`hax-context-item-textop`
A single button in the hax context menus for consistency. This one uses the mousedown event becasue tap won't work in safari / firefox / IE while maintaining focus inside the contenteditable area (stupid, I know)

@demo demo/index.html

@microcopy - the mental model for this element
 - context - menu in the page the user can select an item from, this being 1 option in that list
 - button - an item that expresses what interaction you will have with the content.

-->

<dom-module id="hax-context-item-textop">
  <template>
    <style include="materializecss-styles-colors">
      :host {
        display: inline-flex;
      }
      :host[wide] {
        width: 50%;
      }
      paper-icon-button {
        color: rgba(0,0,0,0.66);
        margin: 0;
        text-transform: none;
        background-color: #ffffff;
        min-width: 40px;
        display: flex;
        padding: 0;
        border-radius: 0;
      }
      paper-icon-button ::shadow iron-icon {
        padding: 8px;
        margin: 0;
        box-sizing: border-box;
      }
      paper-icon-button:hover {
        background-color: var(--paper-grey-300, grey);
      }
      :host[wide] paper-button {
        width: unset;
      }
      .flip-icon {
        transform: rotateY(180deg);
      }
    </style>
    <iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
                    on-keys-pressed="_fireEvent"></iron-a11y-keys>
    <paper-icon-button id="button" icon="[[icon]]" hidden$="[[!icon]]" class$="[[iconClass]]" on-mousedown="_fireEvent"></paper-icon-button>
    <paper-tooltip
      for="button"
      position="[[direction]]"
      offset="10">
      [[label]]
    </paper-tooltip>
  </template>

  <script>
    Polymer({

      is: 'hax-context-item-textop',

      properties: {
        /**
         * target for the iron-a11y-keys element.
         */
        target: {
          type: Object
        },
        /**
         * Modifier that makes the button wider
         */
        wide: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
        },
        /**
         * Direction for the tooltip
         */
        direction: {
          type: String,
          value: 'top',
        },
        /**
         * Icon for the button.
         */
        icon: {
          type: String,
          value: "editor:text-fields",
          reflectToAttribute: true,
        },
        /**
         * Icon for the button.
         */
        iconClass: {
          type: String,
          value: "black-text",
          reflectToAttribute: true,
        },
        /**
         * Label for the button.
         */
        label: {
          type: String,
          value: "editor:text-fields",
          reflectToAttribute: true,
        },
        /**
         * Name of the event to bubble up as being tapped.
         * This can be used to tell other elements what was
         * clicked so it can take action appropriately.
         */
        eventName: {
          type: String,
          value: "button",
          reflectToAttribute: true,
        },
        /**
         * Method of input to display when activated. This is
         * only used when triggered as part of haxProperties
         */
        inputMethod: {
          type: String,
          value: null,
          reflectToAttribute: true,
        },
        /**
         * Optional slot to bind this value to.
         */
        propertyToBind: {
          type: String,
          value: null,
          reflectToAttribute: true,
        },
        /**
         * Optional slot to bind this value to.
         */
        slotToBind: {
          type: String,
          value: null,
          reflectToAttribute: true,
        },
        /**
         * Optional description for this item.
         */
        description: {
          type: String,
          reflectToAttribute: true,
        },
      },
      /**
       * Ready.
       */
      ready: function() {
        // bind keyboard to button press
        this.target = this.$.button;
      },
      /**
       * Fire an event that includes the eventName of what was just pressed.
       */
      _fireEvent: function(e) {
        this.fire('hax-context-item-selected', {target: this, eventName: this.eventName});
      }
    });
  </script>
</dom-module>