@onetype/framework 2.0.20

package/addons/float/overlays/front/js/events/escape.js

@@ -0,0 +1,18 @@
+document.addEventListener('keydown', (event) =>
+{
+    if(event.key !== 'Escape')
+    {
+        return;
+    }
+
+    const items = Object.values(overlays.Items()).sort((a, b) => b.Get('index') - a.Get('index'));
+
+    for(const item of items)
+    {
+        if(item.Get('escape'))
+        {
+            item.Remove();
+            break;
+        }
+    }
+});

package/addons/float/overlays/front/js/functions/flip.js

@@ -0,0 +1,74 @@
+overlays.Fn('flip', function(target, overlay, position, offset, padding)
+{
+    position = position || {x: 'center', y: 'center'};
+    padding = padding || 10;
+
+    const width = overlay.offsetWidth;
+    const height = overlay.offsetHeight;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const pos = {x: position.x, y: position.y};
+    let flipped = {x: false, y: false};
+
+    // Calculate initial position
+    let result = overlays.Fn('position', target, overlay, pos, offset, padding);
+
+    // Flip Y if needed
+    if(pos.y === 'bottom' && (result.top + height) > (viewportHeight - padding))
+    {
+        pos.y = 'top';
+        flipped.y = true;
+    }
+    else if(pos.y === 'top' && result.top < padding)
+    {
+        pos.y = 'bottom';
+        flipped.y = true;
+    }
+
+    // Flip X if needed
+    if(pos.x === 'right' && (result.left + width) > (viewportWidth - padding))
+    {
+        pos.x = 'left';
+        flipped.x = true;
+    }
+    else if(pos.x === 'left' && result.left < padding)
+    {
+        pos.x = 'right';
+        flipped.x = true;
+    }
+
+    // Recalculate if flipped
+    if(flipped.x || flipped.y)
+    {
+        result = overlays.Fn('position', target, overlay, pos, offset, padding);
+    }
+
+    // Clamp to viewport bounds
+    if(result.left < padding)
+    {
+        result.left = padding;
+    }
+
+    if(result.left + width > viewportWidth - padding)
+    {
+        result.left = viewportWidth - width - padding;
+    }
+
+    if(result.top < padding)
+    {
+        result.top = padding;
+    }
+
+    if(result.top + height > viewportHeight - padding)
+    {
+        result.top = viewportHeight - height - padding;
+    }
+
+    return {
+        left: Math.round(result.left),
+        top: Math.round(result.top),
+        position: pos,
+        flipped: flipped
+    };
+});

package/addons/float/overlays/front/js/functions/index.js

@@ -0,0 +1,17 @@
+overlays.Fn('index', function()
+{
+    const items = overlays.Items();
+    let max = 100000;
+
+    for(const id in items)
+    {
+        const index = items[id].Get('index') || 100000;
+
+        if(index > max)
+        {
+            max = index;
+        }
+    }
+
+    return max + 1;
+});

package/addons/float/overlays/front/js/functions/position.js

@@ -0,0 +1,63 @@
+overlays.Fn('position', function(target, overlay, position, offset, padding)
+{
+    const isBody = !target || target === document.body;
+    const rect = isBody
+        ? {left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight, width: window.innerWidth, height: window.innerHeight}
+        : target.getBoundingClientRect();
+    const pos = position || {x: 'center', y: 'center'};
+    const width = overlay.offsetWidth;
+    const height = overlay.offsetHeight;
+    const pad = padding || 0;
+
+    let left = rect.left;
+    let top = rect.top;
+
+    // X positioning
+    if(pos.x === 'left')
+    {
+        left = isBody ? pad : rect.left - width;
+    }
+    else if(pos.x === 'left-in')
+    {
+        left = rect.left + pad;
+    }
+    else if(pos.x === 'center')
+    {
+        left = rect.left + (rect.width / 2) - (width / 2);
+    }
+    else if(pos.x === 'right-in')
+    {
+        left = rect.right - width - pad;
+    }
+    else if(pos.x === 'right')
+    {
+        left = isBody ? rect.right - width - pad : rect.right;
+    }
+
+    // Y positioning
+    if(pos.y === 'top')
+    {
+        top = isBody ? pad : rect.top - height;
+    }
+    else if(pos.y === 'top-in')
+    {
+        top = rect.top + pad;
+    }
+    else if(pos.y === 'center')
+    {
+        top = rect.top + (rect.height / 2) - (height / 2);
+    }
+    else if(pos.y === 'bottom-in')
+    {
+        top = rect.bottom - height - pad;
+    }
+    else if(pos.y === 'bottom')
+    {
+        top = isBody ? rect.bottom - height - pad : rect.bottom;
+    }
+
+    left += offset.x || 0;
+    top += offset.y || 0;
+
+    return {left: Math.round(left), top: Math.round(top)};
+});

