Changeset 2998159

Timestamp:

11/18/2023 09:11:14 PM (2 years ago)

Author:

udidol

Message:

Updates to the dragging mechanism
Put the dragging mechanism behind a flag, changed the dragging handle from being the entire whatsapp button to a separate handle element.

Location:

add-whatsapp-button/trunk

Files:

• add-whatsapp-button.php (modified) (1 diff)
• admin/settings.php (modified) (1 diff)
• img/drag-horizontal.svg (added)
• includes/scripts-manager.php (modified) (3 diffs)
• includes/style-templates/frontend-css.php (modified) (1 diff)
• js/wab.js (modified) (1 diff)
• plugin.php (modified) (1 diff)
• readme.txt (modified) (2 diffs)

add-whatsapp-button/trunk/add-whatsapp-button.php

@@ -6 +6 @@
 Text Domain: add-whatsapp-button
 Domain Path: /languages
-Version: 2.1.1
+Version: 2.1.2
 Author URI: http://udidollberg.com/
 */

add-whatsapp-button/trunk/admin/settings.php

@@ -264 +264 @@
                             </tr>
                             <tr>
+                                <th scope="row"><label for="awb_settings[enable_dragging]"><?php echo esc_html__( 'Allow dragging button on Y axis', 'add-whatsapp-button' ); ?></label></th>
+                                <td>
+                                    <input name="awb_settings[enable_dragging]" type="checkbox" id="awb_settings[enable_dragging]" value="1" <?php isset($settings['enable_dragging'] ) ? checked('1', $settings['enable_dragging'] ) : ''; ?>>
+                                    <p class="description"><?php echo esc_html__( 'Check this box in order to add a small "dragging" handle on the top of the WhatsApp button, which will allow users to drag the button up and down. This won\'t work for the bottom-fixed button type.', 'add-whatsapp-button'); ?></p>
+                                </td>
+                            </tr>
+                            <tr>
                                 <th scope="row"><label for="awb_settings[breakpoint]"><?php echo esc_html__( 'Breakpoint', 'add-whatsapp-button' ); ?></label></th>
                                 <td>

add-whatsapp-button/trunk/includes/scripts-manager.php

@@ -49 +49 @@
         $button_location = ( isset( $options['button_location'] ) ) ? $options['button_location'] : 'left';
         $buttonType = isset( $options['button_type'] ) ? $options['button_type'] : 'wab-side-rectangle';
+        $dragEnabled = ! empty ( $options['enable_dragging'] ) ? $options['enable_dragging'] : 0;
 
         // Create an array of the data we want to pass to the JS script
@@ -58 +59 @@
             'button_location' => $button_location,
             'button_type'     => $buttonType,
+            'dragEnabled'     => $dragEnabled,
             'plugins_url'     => plugins_url()
         );
@@ -72 +74 @@
      */
     private function enqueue_jquery_ui_draggable() {
+        $options = Plugin::$instance->get_plugin_options();
+
+        if ( ! empty ( $options['enable_dragging'] ) ? $options['enable_dragging'] : 0 ) {
+            return;
+        }
+
         wp_enqueue_script( 'jquery_draggable', plugins_url( '../js/lib/jquery-ui.drag.min.js', __FILE__ ), array( 'jquery' ) );
         wp_enqueue_script( 'jquery_touch_punch', plugins_url( '../js/lib/jquery.ui.touch-punch.min.js', __FILE__ ), array( 'jquery' ) );

add-whatsapp-button/trunk/includes/style-templates/frontend-css.php

@@ -325 +325 @@
                 display: none;
             }
+
+            /* Draggable */
+            #wab_drag {
+                position: absolute;
+                z-index: 99998;
+                background-color: #20B038;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: grab;
+            }
+
+            .wab-side-rectangle #wab_drag {
+                top: 38px;
+                padding: 5px;
+            }
+
+            .wab-icon-plain #wab_drag {
+                top: 68px;
+                right: -7px;
+                padding: 9px 5px;
+                border: 3px solid white;
+                border-radius: 50%;
+            }
+
+            .wab-side-rectangle #wab_drag img {
+                height: 6px;
+            }
+
+            .wab-icon-plain #wab_drag img {
+                height: 4px;
+            }
         </style>
 

add-whatsapp-button/trunk/js/wab.js

