Skip to content

Commit

Permalink
feat: ✨ add settings sub-menu to plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
@thkruz
thkruz committed Aug 4, 2024
1 parent a165f6e commit ca80d41
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 53 deletions.
21 changes: 21 additions & 0 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,7 @@ ul {
left: 0px;
transition: all 1s ease-in-out;
transform: translateX(-100%);
background: var(--colorTertiaryDarken2);
}

input[type='checkbox'].css-checkbox {
Expand Down Expand Up @@ -1552,6 +1553,26 @@ footer {
padding: 0px 5px;
}

.side-menu-settings {
position: relative;
height: 100%;
border-width: 0px 5px 0px 0px;
border-color: var(--colorTertiaryDarken3);
border-style: solid;
background: var(--colorTertiaryDarken2);
color: white;
width: 100%;
top: 0px;
bottom: 0px;
overflow: auto;
z-index: 10;
padding: 0px 10px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 10px;
}

.ui-slider {
width: 160px !important;
}
Expand Down
9 changes: 7 additions & 2 deletions src/lib/click-and-drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@ export const clickAndDragWidth = (el: HTMLElement | null, options: clickDragOpti
width = width < minWidth ? minWidth : width;
width = width > maxWidth ? maxWidth : width;
el.style.width = `${width}px`;
el.style.display = 'block';

settingsManager.isDragging = false;

if (options.isDraggable) {
// create new element on right edge
const edgeEl = createElWidth_(el);

addEventsWidth_(edgeEl, el, width, minWidth, maxWidth);
addEventsWidth_(edgeEl, el, width, minWidth, maxWidth, options.attachedElement);
}
};

Expand All @@ -38,7 +39,7 @@ export const clickAndDragHeight = (el: HTMLElement, maxHeight?: number, callback
addEventsHeight_(edgeEl, el, callback, maxHeight);
};

const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number, minWidth: number, maxWidth: number) => {
const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number, minWidth: number, maxWidth: number, attachedElement?: HTMLElement) => {
let startX: number;
let startWidth: number;

Expand Down Expand Up @@ -70,6 +71,10 @@ const addEventsWidth_ = (edgeEl: HTMLDivElement, el: HTMLElement, width: number,
width = width < minWidth ? minWidth : width;
width = width > maxWidth ? maxWidth : width;
el.style.width = `${width}px`;

if (attachedElement) {
attachedElement.style.left = `${el.getBoundingClientRect().right}px`;
}
});
}
});
Expand Down
109 changes: 103 additions & 6 deletions src/plugins/KeepTrackPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import { shake } from '../lib/shake';
import { slideInRight, slideOutLeft } from '../lib/slide';
import { errorManagerInstance } from '../singletons/errorManager';
import { SelectSatManager } from './select-sat-manager/select-sat-manager';
import { SoundNames } from './sounds/SoundNames';

export interface clickDragOptions {
isDraggable?: boolean;
minWidth?: number;
maxWidth?: number;
attachedElement?: HTMLElement;
}

/**
Expand Down Expand Up @@ -66,11 +68,26 @@ export class KeepTrackPlugin {
*/
sideMenuElementName: string;

/**
* The title of the side menu.
* @example 'Countries Menu'
*/
sideMenuTitle: string;

/**
* The html to use for the side menu.
*/
sideMenuElementHtml: string;

/**
* The html to use for the side menu's attached settings menu.
*/
sideMenuSettingsHtml: string;

