class-page-additional-css.php — Superb Addons: Blocks, Patterns, Pre-built Pages, Sliders, Popups, Free Forms, Animations & More 3.3.1

superb-blocks / src / admin / pages / class-page-additional-css.php

superb-blocks / src / admin / pages Last commit date

class-page-additional-css.php 1 year ago class-page-dashboard.php 1 year ago class-page-elementor-dashboard.php 1 year ago class-page-gutenberg-dashboard.php 1 year ago class-page-settings.php 1 year ago class-page-support.php 1 year ago

class-page-additional-css.php

315 lines

1	<?php
2
3	namespace SuperbAddons\Admin\Pages;
4
5	defined('ABSPATH') \|\| exit();
6
7	use SuperbAddons\Components\Admin\LinkBox;
8	use SuperbAddons\Components\Admin\ReviewBox;
9	use SuperbAddons\Admin\Controllers\DashboardController;
10	use SuperbAddons\Components\Admin\InputCheckbox;
11	use SuperbAddons\Components\Admin\Modal;
12	use SuperbAddons\Components\Admin\PremiumBox;
13	use SuperbAddons\Components\Admin\SupportBox;
14	use SuperbAddons\Components\Slots\CssBlocksBaseSlot;
15	use SuperbAddons\Components\Slots\CssBlocksExportSelectedSlot;
16	use SuperbAddons\Components\Slots\CssBlocksExportSingleSlot;
17	use SuperbAddons\Components\Slots\CssBlocksTargetSlot;
18	use SuperbAddons\Data\Controllers\CSSController;
19
20	class AdditionalCSSPage
21	{
22	private $Blocks = [];
23	private $CurrentCssBlock = false;
24	private $IsCreating = false;
25
26	public function __construct()
27	{
28	$this->Blocks = CSSController::GetBlocks();
29	if (isset($_GET['css-edit']) \|\| isset($_GET['css-create'])) {
30	if (isset($_GET['css-edit'])) {
31	$css_block_id = $_GET['css-edit'];
32	// Logic to get the CSS block from the database
33	$this->CurrentCssBlock = isset($this->Blocks[$css_block_id]) ? $this->Blocks[$css_block_id] : false;
34	if (!$this->CurrentCssBlock) {
35	$this->RenderMainPage();
36	return;
37	}
38	$this->CurrentCssBlock->id = $css_block_id;
39	} else {
40	$this->IsCreating = true;
41	}
42
43	add_action("admin_footer", array($this, 'RenderLivePreview'));
44
45	$this->RenderEditPage();
46	} else {
47	$this->RenderMainPage();
48	}
49	}
50
51	private function RenderEditPage()
52	{
53	$edit_or_create = $this->IsCreating ? __("Create", "superb-blocks") : __("Edit", "superb-blocks");
54	?>
55	<div class="superbaddons-admindashboard-content-box-large superbaddons-admindashboard-css-blocks">
56	<h3 class="superbaddons-element-text-md superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-text-dark"><?= esc_html(sprintf(__("%s CSS Block", "superb-blocks"), $edit_or_create)); ?><small class="superbaddons-element-ml1 superbaddons-element-text-xs superbaddons-element-text-gray"><?= esc_html__(($this->IsCreating \|\| ($this->CurrentCssBlock && $this->CurrentCssBlock->active) ? "" : "This CSS block is currently deactivated."), "superb-blocks"); ?></small></h3>
57	<hr class="superbaddons-element-mb1" />
58
59	<div class="superbaddons-css-block-input-options superbaddons-element-mt1 superbaddons-element-mb2">
60	<label for="superbaddons-css-block-name-input" class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="15" class="superbaddons-element-ml1 superbaddons-element-mr1" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-file.svg'); ?>" /><?= esc_html__("CSS Block Name", "superb-blocks"); ?></label>
61	<input type="text" id="superbaddons-css-block-name-input" class="superbaddons-element-input superbaddons-element-mb2" placeholder="<?= esc_attr__("My CSS Block", "superb-blocks"); ?>" value="<?= $this->CurrentCssBlock ? esc_attr($this->CurrentCssBlock->name) : ""; ?>" maxlength="<?= esc_attr(CSSController::BLOCK_NAME_MAX_LENGTH); ?>" />
62
63	<div class="superbaddons-css-block-target-inputs-wrapper superbaddons-element-mt1">
64	<label class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="25" class="superbaddons-element-mr1" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/target-duotone.svg'); ?>" /><?= esc_html__("Target", "superb-blocks"); ?></label>
65	<?php new InputCheckbox("superbaddons-css-block-target-input-website", "full", __("Entire website", "superb-blocks"), __("When enabled, your CSS block will be applied to the entire frontend of your website.", "superb-blocks"), true); ?>
66	<div class="superbaddons-element-specific-select-wrapper superbaddons-css-block-specific-target-inputs superbaddons-element-mb1" style="display: none;">
67	<?php new InputCheckbox("superbaddons-css-block-target-input-frontpage", "front", __("Front page", "superb-blocks"), __("Applies CSS block to the front page.", "superb-blocks")); ?>
68	<?php new CssBlocksTargetSlot(); ?>
69	</div>
70	</div>
71	</div>
72	<div class="superbaddons-css-block-css-input-wrapper-outer">
73	<div class="superbaddons-css-block-css-input-wrapper superbaddons-element-mt1">
74	<label for="superbaddons-css-block-css-input" class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="25" class="superbaddons-element-mr1" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-paint-brush.svg'); ?>" /><?= esc_html__("CSS", "superb-blocks"); ?></label>
75	<textarea id="superbaddons-css-block-css-input" class="superbaddons-element-textarea superbaddons-element-mb1" rows="10"><?= $this->CurrentCssBlock ? esc_html($this->CurrentCssBlock->css) : ""; ?></textarea>
76	<div class="superbaddons-css-block-allow-unsafe-css-wrapper" style="display:none;">
77	<?php new InputCheckbox("superbaddons-css-block-allow-unsafe-css", "allow-unsafe-css-action", __("Allow Unsafe CSS", "superb-blocks"), __("Your CSS contains unsafe CSS rules. Please double check that the links and URLs used in imports etc. are trusted. In order to save your CSS block containing unsafe CSS, this setting must be enabled. ", "superb-blocks"), false, '/img/color-warning-octagon.svg'); ?>
78	</div>
79	</div>
80	</div>
81
82	<hr class="superbaddons-element-mb1" />
83	<div class="superbaddons-css-block-errors-wrapper superbaddons-element-text-xs spbaddons-admin-text-danger superbaddons-element-mt1 superbaddons-element-mb1" style="display:none;">
84	<?= esc_html__("Your CSS Block cannot be saved while errors are present in your CSS."); ?>
85	</div>
86	<div class="superbaddons-css-block-save-options">
87	<button type="button" class="superbaddons-css-block-save-btn superbaddons-element-button superbaddons-element-m0">
88	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/floppy-disk-duotone.svg'); ?>" />
89	<?= esc_html__("Save", "superb-blocks"); ?>
90	</button>
91	<span class="superbaddons-vertical-separator"></span>
92	<button type="button" class="superbaddons-css-block-preview-btn superbaddons-element-button superbaddons-element-m0">
93	<img width="20" class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/preview.svg'); ?>" />
94	<?= esc_html__("Preview", "superb-blocks"); ?>
95	</button>
96	<div class="superbaddons-element-mla superbaddons-element-flex-center">
97	<span class="superbaddons-vertical-separator"></span>
98	<div class="superbaddons-created-css-block-options" <?= $this->IsCreating ? 'style="display:none;"' : '' ?>>
99	<?php if ($this->CurrentCssBlock && !$this->CurrentCssBlock->active) : ?>
100	<!-- Activate Selected -->
101	<button class="superbaddons-activate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
102	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
103	<?= esc_html__("Activate", "superb-blocks"); ?>
104	</button>
105	<?php else : ?>
106	<!-- Deactivate Selected -->
107	<button class="superbaddons-deactivate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
108	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
109	<?= esc_html__("Deactivate", "superb-blocks"); ?>
110	</button>
111	<?php endif; ?>
112	<span class="superbaddons-vertical-separator"></span>
113	<?php new CssBlocksExportSingleSlot(); ?>
114	<span class="superbaddons-vertical-separator"></span>
115	<button class="superbaddons-css-block-delete-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0">
116	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
117	<?= esc_html__("Delete", "superb-blocks"); ?>
118	</button>
119	<span class="superbaddons-vertical-separator"></span>
120	</div>
121	<a href="<?= esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS)); ?>" class="superbaddons-css-block-cancel-btn superbaddons-element-button superbaddons-element-m0">
122	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/backspace.svg'); ?>" />
123	<?= esc_html__("Cancel", "superb-blocks"); ?>
124	</a>
125	</div>
126
127	</div>
128	</div>
129	<?php new Modal(); ?>
130	<?php if ($this->CurrentCssBlock) : ?>
131	<script>
132	const superbaddons_init_css_block_selectors = <?= json_encode($this->CurrentCssBlock->selectors); ?>;
133	const superbaddons_init_css_block_id = <?= json_encode($this->CurrentCssBlock->id); ?>;
134	</script>
135	<?php endif; ?>
136	<?php
137	}
138
139	public function RenderLivePreview()
140	{
141	?>
142	<div id="superbaddons-css-block-live-preview" style="display:none;">
143	<div class="superbaddons-css-block-live-preview-container">
144	<div class="superbaddons-css-live-preview-menu">
145	<span class="superbaddons-element-text-sm superbaddons-element-text-800"><?= esc_html__("LIVE PREVIEW", "superb-blocks"); ?></span>
146	<button id="superbaddons-preview-reload-button" type="button" class="superbaddons-element-button superbaddons-element-button-small superbaddons-element-m0">
147	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-clockwise-duotone.svg'); ?>" />
148	<?= esc_html__("Reload Preview", "superb-blocks"); ?>
149	</button>
150	<div class="superbaddons-live-preview-close-btn"><img src="<?= SUPERBADDONS_ASSETS_PATH . "/img/x.svg"; ?>" alt="<?= esc_attr__("Close", "superb-blocks"); ?>" /></div>
151	</div>
152	<div class="superbaddons-spinner-wrapper">
153	<img class="spbaddons-spinner" src="<?= SUPERBADDONS_ASSETS_PATH ?>/img/blocks-spinner.svg" />
154	</div>
155	<div class="superbaddons-css-block-live-preview-content">
156	<div class="superbaddons-css-block-preview-input">
157	<div style="padding: 0 20px;">
158	<p class="superbaddons-element-text-xxs superbaddons-element-text-gray"><?= esc_html__("While editing, your CSS changes are only visible inside this live preview.", "superb-blocks"); ?></p>
159	<p class="superbaddons-element-text-xxs superbaddons-element-text-gray"><?= esc_html__("Your selected CSS Block targets are not active inside the live preview and your CSS will be previewed on every page and post.", "superb-blocks"); ?></p>
160	<?php if (!$this->IsCreating) : ?>
161	<p class="superbaddons-element-text-gray" style="font-style:italic;font-size:12px;"><?= esc_html__("Do note that the currently saved CSS from this block will be applied during preview, even if the CSS is changed or removed in the preview editor.", "superb-blocks"); ?></p>
162	<?php endif; ?>
163	</div>
164	</div>
165	<iframe frameborder="0" src="" data-src="<?= esc_url(wp_customize_url()); ?>" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"></iframe>
166	</div>
167	</div>
168	</div>
169	<?php
170	}
171
172	private function RenderMainPage()
173	{
174	?>
175	<div class="superbaddons-admindashboard-sidebarlayout">
176	<div class="superbaddons-admindashboard-sidebarlayout-left">
177	<div class="superbaddons-additional-content-wrapper superbaddons-admindashboard-css-blocks">
178	<h3 class="superbaddons-element-text-md superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-text-dark"><?= esc_html__("Custom CSS Blocks", "superb-blocks"); ?></h3>
179	<p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?= esc_html__("Optimize your design and website with CSS blocks by deciding exactly when and where on your website you wish the CSS to be loaded. CSS files will automatically be generated, optimized and loaded to match your settings.", "superb-blocks"); ?></p>
180	<p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?= esc_html__("Create a new CSS block, import, export or select one you wish to edit.", "superb-blocks"); ?></p>
181	<div class="superbaddons-css-block-base-options">
182	<a href="<?= esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-create')); ?>" class="superbaddons-element-button superbaddons-element-mt1">
183	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-files.svg'); ?>" />
184	<?= esc_html__("Create New CSS Block", "superb-blocks"); ?>
185	</a>
186	<span class="superbaddons-vertical-separator"></span>
187	<button class="superbaddons-import-blocks-btn superbaddons-element-button superbaddons-element-mt1">
188	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/upload-simple-duotone.svg'); ?>" />
189	<?= esc_html__("Import CSS Blocks", "superb-blocks"); ?>
190	</button>
191	<input type="file" id="superbaddons-import-blocks-file" style="display:none;" accept=".superbaddons" multiple />
192	<?php new CssBlocksBaseSlot(); ?>
193	</div>
194
195	<h4 class="superbaddons-element-text-sm superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mt1 superbaddons-element-text-dark"><?= esc_html__("CSS Blocks", "superb-blocks"); ?></h4>
196
197	<hr class="superbaddons-element-mb1" />
198
199	<div class="superbaddons-css-blocks-list">
200	<?php if (empty($this->Blocks)) : ?>
201	<p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?= esc_html__("You do not have any CSS Blocks yet. Import or create a new CSS Block to get started.", "superb-blocks"); ?></p>
202	<?php endif; ?>
203	<?php foreach ($this->Blocks as $block_id => $block) : ?>
204	<a href="<?= esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-edit=' . $block_id)); ?>" data-id="<?= esc_attr($block_id); ?>" class="superbaddons-element-button superbaddons-element-m0 superbaddons-element-mb1 superbaddons-css-block-item <?= $block->active ? "" : "superbaddons-css-block-item-deactivated"; ?>">
205	<?php new InputCheckbox("superbaddons-css-block-select-" . sanitize_title($block->name), "select-single", false, false, false); ?>
206	<div class="superbaddons-css-block-item-information">
207	<div class="superbaddons-css-block-title-wrapper">
208	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . ($block->active ? '/img/purple-file.svg' : '/img/x.svg')); ?>" />
209	<span><?= esc_html($block->name); ?></span>
210	<span class="superbaddons-element-ml1 superbaddons-element-text-gray"><?= $block->active ? "" : esc_html__("Deactivated", "superb-blocks"); ?></span>
211	</div>
212	<span class="superbaddons-element-text-gray"><?= esc_html($this->GetTargetLabels($block)); ?></span>
213	</div>
214
215	</a>
216	<?php endforeach; ?>
217	</div>
218
219	<?php if (!empty($this->Blocks)) : ?>
220	<div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
221
222	<img class="superbaddons-element-button-icon superbaddons-element-mr1" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-elbow-left-up.svg'); ?>" />
223	<?php new InputCheckbox("superbaddons-css-block-select-all", "select-all", __("Select All", "superb-blocks"), false, false); ?>
224	<span class="superbaddons-vertical-separator"></span>
225	<!-- Activate Selected -->
226	<button class="superbaddons-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
227	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
228	<?= esc_html__("Activate", "superb-blocks"); ?>
229	</button>
230	<span class="superbaddons-vertical-separator"></span>
231	<!-- Deactivate Selected -->
232	<button class="superbaddons-deactivate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
233	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
234	<?= esc_html__("Deactivate", "superb-blocks"); ?>
235	</button>
236	<span class="superbaddons-vertical-separator"></span>
237	<!-- Export Selected -->
238	<?php new CssBlocksExportSelectedSlot(); ?>
239	<span class="superbaddons-vertical-separator"></span>
240	<!-- Delete Selected -->
241	<button class="superbaddons-delete-blocks-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0" disabled>
242	<img class="superbaddons-element-button-icon" src="<?= esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
243	<?= esc_html__("Delete", "superb-blocks"); ?>
244	</button>
245
246	</div>
247	<div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
248
249	</div>
250	<?php endif; ?>
251
252	</div>
253	<!-- Link Boxes -->
254	<div class="superbaddons-admindashboard-linkbox-wrapper">
255	<?php
256	new LinkBox(
257	array(
258	"icon" => "question.svg",
259	"title" => __("Help & Tutorials", "superb-blocks"),
260	"description" => __("We have put together detailed documentation that walks you through every step of the process, from installation to customization.", "superb-blocks"),
261	"cta" => __("View tutorials", "superb-blocks"),
262	"link" => admin_url('admin.php?page=' . DashboardController::SUPPORT),
263	"same_window" => true,
264	)
265	);
266	new LinkBox(
267	array(
268	"icon" => "purple-bulb.svg",
269	"title" => __("Request a feature", "superb-blocks"),
270	"description" => __("We're always looking for ways to improve Superb Addons. If you have a feature request or suggestion, we'd love to hear from you.", "superb-blocks"),
271	"cta" => __("Request feature", "superb-blocks"),
272	"link" => "https://superbthemes.com/feature-request/",
273	)
274	);
275	?>
276	</div>
277	</div>
278	<div class="superbaddons-admindashboard-sidebarlayout-right">
279	<?php
280	new PremiumBox();
281	new ReviewBox();
282	new SupportBox();
283	?>
284	</div>
285	</div>
286	<?php new Modal(); ?>
287	<?php
288	}
289
290	private function GetTargetLabels($block)
291	{
292	$valid_labels = apply_filters(
293	'superbaddons_css_block_target_valid_labels',
294	array(
295	"front" => __("Front Page", "superb-blocks"),
296	"full" => __("Entire Website", "superb-blocks")
297	)
298	);
299
300	$labels = [];
301	foreach ($block->selectors as $target) {
302	if (!isset($valid_labels[$target->type]) \|\| !$valid_labels[$target->type])
303	continue;
304
305	$labels[] = !empty($target->value) ? sprintf(__("Specific %s", "superb-blocks"), $valid_labels[$target->type]) : $valid_labels[$target->type];
306	}
307
308	if (empty($labels)) {
309	return __("Not Applied", "superb-blocks");
310	}
311
312	return rtrim(join(", ", $labels), ", ");
313	}
314	}
315