@internetarchive/bookreader 5.0.0-45 → 5.0.0-46

package/BookReaderDemo/demo-internetarchive.html

@@ -126,6 +126,13 @@
       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 }),
+      send_event: (category, action, label) => console.log('~~~ send_event SAMPLE EVENT CALLED: ', { category, action, label }),
+      send_ping: (category, action, label) => console.log('~~~ send_ping SAMPLE EVENT CALLED: ', { category, action, label }),
+    }
   </script>
 
   <!-- IA fetch demo -->

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 5.0.0-46
+Fix: Leaf positioning during RTL fliip animation @latonv
+Dev: dependency updates @renovate
+Fix: Disable contextmenu for restricted books @iisa
+
 # 5.0.0-45
 # 5.0.0-44
 Fix: dynamic `q=<term>` url parameter @iisa

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-45",
+  "version": "5.0.0-46",
   "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

@@ -513,4 +513,118 @@ 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);
+      });
+    });
+    it('Allows unrestricted books access to context menu', async () => {
+      window.archive_analytics = { send_event_no_sampling: sinon.fake() };
+
+      const el = fixtureSync(container());
+      const brStub = {
+        options: { restricted: false },
+      };
+
+      el.bookreader = brStub;
+      el.bookIsRestricted = false;
+
+      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('not-targeted-element');
+      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 do not prevent default
+      expect(preventDefaultSpy.called).toEqual(false);
+    });
+  });
 });

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 });