Skip to content

Instantly share code, notes, and snippets.

@igorbenic
Last active April 11, 2024 09:12
Show Gist options
  • Save igorbenic/d113bdd864f2341257fa854a59ee8243 to your computer and use it in GitHub Desktop.
Save igorbenic/d113bdd864f2341257fa854a59ee8243 to your computer and use it in GitHub Desktop.
Ultimate Guide for JavaScript in Elementor Widgets
<?php
/**
* Plugin Name: Elementor Widget
* Text Domain: elementor-widget
* Domain Path: /languages
* Version: 0.1.0
*
* @package Elementor_Widget
*/
add_action( 'elementor/widgets/widgets_registered', 'el_widget_register_widget' );
define( 'MY_ELEMENTOR_PLUGIN_URI', plugin_dir_url( __FILE__ ) );
/**
* @param \Elementor\Widgets_Manager $widget_manager
*/
function el_widget_register_widget( $widget_manager ) {
include_once 'inc/widget.php';
$widget_manager->register_widget_type( new MY_Elementor_Widget() );
}
module.exports = elementorModules.ViewModule.extend( {
findElement: function( selector ) {
var $mainElement = this.$element;
return $mainElement.find( selector ).filter( function() {
return jQuery( this ).closest( '.elementor-element' ).is( $mainElement );
} );
},
});
module.exports = elementorModules.ViewModule.extend( {
getUniqueHandlerID: function( cid, $element ) {
if ( ! cid ) {
cid = this.getModelCID();
}
if ( ! $element ) {
$element = this.$element;
}
return cid + $element.attr( 'data-element_type' ) + this.getConstructorID();
},
});
class MyElementorHandler extends elementorModules.frontend.handlers.Base {
getDefaultSettings() {
return {
selectors: {
hours: '.working-hours',
},
};
}
getDefaultElements() {
const selectors = this.getSettings( 'selectors' );
return {
$hours: this.$element.find( selectors.hours )
};
}
reverseRows( e ) {
// Get the hours jQuery
var table = this.elements.$hours;
// Get the tbody
var tbody = table.find('tbody');
// Create an array of available rows
var arr = jQuery.makeArray(jQuery("tr",tbody[0]).detach());
// Reverse the rows
arr.reverse();
// Empty the HTML
tbody.html('');
// Add the new array HTML
tbody.append(arr);
}
// Bind the reverse Rows method on the thead .day column.
bindEvents() {
this.elements.$hours.find('th.day').on( 'click', this.reverseRows.bind(this));
}
}
// When the frontend of Elementor is created, add our handler
jQuery( window ).on( 'elementor/frontend/init', () => {
const addHandler = ( $element ) => {
elementorFrontend.elementsHandler.addHandler( MyElementorHandler, {
$element,
} );
};
// Add our handler to the my-elementor Widget (this is the slug we get from get_name() in PHP)
elementorFrontend.hooks.addAction( 'frontend/element_ready/my-elementor.default', addHandler );
} );
class VideoModule extends elementorModules.frontend.handlers.Base {
// ... other code is here
onElementChange( propertyName ) {
if ( 0 === propertyName.indexOf( 'lightbox_content_animation' ) ) {
this.animateVideo();
return;
}
const isLightBoxEnabled = this.getElementSettings( 'lightbox' );
if ( 'lightbox' === propertyName && ! isLightBoxEnabled ) {
this.getLightBox().getModal().hide();
return;
}
if ( 'aspect_ratio' === propertyName && isLightBoxEnabled ) {
this.handleAspectRatio();
}
}
}
<?php
/**
* Elementor Widget
*/
class MY_Elementor_Widget extends \Elementor\Widget_Base {
public function __construct($data = [], $args = null) {
parent::__construct($data, $args);
wp_register_script( 'my-elementor', MY_ELEMENTOR_PLUGIN_URI . 'build/index.js', array( 'jquery', 'elementor-frontend' ), '', true );
}
public function get_script_depends() {
return [ 'my-elementor' ];
}
/**
* Get Name
*
* @return string
*/
public function get_name() {
return 'my-elementor';
}
public function get_title() {
return __( 'My Elementor Widget', 'plugin-name' );
}
protected function get_days() {
return [
'monday' => __( 'Monday', 'plugin-name' ),
'tuesday' => __( 'Tuesday', 'plugin-name' ),
'wednesday' => __( 'Wednesday', 'plugin-name' ),
'thursday' => __( 'Thursday', 'plugin-name' ),
'friday' => __( 'Friday', 'plugin-name' ),
'saturday' => __( 'Saturday', 'plugin-name' ),
'sunday' => __( 'Sunday', 'plugin-name' ),
];
}
/**
* Register widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
protected function _register_controls() {}
/**
* Render working hours
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render() {}
}
<?php
/**
* Elementor Widget
*/
class MY_Elementor_Widget extends \Elementor\Widget_Base {
// Other code is here..
/**
* Register widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
* @access protected
*/
protected function _register_controls() {
// Adding Working Hours section under Content tab
$this->start_controls_section(
'content_section',
[
'label' => __( 'Working Hours', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
// Creating a repeater control
$repeater = new \Elementor\Repeater();
// Add Day dropdown
$repeater->add_control(
'day',
[
'label' => __( 'Day', 'plugin-name' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => $this->get_days(),
]
);
// Adding Hours option
$options = array();
for( $i=0; $i<24; $i++ ) {
$hour = $i;
if ( $hour < 10 ) {
$hour = '0' . $hour;
}
$options[ $hour . ':00' ] = $hour . ':00';
}
// Add Start Hour
$repeater->add_control(
'start',
[
'label' => __( 'Start', 'plugin-name' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => $options
]
);
// Add End hours
$repeater->add_control(
'end',
[
'label' => __( 'End', 'plugin-name' ),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => $options
]
);
// Adding the repeater control with all its controls
$this->add_control(
'hours',
[
'label' => __( 'Hours', 'plugin-domain' ),
'type' => \Elementor\Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [],
'title_field' => '{{{ day }}}',
]
);
$this->end_controls_section();
}
}
<?php
/**
* Elementor Widget
*/
class MY_Elementor_Widget extends \Elementor\Widget_Base {
/**
* Render oEmbed widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
* @access protected
*/
protected function render() {
$settings = $this->get_settings();
if ( $settings['hours'] ) {
$days = $this->get_days();
echo '<table class="working-hours">';
echo '<thead>';
echo '<tr>';
echo '<th class="day">';
esc_html_e( 'Day', 'plugin-name' );
echo '</th>';
echo '<th>';
esc_html_e( 'Start', 'plugin-name' );
echo '</th>';
echo '<th>';
esc_html_e( 'End', 'plugin-name' );
echo '</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
foreach ( $settings['hours'] as $hour ) {
if ( ! isset( $hour['day'] ) ) {
continue;
}
if ( ! $hour['day'] ) {
continue;
}
echo '<tr>';
echo '<td class="day" data-day="' . esc_attr( $hour['day'] ) . '">';
echo esc_html( $days[ $hour['day'] ] );
echo '</td>';
echo '<td>';
echo isset( $hour['start'] ) && $hour['start'] ? esc_html( $hour['start'] ) : '-';
echo '</td>';
echo '<td>';
echo isset( $hour['end'] ) && $hour['end'] ? esc_html( $hour['end'] ) : '-';
echo '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment