@kizmann/nano-ui 2.0.2 → 3.0.0

package/src/preview/src/preview/preview-handler.mjs

@@ -1,205 +0,0 @@
-import { Mix, Arr, Obj, Dom } from "@kizmann/pico-js";
-
-window.PreviewGroups = {};
-
-export class PreviewHandler
-{
-    static alias = 'PreviewHandler';
-
-    static current = null;
-
-    static append(item)
-    {
-        if ( !window.PreviewGroups[item.group] ) {
-            window.PreviewGroups[item.group] = {};
-        }
-
-        window.PreviewGroups[item.group][item.uid] = item;
-    }
-
-    static remove(item)
-    {
-        delete window.PreviewGroups[item.group][item.uid];
-    }
-
-    static get(group)
-    {
-        if ( !window.PreviewGroups[group] ) {
-            window.PreviewGroups[group] = {};
-        }
-
-        return Arr.sort(window.PreviewGroups[group], 'index');
-    }
-
-    static next()
-    {
-        if ( ! Mix.isRef(this.current) ) {
-            return null;
-        }
-
-        let items = this.get(this.current.group);
-
-        let index = Arr.findIndex(items, {
-            uid: this.current.uid
-        });
-
-        let next = Arr.first(items);
-
-        if ( items.length > index + 1 ) {
-            next = Arr.get(items, index + 1);
-        }
-
-        return this.switch(next);
-    }
-
-    static prev()
-    {
-        if ( ! Mix.isRef(this.current) ) {
-            return null;
-        }
-
-        let items = this.get(this.current.group);
-
-        let index = Arr.findIndex(items, {
-            uid: this.current.uid
-        });
-
-        let prev = Arr.last(items);
-
-        if ( 0 <= index - 1 ) {
-            prev = Arr.get(items, index - 1);
-        }
-
-        return this.switch(prev);
-    }
-
-    static create()
-    {
-        let el = Dom.find('.n-preview-modal');
-
-        if ( el.length() ) {
-            return el;
-        }
-
-        let classList = [
-            'n-preview-modal',
-            'n-preview-modal--md',
-            'n-preview-modal--primary',
-            'n-theme--dark'
-        ];
-
-        el = Dom.make('div', {
-            classList: classList.join(' ')
-        });
-
-        el.attr('data-preview', 'nano');
-
-        let close = Dom.make('div', {
-            classList: 'n-preview-modal__close',
-            innerHTML: `<i class="${nano.Icons.times}"></i>`
-        });
-
-        close.on('click', () => {
-            this.close()
-        });
-
-        close.appendTo(el);
-
-        let prev = Dom.make('div', {
-            classList: 'n-preview-modal__prev',
-            innerHTML: `<i class="${nano.Icons.angleLeft}"></i>`
-        });
-
-        prev.on('click', () => {
-            this.prev()
-        });
-
-        prev.appendTo(el);
-
-        let next = Dom.make('div', {
-            classList: 'n-preview-modal__next',
-            innerHTML: `<i class="${nano.Icons.angleRight}"></i>`
-        });
-
-        next.on('click', () => {
-            this.next()
-        });
-
-        next.appendTo(el);
-
-        el.appendTo(document.body);
-
-        return el;
-    }
-
-    static open(item)
-    {
-        let el = this.create();
-
-        let keydownFn = (e) => {
-
-            if ( e.keyCode === 27 ) {
-                e.stopPropagation();
-                return this.close();
-            }
-
-            if ( e.keyCode === 37 ) {
-                e.stopPropagation();
-                return this.prev();
-            }
-
-            if ( e.keyCode === 39 ) {
-                e.stopPropagation();
-                return this.next();
-            }
-
-        }
-
-        Dom.find(window).on('keydown', keydownFn, {
-            uid: 'n-preview-modal'
-        });
-
-        this.switch(item);
-
-        if ( this.get(item.group).length > 1 ) {
-            el.addClass('n-multi');
-        }
-
-        el.addClass('n-ready');
-    }
-
-    static close()
-    {
-        let el = this.create();
-
-        Dom.find(window).off('keydown', null, {
-            uid: 'n-preview-modal'
-        });
-
-        this.switch(null);
-
-        el.remClass(['n-ready', 'n-multi']);
-    }
-
-    static switch(item)
-    {
-        if ( Mix.isRef(this.current) ) {
-            Obj.set(this.current, 'visible', false);
-        }
-
-        this.current = item;
-
-        if ( Mix.isRef(this.current) ) {
-            Obj.set(this.current, 'visible', true);
-        }
-
-        return item;
-    }
-
-}
-
-if ( ! window.PreviewHandler ) {
-    window.PreviewHandler = PreviewHandler;
-}
-
-export default PreviewHandler;

