From 9197feefb867fa1a028ae68b6ddc930119689600 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 31 Oct 2017 13:50:44 +1100
Subject: [PATCH] UX: onebox images no longer cause jiggle

This stops pages from "jiggling" while oneboxes download.

see: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
---
 .../stylesheets/common/base/onebox.scss       | 44 +++++++++++++++++++
 lib/cooked_post_processor.rb                  | 11 ++++-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index b89a3efc785..dc1cb50afc1 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -140,6 +140,50 @@ aside.onebox {
       margin-right: 10px;
     }
 
+    [style*="--aspect-ratio"] > :first-child {
+      width: 100%;
+    }
+    [style*="--aspect-ratio"] > img {
+      height: auto;
+    }
+
+    // this allows us to load all onebox images without jiggle
+    // see: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
+    @supports (--custom:property) {
+
+      .aspect-image {
+        max-height: 170px;
+        max-width: 20%;
+        float: left;
+        margin-right: 10px;
+        width: 100%;
+        height: auto;
+
+        img {
+          width: 100%;
+          height: inherit;
+          max-width: initial;
+          max-height: initial;
+          float: none;
+          margin-right: none;
+        }
+      }
+      [style*="--aspect-ratio"] {
+        position: relative;
+      }
+      [style*="--aspect-ratio"]::before {
+        content: "";
+        display: block;
+        padding-bottom: calc(100% / (var(--aspect-ratio)));
+      }
+      [style*="--aspect-ratio"] > :first-child {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+      }
+    }
+
     // tighten bottom margin on last para
     p:last-child {
       margin-bottom: 4px;
diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb
index 30f91d44e41..31da056aa54 100644
--- a/lib/cooked_post_processor.rb
+++ b/lib/cooked_post_processor.rb
@@ -323,7 +323,16 @@ class CookedPostProcessor
     end
 
     # make sure we grab dimensions for oneboxed images
-    oneboxed_images.each { |img| limit_size!(img) }
+    # and wrap in a div
+    oneboxed_images.each do |img|
+      limit_size!(img)
+      if (width = img["width"].to_i) > 0 && (height = img["height"].to_i) > 0
+        img.delete('width')
+        img.delete('height')
+        new_parent = img.add_next_sibling("<div class='aspect-image' style='--aspect-ratio:#{width}/#{height};'/>")
+        new_parent.first.add_child(img)
+      end
+    end
   end
 
   def optimize_urls