added selectbox for "themed" and "core" style to tests

franken-ui · May 24, 2016 · d404b1c · d404b1c
1 parent 9d914c5
commit d404b1c
Show file tree

Hide file tree

Showing 62 changed files with 38 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,14 @@
 /.idea
 /js
-/css
-/custom
+/css/*
+!/css/.gitkeep
 /dist
 /node_modules
 /showcase
 /tools
 /tests/js/test.js
+/tests/css/*
+!/tests/css/.gitkeep
 *~
 *.diff
 *.patch

diff --git a/css/.gitkeep b/css/.gitkeep
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
   "version": "3.0.0",
   "scripts": {
-    "compile-less": "lessc --rootpath=../src/less/ --relative-urls src/less/uikit.less > css/uikit.css",
+    "compile-less": "lessc --rootpath=../src/less/ --relative-urls src/less/uikit.less > css/uikit.css && lessc --rootpath=../../src/less/core/ --relative-urls src/less/core/_import.less > tests/css/uikit.core.css",
     "compile-js": "webpack -d --progress --color",
     "compile": "npm run compile-less & npm run compile-js",
     "watch-less": "watch-run -i -p 'src/less/**/*.less' npm run compile-less",
@@ -18,6 +18,6 @@
     "babel-plugin-add-module-exports": "^0.1.2",
     "babel-preset-es2015": "^6.3.13",
     "void-elements": "^2.0.1",
-    "webpack": "^1.3"
+    "webpack": "^1.13.1"
   }
 }
diff --git a/tests/accordion.html b/tests/accordion.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Accordion - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/alert.html b/tests/alert.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Alert - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/align.html b/tests/align.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Align - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/animation.html b/tests/animation.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Animation - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/article.html b/tests/article.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Article - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>
@@ -166,4 +165,4 @@ <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
         </div>
 
     </body>
-</html>
+</html>
diff --git a/tests/background.html b/tests/background.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Background - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/badge.html b/tests/badge.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Badge - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/base.html b/tests/base.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Base - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/breadcrumb.html b/tests/breadcrumb.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Breadcrumb - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/button.html b/tests/button.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Button - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/card.html b/tests/card.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Card - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/close.html b/tests/close.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Close - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/column.html b/tests/column.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Column - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/comment.html b/tests/comment.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Comment - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>
@@ -183,4 +182,4 @@ <h4 class="uk-comment-title uk-margin-remove">Author</h4>
         </div>
 
     </body>
-</html>
+</html>
diff --git a/tests/container.html b/tests/container.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Container - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/cover.html b/tests/cover.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Cover - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/css/.gitkeep b/tests/css/.gitkeep
diff --git a/tests/description-list.html b/tests/description-list.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Description List - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/drop.html b/tests/drop.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Drop - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/dropdown.html b/tests/dropdown.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Dropdown - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/flex.html b/tests/flex.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Flex - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/form-custom.html b/tests/form-custom.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Form Custom - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/form.html b/tests/form.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Form - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/grid.html b/tests/grid.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Grid - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/height-expand.html b/tests/height-expand.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Height Expand - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/height-viewport.html b/tests/height-viewport.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Height Viewport - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/icon.html b/tests/icon.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Icon - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/inverse.html b/tests/inverse.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Inverse - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <script src="../js/components/spinner.js"></script>

diff --git a/tests/js/index.js b/tests/js/index.js
@@ -1,11 +1,20 @@
 import $ from 'jquery';
-module.exports = require('../../src/js/uikit.js');
 
 $('html').css('padding-top', '80px');
 
+var storage = window.sessionStorage, key = '_uikit_style';
+
+if (!storage[key]) {
+    storage[key] = '../css/uikit.css';
+}
+
+document.writeln(`<link rel="stylesheet" href="${storage[key]}">`);
+document.writeln(`<script src="../js/uikit.js"></script>`);
+
 requestAnimationFrame(function () {
 
-    var $select = $('<select><option value="">- Select Test -</option></select>').css('margin', '20px 0');
+    var $container = $('<div class="uk-form uk-container"></div>').prependTo('body');
+    var $tests = $('<select><option value="">- Select Test -</option></select>').css('margin', '20px 20px 20px 0').prependTo($container);
 
     [
         'accordion',
@@ -65,19 +74,30 @@ requestAnimationFrame(function () {
         'utility',
         'visibility',
         'width'
-    ].forEach(function (name) {
-        $('<option value="' + name + '.html">' + name.split('-').map(function (name) {
-                return name.charAt(0).toUpperCase() + name.slice(1);
-            }).join(' ') + '</option>').appendTo($select);
+    ].forEach(name => {
+        $(`<option value="${name}.html">${name.split('-').map(name => {
+            return name.charAt(0).toUpperCase() + name.slice(1);
+        }).join(' ')}</option>`).appendTo($tests);
     });
 
-    $select.on('change', function () {
-        if ($select.val()) {
-            location.href = '../' + document.querySelector('script[src*="test.js"]').getAttribute('src').replace('js/test.js', '') + 'tests/' + $select.val();
+    $tests.on('change', () => {
+        if ($tests.val()) {
+            location.href = `../${document.querySelector('script[src*="test.js"]').getAttribute('src').replace('js/test.js', '')}tests/${$tests.val()}`;
         }
     }).val(location.pathname.split('/').pop());
 
-    $('body').prepend($('<div class="uk-form uk-container"></div>').prepend($select));
+    var $styles = $(`
+        <select>
+            <option value="../css/uikit.css">Themed</option>
+            <option value="css/uikit.core.css">Core</option>
+        </select>
+    `).insertAfter($tests);
+
+    $styles.css('margin', '20px 0').on('change', () => {
+        storage[key] = $styles.val();
+        location.reload();
+    }).val(storage[key]);
+
     $('html').css('padding-top', '');
 
 });
diff --git a/tests/label.html b/tests/label.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Label - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/lightbox.html b/tests/lightbox.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Lightbox - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <script src="../js/components/lightbox.js"></script>

diff --git a/tests/list.html b/tests/list.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>List - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/margin.html b/tests/margin.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Margin - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/modal.html b/tests/modal.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Modal - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/nav.html b/tests/nav.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Nav - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/navbar.html b/tests/navbar.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Navbar - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">

diff --git a/tests/offcanvas.html b/tests/offcanvas.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Off-canvas - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
     </head>

diff --git a/tests/padding.html b/tests/padding.html
@@ -5,7 +5,6 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Padding - UIkit tests</title>
-        <link rel="stylesheet" href="../css/uikit.css">
         <script src="../vendor/jquery.js"></script>
         <script src="js/test.js"></script>
         <style type="text/css">