live-localizer-dialog.js

/**
@license https://github.com/t2ym/live-localizer/blob/master/LICENSE.md
Copyright (c) 2016, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
*/
/**

## Draggable and resizable dialog for Live Localizer widget

`<live-localizer-dialog>` element provides the Live Localizer content with a draggable and resizable dialog frame.

```html
  <live-localizer-dialog>
    <live-localizer-panel><content></content></live-localizer-panel>
  </live-localizer-dialog>
```

@group I18nBehavior
@element live-localizer-dialog
@demo demo/index.html
*/
/*
  FIXME(polymer-modulizer): the above comments were extracted
  from HTML and may be out of place here. Review them and
  then delete this comment!
*/
import '@polymer/polymer/polymer-legacy.js';

import { IronOverlayBehaviorImpl } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/neon-animation/animations/scale-up-animation.js';
import '@polymer/neon-animation/animations/scale-down-animation.js';
import './draggable-behavior.js';
import { Polymer as Polymer$0 } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { NeonAnimationRunnerBehavior } from '@polymer/neon-animation/neon-animation-runner-behavior.js';
Polymer$0({
  importMeta: import.meta,

  _template: html`
    <style include="iron-flex"></style>
    <style include="drag-handle-mode"></style>
    <style>
      :host {
        display: block;
        position: fixed;
        padding: 0px;

        background-color: var(--live-localizer-background-color);
        color: var(--live-localizer-color);

        @apply(--shadow-elevation-16dp);

        --paper-icon-button: {
          position: relative;
          top: -2px;
          padding: 0px;
          width: 24px;
          height: 24px;
        }

        --drag-handle: {
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-user-select: none;
          user-select: none;
        }

        --drag-handle-height: 4px;
        --drag-handle-width: 4px;
      }
      div.handle {
        width: 100%;
        height: 100%;
      }
      div.top-handle {
        height: var(--drag-handle-height);
        @apply(--drag-handle);
      }
      div.bottom-handle {
        height: var(--drag-handle-height);
        @apply(--drag-handle);
      }
      div.left-handle {
        width: var(--drag-handle-width);
        @apply(--drag-handle);
      }
      div.right-handle {
        width: var(--drag-handle-width);
        @apply(--drag-handle);
      }
      div.titlebar {
        height: 24px;
        min-height: 24px;
        @apply(--drag-handle);
      }
      div.dialog-content {
        @apply(--live-localizer-dialog-content-div);
      }
      div.title {
        padding: 2px;
        text-align: center;      
        @apply(--drag-handle);
      }
      div.title-pad {
        width: 48px;
      }
      paper-icon-button#fullscreen.fullscreen {
        display: none;
      }
      paper-icon-button#fullscreen-exit:not(.fullscreen) {
        display: none;
      }
    </style>
    <div id="handle" class="layout vertical handle" on-mouseover="_onMouseover">
      <div class="top-handle layout horizontal">
        <div class="left-handle" drag-handle-mode="upper-left"></div>
        <div class="flex" drag-handle-mode="upper"></div>
        <div class="right-handle" drag-handle-mode="upper-right"></div>
      </div>
      <div class="flex layout horizontal">
        <div class="left-handle" drag-handle-mode="middle-left"></div>
        <div class="flex">
          <div class="layout vertical">
            <div class="titlebar layout horizontal">
              <div class="title-pad"></div>
              <div class="flex title" drag-handle-mode="position">[[dialogTitle]]</div>
              <paper-icon-button id="fullscreen" class="icon-button" icon="fullscreen" drag-handle-mode="none" on-tap="_onFullscreenButton"></paper-icon-button>
              <paper-icon-button id="fullscreen-exit" class="icon-button" icon="fullscreen-exit" drag-handle-mode="none" on-tap="_onFullscreenButton"></paper-icon-button>
              <paper-icon-button id="close" class="icon-button" icon="close" drag-handle-mode="none" on-tap="_onCloseButton"></paper-icon-button>
            </div>
            <div id="content" class="dialog-content" drag-handle-mode="none"><slot name="dialog-content"></slot></div>
          </div>
        </div>
        <div class="right-handle" drag-handle-mode="middle-right"></div>
      </div>
      <div class="bottom-handle layout horizontal">
        <div class="left-handle" drag-handle-mode="lower-left"></div>
        <div class="flex" drag-handle-mode="lower"></div>
        <div class="right-handle" drag-handle-mode="lower-right"></div>
      </div>
    </div>
`,

  is: 'live-localizer-dialog',

  behaviors: [
    IronResizableBehavior,
    IronOverlayBehaviorImpl,
    NeonAnimationRunnerBehavior,
    BehaviorsStore.DraggableBehavior
  ],

  properties: {
    /**
     * Configurations for entry and exit animations
     *
     * Note: Initialized by `computeAnimationConfig()`
     */
    animationConfig: {
      type: Object
    },

    /**
     * Origin element for entry and exit animations
     *
     * Note: Must be initialized as the live-localizer-fab element
     */
    originElement: {
      type: Object
    },

    /**
     * For IronOverlayBehaviorImpl
     */
    noCancelOnEscKey: {
      type: Boolean,
      value: true
    },

    /**
     * For IronOverlayBehaviorImpl
     */
    noCancelOnOutsideClick: {
      type: Boolean,
      value: true
    },

    /**
     * Title for the dialog
     */
    dialogTitle: {
      type: String,
      value: 'Live Localizer'
    }
  },

  observers: [
    'setFullscreen(fullscreen)'
  ],

  listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish',
    'height-changed': '_adjustHeight'
  },

  /**
   * ready callback
   *
   * Initialize `this.resizable = true` for `DraggableBahavior`
   */
  ready: function () {
    this.resizable = true;
  },

  /**
   * Attached callback
   *
   * Initialize `resize` event listener
   */
  attached: function () {
    this.resetPositionBindThis = this.resetPosition.bind(this);
    window.addEventListener('resize', this.resetPositionBindThis);
  },

  /**
   * Detached callback
   *
   * Uninitialize `resize` event handler
   */
  detached: function () {
    window.removeEventListener('resize', this.resetPositionBindThis);
  },

  /**
   * Initialize `this.animationConfig` to set the fab icon as the transformOrigin
   */
  computeAnimationConfig: function () {
    var transformOrigin = '50% 50%';
    var originX, originY, originStyle, thisStyle;
    if (this.originElement) {
      originStyle = getComputedStyle(this.originElement);
      thisStyle = getComputedStyle(this);
      originX = Number(originStyle.left.replace(/px$/, '')) +
        (originStyle.width === 'auto' ? 28 : Number(originStyle.width.replace(/px$/, '')) / 2);
      originY = Number(originStyle.top.replace(/px$/, '')) +
        (originStyle.height === 'auto' ? 28 : Number(originStyle.height.replace(/px$/, '')) / 2);
      transformOrigin = ((100 * (originX - Number(thisStyle.left.replace(/px$/, ''))) / Number(thisStyle.width.replace(/px$/, '')))) + '% ' +
                        ((100 * (originY - Number(thisStyle.top.replace(/px$/, ''))) / Number(thisStyle.height.replace(/px$/, '')))) + '%';
    }
    this.animationConfig = {
      'entry': [{
        name: 'scale-up-animation',
        node: this,
        transformOrigin: transformOrigin
      }],
      'exit': [{
        name: 'scale-down-animation',
        node: this,
        transformOrigin: transformOrigin
      }]
    };
  },

  /**
   * Observer of `fullscreen` status
   *
   * Set or reset `fullscreen` class for fullscreen and fullscreen-exit icons
   */
  setFullscreen: function (fullscreen) {
    this.toggleClass('fullscreen', fullscreen, this.$.fullscreen);
    this.toggleClass('fullscreen', fullscreen, this.$['fullscreen-exit']);
  },

  /**
   * Initialize the size and the position at the center of the container app window
   *
   * Move to visible position if invisible.
   *
   * Note:
   * - Do nothing once the element is shown
   */
  resetPosition: function () {
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;
    if (!this.shown) {
      if (fullWidth > 0 && fullHeight > 0) {
        this.width = 400;
        this.height = 450;
        this.x = fullWidth / 2 - this.width / 2;
        this.y = fullHeight / 2 - this.height / 2;
      }
    }
    else {
      if (this.x < 0) {
        this.x = 0;
      }
      if (this.x > fullWidth - this.width) {
        if (fullWidth > this.width) {
          this.x = fullWidth - this.width;
        }
        else {
          this.x = 0;
          this.width = fullWidth;
        }
      }
      if (this.y < 0) {
        this.y = 0;
      }
      if (this.y > fullHeight - this.height) {
        if (fullHeight > this.height) {
          this.y = fullHeight - this.height;
        }
        else {
          this.y = 0;
          this.height = fullHeight;
        }
      }
    }
  },

  /**
   * Return the current drag-handle-mode as DraggableBehavior
   *
   * Override the method in DraggableBehavior
   */
  getDragHandleMode: function (e) {
    return this._dragHandleMode;
  },

  /**
   * `mouseover` event handler
   *
   * Update this._dragHandleMode according to the `drag-handle-mode` attribute
   */
  _onMouseover: function (e) {
    if (e.target.hasAttribute('drag-handle-mode')) {
      this._dragHandleMode = e.target.getAttribute('drag-handle-mode');
    }
    else {
      this._dragHandleMode = 'none';
    }
  },

  /**
   * Play animation at open (Live Localizer is opened)
   */
  _renderOpened: function() {
    this.cancelAnimation();
    this.computeAnimationConfig();
    this.playAnimation('entry');
    this.shown = true;
  },

  /**
   * Play animation at close (Live Localizer is closed)
   */
  _renderClosed: function() {
    this.cancelAnimation();
    this.computeAnimationConfig();
    this.playAnimation('exit');
  },

  /**
   * `neon-animation-finish` event handler
   */
  _onNeonAnimationFinish: function() {
    if (this.opened) {
      this._finishRenderOpened();
    } else {
      this._finishRenderClosed();
    }
  },

  /**
   * `tap` event handler for the close button
   */
  _onCloseButton: function (e) {
    this.close();
  },

  /**
   * `tap` event handler for the fullscreen/fullscreen-exit buttons
   */
  _onFullscreenButton: function (e) {
    this.fullscreen = !this.fullscreen;
  },

  /**
   * 'height-changed' event handler for the dialog
   *
   * Adjust the height of the panel content
   */
  _adjustHeight: function (e) {
    if (this.$.content) {
      this.$.content.style.height = (Number(getComputedStyle(this).height.replace(/px$/,'')) - 32) + 'px';
    }
  },

  refit: Function(),
  notifyResize: Function()
});