elementor / modules / styleguide / module.php

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

138 lines 3.4 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	wp_set_script_translations( static::ASSETS_HANDLE, 'elementor' );
71	}
72
73	public function enqueue_app_initiator( $is_preview = false ) {
74	$dependencies = [
75	'wp-i18n',
76	'react',
77	'react-dom',
78	];
79
80	if ( ! $is_preview ) {
81	$dependencies[] = static::ASSETS_HANDLE;
82	}
83
84	wp_enqueue_script(
85	static::ASSETS_HANDLE . '-app-initiator',
86	$this->get_js_assets_url( static::ASSETS_SRC . '-app-initiator' ),
87	$dependencies,
88	ELEMENTOR_VERSION,
89	true
90	);
91
92	wp_set_script_translations( static::ASSETS_HANDLE . '-app-initiator', 'elementor' );
93	}
94
95	public function enqueue_styles() {
96	wp_enqueue_style(
97	static::ASSETS_HANDLE,
98	$this->get_css_assets_url( 'modules/styleguide/editor' ),
99	[],
100	ELEMENTOR_VERSION
101	);
102	}
103
104	public function register_controls() {
105	$controls_manager = Plugin::$instance->controls_manager;
106
107	$controls_manager->register( new Switcher() );
108	}
109
110	/**
111	* Add the Enable Styleguide Preview controls to Global Colors and Global Fonts.
112	*
113	* @param $element
114	* @param string $section_id
115	* @param array $args
116	*/
117	public function add_styleguide_enable_controls( $element, $section_id, $args ) {
118	if ( 'kit' !== $element->get_name() \|\| ! in_array( $section_id, [ 'section_global_colors', 'section_text_style' ] ) ) {
119	return;
120	}
121
122	$control_name = str_replace( 'global-', '', $args['tab'] ) . '_enable_styleguide_preview';
123
124	$element->add_control(
125	$control_name,
126	[
127	'label' => esc_html__( 'Show global settings', 'elementor' ),
128	'type' => Switcher::CONTROL_TYPE,
129	'description' => esc_html__( 'Temporarily overlay the canvas with the style guide to preview your changes to global colors and fonts.', 'elementor' ),
130	'separator' => 'after',
131	'label_off' => esc_html__( 'No', 'elementor' ),
132	'label_on' => esc_html__( 'Yes', 'elementor' ),
133	'on_change_command' => true,
134	]
135	);
136	}
137	}
138