Несколько блоков в pug-формате

createBlock.js

@@ -35,7 +35,7 @@ if (blockName) {
 
         // Если это SCSS
         if (extension === 'scss') {
-          fileContent = `// В этом файле должны быть стили для БЭМ-блока ${blockName}, его элементов, \n// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority\n\n.${blockName} {\n\n  $block-name:                &; // #{$block-name}__element\n\n}\n`;
+          fileContent = `// В этом файле должны быть стили для БЭМ-блока ${blockName}, его элементов, \n// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority\n\n.${blockName} {\n\n  $block-name:                &; // #{$block-name}__element\n}\n`;
           // fileCreateMsg = '';
 
           // Добавим созданный файл

projectConfig.json

@@ -57,7 +57,8 @@
     "embed-responsive": [],
     "pie-chart": [],
     "fields-group": [],
-    "tooltip": []
+    "tooltip": [],
+    "scroll-link": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",
@@ -95,4 +96,4 @@
     "buildPath": "./build/",
     "blocksDirName": "blocks"
   }
-}
+}
\ No newline at end of file

src/blocks-library.pug

@@ -28,7 +28,7 @@ block append head
         var classes = 'menu__item';
         var block = demoBlocks[i];
         if (block.classList.contains('blocks-library__item--menusep')) { classes += ' menu__item--separator'; }
-        offCanvasMenu += '<li class="'+classes+'"><a class="menu__link" data-toggle-native="off-canvas" href="#'+block.getAttribute('id')+'">'+block.querySelector('.blocks-library__item-title').textContent+'</a></li>';
+        offCanvasMenu += '<li class="'+classes+'"><a class="menu__link" data-toggle-native="off-canvas" href="#'+block.getAttribute('id')+'" data-scroll-link>'+block.querySelector('.blocks-library__item-title').textContent+'</a></li>';
       }
       var offCanvasMenuContent = document.getElementById('off-canvas-menu');
       offCanvasMenuContent.innerHTML = offCanvasMenu;
@@ -59,10 +59,14 @@ block content
       path(d='M19 33.5h14c.552 0 1-.447 1-1s-.448-1-1-1H19c-.552 0-1 .447-1 1s.448 1 1 1zm0 6h22c.552 0 1-.447 1-1s-.448-1-1-1H19c-.552 0-1 .447-1 1s.448 1 1 1zm0 6h22c.552 0 1-.447 1-1s-.448-1-1-1H19c-.552 0-1 .447-1 1s.448 1 1 1z')
 
   //- Вывод блока библиотеки
-  mixin block-lib(id, title, sep)
-    section.blocks-library__item(id=id)(class= sep ? 'blocks-library__item--menusep' : '')
+  mixin block-lib(id, title, sep, realBlockId)
+    if(typeof(realBlockId) !== 'undefined' && realBlockId)
+      - var realId = realBlockId
+    else
+      - var realId = id
+    section.blocks-library__item(id=id, data-id=realId)(class= sep ? 'blocks-library__item--menusep' : '')
       h2.blocks-library__item-title
-        a(href=repoUrl + '/tree/master/src/blocks/' + id, class="blocks-library__item-title-link", title="Папка блока в репозитории")
+        a(href=repoUrl + '/tree/master/src/blocks/' + realId, class="blocks-library__item-title-link", title="Папка блока в репозитории")
           svg(width="20", height="20")
             use(xlink:href="#folder")
         != title
@@ -622,6 +626,18 @@ block content
   +block-lib('is-mobile', 'Определение мобильного устройства', false)
     include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/is-mobile/readme.md
 
+  +block-lib('scroll-link', 'Ссылки на якоря страницы', false)
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/scroll-link/readme.md
+    +scroll-link('Описание блока <code>page</code>', '#page')
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/scroll-link/scroll-link.pug
+
+  +block-lib('to-top-block', 'Ссылка «вверх»', false, 'to-top')
+    include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/to-top/readme.md
+    +to-top()
+    +block-lib-code()
+      include:show-code(first-line="//- Pug-файл этого блока:") blocks/to-top/to-top.pug
+
 
 
   .burger.blocks-library__menu-toggler(data-toggle="off-canvas")

src/blocks/scroll-link/readme.md

+Блок не содержит стилизации, только Javascript. По странице ищутся все ссылки-якоря c атрибутом `data-scroll-link`, навешивается слежение за кликом, по клику — плавный скролл (500 мс, ускорение) к тегу с целевым `id`.

src/blocks/scroll-link/scroll-link.js

