Jump to content

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


Gadgetto
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

@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 ... ?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

1768556439_2019-02-2114-25-57.2019-02-2114_26_34.gif.daf074f8e625f738c0ec7a2cd9e41b0a.gif

 

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

1667584511_2019-02-2206-21-19.2019-02-2206_22_01.gif.c318b842dfb1fd80f35cae38c7c3829d.gif

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

I was talking about :focus, sorry ? 

toggle.gif.4226bb25892f6ecdea4613add8cac43b.gif

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...

toggle2.gif.367089c7676c02e6a025c10c45ff7b1a.gif

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

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

toggle3.gif.f72091dfe92926abab74f2aefb1cddb8.gif

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

toggle4.gif.561c3c11c3c095d91bd8cf90fdb71cf7.gif

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

toggle5.gif.d7867426e6292501e08175e814cdb148.gif

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...