Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script type="text/javascript">
(function($){
$(document).bind('gform_post_render', function(e, formId, currentFormPage) {
var formSelector = '#gform_' + formId;
var $form = $(formSelector);
if ($form.data('configurator-init') === true) {
// configurator has already been initialised
return;
}
// Add the preview layers
$(formSelector + ' .gform_body .gfield.image-choices-field.config-layer').each(function(i, el){
var $field = $(this);
if (!$field.find('.ginput_container_radio').length) {
return true;
}
var layerNum = i+1;
var layerRef = 'preview-layer-' + layerNum;
var fieldID = $field.attr('id');
var $previewArea = $field.closest('form').find('.gform_body div.preview-area');
$previewArea.append('<div class="preview-layer '+layerRef+' '+fieldID+'" style="z-index:'+layerNum+';"></div>');
$field.data('layerRef', layerRef);
});
// update preview on choice click
$(document).on('click', formSelector + ' .config-layer.image-choices-field .ginput_container_radio input', function (e) {
var $input = $(this);
var inputID = $input.attr('id');
var $thisForm = $input.closest('form');
var $label = $input.next('label');
var $choice = $label.closest('.image-choices-choice');
var $field = $choice.closest('.gfield');
var $previewArea = $thisForm.find('.gform_body div.preview-area');
var layerRef = $field.data('layerRef');
var $layer = $previewArea.find('.'+layerRef);
// only update if this isn't already in the preview
if ( !$layer.find('.preview-item.' + inputID).length ) {
// if this choice is a config-reset, it clears all other layers when changed
if ( $field.hasClass('config-reset') ) {
$previewArea.find('.preview-item:not(.' + inputID + ')').remove();
}
// put selected image into the preview
var $img = $choice.find('span.image-choices-choice-image-wrap img:first').clone();
$img.attr('class', 'preview-item ' + inputID);
// handle src if lazy loading is on
if ( $img.data('src') ) {
$img.attr('src', $img.data('src') )
}
else if ( $img.data('lazy-src') ) {
$img.attr('src', $img.data('lazy-src') )
}
$layer.empty().append($img);
}
});
$form.data('configurator-init', true);
setTimeout(function(){
// start by triggering click on everything selected by default, getting them into the preview
$('.gfield.image-choices-field.config-layer:visible .ginput_container_radio input:checked').each(function(i, el){
console.log(this);
$(this).trigger('click');
});
}, 100);
});
if ( window.gform && window.gform.addAction ) {
// trigger click on any choices with default values, after conditional logic changes
window.gform.addAction('gform_post_conditional_logic_field_action', function (formId, action, targetId, defaultValues, isInit) {
if ( !isInit ) {
var $input = $(targetId);
var $field = $input.closest('.gfield');
if ( defaultValues && $field.is(':visible') && $field.hasClass('config-layer') ) {
$.each(defaultValues, function(i, inputID){
$('#'+inputID).trigger('click');
});
}
}
});
}
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment