Merge pull request #63 from codescribblr/master

Integration with HumanPresence

Author: elanasparkle

assets/images/integrations/hp-shield.svg

@@ -218,6 +218,12 @@
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#660073aa', endColorstr='#ff0073aa', GradientType=0);
 }
+.fa.fa-humanpresence {
+  width: 1em;
+  height: 1em;
+  background: no-repeat url('images/hp-shield.svg') left top;
+  background-size: cover;
+}
 #wpuf-form-builder {
   width: calc(100% - 200px);
   padding-top: 10px;

assets/wpuf/css/images/hp-shield.svg

@@ -16,6 +16,7 @@
             ]"
             :data-index="index"
             data-source="stage"
+            v-if="'humanpresence' !== field.template"
         >
             <div v-if="!is_full_width(field.template)" class="wpuf-label">
                 <label v-if="!is_invisible(field)" :for="'wpuf-' + field.name ? field.name : 'cls'">
@@ -58,7 +59,9 @@
                 v-for="(field, index) in hidden_fields"
                 :class="['field-items', parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : '']"
             >
-                <strong><?php esc_html_e( 'key', 'wp-user-frontend' ); ?></strong>: {{ field.name }} | <strong><?php esc_html_e( 'value', 'wp-user-frontend' ); ?></strong>: {{ field.meta_value }}
+                <span v-if="'humanpresence' !== field.template"><strong><?php esc_html_e( 'key', 'wp-user-frontend' ); ?></strong>: {{ field.name }} | <strong><?php esc_html_e( 'value', 'wp-user-frontend' ); ?></strong>: {{ field.meta_value }}</span>
+
+                <span v-if="'humanpresence' === field.template"><component v-if="is_template_available(field)" :is="'form-' + field.template" :field="field"></component></span>
 
                 <div class="control-buttons">
                     <p>
@@ -349,10 +352,10 @@ class="option-chooser-radio"
 
     <div v-if="'logged_in' === selected" class="condiotional-logic-container">
 
-    	<?php $roles = get_editable_roles(); ?>
+        <?php $roles = get_editable_roles(); ?>
 
-    	<ul>
-			<?php
+        <ul>
+            <?php
                 foreach ( $roles as $role => $value ) {
                     $role_name = $value['name'];
 
@@ -363,13 +366,13 @@ class="option-chooser-radio"
                     echo $output;
                 }
             ?>
-	    </ul>
+        </ul>
     </div>
 
     <div v-if="'subscribed_users' === selected" class="condiotional-logic-container">
 
-    	<ul>
-    		<?php
+        <ul>
+            <?php
 
                 if ( class_exists( 'WPUF_Subscription' ) ) {
                     $subscriptions  = WPUF_Subscription::init()->get_subscriptions();
@@ -387,7 +390,7 @@ class="option-chooser-radio"
                     }
                 }
             ?>
-    	</ul>
+        </ul>
 
     </div>
 </div></script>
@@ -708,14 +711,26 @@ class="button"
     </template>
 
     <template v-else>
-    	<div v-if="'invisible_recaptcha' != field.recaptcha_type">
-        	<img class="wpuf-recaptcha-placeholder" src="<?php echo WPUF_ASSET_URI . '/images/recaptcha-placeholder.png'; ?>" alt="">
+        <div v-if="'invisible_recaptcha' != field.recaptcha_type">
+            <img class="wpuf-recaptcha-placeholder" src="<?php echo WPUF_ASSET_URI . '/images/recaptcha-placeholder.png'; ?>" alt="">
         </div>
         <div v-else><p><?php _e( 'Invisible reCaptcha', 'wp-user-frontend' ); ?></p></div>
     </template>
 </div>
 </script>
 
+<script type="text/x-template" id="tmpl-wpuf-form-humanpresence">
+<div class="wpuf-fields">
+    <template v-if="!has_humanpresence_installed">
+        <p v-html="no_humanpresence_installed_msg"></p>
+    </template>
+
+    <template v-else>
+        <div><p><i aria-hidden="true" class="fa fa-humanpresence"></i> <?php _e( 'Human Presence Anti-Spam Enabled (only visible to you).', 'wp-user-frontend' ); ?></p></div>
+    </template>
+</div>
+</script>
+
 <script type="text/x-template" id="tmpl-wpuf-form-section_break">
 <div class="wpuf-section-wrap">
     <h2 class="wpuf-section-title">{{ field.label }}</h2>

assets/wpuf/css/wpuf-form-builder.css

@@ -19,7 +19,7 @@
 
             hidden_fields: function hidden_fields() {
                 return this.$store.state.form_fields.filter(function (item) {
-                    return 'custom_hidden_field' === item.template;
+                    return 'custom_hidden_field' === item.template || 'humanpresence' === item.template;
                 });
             },
 
@@ -32,6 +32,21 @@
             }
         },
 
