From 7ffcccf98a5443cba0268ca1e89c1e94fb2c81f9 Mon Sep 17 00:00:00 2001
From: Fabrice Gangler <fabrice@asqatasun.org>
Date: Mon, 5 Jun 2017 19:03:05 +0200
Subject: [PATCH] Updated JS / form.jsp

use changeColorSample() javascript function
only on input.onchange evt
but not on document.onload evt
---
 .../main/webapp/Css/30-contrast-finder.css    | 21 ++++++++++++++++++-
 .../src/main/webapp/Js/36-sample.color.js     |  5 ++---
 .../src/main/webapp/WEB-INF/pages/form.jsp    | 20 ++++++++++++++----
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/contrast-finder-webapp/src/main/webapp/Css/30-contrast-finder.css b/contrast-finder-webapp/src/main/webapp/Css/30-contrast-finder.css
index 07a95674..603eff6e 100644
--- a/contrast-finder-webapp/src/main/webapp/Css/30-contrast-finder.css
+++ b/contrast-finder-webapp/src/main/webapp/Css/30-contrast-finder.css
@@ -74,15 +74,34 @@ code {
     margin-right: 15px;
     margin-top: -35px;
 }
+
     #contrast-finder-logo a:hover {
-        opacity: .8;
+        opacity: .75;
     }
     #contrast-finder-logo img  {
         width: 100%;
         height: 100%;
         border:0;
+        /*
+        -webkit-transition:-webkit-transform .9s; // Chrome Safari
+        -moz-transition:-moz-transform .9s;       // Mozilla
+        -o-transition:-o-transform .9s;           // Opéra
+        -ms-transition:-ms-transform .9s;         // IE
+        transition:transform .9s;
+        */
+    }
+
+    #contrast-finder-logo img:hover{
+        /*
+        -webkit-transform:rotate(-10deg);
+        -moz-transform:rotate(-10deg);
+        -o-transform:rotate(-10deg);
+        -ms-transform:rotate(-10deg);
+        transform:rotate(-10deg);
+        */
     }
 
+
 #initial-contrast {
     margin-bottom: 3px;
 }
diff --git a/contrast-finder-webapp/src/main/webapp/Js/36-sample.color.js b/contrast-finder-webapp/src/main/webapp/Js/36-sample.color.js
index aaa5a1cb..13d7a0b3 100644
--- a/contrast-finder-webapp/src/main/webapp/Js/36-sample.color.js
+++ b/contrast-finder-webapp/src/main/webapp/Js/36-sample.color.js
@@ -1,9 +1,8 @@
 $(document).ready(function() {
-    changeColorSample("foreground");
-    changeColorSample("background");
+    // changeColorSample("foreground");
+    // changeColorSample("background");
     document.getElementById("foreground-input").onchange = function() {
         changeColorSample("foreground");
-        console.log("change foreground Appel");
     };
     document.getElementById("background-input").onchange = function() {
         changeColorSample("background");
diff --git a/contrast-finder-webapp/src/main/webapp/WEB-INF/pages/form.jsp b/contrast-finder-webapp/src/main/webapp/WEB-INF/pages/form.jsp
index 032e6f61..eca336ad 100644
--- a/contrast-finder-webapp/src/main/webapp/WEB-INF/pages/form.jsp
+++ b/contrast-finder-webapp/src/main/webapp/WEB-INF/pages/form.jsp
@@ -46,8 +46,14 @@
                             <c:choose>
                                 <c:when test="${not empty foregroundOnError}">
                                     <c:set var="foregroundOnError" value="has-error"/>
+                                    <c:set var="foregroundSampleClass"  value=""/>
+                                    <c:set var="foregroundSampleStyle"  value="background-color:rgba(0,0,0,0);"/>
+                                    <c:set var="foregroundInvalidStyle" value="display:inherit;"/>
                                 </c:when>
                                 <c:otherwise>
+                                    <c:set var="foregroundSampleClass"  value="color-sample sample-bordered"/>
+                                    <c:set var="foregroundSampleStyle"  value="background-color:${colorModel.foreground};"/>
+                                    <c:set var="foregroundInvalidStyle" value="display:none;"/>
                                 </c:otherwise>
                             </c:choose>
                             <div class="form-group ${foregroundOnError}">
@@ -56,8 +62,8 @@
                                     <form:input id="foreground-input" path="foreground" type="text" class="form-control"/>
                                     <span class="help-block"><fmt:message key="form.help"/></span>
                                 </div>
-                                <div id="foreground-sample" class="col-lg-2 color-sample sample-bordered">
-                                    <span id="foreground-sample-invalid" class="invalid-color"><fmt:message key="form.invalidColor"/></span>
+                                <div id="foreground-sample" class="col-lg-2 ${foregroundSampleClass}" style="${foregroundSampleStyle}">
+                                    <span id="foreground-sample-invalid" style="${foregroundInvalidStyle}" class="invalid-color"><fmt:message key="form.invalidColor"/></span>
                                 </div>
                             </div>
 
@@ -68,8 +74,14 @@
                             <c:choose>
                                 <c:when test="${not empty backgroundOnError}">
                                     <c:set var="backgroundOnError" value="has-error"/>
+                                    <c:set var="backgroundSampleClass"  value=""/>
+                                    <c:set var="backgroundSampleStyle"  value="background-color:rgba(0,0,0,0);"/>
+                                    <c:set var="backgroundInvalidStyle" value="display:inherit;"/>
                                 </c:when>
                                 <c:otherwise>
+                                    <c:set var="backgroundSampleClass"  value="color-sample sample-bordered"/>
+                                    <c:set var="backgroundSampleStyle"  value="background-color:${colorModel.background};"/>
+                                    <c:set var="backgroundInvalidStyle" value="display:none;"/>
                                 </c:otherwise>
                             </c:choose>
                             <div class="form-group ${backgroundOnError}">
@@ -78,8 +90,8 @@
                                     <form:input id="background-input" path="background" type="text" class="form-control"/>
                                     <span class="help-block"><fmt:message key="form.help"/></span>
                                 </div>
-                                <div id="background-sample" class="col-lg-2 color-sample sample-bordered">
-                                    <span id="background-sample-invalid" class="invalid-color"><fmt:message key="form.invalidColor"/></span>
+                                <div id="background-sample" class="col-lg-2 ${backgroundSampleClass}" style="${backgroundSampleStyle}">
+                                    <span id="background-sample-invalid" style="${backgroundInvalidStyle}" class="invalid-color"><fmt:message key="form.invalidColor"/></span>
                                 </div>
                             </div>