Updated JS / form.jsp

use changeColorSample() javascript function only on input.onchange evt but not on document.onload evt
dzc34 · Jun 5, 2017 · 7ffcccf · 7ffcccf
1 parent 795d7a2
commit 7ffcccf
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 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
@@ -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
@@ -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
@@ -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>