@qtoggle/qui 0.0.0

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

@@ -0,0 +1,81 @@
+
+import {gettext}        from '$qui/base/i18n.js'
+import FormButton       from '$qui/forms/form-button.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import {asap}           from '$qui/utils/misc.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import MessageForm from '../message-form.js'
+
+
+/**
+ * A message form asking the user for confirmation.
+ * @alias qui.messages.commonmessageforms.ConfirmMessageForm
+ * @extends qui.messages.MessageForm
+ */
+class ConfirmMessageForm extends MessageForm {
+
+    /**
+     * @constructs
+     * @param {qui.messages.MessageForm.Callback} [onYes] an optional confirmation callback
+     * @param {qui.messages.MessageForm.Callback} [onNo] an optional decline callback
+     * @param {...*} args parent class parameters
+     */
+    constructor({onYes = null, onNo = null, ...args}) {
+        ObjectUtils.assignDefault(args, {
+            icon: new StockIcon({name: 'qmark'}),
+            buttons: [
+                new FormButton({id: 'no', caption: gettext('No'), cancel: true}),
+                new FormButton({id: 'yes', caption: gettext('Yes'), def: true})
+            ]
+        })
+
+        super(args)
+
+        this._onYes = onYes
+        this._onNo = onNo
+
+        this._resolve = null
+        this._reject = null
+
+        this._confirmed = false
+    }
+
+    applyData() {
+        this._confirmed = true
+    }
+
+    onClose() {
+        if (this._confirmed) {
+            if (this._onYes) {
+                asap(this._onYes)
+            }
+            if (this._resolve) {
+                asap(this._resolve)
+            }
+        }
+        else {
+            if (this._onNo) {
+                asap(this._onNo)
+            }
+            if (this._reject) {
+                asap(this._reject)
+            }
+        }
+    }
+
+    /**
+     * Return a promise resolves on positive answer and is rejected on negative answer.
+     * @returns {Promise}
+     */
+    asPromise() {
+        return new Promise(function (resolve, reject) {
+            this._resolve = resolve
+            this._reject = reject
+        }.bind(this))
+    }
+
+}
+
+
+export default ConfirmMessageForm

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

@@ -0,0 +1,67 @@
+
+import {gettext}        from '$qui/base/i18n.js'
+import FormButton       from '$qui/forms/form-button.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import {asap}           from '$qui/utils/misc.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import MessageForm from '../message-form.js'
+
+
+/**
+ * A simple message form.
+ * @alias qui.messages.commonmessageforms.SimpleMessageForm
+ * @extends qui.messages.MessageForm
+ */
+class SimpleMessageForm extends MessageForm {
+
+    /**
+     * @constructs
+     * @param {String} type message type (`"info"`, `"warning"` or `"error"`)
+     * @param {String} [buttonCaption] optional button caption (defaults to `"OK"`)
+     * @param {qui.messages.MessageForm.Callback} [onClose] a dismiss callback
+     * @param {...*} args parent class parameters
+     */
+    constructor({type, buttonCaption = gettext('OK'), onClose = null, ...args}) {
+        let variant = null
+        let iconName = null
+        switch (type) {
+            case 'info':
+                variant = 'foreground'
+                iconName = 'info'
+                break
+
+            case 'warning':
+                variant = 'warning'
+                iconName = 'exclam'
+                break
+
+            case 'error':
+                variant = 'error'
+                iconName = 'exclam'
+                break
+        }
+
+        if (iconName && variant && args.icon == null) {
+            args.icon = new StockIcon({name: iconName, variant: variant})
+        }
+
+        ObjectUtils.setDefault(args, 'buttons', [
+            new FormButton({id: 'ok', caption: buttonCaption, def: true, style: 'interactive'})
+        ])
+
+        super(args)
+
+        this._onClose = onClose
+    }
+
+    onClose() {
+        if (this._onClose) {
+            asap(this._onClose)
+        }
+    }
+
+}
+
+
+export default SimpleMessageForm

package/js/messages/common-message-forms/sticky-simple-message-form.js

