Merge pull request yoksel#4 from yoksel/body-class

Body class

Author: yoksel

assets/js/script.js

@@ -16,6 +16,7 @@ var headersOrder = ['H1','H2','H3','H4','H5','H6'];
 var headersList = [];
 var isWHolePage = false;
 var hasBemWarning = false;
+var bodyClass = '';
 
 var wholePageMarkers = ['META', 'TITLE', 'LINK'];
 var skippedTags = ['SCRIPT', 'META', 'TITLE', 'LINK', 'NOSCRIPT', 'BR', 'svg'];
@@ -72,6 +73,12 @@ function createTreeFromHTML ( code ) {
     return;
   }
 
+  bodyClass = getBodyClass( code );
+  if (bodyClass) {
+    bodyClass.forEach( function( item ) {
+      item && codeOutput.classList.add( item );
+    });
+  }
   codeOutput.innerHTML = code;
 
   var items = makeList( codeOutput, 1 );
@@ -101,6 +108,8 @@ function makeList ( elem, level ) {
   item.classList.add('gnr-level__item');
   var tagName = elem.tagName;
   var className = elem.className;
+  elem.classList.forEach = [].forEach;
+  elem.children.forEach = [].forEach;
 
   if ( !elem.customDataSet ) {
     elem.customDataSet = {
@@ -111,7 +120,6 @@ function makeList ( elem, level ) {
 
   if ( level === 1 ) {
     tagName = 'BODY';
-    className = '';
   }
 
   var liContent = doc.createElement('div');
@@ -139,7 +147,7 @@ function makeList ( elem, level ) {
     var classSpan = doc.createElement('span');
     classSpan.classList.add('gnr-elem__class', 'gnr-class');
 
-    Array.prototype.forEach.call( elem.classList, function ( classItem, i ) {
+    elem.classList.forEach(function ( classItem, i ) {
       var classItemSpan = doc.createElement('span');
       classItemSpan.classList.add('gnr-class__item');
       classItemSpan.innerHTML += classItem;
@@ -176,7 +184,7 @@ function makeList ( elem, level ) {
 
     level++;
 
-    Array.prototype.forEach.call( elem.children, function ( child ) {
+    elem.children.forEach( function ( child ) {
       checkIsWholePage( child );
 
       if ( !checkIsSkippedTag( child )) {
@@ -228,16 +236,16 @@ function addClassesActions () {
 //------------------------------
 
 function checkBemForElem ( elem ) {
+  elem.classList.forEach = [].forEach;
 
   if ( elem.className.indexOf('__') < 0 &&
        elem.className.indexOf('--') < 0 ) {
     return;
   }
 
-  elem.classList['validBem'] = {};
+  elem.classList.validBem = {};
   var parentPrefixes = findPrefixInParentNode( elem );
-
-  Array.prototype.forEach.call( elem.classList, function ( classItem ) {
+  elem.classList.forEach( function ( classItem ) {
 
     // Check first part of class with __ (block name)
     if ( classItem.split('__').length > 1 ) {
@@ -248,7 +256,7 @@ function checkBemForElem ( elem ) {
         prefixCorrect = true;
       }
 
-      elem.classList['validBem'][ classItem ] = prefixCorrect;
+      elem.classList.validBem[ classItem ] = prefixCorrect;
 
       if ( !prefixCorrect ) {
         hasBemWarning = true;
@@ -264,7 +272,7 @@ function checkBemForElem ( elem ) {
         modifPrefixCorrect = true;
       }
 
-      elem.classList['validBem'][ classItem ] = modifPrefixCorrect;
+      elem.classList.validBem[ classItem ] = modifPrefixCorrect;
 
       if ( !modifPrefixCorrect ) {
         hasBemWarning = true;
@@ -276,10 +284,17 @@ function checkBemForElem ( elem ) {
 //------------------------------
 
 function findPrefixInParentNode ( elem ) {
-  var classList = elem.parentNode.classList;
+  var parent = elem.parentNode;
+
+  if (!parent) {
+    return {};
+  }
+
+  var classList = parent.classList;
+  classList.forEach = [].forEach;
   var prefixes = {};
 
-  Array.prototype.forEach.call( classList, function ( classItem ) {
+  classList.forEach(function ( classItem ) {
     if ( classItem.split('__').length > 1 ) {
       var prefix = classItem.split('__')[0];
       prefixes[ prefix ] = prefix;
@@ -293,12 +308,11 @@ function findPrefixInParentNode ( elem ) {
 
 function addClassesAsPrefixes ( elem ) {
   var classList = elem.classList;
+  classList.forEach = [].forEach;
 
-  if ( elem.customDataSet.level > 2 ) {
-    copyPrefixes( elem );
-  }
+  copyPrefixes( elem );
 
-  Array.prototype.forEach.call( classList, function ( classItem ) {
+  classList.forEach(function ( classItem ) {
     // Copy only block names
     if ( classItem.split('__').length === 1 &&
          classItem.split('--').length === 1 ) {
@@ -311,6 +325,11 @@ function addClassesAsPrefixes ( elem ) {
 
 function copyPrefixes ( elem ) {
   var parent = elem.parentNode;
+
+  if (!parent) {
+    return;
+  }
+
   for ( var prefix in parent.customDataSet.prefixes ) {
     elem.customDataSet.prefixes[ prefix ] = prefix;
   }
@@ -331,7 +350,7 @@ rangeDeep.oninput = function () {
   var styles = '.gnr-level--' + level + '{ display: none }';
   styleElem.innerHTML = styles;
   valDeep.innerHTML = this.value;
-}
+};
 
 //------------------------------
 
@@ -453,6 +472,18 @@ function printCurrentElem( elem ) {
 
 //------------------------------
 
+function getBodyClass(code) {
+  var result = code.match(/<body[^>]*class="(.*)"/);
+
+  if (result) {
+    return result[1].split(' ');
+  }
+
+  return '';
+}
+
+//------------------------------
+
 function runDev () {
   var testMarkup = '<h1 class="page__title">Title</h1><div class="wrapper"><section class="prices1"><div><h2 class="prices__title">Title</h2><div class="prices__content prices__content--disabled">Content</div></div></section><section class="reviews"><div><h2 class="reviews__title">Title</h2><div class="reviews__content">Content</div></div></section><footer class="footer"><div><h2 class="footer__title">Footer Title</h2><div class="footer__content"><h4 class="footer__subtitle">Footer SubTitle</h4>Footer Content</div></div></footer></div></div>';
   codeInput.value = testMarkup;