<?php
|
|
use JVBase\managers\Cache;
|
use JVBase\meta\Form;
|
use JVBase\base\Site;
|
use JVBase\utility\Image;
|
|
if (!defined('ABSPATH')) {
|
exit;
|
}
|
|
|
add_action('wp_footer', 'jvbClientQueue');
|
|
function jvbClientQueue():void
|
{
|
if (!Site::has('dashboard') || !is_user_logged_in()) {
|
return;
|
}
|
|
?>
|
<aside id="queue" class="left col start btw main" aria-expanded="false" >
|
<div class="m-actions row start nowrap">
|
<button class="refresh row" title="Check now">
|
<?= jvbIcon('arrows-clockwise', ['title'=> 'Check now']) ?>
|
<span class="countdown row indicator" title="Will refresh again...">5</span>
|
</button>
|
<div class="popup row"><span></span></div>
|
</div>
|
|
<div class="header col start">
|
<h2>Queue Status</h2>
|
<nav class="filters">
|
<?php
|
$filters = [
|
'all' => 'All',
|
'queued' => 'Received',
|
'localProcessing' => 'Checking Data',
|
'uploading' => 'Uploading',
|
'pending' => 'Pending',
|
'processing' => 'Processing',
|
'completed' => 'Completed',
|
'failed' => 'Failed',
|
];
|
$i = 0;
|
foreach($filters as $filter => $title) {
|
$active = ($i === 0) ? ' active': '';
|
?>
|
<input type="radio" id="qfilter-<?=$filter?>" name="qfilter" class="btn filter<?=$active?>" data-filter="<?=$filter?>">
|
<label for="qfilter-<?=$filter?>" data-count="0"><span class="count indicator row"></span><?=$title?></label>
|
<?php
|
$i++;
|
}
|
|
?>
|
</nav>
|
</div>
|
<div class="qitems item-grid col a-start nowrap">
|
</div>
|
<div class="queue-actions row btw nowrap">
|
<button class="dismiss-all">Clear Completed</button>
|
<button class="retry-all">Retry Failed</button>
|
</div>
|
</aside>
|
<button class="qtoggle sticky" title="Show Queue" aria-controls="queue" >
|
<?= jvbIcon('floppy-disk') ?>
|
<span class="screen-reader-text"></span>
|
<span class="indicator"></span>
|
<span class="count row"></span>
|
</button>
|
<template class="queueItem">
|
<div class="item">
|
<div class="header row btw">
|
<span class="type"></span>
|
<span class="status row"><?= jvbIcon('arrows-clockwise') ?><span class="screen-reader-text"></span></span>
|
</div>
|
<?php jvbRenderProgressBar('',false,false) ?>
|
<div class="info">
|
<div class="details"></div>
|
<div class="time row start">
|
<?= jvbIcon('clock') ?>
|
<span class="started">Started: <time></time></span>
|
<span class="completed" hidden><span>Completed: </span><time></time></span>
|
</div>
|
</div>
|
<div class="actions row end">
|
<button class="retry" data-action="retry"><span>Retry</span><?= jvbIcon('arrows-clockwise')?></button>
|
<button class="cancel" data-action="cancel"><span>Cancel</span><?= jvbIcon('x-square')?></button>
|
<button class="refresh" data-action="refresh" title="Refresh to see changes"><span>Refresh</span><?= jvbIcon('arrows-clockwise')?></button>
|
<button class="dismiss" data-action="dismiss"><span>Dismiss</span><?= jvbIcon('eye-closed')?></button>
|
</div>
|
</div>
|
</template>
|
<template class="typedText">
|
<span id="typed-text"></span>
|
<span class="cursor">|</span>
|
</template>
|
<template class="button">
|
<button></button>
|
</template>
|
<template class="emptyQueue">
|
<div class="empty queue row">Everything is up to date.</div>
|
</template>
|
<?php
|
}
|
|
/**
|
* Outputs the notification menu in the header
|
* @return string
|
*/
|
function jvbNotificationMenu():string
|
{
|
$membership = Site::membership();
|
if ($membership && $membership->has('notifications') && is_user_logged_in()) {
|
|
ob_start();
|
?>
|
<li>
|
<a href="<?=get_home_url(null, '/dash/')?>" title="Behind the Scenes">
|
<?= jvbIcon('door', ['title' => 'Behind the Scenes'])?>
|
<span class="screen-reader-text">Go Behind the Scenes</span>
|
</a>
|
</li>
|
<li class="notifications has-submenu">
|
<button class="toggle notifications" type="button" data-action="toggle-submenu" title="Toggle Notifications" aria-expanded="false" aria-controls="notifications-dropdown">
|
<?= jvbIcon('bell', ['title'=> 'No Notifications'])?>
|
<?= jvbIcon('bell-ringing', ['title'=> 'New Notifications']) ?>
|
<span class="notification-badge" aria-label="Notifications">
|
</span>
|
</button>
|
<ul class="notifications-preview submenu" id="notifications-dropdown">
|
<li id="view-all"><a href="<?=get_home_url(null, '/dash/notifications/')?>" class="view-all">View All Notifications</a></li>
|
</ul>
|
<template class="notificationItem">
|
<li class="notification-preview">
|
<p></p>
|
<time></time>
|
</li>
|
</template>
|
<template class="emptyNotification">
|
<li class="empty-state">No new notifications</li>
|
</template>
|
<template class="notificationActions">
|
<div class="notification-actions">
|
<button type="button" data-action="mark-read" title="Mark as Read" onclick="handleNotificationAction(this)"><?=jvbIcon('check')?></button>
|
</div>
|
</template>
|
</li>
|
<?php
|
return ob_get_clean();
|
}
|
return '';
|
}
|
|
/**
|
* Outputs the help menu
|
* @return string
|
*/
|
function jvbHelpMenu():string
|
{
|
if (!Site::has('help_menu')) {
|
return '';
|
}
|
|
$cache = Cache::for('help_menu');
|
$out = $cache->remember(
|
'help_menu',
|
function () {
|
$open = '<li><a href="';
|
$mid = '">';
|
$close = '</a></li>';
|
|
$titles = array(
|
'About',
|
'Contact',
|
'Request a Feature',
|
'Technical Issue',
|
);
|
$links = '';
|
foreach ($titles as $t) {
|
$page = new WP_Query(array(
|
'post_type' => 'page',
|
'title' => $t,
|
'fields' => 'ids'
|
));
|
if ($page->have_posts()) {
|
$end = ($t == 'About') ? '<li><a href="'.get_home_url(null, '/directory/partners/').'" title="View our Partners">Partners</a></li>' : '';
|
$links .= $open.get_the_permalink($page->posts[0]).'" title="'.$t.$mid.$t.$close.$end;
|
}
|
wp_reset_postdata();
|
}
|
|
return '<li class="has-submenu">
|
<button class="toggle quick-help" data-action="toggle-submenu" type="button" title="Toggle Quick Help Menu" aria-expanded="false" aria-controls="quick-help" aria-label="Toggle Quick Help Menu">'.jvbIcon('question', ['title'=> 'Quick Help']).'</button>
|
<ul class="submenu" id="quick-help">
|
'.$links.'
|
</ul>
|
</li>';
|
}
|
);
|
|
if (is_user_logged_in()) {
|
$out .= '<li><a href="'.wp_logout_url(get_home_url()).'" title="Logout">'.jvbIcon('sign-out').'<span class="screen-reader-text">Logout</span></a></li>';
|
} else {
|
$out .= '<li><a href="'.wp_login_url(null, true).'" title="Login">'.jvbIcon('sign-in').'<span class="screen-reader-text">Login</span></a></li>';
|
}
|
return $out;
|
}
|
|
|
/**
|
* Outputs the search bar (likely don't need anymore)
|
* @return string
|
*/
|
function jvbSearch(string $placeholder = 'Search...', string $id = 'search'):string
|
{
|
return Form::search($placeholder, $id);
|
}
|
|
|
|
function jvbModalActions()
|
{
|
return '<div class="m-actions row">
|
<button type="button" class="cancel">'.jvbIcon('x').'<span class="screen-reader-text">Cancel</span></button>
|
<button type="submit" class="save">'.jvbIcon('floppy-disk').'<span class="screen-reader-text">Save</span></button>
|
</div>';
|
}
|
|
function jvbNewModal(string $class, string $title, string $form)
|
{
|
return '<dialog class="'.$class.'">
|
<div class="wrap">
|
<h2>'.$title.'</h2>
|
'.str_replace('</form>', jvbModalActions().'</form>', $form).'
|
</div>
|
</dialog>';
|
}
|
|
/**
|
* Formats an image to match our image replacement formatting
|
* @param int|string $imgID
|
* @param string $start
|
* @param string $end
|
*
|
* @return string
|
*/
|
function jvbFormatImage(int $imgID, string $start = 'tiny', string $end = 'large', bool $addLink = true, ?string $postSlug = null):string
|
{
|
$image = new Image();
|
return $image->formatImage($imgID, $start, $end, $addLink, $postSlug);
|
}
|
|
function jvbImageCaption(int $imgID, string $start = 'tiny', string $end = 'large', bool $addLink = true, ?string $postSlug = null):string
|
{
|
$caption = wp_get_attachment_caption($imgID);
|
$caption = ($caption && $caption !== '') ? '<figcaption>'.jvb_filter_content( $caption).'</figcaption>' : '';
|
return '<figure>'.jvbFormatImage($imgID, $start, $end, $addLink, $postSlug).$caption.'</figure>';
|
}
|
|
/**
|
* Outputs the notification container in the footer
|
* @return void
|
*/
|
add_action('wp_footer', 'jvbToastContainer');
|
function jvbToastContainer():void
|
{
|
?>
|
<aside class="toasts col rev">
|
|
</aside>
|
<template class="notificationPopup">
|
<div class="toast" role="status" aria-live="polite">
|
<div class="toast-content row btw">
|
<p></p>
|
<button type="button" class="close-toast" aria-label="Close">
|
<?= jvbIcon('x') ?>
|
</button>
|
</div>
|
</div>
|
</template>
|
<?php
|
}
|
|
|
function jvbOnThisPage(array $ids):string
|
{
|
if (empty($ids)) {
|
return '';
|
}
|
|
ob_start();
|
$obj = get_queried_object();
|
$id = match (true) {
|
is_tax() => jvbNoBase($obj->taxonomy),
|
default => jvbNoBase($obj->post_type)
|
};
|
|
?>
|
<nav id="<?=$id?>" class="on-this-page index">
|
<button type="button" aria-label="Show Index" title="Show Index" class="toggle main" aria-expanded="false">
|
<span>Jump To:</span><?= jvbIcon('plus-square') ?>
|
</button>
|
<ul>
|
<li id="back-to-top">
|
<a href="#top" title="Back to Top">
|
<?= jvbIcon('caret-circle-up') ?><span>Back to Top</span>
|
</a>
|
</li>
|
<?php
|
foreach ($ids as $slug) {
|
?>
|
<li>
|
<a href="#<?= sanitize_title($slug) ?>"><?= ucwords(str_replace('-', ' ', str_replace('_', ' ', $slug))) ?></a>
|
</li>
|
<?php
|
}
|
?>
|
</ul>
|
</nav>
|
<?php
|
|
return ob_get_clean();
|
}
|
|
add_action('wp_footer', 'jvbLoadingScreen');
|
function jvbLoadingScreen():string
|
{
|
$icon = apply_filters('jvbLoadingIcon', 'drop-simple');
|
return '<dialog class="loading">
|
<div class="col">
|
<div class="spinner"></div>
|
<div class="status col">
|
<div class="icon">'.jvbIcon($icon).'</div>
|
<h3>Loading</h3>
|
<p class="typeText">Please wait...</p>
|
</div>
|
</div>
|
</dialog>';
|
}
|
|
/**
|
* @param array $tabs Array containing:
|
* $tabs = [
|
* 'tab1' => [
|
* 'title' => $title1,
|
* 'icon' => 'artist',
|
* 'description' => $description1,
|
* 'content' => $content1
|
* ],
|
* 'tab2' => [
|
* 'title' => $title2,
|
* 'content' => $content2
|
* ]
|
* ]
|
* @param bool $return Whether to output or return the form
|
* @return mixed
|
*/
|
function jvbRenderTabs(array $tabs, bool $return = false):string
|
{
|
if (empty($tabs)) {
|
echo '';
|
return '';
|
}
|
$header = '<nav class="tabs row start" role="tablist">';
|
$content = '';
|
$i = 0;
|
|
foreach ($tabs as $slug => $config) {
|
if (!array_key_exists('content', $config) || empty($config['content'])) {
|
error_log('No content for tab: '.$slug);
|
continue;
|
}
|
//Header
|
$active = ($i === 0) ? ' active' : '';
|
$selected = ($i === 0) ? 'true' : 'false';
|
$hidden = (array_key_exists('hidden', $config)) ? ' hidden' : '';
|
$header .= '<button type="button" class="button tab'.$active.'" data-tab="'.$slug.'" role="tab" aria-selected="'.$selected.'"'.$hidden.'>';
|
if (array_key_exists('icon', $config)) {
|
$header .= jvbIcon($config['icon']);
|
}
|
$header .= $config['title'].'
|
</button>';
|
|
//Content
|
$selected = ($i === 0) ? 'false' : 'true';
|
$content .= '<div class="tab-content'.$active.'" data-tab="'.$slug.'" role="tabpanel" aria-hidden="'.$selected.'"';
|
if ($i !== 0) {
|
$content .= ' hidden';
|
}
|
$content .= '>';
|
|
if (array_key_exists('header', $config)) {
|
$content .= $config['header'];
|
} else {
|
$content .= '<h2>'.$config['title'].'</h2>';
|
if ( array_key_exists('description', $config)) {
|
if (!is_array($config['description'])) {
|
$content .= jvb_filter_content( $config['description']);
|
} else {
|
// foreach ($config['description'] as $desc) {
|
// $content .= jvb_filter_content( $desc);
|
// }
|
$content .= implode('',array_map(function ($paragraph) {
|
return jvb_filter_content( $paragraph);
|
}, $config['description']));
|
}
|
|
}
|
}
|
|
|
|
$content .= $config['content'].'
|
</div>';
|
$i++;
|
}
|
$header .= '</nav>';
|
$out = $header.$content;
|
|
if ($return) {
|
return $out;
|
}
|
echo $out;
|
return $out;
|
}
|
|
function jvbRenderProgressBar(string $inside ='', $top = false, $icon = true, $return = false):string
|
{
|
|
$top = $top ? ' abs top' : '';
|
$bar = sprintf(
|
'<div class="progress%s">
|
<div class="bar">
|
<div class="fill"></div>
|
</div>
|
<div class="row btw">
|
%s
|
<div class="details">
|
%s
|
</div>
|
</div>
|
</div>',
|
$top,
|
($icon) ? '<i class="icon"></i>': '',
|
$inside
|
);
|
if (!$return) {
|
echo $bar;
|
}
|
return $bar;
|
}
|
|
function jvbFormStatus(string $message = ''):string
|
{
|
return sprintf(
|
'%s
|
<div class="fstatus row" hidden>
|
<div class="spinner"></div>
|
<i class="icon"></i>
|
<p class="message">%s</p>
|
</div>',
|
jvbFormRestore(),
|
$message
|
);
|
}
|
function jvbFormRestore():string
|
{
|
return sprintf(
|
'<div class="restore-form col" hidden>
|
<h3>Looks like we left things hanging...</h3>
|
<p>Would you like to continue where you left off?</p>
|
<div class="actions">
|
<button class="restore" type="button" data-action="restore">%s<span>Restore</span></button>
|
<button type="button" class="discard" data-action="clear">
|
%s
|
<span>Discard</span>
|
</button>
|
</div>
|
</div>',
|
jvbFormIcon('clock-clockwise'),
|
jvbFormIcon('x'),
|
);
|
}
|
|
|
function jvbDarkModeToggle():string
|
{
|
$checked = (is_user_logged_in() && current_user_can('prefers_dark_theme', true)) ? ' checked' : '';
|
$title = ($checked == '') ? 'Toggle Dark Mode' : 'Toggle Light Mode';
|
$showThemeSwitch = (bool)apply_filters('jvb_show_theme_switch', true);
|
$themeSwitch = sprintf(
|
'<label title="%s" id="theme-switch" class="switch" for="theme-switcher">
|
<input class="theme-switch row" id="theme-switcher" name="theme-switcher" type="checkbox"%s data-setting="theme" data-theme role="switch" name="dark-mode" aria-label="Toggle dark mode">
|
<span class="slider">%s%s</span>
|
</label>',
|
$title,
|
$checked,
|
jvbIcon('sun-dim', ['title'=> 'Light Mode']),
|
jvbIcon('moon', ['title'=>'Dark Mode'])
|
);
|
return ($showThemeSwitch) ? $themeSwitch : '';
|
}
|
