@kizmann/nano-ui 1.0.14 → 1.1.0

package/src/preview/src/_tools/preview-helper.js

@@ -0,0 +1,142 @@
+import { Any, Arr, Dom, Obj } from "@kizmann/pico-js";
+
+window.NPreviewMimes = {
+    image: [
+        'jpg', 'jpeg', 'gif', 'svg', 'png', 'bmp'
+    ],
+    video: [
+        'mp4', 'webm', 'mov'
+    ],
+    audio: [
+        'mp3', 'aac',
+    ],
+    font: [
+        'woff', 'ttf', 'otf'
+    ],
+    text: [
+        'csv', 'txt', 'html'
+    ],
+    application: [
+        'pdf', 'doc', 'xls'
+    ]
+};
+
+export class NPreviewHelper
+{
+    static getExtension(source, fallback = 'plain')
+    {
+        let extension = source.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
+            '$1');
+
+        if ( Any.isEmpty(extension) ) {
+            return fallback;
+        }
+
+        return extension;
+    }
+
+    static getMime(source, fallback = 'text')
+    {
+        let file = Obj.get(source, 'name', source);
+
+        if ( Any.isEmpty(file) ) {
+            return fallback;
+        }
+
+        let extension = NPreviewHelper.getExtension(file);
+
+        if ( NPreviewHelper.getYoutubeKey(file) ) {
+            return 'video';
+        }
+
+        if ( NPreviewHelper.getVimeoKey(file) ) {
+            return 'video';
+        }
+
+        Obj.each(window.NPreviewMimes, (exts, key) => {
+            if ( Arr.has(exts, extension) ) fallback = key;
+        });
+
+        return fallback;
+    }
+
+    static getFullMime(source, fallback = 'text/plain')
+    {
+        let file = Obj.get(source, 'name', source);
+
+        if ( Any.isEmpty(file) ) {
+            return fallback;
+        }
+
+        if ( NPreviewHelper.getYoutubeKey(source) ) {
+            return 'video/youtube';
+        }
+
+        if ( NPreviewHelper.getVimeoKey(source) ) {
+            return 'video/vimeo';
+        }
+
+        return NPreviewHelper.getMime(file) + '/' + NPreviewHelper.getExtension(file);
+    }
+
+    static getVimeoKey(source, fallback = null)
+    {
+        if ( ! Any.isString(source) ) {
+            return fallback;
+        }
+
+        let host = source.match(/^https?:\/\/(www\.|player\.)?vimeo\.com/);
+
+        if ( ! host ) {
+            return fallback;
+        }
+
+        let path = source.match(/(\/[0-9]+)(&|$)/);
+
+        if ( path && path.length === 3 ) {
+            return path[0].replace(/(^\/|&$)/, '');
+        }
+
+        return fallback;
+    }
+
+    static getYoutubeKey(source, fallback)
+    {
+        if ( ! Any.isString(source) ) {
+            return fallback;
+        }
+
+        let host = source.match(/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)/);
+
+        if ( ! host ) {
+            return fallback;
+        }
+
+        let id = source.match(/(\?v=.*?)(?=&|$)/);
+
+        if ( id && id.length === 2 ) {
+            return id[0].replace(/^\?v=/, '');
+        }
+
+        let path = source.match(/(\.be\/.*?)(?=\?|$)/);
+
+        if ( path && path.length === 2 ) {
+            return path[0].replace(/^\.be\//, '');
+        }
+
+        let frame = source.match(/(\/embed\/)(.*?$)/);
+
+        if ( frame && frame.length === 3 ) {
+            return frame[0].replace(/^\/embed\//, '');
+        }
+
+        return fallback;
+    }
+
+}
+
+export default { NPreviewHelper }
+
+if ( ! window.NPreviewHelper ) {
+    window.NPreviewHelper = NPreviewHelper;
+}

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

@@ -1,22 +1,6 @@
-import { Obj, Arr, Any, Dom } from "@kizmann/pico-js";
-
-const fileMap = {
-    image: [
-        'jpg', 'jpeg', 'gif', 'svg', 'png'
-    ],
-    video: [
-        'mp4', 'webm', 'mov'
-    ],
-    font: [
-        'woff', 'ttf', 'otf'
-    ],
-    text: [
-        'csv', 'txt', 'html'
-    ],
-    application: [
-        'pdf', 'doc', 'xls'
-    ]
-}
+import { UUID, Obj, Arr, Any, Event } from "@kizmann/pico-js";
+import { NPreviewHandler } from "../_tools/preview-handler.js"
+import { NPreviewHelper } from "../_tools/preview-helper.js"
 
 export default {
 
@@ -38,6 +22,22 @@ export default {
             }
         },
 
+        index: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number, String]
+        },
+
+        group: {
+            default()
+            {
+                return UUID();
+            },
+            type: [String]
+        },
+
         fit: {
             default()
             {
@@ -51,7 +51,7 @@ export default {
             {
                 return null;
             },
-            typre: [String]
+            type: [String]
         },
 
         preview: {
@@ -59,7 +59,7 @@ export default {
             {
                 return true;
             },
-            typre: [Boolean]
+            type: [Boolean]
         },
 
         showSrc: {
@@ -67,15 +67,7 @@ export default {
             {
                 return true;
             },
-            typre: [Boolean]
-        },
-
-        map: {
-            default()
-            {
-                return fileMap;
-            },
-            type: [Object]
+            type: [Boolean]
         }
 
     },
@@ -94,82 +86,31 @@ export default {
 
         fileMime()
         {
-            return this.getFileMime();
+            return this.mime || NPreviewHelper.getMime(this.tempFile);
         },
 
         thumbMime()
         {
-            return this.getThumbMime();
+            return this.mime || NPreviewHelper.getMime(this.tempThumb);
         },
 
     },
 
-    data()
+    provide()
     {
-        return {
-            lightbox: false, load: false
-        };
+        return { NPreview: this };
     },
 
     methods: {
 
-        getFileMime(fallback = null)
-        {
-            let file = Obj.get(this.tempFile, 'name',
-                this.tempFile);
-
-            if ( Any.isEmpty(file) ) {
-                return fallback;
-            }
-
-            let extension = file.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-                '$1');
-
-            Obj.each(this.map, (exts, key) => {
-                if ( Arr.has(exts, extension) ) fallback = key;
-            });
-
-            if ( window.resolveVimeo(file) ) {
-                fallback = 'video';
-            }
-
-            if ( window.resolveYoutube(file) ) {
-                fallback = 'video';
-            }
-
-            if ( Any.isString(this.mime) ) {
-                fallback = this.mime;
-            }
-
-            return fallback;
-        },
-
-        getThumbMime(fallback = null)
+        openBox()
         {
-            if ( Any.isString(this.mime) ) {
-                return this.mime;
-            }
-
-            let file = Obj.get(this.tempThumb, 'name',
-                this.tempThumb);
-
-            if ( Any.isEmpty(file) ) {
-                return fallback;
-            }
-
-            let extension = file.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-                '$1');
-
-            Obj.each(this.map, (exts, key) => {
-                if ( Arr.has(exts, extension) ) fallback = key;
-            });
-
-            return fallback;
+            this.$refs.modal.openBox();
         },
 
-        showLightbox()
+        closeBox()
         {
-            this.lightbox = true;
+            this.$refs.modal.closeBox();
         },
 
     },
@@ -185,50 +126,42 @@ export default {
         }
 
         let props = {
-            type: this.thumbMime,
-            showSrc: false,
-        }
+            type: this.fileMime, showSrc: false,
+        };
 
         return (<NPreviewPlain src={this.tempThumb} {...props} />);
     },
 
     renderFull()
     {
-        let isObject = Any.isObject(this.tempFile);
-
         if ( this.fileMime === 'image' ) {
-            return (<NPreviewImage src={this.tempFile} />);
+            return (<NPreviewImage class={classList} src={this.tempFile} />);
         }
 
-        if ( this.fileMime === 'video' && ! isObject ) {
-            return (<NPreviewVideo src={this.tempFile} />);
+        if ( this.fileMime === 'video' ) {
+            return (<NPreviewVideo class={classList} src={this.tempFile} />);
         }
 
         let props = {
-            type: this.thumbMime,
-            showSrc: this.showSrc,
-        }
+            type: this.fileMime, showSrc: this.showSrc,
+        };
 
-        return (<NPreviewPlain src={this.tempFile} {...props} />);
+        return (<NPreviewPlain class={classList} src={this.tempFile} {...props} />);
     },
 