package/addons/float/overlays/front/js/item/catch/add.js

@@ -0,0 +1,121 @@
+overlays.ItemOn('add', function(item)
+{
+    this.cleanup = () =>
+    {
+        const existing = overlays.ItemGet(item.Get('id'));
+
+        if(existing)
+        {
+            existing.Remove();
+        }
+    };
+
+    this.render = () =>
+    {
+        const render = item.Get('render');
+
+        if(render)
+        {
+            overlays.RenderAdd('overlay:' + item.Get('id'), function()
+            {
+                return render.call(this, item);
+            });
+        }
+
+        return render ? overlays.Render('overlay:' + item.Get('id')) : null;
+    };
+
+    this.element = () =>
+    {
+        const element = document.createElement('div');
+        element.className = 'ot-overlay';
+        element.setAttribute('data-id', item.Get('id'));
+
+        return element;
+    };
+
+    this.backdrop = (element) =>
+    {
+        const backdrop = item.Get('backdrop');
+
+        if(backdrop)
+        {
+            const backdropElement = document.createElement('div');
+            backdropElement.className = 'backdrop';
+            backdropElement.style.opacity = backdrop;
+            element.appendChild(backdropElement);
+        }
+    };
+
+    this.content = (element, rendered) =>
+    {
+        if(rendered && rendered.Element)
+        {
+            rendered.Element.classList.add('content');
+            element.appendChild(rendered.Element);
+        }
+    };
+
+    this.position = (element, content) =>
+    {
+        if(!content)
+        {
+            return;
+        }
+
+        const target = item.Get('target') || document.body;
+        const position = item.Get('position');
+        const offset = item.Get('offset');
+        const padding = item.Get('padding');
+
+        let result;
+
+        if(item.Get('flip'))
+        {
+            result = overlays.Fn('flip', target, content, position, offset, padding);
+        }
+        else
+        {
+            result = overlays.Fn('position', target, content, position, offset, padding);
+        }
+
+        content.style.left = result.left + 'px';
+        content.style.top = result.top + 'px';
+    };
+
+    this.index = (element) =>
+    {
+        element.style.zIndex = overlays.Fn('index');
+        item.Set('index', parseInt(element.style.zIndex));
+    };
+
+    this.callback = () =>
+    {
+        const onOpen = item.Get('onOpen');
+
+        if(onOpen)
+        {
+            onOpen(item);
+        }
+    };
+
+    // Run
+    this.cleanup();
+
+    const rendered = this.render();
+    const element = this.element();
+
+    this.backdrop(element);
+    this.content(element, rendered);
+
+    document.body.appendChild(element);
+
+    const content = element.querySelector('.content');
+
+    this.position(element, content);
+    this.index(element);
+
+    item.Set('element', element);
+
+    this.callback();
+});

package/addons/float/overlays/front/js/item/catch/remove.js

@@ -0,0 +1,16 @@
+overlays.ItemOn('remove', (item) =>
+{
+    const element = item.Get('element');
+
+    if(element)
+    {
+        element.remove();
+    }
+
+    const onClose = item.Get('onClose');
+
+    if(typeof onClose === 'function')
+    {
+        onClose(item);
+    }
+});

package/addons/float/popups/css/popups.css

@@ -0,0 +1,4 @@
+.ot-popup
+{
+    position: absolute;
+}

package/addons/float/popups/js/#register/addon.js

@@ -0,0 +1,18 @@
+const popups = onetype.Addon('popups', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('target', ['object', null]);
+    addon.Field('content', ['string|function', '']);
+    addon.Field('data', ['object', null]);
+    addon.Field('position', ['object', {x: 'center', y: 'bottom'}]);
+    addon.Field('offset', ['object', {x: 0, y: 0}]);
+    addon.Field('flip', ['boolean', true]);
+    addon.Field('padding', ['number', 10]);
+    addon.Field('backdrop', ['number', null]);
+    addon.Field('closeable', ['boolean', true]);
+    addon.Field('escape', ['boolean', true]);
+    addon.Field('show', ['boolean', false]);
+    addon.Field('overlay', ['object', null]);
+    addon.Field('onOpen', ['function', null]);
+    addon.Field('onClose', ['function', null]);
+});

package/addons/float/popups/js/item/catch/add.js

@@ -0,0 +1,7 @@
+popups.ItemOn('add', function(item)
+{
+    if(item.Get('show'))
+    {
+        item.Set('show', true);
+    }
+});

package/addons/float/popups/js/item/catch/remove.js

@@ -0,0 +1,7 @@
+popups.ItemOn('remove', function(item)
+{
+    if(item.Get('show'))
+    {
+        item.Set('show', false);
+    }
+});

package/addons/float/popups/js/item/catch/set.js

@@ -0,0 +1,73 @@
+popups.ItemOn('set', function(item, key, value)
+{
+    if(key !== 'show')
+    {
+        return;
+    }
+
+    const overlays = onetype.Addon('overlays');
+
+    if(value)
+    {
+        if(item.Get('overlay'))
+        {
+            return;
+        }
+
+        const content = item.Get('content');
+        const data = item.Get('data');
+
+        const overlay = overlays.Item({
+            id: 'popup-' + item.Get('id'),
+            target: item.Get('target'),
+            position: item.Get('position'),
+            offset: item.Get('offset'),
+            flip: item.Get('flip'),
+            padding: item.Get('padding'),
+            backdrop: item.Get('backdrop'),
+            closeable: item.Get('closeable'),
+            escape: item.Get('escape'),
+            onClose: () => item.Set('show', false),
+            render: function()
+            {
+                if(data)
+                {
+                    Object.assign(this, data);
+                }
+
+                if(typeof content === 'function')
+                {
+                    return content.call(this, item);
+                }
+
+                return content;
+            }
+        });
+
+        item.Set('overlay', overlay);
+
+        const onOpen = item.Get('onOpen');
+
+        if(onOpen)
+        {
+            onOpen(item);
+        }
+    }
+    else
+    {
+        const overlay = item.Get('overlay');
+
+        if(overlay)
+        {
+            item.Set('overlay', null);
+            overlay.Remove();
+
+            const onClose = item.Get('onClose');
+
+            if(onClose)
+            {
+                onClose(item);
+            }
+        }
+    }
+});

package/addons/float/popups/js/items/directives/popup.js

@@ -0,0 +1,54 @@
+onetype.AddonReady('directives', function(directives)
+{
+    document.addEventListener('click', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('otPopup' in node)
+            {
+                const show = node.otItem.Get('show');
+                node.otItem.Set('show', !show);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    directives.ItemAdd({
+        id: 'ot-popup',
+        icon: 'smart_popup',
+        name: 'Popup',
+        description: 'Shows popup on click.',
+        trigger: 'node',
+        order: 600,
+        attributes: {
+            'ot-popup': ['string|object']
+        },
+        code: function(data, item, compile, node)
+        {
+            const value = data['ot-popup'].value;
+
+            let config = {};
+
+            if(typeof value === 'string')
+            {
+                config.content = value;
+            }
+            else if(typeof value === 'object')
+            {
+                config = value;
+            }
+
+            if(!('target' in config))
+            {
+                config.target = node;
+            }
+
+            node.otPopup = true;
+            node.otItem = popups.Item(config);
+        }
+    });
+});

package/addons/float/toasts/#register/addon.js

@@ -0,0 +1,17 @@
+const toasts = onetype.Addon('toasts', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('type', ['string', 'info']);
+    addon.Field('message', ['string', '']);
+    addon.Field('title', ['string', null]);
+    addon.Field('icon', ['string', null]);
+    addon.Field('duration', ['number', 5000]);
+    addon.Field('closeable', ['boolean', true]);
+    addon.Field('position', ['object', {x: 'right-in', y: 'top-in'}]);
+    addon.Field('padding', ['number', 16]);
+    addon.Field('show', ['boolean', true]);
+    addon.Field('overlay', ['object', null]);
+    addon.Field('timer', ['number', null]);
+    addon.Field('onOpen', ['function', null]);
+    addon.Field('onClose', ['function', null]);
+});

package/addons/float/toasts/item/catch/add.js

@@ -0,0 +1,7 @@
+toasts.ItemOn('add', function(item)
+{
+    if(item.Get('show'))
+    {
+        item.Set('show', true);
+    }
+});

package/addons/float/toasts/item/catch/remove.js

@@ -0,0 +1,7 @@
+toasts.ItemOn('remove', function(item)
+{
+    if(item.Get('show'))
+    {
+        item.Set('show', false);
+    }
+});

package/addons/float/toasts/item/catch/set.js

@@ -0,0 +1,86 @@
+toasts.ItemOn('set', function(item, key, value)
+{
+    if(key !== 'show')
+    {
+        return;
+    }
+
+    const overlays = onetype.Addon('overlays');
+
+    if(value)
+    {
+        if(item.Get('overlay'))
+        {
+            return;
+        }
+
+        const overlay = overlays.Item({
+            id: 'toast-' + item.Get('id'),
+            position: item.Get('position'),
+            padding: item.Get('padding'),
+            flip: false,
+            escape: true,
+            onClose: () => item.Set('show', false),
+            render: function()
+            {
+                this.type = item.Get('type');
+                this.title = item.Get('title');
+                this.message = item.Get('message');
+                this.icon = item.Get('icon');
+                this.closeable = item.Get('closeable');
+                this.onclose = () => item.Set('show', false);
+
+                return `<e-toast
+                    :type="type"
+                    :title="title"
+                    :message="message"
+                    :icon="icon"
+                    :closeable="closeable"
+                    :onclose="onclose">
+                </e-toast>`;
+            }
+        });
+
+        item.Set('overlay', overlay);
+
+        const duration = item.Get('duration');
+
+        if(duration > 0)
+        {
+            const timer = setTimeout(() => item.Set('show', false), duration);
+            item.Set('timer', timer);
+        }
+
+        const onOpen = item.Get('onOpen');
+
+        if(onOpen)
+        {
+            onOpen(item);
+        }
+    }
+    else
+    {
+        const timer = item.Get('timer');
+
+        if(timer)
+        {
+            clearTimeout(timer);
+            item.Set('timer', null);
+        }
+
+        const overlay = item.Get('overlay');
+
+        if(overlay)
+        {
+            item.Set('overlay', null);
+            overlay.Remove();
+
+            const onClose = item.Get('onClose');
+
+            if(onClose)
+            {
+                onClose(item);
+            }
+        }
+    }
+});

package/addons/float/toasts/items/elements/toast/toast.css

@@ -0,0 +1,84 @@
+.e-697495d1
+{
+    pointer-events: auto;
+}
+
+.e-697495d1 .holder
+{
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ot-spacing-s);
+    padding: var(--ot-spacing-m);
+    border-radius: var(--ot-radius-m);
+    background: var(--ot-bg-3);
+    border: 1px solid var(--ot-bg-3-border);
+    min-width: 280px;
+    max-width: 400px;
+}
+
+.e-697495d1 .holder .icon
+{
+    flex-shrink: 0;
+    font-size: var(--ot-size-l);
+    color: var(--ot-text-1);
+}
+
+.e-697495d1 .holder .content
+{
+    flex: 1;
+    min-width: 0;
+}
+
+.e-697495d1 .holder .content .title
+{
+    font-weight: 600;
+    margin-bottom: var(--ot-spacing-x);
+    color: var(--ot-text-1);
+}
+
+.e-697495d1 .holder .content .message
+{
+    font-size: var(--ot-size-s);
+    color: var(--ot-text-2);
+}
+
+.e-697495d1 .holder .close
+{
+    flex-shrink: 0;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--ot-text-2);
+    transition: color 0.2s;
+}
+
+.e-697495d1 .holder .close:hover
+{
+    color: var(--ot-text-1);
+}
+
+.e-697495d1 .holder .close .icon
+{
+    font-size: 18px;
+}
+
+.e-697495d1 .holder[variant="success"]
+{
+    border-left: 4px solid var(--ot-green);
+}
+
+.e-697495d1 .holder[variant="error"]
+{
+    border-left: 4px solid var(--ot-red);
+}
+
+.e-697495d1 .holder[variant="warning"]
+{
+    border-left: 4px solid var(--ot-orange);
+}
+
+.e-697495d1 .holder[variant="info"]
+{
+    border-left: 4px solid var(--ot-blue);
+}