Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add context menu script

Browse source
This commit is contained in:
Michał Gdula 2023-09-24 19:53:14 +01:00
parent 2db4d0a6ea
commit 8a4fe891ef
9 changed files with 463 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

135
onlylegs/static/js/contextMenu.js Normal file
View file

@ -0,0 +1,135 @@
function showContextMenu(obj, menu, position='mouse') {
// If the context menu is already open, close it first
if (document.querySelector(".contextMenu")) {
dissmissContextMenu();
}
// Add span to close the context menu
let contextCloseSpan = document.createElement("span");
contextCloseSpan.className = "contextMenuClose";
contextCloseSpan.onclick = dissmissContextMenu;
// Create the context menu
let contextMenu = document.createElement("div");
contextMenu.className = "contextMenu";
// Create the menu items
menu.forEach(array => {
if (array.value === "divider") {
let divider = document.createElement("hr");
divider.className = "contextMenuDivider";
contextMenu.appendChild(divider);
return;
} else if (array['value'] === "title") {
let titleP = document.createElement("p");
titleP.className = "contextMenuTitle";
titleP.innerHTML = array.text;
contextMenu.appendChild(titleP);
let divider = document.createElement("hr");
divider.className = "contextMenuDivider";
contextMenu.appendChild(divider);
return;
}
let itemBtn = document.createElement("button");
itemBtn.className = "contextMenuItem";
itemBtn.onclick = array['function'];
if (array['type'] === "critical") {
itemBtn.classList.add("contextMenuItem__critical");
} else if (array['type'] === "warning") {
itemBtn.classList.add("contextMenuItem__warning");
} else if (array['type'] === "success") {
itemBtn.classList.add("contextMenuItem__success");
} else if (array['type'] === "info") {
itemBtn.classList.add("contextMenuItem__info");
}
let itemIcon = document.createElement("span");
itemIcon.className = "contextMenuIcon";
if (array['icon']) {
itemIcon.innerHTML = array['icon'];
} else {
itemIcon.innerHTML = '';
}
itemBtn.appendChild(itemIcon);
// Create the text for the action
let itemText = document.createElement("p");
itemText.className = "contextMenuText";
itemText.innerHTML = array.value;
itemBtn.appendChild(itemText);
contextMenu.appendChild(itemBtn);
});
// Add the context menu to the body
document.body.appendChild(contextMenu);
document.body.appendChild(contextCloseSpan);
let posX;
let posY;
if (position === 'mouse') {
posX = event.clientX + 5;
posY = event.clientY + 5;
} else if (position === 'button') {
posX = obj.offsetLeft + (obj.offsetWidth / 2) - (contextMenu.offsetWidth / 2);
posY = obj.offsetTop + obj.offsetHeight + 5;
} else if (position === 'center') {
posX = (window.innerWidth / 2) - (contextMenu.offsetWidth / 2);
posY = (window.innerHeight / 2) - (contextMenu.offsetHeight / 2);
} else {
posX = event.clientX + 5;
posY = event.clientY + 5;
}
// Move the context menu if it is off the screen
if (posX + contextMenu.offsetWidth > window.innerWidth) {
posX = window.innerWidth - (contextMenu.offsetWidth + 5);
} else if (posX < 0) {
posX = 5;
}
if (posY < 0) {
posY = 5;
}
contextMenu.style.left = posX + "px";
contextMenu.style.top = posY + "px";
// Timeout otherwise animation doesn't work
setTimeout(function() {
if (position === 'mouse') {
contextMenu.classList.add("contextMenu__show--mouse");
} else if (position === 'button') {
contextMenu.classList.add("contextMenu__show--button");
} else if (position === 'center') {
contextMenu.classList.add("contextMenu__show--center");
} else {
contextMenu.classList.add("contextMenu__show");
}
}, 1);
}
function dissmissContextMenu() {
// Remove the close span
let contextSpan = document.querySelectorAll(".contextMenuClose");
contextSpan.forEach(menu => {
menu.remove();
});
// Get the context menu
let contextMenu = document.querySelectorAll(".contextMenu");
contextMenu.forEach(menu => {
menu.classList.add("contextMenu__hide");
setTimeout(function() {
menu.remove();
}, 500);
});
}
window.onresize = () => {
dissmissContextMenu();
}

64
onlylegs/static/js/imagePage.js
View file

@ -12,6 +12,69 @@ function imageFullscreen() {
document.cookie = "image-info=1"
}
}
function imageShowOptionsPopup(obj) {
// let title = 'Options';
// let subtitle = null;
//
// let body = document.createElement('div');
// body.style.cssText = 'display: flex; flex-direction: column; gap: 0.5rem;';
//
// let copyBtn = document.createElement('button');
// copyBtn.classList.add('btn-block');
// copyBtn.innerHTML = 'Copy URL';
// copyBtn.onclick = () => {
// copyToClipboard(window.location.href)
// }
//
// let downloadBtn = document.createElement('a');
// downloadBtn.classList.add('btn-block');
// downloadBtn.innerHTML = 'Download';
// downloadBtn.href = '/api/media/uploads/' + image_data["filename"];
// downloadBtn.download = '';
//
// body.appendChild(copyBtn);
// body.appendChild(downloadBtn);
//
// if (image_data["owner"]) {
// let editBtn = document.createElement('button');
// editBtn.classList.add('btn-block');
// editBtn.classList.add('critical');
// editBtn.innerHTML = 'Edit';
// editBtn.onclick = imageEditPopup;
//
// let deleteBtn = document.createElement('button');
// deleteBtn.classList.add('btn-block');
// deleteBtn.classList.add('critical');
// deleteBtn.innerHTML = 'Delete';
// deleteBtn.onclick = imageDeletePopup;
//
// body.appendChild(editBtn);
// body.appendChild(deleteBtn);
// }
//
// popupShow(title, subtitle, body, [popupCancelButton]);
showContextMenu(obj, [
{
'value': 'Edit',
'function': () => {
dissmissContextMenu();
imageEditPopup();
},
'type': 'critical'
},
{
'value': 'Delete',
'function': () => {
dissmissContextMenu();
imageDeletePopup();
},
'type': 'critical'
}
], 'button')
}
function imageDeletePopup() {
let title = 'DESTRUCTION!!!!!!';
let subtitle =
@ -92,7 +155,6 @@ function imageEditConfirm(event) {
body: form,
}).then(response => {
if (response.ok) {
popupDismiss();
window.location.reload();
} else {
addNotification('Image *clings*', 2);

16
onlylegs/static/js/popup.js
View file

@ -9,13 +9,17 @@ function popupShow(titleText, subtitleText, bodyContent=null, userActions=null)
actionsSelector.innerHTML = '';
// Set popup header and subtitle
let titleElement = document.createElement('h2');
titleElement.innerHTML = titleText;
headerSelector.appendChild(titleElement);
if (titleText) {
let titleElement = document.createElement('h2');
titleElement.innerHTML = titleText;
headerSelector.appendChild(titleElement);
}
let subtitleElement = document.createElement('p');
subtitleElement.innerHTML = subtitleText;
headerSelector.appendChild(subtitleElement);
if (subtitleText) {
let subtitleElement = document.createElement('p');
subtitleElement.innerHTML = subtitleText;
headerSelector.appendChild(subtitleElement);
}
if (bodyContent) { headerSelector.appendChild(bodyContent) }