Skip to content

Instantly share code, notes, and snippets.

@zackpyle
Last active March 21, 2024 17:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zackpyle/72b0499224868a5f077a4874b2ca9898 to your computer and use it in GitHub Desktop.
Save zackpyle/72b0499224868a5f077a4874b2ca9898 to your computer and use it in GitHub Desktop.
This is definitely not the best way to do this, but I modified the Powerpack Testimonial Slider to be a generic slider using js and css. I wouldn't recommend doing this haha
/*Turn Testimonials Module into Generic Slider*/
.fl-builder-pp-testimonials-settings h1,
.fl-builder-pp-testimonials-settings .fl-builder-settings-tabs a:nth-child(2),
.fl-builder-pp-testimonials-settings .fl-builder-settings-tabs a:nth-child(3),
.fl-builder-pp-testimonials-settings #fl-builder-settings-section-heading_fonts,
.fl-builder-pp-testimonials-settings #fl-builder-settings-section-subtitle_fonts{
display: none;
}
.slider-module.fl-builder-pp-testimonials-settings h1{
display: block;
}
.slider-module.fl-builder-pp-testimonials-settings .fl-builder-settings-tabs a:nth-child(2){
display: flex;
}
.fl-builder-pp-testimonials-settings h1::before,
.fl-builder-pp-testimonials-settings #fl-field-heading,
.fl-builder-pp-testimonials-settings #fl-builder-settings-section-image_box,
[data-type="pp_testimonials_form"] #fl-field-subtitle,
[data-type="pp_testimonials_form"] #fl-field-photo{
display: none !important;
}
jQuery(document).ready(function ($) {
if (typeof window.FLBuilderConfig !== 'undefined') {
// Turn Testimonials Module into Generic Slider
FLBuilder.addHook('settings-form-init', function() {
if ($('form.fl-builder-settings').hasClass('fl-builder-pp-testimonials-settings')) {
$('.fl-lightbox-header h1').text('Slider');
$('form.fl-builder-pp-testimonials-settings').addClass('slider-module');
$('.fl-builder-settings-tabs a:nth-child(2)').text('Content');
$('#fl-builder-settings-section-title_fonts > .fl-builder-settings-section-header > button.fl-builder-settings-title').text('Heading');
$('#fl-builder-settings-tab-layouts input[name="testimonial_layout"]').val('5');
$('form.fl-builder-pp-testimonials-settings').find('label:contains("Testimonial"), a:contains("Testimonial")').each(function() {
$(this).html($(this).html().replace(/Testimonial/g, 'Slide'));
});
$('#fl-builder-blocks-content-modules---powerpack [data-type="pp-testimonials"] .fl-builder-block-title').text('Slider');
// Mutation observer to handle dynamically added new "Slide"
const observerFormChanges = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
$('form.fl-builder-pp-testimonials-settings').find('label:contains("Testimonial"), a:contains("Testimonial")').each(function() {
$(this).html($(this).html().replace(/Testimonial/g, 'Slide'));
});
}
});
});
const configFormChanges = { childList: true, subtree: true };
const targetNodeFormChanges = document.querySelector('form.fl-builder-pp-testimonials-settings .fl-form-table');
if (targetNodeFormChanges) {
observerFormChanges.observe(targetNodeFormChanges, configFormChanges);
}
}
$('form.fl-builder-settings[data-type="pp_testimonials_form"]').find('#fl-field-title .fl-field-label label').text('Heading');
});
$('button[data-view="powerpackmodules"]').on('click', function() {
setTimeout(function() {
// Change the module title to 'Slider'
$('#fl-builder-blocks-content-modules---powerpack [data-type="pp-testimonials"] .fl-builder-block-title').text('Slider');
// Replace the module icon with new SVG
$('#fl-builder-blocks-content-modules---powerpack [data-type="pp-testimonials"] .fl-builder-block-icon').html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"></rect><g><path d="M5 14V6h10v8H5zm-3-1V7h2v6H2zm4-6v6h8V7H6zm10 0h2v6h-2V7zm-3 2V8H7v1h6zm0 3v-2H7v2h6z"></path></g></svg>');
}, 150); // Adjust timeout as needed
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment