NavBar buttons

4 files changed, 98 insertions, 12 deletions

diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index f72fbb3..69928a5 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -6,6 +6,7 @@ import js.html.InputElement;
 import js.html.Element;
 import client.Main.ge;
 import js.Browser.window;
+import js.Browser.document;
 import js.html.Event;
 
 class Buttons {
@@ -16,6 +17,7 @@ class Buttons {
 
 	public static function init(main:Main):Void {
 		initChatInput(main);
+		initNavBar(main);
 
 		final smilesBtn = ge("#smilesbtn");
 		smilesBtn.onclick = e -> {
@@ -26,7 +28,6 @@ class Buttons {
 			else smilesWrap.style.display = "none";
 		}
 
-		ge("#clearchatbtn").style.display = "inline-block";
 		ge("#clearchatbtn").onclick = e -> {
 			if (main.isAdmin()) main.send({type: ClearChat});
 		}
@@ -49,15 +50,6 @@ class Buttons {
 			});
 		}
 
-		split = new Split(["#chatwrap", "#videowrap"], {
-			sizes: [40, 60],
-			onDragEnd: () -> {
-				window.dispatchEvent(new Event("resize"));
-			},
-			minSize: 185,
-			snapOffset: 0
-		});
-
 		final userlistToggle = ge("#userlisttoggle");
 		userlistToggle.onclick = e -> {
 			final style = ge("#userlist").style;
@@ -126,6 +118,25 @@ class Buttons {
 		}
 
 		window.onresize = onVideoResize;
+		initSplit();
+	}
+
+	static function initSplit(swapped = false):Void {
+		if (split != null) split.destroy();
+		final divs = ["#chatwrap", "#videowrap"];
+		final sizes = [40, 60];
+		if (swapped) {
+			divs.reverse();
+			sizes.reverse();
+		}
+		split = new Split(divs, {
+			sizes: sizes,
+			onDragEnd: () -> {
+				window.dispatchEvent(new Event("resize"));
+			},
+			minSize: 185,
+			snapOffset: 0
+		});
 		window.dispatchEvent(new Event("resize"));
 	}
 
@@ -136,6 +147,63 @@ class Buttons {
 		ge("#userlist").style.height = '${height}px';
 	}
 
+	static function initNavBar(main:Main):Void {
+		final classes:Array<Element> = cast document.querySelectorAll(".dropdown-toggle");
+		for (klass in classes) {
+			klass.onclick = e -> {
+				klass.classList.toggle("focus");
+				hideMenus();
+				final menu = klass.parentElement.querySelector(".dropdown-menu");
+				if (menu.style.display == "") menu.style.display = "block";
+				else menu.style.display = "";
+			}
+			klass.onmouseover = klass.onclick;
+		}
+		final classes:Array<Element> = cast document.querySelectorAll(".dropdown");
+		for (klass in classes) {
+			klass.onmouseleave = e -> {
+				final toggle:Element = cast klass.querySelector(".dropdown-toggle");
+				toggle.classList.remove("focus");
+				toggle.blur();
+				final menu = klass.querySelector(".dropdown-menu");
+				menu.style.display = "";
+			}
+		}
+
+		final exitBtn = ge("#exitBtn");
+		exitBtn.onclick = e -> {
+			main.send({type: Logout});
+			exitBtn.blur();
+			hideMenus();
+		}
+		final swapLayoutBtn = ge("#swapLayoutBtn");
+		swapLayoutBtn.onclick = e -> {
+			final p = ge("#main");
+			p.insertBefore(p.children.item(2), p.children.item(0));
+			p.insertBefore(p.children.item(2), p.children.item(1));
+			final p = ge("#controlsrow");
+			p.insertBefore(p.children.item(1), p.children.item(0));
+			final p = ge("#playlistrow");
+			p.insertBefore(p.children.item(1), p.children.item(0));
+			final swapped = ge("#main").firstElementChild == ge("#videowrap");
+			initSplit(swapped);
+			swapLayoutBtn.blur();
+			hideMenus();
+		}
+		final removeBtn = ge("#removeVideoBtn");
+		removeBtn.onclick = e -> {
+			final has = main.toggleVideoElement();
+			if (has) removeBtn.innerText = Lang.get("removeVideo");
+			else removeBtn.innerText = Lang.get("addVideo");
+			removeBtn.blur();
+			hideMenus();
+		}
+	}
+
+	static function hideMenus():Void {
+		final menus:Array<Element> = cast document.querySelectorAll(".dropdown-menu");
+		for (menu in menus) menu.style.display = "";
+	}
 
 	static function initChatInput(main:Main):Void {
 		final guestName:InputElement = cast ge("#guestname");
diff --git a/src/client/Main.hx b/src/client/Main.hx
index a95a9a2..70cc270 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -156,6 +156,14 @@ class Main {
 		});
 	}
 
+	public function toggleVideoElement():Bool {
+		if (player.hasVideo()) player.removeVideo();
+		else if (!player.isListEmpty()) {
+			player.setVideo(player.getItems()[0]);
+		}
+		return player.hasVideo();
+	}
+
 	public function refreshPlayer():Void {
 		player.refresh();
 	}
@@ -358,12 +366,14 @@ class Main {
 	function showGuestLoginPanel():Void {
 		ge("#guestlogin").style.display = "block";
 		ge("#chatline").style.display = "none";
+		Browser.window.dispatchEvent(new Event("resize"));
 	}
 
 	function hideGuestLoginPanel():Void {
 		ge("#guestlogin").style.display = "none";
 		ge("#chatline").style.display = "block";
-		js.Browser.window.dispatchEvent(new Event("resize"));
+		if (isAdmin()) ge("#clearchatbtn").style.display = "inline-block";
+		Browser.window.dispatchEvent(new Event("resize"));
 	}
 
 	function updateClients(newClients:Array<ClientData>):Void {
diff --git a/src/client/Player.hx b/src/client/Player.hx
index ca3d78f..c9b10a4 100644
--- a/src/client/Player.hx
+++ b/src/client/Player.hx
@@ -123,11 +123,12 @@ class Player {
 		items.remove(
 			items.find(item -> item.url == url)
 		);
+		updateCounters();
 
+		if (video == null) return;
 		if (video.src == url) {
 			if (items.length > 0) setVideo(items[0]);
 		}
-		updateCounters();
 	}
 
 	function updateCounters():Void {
@@ -190,6 +191,10 @@ class Player {
 		return items.length == 0;
 	}
 
+	public function hasVideo():Bool {
+		return video != null;
+	}
+
 	public function pause():Void {
 		if (video == null) return;
 		video.pause();
diff --git a/src/client/Split.hx b/src/client/Split.hx
index 5d9d249..338b96f 100644
--- a/src/client/Split.hx
+++ b/src/client/Split.hx
@@ -3,5 +3,8 @@ package client;
 @:native("Split")
 extern class Split {
 	function new(divs:Array<String>, opts:Dynamic):Void;
+	function getSizes():Array<Int>;
 	function setSizes(sizes:Array<Int>):Void;
+	function collapse(index:Int):Void;
+	function destroy(?preserveStyles:Bool = false, ?preserveGutters:Bool = false):Void;
 }