@qtoggle/qui 0.0.0

package/js/main-ui/main-ui.js

@@ -0,0 +1,64 @@
+/**
+ * @namespace qui.mainui
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import URL               from '$qui/utils/url.js'
+import VisibilityManager from '$qui/utils/visibility-manager.js'
+import * as Window       from '$qui/window.js'
+
+import * as MenuBar    from './menu-bar.js'
+import * as OptionsBar from './options-bar.js'
+import * as TopBar     from './top-bar.js'
+
+
+let mainContainer = null
+let mainContainerGlass = null
+let mainContainerGlassVisibilityManager = null
+
+let messageContainer = null
+
+
+function initMainContainer() {
+    mainContainer = $('<div></div>', {class: 'qui-main-container'})
+    mainContainer.append($('<div></div>', {class: 'qui-pages-container'}))
+
+    mainContainerGlass = $('<div></div>', {class: 'qui-main-container-glass', style: 'display: none;'})
+    mainContainerGlassVisibilityManager = new VisibilityManager({element: mainContainerGlass})
+    mainContainer.append(mainContainerGlass)
+
+    messageContainer = $('div.qui-toast-message-container')
+
+    /* Close menu and option bars when clicking on main container glass */
+    mainContainer.find('div.qui-main-container-glass').on('click', function () {
+        MenuBar.close()
+        OptionsBar.close()
+    })
+
+    Window.$body.append(mainContainer)
+}
+
+function adjustRelativeLinks() {
+    /* Set absolute paths on links before the window location changes */
+    $('link[rel=icon], link[rel=apple-touch-icon], link[theme]').each(function () {
+        this.href = URL.parse(this.href).toString()
+    })
+}
+
+export function showMainContainerGlass() {
+    mainContainerGlassVisibilityManager.showElement()
+}
+
+export function hideMainContainerGlass() {
+    mainContainerGlassVisibilityManager.hideElement()
+}
+
+export function init() {
+    initMainContainer()
+    adjustRelativeLinks()
+
+    TopBar.init()
+    MenuBar.init()
+    OptionsBar.init()
+}

package/js/main-ui/menu-bar.js

@@ -0,0 +1,144 @@
+/**
+ * @namespace qui.mainui.menubar
+ */
+
+import $      from '$qui/lib/jquery.module.js'
+import Logger from '$qui/lib/logger.module.js'
+
+import {gettext}     from '$qui/base/i18n.js'
+import StockIcon     from '$qui/icons/stock-icon.js'
+import * as Gestures from '$qui/utils/gestures.js'
+import * as Window   from '$qui/window.js'
+
+import * as MainUI     from './main-ui.js'
+import * as OptionsBar from './options-bar.js'
+import * as TopBar     from './top-bar.js'
+
+
+const logger = Logger.get('qui.mainui.menubar')
+
+
+let barHTML = null
+let menuButton = null
+let opened = false
+let transitionPromise = Promise.resolve()
+
+
+/**
+ * Return the menu bar HTML element.
+ * @returns {jQuery}
+ */
+export function getHTML() {
+    return barHTML
+}
+
+/**
+ * Tell if the menu bar is opened or not.
+ * @alias qui.mainui.menubar.isOpened
+ * @returns {Boolean}
+ */
+export function isOpened() {
+    return opened
+}
+
+/**
+ * Open the menu bar.
+ * @alias qui.mainui.menubar.open
+ */
+export function open() {
+    if (opened) {
+        return
+    }
+    if (OptionsBar.isOpened()) {
+        OptionsBar.close()
+    }
+
+    MainUI.showMainContainerGlass()
+
+    opened = true
+    logger.debug('menu bar opened')
+
+    transitionPromise = transitionPromise.then(function () {
+        menuButton.addClass('selected')
+        Window.$body.addClass('menu-bar-open')
+    })
+}
+
+/**
+ * Close the menu bar.
+ * @alias qui.mainui.menubar.close
+ */
+export function close() {
+    if (!opened) {
+        return
+    }
+
+    MainUI.hideMainContainerGlass()
+
+    opened = false
+    logger.debug('menu bar closed')
+
+    transitionPromise = transitionPromise.then(function () {
+        menuButton.removeClass('selected')
+        Window.$body.removeClass('menu-bar-open')
+    })
+}
+
+/**
+ * Add a button to the menu bar.
+ * @alias qui.mainui.menubar.addButton
+ * @param {jQuery} button the button to add
+ */
+export function addButton(button) {
+    button.addClass('qui-menu-bar-button')
+    barHTML.append(button)
+}
+
+export function init() {
+    barHTML = $('<div></div>', {class: 'qui-menu-bar'})
+    menuButton = TopBar.getHTML().find('div.qui-menu-button')
+    let variant = Window.isSmallScreen() ? 'white' : 'interactive'
+    new StockIcon({name: 'menu', variant: variant}).applyTo(menuButton.find('.qui-icon'))
+
+    menuButton.attr('title', gettext('Menu'))
+    menuButton.on('click', function () {
+        if (opened) {
+            close()
+        }
+        else {
+            open()
+        }
+    })
+
+    Gestures.enableDragging(
+        barHTML,
+        /* onMove = */ function (elemX, elemY, deltaX, deltaY, pageX, pageY) {
+            if (deltaX > 0) {
+                return
+            }
+            barHTML.css('transition', 'none')
+            barHTML.css('left', elemX)
+        },
+        /* onBegin = */ function () {
+            /* Allow closing the menu bar with touch drag, but only on small screens */
+            if (!Window.isSmallScreen()) {
+                return false
+            }
+        },
+        /* onEnd = */ function (elemX, elemY, deltaX, deltaY, pageX, pageY) {
+            barHTML.css('transition', '')
+            barHTML.css('left', '')
+
+            if (deltaX < 0 && Math.abs(deltaX) > barHTML.width() / 2) {
+                close()
+            }
+        }
+    )
+
+    /* Automatically update menu icon according to small screen state */
+    Window.screenLayoutChangeSignal.connect(function (smallScreen, landscape) {
+        StockIcon.alterElement(menuButton.find('div.qui-icon'), {variant: smallScreen ? 'white' : 'interactive'})
+    })
+
+    Window.$body.append(barHTML)
+}

