@internetarchive/bookreader 5.0.0-106 → 5.0.0-108

package/src/{BookNavigator → ia-bookreader}/visual-adjustments/visual-adjustments.js

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from "lit/directives/repeat.js";
+import { sharedStyles } from '../../css/sharedStyles.js';
 import "@internetarchive/icon-magnify-minus/icon-magnify-minus.js";
 import "@internetarchive/icon-magnify-plus/icon-magnify-plus.js";
 
@@ -184,7 +185,7 @@ export class IABookVisualAdjustments extends LitElement {
   }
 
   static get styles() {
-    return css`
+    const main = css`
     :host {
       display: block;
       height: 100%;
@@ -280,19 +281,8 @@ export class IABookVisualAdjustments extends LitElement {
     button:hover {
       background-color: rgba(255, 255, 255, 0.1);
     }
-
-    .sr-only {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      padding: 0 !important;
-      margin: -1px !important;
-      overflow: hidden !important;
-      clip: rect(0 0 0 0) !important;
-      white-space: nowrap !important;
-      border: 0 !important;
-    }
-`;
+    `;
+    return [sharedStyles, main];
   }
 }
 customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);

package/src/{BookNavigator → plugins}/bookmarks/bookmark-button.js

@@ -56,7 +56,7 @@ export default class BookmarkButton extends LitElement {
     const position = this.side || 'right';
     return html`
       <button title=${this.title} @click=${this.handleClick} class=${position}>
-        <icon-bookmark state=${this.state}></icon-bookmark>
+        <icon-bookmark state=${this.state} aria-hidden="true"></icon-bookmark>
       </button>
     `;
   }

package/src/{BookNavigator → plugins}/bookmarks/bookmark-edit.js

@@ -1,7 +1,7 @@
 import { repeat } from 'lit/directives/repeat.js';
 import { css, html, LitElement, nothing } from 'lit';
