uikit 3.14.4-dev.51a1b06ef → 3.14.4-dev.5e7e87ba7

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/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>

package/tests/sticky-navbar.html

@@ -74,7 +74,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -175,7 +175,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -276,7 +276,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -377,7 +377,7 @@
                             <div class="uk-navbar-right">
 
                                 <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
                                         <li class="uk-parent">
@@ -480,7 +480,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">
@@ -585,7 +585,7 @@
                                 <div class="uk-navbar-right">
 
                                     <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
-                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x; pos: bottom-stretch; animate-out: true">
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                         <ul class="uk-nav uk-navbar-dropdown-nav">
                                             <li class="uk-active"><a href="#">Active</a></li>
                                             <li class="uk-parent">

package/tests/sticky.html

@@ -407,14 +407,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
-
-            UIkit.util.on('#js-height-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            const {$$, addClass, on, removeClass } = UIkit.util;
+
+            on('#js-height-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.js-overflow-flip')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/switcher.html

@@ -358,7 +358,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tab.html

@@ -188,7 +188,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/table.html

@@ -313,14 +313,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
+            const {$$, addClass, on, removeClass } = UIkit.util;
 
-            UIkit.util.on('#js-size-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-table').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-table')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/toggle.html

@@ -144,7 +144,7 @@
                             <td><code>mode</code></td>
                             <td>hover | click | media</td>
                             <td>click</td>
-                            <td>Comma separated list of trigger behaviour modes.</td>
+                            <td>Comma-separated list of trigger behaviour modes.</td>
                         </tr>
                         <tr>
                             <td><code>media</code></td>
@@ -162,7 +162,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/tooltip.html

@@ -90,7 +90,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>

package/tests/upload.html

@@ -36,30 +36,30 @@
 
             <script>
 
-                var bar = document.getElementById('js-progressbar');
+                const bar =  UIkit.util.$('#js-progressbar');
 
                 UIkit.upload('.js-upload', {
 
                     url: '',
                     multiple: true,
 
-                    beforeSend: function () {
+                    beforeSend() {
                         console.log('beforeSend', arguments);
                     },
-                    beforeAll: function () {
+                    beforeAll() {
                         console.log('beforeAll', arguments);
                     },
-                    load: function () {
+                    load() {
                         console.log('load', arguments);
                     },
-                    error: function () {
+                    error() {
                         console.log('error', arguments);
                     },
-                    complete: function () {
+                    complete() {
                         console.log('complete', arguments);
                     },
 
-                    loadStart: function (e) {
+                    loadStart(e) {
                         console.log('loadStart', arguments);
 
                         bar.hidden = false;
@@ -67,24 +67,24 @@
                         bar.value = e.loaded;
                     },
 
-                    progress: function (e) {
+                    progress(e) {
                         console.log('progress', arguments);
 
                         bar.max = e.total;
                         bar.value = e.loaded;
                     },
 
-                    loadEnd: function (e) {
+                    loadEnd(e) {
                         console.log('loadEnd', arguments);
 
                         bar.max = e.total;
                         bar.value = e.loaded;
                     },
 
-                    completeAll: function () {
+                    completeAll() {
                         console.log('completeAll', arguments);
 
-                        setTimeout(function () {
+                        setTimeout(() => {
                             bar.hidden = true;
                         }, 1000);