← All changes | admin/layouts/sidepanel/multitasking.php +164 -2 1.6.4 → 1.8.16 View file →

		@@ -21,11 +21,19 @@
21	21
22	22	// make sure the current page name is set and it's a string
23	23	$vbo_page = isset($vbo_page) ? htmlspecialchars($vbo_page, ENT_QUOTES) : '';
24	24
25		-// get the current page uri
	25	+// get the current page and root URIs
26	26	$vbo_page_uri = htmlspecialchars((string) JUri::getInstance(), ENT_QUOTES);
	27	+$root_uri = htmlspecialchars(JUri::root(), ENT_QUOTES);
27	28
	29	+/**
	30	+ * We allow to sort the admin widgets.
	31	+ *
	32	+ * @since 1.16.10 (J) - 1.6.10 (WP)
	33	+ */
	34	+JHtml::fetch('script', VBO_SITE_URI.'resources/jquery-ui.sortable.min.js');
	35	+
28	36	// get admin widgets helper
29	37	$widgets_helper = VikBooking::getAdminWidgetsInstance();
30	38
31	39	// get all widgets by preloading their assets (if any)
		@@ -40,8 +48,20 @@
40	48	// check if the notification audio file exists within VCM
41	49	$notif_audio_path = implode(DIRECTORY_SEPARATOR, [VCM_ADMIN_PATH, 'assets', 'css', 'audio', 'new_notification.mp3']);
42	50	$notif_audio_url = is_file($notif_audio_path) ? (VCM_ADMIN_URI . implode('/', ['assets', 'css', 'audio', 'new_notification.mp3'])) : null;
43	51
	52	+// theme color preferences
	53	+$color_scheme = VikBooking::getAppearancePref();
	54	+$scheme_name = JText::translate('VBO_APPEARANCE_PREF_AUTO');
	55	+$current_mode = 'magic';
	56	+if ($color_scheme == 'light') {
	57	+ $scheme_name = JText::translate('VBO_APPEARANCE_PREF_LIGHT');
	58	+ $current_mode = 'sun';
	59	+} elseif ($color_scheme == 'dark') {
	60	+ $scheme_name = JText::translate('VBO_APPEARANCE_PREF_DARK');
	61	+ $current_mode = 'moon';
	62	+}
	63	+
44	64	// JS lang vars
45	65	JText::script('VBO_BROWSER_NOTIFS_ON');
46	66	JText::script('VBO_BROWSER_NOTIFS_OFF');
47	67	JText::script('VBO_BROWSER_NOTIFS_OFF_HELP');
		@@ -46,8 +66,11 @@
46	66	JText::script('VBO_BROWSER_NOTIFS_OFF');
47	67	JText::script('VBO_BROWSER_NOTIFS_OFF_HELP');
48	68	JText::script('VBO_ADMIN_WIDGET');
49	69	JText::script('VBO_CONGRATS');
	70	+JText::script('VBO_APPEARANCE_PREF_AUTO');
	71	+JText::script('VBO_APPEARANCE_PREF_LIGHT');
	72	+JText::script('VBO_APPEARANCE_PREF_DARK');
50	73
51	74	?>
52	75
53	76	<div class="vbo-sidepanel-wrapper vbo-sidepanel-right vbo-sidepanel-close">
		@@ -60,8 +83,22 @@