@@ -1 @@
-class WhatsAppButtonHandler{constructor(t){this.settings=wabSettings,this.$=t,this.getElements(),this.init()}getElements(){this.$buttonContainer=this.$("#wab_cont"),this.$whatsAppButton=this.$("#whatsAppButton"),this.$chevron=this.$("#wab_close img.wab-chevron"),this.$closeButton=this.$("#wab_close")}setButtonToggleWidth(){const t=this.$buttonContainer.outerWidth();let s="";"wab-side-rectangle"===this.settings.button_type?s=t-12+"px":"wab-icon-plain"===this.settings.button_type&&(s=t-14+"px"),this.$buttonContainer.css(this.settings.button_location,"-"+s)}toggleHideBottomRectangle(){this.$chevron.toggleClass("wab-down wab-up");const t=this.$whatsAppButton.outerHeight()-12+"px";this.$chevron.hasClass("wab-down")?(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-down.svg"),this.$buttonContainer.css("bottom",0)):this.$chevron.hasClass("wab-up")&&(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-up.svg"),this.$buttonContainer.css("bottom","-"+t))}toggleHideSideButton(){this.$chevron.toggleClass("wab-left wab-right"),this.$buttonContainer.hasClass("wab-hidden")?("left"===this.settings.button_location?this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-right.svg"):this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-left.svg"),this.setButtonToggleWidth()):(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-"+this.settings.button_location+".svg"),this.$buttonContainer.css(this.settings.button_location,0))}toggleHideCloseButton(){this.$buttonContainer.toggleClass("wab-hidden"),"wab-bottom-rectangle"===this.settings.button_type?this.toggleHideBottomRectangle():this.toggleHideSideButton()}onCloseButtonClick(){"full"===this.settings.hideButtonType&&this.$buttonContainer.hide(),"hide"===this.settings.hideButtonType&&this.toggleHideCloseButton()}handleButtonDisplayHours(){const t={startHour:this.settings.startHour,endHour:this.settings.endHour},s=(new Date).getHours();(s<parseInt(t.startHour)||s>parseInt(t.endHour))&&this.$buttonContainer.css("display","none")}init(){this.$buttonContainer.draggable({axis:"y"}),this.$closeButton.on("click",(()=>this.onCloseButtonClick())),"1"===this.settings.limitHours&&this.handleButtonDisplayHours()}}jQuery(document).ready((t=>{new WhatsAppButtonHandler(t)}));
+class WhatsAppButtonHandler{constructor(t){this.settings=wabSettings,this.$=t,this.getElements(),this.init()}getElements(){this.$buttonContainer=this.$("#wab_cont"),this.$whatsAppButton=this.$("#whatsAppButton"),this.$chevron=this.$("#wab_close img.wab-chevron"),this.$closeButton=this.$("#wab_close")}setButtonToggleWidth(){const t=this.$buttonContainer.outerWidth();let s="";"wab-side-rectangle"===this.settings.button_type?s=t-12+"px":"wab-icon-plain"===this.settings.button_type&&(s=t-14+"px"),this.$buttonContainer.css(this.settings.button_location,"-"+s)}toggleHideBottomRectangle(){this.$chevron.toggleClass("wab-down wab-up");const t=this.$whatsAppButton.outerHeight()-12+"px";this.$chevron.hasClass("wab-down")?(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-down.svg"),this.$buttonContainer.css("bottom",0)):this.$chevron.hasClass("wab-up")&&(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-up.svg"),this.$buttonContainer.css("bottom","-"+t))}toggleHideSideButton(){this.$chevron.toggleClass("wab-left wab-right"),this.$buttonContainer.hasClass("wab-hidden")?("left"===this.settings.button_location?this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-right.svg"):this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-left.svg"),this.setButtonToggleWidth()):(this.$chevron.attr("src",this.settings.plugins_url+"/add-whatsapp-button/img/chevron-"+this.settings.button_location+".svg"),this.$buttonContainer.css(this.settings.button_location,0))}toggleHideCloseButton(){this.$buttonContainer.toggleClass("wab-hidden"),"wab-bottom-rectangle"===this.settings.button_type?this.toggleHideBottomRectangle():this.toggleHideSideButton()}onCloseButtonClick(){"full"===this.settings.hideButtonType&&this.$buttonContainer.hide(),"hide"===this.settings.hideButtonType&&this.toggleHideCloseButton()}handleButtonDisplayHours(){const t={startHour:this.settings.startHour,endHour:this.settings.endHour},s=(new Date).getHours();(s<parseInt(t.startHour)||s>parseInt(t.endHour))&&this.$buttonContainer.css("display","none")}init(){"1"===this.settings.dragEnabled&&this.$buttonContainer.draggable({axis:"y",scroll:!1,handle:"#wab_drag"}),this.$closeButton.on("click",(()=>this.onCloseButtonClick())),"1"===this.settings.limitHours&&this.handleButtonDisplayHours()}}jQuery(document).ready((t=>{new WhatsAppButtonHandler(t)}));

add-whatsapp-button/trunk/plugin.php

@@ -186 +186 @@
             <div id="wab_cont"  class="wab-cont ui-draggable <?php echo $button_style; ?> <?php echo $button_location; ?>">
                 <a id="whatsAppButton" href="https://wa.me/<?php echo esc_html( $settings['phone_number'] ); ?><?php echo ( !empty($settings['default_message']) && $settings['enable_message'] == '1' ) ? '/?text='. rawurlencode($settings['default_message']) : ''; ?>" target="_blank"><span class="<?php echo $displayNoneIfIcon; ?>"><?php echo $button_text; ?></span></a>
-                <?php if ( isset( $settings['enable_hide_button'] ) && ( isset( $settings['hide_button'] ) ) ) : ?>
+                <?php if ( isset( $settings['enable_dragging'] ) ) : ?>
+                    <div id="wab_drag"><img src="<?php echo plugins_url( '/img/drag-horizontal.svg', __FILE__ ) ?>"></div>
+                <?php endif; ?>
+                <?php if ( isset( $settings['enable_hide_button'] ) && isset( $settings['hide_button'] ) ) : ?>
                     <div id="wab_close"><?php echo $close_button_icon; ?></div>
                 <?php endif; ?>

add-whatsapp-button/trunk/readme.txt

@@ -4 +4 @@
 Requires at least: 4.6
 Tested up to: 6.4.1
-Stable tag: 2.1.1
+Stable tag: 2.1.2
 Requires PHP: 5.4
 License: GPLv2 or later
@@ -53 +53 @@
 
 == Changelog ==
+
+= 2.1.2 =
+* Moved the button dragging functionality under a flag (admin setting)
+* The dragging is now done by a small dragging handle instead of the entire button being draggable
 
 = 2.1.1 =