☰

InoReader dynamic height of tiles in the card view

Makes cards' heights to be dynamic depending on image height

  1. // ==UserScript==
  2. // @name         InoReader dynamic height of tiles in the card view
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.0
  5. // @description  Makes cards' heights to be dynamic depending on image height
  6. // @author       Kenya-West
  7. // @match        https://*.inoreader.com/*
  8. // @icon         https://inoreader.com/favicon.ico?v=8
  9. // @grant        GM_addStyle
  10. // @license      MIT
  11. // ==/UserScript==
  12. // @ts-check
  13.  
  14.  
  15. (async function () {
  16.     const arriveEventConfigArticle = {
  17.         fireOnAttributesModification: false,
  18.         existing: true
  19.     };
  20.     
  21.     const style = `
  22.         .tm_dynamic_height {
  23.             height: auto !important;
  24.         }
  25.         .tm_remove_position_setting {
  26.             position: unset !important;
  27.         }
  28.         `;
  29.  
  30.     // @ts-ignore
  31.     GM_addStyle(style);
  32.  
  33.     // @ts-ignore
  34.     const arrive = await import("https://cdnjs.cloudflare.com/ajax/libs/arrive/2.5.2/arrive.min.js");
  35.  
  36.     // @ts-ignore
  37.     document.querySelector("#reader_pane")?.arrive(".ar", arriveEventConfigArticle, (article) => start(article));
  38.  
  39.     const querySelectorPathArticleRoot =
  40.         ".article_full_contents .article_content";
  41.     const querySelectorArticleContentWrapper = ".article_tile_content_wraper";
  42.     const querySelectorArticleFooter = ".article_tile_footer";
  43.  
  44.  
  45.     function start(element) {
  46.  
  47.         if (notHaveDynamicHeight(element)) {
  48.             // @ts-ignore
  49.             const cardWidth = element.clientWidth ?? element.offsetWidth ?? element.scrollWidth;
  50.             // @ts-ignore
  51.             const cardHeight = element.clientHeight ?? element.offsetHeight ?? element.scrollHeight;
  52.  
  53.             // 1. Set card height dynamic
  54.             setDynamicHeight(element);
  55.  
  56.             // 2. Set content wrapper height dynamic
  57.             const articleContentWrapperElement = element.querySelector(
  58.                 querySelectorArticleContentWrapper
  59.             );
  60.             if (articleContentWrapperElement) {
  61.                 setDynamicHeight(articleContentWrapperElement);
  62.             }
  63.  
  64.             // 3. Remove position setting from article footer
  65.             const articleFooter = element.querySelector(
  66.                 querySelectorArticleFooter
  67.             );
  68.             if (articleFooter) {
  69.                 removePositionSetting(articleFooter);
  70.             }
  71.  
  72.             // 4. Find image height
  73.             /**
  74.              * @type {HTMLDivElement | null}
  75.              */
  76.             const divImageElement = element.querySelector(
  77.                 "a[href] > .article_tile_picture[style*='background-image']"
  78.             );
  79.             if (!divImageElement) {
  80.                 return;
  81.             }
  82.             const imageUrl = getImageLink(divImageElement);
  83.             if (!imageUrl) {
  84.                 return;
  85.             }
  86.             const dimensions = getImageDimensions(imageUrl);
  87.  
  88.             // 5. Set image height (and - automatically - the card height)
  89.             dimensions.then(([width, height]) => {
  90.                 if (height > 0) {
  91.                     const calculatedHeight = Math.round(
  92.                         (cardWidth / width) * height
  93.                     );
  94.                     const pictureOldHeight =
  95.                         (divImageElement.clientHeight ??
  96.                             divImageElement.offsetHeight ??
  97.                             divImageElement.scrollHeight) ||
  98.                         cardHeight;
  99.                     /**
  100.                      * @type {HTMLDivElement}
  101.                      */
  102.                     const div = divImageElement;
  103.                     if (calculatedHeight > pictureOldHeight) {
  104.                         div.style.height = `${calculatedHeight}px`;
  105.                     }
  106.  
  107.                     // 5.1. Set card class to `.tm_dynamic_height` to not process it again next time
  108.                     element.classList?.add("tm_dynamic_height");
  109.                 }
  110.             });
  111.         }
  112.     }
  113.  
  114.     /**
  115.      * Checks if article already has dynamic height set.
  116.      */
  117.     function notHaveDynamicHeight(element) {
  118.         return element?.hasChildNodes() &&
  119.             element?.id?.includes("article_") &&
  120.             element?.classList.contains("ar") &&
  121.             !element?.classList.contains("tm_dynamic_height");
  122.     }
  123.  
  124.     /**
  125.      * 
  126.      * @param {Element} element 
  127.      * @returns {void}
  128.      */
  129.     function setDynamicHeight(element) {
  130.         element.classList?.add("tm_dynamic_height");
  131.     }
  132.  
  133.     /**
  134.      * 
  135.      * @param {Element} element 
  136.      * @returns {void}
  137.      */
  138.     function removeDynamicHeight(element) {
  139.         const div = element.querySelector("img");
  140.         if (!div) {
  141.             return;
  142.         }
  143.         div.classList?.remove("tm_dynamic_height");
  144.     }
  145.  
  146.     /**
  147.      * 
  148.      * @param {Element} element
  149.      * @returns {void}
  150.      */
  151.     function removePositionSetting(element) {
  152.         element.classList?.add("tm_remove_position_setting");
  153.     }
  154.  
  155.     /**
  156.      * 
  157.      * @param {Element} element
  158.      * @returns {void}
  159.      */
  160.     function restorePositionSetting(element) {
  161.         element.classList?.remove("tm_remove_position_setting");
  162.     }
  163.  
  164.  
  165.     /**
  166.      *
  167.      * @param {HTMLDivElement} div
  168.      * @returns {string | null}
  169.      */
  170.     function getImageLink(div) {
  171.         const backgroundImageUrl = div?.style.backgroundImage;
  172.         /**
  173.          * @type {string | undefined}
  174.          */
  175.         let imageUrl;
  176.         try {
  177.             imageUrl = backgroundImageUrl?.match(/url\("(.*)"\)/)?.[1];
  178.         } catch (error) {
  179.             imageUrl = backgroundImageUrl?.slice(5, -2);
  180.         }
  181.  
  182.         if (!imageUrl || imageUrl == "undefined") {
  183.             return null;
  184.         }
  185.  
  186.         if (!imageUrl?.startsWith("http")) {
  187.             console.error(
  188.                 `The image could not be parsed. Image URL: ${imageUrl}`
  189.             );
  190.             return null;
  191.         }
  192.         return imageUrl;
  193.     }
  194.  
  195.     /**
  196.      * 
  197.      * @param {string} url 
  198.      * @returns {Promise<[number, number]>}
  199.      */
  200.     async function getImageDimensions(url) {
  201.         const img = new Image();
  202.         img.src = url;
  203.         try {
  204.             await img.decode();
  205.         } catch (error) {
  206.             return Promise.reject(error);
  207.         }
  208.         return Promise.resolve([img.width, img.height]);
  209.     };
  210. })();
  211.