@qtoggle/qui 0.0.0

package/js/pages/pages-context.js

@@ -0,0 +1,154 @@
+
+import Signal from '$qui/base/signal.js'
+
+import {getCurrentContext} from './pages.js'
+import * as Window         from '$qui/window.js'
+
+
+/**
+ * A page stack context.
+ * @alias qui.pages.PagesContext
+ */
+class PagesContext {
+
+    /**
+     * @constructs
+     */
+    constructor() {
+
+        /**
+         * Emitted whenever a page is pushed to the context. Handlers are called with the following parameters:
+         *  * `page: {@link qui.pages.PageMixin}`, the pushed page
+         *  * `index: Number`, page index in page stack
+         * @type {qui.base.Signal}
+         */
+        this.pushSignal = new Signal(this)
+
+        /**
+         * Emitted whenever a page is popped from the context. Handlers are called with the following parameters:
+         *  * `page: {@link qui.pages.PageMixin}`, the popped page
+         *  * `index: Number`, page index in page stack
+         * @type {qui.base.Signal}
+         */
+        this.popSignal = new Signal(this)
+
+        /**
+         * @type {qui.pages.PageMixin[]}
+         * @private
+         */
+        this._stack = []
+    }
+
+    /**
+     * Return the number of pages.
+     * @returns {Number}
+     */
+    getSize() {
+        return this._stack.length
+    }
+
+    /**
+     * Return the page at a given index.
+     * @param {Number} index
+     * @returns {?qui.pages.PageMixin}
+     */
+    getPageAt(index) {
+        return this._stack[index] || null
+    }
+
+    /**
+     * Return the stack of pages.
+     * @returns {qui.pages.PageMixin[]}
+     */
+    getPages() {
+        return this._stack.slice()
+    }
+
+    /**
+     * Return the current page (the tip of the stack).
+     * @returns {?qui.pages.PageMixin}
+     */
+    getCurrentPage() {
+        return this._stack[this._stack.length - 1] || null
+    }
+
+    /**
+     * Return the pages that are currently visible in this context.
+     * @returns {qui.pages.PageMixin[]}
+     */
+    getVisiblePages() {
+        if (!this._stack.length) {
+            return []
+        }
+
+        let currentPage = this._stack[this._stack.length - 1]
+        let visiblePages = [currentPage]
+        let visiblePagesNonPopupMaxCount = Window.isSmallScreen() ? 1 : 4
+        let visiblePagesPopupCount = currentPage.isPopup() ? 1 : 0
+        let visiblePagesNonPopupCount = currentPage.isPopup() ? 0 : 1
+
+        /* Allow at most 4 visible non-popup pages at most 1 visible popup page, starting from current page and going
+         * backwards */
+        for (let i = this._stack.length - 2; i >= 0; i--) {
+            let nextPage = this._stack[i + 1]
+            let thisPage = this._stack[i]
+
+            /* Stop at first page that wants to be alone on the visible container; popup pages have an implicit behavior
+             * of keep-previous-visible */
+            if (!nextPage.isPrevKeptVisible() && !nextPage.isPopup()) {
+                break
+            }
+
+            if (thisPage.isPopup()) {
+                /* Only one popup page can be visible */
+                if (visiblePagesPopupCount < 1) {
+                    visiblePagesPopupCount++
+                    visiblePages.push(thisPage)
+                }
+            }
+            else {
+                /* Limit non-popup visible pages */
+                if (visiblePagesNonPopupCount < visiblePagesNonPopupMaxCount) {
+                    visiblePagesNonPopupCount++
+                    visiblePages.push(thisPage)
+                }
+            }
+        }
+
+        return visiblePages
+    }
+
+    /**
+     * Push a page to the context.
+     * @param {qui.pages.PageMixin} page
+     */
+    push(page) {
+        this._stack.push(page)
+        this.pushSignal.emit(page, this._stack.length - 1)
+    }
+
+    /**
+     * Pop the current page from the stack, returning it.
+     * @returns {?qui.pages.PageMixin}
+     */
+    pop() {
+        let page = this._stack.pop() || null
+        if (page) {
+            this.popSignal.emit(page, this._stack.length)
+        }
+
+        return page
+    }
+
+    /**
+     * Tell if this context is the current pages context.
+     * @returns {Boolean}
+     */
+    isCurrent() {
+        return this === getCurrentContext()
+    }
+
+}
+
+
+export default PagesContext

package/js/pages/pages.js

