From 29734a6b94611875cbaa99b5cf144f8d7443000f Mon Sep 17 00:00:00 2001
From: Roman Axelrod <roman@axe-web.com>
Date: Fri, 6 May 2022 07:49:00 +0300
Subject: [PATCH] Added "activeDataFile" parameter in hbs templates.

---
 generators/block/index.cjs                    |  4 +--
 generators/block/templates/config/default.cjs |  1 +
 .../src/scripts/{template.mjs => template.js} |  0
 .../block/templates/src/styles/template.scss  |  4 +--
 .../block/templates/src/template.template.hbs |  2 +-
 layouts/partials/head.hbs                     |  4 +--
 layouts/partials/scripts.hbs                  |  3 +-
 package.json                                  |  2 +-
 server.js                                     | 34 ++++++++-----------
 9 files changed, 26 insertions(+), 28 deletions(-)
 rename generators/block/templates/src/scripts/{template.mjs => template.js} (100%)

diff --git a/generators/block/index.cjs b/generators/block/index.cjs
index 42f9b30..b4d4d5a 100644
--- a/generators/block/index.cjs
+++ b/generators/block/index.cjs
@@ -60,8 +60,8 @@ module.exports = class extends Generator {
     );
 
     this.fs.copyTpl(
-      this.templatePath('src/scripts/template.mjs'),
-      this.destinationPath(path.join(pathDist, 'src', 'scripts', data.blockFilename + '.mjs')),
+      this.templatePath('src/scripts/template.js'),
+      this.destinationPath(path.join(pathDist, 'src', 'scripts', data.blockFilename + '.js')),
       data
     );
 
diff --git a/generators/block/templates/config/default.cjs b/generators/block/templates/config/default.cjs
index 7b71d9b..08e5adc 100644
--- a/generators/block/templates/config/default.cjs
+++ b/generators/block/templates/config/default.cjs
@@ -1,5 +1,6 @@
 module.exports = {
   cssUrl: "https://",
+  jsUrl: "https://",
   blockName: "<%= blockFilename %>",
   baseView: "<%= baseView %>",
   remToPx: <%= remToPx %>,
diff --git a/generators/block/templates/src/scripts/template.mjs b/generators/block/templates/src/scripts/template.js
similarity index 100%
rename from generators/block/templates/src/scripts/template.mjs
rename to generators/block/templates/src/scripts/template.js
diff --git a/generators/block/templates/src/styles/template.scss b/generators/block/templates/src/styles/template.scss
index efcda0f..88d6e05 100644
--- a/generators/block/templates/src/styles/template.scss
+++ b/generators/block/templates/src/styles/template.scss
@@ -1,5 +1,5 @@
 /**
- * Use "rem" instead of pixels. 1rem = 16pixels
+ * Use "rem" instead of pixels. 1rem = <%= remToPx %>pixels
  *    No need to use rem in situations of "1px". (usually used for borders width).
  *
  * Use BEM naming system for class names: http://getbem.com/naming/
@@ -25,7 +25,7 @@
 
   &__visual {
     &-image {
-      // Example of BEM usage.
+
     }
   }
 
diff --git a/generators/block/templates/src/template.template.hbs b/generators/block/templates/src/template.template.hbs
index 0838b16..d069ca3 100644
--- a/generators/block/templates/src/template.template.hbs
+++ b/generators/block/templates/src/template.template.hbs
@@ -1,4 +1,4 @@
-<section class="<%= blockClassName %>">
+<section class="<%= blockClassName %> <%= blockClassName %>--{{ activeDataFile }}">
 
   {{!
   Remove Everything Below:
diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs
index e3bfc49..6b7ee45 100644
--- a/layouts/partials/head.hbs
+++ b/layouts/partials/head.hbs
@@ -2,8 +2,8 @@
   <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">
+  {{#if config.cssUrl }}<link rel="stylesheet" href="{{ config.cssUrl }}">
+  {{/if}}<link rel="stylesheet" href="styles/page--main.css">
   <link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 </head>
diff --git a/layouts/partials/scripts.hbs b/layouts/partials/scripts.hbs
index bafc29c..ded04ff 100644
--- a/layouts/partials/scripts.hbs
+++ b/layouts/partials/scripts.hbs
@@ -1,4 +1,5 @@
 <script src="https://code.jquery.com/jquery-3.4.1.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/page--toolbar.js"></script>{{#if config.jsUrl }}
+<script src="{{ config.jsUrl }}"></script>{{/if}}
 <script src="scripts/{{ config.blockName }}.min.js"></script>
diff --git a/package.json b/package.json
index cf91c69..1c13f7e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "create-block-dev-tool",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"scripts": {
 		"start": "component-dev",
 		"dev": "NODE_ENV=development node server.js",
diff --git a/server.js b/server.js
index 21acd91..3c18dee 100755
--- a/server.js
+++ b/server.js
@@ -20,8 +20,7 @@ import fs from "fs/promises";
 
 const isDev = config.has('mode') && config.get('mode') === 'development';
 const modulePath = 'node_modules/create-block-dev-tool/';
-const projectDir = isDev ? '' : modulePath;
-console.log('Development Mode:', isDev);
+const projectDir = modulePath;
 
 const sass = gulpSass(dartSass);
 
@@ -53,18 +52,20 @@ app.get('/', async (req, res) => {
   const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
 
   Object.assign(data, {
-    config: {
-      projectDir,
-      dataFiles: dataFiles.map((name) => {
-        return {
-          name,
-          active: jsonFileName === name,
-        };
-      }),
-      remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-      cssUrl: config.get('cssUrl'),
-      blockName: config.get('blockName')
-    }
+    config: Object.assign(
+      JSON.parse(JSON.stringify(config)), // The entire config object.
+      {
+        projectDir,
+        activeDataFile: jsonFileName,
+        dataFiles: dataFiles.map((name) => {
+          return {
+            name,
+            active: jsonFileName === name,
+          };
+        }),
+        remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
+      }
+    )
   });
 
   data.helpers = {
@@ -159,8 +160,3 @@ function prepareListOfDataFiles(dataFiles) {
     })
     .sort();
 }
-
-// TODO:
-// Breakpoints and data options will come from backend server.
-// [v] Top Panel with options to switch data (select input)
-// - Options to resize the page and test Responsiveness (select input)