@qtoggle/qui 0.0.0

package/js/sections/sections.js

@@ -0,0 +1,300 @@
+/**
+ * @namespace qui.sections
+ */
+
+import $      from '$qui/lib/jquery.module.js'
+import Logger from '$qui/lib/logger.module.js'
+
+import {AssertionError} from '$qui/base/errors.js'
+import {CancelledError} from '$qui/base/errors.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import * as OptionsBar  from '$qui/main-ui/options-bar.js'
+import * as Navigation  from '$qui/navigation.js'
+import * as Theme       from '$qui/theme.js'
+import * as Window      from '$qui/window.js'
+
+
+/**
+ * @alias qui.sections.BUTTON_TYPE_MENU_BAR
+ */
+export const BUTTON_TYPE_MENU_BAR = 'menu_bar'
+
+/**
+ * @alias qui.sections.BUTTON_TYPE_TOP_BAR
+ */
+export const BUTTON_TYPE_TOP_BAR = 'top_bar'
+
+/**
+ * @alias qui.sections.BUTTON_TYPE_NONE
+ */
+export const BUTTON_TYPE_NONE = 'none'
+
+
+const logger = Logger.get('qui.sections')
+
+let sectionClasses = []
+let sectionsList = []
+let currentSection = null
+let homeSection = null
+
+
+/**
+ * An error class used to prevent hiding sections.
+ * @alias qui.sections.HideCancelled
+ * @extends qui.base.errors.CancelledError
+ */
+export class HideCancelled extends CancelledError {
+}
+
+
+function attachSectionEventRelays() {
+    Window.screenLayoutChangeSignal.connect(function (smallScreen, landscape) {
+        sectionsList.forEach(function (s) {
+            s.onScreenLayoutChange(smallScreen, landscape)
+        })
+    })
+
+    Window.resizeSignal.connect(function (width, height) {
+        sectionsList.forEach(function (s) {
+            s.onWindowResize(width, height)
+        })
+    })
+
+    Window.activeChangeSignal.connect(function (active) {
+        sectionsList.forEach(function (s) {
+            s.onWindowActiveChange(active)
+        })
+    })
+
+    Window.focusChangeSignal.connect(function (focused) {
+        sectionsList.forEach(function (s) {
+            s.onWindowFocusedChange(focused)
+        })
+    })
+
+    OptionsBar.openCloseSignal.connect(function (opened) {
+        if (!currentSection) {
+            return
+        }
+
+        currentSection.onOptionsBarOpenClose(opened)
+    })
+}
+
+/**
+ * @private
+ * @returns {Promise}
+ */
+function softReload() {
+    logger.debug('soft reloading')
+
+    /* Reset sections */
+    if (currentSection) {
+        let currentPath = Navigation.getCurrentPath()
+
+        return reset().then(function () {
+            return Navigation.navigate({path: currentPath, historyEntry: false})
+        })
+    }
+
+    return Promise.resolve()
+}
+
+
+/**
+ * Register a section class.
+ * @alias qui.sections.register
+ * @param {typeof qui.sections.Section} sectionClass the section class (see {@link qui.sections.Section})
+ */
+export function register(sectionClass) {
+    let index = sectionClasses.indexOf(sectionClass)
+    if (index >= 0) {
+        throw new AssertionError('Attempt to register a section class that has already been registered')
+    }
+
+    sectionClasses.push(sectionClass)
+
+    let section = sectionClass.getInstance()
+    section.handleRegister()
+    sectionsList.push(section)
+
+    logger.debug(`registered section "${section.getId()}"`)
+
+    if (!homeSection) {
+        /* Home section is, by default, the first section */
+        logger.debug(`home section set to "${section.getId()}"`)
+        homeSection = section
+    }
+}
+
+/**
+ * Unregister a section class.
+ * @alias qui.sections.unregister
+ * @param {typeof qui.sections.Section} sectionClass the section class (see {@link qui.sections.Section})
+ */
+export function unregister(sectionClass) {
+    let index = sectionClasses.indexOf(sectionClass)
+    if (index < 0) {
+        throw new AssertionError('Attempt to unregister a section class that has not been registered')
+    }
+
+    sectionClasses.splice(index, 1)
+
+    let section = sectionsList[index]
+    section.handleUnregister()
+
+    sectionsList.splice(index, 1)
+    logger.debug(`unregistered section "${section.getId()}"`)
+}
+
+/**
+ * Lookup a section by its identifier.
+ * @alias qui.sections.get
+ * @param {String} id the section identifier
+ * @returns {?qui.sections.Section} the section if found, otherwise `null`
+ */
+export function get(id) {
+    return sectionsList.find(section => section.getId() === id) || null
+}
+
+/**
+ * Return the current section.
+ * @alias qui.sections.getCurrent
+ * @returns {?qui.sections.Section}
+ */
+export function getCurrent() {
+    return currentSection
+}
+
+/**
+ * Return all registered sections, in order.
+ * @alias qui.sections.all
+ * @returns {qui.sections.Section[]}
+ */
+export function all() {
+    return sectionsList.slice()
+}
+
+/**
+ * Switch to the given section, making it current.
+ * @alias qui.sections.switchTo
+ * @param {qui.sections.Section} section the section
+ * @param {String} [source] optional source to pass to {@link qui.sections.Section#onShow} (defaults to `program`)
+ * @param {Boolean} [historyEntry] whether to create a new history entry for current context before switching to the
+ * new section, or not (defaults to `false`)
+ * @returns {Promise} a promise that resolves as soon as the section is loaded.
+ */
+export function switchTo(section, source, historyEntry = false) {
+    /* If requested section is already the current section, do nothing more */
+    if ((currentSection === section)) {
+        Navigation.updateHistoryEntry()
+        return currentSection.whenLoaded()
+    }
+
+    return section.whenPreloaded().then(function () {
+        let oldSection = currentSection
+        let hidePromise = Promise.resolve()
+        if (oldSection) {
+            hidePromise = oldSection._hide(historyEntry)
+        }
+
+        return hidePromise.then(function () {
+
+            let s = section.navigate([])
+            if (s !== section) {
+                logger.debug(`section "${section.getId()}" redirected to section "${s.getId()}"`)
+                return switchTo(s, source)
+            }
+
+            currentSection = section
+
+            if (source === undefined) {
+                source = 'program'
+            }
+
+            logger.debug(`switching to section "${section.getId()}" (source: ${source})`)
+
+        }).then(function () {
+            return section._show(source, oldSection)
+        }).then(function () {
+            Navigation.updateHistoryEntry()
+        })
+
+    })
+}
+
+/**
+ * Switch to the home section.
+ * @alias qui.sections.showHome
+ * @param {?Boolean} [reset] if `true` will reset the home section to its initial state, recreating its main page
+ * @returns {Promise} a promise that resolves as soon as the home section is loaded.
+ */
+export function showHome(reset) {
+    if (!homeSection) {
+        throw new AssertionError('No home section')
+    }
+
+    let promise = Promise.resolve()
+    if (reset) {
+        promise = homeSection.reset()
+    }
+
+    return promise.then(function () {
+        return switchTo(homeSection, /* source = */ 'home')
+    })
+}
+
+/**
+ * Set the home section.
+ * @alias qui.sections.setHome
+ * @param {qui.sections.Section} section the new home section
+ */
+export function setHome(section) {
+    homeSection = section
+}
+
+/**
+ * Return the home section.
+ * @alias qui.sections.getHome
+ * @returns {?qui.sections.Section}
+ */
+export function getHome() {
+    return homeSection
+}
+
+/**
+ * Reset all sections.
+ * @returns {Promise} a promise that is settled as soon as all sections have been reset
+ */
+export function reset() {
+    return Promise.all(sectionsList.map(s => s.reset()))
+}
+
+
+export function init() {
+    attachSectionEventRelays()
+
+    /* Prevent unwanted section closing when window is closed */
+    Window.closeSignal.connect(function () {
+        return !sectionsList.some(s => !s.canClose())
+    })
+
+    Window.screenLayoutChangeSignal.connect(function (smallScreen, landscape) {
+        /* Automatically update top icon buttons according to small screen state */
+        $('div.qui-top-bar > div.qui-top-button.qui-section-button > div.qui-icon').each(function () {
+            StockIcon.alterElement($(this), {variant: smallScreen ? 'white' : 'interactive'})
+        })
+
+        logger.debug('soft reloading due to screen layout change')
+        softReload()
+    })
+
+    Theme.changeSignal.connect(function (theme) {
+        logger.debug('soft reloading due to theme change')
+        softReload()
+    })
+
+    /* Export some stuff to global scope */
+    let qui = (window.qui = window.qui || {})
+    qui.getCurrentSection = getCurrent
+}

