add blocks and features

README.md

@@ -58,14 +58,22 @@ node createBlock.js [имя блока] [доп. расширения через
 То указанный файл будет взят в компиляцию стилей, а так же:
 - в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block.js` (если существует и не пустой)
 - в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block.css` (если существует и не пустой)
-- в обработку будут добавлены все картинки блока: `src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}`
+- в обработку будут добавлены все картинки блока: `src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
 
+Если в диспетчере подключений:
 
 ```
 @import "../blocks/demo-block/demo-block.less";
 @import "../blocks/demo-block/demo-block--mod.less";
 ```
 
+То указанные файлы будет взяты в компиляцию стилей, а так же:
+- в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block.js` (если существует и не пустой)
+- в обработку будет взят js-файл блока: `src/blocks/demo-block/demo-block--mod.js` (если существует и не пустой)
+- в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block.css` (если существует и не пустой)
+- в обработку будет взят css-файл блока: `src/blocks/demo-block/demo-block--mod.css` (если существует и не пустой)
+- в обработку будут добавлены все картинки блока: `src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
+
 
 
 ## Назначение папок

createBlock.js

@@ -19,15 +19,6 @@ if(blockName) {
     }
     else {
       console.log('[NTH] Создание папки ' + dirPath + ' (создана, если ещё не существует)');
-      let dirImagesPath = dirPath + 'img';
-      // mkdirp(dirImagesPath, function(err){
-      //   if(err) {
-      //     console.error('[NTH] Папка для изображений не создана: ' + err);
-      //   }
-      //   else {
-      //     console.error('[NTH] Папка для изображений создана: ' + dirImagesPath);
-      //   }
-      // });
       extensions.forEach(function(extention){
         let filePath = dirPath + blockName + '.' + extention;
         let fileContent = '';
@@ -37,8 +28,8 @@ if(blockName) {
           fileCreateMsg = '[NTH] Для импорта стилей: @import "' + dirs.blocks + '/' + blockName + '/' + blockName + '.less";';
         }
         else if(extention == 'html') {
-          fileContent = '<div class="' + blockName + '">content</div>\n';
-          fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\',{"key":"value"})  Подробнее: https://www.npmjs.com/package/gulp-file-include';
+          fileContent = '<!--DEVCOMMENT\n\nНужно убрать пробел между @-ами:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n-->\n<div class="' + blockName + '">content</div>\n';
+          fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\')  Подробнее: https://www.npmjs.com/package/gulp-file-include';
         }
         if(fileExist(filePath) === false) {
           fs.writeFile(filePath, fileContent, function(err) {

gulpfile.js

@@ -261,10 +261,12 @@ function getComponentsFiles() {
       let componentName = componentData[1];
       // Имя подключаемого файла без расширения
       let componentFileName = componentData[3];
-      // Имя JS-файла, который нужно взять в сборку в этой итерации, если он существует
+      // Имя JS-файла, который нужно взять в сборку, если он существует
       let jsFile = dirs.blocks + '/' + componentName + '/' + componentFileName + '.js';
-      // Имя CSS-файла, который нужно взять в сборку в этой итерации, если он существует
+      // Имя CSS-файла, который нужно взять в сборку, если он существует
       let cssFile = dirs.blocks + '/' + componentName + '/' + componentFileName + '.css';
+      // Папка с картинками, которую нужно взять в сборку, если она существует
+      let imagesDir = dirs.blocks + '/' + componentName + '/img';
       // Если существует JS-файл — берём его в массив
       if(fileExistAndHasContent(jsFile)) {
         сomponentsFilesList.js.push(jsFile);
@@ -274,7 +276,9 @@ function getComponentsFiles() {
         сomponentsFilesList.css.push(cssFile);
       }
       // Берём в массив изображения
-      сomponentsFilesList.img.push(dirs.blocks + '/' + componentName + '/img/*.{jpg,jpeg,gif,png,svg}');
+      if(fileExist(imagesDir) !== false) {
+        сomponentsFilesList.img.push(imagesDir + '/*.{jpg,jpeg,gif,png,svg}');
+      }
     }
   });
   // Добавим глобальный JS-файл в начало массива с обрабатываемыми JS-файлами

src/_blocks_library.html

@@ -264,27 +264,17 @@
         <form action="" class="form">
           <fieldset>
             <legend>Варианты разметки и модификаторы</legend>
-            <div class="field-text">
-              <label class="field-text__name" for="field-text_id_001">Любое поле, выглядящее как текстовое</label>
-              <div class="field-text__input-wrap">
-                <input class="field-text__input" id="field-text_id_001" type="text" placeholder="input[type=text]">
-                <div class="field-text__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
-              </div>
-            </div>
-            <label class="field-text">
-              <div class="field-text__name">Любое поле, выглядящее как текстовое</div>
-              <div class="field-text__input-wrap">
-                <input class="field-text__input" type="text" placeholder="input[type=text]">
-                <div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
-              </div>
-            </label>
-            <label class="field-text">
-              <div class="field-text__name">Многострочное текстовое поле</div>
-              <div class="field-text__input-wrap">
-                <textarea class="field-text__input" rows="3" placeholder="textarea"></textarea>
-                <div class="field-text__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
-              </div>
-            </label>
+            @@include('blocks/field-text/field-text.html',{
+              "type": "text",
+              "name": "Любое поле, выглядящее как текстовое",
+              "placeholder": "input[type=text]",
+              "helpText":"Обёртка — <code>&lt;label&gt;</code>. Можно сделать обёртку <code>div</code>, но тогда элемент нужно <code>.field-text__name</code> делать <code>label</code> и связывать его с полем по <code>id</code> поля."
+            })
+            @@include('blocks/field-text/field-text--textarea.html',{
+              "name": "Многострочное текстовое поле",
+              "placeholder": "textarea",
+              "helpText": "Обёртка — <code>&lt;label&gt;</code>."
+            })
             <div class="field-checkbox">
               <div class="field-checkbox__title">Стандартные флажки</div>
               <div class="field-checkbox__input-wrap">

src/blocks/field-text/field-text--textarea.html

+<!--DEVCOMMENT
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-text/field-text--textarea.html',{
+  "name": "Текст",
+  "placeholder": "текст",
+  "helpText": "Введите текст."
+})
+
+ -->
+ <label class="field-text">
+  <div class="field-text__name">@@name</div>
+  <div class="field-text__input-wrap">
+    <textarea class="field-text__input" placeholder="@@placeholder"></textarea>
+    <div class="field-text__help-text">@@helpText</div>
+  </div>
+</label>

src/blocks/field-text/field-text.html

+<!--DEVCOMMENT
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/field-text/field-text.html',{
+  "type": "text",
+  "name": "Имя",
+  "placeholder": "Имя",
+  "helpText":"Введите имя"
+})
+
+ -->
+<label class="field-text">
+  <div class="field-text__name">@@name</div>
+  <div class="field-text__input-wrap">
+    <input class="field-text__input" type="@@type" placeholder="@@placeholder">
+    <div class="field-text__help-text">@@helpText</div>
+  </div>
+</label>

src/blocks/field-text/field-text.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.field-text {
+  display: block;
+  margin-bottom: (@line-height / 2);
+
+  &__name {
+    font-weight: 700;
+    display: block;
+    margin-bottom: round(@line-height / 4, 2);
+  }
+
+  &__input-wrap {}
+
+  &__input {
+    margin-bottom: round(@line-height / 3, 2);
+  }
+
+  &__help-text {
+    display: block;
+    font-size: @font-size--small-percent;
+    line-height: 1.2em;
+    color: @text-color--muted;
+
+    &:empty {
+      display: none;
+    }
+  }
+}

src/blocks/table-responsive/table-responsive.html

+<!--DEVCOMMENT
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/table-responsive/table-responsive.html')
+
+ -->
 <table class="table-responsive">
   <thead>
     <tr>

src/less/style.less

@@ -6,6 +6,8 @@
 @import "./src/less/global_grid.less";
 
 @import "./src/blocks/table-responsive/table-responsive.less";
+@import "./src/blocks/field-text/field-text.less";
+
 // @import "blocks/btn.less";
 // @import "blocks/form.less";
 // @import "blocks/field-text.less";