Merge pull request #1496 from sapayth/enhance/form_builder_field_clou…

…dflare_turnstile enhance: form builder field Cloudflare Turnstile
weDevsOfficial · Nov 11, 2024 · 58a3680 · 58a3680
2 parents 2decc63 + 6aa3b3f
commit 58a3680
Show file tree

Hide file tree

Showing 24 changed files with 614 additions and 89 deletions.
diff --git a/Lib/WeDevs_Settings_API.php b/Lib/WeDevs_Settings_API.php
@@ -140,6 +140,7 @@ function admin_init() {
                     'max'               => isset( $option['max'] ) ? $option['max'] : '',
                     'step'              => isset( $option['step'] ) ? $option['step'] : '',
                     'is_pro_preview'    => ! empty( $option['is_pro_preview'] ) ? $option['is_pro_preview'] : false,
+                    'depends_on'        => ! empty( $option['depends_on'] ) ? $option['depends_on'] : '',
                 );
 
                 add_settings_field( $section . '[' . $option['name'] . ']', $option['label'], (isset($option['callback']) ? $option['callback'] : array($this, 'callback_' . $type )), $section, $section, $args );
@@ -173,14 +174,17 @@ public function get_field_description( $args ) {
      * @param array   $args settings field args
      */
     function callback_text( $args ) {
-
         $value       = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
         $size        = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
         $type        = isset( $args['type'] ) ? $args['type'] : 'text';
         $placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';
         $disabled    = ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ? 'disabled' : '';
+        $depends_on  = ! empty( $args['depends_on'] ) ? $args['depends_on'] : '';
 
-        $html        = sprintf( '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled );
+        $html        = sprintf(
+            '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" />',
+            $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
+        );
         $html       .= $this->get_field_description( $args );
 
         if ( ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ) {
@@ -460,6 +464,38 @@ function callback_color( $args ) {
         echo $html;
     }
 
+    /**
+     * Displays a toggle field for a settings field
+     *
+     * @param array   $args settings field args
+     */
+    public function callback_toggle( $args ) {
+        $value    = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
+        $disabled = ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ? 'disabled' : '';
+        $name = $args['section'] . '[' . $args['id'] . ']';
+        ?>
+        <fieldset>
+            <label for="<?php echo 'wpuf-' . $name; ?>" class="wpuf-toggle-switch">
+                <input
+                    type="hidden"
+                    name="<?php echo $name; ?>"
+                    value="off" />
+                <input
+                    type="checkbox"
+                    <?php echo $value === 'on' ? 'checked' : ''; ?>
+                    <?php echo $disabled ? 'disabled' : ''; ?>
+                    id="<?php echo 'wpuf-' . $name; ?>"
+                    name="<?php echo $name; ?>"
+                    class="wpuf-toggle-module checkbox"
+                    value="on">
+                <span class="slider round"></span>
+            </label>
+        </fieldset>
+
+        <?php echo $args['desc']; ?>
+        <?php
+    }
+
     /**
      * Sanitize callback for Settings API
      *
@@ -673,6 +709,44 @@ function(){
 
                 // disable the pro preview checkboxes
                 $('span.pro-icon-title').siblings('input[type="checkbox"]').prop('disabled', true);
+
+                var fields = $('table.form-table input, table.form-table select, table.form-table textarea');
+
+                // iterate over each field and check if it depends on another field
+                fields.each(function() {
+                    var $this = $(this);
+                    var data_depends_on = $this.data('depends-on');
+
+                    if (!data_depends_on) {
+                        return;
+                    }
+
+                    var $depends_on = $("input[id*='"+ data_depends_on +"']");
+                    var $depends_on_type = $depends_on.attr('type');
+
+                    if ($depends_on_type === 'checkbox') {
+                        if ($depends_on.is(':checked')) {
+                            $this.closest('tr').show();
+                        } else {
+                            $this.closest('tr').hide();
+                        }
+                        $depends_on.on('change', function() {
+                            if ($(this).is(':checked')) {
+                                $this.closest('tr').show();
+                            } else {
+                                $this.closest('tr').hide();
+                            }
+                        });
+                    } else {
+                        $depends_on.on('keyup change', function() {
+                            if ($(this).val() === $this.data('depends-on-value')) {
+                                $this.closest('tr').show();
+                            } else {
+                                $this.closest('tr').hide();
+                            }
+                        });
+                    }
+                });
             });
         </script>
 

diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js
@@ -0,0 +1,36 @@
+/**
+ * Field template: Cloudflare Turnstile
+ */
+Vue.component('form-cloudflare_turnstile', {
+    template: '#tmpl-wpuf-form-cloudflare_turnstile',
+
+    mixins: [
+        wpuf_mixins.form_field_mixin
+    ],
+
+    computed: {
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
+        no_api_keys_msg: function () {
+            return wpuf_form_builder.field_settings.turnstile.validator.msg;
+        },
+
+        turnstile_image: function () {
+            var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+
+            if (this.field.turnstile_theme === 'dark') {
+                base_url += 'dark';
+            } else {
+                base_url += 'light';
+            }
+
+            if (this.field.turnstile_size === 'compact') {
+                base_url += '-compact';
+            }
+
+            return base_url + '.png';
+        }
+    }
+});
diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php
@@ -0,0 +1,12 @@
+<div class="wpuf-fields">
+    <template v-if="!has_turnstile_api_keys">
+        <p v-html="no_api_keys_msg"></p>
+    </template>
+
+    <template v-else>
+        <img
+            class="wpuf-turnstile-placeholder"
+            :src="turnstile_image"
+            alt="">
+    </template>
+</div>
diff --git a/admin/form-builder/assets/js/mixins/global.js b/admin/form-builder/assets/js/mixins/global.js
@@ -44,6 +44,10 @@ Vue.mixin({
             return (wpuf_form_builder.recaptcha_site && wpuf_form_builder.recaptcha_secret) ? true : false;
         },
 
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
         containsField: function(field_name) {
             var self = this,
                 i = 0;

diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -944,6 +944,50 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
 .wrap h2.with-headway-icon #HW_frame_cont {
   top: 78px !important;
 }
+.wpuf-toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 26px;
+}
+.wpuf-toggle-switch input {
+  display: none;
+}
+.wpuf-toggle-switch input:checked + .slider {
+  background-color: #0073aa;
+}
+.wpuf-toggle-switch input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+.wpuf-toggle-switch input:checked + .slider:before {
+  transform: translateX(26px);
+}
+.wpuf-toggle-switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .2s;
+}
+.wpuf-toggle-switch .slider.round {
+  border-radius: 34px;
+}
+.wpuf-toggle-switch .slider.round:before {
+  border-radius: 50%;
+}
+.wpuf-toggle-switch .slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 4px;
+  background-color: white;
+  transition: .2s;
+}
 @media only screen and (max-width: 1399px) {
   a.wpuf-button.button-upgrade-to-pro {
     padding: 10px;

diff --git a/assets/css/admin/wpuf-module.css b/assets/css/admin/wpuf-module.css
@@ -35,65 +35,6 @@
     line-height: 1.6em;
 }
 
-.wpuf-toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 50px;
-    height: 26px;
-}
-
-.wpuf-toggle-switch input {
-    display: none;
-}
-
-.wpuf-toggle-switch .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-.wpuf-toggle-switch .slider:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-.wpuf-toggle-switch input:checked + .slider {
-    background-color: #0073aa;
-}
-
-.wpuf-toggle-switch input:focus + .slider {
-    -webkit-box-shadow: 0 0 1px #2196F3;
-    box-shadow: 0 0 1px #2196F3;
-}
-
-.wpuf-toggle-switch input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
-    border-radius: 34px;
-}
-
-.slider.round:before {
-    border-radius: 50%;
-}
-
 .wpuf-modules .plugin-card {
     border: 1px solid #e5e5e5;
     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

diff --git a/assets/css/frontend-forms.css b/assets/css/frontend-forms.css
@@ -84,7 +84,7 @@ body .wpuf-error {
   background-color: #f2dede;
   color: #a94442;
   border: 1px solid #ebccd1;
-  margin: 10px 10px 20px;
+  margin: 10px 0 20px 0;
   padding: 10px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;

diff --git a/assets/images/cloudflare-placeholder-dark-compact.png b/assets/images/cloudflare-placeholder-dark-compact.png
diff --git a/assets/images/cloudflare-placeholder-dark.png b/assets/images/cloudflare-placeholder-dark.png
diff --git a/assets/images/cloudflare-placeholder-light-compact.png b/assets/images/cloudflare-placeholder-light-compact.png
diff --git a/assets/images/cloudflare-placeholder-light.png b/assets/images/cloudflare-placeholder-light.png
diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php
@@ -438,6 +438,21 @@ class="option-chooser-radio"
 </div>
 </script>
 
+<script type="text/x-template" id="tmpl-wpuf-form-cloudflare_turnstile">
+<div class="wpuf-fields">
+    <template v-if="!has_turnstile_api_keys">
+        <p v-html="no_api_keys_msg"></p>
+    </template>
+
+    <template v-else>
+        <img
+            class="wpuf-turnstile-placeholder"
+            :src="turnstile_image"
+            alt="">
+    </template>
+</div>
+</script>
+
 <script type="text/x-template" id="tmpl-wpuf-form-column_field">
 <div v-bind:class="['wpuf-field-columns', 'has-columns-'+field.columns]">
     <div class="wpuf-column-field-inner-columns">

diff --git a/assets/js/wpuf-form-builder-components.js b/assets/js/wpuf-form-builder-components.js
@@ -765,6 +765,43 @@ Vue.component('form-checkbox_field', {
     ]
 });
 
+/**
+ * Field template: Cloudflare Turnstile
+ */
+Vue.component('form-cloudflare_turnstile', {
+    template: '#tmpl-wpuf-form-cloudflare_turnstile',
+
+    mixins: [
+        wpuf_mixins.form_field_mixin
+    ],
+
+    computed: {
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
+        no_api_keys_msg: function () {
+            return wpuf_form_builder.field_settings.turnstile.validator.msg;
+        },
+
+        turnstile_image: function () {
+            var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+
+            if (this.field.turnstile_theme === 'dark') {
+                base_url += 'dark';
+            } else {
+                base_url += 'light';
+            }
+
+            if (this.field.turnstile_size === 'compact') {
+                base_url += '-compact';
+            }
+
+            return base_url + '.png';
+        }
+    }
+});
+
 /**
  * Field template: Column Field
  */

diff --git a/assets/js/wpuf-form-builder-mixins.js b/assets/js/wpuf-form-builder-mixins.js
@@ -151,6 +151,10 @@ Vue.mixin({
             return (wpuf_form_builder.recaptcha_site && wpuf_form_builder.recaptcha_secret) ? true : false;
         },
 
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
         containsField: function(field_name) {
             var self = this,
                 i = 0;