package/src/preview/src/preview/preview.jsx

@@ -1,234 +0,0 @@
-import { Hash, Obj, Arr, Mix, Event, Locale } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPreview',
-
-    props: {
-
-        file: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        thumb: {
-            default()
-            {
-                return null;
-            }
-        },
-
-        title: {
-            default()
-            {
-                return null;
-            },
-            type: [String]
-        },
-
-        index: {
-            default()
-            {
-                return 0;
-            },
-            type: [Number, String]
-        },
-
-        group: {
-            default()
-            {
-                return Hash.uuid();
-            },
-            type: [String]
-        },
-
-        fit: {
-            default()
-            {
-                return 'cover';
-            },
-            type: [String]
-        },
-
-        mime: {
-            default()
-            {
-                return null;
-            },
-            type: [String]
-        },
-
-        preview: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        showSrc: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        },
-
-        buttonText: {
-            default()
-            {
-                return Locale.trans('Download file');
-            },
-            type: [String]
-        },
-
-        renderButton: {
-            default()
-            {
-                return true;
-            },
-            type: [Boolean]
-        }
-
-    },
-
-    computed: {
-
-        tempFile()
-        {
-            return this.file || this.thumb;
-        },
-
-        tempThumb()
-        {
-            return this.thumb || this.file;
-        },
-
-    },
-
-    provide()
-    {
-        return { NPreview: this };
-    },
-
-    methods: {
-
-        openBox()
-        {
-            this.$refs.modal.openBox();
-        },
-
-        closeBox()
-        {
-            this.$refs.modal.closeBox();
-        },
-
-    },
-
-    renderTitle()
-    {
-        if ( Mix.isEmpty(this.title) ) {
-            return null;
-        }
-
-        return (
-            <div class="n-preview__title">
-                <span>{this.title}</span>
-            </div>
-        );
-    },
-
-    renderPreview()
-    {
-        if ( ! this.preview ) {
-            return this.ctor('renderFull')();
-        }
-
-        let type = this.PreviewHelper.getType(this.tempThumb);
-
-        if ( type === 'image' ) {
-            return (<NPreviewImage src={this.tempThumb} />);
-        }
-
-        let props = {
-            showSrc: false, renderButton: false,
-        };
-
-        return (<NPreviewPlain src={this.tempThumb} {...props} />);
-    },
-
-    renderFull()
-    {
-        let type = this.PreviewHelper.getType(this.tempFile);
-
-        if ( type === 'image' ) {
-            return (<NPreviewImage src={this.tempFile} />);
-        }
-
-        if ( type === 'video' ) {
-            return (<NPreviewVideo src={this.tempFile} />);
-        }
-
-        let props = {
-            showSrc: this.showSrc, buttonText: this.buttonText, renderButton: this.renderButton
-        };
-
-        return (<NPreviewPlain src={this.tempFile} {...props} />);
-    },
-
-    renderModal()
-    {
-        if ( ! this.preview ) {
-            return null;
-        }
-
-        let modalProps = {
-            index: this.index, group: this.group, file: this.tempFile
-        };
-
-        return (
-            <NPreviewModal ref="modal" {...modalProps} />
-        );
-    },
-
-    render()
-    {
-        let classList = [
-            'n-preview',
-            'n-preview--' + this.fit
-        ];
-
-        if ( this.preview ) {
-            classList.push('n-clickable');
-        }
-
-        let type = this.PreviewHelper.getType(this.tempFile);
-
-        if ( type ) {
-            classList.push('n-mime-' + type);
-        }
-
-        let thumb = this.PreviewHelper.getType(this.tempThumb);
-
-        if ( thumb ) {
-            classList.push('n-mime-preview-' + thumb);
-        }
-
-        let props = {};
-
-        if ( this.preview ) {
-            props.onClick = () => this.openBox();
-        }
-
-        let key = btoa(this.tempThumb);
-
-        return (
-            <div key={key} class={classList} {...props}>
-                { [this.ctor('renderPreview')(), this.ctor('renderTitle')(), this.ctor('renderModal')()] }
-            </div>
-        );
-    }
-
-}

