Jump to content
Gadgetto

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

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

Share this post


Link to post
Share on other sites

OK, this is my current solution:

(only works in UIKit admin theme)

1925690113_Bildschirmfoto2019-02-18um13_35_21.thumb.png.ba02f1b38d664d9df8c69ff5268fc182.png

  • Like 1

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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 😉 

Share this post


Link to post
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 ... 🙂

Share this post


Link to post
Share on other sites
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!

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

 

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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)? 🙂 

Share this post


Link to post
Share on other sites

I would also add

cursor: pointer;

just for good measure...

  • Like 1

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      Hi,
      for my GroupMailer module I've created a custom Fieldtype + Inputfield module which provides multi-column field values. The first field column is a visible text field and there are some other columns which are not presented to user (they are rendered as hidden form fields).

      This is the database schema:
      $schema['data'] = 'text NOT NULL'; // we're using 'data' to represent our 'subject' field $schema['sendstatus'] = 'tinyint NOT NULL DEFAULT 0'; // message send status $schema['recipients'] = "int(10) unsigned NOT NULL DEFAULT 0"; // recipients counter $schema['sent'] = "int(10) unsigned NOT NULL DEFAULT 0"; // sent counter $schema['started'] = "int(10) unsigned NOT NULL DEFAULT 0"; // message sending start $schema['finished'] = "int(10) unsigned NOT NULL DEFAULT 0"; // message sending finished This are the ___wakeupValue and ___sleepValue methods:
      Now I try to extend this Fieldtype/Inputfield to provide multi language features.
      Only the first value ("data" which represents the "subject" field) should be/needs to be multi language!
      I had a look at the built in Fieldtypes (e.g FieldtypeText & FieldtypeTextLanguage) which provides multi language support but I couldn't find a similar case (multi-value field with language support). All built in Fieldtypes are single-value fields.
      I know this is a very "general" question but maybe somebody could push me in the right direction?
    • By Gadgetto
      Hi,
      I'm starting the port of my MODX add-on GoodNews - a powerful integrated group and newsletter mailing system - to Processwire:
      http://www.bitego.com/extras/goodnews/
      I know I'll have a long and hard way to go... 🙂
      In order to plan the basic principles for my module in advance, here is my first question (more will come, that's for sure):
      GoodNews Subscribers are basically MODX users extended with the necessary meta informations to handle subscriptions and other mailing related stuff. The benefit for a subscriber being a MODX user is that it I also can use the permission system of MODX. How should I handle this in Processwire? Should subscribers also be Processwire users? Or is it better to use a custom user type? How will processwire handle lists of thousands of users?
      Thanks in advance for your help!
      Greetings,
      Martin
    • By Gadgetto
      Under MODX my Newsletter Add-On manages all mailings in its own resource containers. This is comparable to a PW page, which serves as a container for subpages.
      My newsletter module GroupMailer will also provide an administration console where you can start, stop and generally manage mailings + allows you to watch the sending status.
      What would you recommend as an experienced PW user? How should the mailings be managed in the PW module? I want to follow the PW paradigms as much as possible and also offer the greatest possible flexibility.
      Here is a screenshot from the MODX version:

      Greetings, and a Happy New Year!
      Martin
×
×
  • Create New...