@kizmann/nano-ui 1.0.15 → 1.1.0

package/src/preview/index.scss

@@ -1,4 +1,5 @@
 @import "./src/preview/preview";
+@import "./src/preview-modal/preview-modal";
 @import "./src/preview-plain/preview-plain";
 @import "./src/preview-image/preview-image";
 @import "./src/preview-video/preview-video";

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

@@ -0,0 +1,193 @@
+import { Any, Arr, Obj, Dom } from "@kizmann/pico-js";
+
+window.NPreviewCacheGroups = {};
+
+export class NPreviewHandler
+{
+    current = null;
+
+    static append(item)
+    {
+        if ( !window.NPreviewCacheGroups[item.group] ) {
+            window.NPreviewCacheGroups[item.group] = {};
+        }
+
+        window.NPreviewCacheGroups[item.group][item.uid] = item;
+    }
+
+    static remove(item)
+    {
+        delete window.NPreviewCacheGroups[item.group][item.uid];
+    }
+
+    static get(group)
+    {
+        if ( !window.NPreviewCacheGroups[group] ) {
+            window.NPreviewCacheGroups[group] = {};
+        }
+
+        return Arr.sort(window.NPreviewCacheGroups[group], 'index');
+    }
+
+    static next()
+    {
+        if ( ! Any.isObject(this.current) ) {
+            return null;
+        }
+
+        let items = NPreviewHandler.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 NPreviewHandler.switch(next);
+    }
+
+    static prev()
+    {
+        if ( ! Any.isObject(this.current) ) {
+            return null;
+        }
+
+        let items = NPreviewHandler.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 NPreviewHandler.switch(prev);
+    }
+
+    static create()
+    {
+        el = Dom.find('.n-preview-modal');
+
+        if ( el.length() ) {
+            return el;
+        }
+
+        let el = Dom.make('div', {
+            classList: 'n-preview-modal'
+        });
+
+        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', () => {
+            NPreviewHandler.close()
+        });
+
+        close.appendTo(el);
+
+        let prev = Dom.make('div', {
+            classList: 'n-preview-modal__prev',
+            innerHTML: `<i class="${nano.Icons.angleLeft}"></i>`
+        });
+
+        prev.on('click', () => {
+            NPreviewHandler.prev()
+        });
+
+        prev.appendTo(el);
+
+        let next = Dom.make('div', {
+            classList: 'n-preview-modal__next',
+            innerHTML: `<i class="${nano.Icons.angleRight}"></i>`
+        });
+
+        next.on('click', () => {
+            NPreviewHandler.next()
+        });
+
+        next.appendTo(el);
+
+        el.appendTo(document.body);
+
+        return el;
+    }
+
+    static open(item)
+    {
+        let el = NPreviewHandler.create();
+
+        el.css({
+            'z-index': window.zIndex++
+        });
+
+        let keydownFn = (e) => {
+
+            if ( e.keyCode === 27 ) {
+                return NPreviewHandler.close();
+            }
+
+            if ( e.keyCode === 37 ) {
+                return NPreviewHandler.prev();
+            }
+
+            if ( e.keyCode === 39 ) {
+                return NPreviewHandler.next();
+            }
+
+        }
+
+        Dom.find(window).on('keydown', keydownFn, {
+            uid: 'n-preview-modal'
+        });
+
+        NPreviewHandler.switch(item);
+
+        el.addClass('n-ready');
+    }
+
+    static close()
+    {
+        let el = NPreviewHandler.create();
+
+        Dom.find(window).off('keydown', null, {
+            uid: 'n-preview-modal'
+        });
+
+        NPreviewHandler.switch(null);
+
+        el.removeClass('n-ready');
+    }
+
+    static switch(item)
+    {
+        if ( Any.isObject(this.current) ) {
+            Obj.set(this.current, 'visible', false);
+        }
+
+        this.current = item;
+
+        if ( Any.isObject(this.current) ) {
+            Obj.set(this.current, 'visible', true);
+        }
+
+        return item;
+    }
+
+}
+
+export default { NPreviewHandler }
+
+if ( ! window.NPreviewHandler ) {
+    window.NPreviewHandler = NPreviewHandler;
+}

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;
-}
+}
+