Last active
October 9, 2017 12:00
-
-
Save anemos474/a4ff68a8a7b13f6179a6d6cd98243e45 to your computer and use it in GitHub Desktop.
bemmake
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>BEM make</title> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <textarea id='bemstruct'>container | |
| container__contact-us | |
| container__narrow contact-us | |
| contacts | |
| contacts__item | |
| contacts__link | |
| contact label | |
| contact__icon label__icon | |
| contact__text label__text | |
| social | |
| social__item | |
| a href=''|social__link icon icon_sprite_social icon_social_**** | |
| container__screen container__screen_first | |
| container__narrow | |
| header | |
| header__logo | |
| logo | |
| logo__image | |
| header__menu | |
| ul|menu | |
| li|menu__item | |
| a href=""|menu__link</textarea> | |
| </body> | |
| <script> | |
| function bemmake(){ | |
| var | |
| oBemstruct = document.getElementById('bemstruct') // объект текстового поля на странице | |
| ,aBemstruct = oBemstruct.value.split('\n') // массив строк BEM-структуры | |
| ,sHTML = '==NEXT_0==' // NEXT_0 - первая точка вставки | |
| ,sCSS = '' | |
| ,iPreviousLineTabCount = 0 | |
| ; | |
| // обработать массив строк при помощи цикла | |
| for (var i=0; i<aBemstruct.length; i++){ | |
| var | |
| sBemLine = aBemstruct[i] | |
| ,aBemLine = sBemLine.match(/(\t*)(([^\t\n\| ]+)( [^\t\n\|]+)?\|)?(([^\t\n\|]+))?(.*)/) | |
| ,sTabs = aBemLine[1] | |
| ,sTag = aBemLine[3] | |
| ,sAttributes = aBemLine[4] | |
| ,sClassNames = aBemLine[6] | |
| ,iTabCount = sTabs.length | |
| ; | |
| if (sTag === undefined){ | |
| sTag = 'div'; | |
| } | |
| if (sAttributes === undefined){ | |
| sAttributes = ''; | |
| } | |
| // | |
| // <\1 class='\2'></\1> <!-- end of \2 --> | |
| sLine = '\n'+sTabs + "<"+sTag+sAttributes+" class='"+sClassNames+"'>" | |
| + '==INSIDE==' | |
| +'\n'+sTabs+"</"+sTag+"> " | |
| +"==NEXT_" + iTabCount + "=="; | |
| var cssClassNames = sClassNames.split(' '); | |
| for (var l=0; l < cssClassNames.length; l++){ | |
| var cssLine = cssClassNames[l] | |
| ,cLine = '\n'+'.'+cssLine+' {}' | |
| ; | |
| console.warn( | |
| 'Step #', l | |
| , '\nТекущий CSS тег:', cLine | |
| ); | |
| console.log( | |
| '\nВесь CSS документ:', sCSS += cLine | |
| ); | |
| } | |
| console.warn( | |
| 'Step #', i | |
| , '\nТекущий тег:', sLine | |
| ); | |
| console.log( | |
| '\nВесь документ:', sHTML | |
| ); | |
| //debugger; // программный брейкпоинт | |
| if (iTabCount > iPreviousLineTabCount){ // если кол-во табуляций на этой строке больше чем на предыдущей, | |
| sHTML = sHTML.replace('==INSIDE==', sLine); // то вставка выполняется в переменную sHTML в позицию ==INSIDE== | |
| } | |
| else { // иначе кол-во табуляций на этой строке меньше или равно чем на предыдущей, | |
| sHTML = sHTML.replace('==INSIDE==', ''); // удалить метку ==INSIDE== | |
| if (iTabCount < iPreviousLineTabCount) { | |
| console.warn('Сейчас будет выполнено удаление верхних уровней после перехода на более нижний уровень структуры'); | |
| //debugger; | |
| for (var j=iTabCount + 1; j<=20; j++){ // *** от тек уровня iTabCount + 1 до 20-ти... | |
| sHTML = sHTML.replace('==NEXT_' + j + '==', ''); // удалить метку ==NEXT_n== | |
| } | |
| console.log('Удаление верхних уровней после перехода на более нижний уровень структуры - ВЫПОЛНЕНО' | |
| , '\nВесь документ:', sHTML); | |
| //debugger; | |
| } | |
| sHTML = sHTML.replace('==NEXT_'+iTabCount+'==', sLine); // вставка выполняется в переменную sHTML в позицию ==NEXT_n== , где n = iTabCount | |
| } | |
| iPreviousLineTabCount = iTabCount; | |
| } | |
| sHTML = sHTML.replace(/==[^=]+==/g, ''); // удаление мусора | |
| console.log(sHTML); | |
| // return sHTML; // copy(bemmake()); | |
| } | |
| bemmake(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment