From 9236714bec54a4762e8c6e470aad79a4f8e8b751 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@mcgalaxy.de>
Date: Sat, 19 Jan 2019 13:03:51 +0100
Subject: [PATCH] Made the sections scrollable

---
 shared/css/general.scss                   | 88 +++++++++++++++++------
 shared/html/templates.html                | 17 +++--
 shared/js/load.ts                         |  3 +-
 shared/js/main.ts                         |  2 +-
 shared/js/settings.ts                     | 12 ++--
 shared/js/ui/context_divider.ts           | 69 ++++++++++++++++++
 shared/js/ui/modal/ModalPermissionEdit.ts | 10 +++
 shared/js/utils/tab.ts                    | 23 +++---
 8 files changed, 181 insertions(+), 43 deletions(-)
 create mode 100644 shared/js/ui/context_divider.ts

diff --git a/shared/css/general.scss b/shared/css/general.scss
index e33faeb0..da04d9c8 100644
--- a/shared/css/general.scss
+++ b/shared/css/general.scss
@@ -150,13 +150,6 @@
     width: 100%;
 }
 
-.main_container {
-    padding: 4px;
-    border: lightgray solid;
-    border-width: 2px;
-    background-color: white;
-}
-
 html {
     background-color: gray;
 }
@@ -268,24 +261,56 @@ footer .container {
     justify-content: center;
 }
 