@@ -0,0 +1,27 @@
+
+import {mix} from '$qui/base/mixwith.js'
+
+import SimpleMessageForm    from './simple-message-form.js'
+import StickyModalPageMixin from '../sticky-modal-page.js'
+
+
+/**
+ * A sticky modal variant of {@link qui.messages.commonmessageforms.SimpleMessageForm}.
+ * @alias qui.messages.commonmessageforms.StickySimpleMessageForm
+ * @extends qui.messages.commonmessageforms.SimpleMessageForm
+ * @mixes qui.messages.StickyModalPageMixin
+ */
+class StickySimpleMessageForm extends mix(SimpleMessageForm).with(StickyModalPageMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args}) {
+        super(args)
+    }
+
+}
+
+
+export default StickySimpleMessageForm

package/js/messages/message-form.js

@@ -0,0 +1,107 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {AssertionError} from '$qui/base/errors.js'
+import {PageForm}       from '$qui/forms/common-forms/common-forms.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import * as Sections    from '$qui/sections/sections.js'
+import {asap}           from '$qui/utils/misc.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+
+/**
+ * Message form callback.
+ * @callback qui.messages.MessageForm.Callback
+ * @param {*} result
+ */
+
+/**
+ * A base class for message forms.
+ * @alias qui.messages.MessageForm
+ * @extends qui.forms.commonforms.PageForm
+ */
+class MessageForm extends PageForm {
+
+    /**
+     * @constructs
+     * @param {String} message the message
+     * @param {qui.icons.Icon} [icon] an optional icon
+     * @param {...*} args parent class parameters
+     */
+    constructor({message, icon = null, ...args}) {
+        ObjectUtils.assignDefault(args, {
+            popup: true,
+            transparent: true,
+            topless: true,
+            width: '30em',
+            valuesWidth: 100,
+            title: args.message
+        })
+
+        super(args)
+
+        this._message = message
+        this._icon = icon
+    }
+
+    makeBody() {
+        return super.makeBody().append(this.makeMessageBody())
+    }
+
+    /**
+     * Override this to indicate how the message body is built.
+     * @returns {jQuery}
+     */
+    makeMessageBody() {
+        let bodyDiv = $('<div></div>', {class: 'qui-message-form-body'})
+        let labelSpan = $('<div></div>', {class: 'qui-message-form-label'})
+
+        labelSpan.html(this._message)
+
+        if (this._icon) {
+            let iconDiv = $('<div></div>', {class: 'qui-icon qui-message-form-icon'})
+            let icon = this._icon
+            if (icon instanceof StockIcon) {
+                icon = icon.alterDefault({variant: 'foreground'})
+            }
+            icon.applyTo(iconDiv)
+            bodyDiv.append(iconDiv)
+        }
+
+        bodyDiv.append(labelSpan)
+
+        return bodyDiv
+    }
+
+    handleBecomeCurrent() {
+        super.handleBecomeCurrent()
+
+        /* Focus the default button */
+        asap(function () {
+            let button = this.getButtons().find(b => b.isDefault())
+            if (button) {
+                button.focus()
+            }
+        }.bind(this))
+    }
+
+    /**
+     * Show the message form by pushing it onto the current section context.
+     * @returns {qui.messages.MessageForm} this form
+     */
+
+    show() {
+        let currentSection = Sections.getCurrent()
+        if (!currentSection) {
+            throw new AssertionError('Attempt to show message form while no current section')
+        }
+
+        currentSection.pushPage(this)
+
+        return this
+    }
+
+}
+
+
+export default MessageForm

package/js/messages/messages.js

@@ -0,0 +1,21 @@
+/**
+ * @namespace qui.messages
+ */
+
+import * as Toast from './toast.js'
+
+
+/**
+ * Wrap a text into label markup.
+ * @alias qui.messages.wrapLabel
+ * @param {String} text the text to wrap
+ * @returns {String} the label
+ */
+export function wrapLabel(text) {
+    return `<span class="qui-message-label">${text}</span>`
+}
+
+
+export function init() {
+    Toast.init()
+}

package/js/messages/sticky-modal-page.js