@@ -0,0 +1,252 @@
+/**
+ * @namespace qui.pages
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {AssertionError} from '$qui/base/errors.js'
+import * as GlobalGlass from '$qui/global-glass.js'
+import * as OptionsBar  from '$qui/main-ui/options-bar.js'
+import {asap}           from '$qui/utils/misc.js'
+import * as Window      from '$qui/window.js'
+
+import PagesContext     from './pages-context.js'
+import * as Breadcrumbs from './breadcrumbs.js'
+
+
+let pagesContainer = null
+let currentContext = null
+
+
+/* Page context */
+
+function newContext() {
+    let context = new PagesContext()
+
+    context.pushSignal.connect(function (page) {
+        /* Whenever a page is added to a context, attach our UI handlers to it */
+        attachPageHTMLHandlers(page)
+    })
+
+    context.popSignal.connect(function (page) {
+        /* Whenever a page is removed from a context, detach our UI handlers from it */
+        detachPageHTMLHandlers(page)
+    })
+
+    return context
+}
+
+/**
+ * Return the current pages context.
+ * @alias qui.pages.getCurrentContext
+ * @returns {qui.pages.PagesContext}
+ */
+export function getCurrentContext() {
+    return currentContext
+}
+
+/**
+ * Replace the current pages context.
+ * @alias qui.pages.setCurrentContext
+ * @param {?qui.pages.PagesContext} context new context, or `null` to replace with a brand-new context
+ */
+export function setCurrentContext(context) {
+    let pagesToDetach = currentContext.getPages()
+    let currentPage = currentContext.getCurrentPage()
+    if (currentPage) {
+        currentPage.handleLeaveCurrent()
+    }
+
+    /* Hide & detach pages */
+    pagesToDetach.forEach(function (page) {
+        page.detach()
+    })
+
+    if (!context) {
+        context = newContext()
+    }
+
+    /* Restore the context */
+    currentContext = context
+
+    /* Attach new pages */
+    currentContext.getPages().forEach(function (page) {
+        page.attach()
+    })
+
+    currentPage = currentContext.getCurrentPage()
+    if (currentPage) {
+        currentPage.handleBecomeCurrent()
+    }
+
+    updateUI()
+}
+
+/**
+ * Return the current page.
+ * @alias qui.pages.getCurrentPage
+ * @returns {?qui.pages.PageMixin}
+ */
+export function getCurrentPage() {
+    return currentContext.getCurrentPage()
+}
+
+
+/* Pages UI */
+
+function updatePagesVisibility() {
+    /* Reset page classes/styles */
+    currentContext.getPages().forEach(function (page) {
+        page.getPageHTML().removeClass('visible current').css({width: '', left: ''})
+    })
+
+    /* Hide pages that are still part of the DOM but no longer part of current context */
+    $('div.qui-page').not('.sticky').removeClass('visible current').css({width: '', left: ''})
+
+    if (!currentContext.getSize()) {
+        GlobalGlass.updateVisibility()
+        return
+    }
+
+    let currentPage = currentContext.getCurrentPage()
+    currentPage.getPageHTML().addClass('current')
+
+    let visiblePages = currentContext.getVisiblePages()
+    let columnPages = visiblePages.filter(page => page.isColumnLayout())
+
+    /* The minimum accepted width is 25% (on a large screen) */
+    let expandWidth = 100 - columnPages.length * 25 /* As percent */
+    let left = 0
+    visiblePages.reverse().forEach(function (page) {
+        let html = page.getPageHTML()
+        html.addClass('visible')
+
+        let l
+        let w = null
+        /* The current popup page has special treatment and does not contribute to expanded width */
+        if (page.isPopup() && page === currentPage) {
+            l = 0
+        }
+        else {
+            l = left
+            if (!page.isColumnLayout()) { /* Expand */
+                w = expandWidth
+                left += expandWidth
+            }
+            else {
+                left += 25
+            }
+        }
+
+        if (l != null) {
+            html.css('left', `${l}%`)
+        }
+        if (w != null) {
+            html.css('width', `${w}%`)
+        }
+    })
+
+    pagesContainer.toggleClass('full', (left >= 100) || Window.isSmallScreen())
+
+    GlobalGlass.updateVisibility()
+}
+
+function updateContentScroll() {
+    /* Scrolled content */
+    let scrolled = currentContext.getPages().some(function (p) {
+        if (!p.isVisible()) {
+            return false
+        }
+
+        return p.getPageHTML()[0].scrollTop !== 0
+
+    })
+    Window.$body.toggleClass('content-scrolled', scrolled)
+}
+
+function handlePageScroll() {
+    updateContentScroll()
+
+    let $this = $(this)
+    let page = $this.data('page')
+    if (!page) {
+        throw AssertionError('page scroll event from a non-page HTML element')
+    }
+
+    page.handleVertScroll()
+}
+
+function triggerPageResize() {
+    asap(function () {
+        currentContext.getPages().forEach(function (page) {
+            page.handleResize()
+        })
+    })
+}
+
+function triggerPageResizeOnTransitionEnd(e) {
+    if (e.target !== this) {
+        return
+    }
+
+    if (e.originalEvent.propertyName !== 'width') {
+        return
+    }
+
+    triggerPageResize()
+}
+
+function attachPageHTMLHandlers(page) {
+    page.getPageHTML().on('scroll', handlePageScroll)
+    page.getPageHTML().on('transitionend', triggerPageResizeOnTransitionEnd)
+}
+
+function detachPageHTMLHandlers(page) {
+    page.getPageHTML().off('scroll', handlePageScroll)
+    page.getPageHTML().off('transitionend', triggerPageResizeOnTransitionEnd)
+}
+
+/**
+ * Return the page container HTML element.
+ * @alias qui.pages.getPagesContainer
+ * @returns {jQuery}
+ */
+export function getPagesContainer() {
+    return pagesContainer
+}
+
+/**
+ * Update all UI elements depending on current page stack.
+ * @alias qui.pages.updateUI
+ */
+export function updateUI() {
+    /* Use asap() because some pages might have just been attached to DOM and animations won't probably work */
+    asap(function () {
+        Breadcrumbs.update()
+        updatePagesVisibility()
+        updateContentScroll()
+    })
+}
+
+
+export function init() {
+    pagesContainer = $('div.qui-pages-container')
+    currentContext = newContext()
+
+    Breadcrumbs.init()
+
+    Window.resizeSignal.connect(function (width, height) {
+        triggerPageResize()
+    })
+
+    OptionsBar.openCloseSignal.connect(function (opened) {
+        /* Update _optionsBarOpen flag of current page */
+
+        let currentPage = currentContext.getCurrentPage()
+        if (!currentPage) {
+            return
+        }
+
+        currentPage._optionsBarOpen = opened
+    })
+}