+        created: function created() {
+            var self = this,
+                humanpresence_field_id = 0, 
+                i = 0;
+            for(i = 0; i < self.$store.state.form_fields.length; i++) {
+                if (self.$store.state.form_fields[i].template === 'humanpresence') {
+                    humanpresence_field_id = self.$store.state.form_fields[i].id;
+                }
+            }
+
+            wpuf_form_builder.event_hub.$on('humanpresence-changed', this.humanpresence_changed);
+            wpuf_form_builder.event_hub.$on('humanpresence-disabled', this.delete_humanpresence_field);
+
+        },
+
         mounted: function mounted() {
             var self = this,
                 in_column_field = false;
@@ -153,16 +168,51 @@
                 }, function () {});
             },
 
+            delete_field_no_confirm: function delete_field_no_confirm(index) {
+                this.$store.commit('delete_form_field_element', index);
+            },
+
             delete_hidden_field: function delete_hidden_field(field_id) {
                 var i = 0;
 
                 for (i = 0; i < this.form_fields.length; i++) {
                     if (parseInt(field_id) === parseInt(this.form_fields[i].id)) {
-                        this.delete_field(i);
+                        if(this.form_fields[i].template === 'humanpresence'){
+                            this.delete_field_no_confirm(i);
+                            this.disable_humanpresence_setting();
+                        } else {
+                            this.delete_field(i);
+                        }
                     }
                 }
             },
 
+            delete_humanpresence_field: function delete_humanpresence_field(data) {
+                var i = 0;
+                if(data.$store.state.form_fields.length) {
+                    for(i = 0; i < data.$store.state.form_fields.length; i++) {
+                        if(data.$store.state.form_fields[i].template === 'humanpresence') {
+                            this.delete_field_no_confirm(i);
+                            this.disable_humanpresence_setting();
+                        }
+                    }
+                }
+            },
+
+            disable_humanpresence_setting: function disable_humanpresence_setting() {
+                var settings = this.$store.state.settings;
+                settings.humanpresence_enabled = false;
+                this.$store.commit('set_form_settings', settings);
+            },
+
+            humanpresence_changed: function humanpresence_changed(e, data) {
+                if(data.$store.state.settings.humanpresence_enabled === 'true'){
+                    wpuf_form_builder.event_hub.$emit('humanpresence-enabled', data);
+                } else {
+                    wpuf_form_builder.event_hub.$emit('humanpresence-disabled', data);
+                }
+            },
+
             is_pro_feature: function is_pro_feature(template) {
                 return this.field_settings[template] && this.field_settings[template].pro_feature ? true : false;
             },
@@ -427,7 +477,8 @@
             return {
                 show_basic_settings: true,
                 show_advanced_settings: false,
-                show_quiz_settings: false
+                show_quiz_settings: false,
+                show_humanpresence_settings: false
             };
         },
 
@@ -436,6 +487,7 @@
                 this.show_basic_settings = true;
                 this.show_advanced_settings = false;
                 this.show_quiz_settings = false;
+                this.show_humanpresence_settings = false;
 
                 return parseInt(this.$store.state.editing_field_id);
             },
@@ -503,6 +555,12 @@
                 });
             },
 
+            humanpresence_settings: function humanpresence_settings() {
+                return this.settings.filter(function (item) {
+                    return 'humanpresence' === item.section;
+                });
+            },
+
             form_field_type_title: function form_field_type_title() {
                 var template = this.editing_form_field.template;
 
@@ -1195,9 +1253,13 @@
             }
         },
 
+        created: function created() {
+            wpuf_form_builder.event_hub.$on('humanpresence-enabled', this.add_humanpresence_field);
+        },
+
         mounted: function mounted() {
             // bind jquery ui draggable
-            $(this.$el).find('.panel-form-field-buttons .button').draggable({
+            $(this.$el).find('.panel-form-field-buttons .button').not('[data-form-field="humanpresence"]').draggable({
                 connectToSortable: '#form-preview-stage .wpuf-form, .wpuf-column-inner-fields .wpuf-column-fields-sortable-list',
                 helper: 'clone',
                 revert: 'invalid',
@@ -1240,12 +1302,24 @@
                     }
                 }
 
+                if(field_template === 'humanpresence') {
+                    var settings = this.$store.state.settings;
+                    settings.humanpresence_enabled = true;
+                    this.$store.commit('set_form_settings', settings);
+                }
+
                 payload.field = field;
 
                 // add new form element
                 this.$store.commit('add_form_field_element', payload);
             },
 
+            add_humanpresence_field: function add_humanpresence_field(data) {
+                if(!this.containsField('humanpresence')) {
+                    this.add_form_field('humanpresence');
+                }
+            },
+
             is_pro_feature: function is_pro_feature(field) {
                 return this.field_settings[field].pro_feature;
             },
@@ -1371,6 +1445,26 @@
         }
     });
 
+    /**
+     * Field template: HumanPresence
+     */
+    Vue.component('form-humanpresence', {
+        template: '#tmpl-wpuf-form-humanpresence',
+
+        mixins: [wpuf_mixins.form_field_mixin],
+
+        computed: {
+            has_humanpresence_installed: function has_humanpresence_installed() {
+                return wpuf_form_builder.humanpresence_installed;
+            },
+
+            no_humanpresence_installed_msg: function no_humanpresence_installed_msg() {
+                return wpuf_form_builder.field_settings.humanpresence.validator.msg;
+            }
+        }
+
+    });
+
     /**
      * Field template: Section Break
      */