+document.addEventListener('DOMContentLoaded', function(){
+  var links = document.querySelectorAll('[href^="#"][data-scroll-link]');
+  for (var i = 0; i < links.length; i++) {
+    links[i].addEventListener('click', function(e) {
+      var hash = this.href.replace(/[^#]*(.*)/, '$1');
+      if(hash && hash !== '#') {
+        e.preventDefault();
+        var scroll = window.pageYOffset;
+        var targetTop = getOffsetRect(document.querySelector(hash)).top;
+        var scrollDiff = (scroll - targetTop) * -1;
+        animate({
+          duration: 500,
+          timing: function(timeFraction) {
+            return Math.pow(timeFraction, 4); // https://learn.javascript.ru/js-animation
+          },
+          draw: function(progress) {
+            var scrollNow = scroll + progress * scrollDiff;
+            window.scrollTo(0,scrollNow);
+          }
+        });
+      }
+    }, false);
+  }
+
+  function animate(_ref) {
+    var timing = _ref.timing,
+        draw = _ref.draw,
+        duration = _ref.duration;
+    var start = performance.now();
+    requestAnimationFrame(function animate(time) {
+      var timeFraction = (time - start) / duration;
+      if (timeFraction > 1) timeFraction = 1;
+      var progress = timing(timeFraction);
+      draw(progress);
+      if (timeFraction < 1) {
+        requestAnimationFrame(animate);
+      }
+    });
+  }
+
+  function getOffsetRect(elem) {
+    var box = elem.getBoundingClientRect()
+    var body = document.body
+    var docElem = document.documentElement
+    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
+    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
+    var clientTop = docElem.clientTop || body.clientTop || 0
+    var clientLeft = docElem.clientLeft || body.clientLeft || 0
+    var top  = box.top +  scrollTop - clientTop
+    var left = box.left + scrollLeft - clientLeft
+    return { top: Math.round(top), left: Math.round(left) }
+  }
+
+});

src/blocks/scroll-link/scroll-link.pug

+//- Все примеси в этом файле должны начинаться c имени блока (scroll-link)
+
+mixin scroll-link(text, href, mods)
+
+  //- Принимает:
+  //-   text    {string} - текст
+  //-   href    {string} - значение href
+  //-   mods    {string} - список модификаторов
+  //- Вызов:
+        +scroll-link('Страница', '#page', 'some-mod')
+        +scroll-link('Страница', '#page')
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' scroll-link--' + modsList[i].trim();
+      }
+    }
+
+  a.scroll-link(class=allMods, href=href, data-scroll-link='')&attributes(attributes)!= text

src/blocks/scroll-link/scroll-link.scss

+// В этом файле должны быть стили для БЭМ-блока scroll-link, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
+
+.scroll-link {}

src/blocks/to-top/readme.md

+Ссылка «вверх» в нижнем правом углу страницы. Видима только если скролл больше указанного в Javascript-файле блока значения.

src/blocks/to-top/to-top.html

-<!--DEV
-
-Для использования этого файла как шаблона:
-
-@ @include('blocks/to-top/to-top.html')
-
-(Нужно убрать пробел между символами @)
-Подробнее: https://www.npmjs.com/package/gulp-file-include
-
-
-
-<a href="#" class="to-top" id="toTop">↑</a>
-
--->

src/blocks/to-top/to-top.js

-$( document ).ready(function() {
+document.addEventListener('DOMContentLoaded', function(){
 
-  var t0;
+  document.querySelector('#to-top').addEventListener('click', function(e) {
+    e.preventDefault();
+    var scroll = window.pageYOffset;
+    var targetTop = 0;
+    var scrollDiff = (scroll - targetTop) * -1;
+    animate({
+      duration: 500,
+      timing: function(timeFraction) {
+        return Math.pow(timeFraction, 4); // https://learn.javascript.ru/js-animation
+      },
+      draw: function(progress) {
+        var scrollNow = scroll + progress * scrollDiff;
+        window.scrollTo(0,scrollNow);
+      }
+    });
+  }, false);
 
-  $('#toTop').hide().on('click', function(event){
-    event.preventDefault();
-    $('html, body').animate({scrollTop:0}, 300);
-  });
+  window.addEventListener('scroll', visibilityToggle);
+  visibilityToggle();
 
-  $(window).on('scroll', function(){
-    clearTimeout(t0);
-    t0 = setTimeout(function () {
-        showScrollTopButton();
-      }, 100);
-  });
-
-  showScrollTopButton();
-
-  function showScrollTopButton(){
-    if ( $(document).scrollTop() >= 900 ) {
-      $('#toTop').fadeIn();
+  function visibilityToggle() {
+    if(window.pageYOffset >= 500) {
+      document.querySelector('#to-top').classList.add('to-top--visible');
     }
     else {
-      $('#toTop').fadeOut();
+      document.querySelector('#to-top').classList.remove('to-top--visible');
     }
   }
 
+  function animate(_ref) {
+    var timing = _ref.timing,
+        draw = _ref.draw,
+        duration = _ref.duration;
+    var start = performance.now();
+    requestAnimationFrame(function animate(time) {
+      var timeFraction = (time - start) / duration;
+      if (timeFraction > 1) timeFraction = 1;
+      var progress = timing(timeFraction);
+      draw(progress);
+      if (timeFraction < 1) {
+        requestAnimationFrame(animate);
+      }
+    });
+  }
+
 });

src/blocks/to-top/to-top.pug

+//- Все примеси в этом файле должны начинаться c имени блока (to-top)
+
+mixin to-top(mods)
+
+  //- Принимает:
+  //-   mods    {string} - список модификаторов
+  //- Вызов:
+        +to-top()
+
+  -
+    // список модификаторов
+    var allMods = '';
+    if(typeof(mods) !== 'undefined' && mods) {
+      var modsList = mods.split(',');
+      for (var i = 0; i < modsList.length; i++) {
+        allMods = allMods + ' to-top--' + modsList[i].trim();
+      }
+    }
+
+  a.to-top#to-top(class=allMods, href='#')&attributes(attributes) ↑

src/blocks/to-top/to-top.scss

@@ -22,8 +22,15 @@
   background-repeat: no-repeat;
   background-position: center;
   transform: rotate(180deg);
+  transition: opacity $transition-time;
 
   .js & {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
+
+    &--visible {
+      opacity: 1;
+      visibility: visible;
+    }
   }
 }

src/pug/mixins.pug

@@ -29,3 +29,5 @@ include ../blocks/pie-chart/pie-chart.pug
 include ../blocks/comment/comment.pug
 include ../blocks/embed-responsive/embed-responsive.pug
 include ../blocks/tooltip/tooltip.pug
+include ../blocks/scroll-link/scroll-link.pug
+include ../blocks/to-top/to-top.pug

src/scss/blocks-library.scss

@@ -16,7 +16,7 @@
     }
 
     &:before {
-      content: '.' attr(id);
+      content: '.' attr(data-id);
       position: absolute;
       top: -1em;
       left: 0;