@internetarchive/ia-item-navigator 1.0.2 → 1.0.4-a1

package/dist/src/menu-slider/styles/menu-slider.js

@@ -0,0 +1,129 @@
+import { css } from 'lit';
+const menuButtonWidth = css `42px`;
+const sliderWidth = css `var(--menuWidth, 320px)`;
+const transitionTiming = css `var(--animationTiming, 200ms)`;
+export default css `
+  .main {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .animate {
+    transition: transform ${transitionTiming} ease-out;
+  }
+
+  .menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: ${sliderWidth};
+    padding: 0.5rem 0.5rem 0 0;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+    color: var(--primaryTextColor);
+    background: var(--menuSliderBg);
+    transform: translateX(calc(${sliderWidth} * -1));
+  }
+
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
+  button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header {
+    margin: 0 0 0.5rem 0;
+  }
+
+  header * {
+    margin: 0;
+    display: inline-block;
+  }
+  header button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header.with-secondary-action .details {
+    width: 80%;
+  }
+
+  header .details {
+    font-weight: bold;
+    width: 88%;
+  }
+
+  header .custom-action > *,
+  button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    --iconWidth: var(--menuSliderHeaderIconWidth);
+    --iconHeight: var(--menuSliderHeaderIconHeight);
+  }
+
+  header .custom-action,
+  button.close {
+    position: absolute;
+  }
+  button.close {
+    right: 0.5rem;
+  }
+
+  button.close * {
+    float: right;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: ${menuButtonWidth};
+    z-index: 1;
+    transform: translateX(calc(${sliderWidth} * -1));
+    transition: transform ${transitionTiming} ease-out;
+    background: var(--activeButtonBg);
+    border-right: 0.2rem solid;
+    border-color: var(--subpanelRightBorderColor);
+    padding: 0.5rem 0 0 0.5rem;
+  }
+
+  .open {
+    transform: translateX(0);
+  }
+
+  .menu-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    background: var(--menuSliderBg);
+  }
+  .menu-list li {
+    margin-bottom: 0.2rem;
+  }
+
+  .content section {
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .content .selected-menu {
+    overflow: auto;
+    height: inherit;
+    position: relative;
+  }
+
+  .content .selected-menu > * {
+    display: block;
+    padding-bottom: 3rem;
+    position: relative;
+  }
+`;
+//# sourceMappingURL=menu-slider.js.map

package/dist/src/menu-slider/styles/menu-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-slider.js","sourceRoot":"","sources":["../../../../src/menu-slider/styles/menu-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;AAClC,MAAM,WAAW,GAAG,GAAG,CAAA,yBAAyB,CAAC;AACjD,MAAM,gBAAgB,GAAG,GAAG,CAAA,+BAA+B,CAAC;AAE5D,eAAe,GAAG,CAAA;;;;;;;;4BAQU,gBAAgB;;;;;;;;aAQ/B,WAAW;;;;;;iCAMS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4DhC,eAAe;;iCAEM,WAAW;4BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst menuButtonWidth = css`42px`;\nconst sliderWidth = css`var(--menuWidth, 320px)`;\nconst transitionTiming = css`var(--animationTiming, 200ms)`;\n\nexport default css`\n  .main {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  .animate {\n    transition: transform ${transitionTiming} ease-out;\n  }\n\n  .menu {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: ${sliderWidth};\n    padding: 0.5rem 0.5rem 0 0;\n    box-sizing: border-box;\n    font-size: 1.4rem;\n    color: var(--primaryTextColor);\n    background: var(--menuSliderBg);\n    transform: translateX(calc(${sliderWidth} * -1));\n  }\n\n  .menu > button.close {\n    right: 0.7rem;\n  }\n\n  button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header {\n    margin: 0 0 0.5rem 0;\n  }\n\n  header * {\n    margin: 0;\n    display: inline-block;\n  }\n  header button {\n    outline: none;\n    cursor: pointer;\n  }\n\n  header.with-secondary-action .details {\n    width: 80%;\n  }\n\n  header .details {\n    font-weight: bold;\n    width: 88%;\n  }\n\n  header .custom-action > *,\n  button.close {\n    padding: 0;\n    background-color: transparent;\n    border: 0;\n    --iconWidth: var(--menuSliderHeaderIconWidth);\n    --iconHeight: var(--menuSliderHeaderIconHeight);\n  }\n\n  header .custom-action,\n  button.close {\n    position: absolute;\n  }\n  button.close {\n    right: 0.5rem;\n  }\n\n  button.close * {\n    float: right;\n  }\n\n  .content {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: ${menuButtonWidth};\n    z-index: 1;\n    transform: translateX(calc(${sliderWidth} * -1));\n    transition: transform ${transitionTiming} ease-out;\n    background: var(--activeButtonBg);\n    border-right: 0.2rem solid;\n    border-color: var(--subpanelRightBorderColor);\n    padding: 0.5rem 0 0 0.5rem;\n  }\n\n  .open {\n    transform: translateX(0);\n  }\n\n  .menu-list {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    background: var(--menuSliderBg);\n  }\n  .menu-list li {\n    margin-bottom: 0.2rem;\n  }\n\n  .content section {\n    height: 100%;\n    position: relative;\n    width: 100%;\n  }\n\n  .content .selected-menu {\n    overflow: auto;\n    height: inherit;\n    position: relative;\n  }\n\n  .content .selected-menu > * {\n    display: block;\n    padding-bottom: 3rem;\n    position: relative;\n  }\n`;\n"]}