-import bookmarkColorsCSS from '../assets/bookmark-colors.js';
-import buttonCSS from '../assets/button-base.js';
+import bookmarkColorsCSS from './bookmark-colors.js';
+import buttonCSS from '../../css/button-base.js';
 
 export class IABookmarkEdit extends LitElement {
   static get properties() {
@@ -64,12 +64,12 @@ export class IABookmarkEdit extends LitElement {
 
   bookmarkColor(color) {
     return html`
-      <li>
+      <div class="color-option">
         <input type="radio" name="color" id="color_${color.id}" .value=${color.id} @change=${() => this.changeColorTo(color.id)} ?checked=${this.bookmark.color === color.id}>
-        <label for="color_${color.id}">
-          <icon-bookmark class=${color.className}></icon-bookmark>
+        <label for="color_${color.id}" title=${color.className}>
+          <icon-bookmark class=${color.className} aria-hidden="true"></icon-bookmark>
         </label>
-      </li>
+      </div>
     `;
   }
 
@@ -87,18 +87,18 @@ export class IABookmarkEdit extends LitElement {
       ${this.renderHeader ? IABookmarkEdit.headerSection : nothing}
       ${this.showBookmark ? this.bookmarkTemplate : nothing}
       <form action="" method="put" @submit=${this.emitSaveEvent}>
+        <label for="note">Note <small>(optional)</small></label>
+        <textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
         <fieldset>
-          <label for="note">Note <small>(optional)</small></label>
-          <textarea rows="4" cols="80" name="note" id="note" @change=${this.updateNote}>${this.bookmark.note}</textarea>
-          <label for="color">Bookmark color</label>
-          <ul>
+          <legend>Bookmark color</legend>
+          <div class="color-options">
             ${repeat(this.bookmarkColors, color => color.id, this.bookmarkColor.bind(this))}
-          </ul>
-          <div class="actions">
-            <button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
-            <input class="ia-button" type="submit" value="Save">
           </div>
         </fieldset>
+        <div class="actions">
+          <button type="button" class="ia-button cancel" @click=${this.emitDeleteEvent}>Delete</button>
+          <input class="ia-button" type="submit" value="Save">
+        </div>
       </form>
     `;
   }
@@ -128,11 +128,11 @@ export class IABookmarkEdit extends LitElement {
     }
 
     fieldset {
-      padding: 2rem 0 0 0;
+      padding: 0;
       border: none;
     }
 
-    label {
+    label, legend {
       display: block;
       font-weight: bold;
     }
@@ -152,21 +152,24 @@ export class IABookmarkEdit extends LitElement {
       resize: vertical;
     }
 
-    ul {
-      display: grid;
-      grid-template-columns: repeat(3, auto);
-      grid-gap: 0 2rem;
-      justify-content: start;
-      padding: 1rem 0 0 0;
-      margin: 0 0 2rem 0;
-      list-style: none;
+    .color-options {
+      display: flex;
+      gap: 10px;
+    }
+
+    .color-option {
+      position: relative;
     }
 
-    li input {
-      display: none;
+    .color-option input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
     }
 
-    li label {
+    .color-option label {
       display: block;
       min-width: 50px;
       padding-top: .4rem;
@@ -176,10 +179,19 @@ export class IABookmarkEdit extends LitElement {
       cursor: pointer;
     }
 
-    li input:checked + label {
+    .color-option input:checked + label {
       border-color: var(--primaryTextColor);
     }
 
+    .color-option input:focus + label {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .color-option input:focus:not(:focus-visible) + label {
+      outline: none;
+    }
+
     input[type="submit"] {
       background: var(--primaryCTAFill);
       border-color: var(--primaryCTABorder);
@@ -202,6 +214,7 @@ export class IABookmarkEdit extends LitElement {
     }
 
     .actions {
+      margin-top: 20px;
       display: grid;
       grid-template-columns: auto auto;
       grid-gap: 0 1rem;

package/src/{BookNavigator → plugins}/bookmarks/bookmarks-list.js

@@ -2,7 +2,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { css, html, LitElement, nothing } from 'lit';
 import './bookmark-edit.js';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
-import bookmarkColorsCSS from '../assets/bookmark-colors.js';
+import bookmarkColorsCSS from './bookmark-colors.js';
 
 export class IABookmarksList extends LitElement {
   static get properties() {
@@ -99,24 +99,23 @@ export class IABookmarksList extends LitElement {
     const { className } = this.bookmarkColorInfo(bookmark.color);
     const activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
     return html`
-      <li
-        @click=${() => this.emitSelectedEvent(bookmark)}
-        tabindex="0"
-        data-pageIndex=${bookmark.id}
-      >
+      <li data-pageIndex=${bookmark.id}>
         <div class="separator"></div>
-        <div class="content ${activeClass}">
-          <button
-            class="edit"
-            @click=${e => this.editBookmark(e, bookmark)}
-            title="Edit this bookmark"
-          >
-            <ia-icon-edit-pencil></ia-icon-edit-pencil>
-          </button>
-          <h4>
-            <icon-bookmark class=${className}></icon-bookmark>
-            <span> Page ${bookmark.page}</span>
-          </h4>
+        <div class="bookmark-card ${activeClass}">
+          <div class="bookmark-header" @click=${() => this.emitSelectedEvent(bookmark)}>
+            <button>
+              <icon-bookmark class=${className} aria-label="${className} bookmark"></icon-bookmark>
+              <span> Page ${bookmark.page}</span>
+            </button>
+            <button
+              class="edit"
+              @click=${e => this.editBookmark(e, bookmark)}
+              title="Edit this bookmark"
+              aria-expanded=${editMode ? 'true' : 'false'}
+            >
+              <ia-icon-edit-pencil aria-hidden="true"></ia-icon-edit-pencil>
+            </button>
+          </div>
           ${!editMode && bookmark.note ? html`<p>${bookmark.note}</p>` : nothing}
           ${editMode ? this.editBookmarkComponent : nothing}
         </div>
@@ -208,19 +207,24 @@ export class IABookmarksList extends LitElement {
         font-style: italic;
       }
 
-      h4 {
+      .bookmark-header {
+        display: flex;
+        align-items: center;
         margin: 0;
         font-size: 1.4rem;
+        font-weight: bold;
       }
-      h4 * {
-        display: inline-block;
-      }
-      h4 icon-bookmark {
-        vertical-align: bottom;
+
+      .bookmark-header > button:first-child {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px;
       }
-      h4 span {
-        vertical-align: top;
-        padding-top: 1%;
+
+      ia-icon-edit-pencil {
+        pointer-events: none;
       }
 
       p {
@@ -243,38 +247,34 @@ export class IABookmarksList extends LitElement {
         display: none;
       }
       li {
-        cursor: pointer;
-        outline: none;
         position: relative;
       }
-      li .content {
-        padding: 2px 0 4px 2px;
+
+      li .bookmark-card {
         border: var(--activeBorderWidth) solid transparent;
-        padding: .2rem 0 .4rem .2rem;
+        border-radius: 4px;
       }
-      li .content.active {
+
+      li .bookmark-card.active {
         border: var(--activeBorderWidth) solid #538bc5;
       }
-      li button.edit {
-        padding: 5px 2px 0 0;
+
+      .bookmark-header button {
         background: transparent;
         cursor: pointer;
-        height: 40px;
-        width: 40px;
-        position: absolute;
-        right: 2px;
-        top: 2px;
-        text-align: right;
         -webkit-appearance: none;
         appearance: none;
-        outline: none;
         box-sizing: border-box;
         border: none;
+        padding: 0;
+        text-align: left;
       }
-      li button.edit > * {
-        display: block;
-        height: 100%;
-        width: 100%;
+
+      li button.edit {
+        height: 34px;
+        width: 34px;
+        flex-shrink: 0;
+        text-align: center;
       }
     `;
 

package/src/{BookNavigator → plugins}/bookmarks/bookmarks-loginCTA.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import buttonStyles from '../assets/button-base.js';
+import buttonStyles from '../../css/button-base.js';
 
 class BookmarksLogin extends LitElement {
   static get properties() {

package/src/{BookNavigator → plugins}/bookmarks/bookmarks-provider.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import '../delete-modal-actions.js';
+import './delete-modal-actions.js';
 import './bookmark-button.js';
 import './ia-bookmarks.js';
 

package/src/{BookNavigator → plugins}/bookmarks/ia-bookmarks.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css, render } from 'lit';
 // eslint-disable-next-line no-unused-vars
 import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
-import buttonStyles from '../assets/button-base.js';
+import buttonStyles from '../../css/button-base.js';
 import './bookmarks-loginCTA.js';
 
 const api = {
@@ -109,6 +109,7 @@ class IABookmarks extends LitElement {
 
     this.bookmarkColors = [{
       id: 0,
+      // FIXME: This is also used as the aria-label
       className: 'red',
     }, {
       id: 1,
@@ -500,7 +501,6 @@ class IABookmarks extends LitElement {
     return html`
       <button
         class="ia-button primary"
-        tabindex="-1"
         ?disabled=${this.shouldEnableAddBookmarkButton}
         @click=${this.addBookmark}>
         Add bookmark

package/src/{BookNavigator → plugins}/search/search-results.js

@@ -2,12 +2,17 @@
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { css, html, LitElement, nothing } from 'lit';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator.js';
-import checkmarkIcon from '../assets/icon_checkmark.js';
-import closeIcon from '../assets/icon_close.js';
-import buttonCSS from '../assets/button-base.js';
+import checkmarkIconTemplate from '../../css/icon_checkmark.js';
+import closeIconTemplate from '@internetarchive/icon-close/index.js';
+import buttonCSS from '../../css/button-base.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { sharedStyles } from '../../css/sharedStyles.js';
+import { svgToDataUrl } from '../../util/lit.js';
 /** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
+const checkmarkIconData = svgToDataUrl(checkmarkIconTemplate);
+const closeIconData = svgToDataUrl(closeIconTemplate);
+
 export class IABookSearchResults extends LitElement {
   static get properties() {
     return {
@@ -284,7 +289,7 @@ export class IABookSearchResults extends LitElement {
         border-radius: 2px;
       }
       :checked + label.checkbox:after {
-        background-image: url('${checkmarkIcon}');
+        background-image: url('${checkmarkIconData}');
       }
 
       label.checkbox[for="all_files"]:after {
@@ -298,7 +303,7 @@ export class IABookSearchResults extends LitElement {
         -webkit-appearance: textfield;
         width: 100%;
         height: 3rem;
-        padding: 0 1.5rem;
+        padding: 0 10px;
         box-sizing: border-box;
         font: normal 1.6rem "Helvetica qNeue", Helvetica, Arial, sans-serif;
         border-radius: 1.5rem;
@@ -310,10 +315,11 @@ export class IABookSearchResults extends LitElement {
       [type="search"]::-webkit-search-cancel-button {
         width: 18px;
         height: 18px;
+        margin-right: -5px;
         -webkit-appearance: none;
         appearance: none;
-        -webkit-mask: url('${closeIcon}') 0 0 no-repeat;
-        mask: url('${closeIcon}') 0 0 no-repeat;
+        -webkit-mask: url('${closeIconData}') 0 0 no-repeat;
+        mask: url('${closeIconData}') 0 0 no-repeat;
         -webkit-mask-size: 100%;
         mask-size: 100%;
         background: #fff;
@@ -376,20 +382,8 @@ export class IABookSearchResults extends LitElement {
         height: 40px;
         margin: 0 auto;
       }
-
-      .sr-only {
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        padding: 0 !important;
-        margin: -1px !important;
-        overflow: hidden !important;
-        clip: rect(0 0 0 0) !important;
-        white-space: nowrap !important;
-        border: 0 !important;
-      }
     `;
-    return [buttonCSS, mainCSS];
+    return [sharedStyles, buttonCSS, mainCSS];
   }
 }
 customElements.define('ia-book-search-results', IABookSearchResults);

package/src/util/lit.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+
+/**
+ * Convert an SVG string to a data URL usable in CSS
+ * @param {import('lit').TemplateResult} svgTemplate - The SVG template to convert
+ * @returns {import('lit').CSSResult}
+ */
+export function svgToDataUrl(svgTemplate) {
+  const svgString = (
+    // No clue why, on prod the template from the close icon comes in as a class instead of a TemplateResult.
+    // Might be a discrepancy with lit versions.
+    svgTemplate.prototype?.render() ||
+    // Otherwise it's a normal TemplateResult.
+    svgTemplate.strings[0]
+  );
+  return css([`data:image/svg+xml;base64,${btoa(svgString.replace(/\n/g, ' '))}`]);
+}

package/src/BookNavigator/assets/ia-logo.js

@@ -1,17 +0,0 @@
-import { svg } from 'lit';
-
-export default svg`
-  <svg class="ia-logo" width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitleID logoDescID">
-    <title id="logoTitleID">Internet Archive logo</title>
-    <desc id="logoDescID">A line drawing of the Internet Archive headquarters building façade.</desc>
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <mask id="mask-2" fill="white">
-        <path d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z" id="path-1"></path>
-      </mask>
-      <use fill="#FFFFFF" xlink:href="#path-1"></use>
-      <g mask="url(#mask-2)" fill="#FFFFFF">
-        <path d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z" id="swatch"></path>
-      </g>
-    </g>
-  </svg>
-`;

package/src/BookNavigator/assets/icon_checkmark.js

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-
-// Original SVG object for reference
-// <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>
-
-export default css`data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+`;

package/src/BookNavigator/assets/icon_close.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-
-export default css`data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==`;