Theme page
This commit is contained in:
parent
0982a91c03
commit
af3db6d164
9 changed files with 597 additions and 304 deletions
152
Context Menus/js/contextMenu.js
Normal file
152
Context Menus/js/contextMenu.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
/*
|
||||
Function takes an object as a parameter to
|
||||
determine where to display the context menu
|
||||
|
||||
menu:
|
||||
value - Text to display
|
||||
icon - True for default icon, false for no icon, or a string for a custom icon
|
||||
function - Function to call when clicked
|
||||
type - Type of menu item (critical, warning, success, info)
|
||||
*/
|
||||
|
||||
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
|
||||
var closeSpan = document.createElement("span");
|
||||
closeSpan.className = "contextMenuClose";
|
||||
closeSpan.onclick = dissmissContextMenu;
|
||||
|
||||
// Create the context menu
|
||||
var contextMenu = document.createElement("div");
|
||||
contextMenu.className = "contextMenu";
|
||||
|
||||
// Create the menu items
|
||||
menu.forEach(array => {
|
||||
if (array.value == "divider") {
|
||||
// If the menu item is a divider, create a divider
|
||||
var divider = document.createElement("hr");
|
||||
divider.className = "contextMenuDivider";
|
||||
contextMenu.appendChild(divider);
|
||||
return;
|
||||
} else if (array.value == "title") {
|
||||
// Create the title and add it to the context menu
|
||||
var titleP = document.createElement("p");
|
||||
titleP.className = "contextMenuTitle";
|
||||
titleP.innerHTML = array.text;
|
||||
contextMenu.appendChild(titleP);
|
||||
// Add a divider after the title
|
||||
var divider = document.createElement("hr");
|
||||
divider.className = "contextMenuDivider";
|
||||
contextMenu.appendChild(divider);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the menu item
|
||||
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");
|
||||
}
|
||||
|
||||
// Create the icon for the action
|
||||
itemIcon = document.createElement("span");
|
||||
itemIcon.className = "contextMenuIcon";
|
||||
// Determine if the menu item has an icon
|
||||
if (array.icon != null) {
|
||||
itemIcon.innerHTML = array.icon;
|
||||
} else {
|
||||
itemIcon.innerHTML = '';
|
||||
}
|
||||
itemBtn.appendChild(itemIcon);
|
||||
|
||||
// Create the text for the action
|
||||
itemText = document.createElement("p");
|
||||
itemText.className = "contextMenuText";
|
||||
itemText.innerHTML = array.value;
|
||||
itemBtn.appendChild(itemText);
|
||||
|
||||
// Add menu item to the context menu
|
||||
contextMenu.appendChild(itemBtn);
|
||||
});
|
||||
|
||||
// Add the context menu to the body
|
||||
document.body.appendChild(contextMenu);
|
||||
document.body.appendChild(closeSpan);
|
||||
|
||||
if (position == 'mouse') {
|
||||
var posX = event.clientX + 5;
|
||||
var posY = event.clientY + 5;
|
||||
} else if (position == 'button') {
|
||||
var posX = obj.offsetLeft + (obj.offsetWidth / 2) - (contextMenu.offsetWidth / 2);
|
||||
var posY = obj.offsetTop + obj.offsetHeight + 5;
|
||||
} else if (position == 'center') {
|
||||
var posX = (window.innerWidth / 2) - (contextMenu.offsetWidth / 2);
|
||||
var posY = (window.innerHeight / 2) - (contextMenu.offsetHeight / 2);
|
||||
} else {
|
||||
var posX = event.clientX + 5;
|
||||
var 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
|
||||
var contextMenu = document.querySelectorAll(".contextMenuClose");
|
||||
contextMenu.forEach(menu => {
|
||||
menu.remove();
|
||||
});
|
||||
|
||||
// Get the context menu
|
||||
var contextMenu = document.querySelectorAll(".contextMenu");
|
||||
|
||||
contextMenu.forEach(menu => {
|
||||
menu.classList.add("contextMenu__hide");
|
||||
// Animatin should be 500ms
|
||||
setTimeout(function() {
|
||||
menu.remove();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
// If the context menu is already open, close it first
|
||||
if (document.querySelector(".contextMenu")) {
|
||||
dissmissContextMenu();
|
||||
}
|
||||
});
|
||||
122
Context Menus/js/examples.js
Normal file
122
Context Menus/js/examples.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
function contextAtMouse(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
])
|
||||
}
|
||||
function contextAtButton(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
], 'button')
|
||||
}
|
||||
function contextAtCenter(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
], 'center')
|
||||
}
|
||||
|
||||
function contextImageAction(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'title',
|
||||
'text': 'Image actions',
|
||||
},
|
||||
{
|
||||
'value': 'Copy Link',
|
||||
'icon': link,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'Download',
|
||||
'icon': download,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
])
|
||||
};
|
||||
14
Context Menus/js/main.js
Normal file
14
Context Menus/js/main.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Icons
|
||||
var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
|
||||
var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
|
||||
var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
|
||||
var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('pre').forEach((block) => {
|
||||
var code = block.innerHTML;
|
||||
code = code.substring(0, code.lastIndexOf('\n'));
|
||||
block.innerHTML = code;
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue