history navigation when ui.is_touch

Author: topboy

src/components/App.vue

@@ -20,7 +20,7 @@
                     'kiwi-workspace--disconnected': network && network.state !== 'connected'
                 }"
                 class="kiwi-workspace"
-                @click="stateBrowserDrawOpen = false"
+                @click="hideStateBrowser()"
             >
                 <div class="kiwi-workspace-background" />
 
@@ -225,15 +225,40 @@ export default {
                 this.$state.clearNickColours();
             });
         },
+        hideStateBrowser() {
+            if (!this.stateBrowserDrawOpen) return;
+            if (this.$state.ui.is_touch) {
+                this.$state.history.go(-1);
+            } else {
+                this.stateBrowserDrawOpen = false;
+            }
+            this.$state.stateBrowserDrawOpen = this.stateBrowserDrawOpen;
+        },
+        showStateBrowser() {
+            if (this.stateBrowserDrawOpen) return;
+            if (this.$state.ui.is_touch) {
+                this.$state.history.push({
+                    enter: () => { this.stateBrowserDrawOpen = true; },
+                    leave: () => { this.stateBrowserDrawOpen = false; },
+                    query: {
+                        statebrowser: 'open',
+                    },
+                });
+            } else {
+                this.stateBrowserDrawOpen = true;
+            }
+            this.$state.stateBrowserDrawOpen = this.stateBrowserDrawOpen;
+        },
         initStateBrowser() {
             this.listen(this.$state, 'statebrowser.toggle', () => {
-                this.stateBrowserDrawOpen = !this.stateBrowserDrawOpen;
+                const setting = !this.stateBrowserDrawOpen;
+                setting ? this.showStateBrowser() : this.hideStateBrowser();
             });
             this.listen(this.$state, 'statebrowser.show', () => {
-                this.stateBrowserDrawOpen = true;
+                this.showStateBrowser();
             });
             this.listen(this.$state, 'statebrowser.hide', () => {
-                this.stateBrowserDrawOpen = false;
+                this.hideStateBrowser();
             });
         },
         initMediaviewer() {

src/libs/History.js

@@ -15,8 +15,13 @@ export class History {
     }
 
     go(n) {
+        if (this.currentPage + n <= 0) {
+            this.setPage(0, true);
+            return;
+        }
         this.log('go', n);
-        return this.history.go(n);
+        this.log('source', new Error().stack);
+        this.history.go(n);
     }
 
     log(...args) {
@@ -28,37 +33,42 @@ export class History {
             // eslint-disable-next-line
             window.addEventListener('popstate', (e) => {
                 const page = e?.state?.page;
-                this.log('popstate', e);
-                if (page === undefined) {
-                    this.currentPage = 0;
-                    this.history.replaceState({}, '', this.baseUrl + '/');
-                    const state = getState();
-                    const net = state.getActiveNetwork();
-                    const buf = state.getActiveBuffer();
-                    const serverBuffer = net.serverBuffer();
-                    if (!state.activeComponent && buf === serverBuffer) {
-                        this.history.go();
-                        return;
-                    }
-                    state.$emit('active.component');
-                    state.setActiveBuffer(net.id, serverBuffer.name || '*', false);
-                    // e.preventDefault();
+                if (page === 0 && this.currentPage === 0) {
+                    this.history.go();
                     return;
                 }
+                this.log('popstate', e);
+                const state = getState();
+                const net = state.getActiveNetwork();
+                const buf = state.getActiveBuffer();
+                const serverBuffer = net.serverBuffer();
+                if (
+                    !state.stateBrowserDrawOpen &&
+                    !state.activeComponent &&
+                    buf === serverBuffer
+                ) {
+                    this.history.go();
+                } else if (page === undefined) {
+                    this.setPage(0, true);
+                }
                 this.setPage(page);
             });
             this.prepared = true;
         }
     }
 
-    setPage(page) {
+    setPage(page, setUrl = false) {
         this.prepare();
+        this.log('source', new Error().stack);
         this.log('setting page', page);
         const previousHandler = this.handlers[this.currentPage];
         const handler = this.handlers[page];
         if (page !== undefined) {
             this.currentPage = page;
         }
+        if (setUrl) {
+            this.doReplace(handler);
+        }
         previousHandler && previousHandler.leave();
         handler && handler.enter();
     }
@@ -101,7 +111,7 @@ export class History {
         this.history.pushState({
             page,
         }, '', url);
-        this.handlers.push({ enter, leave, path: '' + url });
+        this.handlers.push({ enter, leave, url });
         this.setPage(page);
     }
 
@@ -148,7 +158,7 @@ export class History {
             page,
         }, '', url);
         const previousHandler = this.handlers[page];
-        const handler = { enter, leave, path: '' + url };
+        const handler = { enter, leave, url };
         this.handlers[page] = handler;
         previousHandler && previousHandler.leave();
         handler.enter();

src/libs/SidebarState.js

@@ -21,10 +21,37 @@ export default function useSidebarState() {
     const api = GlobalApi.singleton();
     api.on('sidebar.component', (component, props) => {
         resetSidebarState();
-        sidebarOpen.value = !!component;
-        activeComponent.value = component;
-        activeComponentProps.value = props || {};
-        sidebarSection.value = sidebarOpen.value ? 'component' : '';
+        const open = !!component;
+        const state = getState();
+        if (state.ui.is_touch) {
+            const leave = () => {
+                sidebarOpen.value = false;
+                activeComponent.value = null;
+                activeComponentProps.value = {};
+                sidebarSection.value = '';
+            };
+            if (open) {
+                state.history.push({
+                    enter: () => {
+                        sidebarOpen.value = true;
+                        activeComponent.value = component;
+                        activeComponentProps.value = props;
+                        sidebarSection.value = 'component';
+                    },
+                    leave,
+                    query: {
+                        sidebar: 'open',
+                    },
+                });
+            } else {
+                state.history.go(-1);
+            }
+        } else {
+            sidebarOpen.value = open;
+            activeComponent.value = component;
+            activeComponentProps.value = props || {};
+            sidebarSection.value = sidebarOpen.value ? 'component' : '';
+        }
     });
 
     // Allow forcing the sidebar open at startup