mostly-app.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-pages/iron-pages.html">

<link rel="import" href="mostly-icons.html">
<link rel="import" href="mostly-layout.html">
<link rel="import" href="mostly-slots.html">
<link rel="import" href="behaviors/mostly-filters-behavior.html">
<link rel="import" href="behaviors/mostly-i18n-behavior.html">
<link rel="import" href="behaviors/mostly-layout-behavior.html">
<link rel="import" href="behaviors/mostly-routing-behavior.html">
<link rel="import" href="mostly-common/mostly-operation.html">
<link rel="import" href="mostly-common/mostly-page-provider.html">
<link rel="import" href="mostly-common/mostly-resource.html">

<link rel="import" href="mostly-app/mostly-menu-item.html">
<link rel="import" href="mostly-app/mostly-menu-icon.html">
<link rel="import" href="mostly-app/mostly-offline-banner.html">
<link rel="import" href="mostly-app/mostly-page.html">
<link rel="import" href="mostly-app/mostly-page-item.html">
<link rel="import" href="mostly-app/mostly-progress-indicator.html">

<link rel="import" href="mostly-data-table/iron-data-table.html">

<link rel="import" href="widgets/mostly-card.html">
<link rel="import" href="widgets/mostly-date.html">

<link rel="import" href="../playing-content-elements/playing-document/playing-document.html">
<link rel="import" href="../playing-content-elements/playing-document-thumbnail/playing-document-thumbnail.html">

<!-- playing-browser -->
<link rel="import" href="../playing-content-elements/playing-browser/playing-breadcrumb.html">

<!-- Right panel elements -->
<link rel="import" href="../playing-content-elements/playing-recent-documents/playing-recent-documents.html">

<!-- i18n -->
<link rel="import" href="i18n/i18n.html">

<!-- themes -->
<link rel="import" href="themes/base.html">
<link rel="import" href="themes/loader.html">
<!--link rel="import" href="themes/default/theme.html"-->

<!-- routing
<link rel="import" href="routing.html">
-->
<!-- search -->
<link rel="import" href="../playing-search-elements/playing-search-page.html">
<link rel="import" href="../playing-search-elements/search/playing-search-form.html">

<!-- user group management -->
<link rel="import" href="../playing-user-elements/playing-user-group/playing-user-group-management-page.html">

<script src="../playing-content-elements/playing-document/playing-doc-types.js"></script>

<!-- animations polyfill -->
<link rel="import" href="../neon-animation/web-animations.html">

