ThumbnailBuilder
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