elementor / modules / styleguide / module.php

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

152 lines 4.1 KB

Raw Download Zip

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