<!--
`mostly-app`
@group Mostly UI
@element mostly-app
-->
<dom-module id="mostly-app">
  <template>
    <style include="mostly-styles">

      paper-header-panel, iron-pages paper-header-panel {
        --paper-header-panel-body: {
          background: var(--mostly-page-background);
        };
        height: 100%;
      }

      paper-drawer-panel {
        --paper-drawer-panel-left-drawer-container: {
          z-index: 100;
        };
        --paper-drawer-panel-scrim: {
          z-index: 2;
        };
        top: var(--mostly-app-top);
        height: calc(100% - var(--mostly-app-top));
      }

      paper-header-panel {
        --paper-header-panel-container: {
          -webkit-overflow-scrolling: unset; /* fix for selection toolbar on iOS */
        };
      }

      /* logo */
      #logo {
        position: fixed;
        width: var(--mostly-sidebar-width);
        height: 53px;
        top: var(--mostly-app-top);
        left: 0;
        z-index: 102;
        box-sizing: border-box;
        outline: none;
        background-color: var(--mostly-sidebar-background);
      }

      #logo img {
        width: var(--mostly-sidebar-width);
        height: 53px;
      }

      /* menu */
      #menu {
        @apply --mostly-sidebar;
        position: fixed;
        width: var(--mostly-sidebar-width);
        height: calc(100% - 54px);
        z-index: 100;
        padding: 53px 0;
        overflow: auto;
      }

      #logo:hover img {
        background: rgba(0, 0, 0, 0.2);
        color: var(--mostly-sidebar-menu-hover);
      }

      #logo:hover img {
        filter: brightness(110%);
        -webkit-filter: brightness(110%);
      }

      #menu .profile-icon,
      #menu .admin-icon {
        position: fixed;
        height: 48px;
        bottom: 0;
        left: 0;
      }

      #menu .admin-icon {
        bottom: 48px;
      }

      @media (max-width: 1024px), (max-height: 700px) {
        #menu .profile-icon,
        #menu .admin-icon {
          position: relative;
          bottom: auto;
        }
      }

      /* drawer */
      #drawer {
        overflow: auto;
        width: 100%;
      }

      #drawer .toggle {
        position: absolute;
        right: -16px;
        top: 0;
        width: 16px;
        height: 100%;
        cursor: pointer;
      }

      #drawer .toggle iron-icon {
        visibility: hidden;
        color: var(--mostly-drawer-background);
        background-color: var(--mostly-drawer-text);
        width: 16px;
        height: 48px;
        top: calc(50% - 24px);
        opacity: 0.6;
      }

      #drawer:hover .toggle iron-icon, #drawer .toggle:hover iron-icon {
        visibility: visible;
      }

      #drawer iron-pages {
        @apply --layout-vertical;
        color: var(--mostly-drawer-text);
        width: 294px;
        height: 100vh;
        margin-left: var(--mostly-sidebar-width);
        background-color: var(--mostly-drawer-background);
      }

      #drawer mostly-menu-item:hover,
      #drawer .list-item:hover {
        @apply --mostly-block-hover;
      }

      #drawer .list-item.selected,
      #drawer mostly-menu-item.iron-selected,
      #drawer .list-item:focus,
      #drawer mostly-menu-item:focus,
      #drawer .list-item.selected:focus,
      #drawer mostly-menu-item.iron-selected:focus {
        @apply --mostly-block-selected;
      }

      #drawer mostly-menu-item {
        @apply --mostly-sidebar-item-theme;
        --mostly-menu-item-link {
          @apply --mostly-sidebar-item-link;
        }
      }

      #drawer .profile mostly-menu-item:last-of-type {
        @apply --layout-vertical;
        border: none;
        justify-content: flex-end;
      }

      #drawerToggle {
        position: absolute;
        top: 5px;
        left: 6px;
        z-index: 99;
        background-color: var(--mostly-drawer-background);
      }

      mostly-document-create-button.admin {
        display: none;
      }

    </style>

    <mostly-offline-banner message="[[i18n('app.offlineBanner.message')]]"></mostly-offline-banner>

    <mostly-connection id="nxcon" user="{{currentUser}}" url="/api"></mostly-connection>

    <playing-document id="doc" doc-id="[[docId]]" doc-path="[[docPath]]"
            document="{{currentDocument}}"
            enrichers="permissions,breadcrumbs,preview,favorites,thumbnail,renditions,pendingTasks,collections,audit,subtypes,tags"
            schemas="creator,books,*"></playing-document>

    <mostly-operation id="userWorkspace" path="workspaces" input="me" method="get"></mostly-operation>
    <mostly-operation id="moveDocumentsOp" path="documents" sync-indexing></mostly-operation>
    <mostly-operation id="addToCollectionOp" path="user-collections" op="create" method="post"></mostly-operation>

    <mostly-resource id="processes" path="processes-stats"></mostly-resource>
    <mostly-resource id="process" path="processes-stats/[[currentProcessId]]"></mostly-resource>

    <!-- app layout -->
    <paper-drawer-panel id="drawerPanel" narrow="{{isNarrow}}" drawer-width="[[drawerWidth]]" responsive-width="720px" edge-swipe-sensitivity="0">
      <div slot="drawer">

        <!-- logo -->
        <a id="logo" href$="[[urlFor('home')]]">
          <img src$="[[_logo(baseUrl)]]" alt="[[i18n('accessibility.logo')]]"/>
        </a>

        <!-- menu -->
        <paper-listbox id="menu" selected="{{selectedTab}}" attr-for-selected="name" selected-class="selected" on-iron-activate="_toggleDrawer">
          <mostly-slot slot="DRAWER_ITEMS" model="[[actionContext]]"></mostly-slot>

          <mostly-menu-icon name="play"
                  icon="playing:game"
                  label="app.play"></mostly-menu-icon>
          <mostly-menu-icon name="administration"
                  icon="mostly:admin"
                  label="app.administration"
                  class="admin-icon"
                  hidden$="[[!_hasAdministrationPermissions(currentUser)]]"></mostly-menu-icon>
          <mostly-menu-icon name="profile"
                  src="[[currentUser.avatar.url]]"
                  icon="mostly:user-settings"
                  label="app.account"
                  class="profile-icon"></mostly-menu-icon>
        </paper-listbox>

        <!-- drawer -->
        <div id="drawer">
          <iron-pages id="drawer-pages"
                  selected="[[selectedTab]]"
                  attr-for-selected="name"
                  selected-attribute="visible"
                  on-iron-items-changed="_updateSearch">

            <mostly-slot slot="DRAWER_PAGES" model="[[actionContext]]"></mostly-slot>

            <div name="play">
              <div class="header">[[i18n('app.play')]]</div>
              <iron-selector selected="{{selectedPlayTab}}" attr-for-selected="name">
                <mostly-slot slot="PLAY_MENU" model="[[actionContext]]"></mostly-slot>
              </iron-selector>
            </div>

            <template is="dom-if" if="[[_hasAdministrationPermissions(currentUser)]]">
              <div name="administration">
                <div class="header">[[i18n('app.administration')]]</div>
                <iron-selector selected="{{selectedAdminTab}}" attr-for-selected="name">
                  <mostly-slot slot="ADMINISTRATION_MENU" model="[[actionContext]]"></mostly-slot>
                </iron-selector>
              </div>
            </template>

            <div name="profile" class="layout vertical">
              <div class="header">[[_displayUser(currentUser)]]</div>
              <iron-selector selected="{{selectedProfileTab}}" attr-for-selected="name">
                <mostly-slot slot="USER_MENU" model="[[actionContext]]"></mostly-slot>
                <mostly-menu-item name="logout" label="app.user.signOut" link="[[_logout()]]"></mostly-menu-item>
              </iron-selector>
            </div>

          </iron-pages>

          <div class="toggle" on-tap="_closeDrawer" hidden$="[[!drawerOpened]]">
            <iron-icon icon="icons:chevron-left" ></iron-icon>
          </div>
        </div>
      </div>

      <!-- pages -->
      <paper-header-panel slot="main" mode="seamed">
        <iron-pages id="pages" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">

          <mostly-slot slot="PAGES" model="[[actionContext]]"></mostly-slot>

          <mostly-home name="home" tasks="[[tasks]]"></mostly-home>

          <playing-browser name="browse" id="browser"
                  document="[[currentDocument]]"
                  selected-tab="{{docAction}}"
                  clipboard="[[clipboard]]"></playing-browser>

          <playing-search-page name="search"
                  id="searchResults"
                  heading="searchResults.results"
                  search-form="[[searchForm]]"
                  show-saved-search-actions></playing-search-page>

          <playing-play-page name="play"
                  selected="[[selectedPlayTab]]"
                  entity="[[entity]]"
                  on-error="_onError"></playing-play-page>

          <mostly-admin name="admin"
                  user="[[currentUser]]"
                  selected="[[selectedAdminTab]]"
                  entity="[[entity]]"
                  on-error="_onError"></mostly-admin>

          <playing-profile name="profile"
                  selected="[[selectedProfileTab]]"
                  user="[[currentUser]]"></playing-profile>

          <mostly-themes name="themes" selected="[[selectedProfileTab]]"></mostly-themes>

          <mostly-page name="error">
            <div slot="header"></div>
            <div>
              <mostly-card>
                <mostly-error id="error"></mostly-error>
              </mostly-card>
            </div>
          </mostly-page>

        </iron-pages>

        <paper-icon-button id="drawerToggle" icon="menu" on-tap="_openDrawer" hidden$="[[!isNarrow]]"></paper-icon-button>
        <mostly-suggester id="suggester"></mostly-suggester>

      </paper-header-panel>
    </paper-drawer-panel>

    <playing-document-create-button class$="[[page]]" parent="[[currentParent]]" hidden$="[[isMobile]]"></playing-document-create-button>
    <playing-document-create-popup id="importPopup" parent="[[currentParent]]" default-path="/"></playing-document-create-popup>

    <mostly-progress-indicator visible="[[loading]]"></mostly-progress-indicator>

    <paper-toast id="toast">
      <paper-icon-button icon="icons:close" on-tap="_dismissToast" hidden$="[[!_dismissible]]"></paper-icon-button>
    </paper-toast>

    <mostly-keys keys="/ ctrl+space s" on-pressed="_showSuggester"></mostly-keys>
    <mostly-keys keys="d" on-pressed="showHome"></mostly-keys>
    <mostly-keys keys="m" on-pressed="_focusMenu"></mostly-keys>

    <mostly-mobile-banner document="[[currentDocument]]" is-mobile="{{isMobile}}"></mostly-mobile-banner>

  </template>

  <script>
    Polymer({
      is: 'mostly-app',
      behaviors: [Mostly.RoutingBehavior, Mostly.I18nBehavior, Mostly.FiltersBehavior],
      properties: {
        productName: {
          type: String,
          value: 'Mostly'
        },

        baseUrl: {
          type: String,
          value: '/',
          observer: '_baseUrlChanged'
        },

        loading: {
          type: Boolean,
          value: false
        },

        page: {
          type: String,
          observer: '_pageChanged'
        },

        selectedTab: String,
        selectedAdminTab: String,
        selectedPlayTab: String,

        currentDocument: {
          type: Object,
          observer: '_documentChanged'
        },

        currentParent: Object,
        docId: String,
        docPath: String,
        docAction: {
          type: String,
          value: 'view'
        },

        entity: Object,

        searchName: {
          type: String,
          observer: '_updateSearch',
        },

        searchForm: {
          type: Object,
          observer: '_searchFormChanged'
        },

        processes: Array,

        processCount: Number,

        clipboardCount: Number,

        drawerWidth: {
          type: String,
          value: '52px'
        },

        drawerOpened: {
          type: Boolean,
          value: false
        },

        keyEventTarget: {
          type: Object,
          value: function() {
            return document.body;
          }
        },

        currentProcess: {
          type: Object,
          value: null
        },

        currentUser: {
          type: Object,
          observer: '_observeCurrentUser'
        },

        userWorkspace: {
          type: String
        },

        actionContext: {
          type: Object,
          computed: '_actionContext(currentDocument, currentUser, ' +
            'processes, currentProcess, processCount, ' +
            'clipboard, clipboardDocCount, userWorkspace)'
        },

        clipboard: {
          type: Object,
          value: null
        },

        clipboardDocCount: {
          type: Number,
          value: 0,
          notify: true
        },

        _dismissible: {
          type: Boolean,
          value: false
        }
      },

      listeners: {
        'document-updated': 'refresh',
        'create-document': '_showDocumentCreationWizard',
        'document-created': '_handleDocumentCreated',
        'workflowStarted': '_refreshAndFetchProcesses',
        'workflowAbandoned': '_refreshAndFetchProcesses',
        'workflowProcessProcess': '_workflowProcessProcess',
        'workflowProcessProcessed': '_refreshAndFetchProcesses',
        'added-to-clipboard': '_onAddedToClipboard',
        'add-to-clipboard': '_onAddToClipboard',
        'added-to-collection': '_documentAddedToCollection',
        'removed-from-clipboard': '_documentRemovedFromClipboard',
        'removed-from-collection': '_documentRemovedFromCollection',
        'file-deleted': '_documentFileDeleted',
        'added-to-favorites': '_documentAddedToFavorites',
        'removed-from-favorites': '_documentRemovedFromFavorites',
        'document-subscribed': '_documentSubscribed',
        'document-unsubscribed': '_documentUnsubscribed',
        'document-locked': '_documentLocked',
        'document-unlocked': '_documentUnlocked',
        'theme-changed': '_themeChanged',
        'search-results': '_showSearchResults',
        'navigate': '_navigate',
        'collection-loaded': '_updateCollectionMenu',
        'notify': '_notify',
        'nx-clipboard-updated': '_clipboardUpdated',
        'document-deleted': '_documentDeleted',
        'document-untrashed': '_documentUntrashed',
        'bulk-documents-deleted': '_documentsDeleted',
        'bulk-documents-untrashed': '_documentsUntrashed',
        'bulk-documents-dropped': '_documentsDropped'
      },

      observers: ['_computeSharedActionContext(currentUser)'],

      ready: function() {
        this.importHref(this.resolveUrl('routing.html'));

        this.$.drawerPanel.closeDrawer();

        this.$.drawerPanel.$.drawer.addEventListener('transitionend', () => {
          this.$.drawerPanel.notifyResize();
        });

        window.addEventListener('unhandledrejection', e => {
          var reason = (e.reason && e.reason.response) || e.reason;
          if (reason) {
            if (reason.status === 401) {
              // remove accessToken and login
              localStorage.removeItem('accessToken');
              var app = document.querySelector('playing-app');
              app.authenticated = false;
            }
            if (reason.status === 404) {
              console.error('not found 404', e.reason.data);
              this.showError(404, e.reason.message, this._errorUrl());
            }
          } else {
            console.error('unhandledrejection', e);
          }
        });

        window.addEventListener('bulk-documents-deleted', e => {
          this._fetchProcesses();
        });

        window.addEventListener('bulk-documents-deleted-error', e => {
          this._documentsDeletedError(e.detail.response, e.detail.documents);
        });

        // this.$.nxcon.connect().then(res => {
        //   this.currentUser = res;
        // });
      },

      refresh: function() {
        if (this.docPath && this.docPath.length > 0) {
          this.load('browse', this.docId, this.docPath, this.docAction);
        } else {
          page(this.baseUrl);
        }
      },

      loadProcess: function(id) {
        if (id && id.length > 0){
          this.loading = true;
          this.currentProcessId = id;
          this.$.process.get().then(resp => {
            this.currentProcess = resp.data;
            this.show('processes');
            this.loading = false;
          });
        } else {
          this.currentProcess = null;
          this.show('processes');
        }
      },

      load: function(page, id, path, action) {
        this.loading = true;
        this.docId = id;
        this.docPath = path;
        this.docAction = action;
        this.$.doc.get().then(resp => {
          var doc = resp.data;
          if (doc) {
            if (this.docId && !doc.isVersion) {
              this.docId = '';
              this.docPath = doc.path;
              this.navigateTo('browse', doc.path);
            } else {
              var recent = this.$$('#recent');
              if (recent) {
                recent.add(doc);
              }
              if (this.hasFacet(doc, 'Folderish')) {
                this.currentParent = doc;
              } else if (doc.metadata && doc.metadata.breadcrumbs) {
                this.currentParent = doc.metadata.breadcrumbs.slice(-1)[0];
              }
              this.set('currentDocument', doc); // trigger
              this.loading = false;
              this.show(page);
            }
          } else {
            console.error('load document is null', id, path);
            this.showError(404, this.i18n('browse.error'), path);
          }
        }).catch(err => {
          console.error('load error', err.status, err.message);
          this.showError(err.status, this.i18n('browse.error'), err.message);
        });
      },

      showError: function(code, msg, url) {
        this.loading = false;
        var errorEl = this.$.error;
        errorEl.code = code;
        errorEl.message = msg;
        errorEl.url = url;
        console.error('showError', errorEl);
        this.show('error');
      },

      show: function(page) {
        this.page = page; // trigger _pageChanged
        this._updateTitle();
      },

      _updateTitle: function() {
        var title = [];
        switch (this.page) {
          case 'browse':
            if (this.currentDocument && this.currentDocument.title) {
              title.push(this.currentDocument.title);
              if (this.currentDocument.type === 'Collections') {
                title.push(this.i18n('app.title.collections'));
              } else if (this.hasFacet(this.currentDocument, 'Collection')) {
                if (this.currentDocument.type === 'Favorites') {
                  title.push(this.i18n('app.title.favorites'));
                } else {
                  title.push(this.i18n('app.title.collection'));
                }
              }
            }
            break;

          case 'search':
            if (this.searchForm) {
              if (this.searchForm.selectedSearch && this.searchForm.selectedSearch.title) {
                title.push(this.searchForm.selectedSearch.title);
              } else if (this.searchForm.searchName) {
                title.push(this.i18n('app.title.search.' + this.searchForm.searchName));
              }
            }
            title.push(this.i18n('app.title.search'));
            break;

          case 'tasks':
            if (this.currentTask) {
              title.push(this.i18n(this.currentTask.workflowModelName));
              title.push(this.i18n(this.currentTask.name));
            } else {
              title.push(this.i18n('app.title.' + this.page));
            }
            break;

          case 'admin':
            if (this.selectedAdminTab) {
              title.push(this.i18n('app.title.admin.' + this.selectedAdminTab));
            }
            title.push(this.i18n('app.title.' + this.page));
            break;

          case 'play':
            if (this.selectedPlayTab) {
              title.push(this.i18n('app.title.play.' + this.selectedPlayTab));
            }
            title.push(this.i18n('app.title.' + this.page));
            break;

          default:
            title.push(this.i18n('app.title.' + this.page));
        }
        title.push(this.productName);
        document.title = title.join(' - ');
      },

      _documentChanged: function(newVal, oldVal) {
        console.log('app:_documentChanged', newVal, oldVal);
      },

      _baseUrlChanged: function() {
        Mostly.RoutingBehavior.baseUrl = this.baseUrl;
      },

      _logo: function(baseUrl) {
        return 'bower_components/mostly-elements/themes/' + (localStorage.getItem('theme') || 'default') + '/logo.png';
      },

      showHome: function(e) {
        if (e && e.detail && e.detail.keyboardEvent) {
          e.detail.keyboardEvent.preventDefault();
        }
        this.show('home');
      },

      _actionContext: function() {
        console.log('app::actionContext document', this.currentDocument && this.currentDocument.path);
        return {
          document: this.currentDocument,
          user: this.currentUser,
          processCount: this.processCount,
          processes: this.processes,
          currentProcess: this.currentProcess,
          clipboardDocCount: this.clipboardDocCount,
          clipboard: this.clipboard,
          searchForm: this.searchForm,
          actionContext: this.actionContext,
          userWorkspace: this.userWorkspace
        };
      },

      _computeSharedActionContext: function() {
        if (this.currentUser) {
          window.Mostly.slots.setSharedModel({ user: this.currentUser });
        }
      },

      _focusMenu: function(e) {
        e.detail.keyboardEvent.preventDefault();
        this.$.menu.focus();
      },

      _showSuggester: function(e) {
        e.detail.keyboardEvent.preventDefault();
        this.$.suggester.toggle();
      },

      _showDocumentCreationWizard: function(e) {
        if (e.detail.keyboardEvent) {
          if (e.detail.keyboardEvent.ctrlKey || e.detail.keyboardEvent.metaKey) {
            return;
          } else {
            e.detail.keyboardEvent.preventDefault();
          }
        }

        if (e.detail.files) {
          this.$.importPopup.toggleDialogImport(e.detail.files);
        } else if (e.detail.type) {
          this.$.importPopup.toggleDialogCreate(e.detail.type);
        } else {
          this.$.importPopup.toggleDialog();
        }
      },

      _navigate: function(e) {
        if (e.detail.doc) {
          this.navigateTo('browse', e.detail.doc.path);
          if (e.detail.isFromCollection) {
            this.$$('#collectionsForm').displayMembers(e.detail.srcDoc, e.detail.index);
          }
        }
      },

      // lookup the search
      _updateSearch: function() {
        this.searchForm = this.$$("[search-name='" + this.searchName + "']");
        if (this.searchForm && this._searchOnLoad) {
          this.searchForm._search();
          this._searchOnLoad = false;
        }
      },

      _searchFormChanged: function(newVal, oldVal) {
        console.log('app::_searchFormChanged', newVal);
      },

      /**
       * Gets current search form (if any) and refreshes it. Useful to handle file
       * deletion/restore when the user has a search page open.
       */
      _refreshSearch: function() {
        this.searchForm = this.$$("[search-name='" + this.searchName + "']");
        if (this.searchForm) {
          this.searchForm.refresh();
        }
      },

      _updateCollectionMenu: function(e) {
        if (e.detail.provider) {
          this.$$('#collectionsForm').loadCollection(e.detail.collection, e.detail.provider);
        }
      },

      _showSearchResults: function(e) {
        var target = e.composedPath()[0];
        this.navigateTo('search', target.searchName);
      },

      _toggleDrawer: function(e) {
        if (this._selected === e.detail.selected && this.drawerOpened) {
          this._closeDrawer();
        } else {
          this._openDrawer();
        }
        this._selected = e.detail.selected;
      },

      _openDrawer: function() {
        this.drawerWidth = '350px';
        this.drawerOpened = true;
        var drawerPanel = this.$.drawerPanel;
        if (drawerPanel.narrow) {
          drawerPanel.openDrawer();
        }
        if (!this.selectedTab){
          var drawer = this.$['drawer-pages'];
          drawer.selectIndex(0);
          this.selectedTab = drawer.selected
        }
      },

      _closeDrawer: function() {
        this.drawerWidth = '52px';
        this.drawerOpened = false;
        this.$.drawerPanel.closeDrawer();
      },

      _fetchProcesses: function() {
        if (this.$.processes) {
          this.$.processes.params = {};
          this.$.processes.get().then(resp => {
            this.processes = resp.data;
            this.processCount = this.processes.length; // trigger _actionContext
          }).catch(error => {
            console.log("processes request failed: " + error);
          });
        }
      },

      _refreshAndFetchProcesses: function() {
        // let's refresh the current document since it might have been changed (ex: state and version)
        this.refresh();
        this._fetchProcesses();
      },

      _workflowProcessProcess: function(e) {
        this.navigateTo('processes', e.detail.id);
      },

      _onAddedToClipboard: function(e){
        this._toast(
          this.i18n(e.detail.docIds && e.detail.docIds.length > 1
            ? 'app.documents.addedToClipboard' : 'app.document.addedToClipboard')
        );
      },

      _onAddToClipboard: function(e) {
        if (e.detail.documents && this.clipboard) {
          this.clipboard.add(e.detail.documents)
        }
      },

      _observeCurrentUser: function() {
        if (this.currentUser) {
          this.$.userWorkspace.execute().then(response => {
            this.userWorkspace = response.data && response.data.path;
          });
          this._fetchProcesses();
        }
      },

      _displayUser: function(user) {
        if (user) {
          var result = '';
          if (user['nickname']) {
            result += user['nickname'];
          }
          if (result.length === 0 && user['username']) {
            result = user['username'];
          }
          if (result.length === 0) {
            result = user.id;
          }
          return result;
        }
      },

      _toast: function(text) {
        this._notify({ detail: { message: text } });
      },

      _documentAddedToCollection: function(e) {
        this._toast(
          this.i18n(e.detail.docIds? 'app.documents.addedToCollection' : 'app.document.addedToCollection')
        );
      },

      _documentRemovedFromCollection: function() {
        this._toast(this.i18n('app.document.removedFromCollection'));
      },

      _documentRemovedFromClipboard: function() {
        this._toast(this.i18n('app.document.removedFromClipboard'));
      },

      _documentAddedToFavorites: function() {
        this._toast(this.i18n('app.document.addedToFavorites'));
      },

      _documentRemovedFromFavorites: function() {
        this._toast(this.i18n('app.document.removedFromFavorites'));
      },

      _documentSubscribed: function() {
        this._toast(this.i18n('app.document.subscribed'));
      },

      _documentUnsubscribed: function() {
        this._toast(this.i18n('app.document.unsubscribed'));
      },

      _documentLocked: function() {
        this._toast(this.i18n('app.document.locked'));
      },

      _documentUnlocked: function() {
        this._toast(this.i18n('app.document.unlocked'));
      },

      _documentDeleted: function(e) {
        this._toast(this.i18n('app.document.deleted.' + (e.detail.error? 'error' : 'success') ));

        this._removeFromClipboard([e.detail.doc]);

        // navigate to parent
        if (!e.detail.error) {
          var metadata = e.detail.doc.metadata;
          if (metadata) {
            if (e.detail.doc.parent) {
              this._navigate({ detail: { doc: e.detail.doc.parent } });
            } else if (metadata.breadcrumbs) {
              var breadcrumbs = metadata.breadcrumbs;
              if (breadcrumbs.length > 1) {
                this._navigate({ detail: { doc: breadcrumbs[breadcrumbs.length - 2] } });
              }
            }
          }
          this._refreshSearch();
        }
      },

      _documentUntrashed: function(e) {
        this._toast(this.i18n('app.document.untrashed.' + (e.detail.error? 'error' : 'success') ));
        if (e.detail.doc && !e.detail.error) {
          this._navigate({ detail: { doc: e.detail.doc } });
          this._refreshSearch();
        }
      },

      _documentsDeletedError: function(err, documents){
        var errorMessage = this.i18n(documents && documents.length > 1
          ? 'app.documents.deleted.error' : 'app.document.deleted.error');

        switch (err.status){
          case 403: errorMessage = errorMessage + " " +  this.i18n('error.403'); break;
          default: break;
        }
        this._toast(errorMessage);
      },

      _documentsDeleted: function(e) {
        if (e.detail.error) {
          this._documentsDeletedError(e.detail.error.response, e.detail.documents);
        } else {
          this._removeFromClipboard(e.detail.documents);
          //this._fetchTasks();
          this._toast(this.i18n('app.documents.deleted.success'));
          this._refreshSearch();
        }
      },

      _documentsUntrashed: function(e) {
        this._toast(this.i18n('app.documents.untrashed.' + (e.detail.error? 'error' : 'success') ));
        this._refreshSearch();
      },

      _documentFileDeleted: function() {
        this._toast(this.i18n('app.document.fileDeleted'));
        this.fire('document-updated');
      },

      _themeChanged: function() {
        this._toast(this.i18n('themes.applying'));
        location.reload();
      },

      _handleDocumentCreated: function(e) {
        var data = e.detail.response.data
        if (data) {
          if (Array.isArray(data)) {
            this._toast(this.i18n('app.createdDocuments', data.length));
          } else {
            this._toast(this.i18n('app.createdDocument', data.type.toLowerCase() + ' ' + data.title));
          }
        }
      },

      _documentsDropped: function(e) {
        if (this.hasFacet(e.detail.targetDocument, 'Collection')) {
          this._addDocumentsToCollection(e.detail.documents, e.detail.targetDocument);
        } else {
          this._moveDocumentsToContainer(e.detail.documents, e.detail.targetDocument);
        }
      },

      _moveDocumentsToContainer: function(e) {
        this.$.moveDocumentsOp.op = 'clipboards/move';
        this.$.moveDocumentsOp.input = e.detail.targetDocument.id;
        this.$.moveDocumentsOp.params = {
          target: e.detail.targetDocument.id,
          documents: e.detail.documents.map(doc => doc.id)
        };
        this.$.moveDocumentsOp.execute().then(() => {
          this.fire('document-updated');
          this._toast(this.i18n('app.documents.moved', e.detail.documents.length, e.detail.targetDocument.title));
        });
      },

      _addDocumentsToCollection: function(documents, target) {
        this.$.addToCollectionOp.op = 'AddToCollection';
        this.$.addToCollectionOp.params = {
          subjects: documents.map(doc => doc.id),
          collect: target.id
        };
        this.$.addToCollectionOp.execute().then(() => {
          this.fire('document-updated');
          this._toast(
            this.i18n(documents.length === 1? 'app.document.addedToCollection' : 'app.documents.addedToCollection')
          );
        });
      },

      _hasAdministrationPermissions: function(user) {
        return user.isAdministrator || this.isMember(user, 'powerusers');
      },

      _errorUrl: function() {
        return window.location.href;
      },

      _onError: function(e) {
        this.showError(e.detail.code, e.detail.message, this._errorUrl());
      },

      _logout: function(url) {
        return this.$.nxcon.url + '/logout';
      },

      _pageChanged: function(page) {
        if (page !== null) {
          var el = this.$.pages.selectedItem;
          // selectItem might be undefined
          // https://github.com/PolymerElements/iron-pages/issues/52
          if (!el) {
            el = Polymer.dom(this.$.pages).querySelector('[name=' + page + ']');
          }
          if (!el) {
            this.showError(404, '', page);
            return;
          }
          // check if page is already registered (vulcanized)
          console.log('page changed => ', page, el.tagName);
          if (!(el instanceof HTMLElement)) {
            this.loading = true;
            var tag = el.tagName.toLowerCase();
            this.importHref(this.resolveUrl(tag + '.html'), this._loadElements, () => {
              this.showError(404, '', tag + '.html');
            }, true);
          } else {
            // load elements if navigating directly to pages
            // which are not lazy loaded (e.g. searches)
            this._loadElements();
          }
        }
      },

      _loadElements: function() {
        Polymer.RenderStatus.afterNextRender(this, () => {
          this.importHref(this.resolveUrl('elements.html'), function() {
            this.loading = false;
          });
        });
      },

      _notify: function(e) {
        var options = e.detail;
        if (options.close) {
          this.$.toast.close();
        } else if (options.message) {
          this.$.toast.text = options.message;
          this.$.toast.duration = options.duration? options.duration : 3000;
          this.set('_dismissible', !!options.dismissible);
          this.$.toast.open();
        }
      },

      _dismissToast: function() {
        this.$.toast.toggle();
      },

      _clipboardUpdated: function(e) {
        this.clipboard = this.clipboard || this.$$('#clipboard');
        this.set('clipboardDocCount', e.detail.docCount);
      },

      _removeFromClipboard: function(docs) {
        if (Array.isArray(docs)) {
          docs.forEach(doc => {
            this.clipboard.remove(doc);
          });
        }
      }

    });
  </script>

</dom-module>