rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Continued work on media scheduler

Browse source
This commit is contained in:
rainbow napkin 2025-01-28 09:43:39 -05:00
parent 9d01b4c962
commit d5a2a51be2
14 changed files with 415 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

72
www/js/utils.js
View file

@ -71,17 +71,21 @@ class canopyUXUtils{
}
}
displayTooltip(event, content, ajaxTooltip, cb, soft = false){
displayTooltip(event, content, ajaxTooltip, cb, soft = false, doc = document){
//Create the tooltip
const tooltip = new canopyUXUtils.tooltip(content, ajaxTooltip, ()=>{
//Call mouse move again after ajax load to re-calculate position within context of the new content
tooltip.moveToMouse(event);
//If this is an ajax tooltip
if(ajaxTooltip){
//Call mouse move again after ajax load to re-calculate position within context of the new content
tooltip.moveToMouse(event);
}
//If we have a callback function
if(typeof cb == "function"){
//Call async callback
cb();
}
});
}, doc);
//Move the tooltip with the mouse
event.target.addEventListener('mousemove', tooltip.moveToMouse.bind(tooltip));
@ -92,18 +96,29 @@ class canopyUXUtils{
//remove the tooltip on mouseleave
event.target.addEventListener('mouseleave', tooltip.remove.bind(tooltip));
//Kill tooltip with parent
doc.body.addEventListener('mousemove', killWithParent);
if(soft){
//remove the tooltip on context menu open
event.target.addEventListener('click', tooltip.remove.bind(tooltip));
event.target.addEventListener('contextmenu', tooltip.remove.bind(tooltip));
}
function killWithParent(){
//If the tooltip parent no longer exists
if(!event.target.isConnected){
//Kill the whole family :D
tooltip.remove();
}
}
}
displayContextMenu(event, title, menuMap){
displayContextMenu(event, title, menuMap, doc){
event.preventDefault();
//Create context menu
const contextMenu = new canopyUXUtils.contextMenu(title, menuMap);
const contextMenu = new canopyUXUtils.contextMenu(title, menuMap, doc);
//Move context menu to mouse
contextMenu.moveToMouse(event);
@ -167,12 +182,13 @@ class canopyUXUtils{
}
static tooltip = class{
constructor(content, ajaxTooltip = false, cb){
constructor(content, ajaxTooltip = false, cb, doc = document){
//Define non-tooltip node values
this.content = content;
this.ajaxPopup = ajaxTooltip;
this.cb = cb;
this.id = Math.random();
this.doc = doc;
//create and append tooltip
this.tooltip = document.createElement('div');
@ -190,7 +206,15 @@ class canopyUXUtils{
this.tooltip.textContent = "Loading tooltip..."
this.tooltip.innerHTML = await utils.ajax.getTooltip(this.content);
}else{
this.tooltip.innerHTML = this.content;
//If the content we received is a string
if(typeof this.content == "string"){
//Use it
this.tooltip.innerHTML = this.content;
//Otherwise
}else{
//Append it as a node
this.tooltip.appendChild(this.content);
}
}
if(this.cb){
@ -200,14 +224,14 @@ class canopyUXUtils{
}
displayTooltip(){
document.body.appendChild(this.tooltip);
this.doc.body.appendChild(this.tooltip);
}
moveToPos(x,y){
//If the distance between the left edge of the window - the window width is more than the width of our tooltip
if((window.innerWidth - (window.innerWidth - x)) > this.tooltip.getBoundingClientRect().width){
if((this.doc.defaultView.innerWidth - (this.doc.defaultView.innerWidth - x)) > this.tooltip.getBoundingClientRect().width){
//Push it to the right edge of the cursor, where the hard edge typically is
this.tooltip.style.right = `${window.innerWidth - x}px`;
this.tooltip.style.right = `${this.doc.defaultView.innerWidth - x}px`;
this.tooltip.style.left = '';
//otherwise, if we're close to the edge
}else{
@ -218,9 +242,9 @@ class canopyUXUtils{
//If the distance between the top edge of the window - the window height is more than the heigt of our tooltip
if((window.innerHeight - (window.innerHeight - y)) > this.tooltip.getBoundingClientRect().height){
if((this.doc.defaultView.innerHeight - (this.doc.defaultView.innerHeight - y)) > this.tooltip.getBoundingClientRect().height){
//Push it above the mouse
this.tooltip.style.bottom = `${window.innerHeight - y}px`;
this.tooltip.style.bottom = `${this.doc.defaultView.innerHeight - y}px`;
this.tooltip.style.top = '';
//otherwise if we're close to the edge
}else{
@ -243,9 +267,9 @@ class canopyUXUtils{
}
static contextMenu = class extends this.tooltip{
constructor(title, menuMap){
constructor(title, menuMap, doc = document){
//Call inherited tooltip constructor
super('Loading Menu...');
super('Loading Menu...', false, null, doc);
//Set tooltip class
this.tooltip.classList.add('context-menu');
@ -281,8 +305,8 @@ class canopyUXUtils{
//Create event listener to remove tooltip whenever anything is clicked, inside or out of the menu
//Little hacky but we have to do it a bit later to prevent the opening event from closing the menu
setTimeout(()=>{document.body.addEventListener('click', this.remove.bind(this));}, 1);
setTimeout(()=>{document.body.addEventListener('contextmenu', this.remove.bind(this));}, 1);
setTimeout(()=>{this.doc.body.addEventListener('click', this.remove.bind(this));}, 1);
setTimeout(()=>{this.doc.body.addEventListener('contextmenu', this.remove.bind(this));}, 1);
}
}
@ -390,7 +414,7 @@ class canopyUXUtils{
}
static clickDragger = class{
constructor(handle, element, leftHandle = true, parent){
constructor(handle, element, leftHandle = true, parent, flex = true){
//Pull needed nodes
this.handle = document.querySelector(handle);
this.element = document.querySelector(element);
@ -407,6 +431,9 @@ class canopyUXUtils{
//we put a click dragger in yo click dragger so you could click and drag while you click and drag
this.parent = parent;
//Whether or not click dragger is in a flexbox
this.flex = flex;
//Setup our event listeners
this.setupInput();
}
@ -453,7 +480,13 @@ class canopyUXUtils{
//if we're not breaking the page, or we're moving left
if((!this.breakingScreen && pageBreak <= 0) || event.clientX < this.handle.getBoundingClientRect().left){
//Apply difference to width
if(this.flex){
this.element.style.flexBasis = `${this.calcWidth(difference)}vw`;
}
//I know it's kludgy to apply this along-side flex basis but it fixes some nasty bugs with nested draggers
//Don't @ me, it's not like i'm an actual web developer anyways :P
this.element.style.width = `${this.calcWidth(difference)}vw`;
//If we let go here, the width isn't breaking anything so there's nothing to fix.
this.breakingScreen = false;
}else{
@ -477,6 +510,9 @@ class canopyUXUtils{
fixCutoff(standalone = true, pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width){
//Fix the page width
if(this.flex){
this.element.style.flexBasis = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
}
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
//If we're calling this outside of drag() (regardless of draglock unless set otherwise)