package/js/tables/common-cells/common-cells.js

@@ -0,0 +1,7 @@
+/**
+ * @namespace qui.tables.commoncells
+ */
+
+export {default as IconLabelTableCell}  from './icon-label-table-cell.js'
+export {default as PushButtonTableCell} from './push-button-table-cell.js'
+export {default as SimpleTableCell}     from './simple-table-cell.js'

package/js/tables/common-cells/icon-label-table-cell.js

@@ -0,0 +1,68 @@
+
+import {mix}                from '$qui/base/mixwith.js'
+import StockIcon            from '$qui/icons/stock-icon.js'
+import * as Lists           from '$qui/lists/lists.js'
+import {IconLabelViewMixin} from '$qui/views/common-views/common-views.js'
+
+import TableCell from '../table-cell.js'
+
+
+/**
+ * A table cell made of an icon and a label.
+ * @alias qui.tables.commoncells.IconLabelTableCell
+ * @extends qui.tables.TableCell
+ * @mixes qui.views.commonviews.IconLabelViewMixin
+ */
+class IconLabelTableCell extends mix(TableCell).with(IconLabelViewMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        super(args)
+
+        this._selectMode = null
+    }
+
+    makeContent() {
+        return this.getIconLabelContainer()
+    }
+
+    showValue(value) {
+        this.setIcon(value.icon)
+        this.setLabel(value.label)
+    }
+
+    prepareIcon(icon) {
+        if (!(icon instanceof StockIcon)) {
+            return icon
+        }
+
+        let clickable = (this._selectMode !== Lists.LIST_SELECT_MODE_DISABLED)
+        if (clickable) {
+            return icon.alterDefault({
+                variant: 'interactive',
+                activeVariant: 'interactive',
+                selectedVariant: 'background'
+            })
+        }
+        else {
+            return super.prepareIcon(icon)
+        }
+    }
+
+    setSelectMode(selectMode) {
+        /* Override setSelectMode to simply know what select mode the list has and to adjust the icon accordingly */
+        this._selectMode = selectMode
+        this.updateIcon()
+    }
+
+    setSelected(selected) {
+        this.getIconLabelContainer().toggleClass('selected', selected)
+    }
+
+}
+
+
+export default IconLabelTableCell