-    renderLightbox()
+    renderModal()
     {
-        if ( ! this.lightbox || ! this.preview ) {
+        if ( ! this.preview ) {
             return null;
         }
 
-        let slots = {
-            raw: this.ctor('renderFull')
-        }
-
-        let props = {
-            type: 'preview',
-            width: '80%',
-            height: '90%',
-        }
+        let modalProps = {
+            index: this.index, group: this.group, file: this.tempFile, showSrc: this.showSrc
+        };
 
-        return (<NModal vModel={this.lightbox} {...props} v-slots={slots} />);
+        return (
+            <NPreviewModal ref="modal" {...modalProps} />
+        );
     },
 
     render()
@@ -249,14 +182,14 @@ export default {
         let props = {};
 
         if ( this.preview ) {
-            props.onClick = this.showLightbox;
+            props.onClick = () => this.openBox();
         }
 
         let key = btoa(this.tempThumb);
 
         return (
             <div key={key} class={classList} {...props}>
-                { [this.ctor('renderPreview')(), this.ctor('renderLightbox')()] }
+                { [this.ctor('renderPreview')(), this.ctor('renderModal')()] }
             </div>
         );
     }

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

@@ -11,4 +11,5 @@
 
 .n-preview--contain img {
     object-fit: contain !important;
-}
+}
+

package/src/preview/src/preview-modal/preview-modal.jsx

@@ -0,0 +1,156 @@
+import { Any, Event, UUID } from "@kizmann/pico-js";
+import { NPreviewHandler } from "../_tools/preview-handler.js";
+import { NPreviewHelper } from "../_tools/preview-helper.js";
+
+export default {
+
+    name: 'NPreviewModal',
+
+    inject: {
+
+        NPreview: {
+            default: undefined
+        }
+
+    },
+
+    props: {
+
+        file: {
+            default()
+            {
+                return null;
+            }
+        },
+
+        index: {
+            default()
+            {
+                return 0;
+            },
+            type: [Number, String]
+        },
+
+        group: {
+            default()
+            {
+                return UUID();
+            },
+            type: [String]
+        },
+
+    },
+
+    data()
+    {
+        return { uid: UUID(), visible: false };
+    },
+
+    watch: {
+
+        visible: function (value) {
+            if ( value ) {
+                this.NPreview.$emit('slide');
+            }
+        }
+
+    },
+
+    mounted()
+    {
+        NPreviewHandler.create()
+            .append(this.$el);
+
+        NPreviewHandler.append(this);
+    },
+
+    beforeUnmount()
+    {
+        this.$el.remove();
+
+        NPreviewHandler.remove(this);
+    },
+
+    methods: {
+
+        openBox()
+        {
+            NPreviewHandler.open(this);
+        },
+
+        closeBox()
+        {
+            NPreviewHandler.close();
+        }
+
+    },
+
+    renderPrev()
+    {
+        let prevProps = {
+            size: 'lg', square: true, icon: 'fa fa-angle-left'
+        };
+
+        prevProps['onClick'] = () => {
+            this.gotoPrev();
+        };
+
+        return (
+            <div class="n-preview__prev">
+                <NButton {...prevProps} />
+            </div>
+        );
+    },
+
+    renderNext()
+    {
+        let nextProps = {
+            size: 'lg', square: true, icon: 'fa fa-angle-right'
+        };
+
+        nextProps['onClick'] = () => {
+            this.gotoNext();
+        };
+
+        return (
+            <div class="n-preview__next">
+                <NButton {...nextProps} />
+            </div>
+        );
+    },
+
+
+
+    renderImage()
+    {
+        let classList = [
+            'n-preview-frame'
+        ];
+
+        let mime = NPreviewHelper.getMime(this.file);
+
+        if ( mime === 'image' ) {
+            return (<NPreviewImage class={classList} src={this.file} />);
+        }
+
+        if ( mime === 'video' ) {
+            return (<NPreviewVideo class={classList} src={this.file} />);
+        }
+
+        let props = {
+            type: mime, showSrc: this.showSrc,
+        };
+
+        return (<NPreviewPlain class={classList} src={this.file} {...props} />);
+    },
+
+    render()
+    {
+        if ( ! this.visible ) {
+            return null;
+        }
+
+        return this.ctor('renderImage')();
+    },
+
+}