+$separator_thickness: 4px;
 .app {
+	.container-app-main {
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+
+		height: 100%;
+		width: 100%;
+
+
+		border: $separator_thickness solid lightgray;
+		border-top-width: 0;
+	}
+
+	.container-control-bar {
+		height: 45px;
+		width: 100%;
+		border-radius: 2px 0 0 0;
+		border-bottom-width: 0;
+		background-color: lightgrey;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
 	.container-channel-chat {
+		/*
 		> div {
 			min-height: 100px;
 			min-width: 100px;
 			max-width: 100%;
 		}
+		*/
 
 		min-width: 100px;
-		max-width: 60%; /* tmp chat fix */
+		//max-width: 60%; /* tmp chat fix */
+
 		display: flex;
 		flex-direction: column;
-		flex-grow: 1;
+		justify-content: stretch;
 
 		.container-channel {
-			flex-grow: 60;
+			background: white;
+
 			display: flex;
 			justify-content: stretch;
+			height: calc(100% - 250px);
+			min-height: 100px;
 
 			/*
 			overflow: auto;
@@ -293,30 +318,51 @@ footer .container {
 			*/
 			overflow: hidden;
 			overflow-y: auto;
-
-			background: white;
-			border: 2px solid lightgray;
-			border-right-width: 0;
 		}
 
 		.container-chat {
+			background: white;
+
 			display: flex;
 			flex-direction: column;
 			justify-content: stretch;
 
-			max-height: 400px;
+			//max-height: 400px;
 			height: 250px;
-			border-radius: 0 0 0 2px;
-			border-top-width: 0;
-			border-right-width: 0;
+			min-height: 100px;
 		}
 	}
 
 	.container-info {
+		background: white;
+
 		min-width: 100px;
-		max-width: 40%;
-		width: 40%;
-		border-radius: 0 0 2px 0;
+		//max-width: 40%;
+		//width: 40%;
+
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+	}
+}
+
+.container-seperator {
+	background: lightgray;
+	flex-grow: 0;
+	flex-shrink: 0;
+
+	&.horizontal {
+		height: $separator_thickness;
+		width: 100%;
+
+		cursor: row-resize;
+	}
+
+	&.vertical {
+		width: $separator_thickness;
+		height: 100%;
+
+		cursor: col-resize;
 	}
 }
 
diff --git a/shared/html/templates.html b/shared/html/templates.html
index a52b88fe..f1085ec6 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -9,9 +9,8 @@
         <script class="jsrender-template" id="tmpl_main" type="text/html">
             <div class="app-container">
                 <div class="app">
-                    <!-- Container -->
-                    <div style="height: 45px; width: 100%; border-radius: 2px 0px 0px 0px; border-bottom-width: 0px; background-color: lightgrey"
-                         class="main_container">
+                    <!-- navigation bar -->
+                    <div class="container-control-bar">
                         <div id="control_bar" class="control_bar">
                             <div class="button btn_connect" title="{{tr 'Connect to a server' /}}">
                                 <div class="icon_x32 client-connect"></div>
@@ -100,12 +99,15 @@
                         </div>
                     </div>
 
-                    <div style="flex-direction: row; height: 100%; width: 100%; display: flex; justify-content: stretch;">
+                    <div class="container-app-main">
                         <div class="container-channel-chat">
-                            <div class="container-channel" class="main_container">
+                            <!-- Channel tree -->
+                            <div class="container-channel main_container">
                                 <div class="channelTree" id="channelTree"></div>
                             </div>
-                            <!-- Channel tree -->
+
+                            <div class="container-seperator horizontal"></div>
+                            <!-- Chat window -->
                             <div class="main_container container-chat">
                                 <div id="chat">
                                     <div class="messages">
@@ -118,8 +120,9 @@
                                         <button>Send</button>
                                     </div>
                                 </div>
-                            </div> <!-- Chat window -->
+                            </div>
                         </div>
+                        <div class="container-seperator vertical"></div>
                         <div class="main_container container-info">
                             <div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
                                 <div class="container-banner"></div>
diff --git a/shared/js/load.ts b/shared/js/load.ts
index 7aebe62f..913a7f70 100644
--- a/shared/js/load.ts
+++ b/shared/js/load.ts
@@ -150,7 +150,7 @@ namespace loader {
 
                 let error = false;
                 const error_handler = (event: ErrorEvent) => {
-                    if(event.filename == tag.src) { //Our tag throw an uncaught error
+                    if(event.filename == tag.src && event.message.indexOf("Illegal constructor") == -1) { //Our tag throw an uncaught error
                         //console.log("msg: %o, url: %o, line: %o, col: %o, error: %o", event.message, event.filename, event.lineno, event.colno, event.error);
                         window.removeEventListener('error', error_handler as any);
 
@@ -340,6 +340,7 @@ const loader_javascript = {
             "js/ui/server.js",
             "js/ui/view.js",
             "js/ui/client_move.js",
+            "js/ui/context_divider.js",
 
             "js/ui/frames/SelectedItemInfo.js",
             "js/ui/frames/ControlBar.js",
diff --git a/shared/js/main.ts b/shared/js/main.ts
index 28465242..26abcf46 100644
--- a/shared/js/main.ts
+++ b/shared/js/main.ts
@@ -117,7 +117,7 @@ async function initialize() {
     }
 
     try { //Initialize main template
-        const main = $("#tmpl_main").renderTag();
+        const main = $("#tmpl_main").renderTag().dividerfy();
         $("body").append(main);
     } catch(error) {
         console.error(error);
diff --git a/shared/js/settings.ts b/shared/js/settings.ts
index 7047f954..6d224c36 100644
--- a/shared/js/settings.ts
+++ b/shared/js/settings.ts
@@ -1,11 +1,15 @@
 /// <reference path="client.ts" />
 
 if(typeof(customElements) !== "undefined") {
-    class X_Properties extends HTMLElement {}
-    class X_Property extends HTMLElement {}
+    try {
+        class X_Properties extends HTMLElement {}
+        class X_Property extends HTMLElement {}
 
-    customElements.define('x-properties', X_Properties, { extends: 'div' });
-    customElements.define('x-property', X_Property, { extends: 'div' });
+        customElements.define('x-properties', X_Properties, { extends: 'div' });
+        customElements.define('x-property', X_Property, { extends: 'div' });
+    } catch(error) {
+        console.warn("failed to define costum elements");
+    }
 }
 
 class StaticSettings {
diff --git a/shared/js/ui/context_divider.ts b/shared/js/ui/context_divider.ts
new file mode 100644
index 00000000..31b680d8
--- /dev/null
+++ b/shared/js/ui/context_divider.ts
@@ -0,0 +1,69 @@
+interface JQuery<TElement = HTMLElement> {
+    dividerfy() : this;
+}
+
+if(!$.fn.dividerfy) {
+    $.fn.dividerfy = function<T extends HTMLElement>(this: JQuery<T>) : JQuery<T> {
+        this.find(".container-seperator").each(function (this: T) {
+            const element = $(this);
+            const vertical = element.hasClass("vertical");
+
+            const listener_move = (event: MouseEvent) => {
+                if(!this.previousElementSibling) return;
+                if(!this.nextElementSibling) return;
+
+                const parent_element = $(this.parentElement);
+                const previous_element = $(this.previousElementSibling);
+                const next_element = $(this.nextElementSibling);
+
+                const parent_offset = parent_element.offset();
+                const min = vertical ? parent_offset.left : parent_offset.top;
+                const max = vertical ? parent_offset.left + parent_element.width() : parent_offset.top + parent_element.height();
+                const current = vertical ? event.pageX : event.pageY;
+
+                /*
+                const previous_offset = previous_element.offset();
+                const next_offset = next_element.offset();
+
+                const min = vertical ? Math.min(previous_offset.left, next_offset.left) : Math.min(previous_offset.top, next_offset.top);
+                const max = vertical ?
+                    Math.max(previous_offset.left + previous_element.width(), next_offset.left + next_element.width()) :
+                    Math.max(previous_offset.top + previous_element.height(), next_offset.top + next_element.height());
+                */
+
+                let previous_width = 0;
+                let next_width = 0;
+                if(current < min) {
+                    previous_width = 0;
+                    next_width = 1;
+                } else if(current < max) {
+                    const x_offset = current - min;
+                    const x_offset_max = max - min;
+
+                    previous_width = x_offset / x_offset_max;
+                    next_width = 1 - previous_width;
+                } else {
+                    previous_width = 1;
+                    next_width = 0;
+                }
+
+
+                previous_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(previous_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
+                next_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(next_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
+            };
+
+            const listener_up = (event: MouseEvent) => {
+                document.removeEventListener('mousemove', listener_move);
+                document.removeEventListener('mouseup', listener_up);
+                $(document.documentElement).css("user-select", "");
+            };
+
+            element.on('mousedown', () => {
+                document.addEventListener('mousemove', listener_move);
+                document.addEventListener('mouseup', listener_up);
+                $(document.documentElement).css("user-select", "none");
+            });
+        });
+        return this;
+    }
+}
\ No newline at end of file
diff --git a/shared/js/ui/modal/ModalPermissionEdit.ts b/shared/js/ui/modal/ModalPermissionEdit.ts
index b082d422..8a22c153 100644
--- a/shared/js/ui/modal/ModalPermissionEdit.ts
+++ b/shared/js/ui/modal/ModalPermissionEdit.ts
@@ -2,6 +2,16 @@
 /// <reference path="../../proto.ts" />
 /// <reference path="../../client.ts" />
 
+/*
+    TODO: Check needed permissions and may not even try to request, because we dont have the permission. Permissions:
+        b_virtualserver_servergroup_permission_list
+        b_virtualserver_channel_permission_list
+        b_virtualserver_client_permission_list
+        b_virtualserver_channelgroup_permission_list
+        b_virtualserver_channelclient_permission_list
+        b_virtualserver_playlist_permission_list
+ */
+
 namespace Modals {
     async function build_permission_editor() : Promise<JQuery[]> {
         let root_entry: any = {};
diff --git a/shared/js/utils/tab.ts b/shared/js/utils/tab.ts
index 92307a0c..2db3e33f 100644
--- a/shared/js/utils/tab.ts
+++ b/shared/js/utils/tab.ts
@@ -7,16 +7,21 @@ interface JQuery<TElement = HTMLElement> {
     changeElementType(type: string) : JQuery<TElement>;
 }
 
-if(typeof (customElements) !== "undefined") {
-    class X_Tab extends HTMLElement {}
-    class X_Entry extends HTMLElement {}
-    class X_Tag extends HTMLElement {}
-    class X_Content extends HTMLElement {}
 
-    customElements.define('x-tab', X_Tab, { extends: 'div' });
-    customElements.define('x-entry', X_Entry, { extends: 'div' });
-    customElements.define('x-tag', X_Tag, { extends: 'div' });
-    customElements.define('x-content', X_Content, { extends: 'div' });
+if(typeof (customElements) !== "undefined") {
+    try {
+        class X_Tab extends HTMLElement {}
+        class X_Entry extends HTMLElement {}
+        class X_Tag extends HTMLElement {}
+        class X_Content extends HTMLElement {}
+
+        customElements.define('x-tab', X_Tab, { extends: 'div' });
+        customElements.define('x-entry', X_Entry, { extends: 'div' });
+        customElements.define('x-tag', X_Tag, { extends: 'div' });
+        customElements.define('x-content', X_Content, { extends: 'div' });
+    } catch(error) {
+        console.warn("failed to define costum elements");
+    }
 } else {
     console.warn(tr("Could not defied tab customElements!"));
 }