Skip to content

Commit

Permalink
MidWinter:
Browse files Browse the repository at this point in the history 
- icon updates
- introduce fullscreen button with native usage of HTML fullscreen API.
- re-enable jstree
  • Loading branch information
@browniebraun
browniebraun committed Feb 2, 2025
1 parent ccdad8b commit b30738d
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 13 deletions.
58 changes: 51 additions & 7 deletions include/themes/midwinter/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,14 @@ function themeReady() {
setThemeColor();

hideConsoleNavigation();
//setupTree();
setupTree();
setupThemeActions();
themeLoader('off');
}

function hideConsoleNavigation() {
$('[class^="mdw-ConsoleNavigationBox"]').removeClass('visible');
//$('[class^="mdw-ConsoleNavigationBox"][data-helper!="tree"]').removeClass('visible');
$('[class^="mdw-ConsoleNavigationBox"][data-helper!="tree"]').removeClass('visible');
$('.compact_nav_icon[data-helper!="tree"]').removeClass('selected');
}

Expand Down Expand Up @@ -225,7 +225,12 @@ function setupTheme() {
'<div id="mdw-DockRight" class="mdw-DockRight invisible"></div>' +
'<div id="mdw-DockBottom" class="mdw-DockBottom invisible"></div>'+
'</div>' +
'</div>'
'</div><div popover=manual id="mdw-PopOver" class="mdw-PopOver">' +
'<button class="close-btn" popovertarget="mdw-PopOver" popovertargetaction="hide">' +
'<span aria-hidden="true">❌</span>' +
'<p class="sr-only">Close</p>' +
'</button>' +
'</div>'
).
insertBefore("#breadCrumbBar");

Expand Down Expand Up @@ -268,7 +273,7 @@ function setupTheme() {
);

