JS Callback for toggle changing about ratchet

[fat]

this should be all event based. we can fire a toggle event on the window tho:

element.addEventListener('toggle', function () {});

[fat]

This event also bubbles, so you can add it directly to the toggle element, or just bind to the body to catch all toggles.

element.addEventListener('toggle', function (e) {
  console.log(e.target, e.detail.isActive);
});

i'm not crazy about the "isActive" name for whether you're toggling it to an on or off state… if you guys have a better name idea, i'd be open to that!

[dhg]

SWEET

[abrambailey]

Hope this helps someone else.

HTML

    <input style="visibility:hidden" type="checkbox" value="1" checked="checked"  id="user_remember_me">

    <div class="toggle" data-matcher='user_remember_me'>
      <div class="toggle-handle"></div>
    </div>

JS

  //Turns on toggle switches for any checked boxes

  var active_ids = [];
  $("input:checkbox(:checked)").each(function(){ active_ids.push($(this).attr("id")) });
  $.each( active_ids, function( key, value ) {
    $('div').find("[data-matcher='" + value + "']").addClass('active');
  });

  //Maps toggle changes to the hidden checkbox

  $('.toggle').on('click', function() {
    var inactive_ids = [];
    $('.toggle').not('active').each(function(){ inactive_ids.push($(this).attr("data-matcher")) });
    $.each( inactive_ids, function( key, value ) {
      $('#' + value).prop('checked', false);
    });
    var active_ids = [];
    $('.toggle.active').each(function(){ active_ids.push($(this).attr("data-matcher")) });
    $.each( active_ids, function( key, value ) {
      $('#' + value).prop('checked', true);
    });
  });