package/js/tables/common-cells/push-button-table-cell.js

@@ -0,0 +1,133 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import TableCell from '../table-cell.js'
+
+
+/**
+ * A table cell with a push button.
+ * @alias qui.tables.commoncells.PushButtonTableCell
+ * @extends qui.tables.TableCell
+ */
+class PushButtonTableCell extends TableCell {
+
+    /**
+     * @constructs
+     * @param {String} caption the button caption
+     * @param {Function} [onClick] function to be executed when the button is pushed (see
+     * {@link qui.tables.commoncells.PushButtonTableCell#onClick})
+     * @param {String} caption button caption
+     * @param {String} [style] button style:
+     *  * `"foreground"`
+     *  * `"interactive"` (default)
+     *  * `"highlight"`
+     *  * `"danger"`,
+     *  * `"colored"`
+     * @param {String} [backgroundColor] custom background color (ignored unless `style` is `"colored"`)
+     * @param {String} [backgroundActiveColor] custom background active color (ignored unless `style` is `"colored"`)
+     * @param {String} [foregroundColor] custom foreground color (ignored unless `style` is `"colored"`)
+     * @param {qui.icons.Icon} [icon] an optional button icon
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        caption,
+        onClick = null,
+        style = 'interactive',
+        backgroundColor = '@interactive-color',
+        backgroundActiveColor = '@interactive-active-color',
+        foregroundColor = '@foreground-interactive-color',
+        icon = null,
+        ...args
+    }) {
+        super({...args})
+
+        this._pushButtonParams = {
+            caption,
+            style,
+            backgroundColor,
+            backgroundActiveColor,
+            foregroundColor,
+            icon
+        }
+
+        if (onClick) {
+            this.onClick = onClick
+        }
+
+        this._buttonDiv = null
+    }
+
+    makeContent() {
+        this._buttonDiv = $('<div></div>', {class: 'qui-push-button-table-cell'}).pushbutton(this._pushButtonParams)
+        this._buttonDiv.on('click', () => this.onClick())
+
+        return this._buttonDiv
+    }
+
+    showValue(value) {
+    }
+
+    /**
+     * Update button style.
+     * @param {String} style
+     */
+    setStyle(style) {
+        this._widgetCall({style: style})
+    }
+
+    /**
+     * Update button caption.
+     * @param {String} caption
+     */
+    setCaption(caption) {
+        this._widgetCall({caption: caption})
+    }
+
+    /**
+     * Update background color.
+     * @param {String} color
+     */
+    setBackgroundColor(color) {
+        this._widgetCall({backgroundColor: color})
+    }
+
+    /**
+     * Update background active color.
+     * @param {String} color
+     */
+    setBackgroundActiveColor(color) {
+        this._widgetCall({backgroundActiveColor: color})
+    }
+
+    /**
+     * Update foreground color.
+     * @param {String} color
+     */
+    setForegroundColor(color) {
+        this._widgetCall({foregroundColor: color})
+    }
+
+    /**
+     * Update button icon.
+     * @param {?qui.icons.Icon} icon
+     */
+    setIcon(icon) {
+        this._widgetCall({icon: icon})
+    }
+
+    /**
+     * Set button enabled state.
+     * @param {Boolean} enabled
+     */
+    setEnabled(enabled) {
+        this._widgetCall({disabled: !enabled})
+    }
+
+    _widgetCall(params) {
+        return this._buttonDiv.pushbutton(params)
+    }
+
+}
+
+
+export default PushButtonTableCell

