@qtoggle/qui 0.0.0

package/js/forms/common-fields/up-down-field.js

@@ -0,0 +1,85 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A field backed by an up-down (spinner) widget. The value data type is `Number`.
+ * @alias qui.forms.commonfields.UpDownField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class UpDownField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'updown'
+
+
+    // TODO add setters and getters for widget properties
+
+    /**
+     * @constructs
+     * @param {Number} [min] the minimum value (defaults to `0`)
+     * @param {Number} [max] the maximum value (defaults to `100`)
+     * @param {Number} [step] the step value (defaults to `1`)
+     * @param {Number} [fastFactor] determines the increment value when in fast mode (defaults to `10`)
+     * @param {Number} [decimals] the number of decimals to display (defaults to `0`)
+     * @param {Boolean} [continuousChange] set to `false` to prevent triggering `change` events with each value
+     * modification when losing focus
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        min = 0,
+        max = 100,
+        step = 1,
+        fastFactor = 10,
+        decimals = 0,
+        continuousChange = true,
+        ...args
+    }) {
+        super({
+            widgetAttrs: {
+                min: min,
+                max: max,
+                step: step,
+                fastFactor: fastFactor,
+                decimals: decimals,
+                continuousChange: continuousChange
+            },
+            ...args
+        })
+    }
+
+    /**
+     * Return the minimum value.
+     * @returns {Number}
+     */
+    getMin() {
+        return this._widgetCall('option', 'min')
+    }
+
+    /**
+     * Update the minimum value.
+     * @param {Number} min
+     */
+    setMin(min) {
+        this._widgetCall('option', {min: min})
+    }
+
+    /**
+     * Return the maximum value.
+     * @returns {Number}
+     */
+    getMax() {
+        return this._widgetCall('option', 'max')
+    }
+
+    /**
+     * Update the maximum value.
+     * @param {Number} max
+     */
+    setMax(max) {
+        this._widgetCall('option', {max: max})
+    }
+
+}
+
+
+export default UpDownField

package/js/forms/common-forms/common-forms.js

@@ -0,0 +1,16 @@
+/**
+ * @namespace qui.forms.commonforms
+ */
+
+import OptionsForm from './options-form.js'
+import PageForm    from './page-form.js'
+
+
+export {default as OptionsForm} from './options-form.js'
+export {default as PageForm}    from './page-form.js'
+
+
+export function init() {
+    OptionsForm.init()
+    PageForm.init()
+}

package/js/forms/common-forms/options-form.js

@@ -0,0 +1,77 @@
+
+import * as OptionsBar  from '$qui/main-ui/options-bar.js'
+import {getCurrentPage} from '$qui/pages/pages.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import Form from '../form.js'
+
+
+/**
+ * A form ready to be used with {@link qui.pages.PageMixin#makeOptionsBarContent}.
+ * @alias qui.forms.commonforms.OptionsForm
+ * @extends qui.forms.Form
+ */
+class OptionsForm extends Form {
+
+    /**
+     * @constructs
+     * @param {qui.pages.PageMixin} page the page associated to this options form
+     * @param {...*} args parent class parameters
+     */
+    constructor({page, ...args}) {
+        ObjectUtils.assignDefault(args, {
+            compact: true,
+            width: 'auto',
+            largeTop: false,
+            noBackground: true,
+            topless: true,
+            continuousValidation: true
+        })
+
+        super(args)
+
+        this._page = page
+    }
+
+    onChangeValid(data, fieldName) {
+        this._page.onOptionsChange(data)
+    }
+
+    /**
+     * Called when the options bar is opened or closed with this form.
+     * @param {Boolean} opened `true` if opened, `false` otherwise
+     */
+    onOptionsBarOpenClose(opened) {
+    }
+
+    proceed() {
+        /* Options form has no proceed implementation by default. It makes use of the continuous validation */
+    }
+
+    /**
+     * Return the associated page
+     * @returns {qui.pages.PageMixin}
+     */
+    getPage() {
+        return this._page
+    }
+
+    static init() {
+        OptionsBar.openCloseSignal.connect(function (opened) {
+            let currentPage = getCurrentPage()
+            if (!currentPage) {
+                return
+            }
+
+            /* If OptionsForm class has been used for current options bar content, call a handler */
+            let optionsBarContent = currentPage.getOptionsBarContent()
+            if (optionsBarContent instanceof OptionsForm) {
+                optionsBarContent.onOptionsBarOpenClose(opened)
+            }
+        })
+    }
+
+}
+
+
+export default OptionsForm