package/js/main-ui/options-bar.js

@@ -0,0 +1,181 @@
+/**
+ * @namespace qui.mainui.optionsbar
+ */
+
+import $      from '$qui/lib/jquery.module.js'
+import Logger from '$qui/lib/logger.module.js'
+
+import {gettext}         from '$qui/base/i18n.js'
+import Signal            from '$qui/base/signal.js'
+import StockIcon         from '$qui/icons/stock-icon.js'
+import * as Theme        from '$qui/theme.js'
+import * as Gestures     from '$qui/utils/gestures.js'
+import {asap}            from '$qui/utils/misc.js'
+import * as PromiseUtils from '$qui/utils/promise.js'
+import * as Window       from '$qui/window.js'
+
+import * as MainUI  from './main-ui.js'
+import * as MenuBar from './menu-bar.js'
+import * as TopBar  from './top-bar.js'
+
+
+const logger = Logger.get('qui.mainui.optionsbar')
+
+
+let barHTML = null
+let barContainer = null
+let optionsButton = null
+let updateHandle = null
+let opened = false
+let transitionPromise = Promise.resolve()
+
+/**
+ * Emitted whenever the options bar is opened or closed. Handlers are called with the following parameters:
+ *  * `opened: Boolean`, the opened status
+ * @alias qui.mainui.optionsbar.openCloseSignal
+ */
+export const openCloseSignal = new Signal(barHTML)
+
+
+/**
+ * Tell if the options bar is opened or not.
+ * @alias qui.mainui.optionsbar.isOpened
+ * @returns {Boolean}
+ */
+export function isOpened() {
+    return opened
+}
+
+/**
+ * Open the options bar.
+ * @alias qui.mainui.optionsbar.open
+ */
+export function open() {
+    if (opened) {
+        return
+    }
+    if (MenuBar.isOpened()) {
+        MenuBar.close()
+    }
+
+    MainUI.showMainContainerGlass()
+
+    opened = true
+    logger.debug('options bar opened')
+    openCloseSignal.emit(true)
+
+    transitionPromise = transitionPromise.then(function () {
+        barHTML.css('display', '')
+        optionsButton.addClass('selected')
+        return PromiseUtils.asap().then(function () {
+            Window.$body.addClass('options-bar-open')
+        })
+    })
+}
+
+/**
+ * Close the options bar.
+ * @alias qui.mainui.optionsbar.close
+ */
+export function close() {
+    if (!opened) {
+        return
+    }
+
+    MainUI.hideMainContainerGlass()
+
+    opened = false
+    logger.debug('options bar closed')
+    openCloseSignal.emit(false)
+
+    transitionPromise = transitionPromise.then(function () {
+        Window.$body.removeClass('options-bar-open')
+        optionsButton.removeClass('selected')
+
+        return PromiseUtils.later(Theme.getTransitionDuration()).then(function () {
+            barHTML.css('display', 'none')
+        })
+    })
+}
+
+/**
+ * Set the content of the options bar.
+ * @alias qui.mainui.optionsbar.setContent
+ * @param {?jQuery} content the new options bar content; `null` closes/disables the options bar
+ */
+export function setContent(content) {
+    if (updateHandle) {
+        clearTimeout(updateHandle)
+    }
+
+    barHTML.addClass('updating')
+    updateHandle = asap(function () {
+        updateHandle = null
+
+        barContainer.children().detach()
+
+        if (content) {
+            /* Using detach + append prevents triggering remove/destroy on widgets */
+            barContainer.append(content)
+            optionsButton.removeClass('hidden')
+        }
+        else {
+            optionsButton.addClass('hidden')
+            close()
+        }
+
+        barHTML.removeClass('updating')
+    })
+}
+
+export function init() {
+    barHTML = $('<div></div>', {class: 'qui-options-bar'})
+    barHTML.append($('<div></div>', {class: 'qui-options-bar-container'}))
+
+    barContainer = barHTML.find('div.qui-options-bar-container')
+    optionsButton = TopBar.getHTML().find('div.qui-options-button')
+    let variant = Window.isSmallScreen() ? 'white' : 'interactive'
+    new StockIcon({name: 'options', variant: variant}).applyTo(optionsButton.find('.qui-icon'))
+
+    optionsButton.attr('title', gettext('Options'))
+    optionsButton.on('click', function () {
+        if (isOpened()) {
+            close()
+        }
+        else {
+            open()
+        }
+    })
+
+    Gestures.enableDragging(
+        barHTML,
+        /* onMove = */ function (elemX, elemY, deltaX, deltaY, pageX, pageY) {
+            if (deltaX < 0) {
+                return
+            }
+            barHTML.css('transition', 'none')
+            barHTML.css('right', -deltaX)
+        },
+        /* onBegin = */ function () {
+            /* Allow closing the options bar with touch drag, but only on small screens */
+            if (!Window.isSmallScreen()) {
+                return false
+            }
+        },
+        /* onEnd = */ function (elemX, elemY, deltaX, deltaY, pageX, pageY) {
+            barHTML.css('transition', '')
+            barHTML.css('right', '')
+
+            if (deltaX > 0 && deltaX > barHTML.width() / 2) {
+                close()
+            }
+        }
+    )
+
+    /* Automatically update options icon according to small screen state */
+    Window.screenLayoutChangeSignal.connect(function (smallScreen, landscape) {
+        StockIcon.alterElement(optionsButton.find('div.qui-icon'), {variant: smallScreen ? 'white' : 'interactive'})
+    })
+
+    Window.$body.append(barHTML)
+}

