Skip to content

Commit 2f63853

Browse files
SebastianWizSebastianWiz
authored
gcoai-stream-loading-text-animation.php: Added a new snippet for customizing the Steam field's loading text.
1 parent 45b8256 commit 2f63853

File tree

1 file changed

+66
-59
lines changed

1 file changed

+66
-59
lines changed

‎gc-openai/gcoai-stream-loading-text-animation.php‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
/**
33
* Gravity Connect // OpenAI // Stream Loading Text Animation
44
*
5-
* Adds a customizable shimmer animation and rotating spinner icon to the Stream field's
6-
* loading placeholders. Replaces the static "Loading..." text with animated text and/or
5+
* Adds a customizable shimmer animation and rotating spinner icon to the Stream field's
6+
* loading placeholders. Replaces the static "Loading..." text with animated text and/or
77
* a rotating spinner icon.
88
*/
99
class GCOAI_Loading_Animation {
1010

1111
private $args;
12+
private static $styles_output = false;
1213

1314
public function __construct( $args = array() ) {
1415
$this->args = wp_parse_args( $args, array(
@@ -20,18 +21,19 @@ public function __construct( $args = array() ) {
2021
'show_spinner' => false,
2122
'spinner_size' => '24',
2223
'form_id' => null,
23-
'field_id' => null,
2424
) );
2525

2626
add_filter( 'gform_gcoai_field_loading_text', array( $this, 'filter_loading_text' ), 10, 3 );
27-
add_action( 'gform_register_init_scripts', array( $this, 'register_init_script' ), 10, 2 );
27+
add_action( 'gform_register_init_scripts', array( $this, 'register_init_script' ), 10, 3 );
28+
add_action( 'wp_head', array( $this, 'output_styles' ) );
29+
add_action( 'admin_head', array( $this, 'output_styles' ) );
2830
}
2931

30-
public function register_init_script( $form, $is_ajax ) {
32+
public function register_init_script( $form, $field_values, $is_ajax ) {
3133
if ( empty( $form['id'] ) ) {
3234
return;
3335
}
34-
36+
3537
// If form_id is specified, only run scripts on those forms
3638
if ( $this->args['form_id'] !== null ) {
3739
$form_ids = is_array( $this->args['form_id'] ) ? $this->args['form_id'] : array( $this->args['form_id'] );
@@ -42,57 +44,71 @@ public function register_init_script( $form, $is_ajax ) {
4244

4345
$markup = $this->get_shimmer_markup();
4446
$css = $this->get_styles_css();
45-
46-
?>
47-
<script type="text/javascript">
48-
(function($) {
49-
var shimmerMarkup = <?php echo wp_json_encode( $markup ); ?>;
50-
var shimmerStyles = <?php echo wp_json_encode( $css ); ?>;
51-
52-
function addStylesToPage() {
53-
if ( ! $('style.gw-gcoai-shimmer-style').length ) {
54-
$('<style>')
55-
.addClass('gw-gcoai-shimmer-style')
56-
.text(shimmerStyles)
57-
.appendTo('head');
47+
48+
$script = sprintf(
49+
"(function($) {
50+
var shimmerMarkup = %s;
51+
var shimmerStyles = %s;
52+
53+
function addStylesToPage() {
54+
if ( ! $('style.gw-gcoai-shimmer-style').length ) {
55+
$('<style>')
56+
.addClass('gw-gcoai-shimmer-style')
57+
.text(shimmerStyles)
58+
.appendTo('head');
59+
}
5860
}
59-
}
6061
61-
function applyShimmerToPlaceholders($container) {
62-
var $searchContext = $container && $container.length ? $container : $(document);
63-
$searchContext.find('.gcoai-output .gcoai-placeholder').html(shimmerMarkup);
64-
}
62+
function applyShimmerToPlaceholders(\$container) {
63+
var \$searchContext = \$container && \$container.length ? \$container : $(document);
64+
\$searchContext.find('.gcoai-output .gcoai-placeholder').html(shimmerMarkup);
65+
}
66+
67+
if ( window.gform && typeof window.gform.addFilter === 'function' ) {
68+
window.gform.addFilter('gcoai_stream_loading_placeholder', function(current, instance) {
69+
return shimmerMarkup;
70+
});
71+
}
6572
66-
if ( window.gform && typeof window.gform.addFilter === 'function' ) {
67-
window.gform.addFilter('gcoai_stream_loading_placeholder', function(current, instance) {
68-
return shimmerMarkup;
73+
$(function() {
74+
addStylesToPage();
75+
applyShimmerToPlaceholders();
6976
});
70-
}
7177
72-
$(function() {
73-
addStylesToPage();
74-
applyShimmerToPlaceholders();
75-
});
78+
// Re-apply after Generate/Regenerate clicks
79+
$(document).on('click', '.gcoai-trigger, .gcoai-regenerate', function() {
80+
setTimeout(function() {
81+
applyShimmerToPlaceholders();
82+
}, 50);
83+
});
7684
77-
// Re-apply after Generate/Regenerate clicks
78-
$(document).on('click', '.gcoai-trigger, .gcoai-regenerate', function() {
79-
setTimeout(function() {
85+
// Re-apply after AJAX completes
86+
$(document).ajaxComplete(function() {
8087
applyShimmerToPlaceholders();
81-
}, 50);
82-
});
83-
84-
// Re-apply after AJAX completes
85-
$(document).ajaxComplete(function() {
86-
applyShimmerToPlaceholders();
87-
});
88-
})(jQuery);
89-
</script>
90-
<?php
88+
});
89+
})(jQuery);",
90+
wp_json_encode( $markup ),
91+
wp_json_encode( $css )
92+
);
93+
94+
GFFormDisplay::add_init_script( $form['id'], 'gcoai_loading_animation', GFFormDisplay::ON_PAGE_RENDER, $script );
95+
}
96+
97+
public function output_styles() {
98+
// Prevent duplicate output
99+
if ( self::$styles_output ) {
100+
return;
101+
}
102+
103+
$css = $this->get_styles_css();
104+
echo '<style class="gw-gcoai-shimmer-style">' . $css . '</style>';
105+
106+
self::$styles_output = true;
91107
}
92108

93109
public function get_shimmer_markup() {
94110
$spinner = '';
95-
111+
96112
if ( $this->args['show_spinner'] ) {
97113
$spinner = sprintf(
98114
'<svg class="shimmer-spinner" xmlns="http://www.w3.org/2000/svg" width="%s" height="%s" stroke="%s" viewBox="0 0 24 24">
@@ -107,7 +123,7 @@ public function get_shimmer_markup() {
107123
}
108124

109125
$text_class = $this->args['show_shimmer'] ? 'shimmer' : 'shimmer-text';
110-
126+
111127
return sprintf(
112128
'<span class="shimmer-wrapper">%s<span class="%s">%s</span></span>',
113129
$spinner,
@@ -120,31 +136,23 @@ public function filter_loading_text( $placeholder, $field, $form = null ) {
120136
if ( ! class_exists( '\\GC_OpenAI\\Fields\\Stream' ) || ! $field instanceof \GC_OpenAI\Fields\Stream ) {
121137
return $placeholder;
122138
}
123-
139+
124140
// If form_id is specified, only apply to those forms
125141
if ( $this->args['form_id'] !== null ) {
126142
$form_ids = is_array( $this->args['form_id'] ) ? $this->args['form_id'] : array( $this->args['form_id'] );
127143
if ( $form && ! in_array( rgar( $form, 'id' ), $form_ids ) ) {
128144
return $placeholder;
129145
}
130146
}
131-
132-
// If field_id is specified, only apply to those fields
133-
if ( $this->args['field_id'] !== null ) {
134-
$field_ids = is_array( $this->args['field_id'] ) ? $this->args['field_id'] : array( $this->args['field_id'] );
135-
if ( ! in_array( rgar( $field, 'id' ), $field_ids ) ) {
136-
return $placeholder;
137-
}
138-
}
139-
147+
140148
return $this->get_shimmer_markup();
141149
}
142150

143151
private function get_styles_css() {
144152
$base = esc_attr( $this->args['base_color'] );
145153
$shimmer = esc_attr( $this->args['shimmer_color'] );
146154
$dur = esc_attr( $this->args['shimmer_duration'] );
147-
155+
148156
return
149157
".shimmer-wrapper { display: inline-flex; align-items: center; gap: 8px; } " .
150158
".shimmer-spinner { flex-shrink: 0; } " .
@@ -169,5 +177,4 @@ private function get_styles_css() {
169177
'show_spinner' => true,
170178
'spinner_size' => '16',
171179
// 'form_id' => 123, // Uncomment and set to target specific form(s): 123 or array( 18, 22, 35 )
172-
// 'field_id' => 4, // Uncomment and set to target specific field(s): 5 or array( 5, 7, 12 )
173180
) );

0 commit comments

Comments
 (0)