/**
* Whether the side menu settings are open.
*/
isSideMenuSettingsOpen: boolean = false;
/**
* The title of the help dialog.
* @example 'Countries Menu'
Expand Down Expand Up @@ -216,11 +233,65 @@ export class KeepTrackPlugin {
}

if (this.sideMenuElementName && this.sideMenuElementHtml) {
this.addSideMenu(this.sideMenuElementHtml);
if (this.sideMenuSettingsHtml) {
const settingsBtn = `${this.sideMenuElementName}-settings-btn`;
const sideMenuHtmlWrapped = keepTrackApi.html`
<div id="${this.sideMenuElementName}" class="side-menu-parent start-hidden text-select" style="z-index: 5;">
<div id="${this.sideMenuElementName}-content" class="side-menu">
<div class="row" style="margin-top: 5px;margin-bottom: 0px;display: flex;justify-content: space-evenly;align-items: center;flex-direction: row;flex-wrap: nowrap;">
<h5 class="center-align" style="margin-left: auto">${this.sideMenuTitle}</h5>
<button id="${settingsBtn}"
class="center-align btn btn-ui waves-effect waves-light"
style="padding: 2px; margin: 0px;margin-left: auto; color: var(--statusDarkStandby); background-color: rgba(0, 0, 0, 0);box-shadow: none;"
type="button">
<i class="material-icons" style="font-size: 2em;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;">
settings
</i>
</button>
</div>
<li class="divider" style="padding: 2px !important;"></li>
${this.sideMenuElementHtml}
</div>
</div>`;

this.addSideMenu(sideMenuHtmlWrapped);
} else {
this.addSideMenu(this.sideMenuElementHtml);
}
} else if (this.sideMenuElementName || this.sideMenuElementHtml) {
throw new Error(`${this.PLUGIN_NAME} side menu element name and html must both be defined.`);
}

if (this.sideMenuSettingsHtml) {
const sideMenuHtmlWrapped = keepTrackApi.html`
<div id="${this.sideMenuElementName}-settings" class="side-menu-parent start-hidden text-select" style="z-index: 3;">
<div id="${this.sideMenuElementName}-content" class="side-menu-settings" style="padding: 0px 10px;">
<div class="row"></div>
${this.sideMenuSettingsHtml}
</div>
</div>
`;

this.addSideMenu(sideMenuHtmlWrapped);

keepTrackApi.register({
event: KeepTrackApiEvents.uiManagerInit,
cbName: this.PLUGIN_NAME,
cb: () => {
getEl(`${this.sideMenuElementName}-settings-btn`).addEventListener('click', () => {
keepTrackApi.getSoundManager().play(SoundNames.CLICK);
if (this.isSideMenuSettingsOpen) {
this.closeSettingsMenu();
getEl(`${this.sideMenuElementName}-settings-btn`).style.color = 'var(--statusDarkStandby)';
} else {
this.openSettingsMenu();
getEl(`${this.sideMenuElementName}-settings-btn`).style.color = 'var(--statusDarkNormal)';
}
});
},
});
}

if (this.submitCallback) {
this.registerSubmitButtonClicked(this.submitCallback);
}
Expand Down Expand Up @@ -286,7 +357,11 @@ export class KeepTrackPlugin {
}

if (this.sideMenuElementName) {
this.registerHideSideMenu(this.bottomIconElementName, this.sideMenuElementName);
this.registerHideSideMenu(this.bottomIconElementName, this.closeSideMenu.bind(this));
}

if (this.sideMenuSettingsHtml) {
this.registerHideSideMenu(this.bottomIconElementName, this.closeSettingsMenu.bind(this));
}

if (this.rmbCallback) {
Expand Down Expand Up @@ -562,8 +637,27 @@ export class KeepTrackPlugin {
slideInRight(getEl(this.sideMenuElementName), 1000);
}

openSettingsMenu() {
const settingsMenuElement = getEl(`${this.sideMenuElementName}-settings`);
const sideMenuElement = getEl(this.sideMenuElementName);

if (settingsMenuElement) {
this.isSideMenuSettingsOpen = true;
settingsMenuElement.style.left = `${sideMenuElement.getBoundingClientRect().right}px`;
slideInRight(settingsMenuElement, 1000);
}
}

closeSideMenu() {
slideOutLeft(getEl(this.sideMenuElementName), 1000);
const settingsMenuElement = getEl(`${this.sideMenuElementName}`);

slideOutLeft(settingsMenuElement, 1000);
}

closeSettingsMenu() {
this.isSideMenuSettingsOpen = false;
getEl(`${this.sideMenuElementName}-settings-btn`).style.color = 'var(--statusDarkStandby)';
slideOutLeft(getEl(`${this.sideMenuElementName}-settings`), 1500, null, -300);
}

registerSubmitButtonClicked(callback: () => void = null) {
Expand Down Expand Up @@ -593,6 +687,9 @@ export class KeepTrackPlugin {
event: KeepTrackApiEvents.uiManagerFinal,
cbName: this.PLUGIN_NAME,
cb: () => {
if (this.sideMenuSettingsHtml) {
opts.attachedElement = getEl(`${this.sideMenuElementName}-settings`);
}
clickAndDragWidth(getEl(this.sideMenuElementName), opts);
},
});
Expand Down Expand Up @@ -622,14 +719,14 @@ export class KeepTrackPlugin {
/**
* Registers a callback function to hide the side menu and deselect the bottom icon element.
* @param bottomIconElementName The name of the bottom icon element to deselect.
* @param sideMenuElementName The name of the side menu element to hide.
* @param slideCb The callback function to run when the side menu is hidden.
*/
registerHideSideMenu(bottomIconElementName: string, sideMenuElementName: string): void {
registerHideSideMenu(bottomIconElementName: string, slideCb: () => void): void {
keepTrackApi.register({
event: KeepTrackApiEvents.hideSideMenus,
cbName: this.PLUGIN_NAME,
cb: (): void => {
slideOutLeft(getEl(sideMenuElementName), 1000);
slideCb();
getEl(bottomIconElementName).classList.remove(KeepTrackPlugin.iconSelectedClassString);
this.isMenuButtonActive = false;
},
Expand Down
Loading

0 comments on commit ca80d41

Please sign in to comment.