Skip to content

K
kpp
Commit 029cfb72 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Библиотека: допилил до блоков форм

parent b96b583c
Show whitespace changes
Inline Side-by-side
Showing with 200 additions and 101 deletions
gulpfile.js
View file @ 029cfb72
......@@ -398,6 +398,20 @@ gulp.task('pug', function() {
const htmlbeautify = require('gulp-html-beautify');
const mainMenu = require(dirs.srcPath + dirs.blocksDirName + '/main-nav/main-nav.json');
console.log('---------- сборка Pug');
// Pug-фильтр, выводящий содержимое pug-файла в виде форматированного текста
const filterShowCode = function (text, options) {
var lines = text.split('\n');
var result = '<pre class="code">\n';
if (typeof(options['first-line']) !== 'undefined') result = result + '<code>' + options['first-line'] + '</code>\n';
for (var i = 0; i < (lines.length - 1); i++) { // (lines.length - 1) для срезания последней строки (пустая)
result = result + '<code>' + lines[i] + '</code>\n';
}
result = result + '</pre>\n';
result = result.replace(/<code><\/code>/g, '<code>&nbsp;</code>');
return result;
}
return gulp.src([
dirs.srcPath + '/*.pug',
])
......@@ -405,20 +419,10 @@ gulp.task('pug', function() {
.pipe(pug({
data: {
repoUrl: repoUrl, // передаем pug-у адрес репозитория проекта
mainMenu: mainMenu, // передаем pug-у объект с меню сайта
mainMenu: mainMenu, // передаем pug-у объект с главным меню сайта
},
filters: {
// фильтр, выводящий содержимое pug-файла в виде форматированного текста
'show-code': function (text, options) {
var lines = text.split('\n');
var result = '<pre class="code">';
for (var i = 0; i < (lines.length - 1); i++) { // (lines.length - 1) для срезания последней строки (пустая)
result = result + '<code>' + lines[i] + '</code>';
}
result = result + '</pre>';
result = result.replace(/<code><\/code>/g, '<code>&nbsp;</code>');
return result;
}
'show-code': filterShowCode
},
// compileDebug: false,
}))
......
src/blocks-library.pug
View file @ 029cfb72
......@@ -121,20 +121,68 @@ block content
div
+close('Закрыть')
+block-lib-code()
include:show-code() blocks/close/close.pug
include:show-code(first-line="//- Pug-файл этого блока:") blocks/close/close.pug
+block-lib('burger', 'Бургер', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/burger/readme.md
div
+burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
+block-lib-code('burger-code', true)
include:show-code() blocks/burger/burger.pug
include:show-code(first-line="//- Pug-файл этого блока:") blocks/burger/burger.pug
+block-lib('main-nav', 'Главная навигация', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/main-nav/readme.md
+main-nav('1')
+block-lib-code()
include:show-code() blocks/main-nav/main-nav.pug
include:show-code(first-line="//- Pug-файл этого блока:") blocks/main-nav/main-nav.pug
+block-lib('code', 'Код', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/code/readme.md
+code()
code &lt;div class="some">...&lt;/div>
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/code/code.pug
+block-lib('thumb', 'Картинки-миниатюры', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/thumb/readme.md
+thumb('img/joker.jpg', 'Джокер', 300, 200)
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/thumb/thumb.pug
+block-lib('alert', 'Сообщения', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/alert/readme.md
+alert('', 'success')
p Успех
+alert('Заголовok', 'danger')
p Проблема
+alert('Внимание!', 'warning, some-mod-name')
p Текст
+alert()
p Сообщение без модификаторов
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/alert/alert.pug
+block-lib('menu', 'Меню', true)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/menu/readme.md
-
var myMenu = [
{
'text':'Пункт1',
'url':'/',
},
{
'text':'Пункт2',
'url':'/',
'mods': 'separator, active',
},
{
'text':'Пункт3',
'url':'/',
},
];
+menu(myMenu)
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/menu/menu.pug
......
src/blocks/alert/alert.html deleted 100644 → 0
View file @ b96b583c
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/alert/alert.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
<div class="alert alert--danger">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
<div class="alert alert--success">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
<div class="alert alert--warning">
<h1 class="alert__header">Нейтральное сообщение</h1>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
</div>
-->
src/blocks/alert/alert.pug 0 → 100644
View file @ 029cfb72
//- Все примеси в этом файле должны начинаться c имени блока (alert)
mixin alert(title, mods)
//- Принимает:
//- title {string} - заголовок
//- mods {string} - стилевые модификаторы
//- Вызов:
//- +alert('', 'success')
//- p Успех
//- +alert('Заголовok', 'danger')
//- p Проблема
//- +alert('Внимание!', 'warning, some-mod-name')
//- p Текст
//- +alert()
//- p Сообщение без модификаторов
-
//- список модификаторов
var allMods = '';
if(typeof(mods) === 'string') {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' alert--' + modsList[i].trim();
}
}
div.alert(class=allMods)&attributes(attributes)
if (typeof(title) !== 'undefined' && title !== '')
h4.alert__header!= title
block
src/blocks/burger/burger.pug
View file @ 029cfb72
......@@ -10,9 +10,10 @@ mixin burger(label, targetId, className)
//- +burger('Показать пример кода', 'burger-code', 'blocks-library__code--shown')
//- +burger('Показать ничто')(data-some="SOME")
- label = label || 'Toggle block ' + targetId
- if (typeof(targetId) !== 'undefined' && targetId !== '') attributes['data-target-id'] = targetId
- if (typeof(className) !== 'undefined' && className !== '') attributes['data-target-class-toggle'] = className
-
label = label || 'Toggle block ' + targetId
if (typeof(targetId) !== 'undefined' && targetId !== '') attributes['data-target-id'] = targetId
if (typeof(className) !== 'undefined' && className !== '') attributes['data-target-class-toggle'] = className
button.burger(aria-label=label)&attributes(attributes)
span= label
src/blocks/close/close.pug
View file @ 029cfb72
......@@ -8,4 +8,4 @@ mixin close(label)
//- +close('Закрыть')
button.close(aria-label=label)&attributes(attributes)
span
span= label
src/blocks/close/close.scss
View file @ 029cfb72
......@@ -21,12 +21,14 @@ $toggler-part-bg-color: #000 !default;
cursor: pointer;
> span {
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
height: $toggler-part-height;
font-size: 0;
color: transparent;
background: transparent;
position: relative;
&:before,
&:after {
......
src/blocks/code/code.html deleted 100644 → 0
View file @ b96b583c
<!--DEV
<pre class="code">
<code>/* Некий код: */</code>
<code>/* Строка кода */</code>
</pre>
-->
src/blocks/code/code.pug 0 → 100644
View file @ 029cfb72
//- Все примеси в этом файле должны начинаться c имени блока (code)
mixin code()
//- Вызов:
//- +code()
//- code &lt;div class="some">...&lt;/div>
//- code &lt;div class="some">...&lt;/div>
pre.code&attributes(attributes)
block
src/blocks/code/readme.md 0 → 100644
View file @ 029cfb72
Оформление блочных вставок кода.
src/blocks/main-nav/main-nav.pug
View file @ 029cfb72
......@@ -7,7 +7,7 @@ mixin main-nav(selectedID)
//- Вызов:
//- +main-nav('1')
nav.main-nav#nav
nav.main-nav#nav&attributes(attributes)
+burger('Показать главное меню', 'nav', 'main-nav--open')(class="main-nav__toggler")
ul.main-nav__list
each menuItem in mainMenu.menu
......
src/blocks/menu/menu.html deleted 100644 → 0
View file @ b96b583c
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/menu/menu.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#">Пункт</a>
</li>
<li class="menu__item menu__item--separator">
<a class="menu__link" href="#">Пункт</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Пункт</a>
</li>
</ul>
-->
src/blocks/menu/menu.pug 0 → 100644
View file @ 029cfb72
//- Все примеси в этом файле должны начинаться c имени блока (menu)
mixin menu(menu)
//- Принимает:
//- menu {array} - массив с пунктами меню
//- Вызов:
//- -
//- var myMenu = [
//- {
//- 'text':'Пункт1',
//- 'url':'/',
//- },
//- {
//- 'text':'Пункт2',
//- 'url':'/',
//- 'mods': 'separator, active',
//- },
//- {
//- 'text':'Пункт2',
//- 'url':'/',
//- },
//- ];
//- +menu(myMenu)
-
if (typeof(menu) === 'undefined') {
menu = [
{
'text':'Меню по умолчанию, прописанное в примеси menu()',
'url':'/',
},
{
'text':'Пункт списка, после которого следует разделитель',
'url':'/',
'mods': 'separator, active',
},
{
'text':'Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов! Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!',
},
]
}
ul.menu&attributes(attributes)
each menuItem in menu
-
// список модификаторов
var allMods = '';
if(typeof(menuItem.mods) !== 'undefined') {
var modsList = menuItem.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' menu__item--' + modsList[i].trim();
}
}
li.menu__item(class=allMods)
- if(typeof(menuItem.url) !== 'undefined')
a.menu__link(href=menuItem.url)!= menuItem.text
- else
span.menu__link!= menuItem.text
src/blocks/thumb/thumb.html deleted 100644 → 0
View file @ b96b583c
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/thumb/thumb.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<img class="thumb" src="" height="" width="" alt="">
<a href="" class="thumb"><img src="" height="" width="" alt=""></a>
-->
src/blocks/thumb/thumb.pug 0 → 100644
View file @ 029cfb72
//- Все примеси в этом файле должны начинаться c имени блока (thumb)
mixin thumb(url, alt, width, height)
//- Принимает:
//- url* {string} - источник картинки
//- alt {string} - альтернативный текст
//- width {string} - соотв. атрибут тега картинки
//- height {string} - соотв. атрибут тега картинки
//- Вызов:
//- +thumb('img/joker.jpg', 'Джокер', 300, 200)
//- +thumb('img/joker.jpg', 'Джокер', 300)
- if (typeof(url) !== 'undefined')
img.thumb(src=url, alt=alt, width=width, height=height)&attributes(attributes)
- else
// Не передан источник изображения
src/pug/mixins.pug
View file @ 029cfb72
......@@ -3,3 +3,7 @@
include ../blocks/close/close.pug
include ../blocks/burger/burger.pug
include ../blocks/main-nav/main-nav.pug
include ../blocks/code/code.pug
include ../blocks/thumb/thumb.pug
include ../blocks/alert/alert.pug
include ../blocks/menu/menu.pug
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment