Make Column Clickable Elementor

Version Description

2022-04-20 =
WPML compatibility

Release Info

Developer	Amgnando
Plugin	Make Column Clickable Elementor
Version	1.4.0
Comparing to
See all releases

Version 1.4.0

Files changed (4) hide show

assets/js/make-column-clickable.js +49 -0
includes/class-column-clickable.php +78 -0
make-column-clickable-elementor.php +107 -0
readme.txt +75 -0

assets/js/make-column-clickable.js ADDED Viewed

	@@ -0,0 +1,49 @@


1	+ jQuery( function( $ ) {
2	+ $( document ).on( 'click', 'body:not(.elementor-editor-active) .make-column-clickable-elementor', function( e ) {
3	+ var wrapper = $( this ),
4	+ url = wrapper.data( 'column-clickable' );
5	+
6	+ if ( url ) {
7	+ if ( $( e.target ).filter( 'a, a , .no-link, .no-link ' ).length ) {
8	+ return true;
9	+ }
10	+
11	+ // handle elementor actions
12	+ if ( url.match( "^#elementor-action" ) ) {
13	+
14	+ var hash = url;
15	+ var hash = decodeURIComponent( hash );
16	+
17	+ // if is Popup
18	+ if ( hash.includes( "elementor-action:action=popup:open" ) \|\| hash.includes( "elementor-action:action=lightbox" ) ) {
19	+
20	+ if ( 0 === wrapper.find( '#make-column-clickable-open-dynamic' ).length ) {
21	+ wrapper.append( '<a id="make-column-clickable-open-dynamic" style="display: none !important;" href="' + url + '">Open dynamic content</a>' );
22	+ }
23	+
24	+ wrapper.find( '#make-column-clickable-open-dynamic' ).click();
25	+
26	+ return true;
27	+ }
28	+
29	+ return true;
30	+ }
31	+
32	+ // smooth scroll
33	+ if ( url.match( "^#" ) ) {
34	+ var hash = url;
35	+
36	+ $( 'html, body' ).animate( {
37	+ scrollTop: $( hash ).offset().top
38	+ }, 800, function() {
39	+ window.location.hash = hash;
40	+ });
41	+
42	+ return true;
43	+ }
44	+
45	+ window.open( url, wrapper.data( 'column-clickable-blank' ) );
46	+ return false;
47	+ }
48	+ });
49	+ });

includes/class-column-clickable.php ADDED Viewed

	@@ -0,0 +1,78 @@


1	+ <?php
2	+ /**
3	+ * Main Class
4	+ *
5	+ * @author Fernando_Acosta
6	+ * @since 1.0.0
7	+ * @package make-column-clickable-elementor
8	+ */
9	+
10	+ if ( ! defined( 'ABSPATH' ) ) {
11	+ exit;
12	+ }
13	+
14	+ if ( ! class_exists( 'Make_Column_Clickable_Setup' ) ) :
15	+
16	+ /**
17	+ * The main Make_Column_Clickable_Setup class
18	+ */
19	+ class Make_Column_Clickable_Setup {
20	+ public function __construct() {
21	+ add_action( 'wp_enqueue_scripts', array( $this, 'frontend_scripts' ) );
22	+
23	+ add_action( 'elementor/element/column/layout/before_section_end', array( $this, 'widget_extensions' ), 10, 2 );
24	+ add_action( 'elementor/frontend/column/before_render', array( $this, 'before_render_options' ), 10 );
25	+ }
26	+
27	+
28	+ /**
29	+ * After layout callback
30	+ *
31	+ * @param object $element
32	+ * @param array $args
33	+ * @return void
34	+ */
35	+ public function widget_extensions( $element, $args ) {
36	+ $element->add_control(
37	+ 'column_link',
38	+ [
39	+ 'label' => __( 'Column Link', 'make-column-clickable-elementor' ),
40	+ 'type' => Elementor\Controls_Manager::URL,
41	+ 'dynamic' => [
42	+ 'active' => true,
43	+ ],
44	+ 'placeholder' => __( 'https://your-link.com', 'elementor' ),
45	+ 'selectors' => [
46	+ ],
47	+ ]
48	+ );
49	+ }
50	+
51	+
52	+ public function before_render_options( $element ) {
53	+ $settings = $element->get_settings_for_display();
54	+
55	+ if ( isset( $settings['column_link'], $settings['column_link']['url'] ) && ! empty( $settings['column_link']['url'] ) ) {
56	+ wp_enqueue_script( 'make-column-clickable-elementor' );
57	+
58	+ // start of WPML
59	+ do_action( 'wpml_register_single_string', 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'], $settings['column_link']['url'] );
60	+ $settings['column_link']['url'] = apply_filters('wpml_translate_single_string', $settings['column_link']['url'], 'Make Column Clickable Elementor', 'Link - ' . $settings['column_link']['url'] );
61	+ // end of WPML
62	+
63	+ $element->add_render_attribute( '_wrapper', 'class', 'make-column-clickable-elementor' );
64	+ $element->add_render_attribute( '_wrapper', 'style', 'cursor: pointer;' );
65	+ $element->add_render_attribute( '_wrapper', 'data-column-clickable', $settings['column_link']['url'] );
66	+ $element->add_render_attribute( '_wrapper', 'data-column-clickable-blank', $settings['column_link']['is_external'] ? '_blank' : '_self' );
67	+ }
68	+ }
69	+
70	+
71	+ public function frontend_scripts() {
72	+ wp_register_script( 'make-column-clickable-elementor', plugins_url( 'assets/js/make-column-clickable.js', plugin_dir_path( __FILE__ ) ), array( 'jquery' ), Make_Column_Clickable_Elementor::VERSION, true );
73	+ }
74	+ }
75	+
76	+ endif;
77	+
78	+ new Make_Column_Clickable_Setup();

make-column-clickable-elementor.php ADDED Viewed

	@@ -0,0 +1,107 @@


1	+ <?php
2	+ /**
3	+ * Plugin Name: Make Column Clickable Elementor
4	+ * Plugin URI: https://fernandoacosta.net/make-column-clickable-elementor
5	+ * Description: Simple: allow users to click in the whole column instead of individual elements
6	+ * Author: Fernando Acosta
7	+ * Author URI: https://fernandoacosta.net/?utm_source=wp-org&utm_medium=site&utm_campaign=make-column-clickable
8	+ * Version: 1.4.0
9	+ * License: GPLv2 or later
10	+ *
11	+ * This plugin is free software: you can redistribute it and/or modify
12	+ * it under the terms of the GNU General Public License as published by
13	+ * the Free Software Foundation, either version 2 of the License, or
14	+ * any later version.
15	+ *
16	+ * This plugin is distributed in the hope that it will be useful,
17	+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
18	+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19	+ * GNU General Public License for more details.
20	+ *
21	+ * You should have received a copy of the GNU General Public License
22	+ * along with this plugin. If not, see
23	+ * <https://www.gnu.org/licenses/gpl-2.0.txt>.
24	+ *
25	+ * @package Fernando_Acosta
26	+ */
27	+
28	+ if ( ! defined( 'ABSPATH' ) ) {
29	+ exit; // Exit if accessed directly.
30	+ }
31	+
32	+ class Make_Column_Clickable_Elementor {
33	+ /**
34	+ * Version.
35	+ *
36	+ * @var float
37	+ */
38	+ const VERSION = '1.4.0';
39	+
40	+ /**
41	+ * Instance of this class.
42	+ *
43	+ * @var object
44	+ */
45	+ protected static $instance = null;
46	+ /**
47	+ * Initialize the plugin public actions.
48	+ */
49	+ function __construct() {
50	+ $this->includes();
51	+ }
52	+
53	+ public function includes() {
54	+ // framework
55	+ include_once 'includes/class-column-clickable.php';
56	+ }
57	+
58	+ /**
59	+ * Return an instance of this class.
60	+ *
61	+ * @return object A single instance of this class.
62	+ */
63	+ public static function get_instance() {
64	+ // If the single instance hasn't been set, set it now.
65	+ if ( null == self::$instance ) {
66	+ self::$instance = new self;
67	+ }
68	+ return self::$instance;
69	+ }
70	+
71	+ /**
72	+ * Get main file.
73	+ *
74	+ * @return string
75	+ */
76	+ public static function get_main_file() {
77	+ return __FILE__;
78	+ }
79	+
80	+ /**
81	+ * Get plugin path.
82	+ *
83	+ * @return string
84	+ */
85	+
86	+ public static function get_plugin_path() {
87	+ return plugin_dir_path( __FILE__ );
88	+ }
89	+
90	+ /**
91	+ * Get the plugin url.
92	+ * @return string
93	+ */
94	+ public static function plugin_url() {
95	+ return untrailingslashit( plugins_url( '/', __FILE__ ) );
96	+ }
97	+
98	+ /**
99	+ * Get the plugin dir url.
100	+ * @return string
101	+ */
102	+ public static function plugin_dir_url() {
103	+ return plugin_dir_url( __FILE__ );
104	+ }
105	+ }
106	+
107	+ add_action( 'plugins_loaded', array( 'Make_Column_Clickable_Elementor', 'get_instance' ) );

readme.txt ADDED Viewed

	@@ -0,0 +1,75 @@


1	+ === Make Column Clickable Elementor ===
2	+ Contributors: Amgnando
3	+ Donate link: https://fernandoacosta.net/donate/
4	+ Tags: elementor, column, page builder
5	+ Requires at least: 5.0
6	+ Tested up to: 5.9.3
7	+ Stable tag: trunk
8	+ Requires PHP: 7.2
9	+ License: GPLv2 or later
10	+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
11	+
12	+ Simple: allow users to click in the whole column instead of individual elements
13	+
14	+ == Description ==
15	+
16	+ Simple: allow users to click in the whole column instead of individual elements.
17	+
18	+ Users will be able to click in the whole column when you add a link on that.
19	+
20	+ = How to use it =
21	+
22	+ After install the plugin, open your Elementor editor, start editing a Column and under the Layout block you can add your custom link.
23	+
24	+ Works with any internal/external link, Lightbox and Elementor PRO popups trigger.
25	+
26	+ = Looking for custom WooCommerce or Elementor development? Reach us at suporte@fernandoacosta.net =
27	+
28	+ == Installation ==
29	+
30	+
31	+
32	+ == Frequently Asked Questions ==
33	+
34	+ = How this plugin Works? =
35	+
36	+ This plugin will add a custom URL field in each column of your Elementor editor. If you fill it, the column will be clickable.
37	+
38	+ Please note that the plugin works using JavaScript. So it's not an actual
39	+ <a> element. I do recommend you to also add the regular links on your inner elements for SEO and compatibility purposes. So you make sure that columns and default elements are workingl.
40	+
41	+ = What if I found a bug? =
42	+
43	+ If you have any issue, please use the support here.
44	+
45	+
46	+ == Screenshots ==
47	+
48	+ 1. Settings
49	+
50	+ == Changelog ==
51	+ = 1.4.0 - 2022-04-20 =
52	+ - WPML compatibility
53	+
54	+ = 1.3.1 - 2019-10-12 =
55	+ * Fix: Prevent illigal offset warning
56	+ * New: Working with multiple popups
57	+
58	+ = 1.3.0 - 2019-08-27 =
59	+ * New: Support to Elementor Popups and Lightbox
60	+
61	+ = 1.2.1 - 2019-04-16 =
62	+ * New: Support to smooth scroll
63	+ * Fix: Link now works with dynamic content.
64	+
65	+ = 1.2.0 - 2019-03-14 =
66	+ * NEW: prevent column redirect when click on custom links or buttons
67	+
68	+ = 1.1.0 - 2019-02-14 =
69	+ * Fix: new tab links
70	+ * Fix: minor improvements
71	+
72	+ = 1.0.0 - 2018-11-21 =
73	+ * First Version
74	+
75	+ == Upgrade Notice ==

Make Column Clickable Elementor - Version 1.4.0

Version Description

Release Info

Version 1.4.0