datafolder 1.0.0

package/static/w2ui/src/w2base.js

@@ -0,0 +1,311 @@
+/**
+ * Part of w2ui 2.0 library
+ *  - Dependencies: w2utils
+ *  - on/off/trigger methods id not showing in help
+ *  - refactored with event object
+ *
+ * Chanes in 2.0.+
+ * - added unmount that cleans up the box
+ *
+ */
+
+import { w2ui, w2utils, query } from './w2utils.js'
+
+class w2event {
+    constructor(owner, edata) {
+        Object.assign(this, {
+            type: edata.type ?? null,
+            detail: edata,
+            owner,
+            target: edata.target ?? null,
+            phase: edata.phase ?? 'before',
+            object: edata.object ?? null,
+            execute: null,
+            isStopped: false,
+            isCancelled: false,
+            onComplete: null,
+            listeners: []
+        })
+        delete edata.type
+        delete edata.target
+        delete edata.object
+        this.complete = new Promise((resolve, reject) => {
+            this._resolve = resolve
+            this._reject = reject
+        })
+        // needed empty catch function so that promise will not show error in the console
+        this.complete.catch(() => {})
+    }
+
+    finish(detail) {
+        if (detail) {
+            w2utils.extend(this.detail, detail)
+        }
+        this.phase = 'after'
+        this.owner.trigger.call(this.owner, this)
+    }
+
+    done(func) {
+        this.listeners.push(func)
+    }
+
+    preventDefault() {
+        this._reject()
+        this.isCancelled = true
+    }
+
+    stopPropagation() {
+        this.isStopped = true
+    }
+}
+
+class w2base {
+    /**
+     * Initializes base object for w2ui, registers it with w2ui object
+     *
+     * @param {string} name  - name of the object
+     * @returns
+     */
+    constructor(name) {
+        this.activeEvents = [] // events that are currently processing
+        this.listeners = [] // event listeners
+        // register globally
+        if (typeof name !== 'undefined') {
+            if (!w2utils.checkName(name)) return
+            w2ui[name] = this
+        }
+        this.debug = false // if true, will trigger all events
+    }
+
+    /**
+     * Adds event listener, supports event phase and event scoping
+     *
+     * @param {*} edata - an object or string, if string "eventName:phase.scope"
+     * @param {*} handler
+     * @returns itself
+     */
+    on(events, handler) {
+        if (typeof events == 'string') {
+            events = events.split(/[,\s]+/) // separate by comma or space
+        } else {
+            events = [events]
+        }
+        events.forEach(edata => {
+            let name = typeof edata == 'string' ? edata : (edata.type + ':' + edata.execute + '.' + edata.scope)
+            if (typeof edata == 'string') {
+                let [eventName, scope] = edata.split('.')
+                let [type, execute] = eventName.replace(':complete', ':after').replace(':done', ':after').split(':')
+                edata = { type, execute: execute ?? 'before', scope }
+            }
+            edata = w2utils.extend({ type: null, execute: 'before', onComplete: null }, edata)
+            // errors
+            if (!edata.type) { console.log('ERROR: You must specify event type when calling .on() method of '+ this.name); return }
+            if (!handler) { console.log('ERROR: You must specify event handler function when calling .on() method of '+ this.name); return }
+            if (!Array.isArray(this.listeners)) this.listeners = []
+            this.listeners.push({ name, edata, handler })
+            if (this.debug) {
+                console.log('w2base: add event', { name, edata, handler })
+            }
+        })
+        return this
+    }
+
+    /**
+     * Removes event listener, supports event phase and event scoping
+     *
+     * @param {*} edata - an object or string, if string "eventName:phase.scope"
+     * @param {*} handler
+     * @returns itself
+     */
+    off(events, handler) {
+        if (typeof events == 'string') {
+            events = events.split(/[,\s]+/) // separate by comma or space
+        } else {
+            events = [events]
+        }
+        events.forEach(edata => {
+            let name = typeof edata == 'string' ? edata : (edata.type + ':' + edata.execute + '.' + edata.scope)
+            if (typeof edata == 'string') {
+                let [eventName, scope] = edata.split('.')
+                let [type, execute] = eventName.replace(':complete', ':after').replace(':done', ':after').split(':')
+                edata = { type: type || '*', execute: execute || '', scope: scope || '' }
+            }
+            edata = w2utils.extend({ type: null, execute: null, onComplete: null }, edata)
+            // errors
+            if (!edata.type && !edata.scope) { console.log('ERROR: You must specify event type when calling .off() method of '+ this.name); return }
+            if (!handler) { handler = null }
+            let count = 0
+            // remove listener
+            this.listeners = this.listeners.filter(curr => {
+                if ( (edata.type === '*' || edata.type === curr.edata.type)
+                    && (edata.execute === '' || edata.execute === curr.edata.execute)
+                    && (edata.scope === '' || edata.scope === curr.edata.scope)
+                    && (edata.handler == null || edata.handler === curr.edata.handler)
+                ) {
+                    count++ // how many listeners removed
+                    return false
+                } else {
+                    return true
+                }
+            })
+            if (this.debug) {
+                console.log(`w2base: remove event (${count})`, { name, edata, handler })
+            }
+        })
+        return this // needed for chaining
+    }
+
+    /**
+     * Triggers even listeners for a specific event, loops through this.listeners
+     *
+     * @param {Object} edata - Object
+     * @returns modified edata
+     */
+    trigger(eventName, edata) {
+        if (arguments.length == 1) {
+            if (typeof eventName == 'string') {
+                edata = { type: eventName, target: this }
+            } else {
+                edata = eventName
+            }
+        } else {
+            edata.type = eventName
+            edata.target = edata.target ?? this
+        }
+        if (w2utils.isPlainObject(edata) && edata.phase == 'after') {
+            // find event
+            edata = this.activeEvents.find(event => {
+                if (event.type == edata.type && event.target == edata.target) {
+                    return true
+                }
+                return false
+            })
+            if (!edata) {
+                console.log(`ERROR: Cannot find even handler for "${edata.type}" on "${edata.target}".`)
+                return
+            }
+            console.log('NOTICE: This syntax "edata.trigger({ phase: \'after\' })" is outdated. Use edata.finish() instead.')
+        } else if (!(edata instanceof w2event)) {
+            edata = new w2event(this, edata)
+            this.activeEvents.push(edata)
+        }
+        let args, fun, tmp
+        if (!Array.isArray(this.listeners)) this.listeners = []
+        if (this.debug) {
+            console.log(`w2base: trigger "${edata.type}:${edata.phase}"`, edata)
+        }
+        // process events in REVERSE order
+        for (let h = this.listeners.length-1; h >= 0; h--) {
+            let item = this.listeners[h]
+            if (item != null && (item.edata.type === edata.type || item.edata.type === '*') &&
+                (item.edata.target === edata.target || item.edata.target == null) &&
+                (item.edata.execute === edata.phase || item.edata.execute === '*' || item.edata.phase === '*'))
+            {
+                // add extra params if there
+                Object.keys(item.edata).forEach(key => {
+                    if (edata[key] == null && item.edata[key] != null) {
+                        edata[key] = item.edata[key]
+                    }
+                })
+                // check handler arguments
+                args = []
+                tmp  = new RegExp(/\((.*?)\)/).exec(String(item.handler).split('=>')[0])
+                if (tmp) args = tmp[1].split(/\s*,\s*/)
+                if (args.length === 2) {
+                    item.handler.call(this, edata.target, edata) // old way for back compatibility
+                    if (this.debug) console.log(' - call (old)', item.handler)
+                } else {
+                    item.handler.call(this, edata) // new way
+                    if (this.debug) console.log(' - call', item.handler)
+                }
+                if (edata.isStopped === true || edata.stop === true) return edata // back compatibility edata.stop === true
+            }
+        }
+        // main object events
+        let funName = 'on' + edata.type.substr(0,1).toUpperCase() + edata.type.substr(1)
+        if (edata.phase === 'before' && typeof this[funName] === 'function') {
+            fun = this[funName]
+            // check handler arguments
+            args = []
+            tmp  = new RegExp(/\((.*?)\)/).exec(String(fun).split('=>')[0])
+            if (tmp) args = tmp[1].split(/\s*,\s*/)
+            if (args.length === 2) {
+                fun.call(this, edata.target, edata) // old way for back compatibility
+                if (this.debug) console.log(' - call: on[Event] (old)', fun)
+            } else {
+                fun.call(this, edata) // new way
+                if (this.debug) console.log(' - call: on[Event]', fun)
+            }
+            if (edata.isStopped === true || edata.stop === true) return edata // back compatibility edata.stop === true
+        }
+        // item object events
+        if (edata.object != null && edata.phase === 'before' && typeof edata.object[funName] === 'function') {
+            fun = edata.object[funName]
+            // check handler arguments
+            args = []
+            tmp  = new RegExp(/\((.*?)\)/).exec(String(fun).split('=>')[0])
+            if (tmp) args = tmp[1].split(/\s*,\s*/)
+            if (args.length === 2) {
+                fun.call(this, edata.target, edata) // old way for back compatibility
+                if (this.debug) console.log(' - call: edata.object (old)', fun)
+            } else {
+                fun.call(this, edata) // new way
+                if (this.debug) console.log(' - call: edata.object', fun)
+            }
+            if (edata.isStopped === true || edata.stop === true) return edata
+        }
+        // execute onComplete
+        if (edata.phase === 'after') {
+            if (typeof edata.onComplete === 'function') edata.onComplete.call(this, edata)
+            for (let i = 0; i < edata.listeners.length; i++) {
+                if (typeof edata.listeners[i] === 'function') {
+                    edata.listeners[i].call(this, edata)
+                    if (this.debug) console.log(' - call: done', fun)
+                }
+            }
+            edata._resolve(edata)
+            if (this.debug) {
+                console.log(`w2base: trigger "${edata.type}:${edata.phase}"`, edata)
+            }
+            // clean up activeEvents
+            let ind = this.activeEvents.indexOf(edata)
+            if (ind !== -1) this.activeEvents.splice(ind, 1)
+        }
+        return edata
+    }
+
+    /**
+     * This method renders component into the box. It is overwritten in descendents and in this base
+     * component it is empty.
+     */
+    render(box) {
+        // intentionally left blank
+    }
+
+    /**
+     * Removes all classes that start with w2ui-* and sets box to null. It is needed so that control will
+     * release the box to be used for other widgets
+     */
+    unmount() {
+        let edata = this.trigger('unmount', { target: this.name })
+        if (edata.isCancelled) {
+            return
+        }
+        let remove = []
+        // find classes that start with "w2ui-*"
+        if (this.box instanceof HTMLElement) {
+            this.box.classList.forEach(cl => {
+                if (cl.startsWith('w2ui-')) remove.push(cl)
+            })
+        }
+        query(this.box)
+            .off() // removes all events attached to this box previously
+            .removeClass(remove)
+            .removeAttr('name')
+            .html('')
+        this.box = null
+        // event after
+        edata.finish()
+    }
+}
+export { w2event, w2base }

