Added Floating panel to switch data

4 years ago · 968d4e79f6
16 changed files with 148 additions and 50 deletions
--- a/README.md
+++ b/README.md
@ -43,10 +43,10 @@ All the template layout must be in a single `*.hbs` file that located in `/src`

 ### Data

-In `/data` folder, you can find multiple `*.json` files.
+You will find multiple `*.json` files in `/data` folder after the first run of `npm start`.

 These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
-how the data is stored.
+how the data is stored. Don't change or edit these files - use the data as it is.

 There are multiple data sources since the block can be reused in different situations with different data. We have to
 make sure that the block is always rendered properly.
@ -73,10 +73,32 @@ aspect ratio.

 ### Global Styling

-The development environment includes CSS rules of the original project. The CSS file is embedded in served HTML.
+The development environment includes CSS rules of the original project. This is including fonts, CSS variables,
+container logic etc...
+
+The CSS file is embedded in served HTML.
+
+# JavaScript
+
+## Sliders
+
+For any kind of slides animations - use [SwiperJS](https://swiperjs.com/get-started).
+
+The lib is included in the project and ready for use. Test with `window.Swiper` in browser console.

 # Testing

 ## Development Toolbar

 Use development toolbar to switch between data sources and test responsiveness of block.
+
+## Pixel Perfect Test
+
+Compare the final result with provided screenshots.
+
+You can use
+available [Browser Extensions](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)
+or any other tool/approach that you're familiar with.
+
+The idea is to have "pretty close" result to requested design.
+
--- a/layouts/page-container.hbs
+++ b/layouts/page-container.hbs
@ -1,19 +1,18 @@
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">

-    <link rel="stylesheet" href="{{ config.cssUrl }}">
-    <link rel="stylesheet" href="styles/template.min.css">
-</head>
+{{> layouts/partials/head }}

 <body>

+{{> layouts/partials/toolbar }}
+
+<main>
    <div class="container">
        {{> src/template }}
    </div>
+</main>
+
+{{> layouts/partials/scripts }}

-<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-<script src="scripts/template.min.js"></script>
 </body>
 </html>
--- a/layouts/page.hbs
+++ b/layouts/page.hbs
@ -1,17 +1,16 @@
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">

-    <link rel="stylesheet" href="{{ config.cssUrl }}">
-    <link rel="stylesheet" href="styles/template.min.css">
-</head>
+{{> layouts/partials/head }}

 <body>

+{{> layouts/partials/toolbar }}
+
+<main>
    {{> src/template }}
+</main>
+
+{{> layouts/partials/scripts }}

-<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-<script src="scripts/template.min.js"></script>
 </body>
 </html>
--- a/layouts/partials/head.hbs
+++ b/layouts/partials/head.hbs
@ -0,0 +1,9 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
+    <link rel="stylesheet" href="styles/page--main.css">
+    <link rel="stylesheet" href="styles/template.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
+</head>
--- a/layouts/partials/scripts.hbs
+++ b/layouts/partials/scripts.hbs
@ -0,0 +1,4 @@
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
+<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+<script src="scripts/page--toolbar.js"></script>
+<script src="scripts/template.min.js"></script>
--- a/layouts/partials/toolbar.hbs
+++ b/layouts/partials/toolbar.hbs
@ -0,0 +1,11 @@
+<header class="page_toolbar">
+    <div>
+        <label for="data-options">Data Options: </label>
+
+        <select name="data" id="data-options">
+            {{#each config.dataFiles }}
+                <option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
+            {{/each}}
+        </select>
+    </div>
+</header>
--- a/layouts/scripts/page--toolbar.js
+++ b/layouts/scripts/page--toolbar.js
@ -0,0 +1,13 @@
+(function () {
+
+    const dataOptionsSelect = document.getElementById('data-options');
+    if (!dataOptionsSelect) {
+        return;
+    }
+
+    dataOptionsSelect.addEventListener('change', function () {
+        console.log(this.value)
+        window.location = '?data=' + this.value;
+    })
+
+})();
--- a/layouts/styles/page--main.css
+++ b/layouts/styles/page--main.css
@ -0,0 +1,20 @@
+body {
+    margin: 0;
+    font-size: 1rem;
+}
+
+header.page_toolbar {
+    font-family: Arial, sans-serif;
+    background-color: #ccc;
+    padding: 1rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+header.page_toolbar select {
+    font-size: 0.85rem;
+    padding: 0.25rem;
+}
--- a/server.js
+++ b/server.js
@ -2,7 +2,7 @@

 import express from 'express';
 import {create} from 'express-handlebars';
-import fs from 'fs-extra';
+import fsExtra from 'fs-extra';
 import browserSync from 'browser-sync';
 import config from 'config';
 import gulp from 'gulp';
@ -12,13 +12,15 @@ import rename from "gulp-rename";
 import dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import sourcemaps from "gulp-sourcemaps";
+import fs from "fs/promises";

 /**
 * Constants
 */

 const isDev = config.get('mode') === 'development';
-const projectDir = isDev ? '.' : './node_modules/axe-web-component';
+const modulePath = './node_modules/axe-web-component';
+const projectDir = isDev ? '.' : modulePath;
 console.log('Development Mode:', isDev);

 const sass = gulpSass(dartSass);
@ -30,8 +32,7 @@ const sass = gulpSass(dartSass);
 const app = express();

 const hbs = create({
-    extname: '.hbs', defaultLayout: false,
-    partialsDir: ['.'],
+    extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
 });

 app.engine('.hbs', hbs.engine);
@ -39,15 +40,29 @@ app.set('view engine', '.hbs');
 app.set('views', projectDir + '/layouts');

 app.get('/', async (req, res) => {
+    let dataFiles = await fs.readdir('./data');
+    dataFiles = dataFiles
+        .filter((fileName) => fileName.split('.').pop() === 'json')
+        .map((fileName) => {
+            const splitName = fileName.split('.');
+            splitName.pop();
+            const name = splitName.join('');
+            return {
+                name,
+                active: (req.query.data) && req.query.data === name,
+            };
+        });
+
    const jsonFileName = (req.query.data) ? req.query.data : 'default';
-    const data = await fs.readJson(`./data/${jsonFileName}.json`);
+    const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);

-    Object.assign(data, {config});
+    Object.assign(data, {config}, {config: {projectDir, dataFiles}});

    res.render('page-container', data);
 });

 app.use(express.static('src'));
+app.use(express.static('layouts'));

 const listener = app.listen(0, () => {
    const PORT = listener.address().port;
@ -56,16 +71,12 @@ const listener = app.listen(0, () => {

    const bs = browserSync.create();

-    gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'],
-        {delay: 400},
-        gulp.series([buildScriptFiles, function (cb) {
+    gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
        browserSyncReload(bs, 'js', 'Script Files Change');
        return cb();
    }]));

-    gulp.watch('src/**/*.scss',
-        {delay: 400},
-        gulp.series([buildStyleFiles, function (cb) {
+    gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
        browserSyncReload(bs, 'css', 'Style Files Change');
        return cb();
    }]));
--- a/src/scripts/template.min.js
+++ b/src/scripts/template.min.js
@ -1,2 +1,2 @@
-!function(o){console.log("Ready!",o)}(window.jQuery);
+!function(o){console.log("Ready!"),console.log("jQuery =",o),console.log("Swiper =",window.Swiper)}(window.jQuery);
 //# sourceMappingURL=template.min.js.map
--- a/src/scripts/template.min.js.map
+++ b/src/scripts/template.min.js.map
@ -1 +1 @@
-{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,SAAUF,GAF1B,CAIGG,OAAOC","file":"template.min.js","sourcesContent":["(function ($) {\n\n    console.log('Ready!', $);\n\n})(window.jQuery);"]}
+{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJnC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n    console.log('Ready!');\n    console.log('jQuery =', $);\n    console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);"]}
--- a/src/scripts/template.mjs
+++ b/src/scripts/template.mjs
@ -1,5 +1,7 @@
 (function ($) {

-    console.log('Ready!', $);
+    console.log('Ready!');
+    console.log('jQuery =', $);
+    console.log('Swiper =', window.Swiper);

 })(window.jQuery);
--- a/src/styles/template.min.css
+++ b/src/styles/template.min.css
@ -5,9 +5,13 @@
 * Use BEM naming system for class names: http://getbem.com/naming/
 *
 * Use Mobile First approach.
+ *    Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
 *
 */
-.clients {
-  background-color: red;
+.template {
+  padding: 1rem;
+}
+.template__header {
+  border-bottom: 2px solid green;
 }
 /*# sourceMappingURL=template.min.css.map */
--- a/src/styles/template.min.css.map
+++ b/src/styles/template.min.css.map
@ -1 +1 @@
-{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n *    No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n *\n */\n\n.clients {\n  background-color: red;\n  //color: white;\n\n  &__sub_level {\n    // EXAMPLE OF BREAKPOINTS\n\n    @media (min-width: 600px) {\n      // Tablet\n    }\n\n    @media (min-width: 980px) {\n      // Large Tablet\n    }\n\n    @media (min-width: 1024px) {\n      // Laptop & Tablet\n    }\n\n    @media (min-width: 1336px) {\n      // Laptop\n    }\n\n    @media (min-width: 1680px) {\n      // Desktop\n    }\n\n  }\n\n  &__sub_level_two {\n    //\n  }\n}"]}
+{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;AAwBA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n *    No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n *    Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).\n *\n */\n\n.template {\n  padding: 1rem;\n\n  // EXAMPLE OF BREAKPOINTS\n\n  @media (min-width: 600px) {\n    // Tablet\n  }\n\n  @media (min-width: 980px) {\n    // Large Tablet\n  }\n\n  @media (min-width: 1024px) {\n    // Laptop & Tablet\n  }\n\n  @media (min-width: 1336px) {\n    // Laptop\n  }\n\n  @media (min-width: 1680px) {\n    // Desktop\n  }\n\n  &__header {\n    border-bottom: 2px solid green;\n\n    &-heading {\n      // Heading\n    }\n  }\n\n  &__content {\n    // Content\n  }\n}"]}
--- a/src/styles/template.scss
+++ b/src/styles/template.scss
@ -35,7 +35,7 @@
  }

  &__header {
-    border-bottom: 2px solid red;
+    border-bottom: 2px solid green;

    &-heading {
      // Heading
--- a/src/template.hbs
+++ b/src/template.hbs
@ -4,6 +4,10 @@
    </header>

    <div class="template__content">
-        <p>Review the `/data` folder with JSON data files.</p>
+        <p>
+            Review the `/data` folder with JSON data files.<br>
+            Don't change data JSON files - use the data as it is.
+        </p>
+        <p>Build the layout based on provided data structure.</p>
    </div>
 </section>