@qtoggle/qui 0.0.0

package/js/pages/breadcrumbs.js

@@ -0,0 +1,124 @@
+
+import $      from '$qui/lib/jquery.module.js'
+import Logger from '$qui/lib/logger.module.js'
+
+import Config          from '$qui/config.js'
+import * as MenuBar    from '$qui/main-ui/menu-bar.js'
+import * as OptionsBar from '$qui/main-ui/options-bar.js'
+import * as TopBar     from '$qui/main-ui/top-bar.js'
+import * as Navigation from '$qui/navigation.js'
+import * as ArrayUtils from '$qui/utils/array.js'
+import * as HTML       from '$qui/utils/html.js'
+import * as Window     from '$qui/window.js'
+
+import * as Pages from './pages.js'
+
+
+const MAX_BREADCRUMBS = 10
+const logger = Logger.get('qui.pages')
+
+let breadcrumbsContainer = null
+let menuButton = null
+
+
+export function update() {
+    let currentContext = Pages.getCurrentContext()
+
+    breadcrumbsContainer.children('div.qui-breadcrumb').removeClass('used selected back last first-used')
+
+    currentContext.getPages().forEach(function (page, i) {
+        if (!page.getTitle()) {
+            return
+        }
+
+        let breadcrumb = breadcrumbsContainer.children(`div.qui-breadcrumb:eq(${i})`)
+        breadcrumb.addClass('used')
+        breadcrumb.html(page.getTitle())
+    })
+
+    breadcrumbsContainer.children('div.qui-breadcrumb.used:first').addClass('first-used')
+
+    let lastIndex = 0
+    currentContext.getPages().forEach(function (page, i) {
+        if (!page.getTitle()) {
+            return
+        }
+
+        let breadcrumb = breadcrumbsContainer.children(`div.qui-breadcrumb:eq(${i})`)
+        breadcrumb.toggleClass('selected', i === currentContext.getSize() - 1)
+        breadcrumb.toggleClass('back', (i === currentContext.getSize() - 2) && (i >= 0) && Window.isSmallScreen())
+
+        lastIndex = i
+    })
+
+    let breadcrumb = breadcrumbsContainer.children(`div.qui-breadcrumb:eq(${lastIndex})`)
+    breadcrumb.addClass('last')
+
+    /* Update window title */
+    let windowTitle = Config.appDisplayName
+    let currentPageTitle = null
+    if (currentContext.getSize()) {
+        let currentPage = currentContext.getCurrentPage()
+        if (currentPage.getTitle()) {
+            currentPageTitle = currentPage.getTitle()
+            windowTitle += ` - ${currentPageTitle}`
+        }
+    }
+
+    /* Set menu button visibility */
+    let menuButtonVisible = true
+    if (Window.isSmallScreen() && currentContext.getSize() > 1) {
+        menuButtonVisible = false
+    }
+
+    menuButton.toggleClass('hidden', !menuButtonVisible)
+
+    /* Update top bar title */
+    TopBar.setTitle(currentPageTitle)
+
+    /* Update document title */
+    document.title = HTML.plainText(windowTitle)
+}
+
+export function init() {
+    breadcrumbsContainer = $('div.qui-breadcrumbs-container')
+    menuButton = $('div.qui-top-bar > div.qui-menu-button')
+
+    /* Create placeholders for breadcrumbs */
+    ArrayUtils.range(0, MAX_BREADCRUMBS).forEach(function (i) {
+        let breadcrumb = $('<div></div>', {class: 'qui-base-button qui-breadcrumb'})
+        breadcrumb.attr('data-index', i)
+        breadcrumbsContainer.append(breadcrumb)
+
+        breadcrumb.on('click', function () {
+            let currentContext = Pages.getCurrentContext()
+
+            /* Close menu and option bars when clicking on a breadcrumb */
+            MenuBar.close()
+            OptionsBar.close()
+
+            if (currentContext.getSize() <= i + 1) {
+                return /* Already there */
+            }
+
+            let state = Navigation.getCurrentHistoryEntryState()
+            let isBackButton = breadcrumb.hasClass('back')
+
+            /* Close all pages following the page associated to clicked breadcrumb */
+            let page = currentContext.getPageAt(i + 1)
+            if (page) {
+                if ((Navigation.getBackMode() === Navigation.BACK_MODE_CLOSE) && isBackButton) {
+                    window.history.back()
+                }
+                else {
+                    page.close().then(function () {
+                        Navigation.addHistoryEntry(state)
+                        Navigation.updateHistoryEntry()
+                    }).catch(function () {
+                        logger.debug('breadcrumb navigation cancelled by rejected page close')
+                    })
+                }
+            }
+        })
+    })
+}

