Skip to content

Issue fixes/ff style update #1974

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Crabcyborg merged 3 commits into from
Sep 10, 2024
Merged

Issue fixes/ff style update #1974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5bbcc64
suport rgba color in quick settings, update FrmBackgroundImageStyleCo…
Liviu-p Sep 10, 2024
1c202f3
Merge branch 'master' into feature/ff-style-update
Liviu-p Sep 10, 2024
8f26d2b
move colordebouncer for quick settings components outside PRO check
Liviu-p Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions classes/views/styles/_buttons.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,21 @@
<div class="frm-tabs-slide-track frm-flex-box">
<div class="frm-active">
<div class="frm_grid_container">
<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Background Image', 'formidable' ); ?></label></div>
<div class="frm7 frm_form_field">
<?php
new FrmBackgroundImageStyleComponent(
$frm_style->get_field_name( 'submit_bg_color' ),
$style->post_content['submit_bg_color'],
array(
'id' => 'frm_submit_bg_color',
'frm_style' => $frm_style,
'style' => $style,
'action_slug' => 'submit_bg_color',
'image_id_input_name' => 'submit_bg_img',
)
);
?>
</div>

<?php
new FrmBackgroundImageStyleComponent(
$frm_style->get_field_name( 'submit_bg_color' ),
$style->post_content['submit_bg_color'],
array(
'title' => __( 'Background Image', 'formidable' ),
'id' => 'frm_submit_bg_color',
'frm_style' => $frm_style,
'style' => $style,
'action_slug' => 'submit_bg_color',
'image_id_input_name' => 'submit_bg_img',
'include_additional_settings' => false,
)
);
?>
<div class="frm5 frm_form_field">
<label class="frm-style-item-heading"><?php esc_html_e( 'Font Color', 'formidable' ); ?></label>
</div>
Expand Down
31 changes: 15 additions & 16 deletions classes/views/styles/_general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,21 @@
<input type="text" name="<?php echo esc_attr( $frm_style->get_field_name( 'font' ) ); ?>" id="frm_font" value="<?php echo esc_attr( $style->post_content['font'] ); ?>" placeholder="<?php esc_attr_e( 'Inherit from theme', 'formidable' ); ?>" class="frm_full_width" />
</p>

<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Background', 'formidable' ); ?></label></div>
<div class="frm7 frm_form_field">
<?php
new FrmBackgroundImageStyleComponent(
$frm_style->get_field_name( 'fieldset_bg_color' ),
$style->post_content['fieldset_bg_color'],
array(
'id' => 'frm_fieldset_bg_color',
'frm_style' => $frm_style,
'style' => $style,
'action_slug' => 'fieldset_bg_color',
'image_id_input_name' => 'bg_image_id',
)
);
?>
</div>
<?php
new FrmBackgroundImageStyleComponent(
$frm_style->get_field_name( 'fieldset_bg_color' ),
$style->post_content['fieldset_bg_color'],
array(
'title' => __( 'Background', 'formidable' ),
'id' => 'frm_fieldset_bg_color',
'frm_style' => $frm_style,
'style' => $style,
'action_slug' => 'fieldset_bg_color',
'image_id_input_name' => 'bg_image_id',
'include_additional_settings' => true,
)
);
?>

<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php esc_html_e( 'Alignment', 'formidable' ); ?></label></div>
<div class="frm7 frm_form_field">
Expand Down
2 changes: 1 addition & 1 deletion classes/views/styles/_styles-edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// It is accessed from /wp-admin/admin.php?page=formidable-styles&frm_action=edit&form=782
?>
<div id="frm_style_sidebar" class="frm-right-panel frm-fields frm_wrap frm-p-6">
<form id="frm_styling_form" method="post" action="<?php echo esc_url( FrmStylesHelper::get_edit_url( $style, $form->id ) ); ?>">
<form id="frm_styling_form" method="post" action="<?php echo esc_url( FrmStylesHelper::get_edit_url( $style, $form->id, FrmAppHelper::get_param( 'section' ) ) ); ?>">
<input type="hidden" name="ID" value="<?php echo esc_attr( $style->ID ); ?>" />
<input type="hidden" name="frm_action" value="save" />

