Merge pull request #1066 from Valcob/fix/webui-checkboxes

[fix]ON OFF switch in Microsoft Edge #1049

code/html/custom.css

@@ -61,7 +61,7 @@ h2 {
 .hint {
     color: #ccc;
     font-size: 80%;
-    margin: -10px 0 10px 0;
+    margin: 0px 0 10px 0;
 }
 
 .hint a {
@@ -158,6 +158,9 @@ div.state {
 .main-buttons button {
     width: 100px;
 }
+.button-del-schedule {
+    margin-top: 15px;
+}
 
 .button-reboot,
 .button-reconnect,
@@ -233,59 +236,98 @@ span.slider {
     Checkboxes
    -------------------------------------------------------------------------- */
 
-.checkbox-container {
-	width: 130px;
-	height: 30px;
-	margin: 3px 0 10px 0px;
-	position: relative;
-	border-radius: 4px;
-	overflow: hidden;
-	user-select: none;
-	cursor: pointer;
-}
-
-.checkbox-container input {
-    display: none;
-}
-
-.inner-container {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: inherit;
-	height: inherit;
-    text-transform: uppercase;
-	font-size: .7em;
-	letter-spacing: .2em;
-}
-
-.inner-container:first-child {
-	background: #e9e9e9;
-	color: #a9a9a9;
-}
-
-.inner-container:nth-child(2) {
-	background: #c00000;
-	color: white;
-	-webkit-clip-path: inset(0 50% 0 0);
-	clip-path: inset(0 50% 0 0);
-	transition: .3s cubic-bezier(0,0,0,1);
-}
-
-.toggle {
-	width: 50%;
-	position: absolute;
-	height: inherit;
-	display: flex;
-	box-sizing: border-box;
-}
-
-.toggle p {
-	margin: auto;
-}
-
-.toggle:nth-child(1) {
-	right: 0;
+.toggleWrapper{
+    overflow: hidden;
+    width:auto;
+    height:29px;
+    border: 1px solid #AAA;
+    margin: 0px;
+    padding: 0px;
+    border-radius: 4px;
+    box-shadow: inset 1px 1px #CCC;
+}
+.toggleWrapper input{
+    position: absolute;
+    left: -99em;
+}
+label[for].toggle{
+    margin: 0px;
+    padding: 0px;
+}
+.toggle{
+    letter-spacing:normal;
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 130px;
+    height: 100%;
+    background: #e9e9e9;
+    color: #a9a9a9;
+    border-radius: 4px;
+    -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+.toggle:before, .toggle:after{
+    position: absolute;
+    line-height: 30px;
+    font-size: .7em;
+    z-index: 2;
+    -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+.toggle:before{
+    content: "NO";
+    left: 20px;
+}
+input[name="relay"] + .toggle:before{
+    content: "OFF";
+}
+.toggle:after{
+    content: "YES";
+    right: 20px;
+}
+input[name="relay"] + .toggle:after{
+    content: "ON";
+}
+.toggle__handler{
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    background: #c00000;
+    width: 50%;
+    height: 100%;
+    border-radius: 4px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    top: 0px;
+    left: 0px;
+    -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    -webkit-transform: translateX(0px);
+    transform: translateX(0px);
+}
+input:checked + .toggle:after {
+    color: #fff;
+}
+input:checked + .toggle:before {
+    color: #a9a9a9;
+}
+input + .toggle:before {
+    color: #fff;
+}
+input:checked + .toggle .toggle__handler{
+    width: 50%;
+    background: #00c000;
+    -webkit-transform: translateX(65px);
+    transform: translateX(65px);
+    border-color: #000;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+input[disabled] + .toggle .toggle__handler{
+    background: #ccc;
 }
 
 /* -----------------------------------------------------------------------------

code/html/custom.js

@@ -785,11 +785,13 @@ function addSchedule(event) {
     });
     $(line).find(".button-del-schedule").on("click", delSchedule);
     $(line).find(".button-more-schedule").on("click", moreSchedule);
+    $(line).find("input[name='schUTC']").prop("id", "schUTC" + (numSchedules + 1))
+        .next().prop("for", "schUTC" + (numSchedules + 1));
+    $(line).find("input[name='schEnabled']").prop("id", "schEnabled" + (numSchedules + 1))
+        .next().prop("for", "schEnabled" + (numSchedules + 1));
     line.appendTo("#schedules");
     $(line).find("input[type='checkbox']").prop("checked", false);
 
-    initCheckboxes();
-
     return line;
 
 }
@@ -809,7 +811,14 @@ function initRelays(data) {
         // Add relay fields
         var line = $(template).clone();
         $(".id", line).html(i);
-        $(":checkbox", line).prop('checked', data[i]).attr("data", i);
+        $(":checkbox", line).prop('checked', data[i]).attr("data", i)
+            .prop("id", "relay" + i)
+            .on("change", function (event) {
+                var id = parseInt($(event.target).attr("data"), 10);
+                var status = $(event.target).prop("checked");
+                doToggle(id, status);
+            });
+        $("label.toggle", line).prop("for", "relay" + i)
         line.appendTo("#relays");
 
         // Populate the relay SELECTs
@@ -820,57 +829,13 @@ function initRelays(data) {
 
 }
 
-function initCheckboxes() {
-
-    var setCheckbox = function(element, value) {
-        var container = $(".toggle-container", $(element));
-        if (value) {
-            container.css("-webkit-clip-path", "inset(0 0 0 50%)");
-            container.css("clip-path", "inset(0 0 0 50%)");
-            container.css("backgroundColor", "#00c000");
-        } else {
-            container.css("-webkit-clip-path", "inset(0 50% 0 0)");
-            container.css("clip-path", "inset(0 50% 0 0)");
-            container.css("backgroundColor", "#c00000");
-        }
-    }
-
-    $(".checkbox-container")
-
-        .each(function() {
-            var status = $(this).next().prop('checked');
-            setCheckbox(this, status);
-        })
-        .off('click')
-        .on('click', function() {
-
-            var checkbox = $(this).next();
-
-            var status = checkbox.prop('checked');
-            status = !status;
-            checkbox.prop('checked', status);
-            setCheckbox(this, status);
-
-            if ("relay" == checkbox.attr('name')) {
-                var id = parseInt(checkbox.attr('data'), 10);
-                doToggle(id, status);
-            }
-
-        });
-
-}
-
 function createCheckboxes() {
 
     $("input[type='checkbox']").each(function() {
 
-        var text_on = $(this).attr("on") || "YES";
-        var text_off = $(this).attr("off") || "NO";
-
-        var toggles = "<div class=\"toggle\"><p>" + text_on + "</p></div><div class=\"toggle\"><p>" + text_off + "</p></div>";
-        var content = "<div class=\"checkbox-container\"><div class=\"inner-container\">" + toggles
-            + "</div><div class=\"inner-container toggle-container\">" + toggles + "</div></div>";
-        $(this).before(content).hide();
+        if($(this).prop("name"))$(this).prop("id", $(this).prop("name"));
+        $(this).parent().addClass("toggleWrapper");
+        $(this).after('<label for="' + $(this).prop("name") + '" class="toggle"><span class="toggle__handler"></span></label>')
 
     });
 
@@ -1499,7 +1464,6 @@ function processData(data) {
     }
 
     resetOriginals();
-    initCheckboxes();
 
 }
 

code/html/index.html

@@ -633,7 +633,7 @@
                                     <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1" /></div>
                                     <div class="pure-u-0 pure-u-lg-1-2"></div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4 hint">
+                                    <div class="pure-u-1 pure-u-lg-3-4 hint"><thead>
                                         ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, even if multiple AP share the same SSID.
                                         When disabled, ESPurna will try to connect to the networks in the same order they are listed below.
                                         Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.
@@ -1390,6 +1390,7 @@
                 <label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label>
                 <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schUTC" /></div>
 
+                <div class="pure-u-0 pure-u-lg-1-2"></div>
                 <label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>
                 <div class="pure-u-2-5 pure-u-lg-1-5">
                     <input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7" />
@@ -1402,7 +1403,7 @@
                 <label class="pure-u-1 pure-u-lg-1-4">Enabled</label>
                 <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schEnabled" /></div>
 
-                <div class="pure-u-0 pure-u-lg-1-4"></div>
+                <div class="pure-u-1 pure-u-lg-1-2"></div>
                 <button class="pure-button button-del-schedule" type="button">Delete schedule</button>
             </div>
         </div>
@@ -1434,7 +1435,7 @@
         <div id="relayTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label>
-                <input name="relay" type="checkbox" on="ON" off="OFF" />
+                <div><input name="relay" type="checkbox" on="ON" off="OFF" /></div>
             </div>
         </div>