uikit 3.11.2-dev.31cd2ba38 → 3.11.2-dev.3dfa2c50b

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

@@ -1,15 +1,14 @@
-import Animations, {scale3d, translate, translated} from '../../mixin/internal/slideshow-animations';
-import {assign, css} from 'uikit-util';
+import Animations, {
+    scale3d,
+    translate,
+    translated,
+} from '../../mixin/internal/slideshow-animations';
+import { assign, css } from 'uikit-util';
 
 export default assign({}, Animations, {
-
     fade: {
-
         show() {
-            return [
-                {opacity: 0, zIndex: 0},
-                {zIndex: -1}
-            ];
+            return [{ opacity: 0, zIndex: 0 }, { zIndex: -1 }];
         },
 
         percent(current) {
@@ -17,21 +16,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 +31,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,25 @@ 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,
+    assign,
+    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 +30,7 @@ export default {
         delayControls: Number,
         preload: Number,
         videoAutoplay: Boolean,
-        template: String
+        template: String,
     },
 
     data: () => ({
@@ -40,39 +55,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 +89,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 +138,6 @@ export default {
             },
 
             handler(e) {
-
                 if (!this.isToggled(this.$el) || !this.draggable) {
                     return;
                 }
@@ -154,15 +150,13 @@ export default {
                         this.show('next');
                         break;
                 }
-            }
+            },
         },
 
         {
-
             name: 'beforeitemshow',
 
             handler(e) {
-
                 if (this.isToggled()) {
                     return;
                 }
@@ -176,44 +170,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 +212,126 @@ 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', assign({ 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({
-                        src,
-                        poster,
-                        controls: '',
-                        playsinline: '',
-                        'uk-video': `${this.videoAutoplay}`
-                    }, attrs));
+                    const video = createEl(
+                        'video',
+                        assign(
+                            {
+                                src,
+                                poster,
+                                controls: '',
+                                playsinline: '',
+                                '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',
+                            assign(
+                                {
+                                    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',
+                            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+)[&?]?(.*)?/))) {
+                    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',
+                                assign(
+                                    {
+                                        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 +344,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 +356,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) {