package/js/forms/common-forms/page-form.js

@@ -0,0 +1,115 @@
+
+import {gettext}        from '$qui/base/i18n.js'
+import {mix}            from '$qui/base/mixwith.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import PageMixin        from '$qui/pages/page.js'
+import * as Sections    from '$qui/sections/sections.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+import * as Window      from '$qui/window.js'
+
+import Form from '../form.js'
+
+
+/**
+ * A form that can be used as a page.
+ * @alias qui.forms.commonforms.PageForm
+ * @extends qui.forms.Form
+ * @mixes qui.pages.PageMixin
+ */
+class PageForm extends mix(Form).with(PageMixin) {
+
+    /**
+     * @constructs
+     * @param {Boolean} [preventUnappliedClose] if set to `true`, the form will try to prevent losing unapplied data
+     * when closed, by asking the user for confirmation
+     * @param {...*} args parent class parameters
+     */
+    constructor({preventUnappliedClose = false, ...args} = {}) {
+        ObjectUtils.setDefault(args, 'transparent', !Window.isSmallScreen())
+        super(args)
+
+        this._preventUnappliedClose = preventUnappliedClose
+    }
+
+    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)
+    }
+
+    canClose() {
+        if (!this._preventUnappliedClose) {
+            return super.canClose()
+        }
+
+        let changedFields = this.getChangedFieldNames()
+        if (!changedFields.length) {
+            return super.canClose()
+        }
+
+        /* Dynamically import common-message-forms.js here, because it depends itself on PageForm */
+        return import('$qui/messages/common-message-forms/common-message-forms.js').then(function (CommonMessageForms) {
+            let message = gettext('Discard changes?')
+            return new CommonMessageForms.ConfirmMessageForm({message: message}).show().asPromise()
+        })
+    }
+
+    handleBecomeCurrent() {
+        super.handleBecomeCurrent()
+        this._updateVertScroll()
+    }
+
+    handleVertScroll() {
+        super.handleVertScroll()
+        this._updateVertScroll()
+    }
+
+    handleResize() {
+        super.handleResize()
+        this._updateVertScroll()
+    }
+
+    _updateVertScroll() {
+        let params = this.getVertScrollParams()
+        let fixedBottom = (params.maxOffset > 0) && Window.isSmallScreen()
+        let fullyScrolled = (params.maxOffset - params.offset <= 1) && Window.isSmallScreen()
+
+        /* Place progress widget in the viewport by pushing it down a bit */
+        this.getProgressWidget().css('margin-top', `${params.offset}px`)
+
+        /* Make form buttons always visible */
+        this.getHTML().toggleClass('fixed-bottom', fixedBottom)
+        this.getHTML().toggleClass('fully-scrolled', fullyScrolled)
+    }
+
+    static init() {
+        Window.closeSignal.connect(function () {
+            /* Go through all current pages and collect page forms. Then see if they have changed fields and, if any of
+             * them does and has preventUnappliedClose flag set, try to prevent navigating away from the page */
+
+            let currentSection = Sections.getCurrent()
+            if (!currentSection) {
+                return
+            }
+
+            let context = currentSection.getPagesContext()
+            if (!context) {
+                return
+            }
+
+            let pages = context.getPages()
+            let pageForms = pages.filter(p => p instanceof PageForm)
+
+            if (pageForms.some(f => f.getChangedFieldNames().length > 0 && f._preventUnappliedClose)) {
+                return false
+            }
+        })
+    }
+
+}
+
+
+export default PageForm

package/js/forms/form-button.js

