uikit 3.11.2-dev.f2970ffaa → 3.11.2-dev.f3ade19c4

package/src/js/components/internal/slideshow-animations.js

@@ -1,15 +1,15 @@
-import Animations, {scale3d, translate, translated} from '../../mixin/internal/slideshow-animations';
-import {assign, css} from 'uikit-util';
-
-export default assign({}, Animations, {
-
+import Animations, {
+    scale3d,
+    translate,
+    translated,
+} from '../../mixin/internal/slideshow-animations';
+import { css } from 'uikit-util';
+
+export default {
+    ...Animations,
     fade: {
-
         show() {
-            return [
-                {opacity: 0, zIndex: 0},
-                {zIndex: -1}
-            ];
+            return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
         },
 
         percent(current) {
@@ -17,21 +17,13 @@ export default assign({}, Animations, {
         },
 
         translate(percent) {
-            return [
-                {opacity: 1 - percent, zIndex: 0},
-                {zIndex: -1}
-            ];
-        }
-
+            return [{ opacity: 1 - percent, zIndex: 0 }, { zIndex: -1 }];
+        },
     },
 
     scale: {
-
         show() {
-            return [
-                {opacity: 0, transform: scale3d(1 + .5), zIndex: 0},
-                {zIndex: -1}
-            ];
+            return [{ opacity: 0, transform: scale3d(1 + 0.5), zIndex: 0 }, { zIndex: -1 }];
         },
 
         percent(current) {
@@ -40,79 +32,69 @@ export default assign({}, Animations, {
 
         translate(percent) {
             return [
-                {opacity: 1 - percent, transform: scale3d(1 + .5 * percent), zIndex: 0},
-                {zIndex: -1}
+                { opacity: 1 - percent, transform: scale3d(1 + 0.5 * percent), zIndex: 0 },
+                { zIndex: -1 },
             ];
-        }
-
+        },
     },
 
     pull: {
-
         show(dir) {
             return dir < 0
                 ? [
-                    {transform: translate(30), zIndex: -1},
-                    {transform: translate(), zIndex: 0}
-                ]
+                      { transform: translate(30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ]
                 : [
-                    {transform: translate(-100), zIndex: 0},
-                    {transform: translate(), zIndex: -1}
-                ];
+                      { transform: translate(-100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ];
         },
 
         percent(current, next, dir) {
-            return dir < 0
-                ? 1 - translated(next)
-                : translated(current);
+            return dir < 0 ? 1 - translated(next) : translated(current);
         },
 
         translate(percent, dir) {
             return dir < 0
                 ? [
-                    {transform: translate(30 * percent), zIndex: -1},
-                    {transform: translate(-100 * (1 - percent)), zIndex: 0}
-                ]
+                      { transform: translate(30 * percent), zIndex: -1 },
+                      { transform: translate(-100 * (1 - percent)), zIndex: 0 },
+                  ]
                 : [
-                    {transform: translate(-percent * 100), zIndex: 0},
-                    {transform: translate(30 * (1 - percent)), zIndex: -1}
-                ];
-        }
-
+                      { transform: translate(-percent * 100), zIndex: 0 },
+                      { transform: translate(30 * (1 - percent)), zIndex: -1 },
+                  ];
+        },
     },
 
     push: {
-
         show(dir) {
             return dir < 0
                 ? [
-                    {transform: translate(100), zIndex: 0},
-                    {transform: translate(), zIndex: -1}
-                ]
+                      { transform: translate(100), zIndex: 0 },
+                      { transform: translate(), zIndex: -1 },
+                  ]
                 : [
-                    {transform: translate(-30), zIndex: -1},
-                    {transform: translate(), zIndex: 0}
-                ];
+                      { transform: translate(-30), zIndex: -1 },
+                      { transform: translate(), zIndex: 0 },
+                  ];
         },
 
         percent(current, next, dir) {
-            return dir > 0
-                ? 1 - translated(next)
-                : translated(current);
+            return dir > 0 ? 1 - translated(next) : translated(current);
         },
 
         translate(percent, dir) {
             return dir < 0
                 ? [
-                    {transform: translate(percent * 100), zIndex: 0},
-                    {transform: translate(-30 * (1 - percent)), zIndex: -1}
-                ]
+                      { transform: translate(percent * 100), zIndex: 0 },
+                      { transform: translate(-30 * (1 - percent)), zIndex: -1 },
+                  ]
                 : [
-                    {transform: translate(-30 * percent), zIndex: -1},
-                    {transform: translate(100 * (1 - percent)), zIndex: 0}
-                ];
-        }
-
-    }
-
-});
+                      { transform: translate(-30 * percent), zIndex: -1 },
+                      { transform: translate(100 * (1 - percent)), zIndex: 0 },
+                  ];
+        },
+    },
+};

