elementor / modules / styleguide / module.php

module.php in Elementor Website Builder – more than just a page builder 3.24.4, at modules/styleguide/module.php

134 lines 3.3 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\Styleguide;
3
4	use Elementor\Core\Base\Module as Base_Module;
5	use Elementor\Plugin;
6	use Elementor\Modules\Styleguide\Controls\Switcher;
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit; // Exit if accessed directly
10	}
11
12	class Module extends Base_Module {
13
14	const ASSETS_HANDLE = 'elementor-styleguide';
15	const ASSETS_SRC = 'styleguide';
16
17	/**
18	* Initialize the Container-Converter module.
19	*
20	* @return void
21	*/
22	public function __construct() {
23	parent::__construct();
24	add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'enqueue_main_scripts' ] );
25	add_action( 'elementor/preview/enqueue_styles', [ $this, 'enqueue_styles' ] );
26
27	add_action( 'elementor/frontend/after_register_scripts', function () {
28	$is_preview = Plugin::$instance->preview->is_preview();
29
30	if ( ! $is_preview ) {
31	return;
32	}
33
34	$this->enqueue_app_initiator( $is_preview );
35	} );
36
37	add_action( 'elementor/controls/register', [ $this, 'register_controls' ] );
38	add_action( 'elementor/element/after_section_start', [ $this, 'add_styleguide_enable_controls' ], 10, 3 );
39	}
40
41	/**
42	* Retrieve the module name.
43	*
44	* @return string
45	*/
46	public function get_name() {
47	return 'styleguide';
48	}
49
50	/**
51	* Enqueue scripts.
52	*
53	* @return void
54	*/
55	public function enqueue_main_scripts() {
56	wp_enqueue_script(
57	static::ASSETS_HANDLE,
58	$this->get_js_assets_url( static::ASSETS_SRC ),
59	[ 'elementor-editor' ],
60	ELEMENTOR_VERSION,
61	true
62	);
63
64	$kit_id = Plugin::$instance->kits_manager->get_active_id();
65
66	wp_localize_script( static::ASSETS_HANDLE, 'elementorStyleguideConfig', [
67	'activeKitId' => $kit_id,
68	] );
69	}
70
71	public function enqueue_app_initiator( $is_preview = false ) {
72	$dependencies = [
73	'wp-i18n',
74	'react',
75	'react-dom',
76	];
77
78	if ( ! $is_preview ) {
79	$dependencies[] = static::ASSETS_HANDLE;
80	}
81
82	wp_enqueue_script(
83	static::ASSETS_HANDLE . '-app-initiator',
84	$this->get_js_assets_url( static::ASSETS_SRC . '-app-initiator' ),
85	$dependencies,
86	ELEMENTOR_VERSION,
87	true
88	);
89	}
90
91	public function enqueue_styles() {
92	wp_enqueue_style(
93	static::ASSETS_HANDLE,
94	$this->get_css_assets_url( 'modules/' . static::ASSETS_SRC . '/' . static::ASSETS_SRC ),
95	[],
96	ELEMENTOR_VERSION
97	);
98	}
99
100	public function register_controls() {
101	$controls_manager = Plugin::$instance->controls_manager;
102
103	$controls_manager->register( new Switcher() );
104	}
105
106	/**
107	* Add the Enable Styleguide Preview controls to Global Colors and Global Fonts.
108	*
109	* @param $element
110	* @param string $section_id
111	* @param array $args
112	*/
113	public function add_styleguide_enable_controls( $element, $section_id, $args ) {
114	if ( 'kit' !== $element->get_name() \|\| ! in_array( $section_id, [ 'section_global_colors', 'section_text_style' ] ) ) {
115	return;
116	}
117
118	$control_name = str_replace( 'global-', '', $args['tab'] ) . '_enable_styleguide_preview';
119
120	$element->add_control(
121	$control_name,
122	[
123	'label' => esc_html__( 'Show global settings', 'elementor' ),
124	'type' => Switcher::CONTROL_TYPE,
125	'description' => esc_html__( 'Temporarily overlay the canvas with the style guide to preview your changes to global colors and fonts.', 'elementor' ),
126	'separator' => 'after',
127	'label_off' => esc_html__( 'No', 'elementor' ),
128	'label_on' => esc_html__( 'Yes', 'elementor' ),
129	'on_change_command' => true,
130	]
131	);
132	}
133	}
134