Added clickDragger to active and pinned cPanels.
This commit is contained in:
rainbownapkin
parent
3c185b4e28
commit
b994f58bd0
|
|
@ -41,7 +41,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
|||
<video src="/video/static.webm" class="media-panel" id="media-panel-video" muted loop autoplay></video>
|
||||
</div>
|
||||
<div class="chat-panel" id="chat-panel-div">
|
||||
<div class="drag-handle" id="chat-panel-drag-handle">
|
||||
<div class="drag-handle left-drag-handle" id="chat-panel-drag-handle">
|
||||
</div>
|
||||
<div class="chat-panel panel-head-div" id="chat-panel-head-div">
|
||||
<i class="chat-panel panel-head-element bi-film" id="chat-panel-show-video-icon"></i>
|
||||
|
|
@ -75,6 +75,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
|||
<span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
|
||||
<i class="active-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-active-popout-icon"></i>
|
||||
<i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
|
||||
<div class="drag-handle right-drag-handle" id="cpanel-active-drag-handle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
|
||||
</div>
|
||||
|
|
@ -89,6 +91,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
|||
</div>
|
||||
<div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
|
||||
</div>
|
||||
<div class="drag-handle right-drag-handle" id="cpanel-pinned-drag-handle">
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-panel" id="chat-area">
|
||||
<div class="chat-panel" id="chat-panel-buffer-div">
|
||||
|
|
@ -102,7 +106,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.-->
|
|||
</div>
|
||||
</div>
|
||||
<div class="chat-panel" id="chat-panel-users-div">
|
||||
<div class="drag-handle" id="chat-panel-users-drag-handle">
|
||||
<div class="drag-handle left-drag-handle" id="chat-panel-users-drag-handle">
|
||||
</div>
|
||||
<div class="chat-panel" id="chat-panel-users-list-div">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -87,11 +87,19 @@ div#chat-panel-main-div{
|
|||
cursor: ew-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0.4em;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.left-drag-handle{
|
||||
left: 0;
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
.right-drag-handle{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#chat-panel-multipanel-div{
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -216,13 +224,18 @@ input#chat-panel-prompt{
|
|||
|
||||
#cpanel-active-div{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#cpanel-pinned-div{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cpanel-div{
|
||||
display: none;
|
||||
min-width: 4em;
|
||||
width: 30%;
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
|||
:root{
|
||||
--main-font: "open-sans", sans-serif;
|
||||
--bg0: rgb(158, 158, 158);
|
||||
--bg0-alpha0: rgba(158, 158, 158, 0.75);
|
||||
--bg1: rgb(70, 70, 70);
|
||||
--bg2: rgb(220, 220, 220);
|
||||
--bg1-alt0: rgb(30, 30, 30);
|
||||
|
|
@ -41,6 +42,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
|||
--userlist-color6:rgb(111, 61, 204);
|
||||
|
||||
--media-header-gradient: linear-gradient(180deg, var(--bg1-alt0) 0%, #FFFFFF00 76%);
|
||||
|
||||
/*--active-panel-effect: blur(1em);*/
|
||||
--active-panel-effect: none;
|
||||
}
|
||||
|
||||
body{
|
||||
|
|
@ -244,6 +248,11 @@ select.panel-head-element{
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
#cpanel-active-div{
|
||||
background-color: var(--bg0-alpha0);
|
||||
backdrop-filter: var(--active-panel-effect);
|
||||
}
|
||||
|
||||
.cpanel-div{
|
||||
background-color: var(--bg0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue