gsuiPanels: JS/CSS, cursor gridsound/daw#28 (comment)

gridsound · Dec 12, 2017 · 9904a07 · 9904a07
1 parent 99f96c7
commit 9904a07
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/gsuiPanels/gsuiPanels.css b/gsuiPanels/gsuiPanels.css
@@ -4,6 +4,15 @@
 	--gsuiPanels-extendColor: #888;
 }
 
+.gsuiPanels-cursor {
+	position: fixed;
+	z-index: 2147483647;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
 .gsuiPanels-x,
 .gsuiPanels-y {
 	display: flex;
@@ -45,10 +54,12 @@
 	background-color: var(--gsuiPanels-extendColor);
 }
 .gsuiPanels-x > div > .gsuiPanels-extend {
+	cursor: col-resize;
 	width: var( --gsuiPanels-extendSize );
 	margin-left: calc( var( --gsuiPanels-extendSize ) / -2 );
 }
 .gsuiPanels-y > div > .gsuiPanels-extend {
+	cursor: row-resize;
 	height: var( --gsuiPanels-extendSize );
 	margin-top: calc( var( --gsuiPanels-extendSize ) / -2 );
 }
diff --git a/gsuiPanels/gsuiPanels.js b/gsuiPanels/gsuiPanels.js
@@ -4,6 +4,8 @@ function gsuiPanels( root ) {
 	this.rootElement = root;
 	this.init( root );
 	gsuiPanels.bodyEventsInit && gsuiPanels.bodyEventsInit();
+	this._cursorElem = document.createElement( "div" );
+	this._cursorElem.classList = "gsuiPanels-cursor";
 }
 
 gsuiPanels.bodyEventsInit = function() {
@@ -88,6 +90,7 @@ gsuiPanels.prototype = {
 
 	// events:
 	_onmouseup() {
+		this._cursorElem.remove();
 		this._extend.classList.remove( "gsui-hover" );
 		this.rootElement.classList.remove( "gsuiPanels-noselect" );
 		this._panAfter[ this._panAfter.length - 1 ].style.flex = 1;
@@ -107,6 +110,8 @@ gsuiPanels.prototype = {
 	_onmousedownExtend( dir, ext, panBefore, panAfter, e ) {
 		gsuiPanels._focused = this;
 		ext.classList.add( "gsui-hover" );
+		this._cursorElem.style.cursor = dir === "width" ? "col-resize" : "row-resize";
+		document.body.append( this._cursorElem );
 		this.rootElement.classList.add( "gsuiPanels-noselect" );
 		this._dir = dir;
 		this._extend = ext;