Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[fix]ON OFF switch in Microsoft Edge #1049 #1066

Merged
merged 3 commits into from
Jul 23, 2018
Merged

[fix]ON OFF switch in Microsoft Edge #1049 #1066

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4094adb
changed the look and feel of the checkboxes to resolve Edge issue and…
adivinaelnombre Jul 21, 2018
df9fecd
removed blind copy/paste console.log....
adivinaelnombre Jul 22, 2018
959bb2a
some socket debugging escaped... sorry)
adivinaelnombre Jul 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 89 additions & 54 deletions code/html/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ h2 {
.hint {
color: #ccc;
font-size: 80%;
margin: -10px 0 10px 0;
margin: 0px 0 10px 0;
}

.hint a {
Expand Down Expand Up @@ -158,6 +158,9 @@ div.state {
.main-buttons button {
width: 100px;
}
.button-del-schedule {
margin-top: 15px;
}

.button-reboot,
.button-reconnect,
Expand Down Expand Up @@ -233,59 +236,91 @@ 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;
}
.toggle{
margin: 0px !important;
padding: 0px!important;
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;
}
.toggle:after{
content: "YES";
right: 20px;
}
.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[disabled] + .toggle .toggle__handler{
background: #CCC !important;
}

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;
}

/* -----------------------------------------------------------------------------
Expand Down
67 changes: 16 additions & 51 deletions code/html/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

}
Expand All @@ -809,7 +811,15 @@ 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) {
console.log("sending message");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

leftover logging?

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
Expand All @@ -820,57 +830,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";
Copy link
Collaborator

@mcspr mcspr Jul 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Relay switch now has NO YES instead of OFF ON, maybe alternative version of this should be used? or check new for attr value in js or css

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry dude, I'm not a huge fan of hacks and workarounds so no div + proxies ). I generally like keeping things as simple as they can be.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well... does it not work only because label does the proxy by itself internally?:)
Relays are ok now. Plus, I should've thought of rules order issue...


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>')

});

Expand Down Expand Up @@ -1499,7 +1465,6 @@ function processData(data) {
}

resetOriginals();
initCheckboxes();

}

Expand Down
7 changes: 4 additions & 3 deletions code/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,7 @@ <h2>You can configure up to 5 different WiFi networks. The device will try to co
<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>.
Expand Down Expand Up @@ -1390,6 +1390,7 @@ <h2>
<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" />
Expand All @@ -1402,7 +1403,7 @@ <h2>
<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>
Expand Down Expand Up @@ -1434,7 +1435,7 @@ <h2>
<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>

Expand Down