haxcms-page-editor-dialog.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../simple-colors/simple-colors.html">
<link rel="import" href="../simple-colors/simple-colors-picker.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../magazine-cover/magazine-cover.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../dropdown-select/dropdown-select.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-icon-picker/paper-icon-picker.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.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/notification-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../iron-icons/device-icons.html">
<link rel="import" href="../iron-icons/image-icons.html">
<!--
`haxcms-page-editor-dialog`
Dialog for presenting an editable page of core settings

@demo demo/index.html

@microcopy - the mental model for this element

-->

<dom-module id="haxcms-page-editor-dialog">
  <template>
    <style>
      :host {
        display: block;
      }
      paper-dialog {
        width: 60%;
        min-height: 60%;
        top: 5%;
        border-radius: 16px;
      }
    </style>
    <paper-dialog id="editor" opened="{{opened}}" with-backdrop>
      <paper-dialog-scrollable>
        <paper-input id="pagetitle" label="Title" required autofocus></paper-input>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button id="save" dialog-confirm>Save</paper-button>
        <paper-button id="cancel" dialog-dismiss>Cancel</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
    Polymer({
      is: 'haxcms-page-editor-dialog',
      listeners: {
        'save.tap': '_saveTap',
      },
      properties: {
        /**
         * opened state of the dialog inside here
         */
        opened: {
          type: Boolean,
          notify: true,
        },
         /**
          * Active item
          */
         activeItem: {
           type: Object,
           notify: true,
         },
      },
      /**
       * Ready life cycle
       */
      ready: function () {
        document.body.addEventListener('json-outline-schema-active-item-changed', this._activeItemSet.bind(this));
      },
      /**
       * activeItem changed globally
       */
      _activeItemSet: function (e) {
        if (typeof e.detail.id !== typeof undefined) {
          this.set('activeItem', e.detail);
        }
      },
      /**
       * Save hit, send the message to push up the page data changes.
       */
      _saveTap: function (e) {
        this.activeItem.title = this.$.pagetitle.value;
        this.fire('haxcms-save-page-data', this.activeItem);
      },
    });
  </script>
</dom-module>