AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Floating panel to switch data

Browse Source
This commit is contained in:
Roman Axelrod
2022-04-22 20:36:39 +03:00
parent ef6fb7344a
commit 968d4e79f6
16 changed files with 148 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+25 -3
View File
@@ -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.
layouts/page-container.hbs
+10 -11
View File
@@ -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>
<div class="container">
{{> src/template }}
</div>
{{> 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>
layouts/page.hbs
+8 -9
View File
@@ -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>
{{> src/template }}
{{> 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>
layouts/partials/head.hbs
+9
View File
@@ -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>
layouts/partials/scripts.hbs
+4
View File
@@ -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>
layouts/partials/toolbar.hbs
+11
View File
@@ -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>
layouts/scripts/page--toolbar.js
+13
View File
@@ -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;
})
})();
layouts/styles/page--main.css
+20
View File
@@ -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;
}
server.js
+24 -13
View File
@@ -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) => {
const jsonFileName = (req.query.data) ? req.query.data : 'default';
const data = await fs.readJson(`./data/${jsonFileName}.json`);
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,
};
});
Object.assign(data, {config});
const jsonFileName = (req.query.data) ? req.query.data : 'default';
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
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();
}]));
src/scripts/template.min.js
Vendored
+1 -1
View File
@@ -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
src/scripts/template.min.js.map
+1 -1
View File
@@ -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);"]}
src/scripts/template.mjs
+3 -1
View File
@@ -1,5 +1,7 @@
(function ($) {
console.log('Ready!', $);
console.log('Ready!');
console.log('jQuery =', $);
console.log('Swiper =', window.Swiper);
})(window.jQuery);
src/styles/template.min.css
Vendored
+6 -2
View File
@@ -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 */
src/styles/template.min.css.map
+1 -1
View File
@@ -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}"]}
src/styles/template.scss
+1 -1
View File
@@ -35,7 +35,7 @@
}
&__header {
border-bottom: 2px solid red;
border-bottom: 2px solid green;
&-heading {
// Heading
src/template.hbs
+5 -1
View File
@@ -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>