@internetarchive/bookreader 5.0.0-45 → 5.0.0-46-no-right-click

package/BookReaderDemo/demo-internetarchive.html

@@ -126,6 +126,11 @@
       const placeholder = document.querySelector('#placeholder');
       placeholder.innerHTML = 'Dependencies are complete, bookreader has loaded';
     });
+
+    // analytics stub
+    window.archive_analytics = {
+      send_event_no_sampling: (category, action, label) => console.log('~~~ NO SAMPLE EVENT CALLED: ', { category, action, label }),
+    }
   </script>
 
   <!-- IA fetch demo -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-45",
+  "version": "5.0.0-46-no-right-click",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing-helpers": "^2.1.2",
+    "@open-wc/testing-helpers": "^2.1.3",
     "@types/jest": "^27.5.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "8.2.5",

package/src/BookNavigator/book-navigator.js

@@ -443,6 +443,29 @@ export class BookNavigator extends LitElement {
       this.downloadableTypes = downloadURLs;
       this.bookIsRestricted = isRestricted;
     });
+    window.addEventListener('contextmenu', (e) => this.manageContextMenuVisibility(e), { capture: true });
+  }
+
+  /** Display an element's context menu */
+  manageContextMenuVisibility(e) {
+    if (window.archive_analytics) {
+      window.archive_analytics?.send_event_no_sampling(
+        'BookReader',
+        `contextmenu-${this.bookIsRestricted ? 'restricted' : 'unrestricted'}`,
+        e.target.classList.value
+      );
+    }
+    if (!this.bookIsRestricted) {
+      return;
+    }
+
+    const imagePane = e.target.classList.value.match(/BRscreen|BRpageimage/g);
+    if (!imagePane) {
+      return;
+    }
+
+    e.preventDefault();
+    return false;
   }
 
   loadSharedObserver() {

package/src/BookReader/Mode2Up.js

@@ -843,6 +843,13 @@ export class Mode2Up {
     this.pageContainers[this.br.twoPage.currentIndexR].$container.animate({width: '0px'}, speed, 'easeInSine', () => {
       this.br.$('BRgutter').css({left: `${gutter - this.br.twoPage.bookSpineDivWidth * 0.5}px`});
       $(this.br.leafEdgeTmp).animate({left: `${gutter - newWidthL - leafEdgeTmpW}px`}, speed, 'easeOutSine');
+
+      // Ensure the new left leaf is right-positioned before animating its width.
+      // Otherwise, it animates in the wrong direction.
+      this.pageContainers[newIndexL].$container.css({
+        right: `${$twoPageViewEl.prop('clientWidth') - gutter}px`,
+        left: ''
+      });
       this.pageContainers[newIndexL].$container.animate({width: `${newWidthL}px`}, speed, 'easeOutSine', () => {
         this.pageContainers[newIndexR].$container.css('zIndex', 2);
 

package/tests/jest/BookNavigator/book-navigator.test.js

@@ -13,8 +13,9 @@ import VolumesProvider from '@/src/BookNavigator/volumes/volumes-provider.js';
 import { ModalManager } from '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import '@/src/BookNavigator/book-navigator.js';
+import { sleep } from '@/src/BookReader/utils';
 
-const promise0 = () => new Promise(res => setTimeout(res, 0));
+const promise0 = () => new Promise((res) => setTimeout(res, 0));
 
 const container = (sharedObserver = null) => {
   const itemStub = {
@@ -22,7 +23,7 @@ const container = (sharedObserver = null) => {
       identifier: 'foo',
       creator: 'bar',
       title: 'baz',
-    }
+    },
   };
   const modalMgr = new ModalManager();
   return html`
@@ -32,18 +33,18 @@ const container = (sharedObserver = null) => {
       .sharedObserver=${sharedObserver || new SharedResizeObserver()}
       .modal=${modalMgr}
     >
-      <div slot="main">
-        <div id="BookReader"></div>
-        <p class="visible-in-reader">now showing</p>
+      <div slot='main'>
+        <div id='BookReader'></div>
+        <p class='visible-in-reader'>now showing</p>
       <\div>
     </book-navigator>
   `;
 };
 
 window.ResizeObserver = class ResizeObserver {
-  observe = sinon.fake()
-  unobserve = sinon.fake()
-  disconnect = sinon.fake()
+  observe = sinon.fake();
+  unobserve = sinon.fake();
+  disconnect = sinon.fake();
 };
 
 afterEach(() => {
@@ -52,11 +53,11 @@ afterEach(() => {
   const body = document.querySelector('body');
   body.innerHTML = '';
   sinon.restore();
+  window.archive_analytics = null;
 });
 
-
 describe('<book-navigator>', () => {
-  describe("How it loads", () => {
+  describe('How it loads', () => {
     describe('Attaches BookReader listeners before `br.init` is called', () => {
       test('binds global event listeners', async () => {
         const el = fixtureSync(container());
@@ -71,7 +72,7 @@ describe('<book-navigator>', () => {
           jumpToIndex: sinon.fake(),
           options: { enableMultipleBooks: false }, // for multipleBooks
           el: '#BookReader',
-          refs: {}
+          refs: {},
         };
 
         const sharedObserver = new SharedResizeObserver();
@@ -85,9 +86,11 @@ describe('<book-navigator>', () => {
 
         expect(brStub.resize.callCount).toEqual(0);
 
-        window.dispatchEvent(new CustomEvent('BookReader:PostInit', {
-          detail: { props: brStub }
-        }));
+        window.dispatchEvent(
+          new CustomEvent('BookReader:PostInit', {
+            detail: { props: brStub },
+          })
+        );
         await elementUpdated(el);
 
         expect(el.emitLoadingStatusUpdate.callCount).toEqual(1);
@@ -120,13 +123,15 @@ describe('<book-navigator>', () => {
       const itemImage = fixtureSync(el.itemImage);
       expect(itemImage).toBeInstanceOf(HTMLImageElement);
       expect(itemImage.getAttribute('class')).toEqual('cover-img');
-      expect(itemImage.getAttribute('src')).toEqual('https://https://foo.archive.org/services/img/foo');
+      expect(itemImage.getAttribute('src')).toEqual(
+        'https://https://foo.archive.org/services/img/foo'
+      );
     });
   });
   describe('Menu/Layer Provider', () => {
     describe('Connecting with a provider:', () => {
       // loads Providers with base shared resources
-      test('We load 3 Sub Menus by default', async() => {
+      test('We load 3 Sub Menus by default', async () => {
         const el = fixtureSync(container());
         const $brContainer = document.createElement('div');
         const brStub = {
@@ -135,8 +140,8 @@ describe('<book-navigator>', () => {
           jumpToIndex: sinon.fake(),
           options: {},
           refs: {
-            $brContainer
-          }
+            $brContainer,
+          },
         };
         el.bookreader = brStub;
         await el.elementUpdated;
@@ -151,10 +156,12 @@ describe('<book-navigator>', () => {
         expect(el.menuProviders.share).toBeInstanceOf(SharingProvider);
 
         expect(defaultMenus).toContain('visualAdjustments');
-        expect(el.menuProviders.visualAdjustments).toBeInstanceOf(VisualAdjustmentsProvider);
+        expect(el.menuProviders.visualAdjustments).toBeInstanceOf(
+          VisualAdjustmentsProvider
+        );
       });
       describe('Loading Sub Menus By Plugin Flags', () => {
-        test('Search: uses `enableSearch` flag', async() => {
+        test('Search: uses `enableSearch` flag', async () => {
           const el = fixtureSync(container());
           const $brContainer = document.createElement('div');
           const brStub = {
@@ -163,8 +170,8 @@ describe('<book-navigator>', () => {
             jumpToIndex: sinon.fake(),
             options: { enableSearch: true },
             refs: {
-              $brContainer
-            }
+              $brContainer,
+            },
           };
           el.bookreader = brStub;
           await el.elementUpdated;
@@ -176,9 +183,9 @@ describe('<book-navigator>', () => {
           expect(el.menuProviders.search).toBeInstanceOf(SearchProvider);
 
           // also adds a menu shortcut
-          expect(el.menuShortcuts.find(m => m.id === 'search')).toBeDefined();
+          expect(el.menuShortcuts.find((m) => m.id === 'search')).toBeDefined();
         });
-        test('Volumes/Multiple Books: uses `enableMultipleBooks` flag', async() => {
+        test('Volumes/Multiple Books: uses `enableMultipleBooks` flag', async () => {
           const el = fixtureSync(container());
           const $brContainer = document.createElement('div');
           const brStub = {
@@ -189,13 +196,13 @@ describe('<book-navigator>', () => {
               enableMultipleBooks: true,
               multipleBooksList: {
                 by_subprefix: {
-                  fooSubprefix: 'beep'
-                }
-              }
+                  fooSubprefix: 'beep',
+                },
+              },
             },
             refs: {
-              $brContainer
-            }
+              $brContainer,
+            },
           };
           el.bookreader = brStub;
           await el.elementUpdated;
@@ -207,7 +214,9 @@ describe('<book-navigator>', () => {
           expect(el.menuProviders.volumes).toBeInstanceOf(VolumesProvider);
 
           // also adds a menu shortcut
-          expect(el.menuShortcuts.find(m => m.id === 'volumes')).toBeDefined();
+          expect(
+            el.menuShortcuts.find((m) => m.id === 'volumes')
+          ).toBeDefined();
         });
       });
       test('keeps track of base shared resources for providers in: `baseProviderConfig`', () => {
@@ -315,7 +324,9 @@ describe('<book-navigator>', () => {
               console.log();
               sidePanelConfig = e.detail;
             });
-            const toggleSearchMenuEvent = new Event('BookReader:ToggleSearchMenu');
+            const toggleSearchMenuEvent = new Event(
+              'BookReader:ToggleSearchMenu'
+            );
             window.dispatchEvent(toggleSearchMenuEvent);
 
             await elementUpdated(el);
@@ -327,15 +338,15 @@ describe('<book-navigator>', () => {
     });
   });
 
-  describe('Resizing',() => {
+  describe('Resizing', () => {
     test('keeps track of `brWidth` and `brHeight`', async () => {
       const el = fixtureSync(container());
       const brStub = {
         resize: sinon.fake(),
         options: {},
         refs: {
-          $brContainer: document.createElement('div')
-        }
+          $brContainer: document.createElement('div'),
+        },
       };
       el.bookreader = brStub;
       await elementUpdated(el);
@@ -345,9 +356,9 @@ describe('<book-navigator>', () => {
       const mockResizeEvent = {
         contentRect: {
           height: 500,
-          width: 900
+          width: 900,
         },
-        target: el.mainBRContainer
+        target: el.mainBRContainer,
       };
       el.handleResize(mockResizeEvent);
 
@@ -364,8 +375,8 @@ describe('<book-navigator>', () => {
         resize: sinon.fake(),
         options: {},
         refs: {
-          $brContainer: document.createElement('div')
-        }
+          $brContainer: document.createElement('div'),
+        },
       };
 
       el.bookreader = brStub;
@@ -470,7 +481,7 @@ describe('<book-navigator>', () => {
 
       expect(el.closeFullscreen.callCount).toEqual(1);
     });
-    test('removes Fullscreen shortcut when leaving fullscreen', async() => {
+    test('removes Fullscreen shortcut when leaving fullscreen', async () => {
       const el = fixtureSync(container());
       const brStub = {
         isFullscreen: () => false,
@@ -489,7 +500,7 @@ describe('<book-navigator>', () => {
       expect(el.menuShortcuts.length).toEqual(0);
       expect(el.emitMenuShortcutsUpdated.callCount).toEqual(1);
     });
-    test('Event: Listens for `BookReader:FullscreenToggled', async() => {
+    test('Event: Listens for `BookReader:FullscreenToggled', async () => {
       const el = fixtureSync(container());
       const brStub = {
         isFullscreen: () => true,
@@ -513,4 +524,83 @@ describe('<book-navigator>', () => {
       expect(el.manageFullScreenBehavior.callCount).toEqual(1);
     });
   });
+  describe('Handles Restricted Books', () => {
+    describe('contextMenu is prevented when book is restricted', () => {
+      it('watches on `div.BRscreen`', async () => {
+        window.archive_analytics = { send_event_no_sampling: sinon.fake() };
+
+        const el = fixtureSync(container());
+        const brStub = {
+          options: { restricted: true },
+        };
+
+        el.bookreader = brStub;
+        el.bookIsRestricted = true;
+
+        const elSpy = sinon.spy(el.manageContextMenuVisibility);
+        await el.elementUpdated;
+
+        expect(window.archive_analytics.send_event_no_sampling.called).toEqual(
+          false
+        );
+        expect(elSpy.called).toEqual(false);
+
+        const body = document.querySelector('body');
+
+        const divBRscreen = document.createElement('div');
+        divBRscreen.classList.add('BRscreen');
+        body.appendChild(divBRscreen);
+
+        const contextMenuEvent = new Event('contextmenu', { bubbles: true });
+
+        // Set spy on contextMenuEvent to check if `preventDefault` is called
+        const preventDefaultSpy = sinon.spy(contextMenuEvent, 'preventDefault');
+        expect(preventDefaultSpy.called).toEqual(false);
+
+        divBRscreen.dispatchEvent(contextMenuEvent);
+
+        // analytics fires
+        expect(window.archive_analytics.send_event_no_sampling.called).toEqual(
+          true
+        );
+        // we prevent default
+        expect(preventDefaultSpy.called).toEqual(true);
+      });
+      it('watches on `img.BRpageimage`', async () => {
+        window.archive_analytics = { send_event_no_sampling: sinon.fake() };
+
+        const el = fixtureSync(container());
+        const brStub = {
+          options: { restricted: true },
+        };
+
+        el.bookreader = brStub;
+        el.bookIsRestricted = true;
+
+        await el.elementUpdated;
+
+        expect(window.archive_analytics.send_event_no_sampling.called).toEqual(
+          false
+        );
+
+        const body = document.querySelector('body');
+        // const element stub for img.BRpageimage
+        const imgBRpageimage = document.createElement('img');
+        imgBRpageimage.classList.add('BRpageimage');
+        body.appendChild(imgBRpageimage);
+        const contextMenuEvent = new Event('contextmenu', { bubbles: true });
+
+        // Set spy on contextMenuEvent to check if `preventDefault` is called
+        const preventDefaultSpy = sinon.spy(contextMenuEvent, 'preventDefault');
+        expect(preventDefaultSpy.called).toEqual(false);
+
+        imgBRpageimage.dispatchEvent(contextMenuEvent);
+
+        // analytics fires
+        expect(window.archive_analytics.send_event_no_sampling.called).toEqual(true);
+        // we prevent default
+        expect(preventDefaultSpy.called).toEqual(true);
+      });
+    });
+  });
 });

package/tests/jest/BookReader/Mode2Up.test.js

@@ -47,6 +47,29 @@ describe('zoom', () => {
   });
 });
 
+describe('page flip directions', () => {
+  test('animates the left page in the correct direction', () => {
+    const br = new BookReader({ data: SAMPLE_DATA });
+    br.init();
+
+    const fake = sinon.fake();
+    const fakeAnimWithCB = sinon.fake.yields();
+    const fakeAnim = sinon.fake((...args) =>
+      typeof args[args.length - 1] === 'function' ? fakeAnimWithCB(...args) : fake
+    );
+    sinon.replace(jQuery.prototype, 'animate', fakeAnim);
+
+    const fakeCSS = sinon.spy(jQuery.prototype, 'css');
+
+    br.next();
+
+    expect(fakeAnimWithCB.callCount).toBe(2);
+    // Find the call to .css() immediately preceding the second animation with a callback (i.e., the left page animation)
+    const preSecondAnimCssCallIndex = fakeCSS.getCalls().findIndex(call => call.calledAfter(fakeAnimWithCB.getCall(1))) - 1;
+    expect(fakeCSS.getCall(preSecondAnimCssCallIndex).args[0].left).toBe('');
+  });
+});
+
 describe('prefetch', () => {
   test('loads nearby pages', () => {
     const br = new BookReader({ data: SAMPLE_DATA });