ThumbnailBuilder
Details
help.html 20(+19 -1)
diff --git a/help.html b/help.html
index 809a34d..3896eb9 100644
--- a/help.html
+++ b/help.html
@@ -5,7 +5,7 @@
<title>Oregon ArcGIS TB</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
@@ -59,6 +59,24 @@
<td>RGBA Color</td>
<td>0,0,255,0.8</td>
</tr>
+ <tr>
+ <td>category</td>
+ <td>Valid Item Category</td>
+ <td>String</td>
+ <td>Story Map</td>
+ </tr>
+ <tr>
+ <td>background</td>
+ <td>URL to background image</td>
+ <td>String</td>
+ <td>https://path.to.my.background.jpg</td>
+ </tr>
+ <tr>
+ <td>logo</td>
+ <td>URL to logo image</td>
+ <td>String</td>
+ <td>https://path.to.my.logo.jpg</td>
+ </tr>
</tbody>
</table>
</div>
index.html 4(+3 -1)
diff --git a/index.html b/index.html
index 91561b7..2e14ad2 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./css/materialize-colorpicker.min.css">
- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
@@ -76,6 +76,7 @@
<div class="row">
<h2>Background Image</h2>
+ <input type="hidden" id="background-url" />
<div class="input-field col s12">
<div class="file-field input-field">
<div class="btn">
@@ -91,6 +92,7 @@
<div class="row">
<h2>Logo Image</h2>
+ <input type="hidden" id="logo-url" />
<div class="input-field col s12">
<div class="file-field input-field">
<div class="btn">
js/editCanvas.js 44(+39 -5)
diff --git a/js/editCanvas.js b/js/editCanvas.js
index 9cd68f9..201ae25 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -91,9 +91,9 @@ var backgroundComponent = {
this._addImage();
},
_addImage: function () {
-
var file = document.querySelector(this.properties.domId).files[0];
if(file == undefined) return;
+
var background = new Image();
var reader = new FileReader();
@@ -165,10 +165,6 @@ document.addEventListener('DOMContentLoaded', function() {
component: '.btn'
}).on('changeColor', draw)
- // Select Dropdowns
- var elems = document.querySelectorAll('select');
- var instances = M.FormSelect.init(elems);
-
// Update Events
document.querySelector('#title').addEventListener('keyup', draw);
document.querySelector('#category').addEventListener('change', draw);
@@ -177,5 +173,43 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#logo')
.addEventListener('change', draw);
+ // Any Query Params?
+ if(getUrlParameter('titleColor')) {
+ $("#title-color")
+ .colorpicker('setValue', 'rgba(' + getUrlParameter('titleColor') + ')');
+ }
+ if(getUrlParameter('sidebarColor')) {
+ $("#category-color")
+ .colorpicker('setValue', 'rgba(' + getUrlParameter('sidebarColor') + ')');
+ }
+ if(getUrlParameter('title')) {
+ $("#title").val(getUrlParameter('title'))
+ }
+ if(getUrlParameter('category')) {
+ $("#category option").each(function (i, opt) {
+ if($(opt).val().toLowerCase() == getUrlParameter('category').toLowerCase()) {
+ $(opt).attr('selected', true)
+ }
+ })
+ }
+ if(getUrlParameter('background')) {
+ $("#background-url").val(getUrlParameter('background'));
+ }
+ if(getUrlParameter('background')) {
+ $("#logo-url").val(getUrlParameter('background'));
+ }
+
+ // Select Dropdowns to Material Styles
+ var elems = document.querySelectorAll('select');
+ instances = M.FormSelect.init(elems);
+
draw();
});
+
+// Helper function to get URL Query Params
+function getUrlParameter(name) {
+ name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+ var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+ var results = regex.exec(location.search);
+ return results === null ? false : decodeURIComponent(results[1].replace(/\+/g, ' '));
+};