ThumbnailBuilder

Add support for image url qp

12/14/2018 2:29:04 PM

Changes

help.html 5(+5 -0)

js/editCanvas.js 34(+22 -12)

Details

help.html 5(+5 -0)

diff --git a/help.html b/help.html
index 3896eb9..bfb3bf2 100644
--- a/help.html
+++ b/help.html
@@ -37,6 +37,11 @@
     <p>
       To make the tool re-usable, you can add the query parameters below to your URL.
     </p>
+    <p>
+      <a href="/index.html?background=https://navigator.state.or.us/agol/assets/banner_images/Fort%20Rock.JPG&logo=https://www.oregon.gov/ODF/SiteCollectionImages/branding/ODFlogo_color.png&title=Fort%20Rock%20Story%20Map&category=Story%20Map&titleColor=47,120,0,0.7&sidebarColor=0,50,50,0.7" target="_self">
+        See This Example
+      </a>
+    </p>
     <table>
       <thead>
         <tr>

js/editCanvas.js 34(+22 -12)

diff --git a/js/editCanvas.js b/js/editCanvas.js
index 201ae25..368c724 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -92,7 +92,6 @@ var backgroundComponent = {
   },
   _addImage: function () {
     var file = document.querySelector(this.properties.domId).files[0];
-    if(file == undefined) return;
 
     var background = new Image();
     var reader = new FileReader();
@@ -106,11 +105,17 @@ var backgroundComponent = {
       ctx.globalCompositeOperation = 'source-over';
     }
 
-    reader.addEventListener("load", function () {
-      background.src = reader.result;
-    }, false);
+    if(file) {
+      reader.addEventListener("load", function () {
+        background.src = reader.result;
+      }, false);
 
-    reader.readAsDataURL(file);
+      reader.readAsDataURL(file);
+    }
+
+    if(!file && document.querySelector('#background-url').value !== '') {
+      background.src = document.querySelector('#background-url').value;
+    }
   }
 }
 
@@ -126,7 +131,6 @@ var logoComponent = {
   _addImage: function () {
 
     var file = document.querySelector(this.properties.domId).files[0];
-    if(file == undefined) return;
     var background = new Image();
     var reader = new FileReader();
 
@@ -137,11 +141,17 @@ var logoComponent = {
         5, 5, 145, 145);
     }
 
-    reader.addEventListener("load", function () {
-      background.src = reader.result;
-    }, false);
+    if(file) {
+      reader.addEventListener("load", function () {
+        background.src = reader.result;
+      }, false);
 
-    reader.readAsDataURL(file);
+      reader.readAsDataURL(file);
+    }
+
+    if(!file && document.querySelector('#logo-url').value !== '') {
+      background.src = document.querySelector('#logo-url').value;
+    }
   }
 }
 
@@ -195,8 +205,8 @@ document.addEventListener('DOMContentLoaded', function() {
   if(getUrlParameter('background')) {
     $("#background-url").val(getUrlParameter('background'));
   }
-  if(getUrlParameter('background')) {
-    $("#logo-url").val(getUrlParameter('background'));
+  if(getUrlParameter('logo')) {
+    $("#logo-url").val(getUrlParameter('logo'));
   }
 
   // Select Dropdowns to Material Styles