@internetarchive/ia-item-navigator - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/src/loader.d.ts

 import { LitElement } from 'lit';
 export declare class IAItemNavLoader extends LitElement {
     loaderMessage: string;
-    get bookIconSvg(): import("lit-html").TemplateResult<2>;
-    get icon(): import("lit-html").TemplateResult<2>;
-    get loader(): import("lit-html").TemplateResult<2>;
-    render(): import("lit-html").TemplateResult<1>;
+    get bookIconSvg(): import("lit").TemplateResult<2>;
+    get icon(): import("lit").TemplateResult<2>;
+    get loader(): import("lit").TemplateResult<2>;
+    render(): import("lit").TemplateResult<1>;
     static get styles(): import("lit").CSSResult;
 }

dist/src/menu-slider/ia-menu-slider.d.ts

@@ -26,7 +26,7 @@ import { LitElement } from 'lit';
     get selectedMenuClass(): "" | "open";
-    get menuItems(): import("lit-html").TemplateResult<1>[];
-    get renderMenuHeader(): import("lit-html").TemplateResult<1>;
-    get closeButton(): import("lit-html").TemplateResult<1>;
+    get menuItems(): import("lit").TemplateResult<1>[];
+    get renderMenuHeader(): import("lit").TemplateResult<1>;
+    get closeButton(): import("lit").TemplateResult<1>;
     /** @inheritdoc */
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

dist/src/menu-slider/menu-button.d.ts

@@ -15,6 +15,6 @@ import { LitElement } from 'lit';
     get iconClass(): "" | "active";
