Skip to content

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

Допилил JS-компоненты под pug

parent 0c6e657a
Hide whitespace changes
Inline Side-by-side
Showing with 537 additions and 294 deletions
src/blocks-library.pug
View file @ aca73b69
...@@ -638,11 +638,149 @@ block content ...@@ -638,11 +638,149 @@ block content
+block-lib-code() +block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/to-top/to-top.pug include:show-code(first-line="//- Pug-файл этого блока:") blocks/to-top/to-top.pug
+block-lib('dropdown', 'Выпадающий элемент', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/dropdown/readme.md
pre.code
code // Факт открытия
code $('#drop-demo-01').closest('.dropdown').on('shown.nth.dropdown', function () {
code console.log('shown.nth.dropdown');
code });
code
code // Факт закрытия
code $('#drop-demo-01').closest('.dropdown').on('hidden.nth.dropdown', function () {
code console.log('hidden.nth.dropdown');
code });
+dropdown('Дроп (с выводом событий в консоль)', 'drop-demo-01')
p текст
|
|
+dropdown('Выпадающее меню', 'drop-demo-02', 'up, right')
.menu
span.menu__item
a.menu__link(href='') Пункт списка
span.menu__item
a.menu__link(href='') Пункт меню весьма длинный
span.menu__item
a.menu__link(href='') Второй пункт
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/dropdown/dropdown.pug
+block-lib('owl-carousel', 'Карусель с <a href="http://owlcarousel2.github.io/OwlCarousel2/">owl-carousel</a>', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/owl-carousel/readme.md
+owl-carousel('promo')
div слайд1
div слайд2
div слайд3
div слайд4
div слайд5
div слайд6
div слайд7
div слайд8
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/owl-carousel/owl-carousel.pug
+block-lib('swipe', 'Карусель с <a href="https://github.com/lyfeyaj/swipe">swipe</a>', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/swipe/readme.md
+swipe('swipe-demo')
div слайд1
div слайд2
div слайд3
div слайд4
div слайд5
div слайд6
div слайд7
div слайд8
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/swipe/swipe.pug
+block-lib('nouislider', 'Выбор диапазона с <a href="https://refreshless.com/nouislider/">noUiSlider</a>', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/nouislider/readme.md
+nouislider('demo-nouislider')
p
input#demo-nouislider-start(type='number', value='10')
input#demo-nouislider-end(type='number', value='80')
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/nouislider/nouislider.pug
+block-lib('off-canvas', 'Боковое меню страницы', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/off-canvas/readme.md
p #[button.btn(type='button', data-toggle='off-canvas') Показать/скрыть боковое меню]
+block-lib-code()
pre.code
code //- Разметка, необходимая для использования бокового меню
code #off-canvas.off-canvas
code aside.off-canvas__aside(role='complementary', aria-label='Боковое меню') Меню
code .off-canvas__page-content Контент
code .off-canvas__overlay(data-toggle='off-canvas')
code
code button.btn(type='button', data-toggle='off-canvas') Показать/скрыть боковое меню
code a(href='#SOME_HASH', data-toggle-native='off-canvas') Показать/скрыть боковое меню и перейти на якорь
+block-lib('modal', 'Модальное окно', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/modal/readme.md
p Одно и то же модальное окно, в консоль выводятся события. #[button.btn(type='button', data-toggle='modal', data-target='#modal-demo-01') Показать модальное окно] #[a(href='#modal-demo-01', data-toggle='modal') Показать модальное окно] #[span(data-toggle='modal', data-target='#modal-demo-01') Показать модальное окно]
+modal('modal-demo-01', 'Заголовок', 'some')
.modal__body
p Текст
.modal__footer
button.btn(type='button', data-dismiss='modal') Закрыть
pre.code
code // методы
code $('#modal-demo-01').modal(options)
code $('#modal-demo-01').modal('show')
code $('#modal-demo-01').modal('hide')
code $('#modal-demo-01').modal('toggle')
code
code // события
code $('#modal-demo-01').on('show.nth.modal', function(){
code console.log('show.nth.modal');
code });
code $('#modal-demo-01').on('shown.nth.modal', function(){
code console.log('shown.nth.modal');
code });
code $('#modal-demo-01').on('hide.nth.modal', function(){
code console.log('hide.nth.modal');
code });
code $('#modal-demo-01').on('hidden.nth.modal', function(){
code console.log('hidden.nth.modal');
code });
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/modal/modal.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas") +block-lib('tabs', 'Табы', false)
span(data-toggle="off-canvas") include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/tabs/readme.md
+tabs([
{
'id': 'tab00',
'text': 'Вкладка ноль',
'isActive': true,
},
{
'id': 'tab01',
'text': 'Вкладка один',
},
{
'id': 'tab02',
'text': 'Вкладка два',
},
{
'id': 'tab03',
'text': 'Вкладка три',
},
], 'some-mod')
+tabs-item('tab00', true, 'some-mod')
p Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.0
+tabs-item('tab01')
p За словесными горами в стране, гласных и согласных живут рыбные тексты.1
+tabs-item('tab02')
p Словесными горами в стране, гласных и согласных живут рыбные тексты.2
+tabs-item('tab03')
p Горами в стране, гласных и согласных живут рыбные тексты.3
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/tabs/tabs.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas")
span(data-toggle="off-canvas")
block footer block footer
src/blocks/code/code.scss
View file @ aca73b69
...@@ -30,5 +30,6 @@ $border-radius: 3px !default; ...@@ -30,5 +30,6 @@ $border-radius: 3px !default;
padding: 0; padding: 0;
white-space: pre; white-space: pre;
background-color: transparent; background-color: transparent;
min-height: 1em;
} }
} }
src/blocks/dropdown/dropdown.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/dropdown/dropdown.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="dropdown">
<a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul>
</div>
<span class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список
</button>
<span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2">
<span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
<span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
<span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
</span>
</span>
<div class="dropdown">
<a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
Выпадает <code>div</code> с произвольным контентом. <a href="">Ссылка какая-то</a>.
<hr>
<form action="">
<input type="text">
<select>
<option>Название пункта</option>
</select>
<textarea rows="3"></textarea>
<button class="btn">Отправить эту форму</button>
</form>
</div>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх
</button>
<ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
-->
src/blocks/dropdown/dropdown.js
View file @ aca73b69
// Факт открытия
$('#drop-demo-01').closest('.dropdown').on('shown.nth.dropdown', function () {
console.log('Дроп с id="drop-demo-01": сработало событие shown.nth.dropdown');
});
// Факт закрытия
$('#drop-demo-01').closest('.dropdown').on('hidden.nth.dropdown', function () {
console.log('Дроп с id="drop-demo-01": сработало событие hidden.nth.dropdown');
});
/* ======================================================================== /* ========================================================================
* Основано на: Bootstrap dropdown.js v3.3.6 * Основано на: Bootstrap dropdown.js v3.3.6
* Все изменения сопровождены закомментироваными оригиналами * Все изменения сопровождены закомментироваными оригиналами
...@@ -60,7 +69,6 @@ ...@@ -60,7 +69,6 @@
} }
Dropdown.prototype.toggle = function (e) { Dropdown.prototype.toggle = function (e) {
console.log('закрыть');
var $this = $(this) var $this = $(this)
// if ($this.is('.disabled, :disabled')) return // if ($this.is('.disabled, :disabled')) return
......
src/blocks/dropdown/dropdown.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (dropdown)
mixin dropdown(text, id, mods)
//- Принимает:
//- text {string} - текст кнопки
//- id* {string} - идентификатор
//- mods {string} - список модификаторов
//- Вызов:
+dropdown('Дроп', 'drop-01')
p текст
+dropdown('выпадающее меню', 'drop-02', 'up, right')
.menu
span.menu__item
a.menu__link(href='') Пункт списка
span.menu__item
a.menu__link(href='') Пункт меню весьма длинный
span.menu__item
a.menu__link(href='') Второй пункт
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' dropdown--' + modsList[i].trim();
}
}
if(typeof(id) !== 'undefined' && id)
span.dropdown(class=allMods)&attributes(attributes)
button.btn.dropdown__toggler(id=id, type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')!= text
span.dropdown__menu(aria-labelledby=id)
block
else
span Укажите уникальный #[code id] этого выпадающего элемента
src/blocks/dropdown/dropdown.scss
View file @ aca73b69
...@@ -31,27 +31,33 @@ $transition-time: 0.3s !default; ...@@ -31,27 +31,33 @@ $transition-time: 0.3s !default;
visibility: hidden; visibility: hidden;
overflow: hidden; overflow: hidden;
transition: opacity $transition-time; transition: opacity $transition-time;
&--up {
top: auto;
bottom: 100%;
}
&--right {
left: auto;
right: 0;
}
} }
&--open & { &--open {
&__menu { #{$block-name}__menu {
z-index: 1; z-index: 1;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
width: auto; width: auto;
} }
} }
&--up {
#{$block-name}__menu {
top: auto;
bottom: 100%;
}
}
&--right {
#{$block-name}__menu {
left: auto;
right: 0;
}
}
} }
src/blocks/dropdown/readme.md 0 → 100644
View file @ aca73b69
Основан на dropdown.js из Bootstrap. Изменения минимальны.
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
src/blocks/modal/modal.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/modal/modal.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div id="modal-demo" class="modal" tabindex="-1" role="dialog">
<div class="modal__dialog" role="document">
<div class="modal__content">
<div class="modal__header">
<a href="#" class="close modal__close" data-dismiss="modal" aria-label="Закрыть"><span></span></a>
<h4 class="modal__title">Modal</h4>
</div>
<div class="modal__body">
<p>Далеко-далеко за словесными горами...</p>
</div>
<div class="modal__footer">
<button type="button" class="btn" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
-->
src/blocks/modal/modal.js
View file @ aca73b69
// Демо событий модальных окон
$(document).ready(function(){
$('#modal-demo-01').on('show.nth.modal', function(){
console.log('Модальное окно #modal-demo-01: сработало событие show.nth.modal');
});
$('#modal-demo-01').on('shown.nth.modal', function(){
console.log('Модальное окно #modal-demo-01: сработало событие shown.nth.modal');
});
$('#modal-demo-01').on('hide.nth.modal', function(){
console.log('Модальное окно #modal-demo-01: сработало событие hide.nth.modal');
});
$('#modal-demo-01').on('hidden.nth.modal', function(){
console.log('Модальное окно #modal-demo-01: сработало событие hidden.nth.modal');
});
});
/* ======================================================================== /* ========================================================================
* Основано на Bootstrap: modal.js v3.3.7 * Основано на Bootstrap: modal.js v3.3.7
* Изменения минимальны: имена классов, событий, методов... * Изменения минимальны: имена классов, событий, методов...
......
src/blocks/modal/modal.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (modal)
mixin modal(id, title, mods)
//- Принимает:
//- id {string} - идентификатор
//- title {string} - заголовок
//- mods {string} - список модификаторов
//- Вызов:
+modal('modal-demo-01', 'Заголовок', 'some')
.modal__body
p Текст
.modal__footer
button.btn(type='button', data-dismiss='modal') Закрыть
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' modal--' + modsList[i].trim();
}
}
.modal(id=id, class=allMods, tabindex='-1', role='dialog')&attributes(attributes)
.modal__dialog(role='document')
.modal__content
.modal__header
span.close.modal__close(data-dismiss='modal', aria-label='Закрыть')
span
h4.modal__title!= title
block
src/blocks/modal/readme.md 0 → 100644
View file @ aca73b69
Основан на modal.js из Bootstrap. Изменения минимальны (имена классов, пространство имен событий, некоторые упрощения).
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
src/blocks/nouislider/nouislider.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/nouislider/nouislider.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="nouislider" id="demo-nouislider"></div>
-->
src/blocks/nouislider/nouislider.js 0 → 100644
View file @ aca73b69
document.addEventListener('DOMContentLoaded', function(){
var demoNoUiSlider = document.getElementById('demo-nouislider');
var demoNoUiSliderStartInput = document.getElementById('demo-nouislider-start');
var demoNoUiSliderEndInput = document.getElementById('demo-nouislider-end');
noUiSlider.create(demoNoUiSlider, {
start: [demoNoUiSliderStartInput.value, demoNoUiSliderEndInput.value],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
}
});
demoNoUiSlider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
demoNoUiSliderEndInput.value = Math.round(value);
} else {
demoNoUiSliderStartInput.value = Math.round(value);
}
});
demoNoUiSliderEndInput.addEventListener('change', function(){
demoNoUiSlider.noUiSlider.set([null, this.value]);
});
demoNoUiSliderStartInput.addEventListener('change', function(){
demoNoUiSlider.noUiSlider.set([this.value, null]);
});
});
src/blocks/nouislider/nouislider.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (nouislider)
//- ВНИМАНИЕ! Примесь возвращает только разметку.
//- Не забудьте включить и настроить слайдер в nouislider/nouislider.js
mixin nouislider(id, mods)
//- Принимает:
//- id {string} - идентификатор
//- mods {string} - список модификаторов
//- Вызов:
+nouislider('demo-nouislider')
input#demo-nouislider-start(type='number', value='10')
input#demo-nouislider-end(type='number', value='90')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' nouislider--' + modsList[i].trim();
}
}
.nouislider(id=id, class=allMods)&attributes(attributes)
block
src/blocks/nouislider/readme.md 0 → 100644
View file @ aca73b69
ВНИМАНИЕ: примесь возвращает только разметку. Нужно включить и настроить слайдер в `nouislider/nouislider.js`
src/blocks/off-canvas/off-canvas.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/off-canvas/off-canvas.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="off-canvas" id="off-canvas">
<div class="off-canvas__aside">...</div>
<div class="off-canvas__page-content">...</div>
<div class="off-canvas__overlay" data-toggle="off-canvas"></div>
</div>
-->
src/blocks/off-canvas/readme.md 0 → 100644
View file @ aca73b69
Меню показывается по клику на любой элемент с `data-toggle="off-canvas"` или `data-toggle-native="off-canvas"` (в последнем случае произойдет и&nbsp;действие браузера по умолчанию).
src/blocks/owl-carousel/owl-carousel.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/owl-carousel/owl-carousel.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="owl-carousel" id="owl-carousel-demo">
<div>
slide content 1
</div>
<div>
slide content 2
</div>
<div>
slide content 3
</div>
<div>
slide content 4
</div>
<div>
slide content 5
</div>
<div>
slide content 6
</div>
</div>
-->
src/blocks/owl-carousel/owl-carousel.js
View file @ aca73b69
// $(document).ready(function(){ $(document).ready(function(){
// $("#owl-carousel-demo").owlCarousel({ $("#promo").owlCarousel({
// items: 3, items: 3,
// nav: true, nav: true,
// loop: true, loop: true,
// center: true, center: true,
// responsive : { responsive : {
// 0 : { 0 : {
// items: 1, items: 1,
// nav: true, nav: true,
// loop: true, loop: true,
// center: true, center: true,
// }, },
// 480 : { 480 : {
// items: 3, items: 3,
// }, },
// 768 : { 768 : {
// items: 3, items: 3,
// }, },
// 992 : { 992 : {
// items: 3, items: 3,
// }, },
// 1200 : { 1200 : {
// items: 3, items: 3,
// }, },
// 1800 : { 1800 : {
// items: 3, items: 3,
// } }
// } }
// }); });
// }); });
src/blocks/owl-carousel/owl-carousel.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (owl-carousel)
//- ВНИМАНИЕ! Примесь возвращает только разметку.
//- Не забудьте включить и настроить карусель в owl-carousel/owl-carousel.js
mixin owl-carousel(id, mods)
//- Принимает:
//- id {string} - идентификатор
//- mods {string} - список модификаторов
//- Вызов:
+owl-carousel('promo')
div слайд1
div слайд2
div слайд3
div слайд4
div слайд5
div слайд6
div слайд7
div слайд8
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' owl-carousel--' + modsList[i].trim();
}
}
div.owl-carousel(id=id, class=allMods)&attributes(attributes)
block
src/blocks/owl-carousel/readme.md 0 → 100644
View file @ aca73b69
ВНИМАНИЕ: примесь возвращает только разметку. Нужно включить и настроить карусель в `owl-carousel/owl-carousel.js`
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
src/blocks/swipe/readme.md 0 → 100644
View file @ aca73b69
ВНИМАНИЕ: примесь возвращает только разметку. Нужно включить и настроить карусель в `swipe/swipe.js`
src/blocks/swipe/swipe.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/swipe/swipe.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div id="swipe-slider" class="swipe">
<div class="swipe-wrap">
<div>1111</div>
<div>2222</div>
<div>3333</div>
</div>
</div>
-->
src/blocks/swipe/swipe.js
View file @ aca73b69
// document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
// window.mySwipe = new Swipe(document.getElementById('swipe-slider'), { window.mySwipe = new Swipe(document.getElementById('swipe-demo'), {
// startSlide: 0, startSlide: 0,
// speed: 400, speed: 400,
// auto: 3000, auto: 3000,
// draggable: true, draggable: true,
// continuous: true, continuous: true,
// disableScroll: true, disableScroll: true,
// stopPropagation: true, stopPropagation: true,
// callback: function(index, elem, dir) {}, callback: function(index, elem, dir) {},
// transitionEnd: function(index, elem) {} transitionEnd: function(index, elem) {}
// }); });
// }); // включить видимость блока (по умолчанию скрыт)
document.getElementById('swipe-demo').classList.add('swipe--enable');
});
src/blocks/swipe/swipe.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (swipe)
//- ВНИМАНИЕ! Примесь возвращает только разметку.
//- Не забудьте включить и настроить карусель в swipe/swipe.js
mixin swipe(id, mods)
//- Принимает:
//- id {string} - идентификатор
//- mods {string} - список модификаторов
//- Вызов:
+swipe('swipe-demo')
div слайд1
div слайд2
div слайд3
div слайд4
div слайд5
div слайд6
div слайд7
div слайд8
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' swipe--' + modsList[i].trim();
}
}
.swipe(id=id, class=allMods)&attributes(attributes)
.swipe-wrap
block
src/blocks/swipe/swipe.scss
View file @ aca73b69
...@@ -4,12 +4,11 @@ ...@@ -4,12 +4,11 @@
.swipe { .swipe {
$block-name: &; $block-name: &; // #{$block-name}__element
// #{$block-name}__element
overflow: hidden; overflow: hidden;
visibility: hidden;
position: relative; position: relative;
visibility: hidden;
} }
.swipe-wrap { .swipe-wrap {
......
src/blocks/tabs/tabs.html deleted 100644 → 0
View file @ 0c6e657a
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/tabs/tabs.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="tabs">
<ul class="tabs__links" role="tablist">
<li class="tabs__link-wrap tabs__link-wrap--active" role="presentation">
<a href="#demo-tab-01" class="tabs__link" data-toggle="tab" role="tab">Вкладка 01</a>
</li>
<li class="tabs__link-wrap" role="presentation">
<span data-target="#demo-tab-02" class="tabs__link" data-toggle="tab" role="tab">Вкладка 02</span>
</li>
<li class="tabs__link-wrap" role="presentation">
<a href="#demo-tab-03" class="tabs__link" data-toggle="tab" role="tab">Вкладка 03</a>
</li>
<li class="tabs__link-wrap" role="presentation">
<a href="#demo-tab-04" class="tabs__link" data-toggle="tab" role="tab">Вкладка 04</a>
</li>
</ul>
<div class="tabs__content-wrapper">
<div class="tabs__content-item tabs__content-item--active" id="demo-tab-01" role="tabpanel">
111
</div>
<div class="tabs__content-item" id="demo-tab-02" role="tabpanel">
222
</div>
<div class="tabs__content-item" id="demo-tab-03" role="tabpanel">
333
</div>
<div class="tabs__content-item" id="demo-tab-04" role="tabpanel">
444
</div>
</div>
</div>
-->
src/blocks/tabs/tabs.pug 0 → 100644
View file @ aca73b69
//- Все примеси в этом файле должны начинаться c имени блока (tabs)
mixin tabs(props, mods)
//- Принимает:
//- props {array}
//- {object}
//- id {string} - id вкладки
//- text {string} - текст на вкладке
//- isActive {bool} - флаг «это активная»
//- mods {string} - список модификаторов
//- Вызов:
+tabs([
{
'id': 'tab00',
'text': 'Вкладка ноль',
'isActive': true,
},
{
'id': 'tab01',
'text': 'Вкладка один',
},
], 'some-mod')
+tabs-item('tab00', true, 'some')
p Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.0
+tabs-item('tab01')
p За словесными горами в стране, гласных и согласных живут рыбные тексты.1
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' tabs--' + modsList[i].trim();
}
}
.tabs(class=allMods)&attributes(attributes)
ul.tabs__links(role="tablist")
each tab in props
-
var isActive = (typeof(tab.isActive) !== 'undefined' && tab.isActive) ? ' tabs__link-wrap--active' : ''
li.tabs__link-wrap(class=isActive, role='presentation')
a.tabs__link(href='#'+tab.id, data-toggle='tab', role='tab')!= tab.text
.tabs__content-wrapper
block
mixin tabs-item(id, isActive, mods)
//- Принимает:
//- isActive {bool} - флаг «это активная»
//- mods {string} - список модификаторов
//- Вызов:
+tabs-item('tab01', true, 'some-mod')
p Вкладка
+tabs-item('tab02', false)
p Вкладка
+tabs-item('tab03', false)
p Вкладка
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' tabs__content-item--' + modsList[i].trim();
}
}
if(typeof(isActive) !== 'undefined' && isActive)
allMods = allMods + ' tabs__content-item--active';
.tabs__content-item(class=allMods, id=id, role='tabpanel')&attributes(attributes)
block
src/blocks/tabs/tabs.scss
View file @ aca73b69
...@@ -28,26 +28,33 @@ $field-padding-horizontal: 0.7em !default; ...@@ -28,26 +28,33 @@ $field-padding-horizontal: 0.7em !default;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-end; align-items: flex-end;
cursor: pointer;
.no-js & { .no-js & {
display: none; display: none;
} }
&:after { @media (min-width: $screen-md) {
content: '';
flex-grow: 1; &:after {
height: 1px; content: '';
background-color: $border-color; flex-grow: 1;
height: 1px;
background-color: $border-color;
}
} }
} }
&__link-wrap { &__link-wrap {
position: relative; position: relative;
border: 1px solid $border-color; border: 1px solid $border-color;
margin: 0 0.3em 0.3em 0;
@media (min-width: $screen-md) {
margin: 0;
&:not(:last-child) { &:not(:last-child) {
border-right: none; border-right: none;
}
} }
&--active { &--active {
...@@ -76,7 +83,10 @@ $field-padding-horizontal: 0.7em !default; ...@@ -76,7 +83,10 @@ $field-padding-horizontal: 0.7em !default;
display: block; display: block;
padding: $field-padding-vertical $field-padding-horizontal; padding: $field-padding-vertical $field-padding-horizontal;
border: 1px solid $border-color; border: 1px solid $border-color;
border-top: none;
@media (min-width: $screen-md) {
border-top: none;
}
} }
&__content-item { &__content-item {
......
src/pug/mixins.pug
View file @ aca73b69
...@@ -31,3 +31,9 @@ include ../blocks/embed-responsive/embed-responsive.pug ...@@ -31,3 +31,9 @@ include ../blocks/embed-responsive/embed-responsive.pug
include ../blocks/tooltip/tooltip.pug include ../blocks/tooltip/tooltip.pug
include ../blocks/scroll-link/scroll-link.pug include ../blocks/scroll-link/scroll-link.pug
include ../blocks/to-top/to-top.pug include ../blocks/to-top/to-top.pug
include ../blocks/dropdown/dropdown.pug
include ../blocks/owl-carousel/owl-carousel.pug
include ../blocks/swipe/swipe.pug
include ../blocks/nouislider/nouislider.pug
include ../blocks/modal/modal.pug
include ../blocks/tabs/tabs.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