Поле ввода количества: разметка и стили

src/blocks/blocks-library/blocks-library.js

@@ -4,6 +4,7 @@ require('../main-nav/main-nav.js');
 require('../burger/burger.js');
 require('../field-text/field-text.js');
 require('../field-file/field-file.js');
+require('../field-num/field-num.js');
 require('../field-select/field-select.js');
 require('../scroll-link/scroll-link.js');
 require('../to-top/to-top.js');

src/blocks/blocks-library/blocks-library.scss

@@ -16,6 +16,7 @@
 @import "../field-range/field-range.scss";
 @import "../field-select/field-select.scss";
 @import "../field-text/field-text.scss";
+@import "../field-num/field-num.scss";
 @import "../field-toggler/field-toggler.scss";
 @import "../form/form.scss";
 @import "../label/label.scss";

src/blocks/field-num/field-num.js

+/* global document */
+
+const closest = require('closest');
+const ready = require('../../js/utils/documentReady.js');
+
+ready(function(){
+
+  var fields = document.querySelectorAll( '.field-num' );
+  Array.prototype.forEach.call( fields, function( field ) {
+    const input = field.querySelector('.field-num__input');
+    const btnPlus = field.querySelector('.field-num__btn--plus');
+    const btnMinus = field.querySelector('.field-num__btn--minus');
+    const valueMin = input.getAttribute('min') ? input.getAttribute('min') : -Infinity;
+    const valueMax = input.getAttribute('max') ? input.getAttribute('max') : Infinity;
+    const valueStep = input.getAttribute('step') ? input.getAttribute('step') : 1;
+    // console.log(input, btnMinus, btnPlus);
+    // console.log(valueMin, valueMax, valueStep);
+    // Нажатия кнопок
+    field.addEventListener('click', function(event){
+      if(event.target.classList.contains('field-num__btn')) {
+        // это клик по кнопке
+      }
+    });
+  });
+
+});

src/blocks/field-num/field-num.pug

+//- Все примеси в этом файле должны начинаться c имени блока (field-num)
+
+mixin field-num(props)
+
+  //- Принимает:
+  //-   props {
+  //-     title: ''         {string} - текст с названием (выводится над полем)
+  //-     helpText: ''      {string} - пояснение под полем
+  //-     mods: ''          {string} - модификаторы блока
+  //-     val:              {number} - количество в поле
+  //-     attrs:            {object} - любые атрибуты для input
+  //-       placeholder:    {string}
+  //- Вызов:
+        +field-num({
+          title: 'Количество',
+          helpText: 'От 1 до 10, шаг 1',
+          mods: '',
+          val: '9',
+          attrs: {
+            name: 'quantity',
+            max: '10',
+            min: '1',
+            step: '1',
+          }
+        })
+        +field-num({
+          mods: 'error',
+          attrs: {
+            name: 'quantity',
+          }
+        })
+
+  -
+    if(typeof(props) === 'undefined') { var props = {}; }
+    var allMods = '';
+    if(typeof(props.mods) !== 'undefined' && props.mods) {
+      var modsList = props.mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' field-num--' + modsList[i].trim();
+      }
+    }
+    if(props.attrs.disabled) allMods = allMods + ' field-num--disabled';
+    var val = parseInt(props.val);
+    if(isNaN(val)) val = 0;
+
+  .field-num(class=allMods)&attributes(attributes)
+    if(typeof(props.title) !== 'undefined' && props.title)
+      span.field-num__name!= props.title
+    span.field-num__input-wrap
+      span.field-num__input-and-btns
+        button.field-num__btn.field-num__btn--minus(type='button') -
+        button.field-num__btn.field-num__btn--plus(type='button') +
+        input.field-num__input(type='number', value=val)&attributes(props.attrs)
+      if(typeof(props.helpText) !== 'undefined' && props.helpText)
+        span.field-num__help-text!= props.helpText
+      block

src/blocks/field-num/field-num.scss

+// В этом файле должны быть стили для БЭМ-блока field-num, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.field-num {
+
+  $block-name:                &; // #{$block-name}__element
+
+  display: block;
+  margin-bottom: $typo-margin-vertical;
+
+  &__name {
+    @include field-name;
+  }
+
+  &__input-wrap {
+    display: block;
+  }
+
+  &__input-and-btns {
+    position: relative;
+    display: block;
+    width: 140px;
+  }
+
+  &__input {
+    @include field-text;
+    padding: $field-padding-vertical 45px;
+    text-align: center;
+
+    #{$block-name}:not(#{$block-name}--disabled) button:focus ~ & { // stylelint-disable-line
+      @include field-focus;
+    }
+  }
+
+  &__btn {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    width: 40px;
+    border: none;
+    padding: 0;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    font-size: $font-size + 6;
+    font-weight: 700;
+    text-align: center;
+    background: transparent;
+
+    &:hover,
+    &:focus {
+      background-color: $gray-lightest;
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--plus {
+      right: 1px;
+    }
+
+    &--minus {
+      left: 1px;
+    }
+
+    #{$block-name}--disabled & {
+      cursor: not-allowed;
+
+      &:hover,
+      &:focus {
+        background: transparent;
+      }
+    }
+  }
+
+  &__help-text {
+    @include field-help-text;
+  }
+
+
+
+  &--error {
+
+    #{$block-name}__name,
+    #{$block-name}__input,
+    #{$block-name}__help-text {
+      color: $color-danger;
+    }
+
+    #{$block-name}__input {
+      border-color: $color-danger;
+      background-color: lighten($color-danger, 35%);
+    }
+  }
+}

src/pages/blocks-demo.pug

@@ -446,6 +446,34 @@ block content
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-text/field-text.pug
 
+  +block-lib('field-num', 'Выбор количества', false)
+    include:markdown-it(html='true') ../blocks/field-num/readme.md
+    +field-num({
+      title: 'Количество',
+      helpText: 'От 1 до 10, шаг 1',
+      val: '9',
+      attrs: {
+        name: 'quantity',
+        max: '10',
+        min: '1',
+        step: '1',
+      }
+    })
+    +field-num({
+      mods: 'error',
+      attrs: {
+        name: 'quantity1',
+      }
+    })
+    +field-num({
+      attrs: {
+        name: 'quantity2',
+        disabled: true,
+      }
+    })
+    +block-lib-code()
+      include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-num/field-num.pug
+
   +block-lib('field-checkbox', 'Флажок/чекбокс', false)
     include:markdown-it(html='true') ../blocks/field-checkbox/readme.md
     +field-checkbox([