From 8b64a9f532dee166177fbc7d750024b9fb51dba4 Mon Sep 17 00:00:00 2001 From: Peter Coles Date: Tue, 13 Feb 2018 15:19:13 -0500 Subject: [PATCH 1/2] bugfix clicking on diff image and dataURI Chrome no longer allows dataURIs to be viewed directly in the URL bar ([background](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM%5B101-125%5D)). Currently clicking on the #image-diff element loads a blank page and gives an error: > Not allowed to navigate top frame to data URL This change opens the new window as `about:blank`, creates an image element, and appends that to the page. --- demoassets/main.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/demoassets/main.js b/demoassets/main.js index 7f73910..db8e854 100644 --- a/demoassets/main.js +++ b/demoassets/main.js @@ -60,7 +60,19 @@ $(function(){ $('#image-diff').html(diffImage); $(diffImage).click(function(){ - window.open(diffImage.src, '_blank'); + var w = window.open("about:blank", "_blank"); + var html = w.document.documentElement; + var body = w.document.body; + + html.style.margin = 0; + html.style.padding = 0; + body.style.margin = 0; + body.style.padding = 0; + + var img = w.document.createElement("img"); + img.src = diffImage.src; + img.alt = "image diff"; + body.appendChild(img); }); $('.buttons').show(); From c9f6567809ceb4bc60f54e7f052fd049ef0b913e Mon Sep 17 00:00:00 2001 From: Peter Coles Date: Tue, 13 Feb 2018 15:53:14 -0500 Subject: [PATCH 2/2] fit image to maxWidth 100% When you open image-diff in a new window it defaults to max-width 100%. This feels more natural for looking at large images. Clicking on the image will toggle fitting to the page width or natural size. --- demoassets/main.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/demoassets/main.js b/demoassets/main.js index db8e854..7e56e7b 100644 --- a/demoassets/main.js +++ b/demoassets/main.js @@ -72,6 +72,10 @@ $(function(){ var img = w.document.createElement("img"); img.src = diffImage.src; img.alt = "image diff"; + img.style.maxWidth = "100%"; + img.addEventListener("click", function() { + this.style.maxWidth = this.style.maxWidth === "100%" ? "" : "100%"; + }); body.appendChild(img); });