Zooming over input/radio elements

[a-espitia]

if you have radio buttons (or i'm assuming other input elements), if the state of them changes, then AnythingZoomer displays the previous state and not the current state when you zoom over again.

you can replicate this in the playground app by adding some radio buttons, zooming over them, double click, change the state of a button, then double click again, then zoom again.

[Mottie]

Hi @a-espitia!

Handling form elements isn't built-into AnythingZoomer; but you could use the zoom & unzoom callbacks to listen for changes and update the elements (demo):

Code

$(function() {
  var targets = 'select, input',
    busy = false;

  function updateEls($large, $small) {
    $large.each(function(index, el) {
      if (el.type === 'radio' || el.type == 'checkbox') {
        $small[index].checked = el.checked;
      } else {
        $small[index].value = el.value;
      }
    });
  }

  $("#zoom1").anythingZoomer({
    clone: true,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      $large.filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });

      updateEls($large, $small);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[a-espitia]

that seemed to get me a bit closer, however when the zoom it disabled, it's preventing some/most of the input elements. here's a mockup, if I did it right...

https://jsfiddle.net/aespitia/1xhk3o4b/7/

[a-espitia]

here's another slight update. if the button is pre-selected, zoom gets rid of it. for this example, i preselected radio button 3, but it appears blank, however, when i hover over it, it's there. so, it's like it kept the selection in the large, but got rid of it in the small window

https://jsfiddle.net/aespitia/1xhk3o4b/11/

[Mottie]

In the zoom funciton, I should have switched the parameters of the updateEls function; and for some reason, the overlay is interfering with form interaction - I'll fix that in the code - so I think this demo should work now:

Code

var isMagnifyEnabled = true,
  targets = 'select, input',
  busy = false;

function updateEls($large, $small) {
  $large.each(function(index, el) {
    if (el.type === 'radio' || el.type == 'checkbox') {
      $small[index].checked = el.checked;
    } else {
      $small[index].value = el.value;
    }
  });
}

function ToggleZoom() {
  if (isMagnifyEnabled) {
    $('#zoom1').anythingZoomer('disable');
    isMagnifyEnabled = false;
  } else {
    $('#zoom1').anythingZoomer('enable');
    isMagnifyEnabled = true;
  }
}
/* 
 Demo for jQuery AnythingZoomer Plugin
 https://github.com/CSS-Tricks/AnythingZoomer
 */
$(function() {
  $("#zoom1").anythingZoomer({
    clone: true,
    overlay: false,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      $large.filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });
      updateEls($small, $large);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    initialized: function(e, zoomer) {
      isMagnifyEnabled = true;
      // overlay preventing interaction with form elements
      // TODO: fix
      zoomer.$overlay.remove();
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[a-espitia]

that's awesome, i think that does cover most of it, except for the preloaded checkbox losing it's selection.

i just added checked="checked" on radio 2

https://jsfiddle.net/aespitia/1xhk3o4b/30/

[Mottie]

I moved the renaming of the groups to the init function, and re-checked the radio button because it was changed - demo

var isMagnifyEnabled = true,
  targets = 'select, input',
  busy = false;

function updateEls($large, $small) {
  $large.each(function(index, el) {
    if (el.type === 'radio' || el.type == 'checkbox') {
      $small[index].checked = el.checked;
    } else {
      $small[index].value = el.value;
    }
  });
}

function ToggleZoom() {
  if (isMagnifyEnabled) {
    $('#zoom1').anythingZoomer('disable');
    isMagnifyEnabled = false;
  } else {
    $('#zoom1').anythingZoomer('enable');
    isMagnifyEnabled = true;
  }
}
/* 
 Demo for jQuery AnythingZoomer Plugin
 https://github.com/CSS-Tricks/AnythingZoomer
 */
$(function() {
  $("#zoom1").anythingZoomer({
    clone: true,
    overlay: false,
    // zoom window visible
    zoom: function(e, zoomer) {
      var $large = zoomer.$large.find(targets),
        $small = zoomer.$small.find(targets);
      updateEls($small, $large);
      zoomer.$large.on('change, input', targets, function() {
        updateEls($large, $small);
      })
    },

    initialized: function(e, zoomer) {
      isMagnifyEnabled = true;
      // change the name attribute of the large radio buttons to
      // separate them from grouping with the small radio buttons
      zoomer.$large.find(targets).filter('[name="group"]').each(function(_, el) {
        el.name = 'group2';
      });
      zoomer.$small.find('[checked]').prop('checked', true);
      // overlay preventing interaction with form elements
      // TODO: fix
      zoomer.$overlay.remove();
    },

    // zoom window hidden
    unzoom: function(e, zoomer) {
      zoomer.$large.off('change');
    }

  });
});

[Mottie]

In the latest version, you won't need to include zoomer.$overlay.remove(); anymore.

[a-espitia]

Thank you so much for your help, this is a great library!