package/js/main-ui/status.js

@@ -0,0 +1,185 @@
+/**
+ * @namespace qui.mainui.status
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import StockIcon         from '$qui/icons/stock-icon.js'
+import * as Icons        from '$qui/icons/icons.js'
+import * as Toast        from '$qui/messages/toast.js'
+import * as Theme        from '$qui/theme.js'
+import VisibilityManager from '$qui/utils/visibility-manager.js'
+import * as Window       from '$qui/window.js'
+
+
+const STATUS_LOCK_TIMEOUT = 500
+
+/**
+ * @alias qui.mainui.status.STATUS_OK
+ */
+export const STATUS_OK = 'ok'
+
+/**
+ * @alias qui.mainui.status.STATUS_INFO
+ */
+export const STATUS_INFO = 'info'
+
+/**
+ * @alias qui.mainui.status.STATUS_WARNING
+ */
+export const STATUS_WARNING = 'warning'
+
+/**
+ * @alias qui.mainui.status.STATUS_ERROR
+ */
+export const STATUS_ERROR = 'error'
+
+/**
+ * @alias qui.mainui.status.STATUS_SYNC
+ */
+export const STATUS_SYNC = 'sync'
+
+
+let statusIndicator = null
+let pendingStatusParams = null
+let statusLockTimeoutHandle = null
+let statusIndicatorVisibilityManager = null
+let lastStatus = null
+let lastMessage = null
+
+
+/**
+ * Update the status indicator.
+ * @alias qui.mainui.status.set
+ * @param {String} status one of the following statuses:
+ *  * {@link qui.mainui.status.STATUS_INFO}
+ *  * {@link qui.mainui.status.STATUS_WARNING}
+ *  * {@link qui.mainui.status.STATUS_ERROR}
+ *  * {@link qui.mainui.status.STATUS_SYNC}
+ *  * {@link qui.mainui.status.STATUS_OK}
+ * @param {String} [message] an optional status message
+ */
+export function set(status, message = null) {
+    if (statusLockTimeoutHandle) {
+        pendingStatusParams = {status, message}
+        return
+    }
+
+    lastStatus = status
+    lastMessage = message
+
+    if (status === 'ok') {
+        statusIndicatorVisibilityManager.hideElement()
+    }
+    else {
+        statusIndicatorVisibilityManager.showElement()
+        /* Keep status locked for STATUS_LOCK_TIMEOUT milliseconds, unless "ok" */
+        statusLockTimeoutHandle = setTimeout(function () {
+
+            statusLockTimeoutHandle = null
+            if (pendingStatusParams) {
+                set(pendingStatusParams.status, pendingStatusParams.message)
+                pendingStatusParams = null
+            }
+
+        }, STATUS_LOCK_TIMEOUT)
+    }
+
+    let type = status
+    let iconName = null
+    let decoration = status
+    let animation = null
+
+    switch (status) {
+        case STATUS_INFO: {
+            iconName = 'info'
+            break
+        }
+
+        case STATUS_WARNING: {
+            iconName = 'exclam'
+            break
+        }
+
+        case STATUS_ERROR: {
+            iconName = 'exclam'
+            break
+        }
+
+        case STATUS_SYNC: {
+            type = 'info'
+            decoration = null
+            iconName = 'sync'
+            animation = Icons.ANIMATION_SPIN
+            break
+        }
+
+        case STATUS_OK: {
+            type = 'info'
+            decoration = 'info'
+            iconName = 'check'
+            break
+        }
+    }
+
+    if (iconName) {
+        if (decoration === 'info') {
+            decoration = null
+        }
+        else {
+            decoration = Theme.getVar(`${decoration}-color`)
+        }
+
+        let variant = 'foreground'
+        if (Window.isSmallScreen()) {
+            /* On small screens, we always want white icons on top bar */
+            variant = 'white'
+        }
+        else if (message) {
+            variant = 'interactive'
+        }
+
+        new StockIcon({
+            name: iconName,
+            decoration: decoration,
+            variant: variant,
+            animation: animation
+        }).applyTo(statusIndicator.find('.qui-icon'))
+    }
+
+    if (message) {
+        statusIndicator.attr('data-message', message)
+        statusIndicator.attr('data-type', type)
+    }
+    else {
+        statusIndicator.attr('data-message', '')
+        statusIndicator.attr('data-type', type)
+    }
+}
+
+
+export function init() {
+    statusIndicator = $('div.qui-top-bar div.qui-status-indicator')
+    statusIndicator.on('click', function () {
+        let message = statusIndicator.attr('data-message')
+        if (!message) {
+            return
+        }
+
+        let type = statusIndicator.attr('data-type')
+
+        Toast.show({message, type})
+    })
+
+    statusIndicatorVisibilityManager = new VisibilityManager({element: statusIndicator})
+
+    Window.screenLayoutChangeSignal.connect(function () {
+        set(lastStatus, lastMessage)
+    })
+
+    Theme.changeSignal.connect(function () {
+        set(lastStatus, lastMessage)
+    })
+
+    set(STATUS_OK)
+}