60	83	</div>
61	84	<div class="vbo-sidepanel-notifications">
62	85	<button type="button" class="vbo-sidepanel-notifications-btn"><?php VikBookingIcons::e('bell'); ?></button>
63	86	</div>
	87	+ <div class="vbo-sidepanel-colorscheme">
	88	+ <span class="vbo-tooltip vbo-tooltip-bottom vbo-sidepanel-colorscheme-current" data-tooltiptext="<?php echo JHtml::fetch('esc_attr', $scheme_name); ?>"><?php VikBookingIcons::e($current_mode); ?></span>
	89	+ <div class="vbo-sidepanel-colorscheme-list">
	90	+ <div class="vbo-sidepanel-colorscheme-option<?php echo $color_scheme == 'auto' ? ' vbo-sidepanel-colorscheme-option-active' : ''; ?>" data-scheme="auto">
	91	+ <span><?php VikBookingIcons::e('magic'); ?> <?php echo JText::translate('VBO_APPEARANCE_PREF_AUTO'); ?></span>
	92	+ </div>
	93	+ <div class="vbo-sidepanel-colorscheme-option<?php echo $color_scheme == 'light' ? ' vbo-sidepanel-colorscheme-option-active' : ''; ?>" data-scheme="light">
	94	+ <span><?php VikBookingIcons::e('sun'); ?> <?php echo JText::translate('VBO_APPEARANCE_PREF_LIGHT'); ?></span>
	95	+ </div>
	96	+ <div class="vbo-sidepanel-colorscheme-option<?php echo $color_scheme == 'dark' ? ' vbo-sidepanel-colorscheme-option-active' : ''; ?>" data-scheme="dark">
	97	+ <span><?php VikBookingIcons::e('moon'); ?> <?php echo JText::translate('VBO_APPEARANCE_PREF_DARK'); ?></span>
	98	+ </div>
	99	+ </div>
	100	+ </div>
64	101	<div class="vbo-sidepanel-layout-type">
65	102	<span class="vbo-sidepanel-layout-large">
66	103	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.75 75.3"><defs></defs><path d="M87.68,8.65a3.23,3.23,0,0,1,3.23,3.22V66.53a3.23,3.23,0,0,1-3.23,3.23H11.57a3.23,3.23,0,0,1-3.22-3.23V11.87a3.22,3.22,0,0,1,3.22-3.22H87.68m0-7.1H11.57A10.32,10.32,0,0,0,1.25,11.87V66.53A10.32,10.32,0,0,0,11.57,76.85H87.68A10.32,10.32,0,0,0,98,66.53V11.87A10.32,10.32,0,0,0,87.68,1.55Z" transform="translate(-1.25 -1.55)"/><rect id="wide" x="10.15" y="10" width="77.22" height="55.25" rx="4.94"/></svg>
67	104	</span>
		@@ -74,9 +111,9 @@
74	111	<div class="vbo-sidepanel-body-top">
75	112
76	113	<div class="vbo-sidepanel-search">
77	114	<?php VikBookingIcons::e('search', 'vbo-sidepanel-search-input-icn'); ?>
78		- <input id="vbo-sidepanel-search-input" type="text" placeholder="<?php echo htmlspecialchars(JText::translate('VBO_SEARCH_ADMIN_WIDGETS')); ?>" value="" />
	115	+ <input id="vbo-sidepanel-search-input" type="text" placeholder="<?php echo htmlspecialchars(JText::translate('VBO_SEARCH_ADMIN_WIDGETS')); ?>" value="" autocomplete="off" />
79	116	</div>
80	117
81	118	<div class="vbo-sidepanel-add-widgets">
82	119	<?php
		@@ -135,8 +172,19 @@
135	172	}
136	173	?>
137	174	</div>
138	175
	176	+ <div class="vbo-sidepanel-shortcut" style="<?php echo $active_widgets ? 'display: none;' : ''; ?>">
	177	+ <div class="shortcut-keys">
	178	+ <span class="mod"></span>
	179	+ <span class="key">⏎</span>
	180	+ </div>
	181	+ <div class="shortcut-desc">
	182	+ <?php echo JText::translate('VBO_KEYBOARD_SHORTCUT'); ?>
	183	+ </div>
	184	+ <div class="shortcut-subdesc"></div>
	185	+ </div>
	186	+
139	187	<div class="vbo-sidepanel-edit-widgets">
140	188	<div class="vbo-sidepanel-edit-widgets-wrap">
141	189	<button class="btn btn-small vbo-sidepanel-edit-widgets-trig" style="<?php echo !count($active_widgets) ? 'display: none;' : ''; ?>"><?php echo JText::translate('VBO_WIDGETS_CUSTWIDGETS'); ?></button>
142	190	</div>
		@@ -151,8 +199,9 @@