@@ -0,0 +1,98 @@
+
+import {Mixin}          from '$qui/base/mixwith.js'
+import * as GlobalGlass from '$qui/global-glass.js'
+
+
+/** @lends qui.messages.StickyModalPageMixin */
+const StickyModalPageMixin = Mixin((superclass = Object) => {
+
+    /**
+     * A mixin for pages that are stuck to the global glass until explicitly removed.
+     * @alias qui.messages.StickyModalPageMixin
+     * @mixin
+     */
+    class StickyModalPageMixin extends superclass {
+
+        /**
+         * @constructs
+         * @param {...*} args parent class parameters
+         */
+        constructor({...args} = {}) {
+            super(args)
+
+            this._showCount = 0
+        }
+
+        initPageHTML(html) {
+            super.initPageHTML(html)
+            html.addClass('sticky')
+        }
+
+        close() {
+            /* Call the hide method instead of page's close */
+            this.hide()
+            this.onClose()
+        }
+
+        /**
+         * Override this method to indicate how the page is reset to its initial state, as soon as it is shown.
+         */
+        reset() {
+        }
+
+        /**
+         * Show this page.
+         *
+         * This is a reentrant method.
+         *
+         * @returns {qui.messages.StickyModalPageMixin} this page
+         */
+        show() {
+            if (this._showCount === 0) {
+                this.attach()
+                this.getPageHTML().addClass('visible')
+                GlobalGlass.updateVisibility()
+
+                this.handleBecomeCurrent()
+            }
+
+            this._showCount++
+            this.reset()
+
+            return this
+        }
+
+        /**
+         * Hide a previously shown page.
+         *
+         * This method should be called as many times as its counterpart {@link qui.messages.StickyModalPageMixin#show}
+         * method has been called, before it actually hides the page.
+         */
+        hide() {
+            this._showCount--
+
+            if (this._showCount === 0) {
+                this.detach()
+                this.getPageHTML().removeClass('visible')
+                GlobalGlass.updateVisibility()
+
+                this.handleLeaveCurrent()
+            }
+        }
+
+        handleBecomeCurrent() {
+            this.onBecomeCurrent()
+        }
+
+        handleLeaveCurrent() {
+            this.onLeaveCurrent()
+        }
+
+    }
+
+    return StickyModalPageMixin
+
+})
+
+
+export default StickyModalPageMixin

package/js/messages/sticky-modal-progress-message.js

@@ -0,0 +1,27 @@
+
+import {mix}               from '$qui/base/mixwith.js'
+import {ModalProgressPage} from '$qui/pages/common-pages/common-pages.js'
+
+import StickyModalPageMixin from './sticky-modal-page.js'
+
+
+/**
+ * A sticky modal progress page.
+ * @alias qui.messages.StickyModalProgressMessage
+ * @extends qui.pages.commonpages.ModalProgressPage
+ * @mixes qui.messages.StickyModalPageMixin
+ */
+class StickyModalProgressMessage extends mix(ModalProgressPage).with(StickyModalPageMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        super(args)
+    }
+
+}
+
+
+export default StickyModalProgressMessage

package/js/messages/toast.js

