sc-suttaplex.html

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="/bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="/bower_components/paper-styles/paper-styles.html">
<link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-card/paper-card.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/paper-badge/paper-badge.html">
<link rel="import" href="/bower_components/paper-badge/paper-badge.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">


<link rel="import" href="/img/sc-svg-icons.html">
<link rel="import" href="/elements/addons/sc-sutta-note.html">
<link rel="import" href="/elements/menus/language-menu.html">
<link rel="import" href="/elements/menus/more-par-menu.html">
<link rel="import" href="/elements/suttaplex/sc-view-parallels.html">

<!--
  Suttaplex card
-->
<dom-module id="sc-suttaplex" attributes="open url">
  <template>
    <style include="sc-suttaplex-styles">
      .heading {
        cursor: pointer;
      }

      .suttaplex-head-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      h1, h2, h3 {
        margin: 0;
      }

      paper-card.suttaplex {
        border-radius: 0;
        border-top: 1px solid var(--paper-grey-300);
        display: block;
      }

      paper-card.suttaplex .card-content {
        padding-top: 24px;
        padding-bottom: 1px;
      }

      .suttaplex-heading {
        @apply --paper-font-headline;
        @apply --sc-serif-font;
      }

      .suttaplex-nerdy-row {
        @apply --paper-font-body2;
        color: var(--secondary-text-color);
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
      }

      .suttaplex-nerdy-row span {
        margin-right: 24px;
      }

      .suttaplex-description {
        @apply --sc-paper-font-body;
        overflow: hidden;
      }

      paper-card.suttaplex .card-actions {
        padding: 0 16px 8px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-top: 0;
      }

      .card-actions-left {
        display: inline-block;
      }

      .card-actions-right {
        display: inline-block;
      }

      .languagedrop {
        display: inline-block;
        vertical-align: middle;
        margin: -18px 4px 0;
        padding: 0 8px;
      }

      paper-badge {
        --paper-badge-background: var(--paper-green-a700);
      }

      #moremenu {
        visibility: hidden;
      }

      summary::-webkit-details-marker {
        color: var(--paper-grey-300);
      }

      details {
        display: inline-block;
      }

      details p {
        @apply --paper-font-body1;
        @apply --shadow-elevation-3dp;
        position: absolute;
        z-index: 200;
        background-color: #fff;
        padding: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        margin: 0 48px 0 0;
        white-space: normal;
      }

      paper-menu-button {
        padding: 0;
      }

      .notfound {
        @apply --paper-font-display1;
      }

      .hide-element {
        display: none;
      }

      .difficulty-icon {
        padding-right: 8px;
      }

      .toggle-button {
        min-width: 40px;
        align-self: flex-end;
      }

      .more-info {
        align-self: flex-end;
      }

      .paper-badge {
        --paper-badge-margin-left: -15px;
        --paper-badge-margin-bottom: -10px;
      }

      .segmented-border {
        padding: 5px;
        border: 1px dashed var(--paper-grey-700);
        border-radius: 5px;
      }

      .display-inline {
        display: inline-block;
      }

      .volpage-biblio-info-summary {
        outline: none;
        cursor: pointer;
      }

      .volpage-biblio-info {
        @apply --paper-font-body1;
        position: absolute;
        z-index: 200;
        background-color: #fff;
        @apply --shadow-elevation-3dp;
        padding: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        margin: 0 48px 0 0;
        white-space: normal;
      }

      .no-margin {
        margin: 0;
      }

      .toast {
        --paper-toast-color: white;
        text-align: center;
        font-size: 20px;
        margin-left: calc(50vw - 150px);
      }

      .success-toast {
        --paper-toast-background-color: green;
      }

      .error-toast {
        --paper-toast-background-color: red;
      }

      @media screen and (max-width: 596px) {
        .right-elements {
          display: flex;
          flex-flow: column;
        }

        #copy_menu {
          order: 1;
        }

        #parallels_toggle {
          order: 0;
        }
      }

    </style>

    <paper-card class="suttaplex" id="[[item.uid]]">
      <div class="card-content">

        <div class="suttaplex-head-container">
          <h3 class="suttaplex-heading">[[_computeMainHeading(item)]]</h3>
          <div class$="difficulty-icon [[item.difficulty.name]]"
               title="Recommended for [[item.difficulty.name]] students">
            <iron-icon icon="[[_computeLevel(item.difficulty.name)]]"></iron-icon>
          </div>
        </div>

        <div class="suttaplex-nerdy-row">
          <span title="Original title" class$="[[_computeHideOriginalTitle(item)]]">[[item.original_title]]</span>
          <span title="SuttaCentral ID" class$="[[_computeHideUID(item)]]">[[item.acronym]]</span>
          <template is="dom-if" if="[[item.volpages]]">
            <template is="dom-if" if=[[!item.biblio]]>
              <span class="book" class="no-margin"><iron-icon icon="book"></iron-icon></span>
              <span class="vol-page" title="Volume and page">[[item.volpages]]</span>
            </template>
            <template is="dom-if" if=[[item.biblio]]>
              <details class="display-inline">
                <summary class="volpage-biblio-info-summary">
                  <span class="book" class="no-margin"><iron-icon icon="book"></iron-icon></span>
                  <span class="vol-page" title="Volume and page">[[item.volpages]]</span>
                </summary>
                <p class="volpage-biblio-info" inner-h-t-m-l="[[item.biblio]]"></p>
              </details>
            </template>
          </template>
        </div>

        <p class$="suttaplex-description [[_computeHide(item.blurb)]]" title="Description"
           inner-h-t-m-l="[[item.blurb]]"></p>
      </div>

      <div class="card-actions">
        <div class="card-actions-left">
          <template is="dom-repeat" items="[[item.translations]]" as="translation">
            <template is="dom-if" if="{{ _isChosenLang(translation.lang) }}">
              <paper-button flat title$="Go  to a translation by [[translation.author]]">
                <a href="[[_computeApiUrlEndpoint(item.uid, translation.author)]]"
                   class$="{{ _translationBorder(translation.segmented) }}">[[translation.author]]</a>
              </paper-button>
            </template>
          </template>
          <div class="languagedrop">
            <language-menu language-choice="[[item.translations]]" title-label="More"
                           input-language="[[inputLanguage]]" original-language="[[item.root_lang]]"
                           root-id="[[item.uid]]" on-paper-dropdown-close="_changeItemZIndex"
                           on-paper-dropdown-open="_changeItemZIndex"></language-menu>
          </div>
        </div>

        <div class="right-elements">
          <template is="dom-if" if="[[parallelsOpened]]">
            <paper-menu-button id="copy_menu" horizontal-align="right" role="group" aria-haspopup="true"
                                vertical-align="top" aria-disabled="false">
                <paper-icon-button class="more-info" slot="dropdown-trigger" icon="icons:more-vert" role="button"
                                    tabindex="0" aria-disabled="false"></paper-icon-button>
                <div slot="dropdown-content"></div>
                <paper-listbox slot="dropdown-content" tabindex="0" role="listbox">
                    <more-par-menu tabindex="0" item="[[item]]" ></more-par-menu>
                </paper-listbox>
              </paper-menu-button>
          </template>

          <paper-icon-button id="parallels_toggle" class="toggle-button" icon="[[toggleIcon]]"
                             on-tap="_toggleParallelsOpened">
          </paper-icon-button>
          <paper-badge for="parallels_toggle" label="[[item.parallel_count]]" class="paper-badge"
                       title="Number of parallels"></paper-badge>
        </div>
      </div>

      <template is="dom-if" if="[[parallelsOpened]]">
        <iron-collapse no-animation id="collapse" opened="{{ parallelsOpened }}">
          <sc-view-parallels root-lang="[[item.root_lang]]" item-uid="[[item.uid]]"></sc-view-parallels>
        </iron-collapse>
      </template>

    </paper-card>
    <paper-toast id="success_toast" class="toast success-toast" text="[[toastMessage]]" duration=3000></paper-toast>
    <paper-toast id="error_toast" class="toast error-toast" text="[[toastMessage]]" duration=3000></paper-toast>
  </template>

  <script>
      class SCSuttaplex extends Polymer.Element {
          static get is() {
              return 'sc-suttaplex'
          }

          static get properties() {
              return {
                  toggleIcon: {
                      type: String,
                      computed: '_computeToggleIcon(parallelsOpened)'
                  },
                  parallelsOpened: {
                      type: Boolean,
                      value: false,
                      observer: '_parallelsOpenedChanged'
                  },
                  opened: {
                      type: Boolean,
                      reflectToAttribute: true,
                      notify: true
                  },
                  _toggleIcon: {
                      type: String,
                      computed: '_computeToggleIcon(opened)'
                  },
                  _toggleMoreIcon: {
                      type: String,
                      computed: '_computeToggleMoreIcon(opened)'
                  },
                  inputLanguage: {
                      type: String,
                      value: 'en' // Temporary hardcoded
                  },
                  level: String,
                  // The suttaplex item
                  item: Object,
                  toastMessage: {
                    type: String
                }
              }
          }

          ready() {
            super.ready();
            this.addEventListener('par-menu-copied', (e) => {
              this.toastMessage = e.detail.message;
              const success = e.detail.success;
              if (success) {
                this.$.success_toast.open();
              } else {
                this.$.error_toast.open();
              }
              copy_menu.opened = false;  // Close dropdown after the copy action.
            })
          }

          _changeItemZIndex(e) {
              let node = this.parentNode;
              if(node.style === undefined){
                 return;
              }
              if (e.type.endsWith('open')) {
                  node.style['z-index'] = 100;
              } else if (node.style['z-index'] == 100 && this.parallelsOpened === false) {
                  node.style['z-index'] = null;
              }
          }

          _parallelsOpenedChanged(e) {
            const type = e ? 'open' : 'close';
            const event_mock = { type: type };
            this._changeItemZIndex(event_mock);
          }

          // general function to hide or display various elements.
          _computeHide(checkText) {
              return (!checkText) ? 'hide-element' : '';
          }

          _computeHideUID(item) {
              return (item.translated_title || item.original_title) ? '' : 'hide-element'
          }

          _computeHideOriginalTitle(item) {
              return item.translated_title ? '' : 'hide-element'
          }

          // returns the relevant icon for the expander
          _computeToggleIcon(parallelsOpened) {
              return parallelsOpened ? 'icons:expand-less' : 'icons:expand-more';
          }

          // shows the more-par menu when the expander is opened.
          _computeToggleMoreIcon(opened) {
              return opened ? '' : 'moremenu';
          }

          // adds the 'tree'-icons to denote difficulty level if any.
          _computeLevel(level) {
              return level ? 'sc-svg-icons:' + level : '';
          }

          // Computes API endpoint URL for given translation
          _computeApiUrlEndpoint(uid, author) {
              return `/sutta/${uid}/?author=${author}`;
          }

          _isChosenLang(lang) {
              return lang === this.inputLanguage;
          }

          _toggleParallelsOpened() {
              this.parallelsOpened = !this.parallelsOpened;
              this.dispatchEvent(new CustomEvent('iron-resize', {composed: true, bubbles: true}));
          }

          _computeMainHeading(item) {
              if (item.translated_title) {
                  return item.translated_title;
              } else if (item.original_title) {
                  return item.original_title;
              } else {
                  return item.acronym;
              }
          }

          _translationBorder(segmented) {
              return segmented ? 'segmented-border' : '';
          }
      }

      customElements.define(SCSuttaplex.is, SCSuttaplex);
  </script>
</dom-module>