designer

designer.html

<link rel="import" href="../nuxeo-elements/nx-connection.html">
<link rel="import" href="../nuxeo-elements/nx-page-provider.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
<link rel="import" href="../nuxeo-elements/nx-document.html">
<link rel="import" href="../nuxeo-elements/nx-layout.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #nx_connection {
        left: 180px;
        top: 70px;
        position: absolute;
      }
    </style>
    <nx-connection url="http://demo.nuxeo.com/nuxeo" id="nx_connection"></nx-connection>
    <nx-page-provider auto query="select * from Note where ecm:currentLifeCycleState != 'deleted'" id="docs"></nx-page-provider>
    <core-toolbar id="core_toolbar">
      <core-icon-button icon="menu" on-tap="{{ back }}"></core-icon-button>
      <template if="{{selected}}"></template>
    </core-toolbar>
    <core-animated-pages transitions="cross-fade-all hero-transition" selectedindex="0" notap id="pages" flex on-core-animated-pages-transition-end="{{ transitionend }}">
      <section vertical layout active>
        <div id="container">
          <div layout horizontal center>
            <core-icon-button icon="arrow-back" on-tap="{{ setPage }}" data-item="0" disabled></core-icon-button>
            <span>1 / </span>
            <core-icon-button icon="arrow-forward" on-tap="{{ setPage }}" data-item="2"></core-icon-button>
          </div>
          <template repeat="{{doc in $.docs.currentPage}}">
          	<div class="card" hero-id="{{doc.uid}}" hero?="{{doc.uid == selected || doc.uid == lastSelected}}">
            <span style="text-transform: uppercase;color: gray;">{{doc.state}}</span>
            <nx-layout ref="heading" vertical value="{{doc}}" mode="{{mode}}" on-tap="{{selectItem}}"></nx-layout>
          	</div>
          </template>
        </div>
      </section>
      <section vertical layout>
        <nx-document docid="{{ selected }}" doc="{{ doc }}" auto id="doc"></nx-document>
        <div class="card" hero-id hero>
          <template if="{{mode == 'edit'}}"></template>
          <nx-layout ref="heading" value="{{ doc }}" mode="{{ mode }}" vertical></nx-layout>
          <nx-layout ref="note" value="{{ doc }}" mode="{{ mode }}" vertical></nx-layout>
          <nx-layout ref="dublincore" value="{{ doc }}" mode="{{ mode }}" vertical></nx-layout>
        </div>
      </section>
    </core-animated-pages>
  </template>

  <script>

    Polymer('my-element', {
      selected: '',
      mode: 'view',
      setPage: function (e, detail, sender) {
        this.$.docs.page = parseInt( sender.dataset.item, 10 );
      },
      toggleMode: function () {
        this.mode = (this.mode == 'view') ? 'edit' : 'view';
      },
      selectItem: function (e, detail, sender) {
        this.selected = sender.value.uid;
      },
      back: function () {
        this.lastSelected = this.selected.uid;
        this.selected = null;
        this.mode = 'view';
      },
      transitionend: function () {
        if (this.lastSelected) {
          this.lastSelected = null;
        }
      },
      saveDoc: function () {
        this.$.doc.put();
      }
    });

  </script>

</polymer-element>