From 24715115f57d5a894c2495812875a2a056e17ec0 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 21 Apr 2021 12:41:45 -0400
Subject: [PATCH] DEV: Experiment with relative image sizes and native image
 lazy loading (#12759)

---
 .../initializers/ensure-max-image-dimensions.js | 17 ++++++++++-------
 .../app/initializers/post-decorations.js        | 11 +++++++++--
 .../discourse/app/lib/lazy-load-images.js       | 17 +++++++++++++++++
 .../discourse/app/widgets/post-cooked.js        |  5 +++++
 config/site_settings.yml                        |  5 +++++
 5 files changed, 46 insertions(+), 9 deletions(-)

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
index dd08190e667..b9a401fc374 100644
--- a/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js
+++ b/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js
@@ -16,15 +16,18 @@ export default {
 
     const site = container.lookup("site:main");
     if (site.mobileView) {
-      width = $(window).width() - 20;
+      width = window.innerWidth - 20;
     }
 
-    const style = "max-width:" + width + "px;" + "max-height:" + height + "px;";
+    let styles = `max-width:${width}px; max-height:${height}px;`;
 
-    $(
-      '<style id="image-sizing-hack">#reply-control .d-editor-preview img:not(.thumbnail):not(.ytp-thumbnail-image), .cooked img:not(.thumbnail):not(.ytp-thumbnail-image) {' +
-        style +
-        "}</style>"
-    ).appendTo("head");
+    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), .cooked img:not(.thumbnail):not(.ytp-thumbnail-image) {${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 0eacb93d0b4..88f045f1ff1 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
@@ -2,7 +2,10 @@ 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 { setupLazyLoading } from "discourse/lib/lazy-load-images";
+import {
+  nativeLazyLoading,
+  setupLazyLoading,
+} from "discourse/lib/lazy-load-images";
 import { withPluginApi } from "discourse/lib/plugin-api";
 
 export default {
@@ -33,7 +36,11 @@ export default {
         });
       }
 
-      setupLazyLoading(api);
+      if (siteSettings.disable_image_size_calculations) {
+        nativeLazyLoading(api);
+      } else {
+        setupLazyLoading(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 9f60bf92600..46390d05049 100644
--- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
+++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js
@@ -121,3 +121,20 @@ export function setupLazyLoading(api) {
     }
   );
 }
+
+export function nativeLazyLoading(api) {
+  api.decorateCookedElement(
+    (post) =>
+      forEachImage(post, (img) => {
+        img.loading = "lazy";
+        if (img.dataset.smallUpload) {
+          img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`;
+        }
+      }),
+    {
+      onlyStream: true,
+      id: "discourse-lazy-load-after-adopt",
+      afterAdopt: true,
+    }
+  );
+}
diff --git a/app/assets/javascripts/discourse/app/widgets/post-cooked.js b/app/assets/javascripts/discourse/app/widgets/post-cooked.js
index de61a66b9e7..bbc669ac224 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-cooked.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-cooked.js
@@ -95,6 +95,11 @@ export default class PostCooked {
       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;
 
diff --git a/config/site_settings.yml b/config/site_settings.yml
index b9703b5f106..5464916ada8 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -2244,6 +2244,11 @@ uncategorized:
   create_revision_on_bulk_topic_moves:
     default: true
 
+  disable_image_size_calculations:
+    default: false
+    hidden: true
+    client: true
+
 user_preferences:
   default_email_digest_frequency:
     enum: "DigestEmailSiteSetting"