package/src/preview/src/preview-modal/preview-modal.scss

@@ -0,0 +1,56 @@
+@import "../../../root/vars";
+
+.n-preview-modal {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: 40px 80px;
+}
+
+.n-preview-modal:not(.n-ready) {
+    pointer-events: none;
+    opacity: 0;
+}
+
+.n-preview-modal__close {
+    cursor: pointer;
+    z-index: 100;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+}
+
+.n-preview-modal .n-preview-frame {
+    background: transparent !important;
+}
+
+.n-preview-modal__prev,
+.n-preview-modal__next {
+    cursor: pointer;
+    z-index: 500;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    transform: translateY(-50%);
+}
+
+.n-preview-modal__prev {
+    left: 20px;
+}
+
+.n-preview-modal__next {
+    right: 20px;
+}

package/src/preview/src/preview-video/preview-video.jsx

@@ -1,58 +1,5 @@
 import { Obj, Arr, Str, Any, Dom } from "@kizmann/pico-js";
-
-window.resolveYoutube = function(url, fallback = null) {
-
-    if ( ! Any.isString(url) ) {
-        return fallback;
-    }
-
-    let host = url.match(/^https?:\/\/(www\.)?(youtube\.com|youtu\.be)/);
-
-    if ( ! host ) {
-        return fallback;
-    }
-
-    let id = url.match(/(\?v=.*?)(?=&|$)/);
-
-    if ( id && id.length === 2 ) {
-        return id[0].replace(/^\?v=/, '');
-    }
-
-    let path = url.match(/(\.be\/.*?)(?=\?|$)/);
-
-    if ( path && path.length === 2 ) {
-        return path[0].replace(/^\.be\//, '');
-    }
-
-    let frame = url.match(/(\/embed\/)(.*?$)/);
-
-    if ( frame && frame.length === 3 ) {
-        return frame[0].replace(/^\/embed\//, '');
-    }
-
-    return fallback;
-}
-
-window.resolveVimeo = function(url, fallback = null) {
-
-    if ( ! Any.isString(url) ) {
-        return fallback;
-    }
-
-    let host = url.match(/^https?:\/\/(www\.|player\.)?vimeo\.com/);
-
-    if ( ! host ) {
-        return fallback;
-    }
-
-    let path = url.match(/(\/[0-9]+)(&|$)/);
-
-    if ( path && path.length === 3 ) {
-        return path[0].replace(/(^\/|&$)/, '');
-    }
-
-    return fallback;
-}
+import { NPreviewHelper } from "../_tools/preview-helper.js"
 
 export default {
 
@@ -117,7 +64,7 @@ export default {
 
         resolveYoutube()
         {
-            let youtube = window.resolveYoutube(this.src);
+            let youtube = NPreviewHelper.getYoutubeKey(this.src);
 
             if ( ! youtube ) {
                 return false;
@@ -132,7 +79,7 @@ export default {
 
         resolveVimeo()
         {
-            let vimeo = window.resolveVimeo(this.src);
+            let vimeo = NPreviewHelper.getVimeoKey(this.src);
 
             if ( ! vimeo ) {
                 return false;
@@ -173,12 +120,9 @@ export default {
     {
         let src = Obj.get(this.src, 'name', this.src);
 
-        let extension = src.replace(/^.*?\.([^.?]+)(\?.*?)?$/,
-            '$1');
-
         return (
             <video width="320" height="240" controls>
-                <source src={this.tempSrc || this.src} type={`video/${extension}`} />
+                <source src={this.tempSrc || this.src} type={NPreviewHelper.getFullMime(src)} />
             </video>
         );
     },

package/src/resizer/index.js

@@ -1,5 +1,7 @@
 import Resizer from "./src/resizer/resizer.jsx";
+import ResizerNext from "./src/resizer/resizer-next.jsx";
 
 export default function (App) {
-    App.component(Resizer.name, Resizer);
+    // App.component(Resizer.name, Resizer);
+    App.component(ResizerNext.name, ResizerNext);
 }