package/src/preview/src/preview/preview.scss

@@ -1,41 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-preview {
-    position: relative;
-    display: inline-flex;
-}
-
-.n-preview--cover img {
-    object-fit: cover !important;
-}
-
-.n-preview--contain img {
-    object-fit: contain !important;
-}
-
-.n-preview__title {
-    z-index: 10;
-    pointer-events: none;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: size('default-md-pad', 'calc($ * 0.5)') size('default-md-pad');
-}
-
-.n-preview__title span {
-    overflow: hidden;
-    display: block;
-    text-align: center;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: size('base-fnt');
-    color: color('white', 0.7);
-}
-
-.n-preview.n-mime-preview-image .n-preview__title span {
-    color: color('white');
-    text-shadow: 0 0 6px color('shadow', 0.7);
-}
-

package/src/preview/src/preview-image/preview-image.jsx

@@ -1,115 +0,0 @@
-import { Obj, Arr, Run, Mix, Dom } from "@kizmann/pico-js";
-
-export default {
-
-    name: 'NPreviewImage',
-
-    props: {
-
-        src: {
-            default()
-            {
-                return null;
-            }
-        },
-
-    },
-
-    data()
-    {
-        return {
-            load: false, tempSrc: null
-        };
-    },
-
-    beforeMount()
-    {
-        if ( ! window.ImageCache ) {
-            window.ImageCache = [];
-        }
-
-
-        if ( ! Arr.has(window.ImageCache, this.src) ) {
-            this.tempSrc = this.src;
-        }
-
-    },
-
-    mounted()
-    {
-        this.resolveLoad();
-    },
-
-    watch: {
-
-        'src': function () {
-            this.resolveLoad();
-        }
-
-    },
-
-    methods: {
-
-        resolveLoad()
-        {
-            if ( Arr.has(window.ImageCache, this.src) ) {
-                return;
-            }
-
-            this.tempSrc = null;
-
-            if ( Mix.isRef(this.src) ) {
-                return this.resolveData();
-            }
-
-            Dom.find(this.$refs.image).loaded(() => {
-
-                /**
-                 * Add image to cache
-                 */
-                Arr.add(window.ImageCache, this.src);
-
-                /**
-                 * Mark image as loaded
-                 */
-                Run.delay(() => this.load = false, 200);
-            });
-
-            this.laod = true;
-        },
-
-        resolveData()
-        {
-            let reader = new FileReader();
-
-            reader.onload = () => {
-                this.tempSrc = reader.result;
-            };
-
-            reader.readAsDataURL(this.src);
-        }
-
-    },
-
-    render()
-    {
-        let classList = [
-            'n-preview-image'
-        ];
-
-        if ( Arr.has(window.ImageCache, this.src) ) {
-            classList.push('n-cached');
-        }
-
-        if ( ! this.load ) {
-            classList.push('n-ready');
-        }
-
-        return (
-            <div class={classList}>
-                <img ref="image" src={this.tempSrc || this.src} />
-            </div>
-        );
-    }
-
-}

package/src/preview/src/preview-image/preview-image.scss

@@ -1,68 +0,0 @@
-@use "../../../root/helpers" as *;
-
-.n-preview-image {
-    position: relative;
-    width: 100%;
-}
-
-.n-modal__frame > .n-preview-image {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-}
-
-.n-preview-image:before {
-    content: '\00a0';
-    display: block;
-    width: 100%;
-    height: 0;
-    padding-bottom: 100%;
-    max-height: 100%;
-}
-
-.n-preview-image:after {
-    content: '\00a0';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin: -10px 0 0 -10px;
-    border-radius: 500px;
-    border-top-color: transparent;
-    animation: NImage 1s linear infinite;
-}
-
-.n-preview-image.n-ready:after {
-    opacity: 0;
-    transition: opacity 0.15s;
-}
-
-.n-preview-image img {
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    transition: opacity 0.15s ease-in-out;
-}
-
-.n-preview-image:not(.n-ready):not(.n-cached) img {
-    opacity: 0;
-}
-
-@keyframes NImage {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}