@kizmann/nano-ui 1.0.15 → 1.1.2

package/src/popover/src/popover/popover.scss

@@ -1,14 +1,148 @@
-@use 'sass:map';
-@import "../../../root/vars";
+@use "../../../root/helpers" as *;
 
 .n-popover {
     position: absolute;
     display: inline-flex;
     flex-direction: column;
-    transition: opacity 0.1s ease-out;
+    transition: opacity 0.1s;
+    font-size: size('base-fnt');
 }
 
-.n-popover:not(.n-ready) {
+.n-popover:before,
+.n-popover:after {
+    content: '\00a0';
+    position: absolute;
+    display: none;
+}
+
+.n-popover:before {
+    z-index: 220;
+}
+
+.n-popover:after {
+    z-index: 210;
+}
+
+.n-popover:not([data-position="auto"]):before,
+.n-popover:not([data-position="auto"]):after {
+    display: block;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after,
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    left: 0;
+    width: 16px;
+    height: 6px;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after,
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    width: var(--n-parent-width, 16px);
+    max-width: var(--n-node-width, 100%);
+}
+
+.n-popover[data-position="top-start"]:before,
+.n-popover[data-position="top-start"]:after,
+.n-popover[data-position="bottom-start"]:before,
+.n-popover[data-position="bottom-start"]:after {
+    left: 0;
+}
+
+.n-popover[data-position="top-end"]:before,
+.n-popover[data-position="top-end"]:after,
+.n-popover[data-position="bottom-end"]:before,
+.n-popover[data-position="bottom-end"]:after {
+    right: 0;
+}
+
+.n-popover[data-position="top-center"]:before,
+.n-popover[data-position="top-center"]:after,
+.n-popover[data-position="bottom-center"]:before,
+.n-popover[data-position="bottom-center"]:after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.n-popover[data-position^="top-"] {
+    padding-bottom: 6px;
+}
+
+.n-popover[data-position^="bottom-"] {
+    padding-top: 6px;
+}
+
+.n-popover[data-position^="top-"]:before,
+.n-popover[data-position^="top-"]:after {
+    bottom: 0;
+}
+
+.n-popover[data-position^="bottom-"]:before,
+.n-popover[data-position^="bottom-"]:after {
+    top: 0;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after,
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    width: 6px;
+    height: 16px;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after,
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    height: var(--n-parent-height, 16px);
+    max-height: var(--n-node-height, 100%);
+}
+
+.n-popover[data-position="left-start"]:before,
+.n-popover[data-position="left-start"]:after,
+.n-popover[data-position="right-start"]:before,
+.n-popover[data-position="right-start"]:after {
+    top: 0;
+}
+
+.n-popover[data-position="left-end"]:before,
+.n-popover[data-position="left-end"]:after,
+.n-popover[data-position="right-end"]:before,
+.n-popover[data-position="right-end"]:after {
+    bottom: 0;
+}
+
+.n-popover[data-position="left-center"]:before,
+.n-popover[data-position="left-center"]:after,
+.n-popover[data-position="right-center"]:before,
+.n-popover[data-position="right-center"]:after {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.n-popover[data-position^="left-"] {
+    padding-right: 6px;
+}
+
+.n-popover[data-position^="right-"] {
+    padding-left: 6px;
+}
+
+.n-popover[data-position^="left-"]:before,
+.n-popover[data-position^="left-"]:after {
+    right: 0;
+}
+
+.n-popover[data-position^="right-"]:before,
+.n-popover[data-position^="right-"]:after {
+    left: 0;
+}
+
+
+.n-popover:not([data-ready]) {
     opacity: 0;
 }
 
@@ -22,6 +156,7 @@
 
 .n-popover__frame {
     overflow: hidden;
+    border-radius: size('base-rad');
 }
 
 .n-popover__header {
@@ -43,14 +178,18 @@
     flex-direction: row;
     align-items: center;
     justify-content: stretch;
-    text-decoration: none
+    text-decoration: none;
+    padding: size('base-pad', 'calc($ - 2px)') size('base-pad');
+    font-size: size('base-fnt');
 }
 
 .n-popover-group {
+    font-size: 0.8em;
     font-weight: bold;
 }
 
 .n-popover-option {
+    font-size: 1em;
     width: 100%;
 }
 
@@ -88,7 +227,9 @@
 
 .n-popover-option .n-icon {
     flex: 0 0 auto;
+    font-size: size('base-fnt-icon');
     text-align: center;
+    width: size('base-pad', 'calc($ * 2)');
 }
 
 .n-popover-option .n-icon--before {
@@ -99,78 +240,45 @@
     order: 3;
 }
 
-@each $suffix, $values in $form {
-
-    $-popover-font: map.get($values, 'font');
-    $-popover-size: map.get($values, 'size');
-    $-popover-radius: map.get($values, 'radius');
-    $-popover-ratio: map.get($values, 'ratio');
-
-    .n-popover--#{$suffix} {
-        font-size: $-popover-font;
-    }
-
-    .n-popover--#{$suffix} .n-popover__frame {
-        border-radius: $-popover-radius;
-    }
-
-    $-popover-padding: $-popover-size * $-popover-ratio;
-
-    .n-popover--#{$suffix} .n-popover__header {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-    
-    .n-popover--#{$suffix} .n-popover__body {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-    
-    .n-popover--#{$suffix} .n-popover__footer {
-        padding: $-popover-padding $-popover-padding * 1.2;
-    }
-
-    .n-popover-group.n-popover-group--#{$suffix} {
-        font-size: $-popover-font - 2;
-        padding: $-popover-padding * 0.8 $-popover-padding * 1.2 $-popover-padding * 0.4;
-    }
-
-    .n-popover-option.n-popover-option--#{$suffix} {
-        padding: $-popover-padding * 0.6 $-popover-padding * 1.2;
-    }
-
-    .n-popover--#{$suffix} .n-popover__body .n-popover-group,
-    .n-popover--#{$suffix} .n-popover__body .n-popover-option {
-        width: calc(100% + #{$-popover-padding * 2.4});
-        margin: 0 -#{$-popover-padding * 1.2};
-    }
-
-    .n-popover--#{$suffix} .n-popover__body .n-popover-group:first-child,
-    .n-popover--#{$suffix} .n-popover__body .n-popover-option:first-child {
-        margin-top: -#{$-popover-padding};
-    }
-
-    .n-popover--#{$suffix}  .n-popover__body .n-popover-group:last-child,
-    .n-popover--#{$suffix}  .n-popover__body .n-popover-option:last-child {
-        margin-bottom: -#{$-popover-padding};
-    }
-
-    .n-popover-option--#{$suffix} .n-image {
-        width: $-popover-font + 10;
-        height: $-popover-font + 10;
-    }
-
-    .n-popover-option--#{$suffix} .n-icon {
-        width: $-popover-font;
-        font-size: $-popover-font - 4;
-    }
-
-    .n-popover-option--#{$suffix} .n-image--before,
-    .n-popover-option--#{$suffix} .n-icon--before {
-        margin-right: $-popover-padding;
-    }
-
-    .n-popover-option--#{$suffix} .n-image--after,
-    .n-popover-option--#{$suffix} .n-icon--after {
-        margin-left: $-popover-padding;
-    }
+.n-popover .n-popover__header {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__body {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__footer {
+    padding: size('base-pad-vertical') size('base-pad');
+}
+
+.n-popover .n-popover__body .n-popover-group:first-child,
+.n-popover .n-popover__body .n-popover-option:first-child {
+    margin-top: size('base-pad-vertical', 'calc($ * -1)');
+}
+
+.n-popover  .n-popover__body .n-popover-group:last-child,
+.n-popover  .n-popover__body .n-popover-option:last-child {
+    margin-bottom: size('base-pad-vertical', 'calc($ * -1)');
+}
+
+.n-popover .n-popover__body .n-popover-group,
+.n-popover .n-popover__body .n-popover-option {
+    width: size('base-pad', 'calc(100% + ($ * 2))');
+    margin: 0 size('base-pad', 'calc($ * -1)');
+}
+
+.n-popover-option .n-image {
+    width: size('base-pad', 'calc($ * 2)');
+    height: size('base-pad', 'calc($ * 2)');
+}
 
+.n-popover-option .n-image--before,
+.n-popover-option .n-icon--before {
+    margin-right: size('base-pad');
+}
+
+.n-popover-option .n-image--after,
+.n-popover-option .n-icon--after {
+    margin-left: size('base-pad');
 }

package/src/preview/index.js

@@ -2,11 +2,53 @@ import Preview from "./src/preview/preview.jsx";
 import PreviewPlain from "./src/preview-plain/preview-plain.jsx";
 import PreviewImage from "./src/preview-image/preview-image.jsx";
 import PreviewVideo from "./src/preview-video/preview-video.jsx";
+import PreviewModal from "./src/preview-modal/preview-modal.jsx";
+
+import PreviewHelper from "./src/preview/preview-helper.mjs";
+import PreviewHandler from "./src/preview/preview-handler.mjs";
+
+window.DefaultPreviewMimes = {
+    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 default function (App) {
-    App.component(Preview.name, Preview);
-    App.component(PreviewPlain.name, PreviewPlain);
-    App.component(PreviewImage.name, PreviewImage);
-    App.component(PreviewVideo.name, PreviewVideo);
+
+    if ( ! window.PreviewMimes ) {
+        window.PreviewMimes = pi.Obj.assign(window.DefaultPreviewMimes, window.PreviewMimes);
+    }
+
+    let directives = [
+        PreviewHelper, PreviewHandler
+    ];
+
+    pi.Arr.each(directives, (glob) => {
+        App.config.globalProperties[glob.alias] = glob;
+    });
+
+    let components = [
+        Preview, PreviewModal, PreviewPlain, PreviewImage, PreviewVideo
+    ];
+
+    pi.Arr.each(components, (comp) => {
+        App.component(comp.name, comp);
+    });
+
 }
 

package/src/preview/index.scss

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

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

@@ -0,0 +1,205 @@
+import { Any, 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 ( ! Any.isObject(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 ( ! Any.isObject(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()
+    {
+        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'
+        ];
+
+        let 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.removeClass(['n-ready', 'n-multi']);
+    }
+
+    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;
+    }
+
+}
+
+if ( ! window.PreviewHandler ) {
+    window.PreviewHandler = PreviewHandler;
+}
+
+export default PreviewHandler;

package/src/preview/src/preview/preview-helper.mjs

@@ -0,0 +1,126 @@
+import { Any, Arr, Dom, Obj } from "@kizmann/pico-js";
+
+export class PreviewHelper
+{
+    static alias = 'PreviewHelper';
+
+    static getExt(source, fallback = 'plain')
+    {
+        let match = source.match(/\.([^.?]+)(\?.*?)?$/);
+
+        if ( ! match ) {
+            return fallback;
+        }
+
+        if ( Any.isEmpty(match[1]) ) {
+            return fallback;
+        }
+
+        return match[1];
+    }
+
+    static getType(source, fallback = 'text')
+    {
+        let file = Obj.get(source, 'name', source);
+
+        if ( Any.isEmpty(file) ) {
+            return fallback;
+        }
+
+        let extension = PreviewHelper.getExt(file);
+
+        if ( PreviewHelper.getYoutubeKey(file) ) {
+            return 'video';
+        }
+
+        if ( PreviewHelper.getVimeoKey(file) ) {
+            return 'video';
+        }
+
+        Obj.each(window.PreviewMimes, (exts, key) => {
+            if ( Arr.has(exts, extension) ) fallback = key;
+        });
+
+        return fallback;
+    }
+
+    static getMime(source, fallback = 'text/plain')
+    {
+        let file = Obj.get(source, 'name', source);
+
+        if ( Any.isEmpty(file) ) {
+            return fallback;
+        }
+
+        if ( PreviewHelper.getYoutubeKey(source) ) {
+            return 'video/youtube';
+        }
+
+        if ( PreviewHelper.getVimeoKey(source) ) {
+            return 'video/vimeo';
+        }
+
+        return PreviewHelper.getType(file) + '/' + PreviewHelper.getExt(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;
+    }
+
+}
+
+if ( ! window[PreviewHelper.alias] ) {
+    window[PreviewHelper.alias] = PreviewHelper;
+}
+
+export default PreviewHelper;