jekyll-uikit 0.1.5 → 0.1.7

data/assets/node_modules/uikit/tests/js/index.js

@@ -0,0 +1,210 @@
+var storage = window.sessionStorage,
+    key = '_uikit_style',
+    keyinverse = '_uikit_inverse',
+    themes = {},
+    docEl = document.documentElement;
+
+var {addClass, assign, attr, append, css, on, prepend, ready, removeClass, trigger, ucfirst} = UIkit.util;
+
+// try to load themes.json
+var request = new XMLHttpRequest();
+request.open('GET', '../themes.json', false);
+request.send(null);
+
+if (request.status === 200) {
+    themes = JSON.parse(request.responseText);
+}
+
+var styles = assign({
+        core: {css: '../dist/css/uikit-core.css'},
+        theme: {css: '../dist/css/uikit.css'}
+    }, themes),
+    component = location.pathname.split('/').pop().replace(/.html$/, '');
+
+if (getParam('style') && getParam('style').match(/\.(json|css)$/)) {
+    styles.custom = getParam('style');
+}
+
+storage[key] = storage[key] || 'core';
+storage[keyinverse] = storage[keyinverse] || 'default';
+
+var dir = storage._uikit_dir || 'ltr';
+
+// set dir
+attr(docEl, 'dir', dir);
+
+var style = styles[storage[key]] || styles.theme;
+
+// add style
+document.writeln(`<link rel="stylesheet" href="${dir !== 'rtl' ? style.css : style.css.replace('.css', '').concat('-rtl.css')}">`);
+
+// add javascript
+document.writeln(`<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`);
+
+window.addEventListener('load', () => setTimeout(() => {
+
+    var $body = document.body;
+    var $container = prepend($body, '<div class="uk-container"></div>');
+    var $tests = css(append($container, '<select class="uk-select uk-form-width-small"></select>'), 'margin', '20px 20px 20px 0');
+    var $styles = css(append($container, '<select class="uk-select uk-form-width-small"></select>'), 'margin', '20px');
+    var $inverse = css(append($container, '<select class="uk-select uk-form-width-small"></select>'), 'margin', '20px');
+    var $rtl = css(append($container, '<label></label>'), 'margin', '20px');
+
+    // Tests
+    // ------------------------------
+
+    [
+        'accordion',
+        'alert',
+        'align',
+        'animation',
+        'article',
+        'background',
+        'badge',
+        'base',
+        'breadcrumb',
+        'button',
+        'card',
+        'close',
+        'column',
+        'comment',
+        'container',
+        'countdown',
+        'cover',
+        'description-list',
+        'divider',
+        'dotnav',
+        'drop',
+        'dropdown',
+        'flex',
+        'form',
+        'grid',
+        'grid-parallax',
+        'heading',
+        'height-expand',
+        'height-viewport',
+        'icon',
+        'iconnav',
+        'label',
+        'lightbox',
+        'link',
+        'list',
+        'margin',
+        'marker',
+        'modal',
+        'nav',
+        'navbar',
+        'notification',
+        'offcanvas',
+        'overlay',
+        'padding',
+        'pagination',
+        'parallax',
+        'position',
+        'placeholder',
+        'progress',
+        'scroll',
+        'scrollspy',
+        'search',
+        'section',
+        'slidenav',
+        'slideshow',
+        'sortable',
+        'spinner',
+        'sticky',
+        'sticky-navbar',
+        'subnav',
+        'switcher',
+        'tab',
+        'table',
+        'text',
+        'thumbnav',
+        'tile',
+        'toggle',
+        'tooltip',
+        'totop',
+        'transition',
+        'utility',
+        'upload',
+        'visibility',
+        'width'
+    ].sort().forEach(name => append($tests, `<option value="${name}.html">${name.split('-').map(ucfirst).join(' ')}</option>`));
+
+    on($tests, 'change', () => {
+        if ($tests.value) {
+            location.href = `${$tests.value}${styles.custom ? `?style=${getParam('style')}` : ''}`;
+        }
+    });
+
+    $tests.value = component && `${component}.html`;
+
+    prepend($tests, `<option value="index.html">Overview</option>`);
+
+    // Styles
+    // ------------------------------
+
+    Object.keys(styles).forEach(style => append($styles, `<option value="${style}">${ucfirst(style)}</option>`));
+
+    on($styles, 'change', () => {
+        storage[key] = $styles.value;
+        location.reload();
+    });
+    $styles.value = storage[key];
+
+    // Variations
+    // ------------------------------
+
+    var variations = {
+        'default': 'Default',
+        'light': 'Dark',
+        'dark': 'Light'
+    };
+
+    Object.keys(variations).forEach(name => append($inverse, `<option value="${name}">${variations[name]}</option>`));
+
+    on($inverse, 'change', () => {
+
+        removeClass($body, 'uk-dark uk-light');
+
+        switch ($inverse.value) {
+            case 'dark':
+                css(docEl, 'background', '#fff');
+                addClass($body, 'uk-dark');
+                break;
+
+            case 'light':
+                css(docEl, 'background', '#222');
+                addClass($body, 'uk-light');
+                break;
+
+            default:
+                css(docEl, 'background', '');
+        }
+
+        storage[keyinverse] = $inverse.value;
+
+    });
+    $inverse.value = storage[keyinverse];
+    trigger($inverse, 'change');
+
+    // RTL
+    // ------------------------------
+
+    append($rtl, '<input type="checkbox" class="uk-checkbox" />');
+    append($rtl, '<span style="margin:5px;">RTL</span>');
+    on($rtl, 'change', ({target}) => {
+        storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
+        location.reload();
+    });
+
+    $rtl.firstElementChild.checked = dir === 'rtl';
+
+    css(docEl, 'padding-top', '');
+}, 100));
+
+css(docEl, 'padding-top', '80px');
+
+function getParam(name) {
+    var match = new RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
+    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
+}

