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

Added clickDragger to active and pinned cPanels.

Browse source
This commit is contained in:
rainbownapkin 2024-11-16 15:36:09 -05:00
parent 3c185b4e28
commit b994f58bd0
6 changed files with 48 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
www/js/channel/chat.js
View file

@ -23,7 +23,7 @@ class chatBox{
this.aspectLock = true;
//clickDragger object
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", "#chat-panel-user-count");
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
//Element Nodes
this.chatPanel = document.querySelector("#chat-panel-div");

8
www/js/channel/cpanel.js
View file

@ -24,6 +24,10 @@ class cPanel{
this.pinnedPanel = null;
this.poppedPanels = [];
//ClickDragger Objects
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false);
this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false);
//Element Nodes
//Active Panel
this.activePanelDiv = document.querySelector("#cpanel-active-div");
@ -36,7 +40,7 @@ class cPanel{
this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div");
this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title");
this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc");
this.activePanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
this.pinnedPanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
this.pinnedPanelPopoutIcon = document.querySelector("#cpanel-pinned-popout-icon");
this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon");
@ -48,7 +52,7 @@ class cPanel{
this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this));
this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
this.activePanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
}

14
www/js/utils.js
View file

@ -27,7 +27,7 @@ class canopyUXUtils{
static clickDragger = class{
constructor(handle, element, breakPoint){
constructor(handle, element, leftHandle = true){
//Pull needed nodes
this.handle = document.querySelector(handle);
this.element = document.querySelector(element);
@ -35,6 +35,9 @@ class canopyUXUtils{
//True while dragging
this.dragLock = false;
//Come to the ~~dark~~ left side
this.leftHandle = leftHandle
//Little hacky but it could be worse :P
this.fixWidth = false;
@ -69,8 +72,13 @@ class canopyUXUtils{
drag(event){
if(this.dragLock){
//get difference between mouse and right edge of element
var difference = this.element.getBoundingClientRect().right - event.clientX;
if(this.leftHandle){
//get difference between mouse and right edge of element
var difference = this.element.getBoundingClientRect().right - event.clientX;
}else{
//get difference between mouse and left edge of element
var difference = event.clientX - this.element.getBoundingClientRect().left;
}
//check if we have a scrollbar because we're breaking shit
var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;