package/js/pages/common-pages/common-pages.js

@@ -0,0 +1,6 @@
+/**
+ * @namespace qui.pages.commonpages
+ */
+
+export {default as ModalProgressPage}   from './modal-progress-page.js'
+export {default as StructuredPageMixin} from './structured-page.js'

package/js/pages/common-pages/modal-progress-page.js

@@ -0,0 +1,83 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {mix}            from '$qui/base/mixwith.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import PageMixin from '../page.js'
+
+
+/**
+ * A modal page with a progress widget and an optional message.
+ * @alias qui.pages.commonpages.ModalProgressPage
+ * @mixes qui.pages.PageMixin
+ */
+class ModalProgressPage extends mix().with(PageMixin) {
+
+    /**
+     * @constructs
+     * @param {String} [message] an optional progress message
+     * @param {Number} [progressPercent] initial progress percent (defaults to `-1`)
+     * @param {Object} [progressOptions] extra options for the progress widget
+     * @param {...*} args parent class parameters
+     */
+    constructor({message = null, progressPercent = -1, progressOptions = {}, ...args} = {}) {
+        args.modal = true
+
+        super(args)
+
+        this._progressPercent = progressPercent
+        this._progressOptions = progressOptions
+        this._message = message
+
+        this._progressWidget = null
+        this._messageContainer = null
+    }
+
+    makeHTML() {
+        let panelDiv = $('<div></div>', {class: 'qui-modal-progress-page-panel'})
+        let containerDiv = $('<div></div>', {class: 'qui-modal-progress-page-container'})
+        containerDiv.append(panelDiv)
+
+        let progressOptions = ObjectUtils.copy(this._progressOptions)
+        ObjectUtils.setDefault(progressOptions, 'radius', '2em')
+        this._progressWidget = $('<div></div>', {class: 'qui-modal-progress-page-progress-widget'})
+        this._progressWidget.progressdisk(progressOptions)
+        this._progressWidget.progressdisk('setValue', this._progressPercent)
+
+        this._messageContainer = $('<div></div>', {class: 'qui-modal-progress-page-message'})
+        this._messageContainer.html(this._message)
+        this._messageContainer.toggleClass('empty', !this._message)
+
+        panelDiv.append(this._progressWidget).append(this._messageContainer)
+
+        return containerDiv
+    }
+
+    /**
+     * Update the percent value of the progress widget.
+     * @param {Number} percent
+     */
+    setProgressPercent(percent) {
+        this.getPageHTML() /* Ensure all HTML elements are created */
+
+        this._progressPercent = percent
+        this._progressWidget.progressdisk('setValue', percent)
+    }
+
+    /**
+     * Set or clear the progress message.
+     * @param {?String} message the message to set, or `null` to clear the existing message
+     */
+    setMessage(message) {
+        this.getPageHTML() /* Ensure all HTML elements are created */
+
+        this._message = message
+        this._messageContainer.html(message || '')
+        this._messageContainer.toggleClass('empty', !this._message)
+    }
+
+}
+
+
+export default ModalProgressPage

package/js/pages/common-pages/structured-page.js

@@ -0,0 +1,46 @@
+
+import {Mixin}               from '$qui/base/mixwith.js'
+import {mix}                 from '$qui/base/mixwith.js'
+import StockIcon             from '$qui/icons/stock-icon.js'
+import {StructuredViewMixin} from '$qui/views/common-views/common-views.js'
+
+import PageMixin from '../page.js'
+
+
+/** @lends qui.pages.commonpages.StructuredPageMixin */
+const StructuredPageMixin = Mixin((superclass = Object) => {
+
+    /**
+     * A mixin that combines {@link qui.views.commonviews.StructuredViewMixin} and {@link qui.pages.PageMixin}.
+     * @alias qui.pages.commonpages.StructuredPageMixin
+     * @mixin
+     * @extends qui.views.commonviews.StructuredViewMixin
+     * @mixes qui.pages.PageMixin
+     */
+    class StructuredPageMixin extends mix(StructuredViewMixin(superclass)).with(PageMixin) {
+
+        /**
+         * @constructs
+         * @param {...*} args parent class parameters
+         */
+        constructor({...args} = {}) {
+            super(args)
+        }
+
+        prepareIcon(icon) {
+            /* Popup page views should normally have the default foreground icon color, even on small screens */
+            if (this.isPopup() && (icon instanceof StockIcon)) {
+                icon = icon.alterDefault({variant: 'foreground'})
+            }
+
+            return super.prepareIcon(icon)
+        }
+
+    }
+
+    return StructuredPageMixin
+
+})
+
+
+export default StructuredPageMixin