From 7a0626d9bf498a942abc8995ff438eb351b352a3 Mon Sep 17 00:00:00 2001 From: Mikael Roos Date: Fri, 8 May 2015 09:38:12 +0200 Subject: [PATCH] Add permalink to setup for comparing images with webroot/compare/compare.php, fix #92. --- REVISION.md | 2 ++ webroot/compare/compare.php | 28 ++++++++++++---- webroot/js/cimage.js | 66 ++++++++++++++++++++----------------- 3 files changed, 60 insertions(+), 36 deletions(-) diff --git a/REVISION.md b/REVISION.md index 6f49275..7c87858 100644 --- a/REVISION.md +++ b/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. diff --git a/webroot/compare/compare.php b/webroot/compare/compare.php index 05d9ec2..98c078a 100644 --- a/webroot/compare/compare.php +++ b/webroot/compare/compare.php @@ -43,13 +43,15 @@ input[type=text] {

Compare images

Add link to images and visually compare them. Change the link och press return to load the image. Read more...

+

+





-
+

@@ -66,25 +68,25 @@ input[type=text] {
Image 1
- 

+        
     

 
     

         Image 2

         
-        

+        
     

 
     

         Image 3

         
-        

+        
     

 
     

         Image 4

         
-        

+        
     

 
 
@@ -96,9 +98,23 @@ input[type=text] {
 
 
diff --git a/webroot/js/cimage.js b/webroot/js/cimage.js
index 75b0b84..6aa2b7b 100644
--- a/webroot/js/cimage.js
+++ b/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
     };
 
-}());
\ No newline at end of file
+}());