[SOLVED] Looking for a kind of ON/OFF switch Inputfield for my GroupMailer module

[Gadgetto]

I'm looking for an ON/OFF Inputfield for my GroupMailer module I'm currently writing. (Preferably based on a core field, not 3rd party)  

I'd like to implement a quick ON/OFF switch to quickly enable/disable all sending process (an emergency stop!). The field should submit it's value immediately after state changes.

Maybe a checkbox toggle or a kind of button which is able to change it's state.

Found this forum thread for changing a checkbox field to toggle style with CSS - but it's only for UIKit admin theme:

What would you recommend?

Greetings,
Martin

[Gadgetto]

OK, this is my current solution:

(only works in UIKit admin theme)

[flydev]

With this lib for example: https://github.com/zhiyul/Switch (there are multi choice on Github), load it on your module ___init() (add it to your scripts queue) and then in your module js file, call 

var el = document.querySelector('.checkbox-switch');
var mySwitch = new Switch(el, options);

 

then do send your ajax request in the onChange event. Hope you get it. If you need a real example, just ask.

[Gadgetto]

@flydev Thanks for your hint, but I'm using @Chris Bennett's CSS only solution for now. Needs a bit of testing across different browsers but looks good so far! Only problem is, that it currently only works in UIKit admin theme. Needs a bit of rewrite for cross theme compatibility.

I don't want to add a jQuery plugin only for changing checkboxes.

[flydev]

Okay I get your point.

I made a 30 lines CSS Only switcher that should work with other theme than UiKit : https://codepen.io/flydev/pen/QYYZVL

[bernhard]

On 2/18/2019 at 1:08 PM, Gadgetto said:

The field should submit it's value immediately after state changes.

Why don't you just render a submit button in your field? When sending is ON you could just display the emergency-stop-button. When sending is OFF you could disable something like a continue-sending-button. Don't know how your module works regarding the starting of a sending process... Is it done via AJAX or via a regular form submit?

You checkbox toggle looks nice though. Many roads as always ? 

[Gadgetto]

@bernhard I've already solved this by using an InputfieldCheckbox masked by CSS to get a toggle switch. The checkbox state is submitted by JavaScript and saved to module config.

GroupMailer will have an asynchron process (which can start n parallel processes) running in background which handles the mail sending. If the toggle switch is turned off, all sending processes will immediately stop. This is in case of an emergency if something goes wrong sending out mails ... ?

[Gadgetto]

8 hours ago, flydev said:

Okay I get your point.

I made a 30 lines CSS Only switcher that should work with other theme than UiKit : https://codepen.io/flydev/pen/QYYZVL

Oh, cool! I'l have a look at it and see if it can be used in all admin themes! Thanks!

[Chris Bennett]

On 2/20/2019 at 3:56 AM, Gadgetto said:

Oh, cool! I'l have a look at it and see if it can be used in all admin themes! Thanks!

@flydev's solution should do the trick for you, nice and clean, unlike the uikit one that had to negotiate the specificity issues inherent with uikit.

If not I am happy to take a look for you.

[Gadgetto]

On 2/19/2019 at 10:25 AM, flydev said:

Okay I get your point.

I made a 30 lines CSS Only switcher that should work with other theme than UiKit : https://codepen.io/flydev/pen/QYYZVL

@flydev Thanks a lot for your code! I implemented your switcher CSS and tried to add transition to get a smooth state change. Looks great and and fits seamlessly into the UI. The checkbox label is also positioned correctly. 

The transition I added doesn't work as smooth as expected. It's a bit clumsy...
It would also be nice if the toggle switch would be based on rem/em - not px. Size scaling  would be much easier.

Here is the updated pen with the actual HTML:

https://codepen.io/gadgetto/pen/omRwXW

 

[Gadgetto]

