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