Skip to content

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

Рефакторинг: field-select

parent 3d66a889
Hide whitespace changes
Inline Side-by-side
Showing with 210 additions and 52 deletions
package.json
View file @ 6139de63
......@@ -32,7 +32,6 @@
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"browser-sync": "^2.18.8",
"closest": "0.0.1",
"cpy": "^7.0.1",
"cross-env": "^5.0.0",
"css-mqpacker": "^7.0.0",
......@@ -74,6 +73,8 @@
},
"dependencies": {
"baron": "^3.0.3",
"choices.js": "^4.1.3",
"closest": "0.0.1",
"jquery": "^3.1.1",
"object-fit-images": "^3.2.3",
"svg4everybody": "^2.1.8"
......
src/blocks/blocks-library/blocks-library.js
View file @ 6139de63
require('../main-nav/main-nav.js');
require('../burger/burger.js');
require('../field-file/field-file.js');
require('../field-select/field-select.js');
require('../scroll-link/scroll-link.js');
require('../to-top/to-top.js');
require('../off-canvas/off-canvas.js');
......
src/blocks/field-select/field-select.js 0 → 100644
View file @ 6139de63
const Choices = require('choices.js');
const choices = new Choices('.field-select__select', {
searchEnabled: false,
placeholderValue: 'Выберите',
});
src/blocks/field-select/field-select.pug
View file @ 6139de63
......@@ -98,14 +98,15 @@ mixin field-select(title, attrs, options, helpText, mods)
.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
.field-select__select-wrap
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-select/field-select.scss
View file @ 6139de63
......@@ -13,41 +13,42 @@
@include field-name;
}
&__input-wrap {}
&__select {
display: inline-block;
vertical-align: middle;
width: 100%;
line-height: $line-height;
padding: $field-padding-vertical $field-padding-horizontal;
font-size: inherit;
font-family: inherit;
border: 1px solid $border-color;
border-radius: $border-radius;
appearance: none;
background-color: #fff;
&[multiple] {
background-image: none;
min-height: 6.8em;
}
&::-ms-expand {
display: none;
}
&:active,
&:focus {
@include field-focus;
}
&[disabled],
&[readonly] {
cursor: default;
background-color: $gray-lightest;
}
}
&__select-wrap {}
// &__select {
// display: inline-block;
// vertical-align: middle;
// width: 100%;
// line-height: $line-height;
// padding: $field-padding-vertical $field-padding-horizontal;
// padding-right: 35px;
// font-size: inherit;
// font-family: inherit;
// border: 1px solid $border-color;
// border-radius: $border-radius;
// appearance: none;
// background-color: #fff;
// &[multiple] {
// background-image: none;
// min-height: 6.8em;
// }
// &::-ms-expand {
// display: none;
// }
// &:active,
// &:focus {
// @include field-focus;
// }
// &[disabled],
// &[readonly] {
// cursor: default;
// background-color: $gray-lightest;
// }
// }
&__help-text {
@include field-help-text;
......@@ -56,6 +57,7 @@
&--error {
color: $color-danger;
#{$block-name}__name,
#{$block-name}__select,
......@@ -69,3 +71,109 @@
}
}
}
.choices {
$block-name: &; // #{$block-name}__element
position: relative;
&:focus {
outline: 0;
&:not(.is-disabled) {
#{$block-name}__inner {
@include field-focus;
}
}
}
&:after {
content: '';
position: absolute;
top: 7px;
right: 16px;
height: 14px;
width: 14px;
border-left: 1px solid $border-color;
border-bottom: 1px solid $border-color;
pointer-events: none;
transform: rotate(-45deg);
transition: all 0.3s;
}
&.is-open:after {
transform: translateY(7px) rotate(135deg);
}
.is-hidden {
display: none !important;
}
&__inner {
padding: $field-padding-vertical 40px $field-padding-vertical $field-padding-horizontal;
border: 1px solid $border-color;
border-radius: $border-radius;
background: #fff;
font-size: 1em;
line-height: 1.5;
cursor: pointer;
#{$block-name}__item--selectable {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__list--dropdown {
display: none;
z-index: 1;
position: absolute;
width: 100%;
background-color: #fff;
border: 1px solid $border-color;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
overflow: hidden;
word-break: break-all;
#{$block-name}__item {
padding: $field-padding-vertical $field-padding-horizontal;
cursor: pointer;
&.is-highlighted {
background: $gray-lightest;
}
}
}
&__heading {
padding: $field-padding-vertical $field-padding-horizontal;
font-size: $font-size--small;
font-weight: 700;
opacity: 0.5;
cursor: default;
}
&.is-open {
#{$block-name}__list--dropdown {
display: block;
}
}
&.is-disabled {
#{$block-name}__inner {
background-color: $gray-lighter;
cursor: default;
}
}
}
src/blocks/page/page.scss
View file @ 6139de63
......@@ -69,6 +69,9 @@ body {
text-align: left;
color: $text-color;
background-color: $body-bg;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
[tabindex='-1']:focus {
......
src/pages/blocks-demo.pug
View file @ 6139de63
......@@ -559,7 +559,7 @@ block content
},
[
{
title: 'Опция 1',
title: 'Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 Опция 1 ',
attrs: {
value: 'val06',
}
......@@ -578,7 +578,8 @@ block content
'Название селекта',
{
name: 'select',
id: 'select-demo'
id: 'select-demo',
disabled: true,
},
[
{
......@@ -610,6 +611,42 @@ block content
'Подсказка',
''
)
+field-select(
'Название селекта',
{
name: 'select1',
id: 'select-demo1',
},
[
{
attrs: {
label: 'Группа',
},
child: [
{
title: 'Опция1',
attrs: {
value: 'val01',
}
},
{
title: 'Опция2',
attrs: {
value: 'val02',
}
},
]
},
{
title: 'Опция вне группы',
attrs: {
value: 'val03',
}
}
],
'Подсказка',
'error'
)
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') ../blocks/field-select/field-select.pug
......@@ -627,7 +664,8 @@ block content
+field-text({
helpText: 'Подсказка',
attrs: {
placeholder: 'Пример'
placeholder: 'Пример',
disabled: true,
}
})
+field-text({
......
src/scss/variables.scss
View file @ 6139de63
......@@ -79,8 +79,8 @@ $grid-gutter-width: 30px;
// Разное
$field-padding-vertical: 0.3em;
$field-padding-horizontal: 0.7em;
$field-padding-vertical: 5px;
$field-padding-horizontal: 12px;
$border-radius: 3px;
$opacity: 0.7;
......
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