package/static/w2ui/src/w2compat.js

@@ -0,0 +1,207 @@
+/**
+ * Part of w2ui 2.0 library
+ *  - Dependencies: jQuery, w2ui.*
+ *
+ * This file provided compatibility for projects that conntinue to use jQuery. It extends jQuery with
+ * w2ui support, such as fn.w2grid, fn.w2form, ... fn.w2render, fn.w2destroy, fn.w2tag, etc
+ *
+ * It is not needed for projects that use ES6 module loading.
+ *
+ * == 2.0 changes
+ *   - CSP - fixed inline events
+ */
+
+import { w2locale } from './w2locale.js'
+import { w2event, w2base } from './w2base.js'
+import { w2ui, w2utils } from './w2utils.js'
+import { query } from './query.js'
+import { w2popup, w2alert, w2confirm, w2prompt, Dialog } from './w2popup.js'
+import { w2field } from './w2field.js'
+import { w2form } from './w2form.js'
+import { w2grid } from './w2grid.js'
+import { w2layout } from './w2layout.js'
+import { w2sidebar } from './w2sidebar.js'
+import { w2tabs } from './w2tabs.js'
+import { w2toolbar } from './w2toolbar.js'
+import { w2tooltip, w2color, w2menu, w2date, Tooltip } from './w2tooltip.js'
+
+// Register jQuery plugins
+(function($) {
+
+    // register globals if needed
+    let w2globals = function() {
+        (function (win, obj) {
+            Object.keys(obj).forEach(key => {
+                win[key] = obj[key]
+            })
+        })(window, {
+            w2ui, w2utils, query, w2locale, w2event, w2base,
+            w2popup, w2alert, w2confirm, w2prompt, Dialog,
+            w2tooltip, w2menu, w2color, w2date, Tooltip,
+            w2toolbar, w2sidebar, w2tabs, w2layout, w2grid, w2form, w2field
+        })
+    }
+    // if url has globals at the end, then register globals
+    let param = String(import.meta.url).split('?')[1] || ''
+    if (param == 'globals' || param.substr(0, 8) == 'globals=') {
+        w2globals()
+    }
+
+    // if jQuery is not defined, then exit
+    if (!$) return
+    $.w2globals = w2globals
+
+    $.fn.w2render = function(name) {
+        if ($(this).length > 0) {
+            if (typeof name === 'string' && w2ui[name]) w2ui[name].render($(this)[0])
+            if (typeof name === 'object') name.render($(this)[0])
+        }
+    }
+
+    $.fn.w2destroy = function(name) {
+        if (!name && this.length > 0) name = this.attr('name')
+        if (typeof name === 'string' && w2ui[name]) w2ui[name].destroy()
+        if (typeof name === 'object') name.destroy()
+    }
+
+    $.fn.w2field = function(type, options) {
+        // if without arguments - return the object
+        if (arguments.length === 0) {
+            let obj = $(this).data('w2field')
+            return obj
+        }
+        return this.each((index, el) => {
+            let obj = $(el).data('w2field')
+            // if object is not defined, define it
+            if (obj == null) {
+                obj = new w2field(type, options)
+                obj.render(el)
+                return obj
+            } else { // fully re-init
+                obj = new w2field(type, options)
+                obj.render(el)
+                return obj
+            }
+            return null
+        })
+    }
+
+    $.fn.w2form    = function(options) { return proc.call(this, options, 'w2form') }
+    $.fn.w2grid    = function(options) { return proc.call(this, options, 'w2grid') }
+    $.fn.w2layout  = function(options) { return proc.call(this, options, 'w2layout') }
+    $.fn.w2sidebar = function(options) { return proc.call(this, options, 'w2sidebar') }
+    $.fn.w2tabs    = function(options) { return proc.call(this, options, 'w2tabs') }
+    $.fn.w2toolbar = function(options) { return proc.call(this, options, 'w2toolbar') }
+
+    function proc(options, type) {
+        if ($.isPlainObject(options)) {
+            let obj
+            if (type == 'w2form') {
+                obj = new w2form(options)
+                if (this.find('.w2ui-field').length > 0) {
+                    obj.formHTML = this.html()
+                }
+            }
+            if (type == 'w2grid') obj = new w2grid(options)
+            if (type == 'w2layout') obj = new w2layout(options)
+            if (type == 'w2sidebar') obj = new w2sidebar(options)
+            if (type == 'w2tabs') obj = new w2tabs(options)
+            if (type == 'w2toolbar') obj = new w2toolbar(options)
+            if ($(this).length !== 0) {
+                obj.render(this[0])
+            }
+            return obj
+        } else {
+            let obj = w2ui[$(this).attr('name')]
+            if (!obj) return null
+            if (arguments.length > 0) {
+                if (obj[options]) obj[options].apply(obj, Array.prototype.slice.call(arguments, 1))
+                return this
+            } else {
+                return obj
+            }
+        }
+    }
+
+    $.fn.w2popup = function(options) {
+        if (this.length > 0 ) {
+            w2popup.template(this[0], null, options)
+        } else if (options.url) {
+            w2popup.load(options)
+        }
+    }
+
+    $.fn.w2marker = function() {
+        let str = Array.from(arguments)
+        if (Array.isArray(str[0])) str = str[0]
+        return $(this).each((index, el) => {
+            w2utils.marker(el, str)
+        })
+    }
+
+    $.fn.w2tag = function(text, options) {
+        return this.each((index, el) => {
+            if (text == null && options == null) {
+                w2tooltip.hide()
+                return
+            }
+            if (typeof text == 'object') {
+                options = text
+            } else {
+                options = options ?? {}
+                options.html = text
+            }
+            w2tooltip.show({ anchor: el, ...options })
+        })
+    }
+
+    $.fn.w2overlay = function(html, options) {
+        return this.each((index, el) => {
+            if (html == null && options == null) {
+                w2tooltip.hide()
+                return
+            }
+            if (typeof html == 'object') {
+                options = html
+            } else {
+                options.html = html
+            }
+            Object.assign(options, {
+                class: 'w2ui-white',
+                hideOn: ['doc-click']
+            })
+            w2tooltip.show({ anchor: el, ...options })
+        })
+    }
+
+    $.fn.w2menu = function(menu, options) {
+        return this.each((index, el) => {
+            if (typeof menu == 'object') {
+                options = menu
+            }
+            if (typeof menu == 'object') {
+                options = menu
+            } else {
+                options.items = menu
+            }
+            w2menu.show({ anchor: el, ...options })
+        })
+    }
+
+    $.fn.w2color = function(options, callBack) {
+        return this.each((index, el) => {
+            let tooltip = w2color.show({ anchor: el, ...options })
+            if (typeof callBack == 'function') {
+                tooltip.select(callBack)
+            }
+        })
+    }
+
+})(window.jQuery)
+
+export {
+    w2ui, w2utils, query, w2locale, w2event, w2base,
+    w2popup, w2alert, w2confirm, w2prompt, Dialog,
+    w2tooltip, w2menu, w2color, w2date, Tooltip,
+    w2toolbar, w2sidebar, w2tabs, w2layout, w2grid, w2form, w2field
+}