package/src/js/components/lightbox-panel.js

@@ -3,10 +3,24 @@ import Container from '../mixin/container';
 import Modal from '../mixin/modal';
 import Slideshow from '../mixin/slideshow';
 import Togglable from '../mixin/togglable';
-import {$, addClass, ajax, append, assign, attr, fragment, getImage, getIndex, html, on, pointerDown, pointerMove, removeClass, Transition, trigger} from 'uikit-util';
+import {
+    $,
+    addClass,
+    append,
+    attr,
+    fragment,
+    getImage,
+    getIndex,
+    html,
+    on,
+    pointerDown,
+    pointerMove,
+    removeClass,
+    Transition,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Container, Modal, Togglable, Slideshow],
 
     functional: true,
@@ -15,7 +29,7 @@ export default {
         delayControls: Number,
         preload: Number,
         videoAutoplay: Boolean,
-        template: String
+        template: String,
     },
 
     data: () => ({
@@ -40,39 +54,31 @@ export default {
                         <a class="uk-lightbox-button uk-position-center-left uk-position-medium uk-transition-fade" href uk-slidenav-previous uk-lightbox-item="previous"></a>
                         <a class="uk-lightbox-button uk-position-center-right uk-position-medium uk-transition-fade" href uk-slidenav-next uk-lightbox-item="next"></a>
                         <div class="uk-lightbox-toolbar uk-lightbox-caption uk-position-bottom uk-text-center uk-transition-slide-bottom uk-transition-opaque"></div>
-                    </div>`
+                    </div>`,
     }),
 
     created() {
-
         const $el = $(this.template);
         const list = $(this.selList, $el);
         this.items.forEach(() => append(list, '<li>'));
 
         this.$mount(append(this.container, $el));
-
     },
 
     computed: {
-
-        caption({selCaption}, $el) {
+        caption({ selCaption }, $el) {
             return $(selCaption, $el);
-        }
-
+        },
     },
 
     events: [
-
         {
-
             name: `${pointerMove} ${pointerDown} keydown`,
 
-            handler: 'showControls'
-
+            handler: 'showControls',
         },
 
         {
-
             name: 'click',
 
             self: true,
@@ -82,58 +88,48 @@ export default {
             },
 
             handler(e) {
-
                 if (e.defaultPrevented) {
                     return;
                 }
 
                 this.hide();
-            }
-
+            },
         },
 
         {
-
             name: 'shown',
 
             self: true,
 
             handler() {
                 this.showControls();
-            }
-
+            },
         },
 
         {
-
             name: 'hide',
 
             self: true,
 
             handler() {
-
                 this.hideControls();
 
                 removeClass(this.slides, this.clsActive);
                 Transition.stop(this.slides);
-
-            }
+            },
         },
 
         {
-
             name: 'hidden',
 
             self: true,
 
             handler() {
                 this.$destroy(true);
-            }
-
+            },
         },
 
         {
-
             name: 'keyup',
 
             el() {
@@ -141,7 +137,6 @@ export default {
             },
 
             handler(e) {
-
                 if (!this.isToggled(this.$el) || !this.draggable) {
                     return;
                 }
@@ -154,15 +149,13 @@ export default {
                         this.show('next');
                         break;
                 }
-            }
+            },
         },
 
         {
-
             name: 'beforeitemshow',
 
             handler(e) {
-
                 if (this.isToggled()) {
                     return;
                 }
@@ -176,44 +169,34 @@ export default {
                 this.animation = Animations['scale'];
                 removeClass(e.target, this.clsActive);
                 this.stack.splice(1, 0, this.index);
-
-            }
-
+            },
         },
 
         {
-
             name: 'itemshow',
 
             handler() {
-
                 html(this.caption, this.getItem().caption || '');
 
                 for (let j = -this.preload; j <= this.preload; j++) {
                     this.loadItem(this.index + j);
                 }
-
-            }
-
+            },
         },
 
         {
-
             name: 'itemshown',
 
             handler() {
                 this.draggable = this.$props.draggable;
-            }
-
+            },
         },
 
         {
-
             name: 'itemload',
 
-            handler(_, item) {
-
-                const {source: src, type, alt = '', poster, attrs = {}} = item;
+            async handler(_, item) {
+                const { source: src, type, alt = '', poster, attrs = {} } = item;
 
                 this.setItem(item, '<span uk-spinner></span>');
 
@@ -228,80 +211,103 @@ export default {
                     allowfullscreen: '',
                     style: 'max-width: 100%; box-sizing: border-box;',
                     'uk-responsive': '',
-                    'uk-video': `${this.videoAutoplay}`
+                    'uk-video': `${this.videoAutoplay}`,
                 };
 
                 // Image
                 if (type === 'image' || src.match(/\.(avif|jpe?g|a?png|gif|svg|webp)($|\?)/i)) {
-
-                    getImage(src, attrs.srcset, attrs.size).then(
-                        ({width, height}) => this.setItem(item, createEl('img', assign({src, width, height, alt}, attrs))),
-                        () => this.setError(item)
-                    );
-
-                // Video
+                    try {
+                        const { width, height } = await getImage(src, attrs.srcset, attrs.size);
+                        this.setItem(item, createEl('img', { src, width, height, alt, ...attrs }));
+                    } catch (e) {
+                        this.setError(item);
+                    }
+
+                    // Video
                 } else if (type === 'video' || src.match(/\.(mp4|webm|ogv)($|\?)/i)) {
-
-                    const video = createEl('video', assign({
+                    const video = createEl('video', {
                         src,
                         poster,
                         controls: '',
                         playsinline: '',
-                        'uk-video': `${this.videoAutoplay}`
-                    }, attrs));
+                        'uk-video': `${this.videoAutoplay}`,
+                        ...attrs,
+                    });
 
                     on(video, 'loadedmetadata', () => {
-                        attr(video, {width: video.videoWidth, height: video.videoHeight});
+                        attr(video, { width: video.videoWidth, height: video.videoHeight });
                         this.setItem(item, video);
                     });
                     on(video, 'error', () => this.setError(item));
 
-                // Iframe
+                    // Iframe
                 } else if (type === 'iframe' || src.match(/\.(html|php)($|\?)/i)) {
+                    this.setItem(
+                        item,
+                        createEl('iframe', {
+                            src,
+                            frameborder: '0',
+                            allowfullscreen: '',
+                            class: 'uk-lightbox-iframe',
+                            ...attrs,
+                        })
+                    );
 
-                    this.setItem(item, createEl('iframe', assign({
-                        src,
-                        frameborder: '0',
-                        allowfullscreen: '',
-                        class: 'uk-lightbox-iframe'
-                    }, attrs)));
-
-                // YouTube
-                } else if ((matches = src.match(/\/\/(?:.*?youtube(-nocookie)?\..*?[?&]v=|youtu\.be\/)([\w-]{11})[&?]?(.*)?/))) {
-
-                    this.setItem(item, createEl('iframe', assign({
-                        src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${matches[3] ? `?${matches[3]}` : ''}`,
-                        width: 1920,
-                        height: 1080
-                    }, iframeAttrs, attrs)));
-
-                // Vimeo
-                } else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
-
-                    ajax(`https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(src)}`, {
-                        responseType: 'json',
-                        withCredentials: false
-                    }).then(
-                        ({response: {height, width}}) => this.setItem(item, createEl('iframe', assign({
-                            src: `https://player.vimeo.com/video/${matches[1]}${matches[2] ? `?${matches[2]}` : ''}`,
-                            width,
-                            height
-                        }, iframeAttrs, attrs))),
-                        () => this.setError(item)
+                    // YouTube
+                } else if (
+                    (matches = src.match(
+                        /\/\/(?:.*?youtube(-nocookie)?\..*?[?&]v=|youtu\.be\/)([\w-]{11})[&?]?(.*)?/
+                    ))
+                ) {
+                    this.setItem(
+                        item,
+                        createEl('iframe', {
+                            src: `https://www.youtube${matches[1] || ''}.com/embed/${matches[2]}${
+                                matches[3] ? `?${matches[3]}` : ''
+                            }`,
+                            width: 1920,
+                            height: 1080,
+                            ...iframeAttrs,
+                            ...attrs,
+                        })
                     );
 
+                    // Vimeo
+                } else if ((matches = src.match(/\/\/.*?vimeo\.[a-z]+\/(\d+)[&?]?(.*)?/))) {
+                    try {
+                        const { height, width } = await (
+                            await fetch(
+                                `https://vimeo.com/api/oembed.json?maxwidth=1920&url=${encodeURI(
+                                    src
+                                )}`,
+                                {
+                                    credentials: 'omit',
+                                }
+                            )
+                        ).json();
+
+                        this.setItem(
+                            item,
+                            createEl('iframe', {
+                                src: `https://player.vimeo.com/video/${matches[1]}${
+                                    matches[2] ? `?${matches[2]}` : ''
+                                }`,
+                                width,
+                                height,
+                                ...iframeAttrs,
+                                ...attrs,
+                            })
+                        );
+                    } catch (e) {
+                        this.setError(item);
+                    }
                 }
-
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         loadItem(index = this.index) {
-
             const item = this.getItem(index);
 
             if (!this.getSlide(item).childElementCount) {
@@ -314,7 +320,7 @@ export default {
         },
 
         setItem(item, content) {
-            trigger(this.$el, 'itemloaded', [this, html(this.getSlide(item), content) ]);
+            trigger(this.$el, 'itemloaded', [this, html(this.getSlide(item), content)]);
         },
 
         getSlide(item) {
@@ -326,20 +332,16 @@ export default {
         },
 
         showControls() {
-
             clearTimeout(this.controlsTimer);
             this.controlsTimer = setTimeout(this.hideControls, this.delayControls);
 
             addClass(this.$el, 'uk-active', 'uk-transition-active');
-
         },
 
         hideControls() {
             removeClass(this.$el, 'uk-active', 'uk-transition-active');
-        }
-
-    }
-
+        },
+    },
 };
 
 function createEl(tag, attrs) {

package/src/js/components/lightbox.js

@@ -1,28 +1,23 @@
 import LightboxPanel from './lightbox-panel';
-import {$$, assign, data, findIndex, isElement, on, parseOptions, uniqueBy} from 'uikit-util';
+import { $$, assign, data, findIndex, isElement, on, parseOptions, uniqueBy } from 'uikit-util';
 
 export default {
-
     install,
 
-    props: {toggle: String},
+    props: { toggle: String },
 
-    data: {toggle: 'a'},
+    data: { toggle: 'a' },
 
     computed: {
-
         toggles: {
-
-            get({toggle}, $el) {
+            get({ toggle }, $el) {
                 return $$(toggle, $el);
             },
 
             watch() {
                 this.hide();
-            }
-
-        }
-
+            },
+        },
     },
 
     disconnected() {
@@ -30,9 +25,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -42,61 +35,46 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.show(e.current);
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         show(index) {
-
             const items = uniqueBy(this.toggles.map(toItem), 'source');
 
             if (isElement(index)) {
-                const {source} = toItem(index);
-                index = findIndex(items, ({source: src}) => source === src);
+                const { source } = toItem(index);
+                index = findIndex(items, ({ source: src }) => source === src);
             }
 
-            this.panel = this.panel || this.$create('lightboxPanel', assign({}, this.$props, {items}));
+            this.panel = this.panel || this.$create('lightboxPanel', { ...this.$props, items });
 
-            on(this.panel.$el, 'hidden', () => this.panel = false);
+            on(this.panel.$el, 'hidden', () => (this.panel = false));
 
             return this.panel.show(index);
-
         },
 
         hide() {
-
             return this.panel && this.panel.hide();
-
-        }
-
-    }
-
+        },
+    },
 };
 
 function install(UIkit, Lightbox) {
-
     if (!UIkit.lightboxPanel) {
         UIkit.component('lightboxPanel', LightboxPanel);
     }
 
-    assign(
-        Lightbox.props,
-        UIkit.component('lightboxPanel').options.props
-    );
-
+    assign(Lightbox.props, UIkit.component('lightboxPanel').options.props);
 }
 
 function toItem(el) {
-
     const item = {};
 
-    ['href', 'caption', 'type', 'poster', 'alt', 'attrs'].forEach(attr => {
+    for (const attr of ['href', 'caption', 'type', 'poster', 'alt', 'attrs']) {
         item[attr === 'href' ? 'source' : attr] = data(el, attr);
-    });
+    }
 
     item.attrs = parseOptions(item.attrs);