From 70b255b99ad50f1a42791b9a39f2fcfcd98f00d8 Mon Sep 17 00:00:00 2001 From: RblSb Date: Tue, 25 Feb 2020 07:17:26 +0300 Subject: NavBar buttons --- .vscode/settings.json | 1 + build/server.js | 6 +-- res/client.js | 117 +++++++++++++++++++++++++++++++++++++++++++++++--- res/index.html | 14 +++--- res/langs/en.json | 2 + res/langs/ru.json | 4 +- src/client/Buttons.hx | 88 ++++++++++++++++++++++++++++++++----- src/client/Main.hx | 12 +++++- src/client/Player.hx | 7 ++- src/client/Split.hx | 3 ++ 10 files changed, 225 insertions(+), 29 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 50b97fe..047e16b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,6 @@ "search.exclude": { "build": true, "res/temp": true, + "res/client.js": true } } diff --git a/build/server.js b/build/server.js index 72d8eab..5f13d07 100644 --- a/build/server.js +++ b/build/server.js @@ -897,14 +897,14 @@ server_Main.prototype = { var url = data.removeVideo.url; if(this.videoList[0].url == url) { this.videoTimer.stop(); + if(this.videoList.length > 0) { + this.restartWaitTimer(); + } } HxOverrides.remove(this.videoList,Lambda.find(this.videoList,function(item1) { return item1.url == url; })); this.broadcast(data); - if(this.videoList.length > 0) { - this.restartWaitTimer(); - } break; case "Rewind": if(this.videoList.length == 0) { diff --git a/res/client.js b/res/client.js index 9f46639..95f0fd5 100644 --- a/res/client.js +++ b/res/client.js @@ -294,6 +294,7 @@ var client_Buttons = function() { }; client_Buttons.__name__ = true; client_Buttons.init = function(main) { client_Buttons.initChatInput(main); + client_Buttons.initNavBar(main); var smilesBtn = window.document.querySelector("#smilesbtn"); smilesBtn.onclick = function(e) { smilesBtn.classList.toggle("active"); @@ -304,7 +305,6 @@ client_Buttons.init = function(main) { return smilesWrap.style.display = "none"; } }; - window.document.querySelector("#clearchatbtn").style.display = "inline-block"; window.document.querySelector("#clearchatbtn").onclick = function(e1) { if((main.personal.group & 4) != 0) { main.send({ type : "ClearChat"}); @@ -330,9 +330,6 @@ client_Buttons.init = function(main) { main.send({ type : "SetLeader", setLeader : { clientName : name}}); return; }; - client_Buttons.split = new Split(["#chatwrap","#videowrap"],{ sizes : [40,60], onDragEnd : function() { - return window.dispatchEvent(new Event("resize")); - }, minSize : 185, snapOffset : 0}); var userlistToggle = window.document.querySelector("#userlisttoggle"); userlistToggle.onclick = function(e3) { var style = window.document.querySelector("#userlist").style; @@ -398,6 +395,24 @@ client_Buttons.init = function(main) { return window.document.querySelector("#addfromurl").classList.toggle("collapse"); }; window.onresize = client_Buttons.onVideoResize; + client_Buttons.initSplit(); +}; +client_Buttons.initSplit = function(swapped) { + if(swapped == null) { + swapped = false; + } + if(client_Buttons.split != null) { + client_Buttons.split.destroy(); + } + var divs = ["#chatwrap","#videowrap"]; + var sizes = [40,60]; + if(swapped) { + divs.reverse(); + sizes.reverse(); + } + client_Buttons.split = new Split(divs,{ sizes : sizes, onDragEnd : function() { + return window.dispatchEvent(new Event("resize")); + }, minSize : 185, snapOffset : 0}); window.dispatchEvent(new Event("resize")); }; client_Buttons.onVideoResize = function() { @@ -405,6 +420,78 @@ client_Buttons.onVideoResize = function() { window.document.querySelector("#messagebuffer").style.height = "" + height + "px"; window.document.querySelector("#userlist").style.height = "" + height + "px"; }; +client_Buttons.initNavBar = function(main) { + var classes = window.document.querySelectorAll(".dropdown-toggle"); + var _g = 0; + while(_g < classes.length) { + var klass = [classes[_g]]; + ++_g; + klass[0].onclick = (function(klass1) { + return function(e) { + klass1[0].classList.toggle("focus"); + client_Buttons.hideMenus(); + var menu = klass1[0].parentElement.querySelector(".dropdown-menu"); + if(menu.style.display == "") { + return menu.style.display = "block"; + } else { + return menu.style.display = ""; + } + }; + })(klass); + klass[0].onmouseover = klass[0].onclick; + } + var classes1 = window.document.querySelectorAll(".dropdown"); + var _g1 = 0; + while(_g1 < classes1.length) { + var klass2 = [classes1[_g1]]; + ++_g1; + klass2[0].onmouseleave = (function(klass3) { + return function(e1) { + var toggle = klass3[0].querySelector(".dropdown-toggle"); + toggle.classList.remove("focus"); + toggle.blur(); + return klass3[0].querySelector(".dropdown-menu").style.display = ""; + }; + })(klass2); + } + var exitBtn = window.document.querySelector("#exitBtn"); + exitBtn.onclick = function(e2) { + main.send({ type : "Logout"}); + exitBtn.blur(); + client_Buttons.hideMenus(); + return; + }; + var swapLayoutBtn = window.document.querySelector("#swapLayoutBtn"); + swapLayoutBtn.onclick = function(e3) { + var p = window.document.querySelector("#main"); + p.insertBefore(p.children.item(2),p.children.item(0)); + p.insertBefore(p.children.item(2),p.children.item(1)); + var p1 = window.document.querySelector("#controlsrow"); + p1.insertBefore(p1.children.item(1),p1.children.item(0)); + var p2 = window.document.querySelector("#playlistrow"); + p2.insertBefore(p2.children.item(1),p2.children.item(0)); + client_Buttons.initSplit(window.document.querySelector("#main").firstElementChild == window.document.querySelector("#videowrap")); + swapLayoutBtn.blur(); + client_Buttons.hideMenus(); + return; + }; + var removeBtn = window.document.querySelector("#removeVideoBtn"); + removeBtn.onclick = function(e4) { + if(main.toggleVideoElement()) { + removeBtn.innerText = Lang.get("removeVideo"); + } else { + removeBtn.innerText = Lang.get("addVideo"); + } + removeBtn.blur(); + client_Buttons.hideMenus(); + return; + }; +}; +client_Buttons.hideMenus = function() { + var menus = window.document.querySelectorAll(".dropdown-menu"); + var _g = 0; + while(_g < menus.length) menus[_g++].style.display = ""; +}; client_Buttons.initChatInput = function(main) { var guestName = window.document.querySelector("#guestname"); guestName.onkeydown = function(e) { @@ -604,6 +691,14 @@ client_Main.prototype = { return; }); } + ,toggleVideoElement: function() { + if(this.player.hasVideo()) { + this.player.removeVideo(); + } else if(!this.player.isListEmpty()) { + this.player.setVideo(this.player.getItems()[0]); + } + return this.player.hasVideo(); + } ,refreshPlayer: function() { this.player.refresh(); } @@ -644,7 +739,7 @@ client_Main.prototype = { var data = JSON.parse(e.data); var t = data.type; var t1 = t.charAt(0).toLowerCase() + HxOverrides.substr(t,1,null); - haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 195, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]}); + haxe_Log.trace("Event: " + data.type,{ fileName : "src/client/Main.hx", lineNumber : 203, className : "client.Main", methodName : "onMessage", customParams : [data[t1]]}); switch(data.type) { case "AddVideo": if(this.player.isListEmpty()) { @@ -833,10 +928,14 @@ client_Main.prototype = { ,showGuestLoginPanel: function() { window.document.querySelector("#guestlogin").style.display = "block"; window.document.querySelector("#chatline").style.display = "none"; + window.dispatchEvent(new Event("resize")); } ,hideGuestLoginPanel: function() { window.document.querySelector("#guestlogin").style.display = "none"; window.document.querySelector("#chatline").style.display = "block"; + if((this.personal.group & 4) != 0) { + window.document.querySelector("#clearchatbtn").style.display = "inline-block"; + } window.dispatchEvent(new Event("resize")); } ,updateClients: function(newClients) { @@ -1086,12 +1185,15 @@ client_Player.prototype = { HxOverrides.remove(this.items,Lambda.find(this.items,function(item) { return item.url == url; })); + this.updateCounters(); + if(this.video == null) { + return; + } if(this.video.src == url) { if(this.items.length > 0) { this.setVideo(this.items[0]); } } - this.updateCounters(); } ,updateCounters: function() { var tmp = "" + this.items.length + " "; @@ -1157,6 +1259,9 @@ client_Player.prototype = { ,isListEmpty: function() { return this.items.length == 0; } + ,hasVideo: function() { + return this.video != null; + } ,pause: function() { if(this.video == null) { return; diff --git a/res/index.html b/res/index.html index 697123e..73067d8 100644 --- a/res/index.html +++ b/res/index.html @@ -30,18 +30,18 @@ diff --git a/res/langs/en.json b/res/langs/en.json index ea1ca74..bdc4cc1 100644 --- a/res/langs/en.json +++ b/res/langs/en.json @@ -21,8 +21,10 @@ "settings": "Settings", "channel": "Channel", "layout": "Layout", + "swapLayout": "Swap Layout", "chatOnly": "Chat Only", "removeVideo": "Remove Video", + "addVideo": "Add Video", "toggleUserList": "Show/Hide Userlist", "mobileViewBtn": "Mobile View", "leader": "Leader", diff --git a/res/langs/ru.json b/res/langs/ru.json index eb2c1b3..74b05f2 100644 --- a/res/langs/ru.json +++ b/res/langs/ru.json @@ -21,8 +21,10 @@ "settings": "Настройки", "channel": "Канал", "layout": "Разметка", + "swapLayout": "Сменить разметку", "chatOnly": "Только чат", - "removeVideo": "Убрать видео", + "removeVideo": "Удалить видео", + "addVideo": "Добавить видео", "toggleUserList": "Показать/Скрыть список юзеров", "mobileViewBtn": "Моб. вид", "leader": "Лидер", 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 = 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 = 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 = 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):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, opts:Dynamic):Void; + function getSizes():Array; function setSizes(sizes:Array):Void; + function collapse(index:Int):Void; + function destroy(?preserveStyles:Bool = false, ?preserveGutters:Bool = false):Void; } -- cgit v1.2.3