/* dashboards */
new navigationButton('dashboards', 'Panels', 'Panels', 'far fa-compass', '#compact_tab_menu').show();
new navigationButton('dashboards', 'Panels', 'Panels', 'far fa-map', '#compact_tab_menu').show();
new navigationBox(cactiDashboards, 'dashboards', 'full','auto', {
close: true,
search: 'searchToHighlight',
Expand All @@ -277,7 +282,7 @@ function setupTheme() {

/* settings */
if (cactiConsoleAllowed) {
new navigationButton('settings', 'Setup', 'Settings', 'fa fa-cogs', '#compact_tab_menu');
new navigationButton('settings', 'Setup', 'Settings', 'far fa-sun', '#compact_tab_menu');
new navigationBox(zoom_i18n_settings, 'settings', 'full', 'auto', {
close: true,
search: 'searchToHighlight',
Expand All @@ -295,6 +300,7 @@ function setupTheme() {
},'left', 'Tree').build();
}


/* user help */
new navigationButton('help', 'Help', 'Help', 'far fa-comments', '#compact_user_menu').show();
new navigationBox(help, 'help', 'half', '2', {
Expand Down Expand Up @@ -323,6 +329,12 @@ function setupTheme() {
}, 'right','Table Layout', 'auto').build();
new navigationButton('toggleColorMode', 'Color', 'Toggle light/dark Mode', 'fas fa-circle-half-stroke', '#navControl', 'toggleColorMode', 'on').show();
new navigationButton('kioskMode', 'Kiosk', 'Enable Kiosk Mode', 'fas fa-tv', '#navControl', 'kioskMode', 'on').show();

if ( document.fullscreenEnabled ) {
let icon = (!document.fullscreenElement) ? 'fas fa-expand' : 'fas fa-compress';
new navigationButton('fullScreen', 'Fullscreen', 'Switch to Fullscreen', icon, '#navControl', 'fullScreen').show();
}

}
}

Expand All @@ -336,6 +348,11 @@ function setupTheme() {
}else {
$('[class^="compact_nav_icon"][data-helper="settings"]').removeClass('hide');
}

$('#main').off('resize').on('resize', function() {
let width = $('#main');
$('#main .saveRowParent').width(width);
})
}

function setupThemeActions() {
Expand All @@ -357,6 +374,7 @@ function setupThemeActions() {
$('#main, #navigation_right').off().on('click', {param: 'off'}, toggleCactiNavigationBox);
$('.mdw-ConsoleNavigationBox').off().on('click', hideDropDownMenu);
//$('.dropdown').off().on('click', toggleDropDownMenu);
document.addEventListener("fullscreenchange", fullScreenChangeHandler);
}

function redirect(event) {
Expand Down Expand Up @@ -556,7 +574,8 @@ function setupDefaultElements() {
});

/* cleanup - remove unused elements */
$('#breadCrumbBar, .cactiPageHead, .cactiShadow, .cactiConsoleNavigationArea, .cactiTreeNavigationArea').detach();
//$('#breadCrumbBar, .cactiPageHead, .cactiShadow, .cactiConsoleNavigationArea, .cactiTreeNavigationArea').detach();
$('#breadCrumbBar, .cactiPageHead, .cactiShadow, .cactiConsoleNavigationArea').detach();

// top right corner navigation bar - holds buttons
//$('#navFilter').removeClass('visible');
Expand Down Expand Up @@ -613,7 +632,7 @@ function setupDefaultElements() {
}

/* display option: table layout */
let btn_table_layout = new navigationButton('displayOptions', 'Table', 'Setup Table Layout','fas fa-sliders', '#navFilter');
let btn_table_layout = new navigationButton('displayOptions', 'Table', 'Setup Table Layout','fas fa-table-list', '#navFilter');

if ($('tr.tableHeader').length !== 0) {
let cArray = [];
Expand Down Expand Up @@ -968,6 +987,31 @@ function checkThemeColorSetup(color_mode) {
}
}

function togglePopOver() {
const popover = document.getElementById('mdw-PopOver');
const popupOpened = popover.togglePopover();
if (popupOpened !== undefined) {
this.innerText +=
popupOpened === true ? `\nOpened` : `\nClosed`;
}
}

function fullScreen(event) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().then( r => fullScreenChangeHandler() );
}else if (document.exitFullscreen) {
document.exitFullscreen().then( r => fullScreenChangeHandler() );
}
}

function fullScreenChangeHandler() {
if (document.fullscreenElement) {
$('.compact_nav_icon[data-helper="fullScreen"]>i').removeClass('fa-expand').addClass('fa-compress');
}else {
$('.compact_nav_icon[data-helper="fullScreen"]>i').addClass('fa-expand').removeClass('fa-compress');
}
}


function kioskMode(event = false) {
if (event === false) {
Expand Down
12 changes: 6 additions & 6 deletions include/themes/midwinter/midwinter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ class navigationButton {
this.#icon.onclick = onclick;
}

this.#container = '<div class="compact_nav_icon hide" data-subtitle="'+this.#icon.title+'" data-helper="'+this.#icon.helper+'" title="'+this.#icon.tooltip+'" role="button" tabindex="0" aria-pressed="false"><i class="'+this.#icon.class+'"></i></div>';
this.#container = '<div class="compact_nav_icon hide" data-subtitle="'+this.#icon.title+'" data-helper="'+this.#icon.helper+'" data-tooltip="'+this.#icon.tooltip+'" role="button" tabindex="0" aria-pressed="false"><i class="'+this.#icon.class+'"></i></div>';

/* avoid duplicates */
if( $(this.#icon.destination + ' > div[class^="compact_nav_icon"][data-helper="' + this.#icon.helper + '"]').length === 0 ) {
Expand Down Expand Up @@ -240,7 +240,7 @@ function get_dashboards_content(){
compact_tab_menu_content +=
'<li class="menuitem" id="menu_home">'
+ '<a class="menu_parent" href="#" inert>'
+ '<i class="menu_glyph ignore fa fa-home"></i>'
+ '<i class="menu_glyph ignore fa fa-crown"></i>'
+ '<span>'+cactiHome+'</span>'
+ '</a>'
+ '<ul>'
Expand All @@ -254,7 +254,7 @@ function get_dashboards_content(){
compact_tab_menu_content +=
'<li class="menuitem" id="menu_tab_dashboard">'
+ '<a class="menu_parent" href="#" inert>'
+ '<i class="menu_glyph ignore fa fa-chart-area"></i>'
+ '<i class="menu_glyph ignore fas fa-binoculars"></i>'
+ '<span>Views</span>'
+ '</a>'
+ '<ul>'
Expand Down Expand Up @@ -309,7 +309,7 @@ function get_help_content() {
'<ul class="nav">'
+ '<li class="menuitem" id="menu_user_help">'
+ '<a class="menu_parent" href="#" inert>'
+ '<i class="menu_glyph fas fa-book-medical"></i>'
+ '<i class="menu_glyph fas fa-parachute-box"></i>'
+ '<span>'+cactiGeneral+'</span>'
+ '</a>'
+ '<ul>'
Expand Down Expand Up @@ -337,7 +337,7 @@ function get_help_content() {
+ '<span>'+cactiKeyboard+'</span>'
+ '</a>'
+ '<ul>'
+ '<li><a href="#" class="dialog_client">'+cactiShortcuts+'</a></li>'
+ '<li><a href="#" class="dialog_client" data-scope="theme" data-func="togglePopOver">'+cactiShortcuts+'</a></li>'
+ '</ul>'
+ '</li>'
+ '<li class="menuitem" id="menu_user_help">'
Expand Down Expand Up @@ -453,7 +453,7 @@ function get_user_content() {

function get_tree_content() {
let compact_tree_content =
'<div class="mdw_tree" id="mdw_tree">'
'<div class="mdw_tree" id="jstree">'
+ '<div class="mdw-treen_content" id="mdw_tree_content">'
+ '</div>'
+'</div>';
Expand Down

0 comments on commit b30738d

Please sign in to comment.