Saving last seperator setting to keep the last view

shared/css/general.scss

@@ -289,16 +289,8 @@ $separator_thickness: 4px;
 	}
 
 	.container-channel-chat {
-		/*
-		> div {
-			min-height: 100px;
-			min-width: 100px;
-			max-width: 100%;
-		}
-		*/
-
 		min-width: 100px;
-		//max-width: 60%; /* tmp chat fix */
+		width: 60%;
 
 		display: flex;
 		flex-direction: column;
@@ -337,8 +329,7 @@ $separator_thickness: 4px;
 		background: white;
 
 		min-width: 100px;
-		//max-width: 40%;
+		width: 40%;
-		//width: 40%;
 
 		display: flex;
 		flex-direction: row;

shared/html/templates.html

@@ -106,7 +106,7 @@
                                 <div class="channelTree" id="channelTree"></div>
                             </div>
 
-                            <div class="container-seperator horizontal"></div>
+                            <div class="container-seperator horizontal" seperator-id="seperator-channel-chat"></div>
                             <!-- Chat window -->
                             <div class="main_container container-chat">
                                 <div id="chat">
@@ -122,7 +122,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="container-seperator vertical"></div>
+                        <div class="container-seperator vertical" seperator-id="seperator-main-info"></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>

shared/js/main.ts

@@ -99,6 +99,8 @@ async function initialize() {
             displayCriticalError(message);
     };
 
+    settings = new Settings();
+
     try {
         await i18n.initialize();
     } catch(error) {
@@ -118,6 +120,7 @@ async function initialize() {
 
     try { //Initialize main template
         const main = $("#tmpl_main").renderTag().dividerfy();
+
         $("body").append(main);
     } catch(error) {
         console.error(error);
@@ -144,7 +147,6 @@ async function initialize() {
 function main() {
     //http://localhost:63343/Web-Client/index.php?_ijt=omcpmt8b9hnjlfguh8ajgrgolr&default_connect_url=true&default_connect_type=teamspeak&default_connect_url=localhost%3A9987&disableUnloadDialog=1&loader_ignore_age=1
 
-    settings = new Settings();
     globalClient = new TSClient();
     /** Setup the XF forum identity **/
     profiles.identities.setup_forum();

shared/js/ui/context_divider.ts

@@ -5,16 +5,23 @@ interface JQuery<TElement = HTMLElement> {
 if(!$.fn.dividerfy) {
     $.fn.dividerfy = function<T extends HTMLElement>(this: JQuery<T>) : JQuery<T> {
         this.find(".container-seperator").each(function (this: T) {
+            if(!this.previousElementSibling) return;
+            if(!this.nextElementSibling) return;
+
             const element = $(this);
+            const parent_element = $(this.parentElement);
+            const previous_element = $(this.previousElementSibling);
+            const next_element = $(this.nextElementSibling);
+
+            const seperator_id = element.attr("seperator-id");
             const vertical = element.hasClass("vertical");
 
-            const listener_move = (event: MouseEvent) => {
+            const apply_view = (property: string, previous: number, next: number) => {
-                if(!this.previousElementSibling) return;
+                previous_element.css(property, "calc(" + previous + "% - " + (vertical ? element.width() : element.height()) + "px)");
-                if(!this.nextElementSibling) return;
+                next_element.css(property, "calc(" +next + "% - " + (vertical ? element.width() : element.height()) + "px)");
+            };
 
-                const parent_element = $(this.parentElement);
+            const listener_move = (event: MouseEvent) => {
-                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;
@@ -31,25 +38,34 @@ if(!$.fn.dividerfy) {
                     Math.max(previous_offset.top + previous_element.height(), next_offset.top + next_element.height());
                 */
 
-                let previous_width = 0;
+                let previous = 0;
-                let next_width = 0;
+                let next = 0;
                 if(current < min) {
-                    previous_width = 0;
+                    previous = 0;
-                    next_width = 1;
+                    next = 1;
                 } else if(current < max) {
                     const x_offset = current - min;
                     const x_offset_max = max - min;
 
-                    previous_width = x_offset / x_offset_max;
+                    previous = x_offset / x_offset_max;
-                    next_width = 1 - previous_width;
+                    next = 1 - previous;
                 } else {
-                    previous_width = 1;
+                    previous = 1;
-                    next_width = 0;
+                    next = 0;
                 }
 
 
-                previous_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(previous_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
+                const property = vertical ? "width" : "height";
-                next_element.css(vertical ? "width" : "height", "calc(" + Math.ceil(next_width * 100) + "% - " + (vertical ? element.width() : element.height()) + "px)");
+                const previous_p = Math.ceil(previous * 100);
+                const next_p = Math.ceil(next * 100);
+                apply_view(property, previous_p, next_p);
+
+                if(seperator_id)
+                    settings.changeGlobal("seperator-settings-" + seperator_id, JSON.stringify({
+                        previous: previous_p,
+                        next: next_p,
+                        property: property
+                    }));
             };
 
             const listener_up = (event: MouseEvent) => {
@@ -63,6 +79,19 @@ if(!$.fn.dividerfy) {
                 document.addEventListener('mouseup', listener_up);
                 $(document.documentElement).css("user-select", "none");
             });
+
+
+            if(seperator_id) {
+                try {
+                    const config = JSON.parse(settings.global("seperator-settings-" + seperator_id));
+                    if(config) {
+                        console.log("Apply previous changed: %o", config);
+                        apply_view(config.property, config.previous, config.next);
+                    }
+                } catch(e) {
+                    console.error(e);
+                }
+            }
         });
         return this;
     }