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

Added Floating panel to switch data

pull/1/head
Roman Axelrod 4 years ago
parent
ef6fb7344a
commit
968d4e79f6
16 changed files with 148 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      README.md
  2. 19
      layouts/page-container.hbs
  3. 17
      layouts/page.hbs
  4. 9
      layouts/partials/head.hbs
  5. 4
      layouts/partials/scripts.hbs
  6. 11
      layouts/partials/toolbar.hbs
  7. 13
      layouts/scripts/page--toolbar.js
  8. 20
      layouts/styles/page--main.css
  9. 35
      server.js
  10. 2
      src/scripts/template.min.js
  11. 2
      src/scripts/template.min.js.map
  12. 4
      src/scripts/template.mjs
  13. 8
      src/styles/template.min.css
  14. 2
      src/styles/template.min.css.map
  15. 2
      src/styles/template.scss
  16. 6
      src/template.hbs

28
README.md
View File

@ -43,10 +43,10 @@ All the template layout must be in a single `*.hbs` file that located in `/src`
### Data ### 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 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 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. make sure that the block is always rendered properly.
@ -73,10 +73,32 @@ aspect ratio.
### Global Styling ### 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 # Testing
## Development Toolbar ## Development Toolbar
Use development toolbar to switch between data sources and test responsiveness of block. 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.

19
layouts/page-container.hbs
View File

@ -1,19 +1,18 @@
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ config.cssUrl }}"> {{> layouts/partials/head }}
<link rel="stylesheet" href="styles/template.min.css">
</head>
<body> <body>
<div class="container"> {{> layouts/partials/toolbar }}
<main>
<div class="container">
{{> src/template }} {{> src/template }}
</div> </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> </body>
</html> </html>

17
layouts/page.hbs
View File

@ -1,17 +1,16 @@
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ config.cssUrl }}"> {{> layouts/partials/head }}
<link rel="stylesheet" href="styles/template.min.css">
</head>
<body> <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> </body>
</html> </html>

9
layouts/partials/head.hbs
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>

4
layouts/partials/scripts.hbs
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>

11
layouts/partials/toolbar.hbs
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>

13
layouts/scripts/page--toolbar.js
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;
})
})();

20
layouts/styles/page--main.css
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;
}

35
server.js
View File

@ -2,7 +2,7 @@
import express from 'express'; import express from 'express';
import {create} from 'express-handlebars'; import {create} from 'express-handlebars';
import fs from 'fs-extra'; import fsExtra from 'fs-extra';
import browserSync from 'browser-sync'; import browserSync from 'browser-sync';
import config from 'config'; import config from 'config';
import gulp from 'gulp'; import gulp from 'gulp';
@ -12,13 +12,15 @@ import rename from "gulp-rename";
import dartSass from 'sass'; import dartSass from 'sass';
import gulpSass from 'gulp-sass'; import gulpSass from 'gulp-sass';
import sourcemaps from "gulp-sourcemaps"; import sourcemaps from "gulp-sourcemaps";
import fs from "fs/promises";
/** /**
* Constants * Constants
*/ */
const isDev = config.get('mode') === 'development'; 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); console.log('Development Mode:', isDev);
const sass = gulpSass(dartSass); const sass = gulpSass(dartSass);
@ -30,8 +32,7 @@ const sass = gulpSass(dartSass);
const app = express(); const app = express();
const hbs = create({ const hbs = create({
extname: '.hbs', defaultLayout: false, extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
partialsDir: ['.'],
}); });
app.engine('.hbs', hbs.engine); app.engine('.hbs', hbs.engine);
@ -39,15 +40,29 @@ app.set('view engine', '.hbs');
app.set('views', projectDir + '/layouts'); app.set('views', projectDir + '/layouts');
app.get('/', async (req, res) => { 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 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); res.render('page-container', data);
}); });
app.use(express.static('src')); app.use(express.static('src'));
app.use(express.static('layouts'));
const listener = app.listen(0, () => { const listener = app.listen(0, () => {
const PORT = listener.address().port; const PORT = listener.address().port;
@ -56,16 +71,12 @@ const listener = app.listen(0, () => {
const bs = browserSync.create(); const bs = browserSync.create();
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
{delay: 400},
gulp.series([buildScriptFiles, function (cb) {
browserSyncReload(bs, 'js', 'Script Files Change'); browserSyncReload(bs, 'js', 'Script Files Change');
return cb(); return cb();
}])); }]));
gulp.watch('src/**/*.scss', gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
{delay: 400},
gulp.series([buildStyleFiles, function (cb) {
browserSyncReload(bs, 'css', 'Style Files Change'); browserSyncReload(bs, 'css', 'Style Files Change');
return cb(); return cb();
}])); }]));

2
src/scripts/template.min.js
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 //# sourceMappingURL=template.min.js.map

2
src/scripts/template.min.js.map
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);"]}

4
src/scripts/template.mjs
View File

@ -1,5 +1,7 @@
(function ($) { (function ($) {
console.log('Ready!', $); console.log('Ready!');
console.log('jQuery =', $);
console.log('Swiper =', window.Swiper);
})(window.jQuery); })(window.jQuery);

8
src/styles/template.min.css
View File

@ -5,9 +5,13 @@
* Use BEM naming system for class names: http://getbem.com/naming/ * Use BEM naming system for class names: http://getbem.com/naming/
* *
* Use Mobile First approach. * Use Mobile First approach.
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
* *
*/ */
.clients { .template {
background-color: red; padding: 1rem;
}
.template__header {
border-bottom: 2px solid green;
} }
/*# sourceMappingURL=template.min.css.map */ /*# sourceMappingURL=template.min.css.map */

2
src/styles/template.min.css.map
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}"]}

2
src/styles/template.scss
View File

@ -35,7 +35,7 @@
} }
&__header { &__header {
border-bottom: 2px solid red; border-bottom: 2px solid green;
&-heading { &-heading {
// Heading // Heading

6
src/template.hbs
View File

@ -4,6 +4,10 @@
</header> </header>
<div class="template__content"> <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> </div>
</section> </section>
Write Preview
Loading…
Cancel
Save