@onetype/framework 2.0.42 → 2.0.44

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

@@ -1,74 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

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

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

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

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

@@ -1,73 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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/addon.js

@@ -1,17 +0,0 @@
-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

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

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

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

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

@@ -1,86 +0,0 @@
-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

@@ -1,84 +0,0 @@
-.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);
-}