@Chris Bennett I would be cool if you could have a look at the pen (https://codepen.io/gadgetto/pen/omRwXW) and see if we can change the hard coded px values to em/rem so size scaling would be easier. Also I don't know how to make the transition effect better (the current one is a bit clumsy).

[LostKobrakai]

https://codepen.io/LostKobrakai/pen/ZwNMxa

[Gadgetto]

6 minutes ago, LostKobrakai said:

https://codepen.io/LostKobrakai/pen/ZwNMxa

Exactly what I needed! Great!

[Gadgetto]

@LostKobrakai Just implemented this but there is still a problem with resizing of the toggle switch.

I changed the font size to .85em and the toggle looks a bit weird.

[Chris Bennett]

6 hours ago, Gadgetto said:

@LostKobrakai Just implemented this but there is still a problem with resizing of the toggle switch.

I changed the font size to .85em and the toggle looks a bit weird.

Sorry about delay, the curse of living in the Southern Hemisphere ?
I'm not seeing anything too weird when setting label and checkbox to 0.85em on @LostKobrakai's example but it may be influenced by other CSS.

If it's the alignment of the span in relation to the you toggle, you could add a little CSS for the label.
Depending on your needs you might want to add a class to the label to limit it to your toggle.

Either way, something along the lines of:
label {display:flex;align-items:center;font-size:0.85rem;} and input[type="checkbox"] {font-size:0.85em; ...should make it smaller and align the text in the middle.
 

[Gadgetto]

3 hours ago, Chris Bennett said:

Sorry about delay, the curse of living in the Southern Hemisphere ?
I'm not seeing anything too weird when setting label and checkbox to 0.85em on @LostKobrakai's example but it may be influenced by other CSS.

If it's the alignment of the span in relation to the you toggle, you could add a little CSS for the label.
Depending on your needs you might want to add a class to the label to limit it to your toggle.

Either way, something along the lines of:
label {display:flex;align-items:center;font-size:0.85rem;} and input[type="checkbox"] {font-size:0.85em; ...should make it smaller and align the text in the middle.
 

Hello Chris, could it be you are referencing the wrong CodePen? @LostKobrakai's Pen has no display:flex rule.

I'm using the code from this Pen: https://codepen.io/LostKobrakai/pen/ZwNMxa

Here is what it looks like when resized to .85em (note the small white artifact in active state):

[Gadgetto]

@Chris Bennett, @LostKobrakai I found the problem:

we need to remove this background image when UIIKit theme is active:

.uk-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

Here is the final CodePen: https://codepen.io/gadgetto/pen/WPqwLy

Thanks all for your help!

[Chris Bennett]

2 hours ago, Gadgetto said:

@Chris Bennett, @LostKobrakai I found the problem:

we need to remove this background image when UIIKit theme is active:

.uk-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

Here is the final CodePen: https://codepen.io/gadgetto/pen/WPqwLy

Thanks all for your help!

No worries mate. Yep, the label I added was just an addition for resizing the label and to ensure alignment, as I wasn't sure what other CSS was acting on it.

You are spot on with needing to over-ride the .uk-checkbox:checked but it should be nice and easy with specificity because the attribute selector [type="checkbox"] should trump the class selector.

Just add background-image:none and it should clear up the problem;

input[type="checkbox"]:checked {
  border-color: #3eb998;
  background-color: #3eb998;
  background-image:none;
}

[Chris Bennett]

Sorry, I realized after sending that your pen had already done exactly that. My apologies and nice work!

[Gadgetto]

1 minute ago, Chris Bennett said:

Sorry, I realized after sending that your pen had already done exactly that. My apologies and nice work!

It was more your nice work - so thanks for your help! ? 

This is one of the best, cleanest and CSS only drop in replacements for HTML checkboxes I ever saw! Especially that it doesn't need extra HTML elements is great!

[bernhard]

19 minutes ago, Gadgetto said:

This is one of the best, cleanest and CSS only drop in replacements for HTML checkboxes I ever saw! Especially that it doesn't need extra HTML elements is great!

Maybe you could add some nice styling if the checkbox is active (for accessibility / keyboard navigation)? ? 

[dragan]

I would also add

cursor: pointer;

just for good measure...

[Gadgetto]

35 minutes ago, dragan said:

I would also add

cursor: pointer;

just for good measure...

Done!

https://codepen.io/gadgetto/pen/WPqwLy

[Gadgetto]

1 hour ago, bernhard said:

Maybe you could add some nice styling if the checkbox is active (for accessibility / keyboard navigation)? ? 

Hmm.. any hint? The toggle misses an outline that's true...

[bernhard]

I was talking about :focus, sorry ? 

https://codepen.io/baumrock/pen/bzPrLV

Edit: First I liked the styling of your toggle a lot, but looking at it closer, the drop-shadow is out of the surrounding container which does not look great. I changed my pen and removed the box-shadow and increased the border width to 2px. Not saying that this version is better - was just playing around with it...

What do you think about this one with box-shadow but no vertical offset?

https://codepen.io/baumrock/pen/zeVErm

Ok, making the border green on focus is pretty, but does not work, because you'll not see the focus-state on checked checkboxes! I changed it to make the background dark grey (green would be prettier but misleading):

https://codepen.io/baumrock/pen/bzPrLV

Not so bad IMHO. This version also has horizontal shadow and it has 2px border instead of 1px.

Ok, another one ?

https://codepen.io/baumrock/pen/pGXWxO