@kizmann/nano-ui 1.0.15 → 1.1.0

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