Only one JS bundle. Fix toolbar handling on sidebar resize

js/rollup.conf.js

@@ -3,34 +3,23 @@ import terser from '@rollup/plugin-terser';
 
 const out_dir = 'src/cone/app/browser/static/cone';
 
-const default_outro = `
-window.cone = window.cone || {};
-Object.assign(window.cone, exports);
-`
-
-const protected_outro = default_outro + `
+const outro = `
 window.createCookie = createCookie;
 window.readCookie = readCookie;
 `;
 
-const protected_globals = {
+const globals = {
     jquery: 'jQuery',
     treibstoff: 'treibstoff'
 };
 
-const public_globals = {
-    jquery: 'jQuery',
-    treibstoff: 'treibstoff',
-    Bloodhound: 'Bloodhound'
-};
-
-const create_bundle = function(name, globals, outro, debug) {
+export default args => {
     let conf = {
-        input: `js/src/bundles/${name}.js`,
+        input: `js/src/bundle.js`,
         plugins: [cleanup()],
         output: [{
-            file: `${out_dir}/cone.app.${name}.js`,
-            name: `cone_app_${name}`,
+            file: `${out_dir}/cone.app.js`,
+            name: 'cone',
             format: 'iife',
             outro: outro,
             globals: globals,
@@ -41,10 +30,10 @@ const create_bundle = function(name, globals, outro, debug) {
             'treibstoff'
         ]
     };
-    if (debug !== true) {
+    if (args.configDebug !== true) {
         conf.output.push({
-            file: `${out_dir}/cone.app.${name}.min.js`,
-            name: `cone_app_${name}`,
+            file: `${out_dir}/cone.app.min.js`,
+            name: 'cone',
             format: 'iife',
             plugins: [terser()],
             outro: outro,
@@ -53,12 +42,4 @@ const create_bundle = function(name, globals, outro, debug) {
         });
     }
     return conf;
-}
-
-export default args => {
-    let debug = args.configDebug;
-    return [
-        create_bundle('public', public_globals, default_outro, debug),
-        create_bundle('protected', protected_globals, protected_outro, debug)
-    ];
 };

js/src/bundle.js

@@ -0,0 +1,55 @@
+import $ from 'jquery';
+import ts from 'treibstoff';
+
+import {
+    BatchedItemsSize,
+    BatchedItemsSearch
+} from './batcheditems.js';
+import {Colormode} from './colormode.js';
+import {CopySupport} from './copysupport.js';
+import {KeyBinder} from './keybinder.js';
+import {LiveSearch} from './livesearch.js';
+import {PersonalTools} from './personaltools.js';
+import {
+    ReferenceBrowserLoader,
+    ReferenceHandle
+} from './referencebrowser.js';
+import {Scrollbar} from './scrollbar.js';
+import {Sharing} from './sharing.js';
+import {Sidebar} from './sidebar.js';
+import {TableToolbar} from './tabletoolbar.js';
+import {Translation} from './translation.js';
+
+export * from './batcheditems.js';
+export * from './colormode.js';
+export * from './copysupport.js';
+export * from './globals.js';
+export * from './keybinder.js';
+export * from './livesearch.js';
+export * from './personaltools.js';
+export * from './referencebrowser.js';
+export * from './scrollbar.js';
+export * from './selectable.js';
+export * from './sharing.js';
+export * from './sidebar.js';
+export * from './tabletoolbar.js';
+export * from './translation.js';
+export * from './utils.js';
+
+$(function() {
+    new KeyBinder();
+
+    ts.ajax.register(BatchedItemsSize.initialize, true);
+    ts.ajax.register(BatchedItemsSearch.initialize, true);
+    ts.ajax.register(CopySupport.initialize, true);
+    ts.ajax.register(ReferenceBrowserLoader.initialize, true);
+    ts.ajax.register(ReferenceHandle.initialize, true);
+    ts.ajax.register(Sharing.initialize, true);
+    ts.ajax.register(TableToolbar.initialize, true);
+    ts.ajax.register(Translation.initialize, true);
+    ts.ajax.register(Colormode.initialize, true);
+    ts.ajax.register(Scrollbar.initialize, true);
+    ts.ajax.register(Sidebar.initialize, true);
+    ts.ajax.register(PersonalTools.initialize, true);
+    ts.ajax.register(LiveSearch.initialize, true);
+});

js/src/globals.js

@@ -0,0 +1,14 @@
+import ts from 'treibstoff';
+
+export class GlobalEvents extends ts.Events {
+
+    /**
+     * Gets triggered when sidebar is resized.
+     *
+     * @param {Sidebar} inst
+     */
+    on_sidebar_resize(inst) {
+    }
+}
+
+export const global_events = new GlobalEvents();

js/src/personaltools.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import ts from 'treibstoff';
+import {global_events} from './globals.js';
 
 export class PersonalTools extends ts.Events {
 
@@ -14,32 +15,45 @@ export class PersonalTools extends ts.Events {
     constructor(elem) {
         super();
         this.elem = elem;
-        this.personal_tools = $('#personaltools', this.elem);
-        this.navbar_content = $('#navbar-content', this.elem);
-        this.header_content = $('#header-content', this.elem);
-        this.scrollable = $('.scrollable-x', this.elem);
+        this.personal_tools = ts.query_elem('#personaltools', elem);
+        this.navbar_content = ts.query_elem('#navbar-content', elem);
+        this.header_content = ts.query_elem('#header-content', elem);
+        this.scrollbar = ts.query_elem('.scrollable-x', elem).data('scrollbar');
 
-        this.place_elements = this.place_elements.bind(this);
-        $(window).on('resize', this.place_elements);
-        this.place_elements();
+        this.render = this.render.bind(this);
+        $(window).on('resize', this.render);
 
-        ts.ajax.attach(this, this.elem);
+        this.on_sidebar_resize = this.on_sidebar_resize.bind(this);
+        global_events.on('on_sidebar_resize', this.on_sidebar_resize);
+
+        this.render();
+        ts.ajax.attach(this, elem);
     }
 
     destroy() {
-        $(window).off('resize', this.place_elements);
+        $(window).off('resize', this.render);
+        global_events.off('on_sidebar_resize', this.on_sidebar_resize);
+    }
+
+    on_sidebar_resize(inst) {
+        this.scrollbar.render();
+        this.scrollbar.position = this.scrollbar.position;
     }
 
-    place_elements() {
+    render() {
         const window_width = $(window).width();
         // boostrap 5 breakpoints
         const window_sm = window_width <= 576;
         const window_lg = window_width <= 992;
-        const in_navbar_content = $('#personaltools', this.navbar_content).length > 0;
+        const navbar_content = this.navbar_content;
+        const in_navbar_content = ts.query_elem(
+            '#personaltools',
+            navbar_content
+        ) !== null;
 
         if (window_sm) {
             if (!in_navbar_content) {
-                this.personal_tools.detach().appendTo(this.navbar_content);
+                this.personal_tools.detach().appendTo(navbar_content);
             }
         } else if (in_navbar_content) {
             this.personal_tools.detach().prependTo(this.header_content);
@@ -48,30 +62,26 @@ export class PersonalTools extends ts.Events {
         }
 
         if (window_lg) {
-            this.disable_horizontal_scrolling();
+            this.disable_scrolling();
         } else {
-            this.navbar_content.removeClass('show');
+            navbar_content.removeClass('show');
             // prevent content from expanding again on resize
-            this.enable_horizontal_scrolling();
+            this.enable_scrolling();
         }
     }
 
-    disable_horizontal_scrolling() {
-        this.scrollable.each((i, item) => {
-            const scrollbar = $(item).data('scrollbar');
-            if (!scrollbar.disabled) {
-                scrollbar.position = 0;
-                scrollbar.disabled = true;
-            }
-        });
+    disable_scrolling() {
+        const scrollbar = this.scrollbar;
+        if (!scrollbar.disabled) {
+            scrollbar.position = 0;
+            scrollbar.disabled = true;
+        }
     }
 
-    enable_horizontal_scrolling() {
-        this.scrollable.each((i, item) => {
-            const scrollbar = $(item).data('scrollbar');
-            if (scrollbar.disabled) {
-                scrollbar.disabled = false;
-            }
-        });
+    enable_scrolling() {
+        const scrollbar = this.scrollbar;
+        if (scrollbar.disabled) {
+            scrollbar.disabled = false;
+        }
     }
 }

js/src/scrollbar.js

@@ -118,10 +118,8 @@ export class Scrollbar extends ts.Events {
         ) {
             if (e.type === 'mouseenter') {
                 this.scrollbar.stop(true, true).fadeIn();
-            } else if (e.type === 'mouseleave') {
-                if (e.relatedTarget !== elem.get(0)) {
-                    this.scrollbar.stop(true, true).fadeOut();
-                }
+            } else if (e.type === 'mouseleave' && e.relatedTarget !== elem.get(0)) {
+                this.scrollbar.stop(true, true).fadeOut();
             }
         }
     }

js/src/sidebar.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import ts from 'treibstoff';
+import {global_events} from './globals.js';
 
 export class Sidebar extends ts.Motion {
 
@@ -47,24 +48,26 @@ export class Sidebar extends ts.Motion {
         return this.elem.css('width') === '0px';
     }
 
-    on_click(evt) {
-        if (this.collapsed) {
-            this.expand();
-        } else {
-            this.collapse();
-        }
-    }
-
     collapse() {
         this.elem
             .removeClass('expanded')
             .addClass('collapsed');
+        global_events.trigger('on_sidebar_resize', this);
     }
 
     expand() {
         this.elem
             .removeClass('collapsed')
             .addClass('expanded');
+        global_events.trigger('on_sidebar_resize', this);
+    }
+
+    on_click(evt) {
+        if (this.collapsed) {
+            this.expand();
+        } else {
+            this.collapse();
+        }
     }
 
     move(evt) {
@@ -74,9 +77,11 @@ export class Sidebar extends ts.Motion {
         }
         this.sidebar_width = parseInt(evt.pageX);
         this.elem.css('width', this.sidebar_width);
+        global_events.trigger('on_sidebar_resize', this);
     }
 
     up() {
         this.scrollbar.disabled = false;
+        global_events.trigger('on_sidebar_resize', this);
     }
 }

js/src/tabletoolbar.js

@@ -1,7 +1,7 @@
 import {
     BatchedItemsSize,
     BatchedItemsSearch
-} from "./batcheditems.js";
+} from './batcheditems.js';
 
 export class TableToolbar {
 

js/src/translation.js

@@ -1,6 +1,5 @@
 import $ from 'jquery';
 
-
 export class Translation {
 
     static initialize(context) {