forum: add Pane util

js/src/forum/Forum.ts

@@ -1,5 +1,6 @@
 import Application from '../common/Application';
 import History from './utils/History';
+import Pane from './utils/Pane';
 
 import Navigation from '../common/components/Navigation';
 import HeaderPrimary from './components/HeaderPrimary';
@@ -37,6 +38,8 @@ export default class Forum extends Application {
     previous?: Page;
     current?: Page;
 
+    pane!: Pane;
+
     constructor() {
         super();
 
@@ -63,7 +66,7 @@ export default class Forum extends Application {
         m.mount(document.getElementById('header-primary'), new HeaderPrimary());
         m.mount(document.getElementById('header-secondary'), new HeaderSecondary());
 
-        // this.pane = new Pane(document.getElementById('app'));
+        this.pane = new Pane(document.getElementById('app'));
         // this.composer = m.mount(document.getElementById('composer'), Composer.component());
 
         m.route.prefix = '';

js/src/forum/utils/Pane.ts

@@ -0,0 +1,98 @@
+/**
+ * The `Pane` class manages the page's discussion list sidepane. The pane is a
+ * part of the content view (DiscussionPage component), but its visibility is
+ * determined by CSS classes applied to the outer page element. This class
+ * manages the application of those CSS classes.
+ */
+export default class Pane {
+    /**
+     * The localStorage key to store the pane's pinned state with.
+     */
+    protected pinnedKey = 'panePinned';
+
+    /**
+     * The page element.
+     */
+    protected $element;
+
+    /**
+     * Whether or not the pane is currently pinned.
+     */
+    protected pinned = !!localStorage.getItem(this.pinnedKey);
+
+    /**
+     * Whether or not the pane is currently showing, or is hidden off the edge
+     * of the screen.
+     */
+    protected showing: boolean = false;
+
+    active: boolean = false;
+
+    hideTimeout?: number;
+
+    constructor(element) {
+        this.$element = $(element);
+
+        this.render();
+    }
+
+    /**
+     * Enable the pane.
+     */
+    public enable() {
+        this.active = true;
+        this.render();
+    }
+
+    /**
+     * Disable the pane.
+     */
+    public disable() {
+        this.active = false;
+        this.showing = false;
+        this.render();
+    }
+
+    /**
+     * Show the pane.
+     */
+    public show() {
+        clearTimeout(this.hideTimeout);
+        this.showing = true;
+        this.render();
+    }
+
+    /**
+     * Hide the pane.
+     */
+    public hide() {
+        this.showing = false;
+        this.render();
+    }
+
+    /**
+     * Begin a timeout to hide the pane, which can be cancelled by showing the
+     * pane.
+     */
+    public onmouseleave() {
+        this.hideTimeout = setTimeout(this.hide.bind(this), 250);
+    }
+
+    /**
+     * Toggle whether or not the pane is pinned.
+     */
+    public togglePinned() {
+        this.pinned = !this.pinned;
+
+        localStorage.setItem(this.pinnedKey, this.pinned ? 'true' : 'false');
+
+        this.render();
+    }
+
+    /**
+     * Apply the appropriate CSS classes to the page element.
+     */
+    protected render() {
+        this.$element.toggleClass('panePinned', this.pinned).toggleClass('hasPane', this.active).toggleClass('paneShowing', this.showing);
+    }
+}