Блок информации о блоке для библиотеки

.gitignore

@@ -2,6 +2,7 @@ build/*
 !build/readme.md
 design/
 src/blocks/sprite-svg--localstorage/img/*.svg
+src/docs-files/docs.css
 
 .Saved/
 _arc/

gulpfile.js

@@ -89,6 +89,26 @@ gulp.task('less', function () {
     .pipe(browserSync.stream());
 });
 
+// Компиляция LESS для документации
+gulp.task('less:docs', function () {
+  console.log('---------- Компиляция LESS для документации');
+  return gulp.src('src/docs-files/docs.less')
+    .pipe(less())
+    .on('error', notify.onError(function(err){
+      return {
+        title: 'Styles compilation error',
+        message: err.message
+      }
+    }))
+    .pipe(postcss([
+        autoprefixer({browsers: ['last 2 version']}),
+        mqpacker
+    ]))
+    .pipe(rename('docs.css'))
+    .pipe(gulp.dest('src/docs-files/'))
+    .pipe(browserSync.stream());
+});
+
 // Копирование добавочных CSS, которые хочется иметь отдельными файлами
 gulp.task('copy:css', function(callback) {
   if(blocks.additionalCss.length > 0) {
@@ -243,7 +263,7 @@ gulp.task('clean', function () {
 gulp.task('build', gulp.series(
   'clean',
   'svgstore',
-  gulp.parallel('less', 'copy:css', 'img', 'js', 'js:copy'),
+  gulp.parallel('less', 'less:docs', 'copy:css', 'img', 'js', 'js:copy'),
   'html'
 ));
 
@@ -260,6 +280,7 @@ gulp.task('serve', gulp.series('build', function() {
     dirs.source + '/blocks/**/*.html',
   ], gulp.series('html', reloader));
   gulp.watch(blocks.less, gulp.series('less'));
+  gulp.watch('src/docs-files/docs.less', gulp.series('less:docs'));
   if(blocks.img) {
     gulp.watch(blocks.img, gulp.series('img', reloader));
   }

src/blocks_library.html

@@ -4679,5 +4679,14 @@
 @@include('blocks/page-footer/page-footer.html')
 @@include('_include/page_bottom.html')
 <script>hljs.initHighlightingOnLoad();</script>
+
+<style>
+  @@include('docs-files/docs.css')
+</style>
+<script>
+  @@include('docs-files/docs.js')
+</script>
+@@include('docs-files/docs.html')
+
 </body>
 </html>

src/docs-files/docs.html

+<div class="in-lib-block-info" id="in-lib-block-info">
+  <span class="in-lib-block-info__toggler" id="in-lib-block-info__toggler">&#8646;</span>
+  <div class="in-lib-block-info__inner">
+    <section class="in-lib-block-info__block">
+      <div class="in-lib-block-info__block-header">
+        <h1 class="in-lib-block-info__block-title">Секция 1</h1>
+      </div>
+      <div class="in-lib-block-info__block-content">
+        Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись дорогу, ручеек дороге, пунктуация повстречался все образ последний ее текстов своих предупредила моей оксмокс! Всемогущая безорфографичный взгляд заманивший там.
+      </div>
+    </section>
+  </div>
+</div>

src/docs-files/docs.js

+document.addEventListener('DOMContentLoaded', function(){
+
+  // Проверим запись показа панели доков
+  var panelShown = localStorage.getItem('panelShown');
+  if(!panelShown) {
+    localStorage.setItem('panelShown', '0');
+  }
+  console.log(panelShown);
+  if(panelShown === '1') {
+    document.getElementById('in-lib-block-info').classList.add('in-lib-block-info--visible');
+  }
+
+  // Следим за кликом и показываем/прячем панель, пишем состояние в LS
+  var toggler = document.getElementById('in-lib-block-info__toggler');
+  var panel = document.getElementById('in-lib-block-info');
+  toggler.onclick = function(){
+    if(panel.classList.contains('in-lib-block-info--visible')) {
+      panel.classList.remove('in-lib-block-info--visible');
+      localStorage.setItem('panelShown', '0');
+    }
+    else {
+      panel.classList.add('in-lib-block-info--visible');
+      localStorage.setItem('panelShown', '1');
+    }
+  }
+
+});

src/docs-files/docs.less

+.in-lib-block-info {
+  border: 1px solid #ddd;
+  position: fixed;
+  z-index: 999;
+  bottom: 0;
+  right: 0;
+  width: 480px;
+  max-height: 50vh;
+  box-shadow: 0 0 6px rgba(0,0,0,0.4);
+  transform: translateX(480px);
+  transition: all .2s;
+
+  &--visible {
+    transform: translateX(0);
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 1;
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    overflow-y: auto;
+  }
+
+  &__toggler {
+    position: absolute;
+    top: 5px;
+    left: -30px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    line-height: 26px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: 0 0 6px rgba(0,0,0,0.4);
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: #eee;
+    }
+  }
+
+}