library

package.json

@@ -5,8 +5,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "./node_modules/.bin/gulp",
-    "less-lint": "lesshint ./src/less/ ./src/blocks/",
-    "precommit": "npm run less-lint"
+    "less-lint": "lesshint ./src/less/ ./src/blocks/"
   },
   "author": "Nikolay Gromov",
   "license": "MIT",

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

-$( document ).ready(function() {
-  $('.js-library-code-toggler').on('click', function(){
-    $(this).closest('.js-library-code-parent').find('.js-library-code').slideToggle();
-  });
+ready(function(){
+  // Открытие/закрытие блока с кодом
+  var codeShowTriggers = document.querySelectorAll('.blocks-library__code-show-trigger');
+  for (var i = 0; i < codeShowTriggers.length; i++) {
+    codeShowTriggers[i].addEventListener('click', function(){
+      this.closest('.blocks-library__code-wrapper').querySelector('.blocks-library__code').classList.toggle('blocks-library__code--shown');
+    });
+  }
 });

src/blocks/blocks-library/blocks-library.less

@@ -90,13 +90,20 @@
   }
 
   &__code {
+    transition: max-height @transition-time;
+    overflow: hidden;
 
     .js & {
-      display: none;
+      max-height: 0;
+    }
+
+    .js &--shown {
+      max-height: 410px;
     }
 
     pre {
       margin: 0;
+      max-height: 410px;
     }
   }
 }

src/blocks_library.html

@@ -1524,29 +1524,27 @@
   <section class="blocks-library__item" id="btn" data-name=".btn">
     <h1 class="blocks-library__item-title">Кнопки</h1>
     <div class="blocks-library__sub-item">
-      <div class="js-font-resizer">
-        <p>
-          <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
-          <a href="" class="btn">Cсылка</a>
-          <input type="submit" class="btn" value="Input">
-          <button class="btn">Button</button>
-          <!-- .btn.btn--main -->
-          <a href="" class="btn  btn--main">Cсылка</a>
-          <input type="submit" class="btn  btn--main" value="Input">
-          <button class="btn  btn--main">Button</button>
-          <!-- .btn.btn--success -->
-          <a href="" class="btn  btn--success">Cсылка</a>
-          <input type="submit" class="btn  btn--success" value="Input">
-          <button class="btn  btn--success">Button</button>
-          <!-- .btn.btn--danger -->
-          <a href="" class="btn  btn--danger">Cсылка</a>
-          <input type="submit" class="btn  btn--danger" value="Input">
-          <button class="btn  btn--danger">Button</button>
-        </p>
-      </div>
-      <div class="blocks-library__code-wrapper  js-library-code-parent">
-        <span class="blocks-library__code-show-trigger  js-library-code-toggler" title="Показать код"><i class="blocks-library__code-icon"></i></span>
-        <div class="blocks-library__code  js-library-code">
+      <p>
+        <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
+        <a href="" class="btn">Cсылка</a>
+        <input type="submit" class="btn" value="Input">
+        <button class="btn">Button</button>
+        <!-- .btn.btn--main -->
+        <a href="" class="btn  btn--main">Cсылка</a>
+        <input type="submit" class="btn  btn--main" value="Input">
+        <button class="btn  btn--main">Button</button>
+        <!-- .btn.btn--success -->
+        <a href="" class="btn  btn--success">Cсылка</a>
+        <input type="submit" class="btn  btn--success" value="Input">
+        <button class="btn  btn--success">Button</button>
+        <!-- .btn.btn--danger -->
+        <a href="" class="btn  btn--danger">Cсылка</a>
+        <input type="submit" class="btn  btn--danger" value="Input">
+        <button class="btn  btn--danger">Button</button>
+      </p>
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
           <pre>
             <code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
             <code class="html"> </code>

src/js/global-script.js

@@ -18,6 +18,24 @@ function closest(el, selector) {
 
 
 
+/*
+  Запуск по готовности DOM
+  http://youmightnotneedjquery.com/#ready
+  Применение: ready(function(){ console.log('ddd'); });
+*/
+
+function ready(fn) {
+  if (document.readyState != 'loading'){
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
+
+
+
+
 // Свой код с jQuery
 
 // $( document ).ready(function() {