uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6923b7e2c

package/tests/offcanvas.html

@@ -142,10 +142,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -189,10 +189,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -236,10 +236,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -283,10 +283,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -330,10 +330,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -377,10 +377,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -424,10 +424,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -471,10 +471,10 @@
 
                     <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -769,13 +769,9 @@
 
         <script>
 
-            var util = UIkit.util;
-
-            util.on(util.$('#js-toggle'), 'click', function (e) {
-
+            UIkit.util.on('#js-toggle', 'click', e => {
                 e.preventDefault();
                 UIkit.offcanvas('#js-offcanvas-toggle').toggle();
-
             });
 
         </script>

package/tests/parallax.html

@@ -190,7 +190,7 @@
 
                 <h2>Animated properties</h2>
 
-                <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
+                <p>You can define multiple animation stops by using a comma-separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
 
                 <div class="uk-overflow-auto">
                     <table class="uk-table uk-table-striped">

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-viewport {
+            #js-boundary {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -237,7 +237,7 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-viewport" class="uk-margin">
+            <div id="js-boundary" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
@@ -302,21 +302,9 @@
                     </div>
 
                     <div class="uk-margin">
-                        <span class="uk-form-label">Flip</span>
-                        <label>
-                            Horizontal
-                            <select id="js-flip_x" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="x">flip</option>
-                                <option value="">none</option>
-                            </select>
-                        </label>
-                        <label>
-                            Vertical
-                            <select id="js-flip_y" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="y">flip</option>
-                                <option value="">none</option>
-                            </select>
-                        </label>
+                        <span class="uk-form-label">Placement</span>
+                        <label><input id="js-flip" class="uk-checkbox" type="checkbox" checked> Flip</label>
+                        <label><input id="js-shift" class="uk-checkbox" type="checkbox" checked> Shift</label>
                     </div>
 
                 </div>
@@ -327,7 +315,7 @@
         <script>
 
             const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
-            let viewport = $('#js-viewport');
+            let boundary = $('#js-boundary');
             let element = $('#js-element');
             let target = $('#js-target');
             let offsetX;
@@ -338,18 +326,19 @@
                     element,
                     target,
                     {
-                        viewport,
+                        boundary,
                         attach:{
                             element: [$('#js-element_x').value, $('#js-element_y').value],
                             target: [$('#js-target_x').value, $('#js-target_y').value]
                         },
                         offset: [$('#js-offset_x').value, $('#js-offset_y').value],
-                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                        flip: $('#js-flip').checked,
+                        shift: $('#js-shift').checked
                     }
                 );
             }
 
-            on(window, 'dragstart', function (e) {
+            on(window, 'dragstart', e => {
                 e.dataTransfer.setDragImage(new Image(), 0, 0);
 
                 offsetX = Math.round(e.pageX - offset(target).left);
@@ -358,7 +347,7 @@
             });
 
             let lastPos;
-            on(window, 'dragover', function (e) {
+            on(window, 'dragover', e => {
 
                 const pos = getEventPos(e);
 
@@ -372,9 +361,9 @@
                 // positions target at mouse cursor
                 positionAt(
                     target,
-                    viewport,
+                    boundary,
                     {
-                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                        offset: [e.pageX - offset(boundary).left - offsetX, e.pageY - offset(boundary).top - offsetY]
                     }
                 );
 

package/tests/progress.html

@@ -36,20 +36,20 @@
         </div>
 
         <script>
+            const {ready, $} = UIkit.util;
 
+            ready(() => {
 
-            UIkit.util.ready(function () {
+                const bar = $('#js-progressbar');
+                const animate = setInterval(() => {
 
-                var bar = document.getElementById('js-progressbar'),
-                    animate = setInterval(function () {
+                    bar.value += 10;
 
-                        bar.value += 10;
+                    if (bar.value >= bar.max) {
+                        clearInterval(animate);
+                    }
 
-                        if (bar.value >= bar.max) {
-                            clearInterval(animate);
-                        }
-
-                    }, 1000);
+                }, 1000);
 
             });
 

package/tests/scroll.html

@@ -7,13 +7,10 @@
         <title>Scroll - UIkit tests</title>
         <script src="js/test.js"></script>
         <script>
-
-            UIkit.util.on(document, 'change', '#offset', function (e) {
-                UIkit.util.$$('[uk-scroll]').forEach(function (el) {
-                    el.setAttribute('data-offset', e.target.value);
-                })
-            })
-
+            const {$$, attr, on} = UIkit.util;
+            on(document, 'change', '#offset', e =>
+                attr($$('[uk-scroll]'), 'data-offset', e.target.value)
+            )
         </script>
     </head>
 
@@ -87,9 +84,9 @@
 
             <script>
 
-                UIkit.util.on('#js-top-callback', 'scrolled', function () {
-                    alert('Done.');
-                });
+                UIkit.util.on('#js-top-callback', 'scrolled', () =>
+                    alert('Done.')
+                );
 
             </script>
 

package/tests/search.html

@@ -235,7 +235,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -257,7 +257,7 @@
             <nav class="uk-navbar-container uk-margin" uk-navbar>
                 <div class="uk-navbar-left">
 
-                    <a class="uk-navbar-item uk-logo" href="#">Justify</a>
+                    <a class="uk-navbar-item uk-logo" href="#">Stretch</a>
 
                     <ul class="uk-navbar-nav">
                         <li class="uk-active"><a href="#">Active</a></li>
@@ -275,7 +275,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -315,7 +315,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -324,7 +324,7 @@
                                     </form>
                                 </div>
                                 <div class="uk-width-auto">
-                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                    <a class="uk-dropbar-close" href="#" uk-close></a>
                                 </div>
                             </div>
 

package/tests/slide.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Slide Transition Test - UIkit tests</title>
+        <script src="js/test.js"></script>
+        <style>
+
+            .a {
+                /*margin: 60px 15px;*/
+                padding: 30px;
+                border: 20px solid black;
+                box-shadow: 0 10px 0 red, 0 -10px 0 red, 10px 0 0 red, -10px 0 0 red;
+                background: lightgrey;
+            }
+
+            .a p {
+                margin: 20px 0;
+                padding: 20px 0;
+            }
+
+            .b {
+                position: absolute
+            }
+
+            .uk-accordion > :nth-child(n+2),
+            .uk-accordion-content {
+                margin-top: 50px;
+            }
+
+        </style>
+    </head>
+
+    <body>
+
+        <div class="uk-container">
+
+            <div class="uk-grid uk-child-width-1-3">
+                <div>
+                    <div class="uk-background-muted">
+                        <a target="+*" uk-toggle="animation: reveal-top">Reveal Top</a>
+
+                        <div class="a">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                        <hr>
+                    </div>
+                </div>
+                <div>
+
+                    <h3>Animated</h3>
+
+                    <ul uk-accordion>
+                        <li class="uk-open">
+
+                            <a class="uk-accordion-title" href="#">This is a title with some more text</a>
+                            <div class="uk-accordion-content">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                            </div>
+
+                        </li>
+                        <li>
+
+                            <a class="uk-accordion-title" href="#">Item 2</a>
+                            <div class="uk-accordion-content">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                            </div>
+
+                        </li>
+                        <li>
+
+                            <a class="uk-accordion-title" href="#">Item 3</a>
+                            <div class="uk-accordion-content">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                            </div>
+
+                        </li>
+                    </ul>
+
+                </div>
+                <div>
+
+                    <div class="uk-background-muted uk-margin-bottom" style="height: 20px">
+                        <a target="!* +div.a" uk-toggle="animation: reveal-top">Reveal Top None Static</a>
+                    </div>
+
+                    <div class="a uk-alert uk-alert-primary">
+                        <h3>Primary!</h3>
+                        <p>Lorem ipsum
+                            <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        </p>
+                    </div>
+
+                    <div class="uk-background-muted uk-margin-top" style="height: 20px"></div>
+
+                </div>
+            </div>
+
+            <div class="uk-grid uk-child-width-1-4">
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: slide-top">Slide Top</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: slide-left">Slide Left</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: slide-bottom">Slide Bottom</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: slide-right">Slide Right</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div style="height: 100vh"></div>
+            <div class="uk-grid uk-child-width-1-4">
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: reveal-top">Reveal Top</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: reveal-left">Reveal Left</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: reveal-bottom">Reveal Bottom</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-background-muted uk-position-relative">
+                        <a target="+*" uk-toggle="animation: reveal-right">Reveal Right</a>
+
+                        <div class="a b">
+
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div style="height: 100vh"></div>
+        </div>
+
+    </body>
+</html>

package/tests/slider.html

@@ -545,11 +545,12 @@
 
         <script>
 
-            ['finite', 'center', 'sets'].forEach(function(attr) {
-                UIkit.util.on('#js-'+attr+'-switcher', 'change', function () {
-                    UIkit.util.attr(UIkit.util.$$('[uk-slider]'), attr, this.value);
-                });
-            });
+            const {attr, $$, on} = UIkit.util;
+            for (const attribute of ['finite', 'center', 'sets']) {
+                on(`#js-${attribute}-switcher`, 'change', e =>
+                    attr($$('[uk-slider]'), attribute, e.target.value)
+                );
+            }
 
         </script>
 

package/tests/slideshow.html

@@ -442,14 +442,14 @@
         </div>
 
         <script>
-
-            UIkit.util.on('#js-animation-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('.js-slideshow-animation'), 'animation', this.value);
-            });
-
-            UIkit.util.on('#js-finite-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('[uk-slideshow]'), 'finite', this.value);
-            });
+            const {attr, $$, on} = UIkit.util;
+            on('#js-animation-switcher', 'change', e =>
+                attr($$('.js-slideshow-animation'), 'animation', e.target.value)
+            );
+
+            on('#js-finite-switcher', 'change', e =>
+                attr($$('[uk-slideshow]'), 'finite', e.target.value)
+            );
 
         </script>
 

package/tests/sortable.html

@@ -16,15 +16,13 @@
         </style>
         <script>
 
-            var util = UIkit.util;
+            const {on, ready} = UIkit.util;
 
-            util.ready(function () {
-
-                util.on(document.body, 'start moved added removed stop', function (e, sortable, el) {
-                    console.log(e.type, sortable, el);
-                });
-
-            });
+            ready(() =>
+                on(document.body, 'start moved added removed stop', (e, sortable, el) =>
+                    console.log(e.type, sortable, el)
+                )
+            );
 
         </script>
     </head>