Add permalink to setup for comparing images with webroot/compare/compare.php, fix #92.

REVISION.md

@@ -8,6 +8,8 @@ Revision history
 v0.7.0.x (latest)
 -------------------------------------
 
+* Add permalink to setup for comparing images with `webroot/compare/compare.php`, fix #92.
+* Support spaces in filenames for image src, fix #91. 
 * Support redirections for remote images, fix #87, fix #90. 
 * Improving usage of Travis and Scrutinizer.
 * Naming cache-file using md5 for remote images, fix #86.

webroot/compare/compare.php

@@ -43,13 +43,15 @@ input[type=text] {
 <h1>Compare images</h1>
 <p>Add link to images and visually compare them. Change the link och press return to load the image. <a href="http://dbwebb.se/opensource/cimage">Read more...</a></p>
 
+<p><a id="permalink" href="?">Direct link to this setup.</a></p>
+
 <form>
     <p>
         <label>Image 1: <input type="text" id="input1" data-id="1"></label> <img id="thumb1"></br>
         <label>Image 2: <input type="text" id="input2" data-id="2"></label> <img id="thumb2"></br>
         <label>Image 3: <input type="text" id="input3" data-id="3"></label> <img id="thumb3"></br>
         <label>Image 4: <input type="text" id="input4" data-id="4"></label> <img id="thumb4"></br>
-        <label><input type="checkbox" id="viewDetails">Hide image details?</label><br/>
+        <label><input type="checkbox" id="viewDetails">Show image details</label><br/>
         <label><input type="checkbox" id="stack">Stack images?</label>
     </p>
 </form>
@@ -66,25 +68,25 @@ input[type=text] {
     <div id="area1" class="area">
         <code>Image 1</code><br>
         <img id="img1">
-        <pre id="json1" class="json"></pre>
+        <pre id="json1" class="json hidden"></pre>
     </div>
 
     <div id="area2" class="area">
         <code>Image 2</code><br>
         <img id="img2">
-        <pre id="json2" class="json"></pre>
+        <pre id="json2" class="json hidden"></pre>
     </div>
 
     <div id="area3" class="area">
         <code>Image 3</code><br>
         <img id="img3">
-        <pre id="json3" class="json"></pre>
+        <pre id="json3" class="json hidden"></pre>
     </div>
 
     <div id="area4" class="area">
         <code>Image 4</code><br>
         <img id="img4">
-        <pre id="json4" class="json"></pre>
+        <pre id="json4" class="json hidden"></pre>
     </div>
 
 </div>
@@ -96,9 +98,23 @@ input[type=text] {
 <script src="../js/cimage.js"></script>
 <script>
 <?php 
-if (isset($script)) {
+if (isset($_GET['input1'])) {
+    // Use incoming from querystring as defaults
+?>
+    CImage.compare({
+        "input1": "<?=$_GET['input1']?>",
+        "input2": "<?=$_GET['input2']?>",
+        "input3": "<?=$_GET['input3']?>",
+        "input4": "<?=$_GET['input4']?>",
+        "json": <?=$_GET['json']?>,
+        "stack": <?=$_GET['stack']?>
+    });
+<?php
+} else if (isset($script)) {
+    // Use default setup from js configuration
     echo $script; 
 } else {
+    // Use defaults
     echo "CImage.compare({});";
 } ?>
 </script>

webroot/js/cimage.js

@@ -5,11 +5,37 @@ window.CImage = (function(){
     "use strict";
 
 
+
+    /**
+     * Update the permalink.
+     */
+    function updatePermaLink() {
+        var link,
+            input1 = document.getElementById("input1"),
+            input2 = document.getElementById("input2"),
+            input3 = document.getElementById("input3"),
+            input4 = document.getElementById("input4"),
+            details = document.getElementById("viewDetails"),
+            stack = document.getElementById("stack"),
+            permalink = document.getElementById("permalink");
+            
+        link  = "?";
+        link += "input1=" + encodeURIComponent(input1.value) + "&";
+        link += "input2=" + encodeURIComponent(input2.value) + "&";
+        link += "input3=" + encodeURIComponent(input3.value) + "&";
+        link += "input4=" + encodeURIComponent(input4.value) + "&";
+        link += "json=" + encodeURIComponent(details.checked) + "&";
+        link += "stack=" + encodeURIComponent(stack.checked);
+        permalink.href = link;
+    }
+
+
+
     /**
      * Init the compare page with details.
      */
     function compareLoadImage(event) {
-        var img, json, button, area, deck, id;
+        var img, json, button, area, deck, id, permalink;
 
         id = this.dataset.id;
         img = document.getElementById("img" + id);
@@ -17,7 +43,9 @@ window.CImage = (function(){
         button = document.getElementById("button" + id);
         area = document.getElementById("area" + id);
         deck = document.getElementById("deck" + id);
-
+        
+        updatePermaLink();
+        
         if (this.value == "") {
             // Clear image if input is cleared
             button.setAttribute("disabled", "disabled");
@@ -57,31 +85,6 @@ window.CImage = (function(){
             stack = document.getElementById("stack"),
             buttons = document.getElementById("buttonWrap");
 
-/*            img1 = document.getElementById("img1"),
-            img2 = document.getElementById("img2"),
-            img3 = document.getElementById("img3"),
-            img4 = document.getElementById("img4"),
-            img01 = document.getElementById("img01"),
-            img02 = document.getElementById("img02"),
-            img03 = document.getElementById("img03"),
-            img04 = document.getElementById("img04"),
-            json1 = document.getElementById("json1"),
-            json2 = document.getElementById("json2"),
-            json3 = document.getElementById("json3"),
-            json4 = document.getElementById("json4"),
-            json01 = document.getElementById("json01"),
-            json02 = document.getElementById("json02"),
-            json03 = document.getElementById("json03"),
-            json04 = document.getElementById("json04"),
-            button1 = document.getElementById("button1"),
-            button2 = document.getElementById("button2"),
-            button3 = document.getElementById("button3"),
-            button4 = document.getElementById("button4"),
-            area1 = document.getElementById("area1"),
-            area2 = document.getElementById("area2"),
-            area3 = document.getElementById("area3"),
-            area4 = document.getElementById("area4");*/
-
         input1.addEventListener("change", compareLoadImage);
         input2.addEventListener("change", compareLoadImage);
         input3.addEventListener("change", compareLoadImage);
@@ -93,10 +96,12 @@ window.CImage = (function(){
             for (var element of elements) {
                 element.classList.toggle("hidden");
             }
+            updatePermaLink();
+            console.log("View JSON");
         });
 
-        // Do not show json as default
-        if (options.json === false) {
+        // Show json as default
+        if (options.json === true) {
             details.setAttribute("checked", "checked");
             myEvent = new CustomEvent("change");
             details.dispatchEvent(myEvent);
@@ -117,6 +122,7 @@ window.CImage = (function(){
                 }
             }
             onTop.classList.toggle("top");
+            updatePermaLink();
 
             console.log("Stacking");
         });
@@ -160,4 +166,4 @@ window.CImage = (function(){
         "compare": compareInit
     };
 
-}());
+}());