Ultimate Guide for JavaScript in Elementor Widgets

elementor-widget.php

<?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() );
}

findElement.js

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 );
	} );
  },
});

getUniqueHandlerID.js

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();
  },
});

index-1.js

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));
  }
}

index-2.js

// 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 );
 } );

onElementChange.js

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();
		}
	}
}

widget-1.php

<?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() {}
}

widget-2.php

<?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();
  }
}

widget-3.php

<?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>';
    } 


  }
}