151	199
152	200	// inject core properties
153	201	VBOCore.setOptions({
154	202	is_vbo: true,
	203	+ cms: "<?php echo VBOPlatformDetection::isWordPress() ? 'wordpress' : 'joomla'; ?>",
155	204	widget_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=exec_admin_widget'); ?>",
156	205	assets_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=widgets_get_assets'); ?>",
157	206	multitask_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=exec_multitask_widgets'); ?>",
158	207	watchdata_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=widgets_watch_data'); ?>",
		@@ -157,8 +206,9 @@
157	206	multitask_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=exec_multitask_widgets'); ?>",
158	207	watchdata_ajax_uri: "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=widgets_watch_data'); ?>",
159	208	current_page: "<?php echo $vbo_page; ?>",
160	209	current_page_uri: "<?php echo $vbo_page_uri; ?>",
	210	+ root_uri: "<?php echo $root_uri; ?>",
161	211	admin_widgets: <?php echo json_encode($active_widgets); ?>,
162	212	notif_audio_url: "<?php echo $notif_audio_url; ?>",
163	213	tn_texts: {
164	214	notifs_enabled: Joomla.JText._('VBO_BROWSER_NOTIFS_ON'),
		@@ -167,8 +217,11 @@
167	217	admin_widget: Joomla.JText._('VBO_ADMIN_WIDGET'),
168	218	congrats: Joomla.JText._('VBO_CONGRATS'),
169	219	},
170	220	default_loading_body: '<?php VikBookingIcons::e('circle-notch', 'fa-spin fa-fw'); ?>',
	221	+ service_worker_path: '<?php echo VBOWebappServiceworker::getUri(); ?>',
	222	+ service_worker_scope: '<?php echo VBOWebappServiceworker::getScope(); ?>',
	223	+ push: <?php echo json_encode(VBOWebappPush::getConfig()); ?>,
171	224	});
172	225
173	226	// initialize multitasking events
174	227	VBOCore.prepareMultitasking({
		@@ -201,6 +254,115 @@
201	254	notif_on_class: "vbo-sidepanel-notifications-on",
202	255	notif_off_class: "vbo-sidepanel-notifications-off",
203	256	});
204	257
	258	+ // install Service Worker
	259	+ VBOCore.installServiceWorker().then((registration) => {
	260	+ VBOCore.handlePushSubscription(registration).then((subscription) => {
	261	+ console.info('Push notifications are enabled');
	262	+ }).catch((error) => {
	263	+ console.warn(error);
	264	+ });
	265	+ }).catch((error) => {
	266	+ console.warn(error);
	267	+ });
	268	+
	269	+ // color scheme preferences
	270	+ jQuery('.vbo-sidepanel-colorscheme-current').on('click', function() {
	271	+ jQuery('.vbo-sidepanel-colorscheme-list').toggleClass('vbo-sidepanel-colorscheme-list-show');
	272	+ });
	273	+
	274	+ // color scheme selection
	275	+ jQuery('.vbo-sidepanel-colorscheme-option').on('click', function() {
	276	+ let set_mode = jQuery(this).attr('data-scheme');
	277	+
	278	+ let vbo_css_base_uri = '<?php echo VBO_ADMIN_URI . (VBOPlatformDetection::isWordPress() ? 'resources/' : '') . 'vbo-appearance-%s.css'; ?>';
	279	+ let vbo_css_base_id = 'vbo-css-appearance-';
	280	+ let vcm_css_base_id = 'vcm-css-appearance-';
	281	+ let vbo_css_modes = {
	282	+ auto: vbo_css_base_uri.replace('%s', 'auto'),
	283	+ dark: vbo_css_base_uri.replace('%s', 'dark'),
	284	+ light: null,
	285	+ };
	286	+ let vbo_mode_texts = {
	287	+ auto: Joomla.JText._('VBO_APPEARANCE_PREF_AUTO'),
	288	+ dark: Joomla.JText._('VBO_APPEARANCE_PREF_DARK'),
	289	+ light: Joomla.JText._('VBO_APPEARANCE_PREF_LIGHT'),
	290	+ };
	291	+ let vbo_mode_icons = {
	292	+ auto: '<?php VikBookingIcons::e('magic') ?>',
	293	+ dark: '<?php VikBookingIcons::e('moon') ?>',
	294	+ light: '<?php VikBookingIcons::e('sun') ?>',
	295	+ };
	296	+
	297	+ if (!vbo_css_modes.hasOwnProperty(set_mode)) {
	298	+ return false;
	299	+ }
	300	+
	301	+ // toggle active class
	302	+ jQuery('.vbo-sidepanel-colorscheme-option').removeClass('vbo-sidepanel-colorscheme-option-active');
	303	+ jQuery(this).addClass('vbo-sidepanel-colorscheme-option-active');
	304	+
	305	+ // adjust current preference content
	306	+ jQuery('.vbo-sidepanel-colorscheme-current')
	307	+ .attr('data-tooltiptext', vbo_mode_texts[set_mode])
	308	+ .html(vbo_mode_icons[set_mode]);
	309	+
	310	+ // set/unset CSS files from DOM
	311	+ for (let app_mode in vbo_css_modes) {
	312	+ if (!vbo_css_modes.hasOwnProperty(app_mode) || !vbo_css_modes[app_mode]) {
	313	+ continue;
	314	+ }
	315	+ if (app_mode == set_mode) {
	316	+ // set this CSS file
	317	+ jQuery('head').append('<link rel="stylesheet" id="' + vbo_css_base_id + app_mode + '" href="' + vbo_css_modes[app_mode] + '" media="all">');
	318	+ } else {
	319	+ // unset this CSS file
	320	+ if (jQuery('link#' + vbo_css_base_id + app_mode).length) {
	321	+ jQuery('link#' + vbo_css_base_id + app_mode).remove();
	322	+ } else if (jQuery('link#' + vbo_css_base_id + app_mode + '-css').length) {
	323	+ // WP framework may add "-css" as suffix to the given ID
	324	+ jQuery('link#' + vbo_css_base_id + app_mode + '-css').remove();
	325	+ }
	326	+ // check if the VCM related CSS file should be unset too
	327	+ if (jQuery('link#' + vcm_css_base_id + app_mode).length) {
	328	+ jQuery('link#' + vcm_css_base_id + app_mode).remove();
	329	+ } else if (jQuery('link#' + vcm_css_base_id + app_mode + '-css').length) {
	330	+ // WP framework may add "-css" as suffix to the given ID
	331	+ jQuery('link#' + vcm_css_base_id + app_mode + '-css').remove();
	332	+ }
	333	+ }
	334	+ }
	335	+
	336	+ // close menu-list
	337	+ jQuery('.vbo-sidepanel-colorscheme-list').removeClass('vbo-sidepanel-colorscheme-list-show');
	338	+
	339	+ // silently update configuration value
	340	+ VBOCore.doAjax(
	341	+ "<?php echo VikBooking::ajaxUrl('index.php?option=com_vikbooking&task=configuration.update'); ?>",
	342	+ {
	343	+ settings: {
	344	+ appearance_pref: set_mode,
	345	+ }
	346	+ },
	347	+ (success) => {
	348	+ // do nothing
	349	+ },
	350	+ (error) => {
	351	+ console.error(error);
	352	+ }
	353	+ );
	354	+ });
	355	+
	356	+ // subscribe to the multitask-panel-close event to dismiss the color scheme selection menu
	357	+ document.addEventListener(VBOCore.multitask_close_event, function() {
	358	+ if (jQuery('.vbo-sidepanel-colorscheme-list-show').length) {
	359	+ jQuery('.vbo-sidepanel-colorscheme-list-show').removeClass('vbo-sidepanel-colorscheme-list-show');
	360	+ }
	361	+ });
	362	+
	363	+ // dinamycally change the shortcut modifier depending on the OS
	364	+ const isMacOs = navigator.platform.toUpperCase().indexOf('MAC') === 0;
	365	+ jQuery('.vbo-sidepanel-shortcut .shortcut-keys .mod').text(isMacOs ? '⌘' : '⌃');
	366	+ jQuery('.vbo-sidepanel-shortcut .shortcut-subdesc').text(isMacOs ? '(CMD + ENTER)' : '(CTRL + ENTER)');
205	367	});
206	368	</script>