add blocks and features

ba5635e0 · Nikolay Gromov · 805766af · ba5635e0 · ba5635e0 · ba5635e0
Commit ba5635e0 authored Feb 26, 2016 by Nikolay Gromov
9 changed files
--- a/README.md
+++ b/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/`)
 ## Назначение папок

--- a/createBlock.js
+++ b/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';
+          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\',{"key":"value"})  Подробнее: https://www.npmjs.com/package/gulp-file-include';
+          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) {

--- a/gulpfile.js
+++ b/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-файлами

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

--- a/src/blocks/field-text/field-text--textarea.html
+++ b/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>
--- a/src/blocks/field-text/field-text.html
+++ b/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>
--- a/src/blocks/field-text/field-text.less
+++ b/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;
+    }
+  }
+}
--- a/src/blocks/table-responsive/table-responsive.html
+++ b/src/blocks/table-responsive/table-responsive.html
+<!--DEVCOMMENT
+Нужно убрать пробел между @-ами:
+@ @include('blocks/table-responsive/table-responsive.html')
+ -->
 <table class="table-responsive">
  <thead>
    <tr>

--- a/src/less/style.less
+++ b/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";