package/js/tables/common-cells/simple-table-cell.js

@@ -0,0 +1,37 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import TableCell from '../table-cell.js'
+
+
+/**
+ * A simple, textual table cell.
+ * @alias qui.tables.commoncells.SimpleTableCell
+ * @extends qui.tables.TableCell
+ */
+class SimpleTableCell extends TableCell {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        super(args)
+
+        this._element = null
+    }
+
+    makeContent() {
+        this._element = $('<span></span>', {class: 'qui-simple-table-cell-element'})
+
+        return this._element
+    }
+
+    showValue(value) {
+        this._element.html(value)
+    }
+
+}
+
+
+export default SimpleTableCell

package/js/tables/common-tables/common-tables.js

@@ -0,0 +1,5 @@
+/**
+ * @namespace qui.tables.commontables
+ */
+
+export {default as PageTable} from './page-table.js'

package/js/tables/common-tables/page-table.js

@@ -0,0 +1,55 @@
+
+import {mix}            from '$qui/base/mixwith.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import PageMixin        from '$qui/pages/page.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import Table from '../table.js'
+
+// TODO: PageTable shares a lot of code with PageList; common code could be generalized into a mixin;
+//       Maybe it could also be applied to PageForm.
+
+/**
+ * A table that can be used as a page.
+ * @alias qui.tables.commontables.PageTable
+ * @extends qui.tables.Table
+ * @mixes qui.pages.PageMixin
+ */
+class PageTable extends mix(Table).with(PageMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        ObjectUtils.setDefault(args, 'transparent', false)
+        ObjectUtils.setDefault(args, 'topless', true)
+
+        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)
+    }
+
+    handleVertScroll() {
+        super.handleVertScroll()
+        this._updateVertScroll()
+    }
+
+    _updateVertScroll() {
+        let params = this.getVertScrollParams()
+
+        /* Place progress widget in the viewport by pushing it down a bit */
+        this.getProgressWidget().css('margin-top', `${params.offset}px`)
+    }
+
+}
+
+
+export default PageTable