-    get menuItem(): import("lit-html").TemplateResult<1>;
-    get linkButton(): import("lit-html").TemplateResult<1>;
-    get clickButton(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    get menuItem(): import("lit").TemplateResult<1>;
+    get linkButton(): import("lit").TemplateResult<1>;
+    get clickButton(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

dist/src/menus/share-panel.d.ts

 import { CSSResult, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import '@internetarchive/icon-share/icon-share';
+import '@internetarchive/icon-twitter/icon-twitter';
+import '@internetarchive/icon-facebook/icon-facebook';
+import '@internetarchive/icon-tumblr/icon-tumblr';
+import '@internetarchive/icon-pinterest/icon-pinterest';
+import '@internetarchive/icon-email/icon-email';
 import '@internetarchive/icon-link/icon-link';
-import '@internetarchive/icon-share/icon-share';
-import type Provider from './share-providers/provider';
+type ShareOption = {
+    name: string;
+    icon: TemplateResult | string;
+    url: string;
+};
 export declare const iauxShareIcon: TemplateResult;
@@ -12,3 +21,3 @@ export declare class IauxSharingOptions extends LitElement {
     identifier: string;
-    sharingOptions: Provider[];
+    sharingOptions: ShareOption[];
     type: string;
@@ -19,8 +28,5 @@ renderHeader: boolean;
     loadProviders(): void;
-    get sharingItems(): TemplateResult<1>[];
-    get embedOption(): TemplateResult<1>;
-    get iframeEmbed(): TemplateResult<1>;
+    get iframeEmbed(): string;
     get bbcodeEmbed(): string;
     get helpURL(): string;
-    toggleEmbedOptions(e: Event): void;
     get header(): TemplateResult<1> | typeof nothing;
@@ -31,1 +37,2 @@ render(): TemplateResult<1>;
 }
+export {};

dist/src/menus/share-panel.js

 import { __decorate } from "tslib";
 /* eslint-disable lit-a11y/click-events-have-key-events */
 /* eslint-disable lit-a11y/list */
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import '@internetarchive/icon-share/icon-share';
+import '@internetarchive/icon-twitter/icon-twitter';
+import '@internetarchive/icon-facebook/icon-facebook';
+import '@internetarchive/icon-tumblr/icon-tumblr';
+import '@internetarchive/icon-pinterest/icon-pinterest';
+import '@internetarchive/icon-email/icon-email';
 import '@internetarchive/icon-link/icon-link';
-import '@internetarchive/icon-share/icon-share';
-import EmailProvider from './share-providers/email';
-import FacebookProvider from './share-providers/facebook';
-import PinterestProvider from './share-providers/pinterest';
-import TumblrProvider from './share-providers/tumblr';
-import TwitterProvider from './share-providers/twitter';
-const copyToClipboard = (options) => {
-    const currentTarget = options.currentTarget;
+const copyToClipboard = (event) => {
+    const currentTarget = event.currentTarget;
     const textarea = currentTarget.querySelector('textarea');
@@ -48,43 +46,64 @@ const note = currentTarget.querySelector('small');
     loadProviders() {
-        const { baseHost, creator, description, identifier, type, fileSubPrefix } = this;
-        const params = {
-            baseHost,
-            creator,
-            description,
-            identifier,
-            type,
-            fileSubPrefix,
-        };
+        let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;
+        if (this.fileSubPrefix) {
+            shareUrl += `/${this.fileSubPrefix}`;
+        }
+        const shareBlurb = [
+            this.description,
+            this.creator,
+            'Free Download, Borrow, and Streaming',
+            'Internet Archive',
+        ]
+            .filter(Boolean)
+            .join(' : ');
         this.sharingOptions = [
-            new TwitterProvider(params),
-            new FacebookProvider(params),
-            new TumblrProvider(params),
-            new PinterestProvider(params),
-            new EmailProvider(params),
+            {
+                name: 'Twitter',
+                icon: html `<ia-icon-twitter></ia-icon-twitter>`,
+                url: `https://twitter.com/intent/tweet?${new URLSearchParams({
+                    url: shareUrl,
+                    text: shareBlurb,
+                    via: 'internetarchive',
+                })}`,
+            },
+            {
+                name: 'Facebook',
+                icon: html `<ia-icon-facebook></ia-icon-facebook>`,
+                url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({
+                    u: shareUrl,
+                })}`,
+            },
+            {
+                name: 'Tumblr',
+                icon: html `<ia-icon-tumblr></ia-icon-tumblr>`,
+                url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams({
+                    posttype: 'link',
+                    canonicalUrl: shareUrl,
+                    title: shareBlurb,
+                })}`,
+            },
+            {
+                name: 'Pinterest',
+                icon: html `<ia-icon-pinterest></ia-icon-pinterest>`,
+                url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams({
+                    url: shareUrl,
+                    description: shareBlurb,
+                })}`,
+            },
+            {
+                name: 'Email',
+                icon: html `<ia-icon-email></ia-icon-email>`,
+                url: `mailto:?${new URLSearchParams({
+                    subject: shareBlurb,
+                    body: shareUrl,
+                })}`,
+            },
         ];
     }
-    get sharingItems() {
-        return this.sharingOptions.map(option => html `<li>
-          <a
-            class="${ifDefined(option.class)}"
-            href="${option.url}"
-            target="_blank"
-          >
-            ${option.icon} ${option.name}
-          </a>
-        </li>`);
-    }
-    get embedOption() {
-        return html `<li>
-      <a href="#" @click=${this.toggleEmbedOptions}>
-        <ia-icon-link></ia-icon-link>
-        Get an embeddable link
-      </a>
-    </li>`;
-    }
     get iframeEmbed() {
-        return html `&lt;iframe
-    src="https://${this.baseHost}/embed/${this.identifier}" width="560"
-    height="384" frameborder="0" webkitallowfullscreen="true"
-    mozallowfullscreen="true" allowfullscreen&gt;&lt;/iframe&gt;`;
+        return `<iframe
+      src="https://${this.baseHost}/embed/${this.identifier}"
+      width="560" height="384" frameborder="0"
+      webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen
+    ></iframe>`;
     }
@@ -97,6 +116,2 @@ get bbcodeEmbed() {
     }
-    toggleEmbedOptions(e) {
-        e.preventDefault();
-        this.embedOptionsVisible = !this.embedOptionsVisible;
-    }
     get header() {
@@ -109,28 +124,34 @@ const header = html `<header><h3>Share this ${this.type}</h3></header>`;
       ${this.header}
-      <ul>
-        ${this.sharingItems} ${this.embedOption}
-        <div
-          class=${classMap({ visible: this.embedOptionsVisible, embed: true })}
-        >
-          <h4>Embed</h4>
-          <div class="code" @click=${copyToClipboard}>
-            <textarea readonly>${this.iframeEmbed}</textarea>
-            <small>Copied to clipboard</small>
+      <main>
+        ${this.sharingOptions.map(option => html ` <a class="share-option" href="${option.url}" target="_blank">
+              ${option.icon} ${option.name}
+            </a>`)}
+        <details>
+          <summary class="share-option">
+            <ia-icon-link></ia-icon-link>
+            Get an embeddable link
+          </summary>
+          <div class="embed">
+            <h4>Embed</h4>
+            <div class="code" @click=${copyToClipboard}>
+              <textarea readonly>${this.iframeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <h4>
+              Embed for wordpress.com hosted blogs and archive.org item
+              &lt;description&gt; tags
+            </h4>
+            <div class="code" @click=${copyToClipboard}>
+              <textarea readonly>${this.bbcodeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <p>
+              Want more?
+              <a href=${this.helpURL}
+                >Advanced embedding details, examples, and help</a
+              >!
+            </p>
           </div>
-          <h4>
-            Embed for wordpress.com hosted blogs and archive.org item
-            &lt;description&gt; tags
-          </h4>
-          <div class="code" @click=${copyToClipboard}>
-            <textarea readonly>${this.bbcodeEmbed}</textarea>
-            <small>Copied to clipboard</small>
-          </div>
-          <p>
-            Want more?
-            <a href=${this.helpURL}
-              >Advanced embedding details, examples, and help</a
-            >!
-          </p>
-        </div>
-      </ul>
+        </details>
+      </main>
     `;
@@ -168,18 +189,16 @@ }
 
-      ul {
-        padding: 0 0 2rem 0;
-        list-style: none;
+      main {
+        padding: 1rem 0;
       }
 
-      li {
-        padding: 0 0 1rem 0;
-      }
-
-      li a {
+      .share-option {
+        display: block;
+        padding: 0.5rem 0;
         font-size: 1.6rem;
         text-decoration: none;
         color: var(--shareLinkColor);
+        cursor: pointer;
       }
 
-      li a * {
+      .share-option > * {
         display: inline-block;
@@ -194,8 +213,13 @@ padding: 0.2rem;
 
-      .embed {
+      /* Hide the triangle that appears on details tags */
+      summary::marker {
+        content: '';
+      }
+
+      summary::-webkit-details-marker {
         display: none;
       }
-      .embed.visible {
-        display: block;
-        width: 95%;
+
+      .embed {
+        padding-right: 5px;
       }
@@ -202,0 +226,0 @@

dist/test/iaux-sharing-options.test.js

@@ -30,4 +30,5 @@ import { html, fixture, expect } from '@open-wc/testing';
         await el.updateComplete;
-        el.sharingOptions.forEach(option => {
-            const button = el.shadowRoot && el.shadowRoot.querySelector(`a.${option.class}`);
+        el.sharingOptions.forEach((option, i) => {
+            var _a;
+            const button = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a')[i];
             expect(button).to.exist;
@@ -37,8 +38,2 @@ expect(button === null || button === void 0 ? void 0 : button.getAttribute('href')).to.equal(option.url);
     });
-    it('toggles visibility of embed options', async () => {
-        const el = (await fixture(container()));
-        el.toggleEmbedOptions(new Event('click'));
-        await el.updateComplete;
-        expect(el.embedOptionsVisible).to.equal(true);
-    });
     it('does not show internal header by default', async () => {
@@ -57,8 +52,5 @@ var _a;
     it('sets file subprefix to end of share URLs if present', async () => {
-        const optionalFileSubprefix = 'foo- bar - 123-';
-        const el = (await fixture(container(optionalFileSubprefix)));
+        const el = (await fixture(container('foo 123')));
         el.sharingOptions.forEach(option => {
-            if (option.name !== 'Tumblr') {
-                expect(option.url).to.contain(encodeURIComponent(optionalFileSubprefix));
-            }
+            expect(option.url).to.contain('foo+123');
         });
@@ -65,0 +57,0 @@ });

package.json

 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Internet Archive's Item Navigator, visually explore an item's contents.",
@@ -5,0 +5,0 @@ "repository": {

src/menus/share-panel.ts

 /* eslint-disable lit-a11y/click-events-have-key-events */
 /* eslint-disable lit-a11y/list */
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import {
@@ -15,15 +13,18 @@ css,
 import { customElement, property } from 'lit/decorators.js';
+import '@internetarchive/icon-share/icon-share';
+import '@internetarchive/icon-twitter/icon-twitter';
+import '@internetarchive/icon-facebook/icon-facebook';
+import '@internetarchive/icon-tumblr/icon-tumblr';
+import '@internetarchive/icon-pinterest/icon-pinterest';
+import '@internetarchive/icon-email/icon-email';
 import '@internetarchive/icon-link/icon-link';
-import '@internetarchive/icon-share/icon-share';
 
-import EmailProvider from './share-providers/email';
-import FacebookProvider from './share-providers/facebook';
-import PinterestProvider from './share-providers/pinterest';
-import TumblrProvider from './share-providers/tumblr';
-import TwitterProvider from './share-providers/twitter';
-import { ProviderParams } from './share-providers/share-provider-interface';
-import type Provider from './share-providers/provider';
+type ShareOption = {
+  name: string;
+  icon: TemplateResult | string;
+  url: string;
+};
 
-const copyToClipboard = (options: Record<any, any>) => {
-  const currentTarget = options.currentTarget as HTMLElement;
+const copyToClipboard = (event: MouseEvent) => {
+  const currentTarget = event.currentTarget as HTMLElement;
   const textarea = currentTarget.querySelector('textarea');
@@ -55,3 +56,3 @@ const note = currentTarget.querySelector('small') as any;
 
-  @property({ type: Array }) sharingOptions: Provider[] = [];
+  @property({ type: Array }) sharingOptions: ShareOption[] = [];
 
@@ -71,51 +72,70 @@ @property({ type: String }) type = '';
   loadProviders() {
-    const { baseHost, creator, description, identifier, type, fileSubPrefix } =
-      this;
-    const params = {
-      baseHost,
-      creator,
-      description,
-      identifier,
-      type,
-      fileSubPrefix,
-    } as unknown as ProviderParams;
+    let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;
+    if (this.fileSubPrefix) {
+      shareUrl += `/${this.fileSubPrefix}`;
+    }
+    const shareBlurb = [
+      this.description,
+      this.creator,
+      'Free Download, Borrow, and Streaming',
+      'Internet Archive',
+    ]
+      .filter(Boolean)
+      .join(' : ');
 
     this.sharingOptions = [
-      new TwitterProvider(params),
-      new FacebookProvider(params),
-      new TumblrProvider(params),
-      new PinterestProvider(params),
-      new EmailProvider(params),
+      {
+        name: 'Twitter',
+        icon: html`<ia-icon-twitter></ia-icon-twitter>`,
+        url: `https://twitter.com/intent/tweet?${new URLSearchParams({
+          url: shareUrl,
+          text: shareBlurb,
+          via: 'internetarchive',
+        })}`,
+      },
+      {
+        name: 'Facebook',
+        icon: html`<ia-icon-facebook></ia-icon-facebook>`,
+        url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({
+          u: shareUrl,
+        })}`,
+      },
+      {
+        name: 'Tumblr',
+        icon: html`<ia-icon-tumblr></ia-icon-tumblr>`,
+        url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(
+          {
+            posttype: 'link',
+            canonicalUrl: shareUrl,
+            title: shareBlurb,
+          },
+        )}`,
+      },
+      {
+        name: 'Pinterest',
+        icon: html`<ia-icon-pinterest></ia-icon-pinterest>`,
+        url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(
+          {
+            url: shareUrl,
+            description: shareBlurb,
+          },
+        )}`,
+      },
+      {
+        name: 'Email',
+        icon: html`<ia-icon-email></ia-icon-email>`,
+        url: `mailto:?${new URLSearchParams({
+          subject: shareBlurb,
+          body: shareUrl,
+        })}`,
+      },
     ];
   }
 
-  get sharingItems() {
-    return this.sharingOptions.map(
-      option =>
-        html`<li>
-          <a
-            class="${ifDefined(option.class)}"
-            href="${option.url}"
-            target="_blank"
-          >
-            ${option.icon} ${option.name}
-          </a>
-        </li>`,
-    );
-  }
-
-  get embedOption() {
-    return html`<li>
-      <a href="#" @click=${this.toggleEmbedOptions}>
-        <ia-icon-link></ia-icon-link>
-        Get an embeddable link
-      </a>
-    </li>`;
-  }
-
   get iframeEmbed() {
-    return html`&lt;iframe
-    src="https://${this.baseHost}/embed/${this.identifier}" width="560"
-    height="384" frameborder="0" webkitallowfullscreen="true"
-    mozallowfullscreen="true" allowfullscreen&gt;&lt;/iframe&gt;`;
+    return `<iframe
+      src="https://${this.baseHost}/embed/${this.identifier}"
+      width="560" height="384" frameborder="0"
+      webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen
+    ></iframe>`;
   }
@@ -131,7 +151,2 @@
 
-  toggleEmbedOptions(e: Event) {
-    e.preventDefault();
-    this.embedOptionsVisible = !this.embedOptionsVisible;
-  }
-
   get header() {
@@ -145,28 +160,37 @@ const header = html`<header><h3>Share this ${this.type}</h3></header>`;
       ${this.header}
-      <ul>
-        ${this.sharingItems} ${this.embedOption}
-        <div
-          class=${classMap({ visible: this.embedOptionsVisible, embed: true })}
-        >
-          <h4>Embed</h4>
-          <div class="code" @click=${copyToClipboard}>
-            <textarea readonly>${this.iframeEmbed}</textarea>
-            <small>Copied to clipboard</small>
+      <main>
+        ${this.sharingOptions.map(
+          option =>
+            html` <a class="share-option" href="${option.url}" target="_blank">
+              ${option.icon} ${option.name}
+            </a>`,
+        )}
+        <details>
+          <summary class="share-option">
+            <ia-icon-link></ia-icon-link>
+            Get an embeddable link
+          </summary>
+          <div class="embed">
+            <h4>Embed</h4>
+            <div class="code" @click=${copyToClipboard}>
+              <textarea readonly>${this.iframeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <h4>
+              Embed for wordpress.com hosted blogs and archive.org item
+              &lt;description&gt; tags
+            </h4>
+            <div class="code" @click=${copyToClipboard}>
+              <textarea readonly>${this.bbcodeEmbed}</textarea>
+              <small>Copied to clipboard</small>
+            </div>
+            <p>
+              Want more?
+              <a href=${this.helpURL}
+                >Advanced embedding details, examples, and help</a
+              >!
+            </p>
           </div>
-          <h4>
-            Embed for wordpress.com hosted blogs and archive.org item
-            &lt;description&gt; tags
-          </h4>
-          <div class="code" @click=${copyToClipboard}>
-            <textarea readonly>${this.bbcodeEmbed}</textarea>
-            <small>Copied to clipboard</small>
-          </div>
-          <p>
-            Want more?
-            <a href=${this.helpURL}
-              >Advanced embedding details, examples, and help</a
-            >!
-          </p>
-        </div>
-      </ul>
+        </details>
+      </main>
     `;
@@ -206,18 +230,16 @@ }
 
-      ul {
-        padding: 0 0 2rem 0;
-        list-style: none;
+      main {
+        padding: 1rem 0;
       }
 
-      li {
-        padding: 0 0 1rem 0;
-      }
-
-      li a {
+      .share-option {
+        display: block;
+        padding: 0.5rem 0;
         font-size: 1.6rem;
         text-decoration: none;
         color: var(--shareLinkColor);
+        cursor: pointer;
       }
 
-      li a * {
+      .share-option > * {
         display: inline-block;
@@ -232,8 +254,13 @@ padding: 0.2rem;
 
-      .embed {
+      /* Hide the triangle that appears on details tags */
+      summary::marker {
+        content: '';
+      }
+
+      summary::-webkit-details-marker {
         display: none;
       }
-      .embed.visible {
-        display: block;
-        width: 95%;
+
+      .embed {
+        padding-right: 5px;
       }
@@ -240,0 +267,0 @@

test/iaux-sharing-options.test.ts

@@ -41,5 +41,4 @@ import { html, fixture, expect } from '@open-wc/testing';
 
-    el.sharingOptions.forEach(option => {
-      const button =
-        el.shadowRoot && el.shadowRoot.querySelector(`a.${option.class}`);
+    el.sharingOptions.forEach((option, i) => {
+      const button = el.shadowRoot?.querySelectorAll('a')[i];
       expect(button).to.exist;
@@ -50,11 +49,2 @@ expect(button?.getAttribute('href')).to.equal(option.url);
 
-  it('toggles visibility of embed options', async () => {
-    const el = (await fixture(container())) as IauxSharingOptions;
-
-    el.toggleEmbedOptions(new Event('click'));
-    await el.updateComplete;
-
-    expect(el.embedOptionsVisible).to.equal(true);
-  });
-
   it('does not show internal header by default', async () => {
@@ -73,15 +63,8 @@ const el = (await fixture(container())) as IauxSharingOptions;
   it('sets file subprefix to end of share URLs if present', async () => {
-    const optionalFileSubprefix = 'foo- bar - 123-';
-    const el = (await fixture(
-      container(optionalFileSubprefix),
-    )) as IauxSharingOptions;
+    const el = (await fixture(container('foo 123'))) as IauxSharingOptions;
 
     el.sharingOptions.forEach(option => {
-      if (option.name !== 'Tumblr') {
-        expect(option.url).to.contain(
-          encodeURIComponent(optionalFileSubprefix),
-        );
-      }
+      expect(option.url).to.contain('foo+123');
     });
   });
 });

No alert changes

Worsened metrics

Total package byte prevSize

400646

decreased by-5.56%

Number of package files

88

decreased by-24.79%

Lines of code

6107

decreased by-5.76%

No dependency changes