@@ -0,0 +1,202 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {mix}     from '$qui/base/mixwith.js'
+import ViewMixin from '$qui/views/view.js'
+
+
+/**
+ * A form button.
+ * @alias qui.forms.FormButton
+ * @mixes qui.views.ViewMixin
+ */
+class FormButton extends mix().with(ViewMixin) {
+
+    /**
+     * @constructs
+     * @param {String} id button identifier
+     * @param {String} caption button caption
+     * @param {String} [style] button style:
+     *  * `"foreground"`
+     *  * `"interactive"`
+     *  * `"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 {Boolean} [def] indicates that the button is the default form button (defaults to `false`)
+     * @param {Boolean} [cancel] indicates that the button is the cancel form button (defaults to `false`)
+     * @param {Function} [callback] called when button is pressed; will be called with the form as argument
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        id,
+        caption,
+        style = null,
+        backgroundColor = '@interactive-color',
+        backgroundActiveColor = '@interactive-active-color',
+        foregroundColor = '@foreground-interactive-color',
+        icon = null,
+        def = false,
+        cancel = false,
+        callback = null,
+        ...args
+    }) {
+        super(args)
+
+        this._id = id
+        this._caption = caption
+        this._style = style
+        this._backgroundColor = backgroundColor
+        this._backgroundActiveColor = backgroundActiveColor
+        this._foregroundColor = foregroundColor
+        this._icon = icon
+        this._def = def
+        this._cancel = cancel
+        this._callback = callback
+
+        this._form = null
+    }
+
+    makeHTML() {
+        if (!this._style) {
+            if (this._def) {
+                this._style = 'highlight'
+            }
+            else if (this._cancel) {
+                this._style = 'foreground'
+            }
+            else {
+                this._style = 'interactive'
+            }
+        }
+
+        let attrs = {
+            caption: this._caption,
+            style: this._style,
+            backgroundColor: this._backgroundColor,
+            backgroundActiveColor: this._backgroundActiveColor,
+            foregroundColor: this._foregroundColor,
+            icon: this._icon
+        }
+
+        let html = $('<div></div>', {class: 'qui-form-button'}).pushbutton(attrs)
+
+        html.on('click', function () {
+            this.handlePressed(this._form)
+        }.bind(this))
+
+        return html
+    }
+
+    /**
+     * Button press handler.
+     * @param {qui.forms.Form} form
+     */
+    handlePressed(form) {
+        if (this._callback) {
+            this._callback(form)
+        }
+        else {
+            /* Default button callback */
+
+            if (this.isDefault()) {
+                this._form.defaultAction()
+            }
+            else if (this.isCancel()) {
+                this._form.cancelAction()
+            }
+        }
+    }
+
+    /**
+     * Return the button identifier.
+     * @returns {String}
+     */
+    getId() {
+        return this._id
+    }
+
+    /**
+     * Enable the button.
+     */
+    enable() {
+        this.getHTML().pushbutton({disabled: false})
+    }
+
+    /**
+     * Disable the button.
+     */
+    disable() {
+        this.getHTML().pushbutton({disabled: true})
+    }
+
+    /**
+     * Tell if the button is focused or not.
+     * @returns {Boolean}
+     */
+    isFocused() {
+        return this.getHTML().is(':focus')
+    }
+
+    /**
+     * Focus the button.
+     */
+    focus() {
+        this.getHTML().focus()
+    }
+
+    /**
+     * Return the button caption.
+     * @returns {String}
+     */
+    getCaption() {
+        return this._caption
+    }
+
+    /**
+     * Update the button caption.
+     * @param {String} caption
+     */
+    setCaption(caption) {
+        this._caption = caption
+        this.getHTML().pushbutton({caption: caption})
+    }
+
+    /**
+     * Tell if the button is the default form button.
+     * @returns {Boolean}
+     */
+    isDefault() {
+        return this._def
+    }
+
+    /**
+     * Tell if the button is the form cancel button.
+     * @returns {Boolean}
+     */
+    isCancel() {
+        return this._cancel
+    }
+
+    /**
+     * Return the owning form.
+     * @returns {qui.forms.Form}
+     */
+    getForm() {
+        return this._form
+    }
+
+    /**
+     * Set the owning form.
+     * @param {qui.forms.Form} form
+     */
+    setForm(form) {
+        this._form = form
+    }
+
+}
+
+export default FormButton