data/assets/node_modules/uikit/tests/js/uikit.js

@@ -0,0 +1 @@
+module.exports = require('../../src/js/uikit').default;

data/assets/node_modules/uikit/tests/label.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Label - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+
+    <body>
+
+        <div class="uk-container">
+
+            <h1>Label</h1>
+
+            <p><span class="uk-label">Default</span> 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>
+
+            <p><span class="uk-label uk-label-success">Success</span> 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>
+
+            <p><span class="uk-label uk-label-warning">Warning</span> 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>
+
+            <p><span class="uk-label uk-label-danger">Danger</span> 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>
+
+    </body>
+</html>

data/assets/node_modules/uikit/tests/lightbox.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Lightbox - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+
+    <body>
+
+        <div class="uk-container">
+
+            <h1>Lightbox</h1>
+
+            <h2>Animations</h2>
+
+            <div class="uk-margin">
+                <select id="js-animation-switcher" class="uk-select uk-form-width-small">
+                    <option value="slide">Slide</option>
+                    <option value="fade">Fade</option>
+                    <option value="scale">Scale</option>
+                </select>
+            </div>
+
+            <div id="js-lightbox-animation" class="uk-child-width-1-5@m" uk-grid uk-lightbox>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">900x600</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">700x500</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">1800x1200</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="500x2000">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">500x2000</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">2000x500</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+            </div>
+
+            <h2>Content Sources</h2>
+
+            <div class="uk-child-width-1-5@m" uk-grid uk-lightbox>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="Image">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">Image</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="//www.quirksmode.org/html5/videos/big_buck_bunny.mp4" caption="Video" poster="images/photo.jpg">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">Video</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="//www.youtube.com/watch?v=YE7VzlLtp-4" caption="YouTube">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">YouTube</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="//vimeo.com/1084537" caption="Vimeo">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">Vimeo</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+                <div>
+
+                    <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="//www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe">
+                        <figure>
+                            <img src="images/photo.jpg" width="400" alt="">
+                            <figcaption class="uk-margin-small-top">Iframe</figcaption>
+                        </figure>
+                    </a>
+
+                </div>
+
+            </div>
+
+            <h2>Dynamic lightbox</h2>
+
+            <button id="js-lightbox" class="uk-button uk-button-default" type="button">Dynamic lightbox</button>
+
+            <h2>Javascript Options</h2>
+
+            <h3>Lightbox</h3>
+
+            <div class="uk-overflow-auto">
+                <table class="uk-table uk-table-striped">
+                    <thead>
+                        <tr>
+                            <th>Option</th>
+                            <th>Value</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><code>animation</code></td>
+                            <td>String</td>
+                            <td>slide</td>
+                            <td>The animation to use. (fade, slide, scale)</td>
+                        </tr>
+                        <tr>
+                            <td><code>autoplay</code></td>
+                            <td>Boolean</td>
+                            <td>0</td>
+                            <td>Starts autoplaying the lightbox.</td>
+                        </tr>
+                        <tr>
+                            <td><code>autoplay-interval</code></td>
+                            <td>Number</td>
+                            <td>0</td>
+                            <td>The delay between switching slides in autoplay mode.</td>
+                        </tr>
+                        <tr>
+                            <td><code>pause-on-hover</code></td>
+                            <td>Boolean</td>
+                            <td>0</td>
+                            <td>Pause autoplay mode on hover.</td>
+                        </tr>
+                        <tr>
+                            <td><code>video-autoplay</code></td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                            <td>Lets videos autoplay.</td>
+                        </tr>
+                        <tr>
+                            <td><code>toggle</code></td>
+                            <td>CSS selector</td>
+                            <td>a</td>
+                            <td>Toggle selector - triggers the lightbox.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Lightbox Panel</h3>
+
+            <div class="uk-overflow-auto">
+                <table class="uk-table uk-table-striped">
+                    <thead>
+                        <tr>
+                            <th>Option</th>
+                            <th>Value</th>
+                            <th>Default</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><code>animation</code></td>
+                            <td>String</td>
+                            <td>slide</td>
+                            <td>The animation to use. (slide, fade, scale)</td>
+                        </tr>
+                        <tr>
+                            <td><code>autoplay</code></td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                            <td>Starts autoplaying the lightbox.</td>
+                        </tr>
+                        <tr>
+                            <td><code>autoplay-interval</code></td>
+                            <td>Number</td>
+                            <td>7000</td>
+                            <td>The delay between switching slides in autoplay mode.</td>
+                        </tr>
+                        <tr>
+                            <td><code>video-autoplay</code></td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                            <td>Lightbox videos autoplay.</td>
+                        </tr>
+                        <tr>
+                            <td><code>velocity</code></td>
+                            <td>Number</td>
+                            <td>2</td>
+                            <td>The animation velocity (pixel/ms).</td>
+                        </tr>
+                        <tr>
+                            <td><code>index</code></td>
+                            <td>Number</td>
+                            <td>0</td>
+                            <td>The initial item to show. (zero based)</td>
+                        </tr>
+                        <tr>
+                            <td><code>preload</code></td>
+                            <td>Number</td>
+                            <td>1</td>
+                            <td>The number of items to preload. (left and right of the currently active item)</td>
+                        </tr>
+                        <tr>
+                            <td><code>items</code></td>
+                            <td>Array</td>
+                            <td>[]</td>
+                            <td>An array of items to display. ([{source: 'images/size1.jpg', caption: '900x600'}])</td>
+                        </tr>
+                        <tr>
+                            <td><code>template</code></td>
+                            <td>String</td>
+                            <td></td>
+                            <td>The template string.</td>
+                        </tr>
+                        <tr>
+                            <td><code>delay-controls</code></td>
+                            <td>Number</td>
+                            <td>3000</td>
+                            <td>Delay time before controls fade out in ms.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+
+        <script>
+
+            var util = UIkit.util;
+
+            util.on('#js-animation-switcher', 'change', function() {
+                util.attr(util.$('#js-lightbox-animation'), 'animation', this.value);
+            });
+
+            util.on('#js-lightbox', 'click', function (e) {
+                e.preventDefault();
+
+                UIkit.lightboxPanel({
+                    items: [
+                        {source: 'images/size1.jpg', caption: '900x600'},
+                        {source: 'images/size2.jpg', caption: '700x500'},
+                    ]
+                }).show();
+            });
+
+        </script>
+
+    </body>
+</html>