@@ -0,0 +1,164 @@
+/**
+ * @namespace qui.messages.toast
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import StockIcon   from '$qui/icons/stock-icon.js'
+import * as Theme  from '$qui/theme.js'
+import {asap}      from '$qui/utils/misc.js'
+import * as Window from '$qui/window.js'
+
+
+const TOAST_MESSAGE_TIMEOUT = 5000 /* 5 seconds */
+
+let toastMessageTimeoutHandle = null
+let toastMessageContainer = null
+let toastMessageShowingTimeoutHandle = null
+
+
+/**
+ * Show a toast message for a limited period of time.
+ * @alias qui.messages.toast.show
+ * @param {?String|jQuery} message the message to show
+ * @param {?String} type message type (`"info"`, `"warning"` or `"error"`)
+ * @param {Number} [timeout] the message display timeout, in milliseconds (defaults to 5 seconds)
+ * @param {Boolean} [closeable] whether the message can be closed by the user (defaults to `true`)
+ */
+export function show({message, type, timeout = TOAST_MESSAGE_TIMEOUT, closeable = true}) {
+    let messageSpan = toastMessageContainer.find('span.qui-toast-message')
+
+    if (toastMessageTimeoutHandle) {
+        clearTimeout(toastMessageTimeoutHandle)
+        toastMessageTimeoutHandle = null
+    }
+
+    if (message) {
+        Window.$body.addClass('toast-message-visible')
+        toastMessageContainer.removeClass('info warning error multiline closeable')
+
+        messageSpan.html(message)
+        if (type) {
+            toastMessageContainer.addClass(type)
+        }
+
+        /* Test if the message wraps */
+        let normalHeight = messageSpan.height()
+        toastMessageContainer.find('div.qui-toast-message').css('white-space', 'normal')
+        let wrappedHeight = messageSpan.height()
+        toastMessageContainer.find('div.qui-toast-message').css('white-space', '')
+
+        if (normalHeight < wrappedHeight) {
+            toastMessageContainer.addClass('multiline')
+        }
+
+        if (timeout !== 0) {
+            toastMessageTimeoutHandle = setTimeout(function () {
+                show({message: null, type: 'info'})
+            }, timeout)
+        }
+
+        if (closeable !== false) {
+            toastMessageContainer.addClass('closeable')
+        }
+
+        /* Showing flag timeout */
+        if (toastMessageShowingTimeoutHandle) {
+            clearTimeout(toastMessageShowingTimeoutHandle)
+        }
+
+        toastMessageShowingTimeoutHandle = asap(function () {
+            toastMessageShowingTimeoutHandle = null
+        })
+    }
+    else if (Window.$body.hasClass('toast-message-visible')) { /* Hide */
+        Window.$body.removeClass('toast-message-visible')
+        Theme.afterTransition(function () {
+            if (Window.$body.hasClass('toast-message-visible')) {
+                return /* Reshown in the meantime */
+            }
+
+            messageSpan.html('')
+            toastMessageContainer.removeClass('info warning error multiline')
+        })
+    }
+}
+
+/**
+ * Hide a currently displayed toast message.
+ * @alias qui.messages.toast.hide
+ */
+export function hide() {
+    show({message: null, type: 'info'})
+}
+
+/**
+ * Convenience function for {@link qui.messages.toast.show} with default timeout and type `"info"`.
+ * @alias qui.messages.toast.info
+ * @param {String|jQuery} message the message to show
+ */
+export function info(message) {
+    show({message: message, type: 'info'})
+}
+
+/**
+ * Convenience function for {@link qui.messages.toast.show} with default timeout and type `"warning"`.
+ * @alias qui.messages.toast.warning
+ * @param {String|jQuery} message the message to show
+ */
+export function warning(message) {
+    show({message: message, type: 'warning'})
+}
+
+/**
+ * Convenience function for {@link qui.messages.toast.show} with default timeout and type `"error"`.
+ * @alias qui.messages.toast.error
+ * @param {String|jQuery} message the message to show
+ */
+export function error(message) {
+    show({message: message, type: 'error'})
+}
+
+
+export function init() {
+    toastMessageContainer = $('<div></div>', {class: 'qui-toast-message-container'})
+    toastMessageContainer.append($('<div></div>', {class: 'qui-toast-message-icon'}))
+
+    let messageDiv = $('<div></div>', {class: 'qui-toast-message'})
+    messageDiv.append($('<span></span>', {class: 'qui-toast-message'}))
+    messageDiv.append($('<div></div>', {class: 'qui-base-button qui-toast-message-close-button'}))
+    toastMessageContainer.append(messageDiv)
+
+    Window.$body.append(toastMessageContainer)
+
+    /* Close button */
+    let closeButton = toastMessageContainer.find('div.qui-toast-message-close-button')
+    new StockIcon({
+        name: 'close', variant: 'interactive', activeVariant: 'interactive-active'
+    }).alter({scale: 0.75}).applyTo(closeButton)
+
+    closeButton.on('click', function () {
+        show({message: null, type: null})
+    })
+
+    /* Close when clicked anywhere */
+    Window.$body.on('click', function (e) {
+        if (toastMessageShowingTimeoutHandle) {
+            return /* Showing is in progress */
+        }
+
+        if (!Window.$body.hasClass('toast-message-visible')) {
+            return /* Message not visible */
+        }
+
+        if (!toastMessageContainer.hasClass('closeable')) {
+            return /* Message not closeable */
+        }
+
+        if (toastMessageContainer.has(e.target).length) {
+            return /* Clicked on the message container itself */
+        }
+
+        show({message: null, type: null})
+    })
+}