FEATURE: Use responsive image sizes in post stream (#13343)

FEATURE: Use responsive image sizes in post stream (#13343)

diff --git a/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js b/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js
deleted file mode 100644
index 66f6b92..0000000
--- a/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default {
-  name: "ensure-image-dimensions",
-  after: "mobile",
-  initialize(container) {
-    if (!window) {
-      return;
-    }
-
-    // This enforces maximum dimensions of images based on site settings
-    // for mobile we use the window width as a safeguard
-    // This rule should never really be at play unless for some reason images do not have dimensions
-
-    const siteSettings = container.lookup("site-settings:main");
-    let width = siteSettings.max_image_width;
-    let height = siteSettings.max_image_height;
-
-    const site = container.lookup("site:main");
-    if (site.mobileView) {
-      width = window.innerWidth - 20;
-    }
-
-    let styles = `max-width:${width}px; max-height:${height}px;`;
-
-    if (siteSettings.disable_image_size_calculations) {
-      styles = "max-width: 100%; height: auto;";
-    }
-
-    const styleTag = document.createElement("style");
-    styleTag.id = "image-sizing-hack";
-    styleTag.innerHTML = `#reply-control .d-editor-preview img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji), .cooked img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {${styles}}`;
-    document.head.appendChild(styleTag);
-  },
-};
diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
index b425a81..8a75560 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
@@ -4,10 +4,7 @@ import highlightSyntax from "discourse/lib/highlight-syntax";
 import lightbox from "discourse/lib/lightbox";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { setTextDirections } from "discourse/lib/text-direction";
-import {
-  nativeLazyLoading,
-  setupLazyLoading,
-} from "discourse/lib/lazy-load-images";
+import { nativeLazyLoading } from "discourse/lib/lazy-load-images";
 import { withPluginApi } from "discourse/lib/plugin-api";
 
 export default {
@@ -38,11 +35,7 @@ export default {
         });
       }
 
-      if (siteSettings.disable_image_size_calculations) {
-        nativeLazyLoading(api);
-      } else {
-        setupLazyLoading(api);
-      }
+      nativeLazyLoading(api);
 
       api.decorateCooked(
         ($elem) => {
diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
index 46390d0..c354d1f 100644
--- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
+++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
@@ -1,89 +1,6 @@
-const OBSERVER_OPTIONS = {
-  rootMargin: "66%", // load images slightly before they're visible
-};
-
 // Min size in pixels for consideration for lazy loading
 const MINIMUM_SIZE = 150;
 
-const hiddenData = new WeakMap();
-
-const LOADING_DATA =
-  "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
-
-// We hide an image by replacing it with a transparent gif
-function hide(image) {
-  image.classList.add("d-lazyload");
-  image.classList.add("d-lazyload-hidden");
-
-  hiddenData.set(image, {
-    src: image.src,
-    srcset: image.srcset,
-    width: image.width,
-    height: image.height,
-    className: image.className,
-  });
-
-  image.src = image.dataset.smallUpload || LOADING_DATA;
-  image.removeAttribute("srcset");
-
-  image.removeAttribute("data-small-upload");
-}
-
-// Restore an image when onscreen
-function show(image) {
-  let imageData = hiddenData.get(image);
-
-  if (imageData) {
-    const copyImg = new Image();
-    copyImg.onload = () => {
-      if (copyImg.srcset) {
-        image.srcset = copyImg.srcset;
-      }
-      image.src = copyImg.src;
-      image.classList.remove("d-lazyload-hidden");
-
-      if (image.onload) {
-        // don't bother fighting with existing handler
-        // this can mean a slight flash on mobile
-        image.parentNode.removeChild(copyImg);
-      } else {
-        image.onload = () => {
-          image.parentNode.removeChild(copyImg);
-          image.onload = null;
-        };
-      }
-
-      copyImg.onload = null;
-    };
-
-    if (imageData.srcset) {
-      copyImg.srcset = imageData.srcset;
-    }
-
-    copyImg.src = imageData.src;
-
-    // width of image may not match, use computed style which
-    // is the actual size of the image
-    const computedStyle = window.getComputedStyle(image);
-    const actualWidth = parseInt(computedStyle.width, 10);
-    const actualHeight = parseInt(computedStyle.height, 10);
-
-    copyImg.style.position = "absolute";
-    copyImg.style.top = `${image.offsetTop}px`;
-    copyImg.style.left = `${image.offsetLeft}px`;
-    copyImg.style.width = `${actualWidth}px`;
-    copyImg.style.height = `${actualHeight}px`;
-
-    copyImg.className = imageData.className;
-
-    // insert after the current element so styling still will
-    // apply to original image firstChild selectors
-    image.parentNode.insertBefore(copyImg, image.nextSibling);
-  } else {
-    image.classList.remove("d-lazyload-hidden");
-  }
-}
-
 function forEachImage(post, callback) {
   post.querySelectorAll("img").forEach((img) => {
     if (img.width >= MINIMUM_SIZE && img.height >= MINIMUM_SIZE) {
@@ -92,36 +9,6 @@ function forEachImage(post, callback) {
   });
 }
 
-export function setupLazyLoading(api) {
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-      const { target } = entry;
-
-      if (entry.isIntersecting) {
-        show(target);
-        observer.unobserve(target);
-      }
-    });
-  }, OBSERVER_OPTIONS);
-
-  api.decorateCookedElement((post) => forEachImage(post, (img) => hide(img)), {
-    onlyStream: true,
-    id: "discourse-lazy-load",
-  });
-
-  // IntersectionObserver.observe must be called after the cooked
-  // content is adopted by the document element in chrome
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=1073469
-  api.decorateCookedElement(
-    (post) => forEachImage(post, (img) => observer.observe(img)),
-    {
-      onlyStream: true,
-      id: "discourse-lazy-load-after-adopt",
-      afterAdopt: true,
-    }
-  );
-}
-
 export function nativeLazyLoading(api) {
   api.decorateCookedElement(
     (post) =>
diff --git a/app/assets/javascripts/discourse/app/widgets/post-cooked.js b/app/assets/javascripts/discourse/app/widgets/post-cooked.js
index 1526ec0..5a41b1d 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-cooked.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-cooked.js
@@ -57,7 +57,6 @@ export default class PostCooked {
 
     this._insertQuoteControls($cookedDiv);
     this._showLinkCounts($cookedDiv);
-    this._fixImageSizes($cookedDiv);
     this._applySearchHighlight($cookedDiv);
 
     this._decorateAndAdopt(cookedDiv);
@@ -90,44 +89,6 @@ export default class PostCooked {
     }
   }
 
-  _fixImageSizes($html) {
-    if (!this.decoratorHelper || !this.decoratorHelper.widget) {
-      return;
-    }
-    let siteSettings = this.decoratorHelper.widget.siteSettings;
-
-    if (siteSettings.disable_image_size_calculations) {
-      return;
-    }
-
-    const maxImageWidth = siteSettings.max_image_width;
-    const maxImageHeight = siteSettings.max_image_height;
-
-    let maxWindowWidth;
-    $html.find("img:not(.avatar)").each((idx, img) => {
-      // deferring work only for posts with images
-      // we got to use screen here, cause nothing is rendered yet.
-      // long term we may want to allow for weird margins that are enforced, instead of hardcoding at 70/20

[... diff too long, it was truncated ...]

GitHub sha: e305365168528883872d4ce9efd109e41149ef0a

This commit appears in #13343 which was approved by eviltrout. It was merged by pmusaraj.