package/js/main-ui/top-bar.js

@@ -0,0 +1,59 @@
+/**
+ * @namespace qui.mainui.topbar
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Window from '$qui/window.js'
+
+
+let barHTML = null
+
+
+/**
+ * Return the top bar HTML element.
+ * @returns {jQuery}
+ */
+export function getHTML() {
+    return barHTML
+}
+
+/**
+ * Add a button to the top bar.
+ * @alias qui.mainui.topbar.addButton
+ * @param {jQuery} button the button to add
+ */
+export function addButton(button) {
+    button.addClass('qui-top-button')
+    $('div.qui-status-indicator').before(button)
+}
+
+/**
+ * Set or clear the top bar title.
+ * @alias qui.mainui.topbar.setTitle
+ * @param {?String} title
+ */
+export function setTitle(title) {
+    barHTML.children('div.qui-top-bar-title-container').html(title || '')
+}
+
+export function init() {
+    barHTML = $('<div></div>', {class: 'qui-top-bar'})
+
+    let menuButton = $('<div></div>', {class: 'qui-base-button qui-top-button qui-menu-button'})
+    menuButton.append($('<div></div>', {class: 'qui-icon'}))
+    barHTML.append(menuButton)
+
+    barHTML.append($('<div></div>', {class: 'qui-breadcrumbs-container'}))
+    barHTML.append($('<div></div>', {class: 'qui-top-bar-title-container'}))
+
+    let optionsButton = $('<div></div>', {class: 'qui-base-button qui-top-button qui-options-button hidden'})
+    optionsButton.append($('<div></div>', {class: 'qui-icon'}))
+    barHTML.append(optionsButton)
+
+    let statusIndicator = $('<div></div>', {class: 'qui-base-button qui-top-button qui-status-indicator'})
+    statusIndicator.append($('<div></div>', {class: 'qui-icon'}))
+    barHTML.append(statusIndicator)
+
+    Window.$body.append(barHTML)
+}

package/js/messages/common-message-forms/common-message-forms.js

@@ -0,0 +1,7 @@
+/**
+ * @namespace qui.messages.commonmessageforms
+ */
+
+export {default as SimpleMessageForm}       from './simple-message-form.js'
+export {default as ConfirmMessageForm}      from './confirm-message-form.js'
+export {default as StickySimpleMessageForm} from './sticky-simple-message-form.js'