Expand Down
36 changes: 29 additions & 7 deletions classes/views/styles/components/templates/background-image.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@
die( 'You are not allowed to call this page directly.' );
}
?>
<div class="frm-style-component frm-background-image-component">
<span class="frm-flex-justify" tabindex="0">
<input type="text" <?php echo esc_attr( $field_name ); ?> id="<?php echo esc_attr( $component['id'] ); ?>" class="hex" value="<?php echo esc_attr( $field_value ); ?>" size="4" <?php do_action( 'frm_style_settings_input_atts', $component['action_slug'] ); ?> />
<?php
<div class="frm5 frm_form_field"><label class="frm-style-item-heading"><?php echo esc_html( $component['title'] ); ?></label></div>
<div class="frm7 frm_form_field">
<div class="frm-style-component frm-background-image-component">
<span class="frm-flex-justify" tabindex="0">
<input type="text" <?php echo esc_attr( $field_name ); ?> id="<?php echo esc_attr( $component['id'] ); ?>" class="hex" value="<?php echo esc_attr( $field_value ); ?>" size="4" <?php do_action( 'frm_style_settings_input_atts', $component['action_slug'] ); ?> />
<?php
/**
* Prompt Pro to load the upload button along with its functionalities.
* Before it was loaded via frm_style_settings_general_section_after_background action hook.
*
* @since x.x
*/
do_action(
'frm_style_settings_general_section_after_background',
'frm_style_settings_bg_image_component_upload_button',
array(
'frm_style' => $component['frm_style'],
'style' => $component['style'],
Expand All @@ -25,5 +33,19 @@
<?php
}
?>
</span>
</div>
</span>
</div>
</div>
<?php
if ( ! empty( $component['include_additional_settings'] ) ) {
/**
* Prompt Pro to load the additional background image options like "Image Opacity".
*/
do_action(
'frm_style_settings_general_section_after_background',
array(
'frm_style' => $component['frm_style'],
'style' => $component['style'],
)
);
}
26 changes: 18 additions & 8 deletions js/admin/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,15 +273,21 @@

/**
* This function is used to update the form action when switching from the advanced settings and quick-settings.
* @param {object} target The submit button event target
* @returns {void}
* @param {Object} target The submit button event target
* @return {void}
*/
function switchAdvancedSettingsFormAction( target ) {
const form = document.querySelector( '#frm_styling_form' );
if ( 'frm-style-advanced-settings-button' !== target.id || null === form ) {
if ( null === form ) {
return;
}
if ( target.closest( 'a#frm_style_back_to_quick_settings' ) ) {
form.action = form.action.replace( '&section=advanced-settings', '' );
return;
}
form.setAttribute( 'action', form.getAttribute( 'action' ) + '&section=advanced-settings' );
if ( 'frm-style-advanced-settings-button' === target.id ) {
form.action += '&section=advanced-settings';
}
}

/**
Expand Down Expand Up @@ -1157,17 +1163,21 @@
});

jQuery( 'input.hex' ).wpColorPicker({
change: function( event ) {
const hexcolor = jQuery( this ).wpColorPicker( 'color' );
change: function( event, ui ) {
let color = jQuery( this ).wpColorPicker( 'color' );
trackUnsavedChange();
if ( ui.color._alpha < 1 ) {
// If there's transparency, use RGBA
color = ui.color.toCSS( 'rgba' );
}
debouncedColorChange( event, color );

if ( null !== event.target.getAttribute( 'data-alpha-color-type' ) ) {
debouncedColorChange( event, hexcolor );
debouncedPreviewUpdate();
return;
}

jQuery( event.target ).val( hexcolor ).trigger( 'change' );
jQuery( event.target ).val( color ).trigger( 'change' );
}
});
jQuery( '.wp-color-result-text' ).text( function( _, oldText ) {
Expand Down
2 changes: 1 addition & 1 deletion js/formidable_dashboard.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/formidable_styles.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/formidable_styles.js.map
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 16 additions & 2 deletions js/src/admin/styles/slider-style-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,13 +204,27 @@ export default class frmSliderStyleComponent {
* Initializes the position of sliders when a style accordion section is opened.
*/
initSlidersPosition() {
const accordionitems = document.querySelectorAll( '#frm_style_sidebar .accordion-section h3' );
const quickSettings = document.querySelector( '.frm-quick-settings' );
const accordionitems = document.querySelectorAll( '#frm_style_sidebar .accordion-section h3' );
const quickSettings = document.querySelector( '.frm-quick-settings' );
const openedAccordion = document.querySelector( '.accordion-section.open' );

// Detect if upload background image upload has triggered and initialize the "Image Opacity" slider width.
wp.hooks.addAction( 'frm_pro_on_bg_image_upload', 'formidable', ( event ) => {
const imageBackgroundOpacitySlider = event.closest( '.accordion-section-content' ).querySelector( '#frm-bg-image-opacity-slider' );
this.initSlidersWidth( imageBackgroundOpacitySlider );
});

// init the sliders width from "Quick Settings" page.
if ( null !== quickSettings ) {
this.initSlidersWidth( quickSettings );
}

// Init the sliders width in opened accordion section from "Advanced Settings" page.
if ( null !== openedAccordion ) {
this.initSlidersWidth( openedAccordion );
}

// init the sliders width everytime when an accordion section is opened from "Advanced Settings" page.
accordionitems.forEach( ( item ) => {
item.addEventListener( 'click', ( event ) => {
this.initSlidersWidth( event.target.closest( '.accordion-section' ) );
Expand Down