Skip to content

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

Допилил некоторые элементы форм

parent 63361c5b
Show whitespace changes
Inline Side-by-side
Showing with 449 additions and 63 deletions
src/blocks-library.pug
View file @ 97251dd6
...@@ -265,6 +265,144 @@ block content ...@@ -265,6 +265,144 @@ block content
+block-lib-code() +block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-radio/field-radio.pug include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-radio/field-radio.pug
+block-lib('field-toggler', 'Переключатель', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-toggler/readme.md
+field-toggler([
{
title: 'Одиночный переключатель',
helpText: 'Это чекбокс, на самом деле',
attrs: {
name: 'check10',
}
},
])
+field-toggler([
{
title: 'Переключатель 1',
helpText: 'Подсказка',
attrs: {
name: 'check11',
checked: true,
}
},
{
title: 'Переключатель 2',
helpText: 'Подсказка',
mods: 'some',
attrs: {
name: 'check11',
}
},
], 'Две радиокнопки', true)
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-toggler/field-toggler.pug
+block-lib('field-file', 'Файл', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-file/readme.md
+field-file({
title: 'Название',
helpText: 'Подсказка',
attrs: {
name: 'commentFile',
multiple: true,
},
text: {
selectText: 'Выберите файл(ы)',
nothingText: 'Ничего не выбрано',
flesSelectedText: 'Выбрано файлов:',
},
})
+field-file({
helpText: 'Ошибка',
mods: 'error',
attrs: {
name: 'commentFile3',
},
})
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-file/field-file.pug
+block-lib('field-range', 'Ползунок', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-range/readme.md
+field-range({
title: 'Название',
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'counter',
min: '1',
max: '100',
step: '1',
value: '40'
}
})
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-range/field-range.pug
+block-lib('field-select', 'Селекты', false)
include:markdown-it(linkify html='true' typographer='true' quotes='«»') blocks/field-select/readme.md
+field-select(
'Название селекта',
{
name: 'select0',
id: 'select-demo0'
},
[
{
title: 'Опция 1',
attrs: {
value: 'val06',
}
},
{
title: 'Опция 2',
attrs: {
value: 'val05',
}
},
],
'Подсказка',
''
)
+field-select(
'Название селекта',
{
name: 'select',
id: 'select-demo'
},
[
{
attrs: {
label: 'Группа',
},
child: [
{
title: 'Опция1',
attrs: {
value: 'val01',
}
},
{
title: 'Опция2',
attrs: {
value: 'val02',
}
},
]
},
{
title: 'Опция вне группы',
attrs: {
value: 'val03',
}
}
],
'Подсказка',
''
)
+block-lib-code()
include:show-code(first-line="//- Pug-файл этого блока:") blocks/field-select/field-select.pug
.burger.blocks-library__menu-toggler(data-toggle="off-canvas") .burger.blocks-library__menu-toggler(data-toggle="off-canvas")
......
src/blocks/field-checkbox/field-checkbox.pug
View file @ 97251dd6
...@@ -7,10 +7,9 @@ mixin field-checkbox(checkboxes, title) ...@@ -7,10 +7,9 @@ mixin field-checkbox(checkboxes, title)
//- { //- {
//- title: '' {string} - текст рядом с чекбоксом //- title: '' {string} - текст рядом с чекбоксом
//- helpText: '' {string} - пояснение под полем //- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока //- mods: '' {string} - модификаторы обертки чекбокса
//- attrs: { {object} - любые атрибуты для input //- attrs: { {object} - любые атрибуты для input
//- type: {string} //- name: {string}
//- placeholder: {string}
//- ... //- ...
//- } //- }
//- }, //- },
......
src/blocks/field-file/field-file.html deleted 100644 → 0
View file @ 63361c5b
<!--DEV
<div class="field-file">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" id="" name="" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
-->
src/blocks/field-file/field-file.pug 0 → 100644
View file @ 97251dd6
//- Все примеси в этом файле должны начинаться c имени блока (field-file)
mixin field-file(props)
//- Принимает:
//- props {
//- title: '' {string} - текст с названием (выводится над полем)
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- name: {string}
//- ...
//- },
//- text: { {object} - тексты
//- selectText: {string} - текст на кнопке «выберите файл(ы)»
//- nothingText: {string} - текст, показываемый, пока ничего не выбрано
//- flesSelectedText: {string} - текст, показываемый, если выбрано более одного файла («файлов выбрано: 2»)
//- },
//- }
//- Вызов:
+field-file({
title: 'Название',
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'commentFile',
multiple: true,
},
text: {
selectText: 'Выберите файл(ы)',
nothingText: 'Ничего не выбрано',
flesSelectedText: 'Выбрано файлов:',
},
})
-
if(typeof(props) === 'undefined') {
var props = {};
}
var allMods = '';
if(typeof(props.mods) !== 'undefined' && props.mods) {
var modsList = props.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-file--' + modsList[i].trim();
}
}
var selectText = 'Выберите файл(ы)'; // Select file(s)
var nothingText = ''; // Nothing selected
var flesSelectedText = 'Выбрано файлов: {count}'; // Selected files: {count}
if (typeof(props.text) !== 'undefined' && props.text !== '') {
if (typeof(props.text.selectText) !== 'undefined') selectText = props.text.selectText;
if (typeof(props.text.nothingText) !== 'undefined') nothingText = props.text.nothingText;
if (typeof(props.text.flesSelectedText) !== 'undefined') flesSelectedText = props.text.flesSelectedText + ' {count}';
}
.field-file(class=allMods)&attributes(attributes)
if(typeof(props.title) !== 'undefined' && props.title)
.field-file__name!= props.title
label.field-file__input-wrap
input.field-file__input(type='file', data-multiple-caption=flesSelectedText)&attributes(props.attrs)
.field-file__name-text(data-button-text=selectText)= nothingText
if(typeof(props.helpText) !== 'undefined' && props.helpText)
.field-file__help-text!= props.helpText
block
src/blocks/field-radio/field-radio.pug
View file @ 97251dd6
...@@ -5,12 +5,11 @@ mixin field-radio(radiobuttons, title) ...@@ -5,12 +5,11 @@ mixin field-radio(radiobuttons, title)
//- Принимает: //- Принимает:
//- radiobuttons {array} //- radiobuttons {array}
//- { //- {
//- title: '' {string} - текст рядом с чекбоксом //- title: '' {string} - текст рядом с радиокнопкой
//- helpText: '' {string} - пояснение под полем //- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока //- mods: '' {string} - модификаторы обертки радиокнопки
//- attrs: { {object} - любые атрибуты для input //- attrs: { {object} - любые атрибуты для input
//- type: {string} //- name: {string}
//- placeholder: {string}
//- ... //- ...
//- } //- }
//- }, //- },
......
src/blocks/field-range/field-range.pug 0 → 100644
View file @ 97251dd6
//- Все примеси в этом файле должны начинаться c имени блока (field-range)
mixin field-range(props)
//- Принимает:
//- props {
//- title: '' {string} - текст с названием (выводится над полем)
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы блока
//- attrs: { {object} - любые атрибуты для input
//- name: {string}
//- ...
//- }
//- }
//- Вызов:
+field-range({
title: 'Название',
helpText: 'Подсказка',
mods: '',
attrs: {
name: 'counter',
min: '1',
max: '100',
step: '1',
value: '40'
}
})
-
if(typeof(props) === 'undefined') {
var props = {};
}
var allMods = '';
if(typeof(props.mods) !== 'undefined' && props.mods) {
var modsList = props.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-range--' + modsList[i].trim();
}
}
label.field-range(class=allMods)&attributes(attributes)
if(typeof(props.title) !== 'undefined' && props.title)
span.field-range__name!= props.title
span.field-range__input-wrap
input.field-range__input(type='range')&attributes(props.attrs)
if(typeof(props.helpText) !== 'undefined' && props.helpText)
span.field-range__help-text!= props.helpText
block
src/blocks/field-select/field-select.pug 0 → 100644
View file @ 97251dd6
//- Все примеси в этом файле должны начинаться c имени блока (field-select)
mixin field-select(title, attrs, options, helpText, mods)
//- Принимает:
//- title: '' {string} - название селекта
//- attrs: {object} - атрибуты селекта
//- name: '' {string}
//- options {array}
//- {object}
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- {object}
//- attrs: {object} - любые атрибуты пункта
//- label: {string}
//- child: {array} - потомки (если есть этот элемент, то его родитель — optgroup)
//- {object}
//- title: '' {string}
//- attrs: {object}
//- value: {string}
//- {object}
//- title: '' {string} - текст пункта
//- attrs: {object} - любые атрибуты пункта
//- value: {string}
//- helpText: '' {string} - текст подсказки
//- mods: '' {string} - модификаторы блока
//- Вызов:
+field-select(
'Название',
{
name: 'select',
id: 'select'
},
[
{
title: 'Опция',
attrs: {
value: '',
}
},
{
title: 'Опция',
attrs: {
value: '',
}
},
],
'Подсказка',
''
)
+field-select(
'Название',
{
name: '',
id: ''
},
[
{
attrs: {
label: 'Группа',
},
child: [
{
title: 'Опция1',
attrs: {
value: 'val01',
}
},
{
title: 'Опция2',
attrs: {
value: 'val02',
}
},
]
},
{
title: 'Опция',
attrs: {
value: 'val03',
}
}
],
'Подсказка',
''
)
-
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-select--' + modsList[i].trim();
}
}
.field-select(class=allMods)&attributes(attributes)
if(typeof(title) !== 'undefined' && title)
.field-select__name!= title
select.field-select__select&attributes(attrs)
each option in options
//- option= option
if(typeof(option.child) !== 'undefined' && option.child)
optgroup(label=option.attrs.label)
each subOption in option.child
option&attributes(subOption.attrs)= subOption.title
else if(typeof(option.title) !== 'undefined' && option.title)
option&attributes(option.attrs)= option.title
if(typeof(helpText) !== 'undefined' && helpText)
span.field-select__help-text!= helpText
src/blocks/field-toggler/field-toggler.html deleted 100644 → 0
View file @ 63361c5b
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/field-text/field-text.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" id="" name="">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<div class="field-toggler">
<div class="field-toggler__title">Переключатели-флажки</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" id="" name="" checked>
<span class="field-toggler__name-text">Использовать</span>
</label>
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox" id="" name="">
<span class="field-toggler__name-text">Не использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
-->
src/blocks/field-toggler/field-toggler.pug 0 → 100644
View file @ 97251dd6
//- Все примеси в этом файле должны начинаться c имени блока (field-toggler)
mixin field-toggler(togglers, title, isRadio)
//- Принимает:
//- togglers {array}
//- {
//- title: '' {string} - текст рядом с переключателем
//- helpText: '' {string} - пояснение под полем
//- mods: '' {string} - модификаторы обёртки переключателя
//- attrs: { {object} - любые атрибуты для input
//- name: {string}
//- ...
//- },
//- isRadio: false {bool} - флаг «это радиокнопки, а не чекбоксы»
//- },
//- ...
//- Вызов:
+field-toggler([
{
title: 'Переключатель0',
helpText: 'Подсказка',
attrs: {
name: 'check0',
}
},
])
+field-toggler([
{
title: 'Переключатель1',
helpText: 'Подсказка',
attrs: {
name: 'check1',
checked: true,
}
},
{
title: 'Переключатель2',
helpText: 'Подсказка',
mods: 'some',
attrs: {
name: 'check2',
}
},
], 'ОбщееНазваниеБлока', true)
-
if(typeof(isRadio) !== 'undefined' && isRadio)
var type = 'radio';
else
var type = 'checkbox';
.field-toggler&attributes(attributes)
if(typeof(title) !== 'undefined' && title)
.field-toggler__title!= title
each toggler in togglers
-
var allMods = '';
if(typeof(toggler.mods) !== 'undefined' && toggler.mods) {
var modsList = toggler.mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' field-toggler__input-wrap--' + modsList[i].trim();
}
}
.field-toggler__input-wrap(class=allMods)
label.field-toggler__name
input.field-toggler__input(type=type)&attributes(toggler.attrs)
span.field-toggler__name-text!= toggler.title
if(typeof(toggler.helpText) !== 'undefined' && toggler.helpText)
.field-toggler__help-text-wrap
.field-toggler__help-text!= toggler.helpText
src/blocks/field-toggler/field-toggler.scss
View file @ 97251dd6
...@@ -80,7 +80,7 @@ $line-height: 1.375em !default; ...@@ -80,7 +80,7 @@ $line-height: 1.375em !default;
} }
&__help-text-wrap { &__help-text-wrap {
padding-left: 1.5em; padding-left: 3.2em;
} }
&__help-text { &__help-text {
......
src/pug/mixins.pug
View file @ 97251dd6
...@@ -11,3 +11,7 @@ include ../blocks/btn/btn.pug ...@@ -11,3 +11,7 @@ include ../blocks/btn/btn.pug
include ../blocks/field-text/field-text.pug include ../blocks/field-text/field-text.pug
include ../blocks/field-checkbox/field-checkbox.pug include ../blocks/field-checkbox/field-checkbox.pug
include ../blocks/field-radio/field-radio.pug include ../blocks/field-radio/field-radio.pug
include ../blocks/field-toggler/field-toggler.pug
include ../blocks/field-file/field-file.pug
include ../blocks/field-range/field-range.pug
include ../blocks/field-select/field-select.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