package/index.ts

@@ -1 +1,3 @@
 export { ItemNavigator } from './src/item-navigator';
+export { MenuButton } from './src/menu-slider/menu-button';
+export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "1.0.2",
+  "version": "1.0.4-a1",
   "description": "Internet Archive's Item Navigator, visually explore an item's contents.",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@internetarchive/ia-menu-slider": "^2.0.1",
+    "@internetarchive/icon-collapse-sidebar": "^1.3.4",
     "@internetarchive/icon-ellipses": "^1.3.4",
     "@internetarchive/icon-share": "^1.3.4",
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
@@ -75,7 +75,7 @@
       ],
       "import/no-unresolved": "off",
       "import/extensions": [
-        "warn",
+        "off",
         {
           "js": "never",
           "ts": "never"

package/src/item-navigator.ts

@@ -13,10 +13,10 @@ import {
   SharedResizeObserver,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
-import '@internetarchive/ia-menu-slider';
-
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
+
+import './menu-slider/ia-menu-slider';
 import './loader';
 
 import {

package/src/menu-slider/ia-menu-slider.ts

@@ -0,0 +1,161 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuSliderCSS from './styles/menu-slider';
+import '@internetarchive/icon-collapse-sidebar';
+import './menu-button';
+
+const sliderEvents = {
+  closeDrawer: 'menuSliderClosed',
+};
+
+@customElement('ia-menu-slider')
+export class IaMenuSlider extends LitElement {
+  static get styles() {
+    return menuSliderCSS;
+  }
+
+  @property({ type: Array }) menus = [];
+
+  @property({ type: Boolean }) open = false;
+
+  @property({ type: Boolean }) manuallyHandleClose = false;
+
+  @property({ type: String }) selectedMenu = '';
+
+  @property({ type: Object }) selectedMenuAction = nothing;
+
+  @property({ type: Boolean }) animateMenuOpen = false;
+
+  updated() {
+    const { actionButton } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
+    if (actionButtonHasChanged) {
+      this.selectedMenuAction = actionButton || nothing;
+    }
+  }
+
+  /**
+   * Event handler, captures state of selected menu
+   */
+  setSelectedMenu({ detail }: CustomEvent) {
+    const { id } = detail;
+    this.selectedMenu = this.selectedMenu === id ? '' : id;
+    const { actionButton } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    this.selectedMenuAction = actionButton || nothing;
+  }
+
+  /**
+   * closes menu drawer
+   */
+  closeMenu() {
+    if (!this.manuallyHandleClose) {
+      this.open = false;
+    }
+    const { closeDrawer } = sliderEvents;
+    const drawerClosed = new CustomEvent(closeDrawer, {
+      detail: this.selectedMenuDetails,
+    });
+    this.dispatchEvent(drawerClosed);
+  }
+
+  get selectedMenuDetails() {
+    const selectedMenu = this.menus.find(
+      menu => (menu as any).id === this.selectedMenu
+    );
+    return selectedMenu;
+  }
+
+  get selectedMenuComponent() {
+    const menuItem = this.selectedMenuDetails;
+    return menuItem && (menuItem as any)?.component
+      ? (menuItem as any).component
+      : html``;
+  }
+
+  /* render */
+
+  get sliderDetailsClass() {
+    const animate = this.animateMenuOpen ? 'animate' : '';
+    const state = this.open ? 'open' : '';
+    return `${animate} ${state}`;
+  }
+
+  get selectedMenuClass() {
+    return this.selectedMenu ? 'open' : '';
+  }
+
+  get menuItems() {
+    return this.menus.map(
+      (menu: Record<string, any>) =>
+        html`
+          <li>
+            <menu-button
+              @menuTypeSelected=${this.setSelectedMenu}
+              .icon=${menu.icon}
+              .label=${menu.label}
+              .menuDetails=${menu.menuDetails}
+              .id=${menu.id}
+              .selected=${menu.id === this.selectedMenu}
+              .followable=${menu.followable}
+              .href=${menu.href}
+            ></menu-button>
+          </li>
+        `
+    );
+  }
+
+  get renderMenuHeader() {
+    const { label = '', menuDetails = '' } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
+    const actionBlock = this.selectedMenuAction
+      ? html`<span class="custom-action">${this.selectedMenuAction}</span>`
+      : nothing;
+    return html`
+      <header class="${headerClass}">
+        <div class="details">
+          <h3>${label}</h3>
+          <span class="extra-details">${menuDetails}</span>
+        </div>
+        ${actionBlock} ${this.closeButton}
+      </header>
+    `;
+  }
+
+  get closeButton() {
+    return html`
+      <button
+        class="close"
+        aria-label="Close this menu"
+        @click=${this.closeMenu}
+      >
+        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
+      </button>
+    `;
+  }
+
+  /** @inheritdoc */
+  render() {
+    return html`
+      <div class="main">
+        <div class="menu ${this.sliderDetailsClass}">
+          ${this.closeButton}
+          <ul class="menu-list">
+            ${this.menuItems}
+          </ul>
+          <div
+            class="content ${this.selectedMenuClass}"
+            @menuTypeSelected=${this.setSelectedMenu}
+          >
+            ${this.renderMenuHeader}
+            <section>
+              <div class="selected-menu">${this.selectedMenuComponent}</div>
+            </section>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/menu-slider/menu-button.ts

@@ -0,0 +1,80 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuButtonCSS from './styles/menu-button';
+
+@customElement('menu-button')
+export class MenuButton extends LitElement {
+  static get styles() {
+    return menuButtonCSS;
+  }
+
+  @property({ type: String }) icon = '';
+
+  @property({ type: String }) href = '';
+
+  @property({ type: String }) label = '';
+
+  @property({ type: String }) menuDetails = '';
+
+  @property({ type: String }) id = '';
+
+  @property({ type: Boolean }) selected = false;
+
+  @property({ type: Boolean }) followable = false;
+
+  onClick(e: Event) {
+    e.preventDefault();
+    this.dispatchMenuTypeSelectedEvent();
+  }
+
+  dispatchMenuTypeSelectedEvent() {
+    this.dispatchEvent(
+      new CustomEvent('menuTypeSelected', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          id: this.id,
+        },
+      })
+    );
+  }
+
+  get buttonClass() {
+    return this.selected ? 'selected' : '';
+  }
+
+  get iconClass() {
+    return this.selected ? 'active' : '';
+  }
+
+  get menuItem() {
+    return html`
+      <span class="icon ${this.iconClass}"> ${this.icon} </span>
+      <span class="label">${this.label}</span>
+      <span class="menu-details">${this.menuDetails}</span>
+    `;
+  }
+
+  get linkButton() {
+    return html`
+      <a
+        href="${this.href}"
+        class="menu-item ${this.buttonClass}"
+        @click=${this.followable ? undefined : this.onClick}
+        >${this.menuItem}</a
+      >
+    `;
+  }
+
+  get clickButton() {
+    return html`
+      <button class="menu-item ${this.buttonClass}" @click=${this.onClick}>
+        ${this.menuItem}
+      </button>
+    `;
+  }
+
+  render() {
+    return this.href ? this.linkButton : this.clickButton;
+  }
+}

package/src/menu-slider/styles/menu-button.ts

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+
+export default css`
+  a {
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  .menu-item {
+    display: inline-flex;
+    width: 100%;
+    padding: 0;
+    font-size: 1.6rem;
+    text-align: left;
+    background: transparent;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  button.menu-item {
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0;
+  }
+
+  .menu-item:focus {
+    outline: none;
+  }
+
+  .label {
+    display: var(--menuButtonLabelDisplay, none);
+    padding: 0;
+    font-weight: 400;
+    color: var(--primaryTextColor);
+    text-align: left;
+    vertical-align: middle;
+    margin-left: 1rem;
+  }
+
+  .menu-details {
+    color: var(--primaryTextColor);
+    display: inline-block;
+    margin-left: 0.5rem;
+    font-style: italic;
+    font-size: 1.5rem;
+  }
+
+  .menu-item > .icon {
+    position: relative;
+    display: inline-flex;
+    z-index: 2;
+    min-width: 4.2rem;
+    max-width: 4.2rem;
+    height: 4.2rem;
+    vertical-align: middle;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .menu-item.selected .icon {
+    background-color: var(--activeButtonBg);
+    border-radius: 1rem 0 0 1rem;
+  }
+
+  .icon .fill-color {
+    fill: #999;
+  }
+
+  .icon.active .fill-color {
+    fill: #fff;
+  }
+`;

package/src/menu-slider/styles/menu-slider.ts

@@ -0,0 +1,130 @@
+import { css } from 'lit';
+
+const menuButtonWidth = css`42px`;
+const sliderWidth = css`var(--menuWidth, 320px)`;
+const transitionTiming = css`var(--animationTiming, 200ms)`;
+
+export default css`
+  .main {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .animate {
+    transition: transform ${transitionTiming} ease-out;
+  }
+
+  .menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: ${sliderWidth};
+    padding: 0.5rem 0.5rem 0 0;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+    color: var(--primaryTextColor);
+    background: var(--menuSliderBg);
+    transform: translateX(calc(${sliderWidth} * -1));
+  }
+
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
+  button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header {
+    margin: 0 0 0.5rem 0;
+  }
+
+  header * {
+    margin: 0;
+    display: inline-block;
+  }
+  header button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header.with-secondary-action .details {
+    width: 80%;
+  }
+
+  header .details {
+    font-weight: bold;
+    width: 88%;
+  }
+
+  header .custom-action > *,
+  button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    --iconWidth: var(--menuSliderHeaderIconWidth);
+    --iconHeight: var(--menuSliderHeaderIconHeight);
+  }
+
+  header .custom-action,
+  button.close {
+    position: absolute;
+  }
+  button.close {
+    right: 0.5rem;
+  }
+
+  button.close * {
+    float: right;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: ${menuButtonWidth};
+    z-index: 1;
+    transform: translateX(calc(${sliderWidth} * -1));
+    transition: transform ${transitionTiming} ease-out;
+    background: var(--activeButtonBg);
+    border-right: 0.2rem solid;
+    border-color: var(--subpanelRightBorderColor);
+    padding: 0.5rem 0 0 0.5rem;
+  }
+
+  .open {
+    transform: translateX(0);
+  }
+
+  .menu-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    background: var(--menuSliderBg);
+  }
+  .menu-list li {
+    margin-bottom: 0.2rem;
+  }
+
+  .content section {
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+
+  .content .selected-menu {
+    overflow: auto;
+    height: inherit;
+    position: relative;
+  }
+
+  .content .selected-menu > * {
+    display: block;
+    padding-bottom: 3rem;
+    position: relative;
+  }
+`;