weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clipping is now less bad.

Browse Source
This commit is contained in:
PeekabooSteam 2023-04-04 19:16:00 +01:00
parent ff20eec472
commit 5dda45ad22
5 changed files with 99 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/public/stylesheets/contextmenus.css
View File

@ -5,7 +5,7 @@
position: absolute;
row-gap: 5px;
width: 230px;
z-index: 1000;
z-index: 9999;
}
#aircraft-spawn-menu {

9
client/public/stylesheets/olympus.css
View File

@ -142,8 +142,9 @@ form > div {
}
.ol-select>.ol-select-options {
position: absolute;
border-radius: var( --border-radius-md );
overflow: hidden;
position: absolute;
max-height: 0;
translate: 0 -2px;
z-index: 1000;
@ -160,9 +161,15 @@ form > div {
overflow-y: auto;
padding: 8px 0;
min-width: 100%;
z-index:9999;
}
.ol-select.is-open[data-position="top"] > .ol-select-options {
top:0;
translate:0 -100%;
}
.ol-select>.ol-select-options > div {

60
client/src/controls/dropdown.ts
View File

@ -8,15 +8,61 @@ export class Dropdown {
constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
{
this.#element = <HTMLElement>document.getElementById(ID);
this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
this.#element = <HTMLElement>document.getElementById(ID);
this.#options = <HTMLElement>this.#element.querySelector(".ol-select-options");
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
this.#defaultValue = this.#value.innerText;
this.#callback = callback;
if (options != null)
this.#callback = callback;
if (options != null) {
this.setOptions(options);
}
this.#value.addEventListener( "click", ev => {
this.#element.classList.toggle( "is-open" );
this.#clip();
});
this.#element.addEventListener("mouseleave", ev => {
this.#close();
});
}
#clip() {
const options = this.#options;
const bounds = options.getBoundingClientRect();
this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
}
#close() {
this.#element.classList.remove( "is-open" );
this.#element.dataset.position = "";
}
#open() {
this.#element.classList.add( "is-open" );
}
#toggle() {
if ( this.#element.classList.contains( "is-open" ) ) {
this.#close();
} else {
this.#open();
}
}
setOptions(optionsList: string[])
{
this.#optionsList = optionsList;
@ -26,8 +72,10 @@ export class Dropdown {
button.textContent = option;
div.appendChild(button);
button.addEventListener("click", (e: MouseEvent) => {
e.stopPropagation();
this.#value.innerText = option;
this.#callback(option);
this.#close();
this.#callback( option, e );
});
return div;
}));

21
client/src/index.ts
View File

@ -213,27 +213,6 @@ function setupEvents() {
el.classList.toggle( "hide" );
})
});
/** Olympus UI ***/
document.querySelectorAll(".ol-select").forEach(select => {
// Do open/close toggle
select.addEventListener("click", ev => {
if ( ev.target instanceof HTMLElement && ev.target.nodeName !== "A" ) {
ev.preventDefault();
}
ev.stopPropagation();
select.classList.toggle("is-open");
});
// Autoclose on mouseleave
select.addEventListener("mouseleave", ev => {
select.classList.remove("is-open");
});
});
}
export function getMap() {

36
client/views/uikit.ejs
View File

@ -982,6 +982,42 @@
</div>
</div>
<div class="example">
<div class="ol-select">
<div class="ol-select-value">
The selected value goes here
</div>
<div class="ol-select-options">
<div>
<button>Option 1</button>
</div>
<div>
<button>Option 2</button>
</div>
</div>
</div>
</div>
<div class="example">
<div class="ol-select" data-position="top">
<div class="ol-select-value">
Options go up
</div>
<div class="ol-select-options">
<div>
<button>Option 1</button>
</div>
<div>
<button>Option 2</button>
</div>
</div>
</div>
</div>
</div>
</div>