Increase document size default without selecting increase magnification icon

Ask the Community General Questions
1

I work with an older demographic and wondering if the flipbook default view can be set to a particular view size? Currently, I need to select the increase magnifyer 2-3 time for a decent view.

2 Likes
3

Hi there, @Diane_Maidl1 :waving_hand:

Interesing idea! Please let me check with the devs if it’s feasible. I’ll update you once I have their response :slightly_smiling_face:

1 Like
4

Hi there, @Diane_Maidl1 :waving_hand:

Thank you for waiting!

This script will do the trick:

const DEFAULT_SCALE = 1.2;

function listener(selector, callback) {
  const firstTarget = document.querySelector(selector);
  if (firstTarget) {
    return callback(firstTarget);
  }

  const observer = new MutationObserver((_, observer) => {
    const targetNode = document.querySelector(selector);
    if (targetNode) {
      observer.disconnect();
      callback(targetNode);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

listener(
  '[class*="flipbook-component__FlipBookEmbed-sc"]',
  async (flipbook) => {
    const source = flipbook.src;
    const response = await fetch(source);
    const html = await response.text();
    const parser = new DOMParser();

    const doc = parser.parseFromString(html, 'text/html');
    const base = doc.createElement('base');
    base.href = source;
    doc.head.prepend(base);

    const url = new URL(source);
    const fontAwesome = doc.createElement('link');
    fontAwesome.rel = 'stylesheet';
    fontAwesome.href = `${url.origin}/css/font-awesome.min.css`;
    doc.head.prepend(fontAwesome);

    const scripts = doc.body.querySelectorAll('script:not([src])');

    scripts.forEach((script) => {
      if (script.innerHTML.includes('new URL(document.location.href)')) {
        script.textContent = script.textContent.replaceAll(
          'new URL(document.location.href)',
          `new URL("${source}");`
        );
      }

      if (script.innerHTML.includes('default: 0.8')) {
        script.textContent = script.textContent.replace(
          'default: 0.8,',
          `default: ${DEFAULT_SCALE},`
        );

        script.textContent =
          'window.devicePixelRatio = 3;' + script.textContent;
      }

      if (script.innerHTML.includes('controlsProps: {')) {
        script.textContent = script.textContent.replace(
          'controlsProps: {',
          'controlsProps: { \n autoResolution: { enabled: false, coefficient: 3 }, \n'
        );
      }
    });

    const parent = flipbook.parentNode;
    const newIframe = document.createElement('iframe');
    newIframe.src = 'about:blank';

    newIframe.style.cssText = flipbook.style.cssText;
    newIframe.className = flipbook.className;

    parent.replaceChild(newIframe, flipbook);

    const iframeDoc = newIframe.contentWindow.document;
    requestAnimationFrame(() => {
      iframeDoc.open();
      iframeDoc.write(doc.documentElement.outerHTML);
      iframeDoc.close();
    });
  }
);

Adjust the Default Scale value in the 1st line of the code and add the resulted script to the Custom JS field on the Settings tab of your widget’s settings:

image
image604×440 11.3 KB

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website.


Test it out and let me know how it works :wink:

5

Thank you so much, Max. This will work for our project.

1 Like
6

Awesome, you’re very welcome :wink: