mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 10:56:12 +03:00
init
This commit is contained in:
@@ -0,0 +1,622 @@
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
color: #c5c5c5; }
|
||||
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
Datepicker cells
|
||||
------------------------------------------------- */
|
||||
.datepicker--cells {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.datepicker--cell {
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
z-index: 1; }
|
||||
.datepicker--cell.-focus- {
|
||||
background: #f0f0f0; }
|
||||
.datepicker--cell.-current- {
|
||||
color: #4EB5E6; }
|
||||
.datepicker--cell.-current-.-focus- {
|
||||
color: #4a4a4a; }
|
||||
.datepicker--cell.-current-.-in-range- {
|
||||
color: #4EB5E6; }
|
||||
.datepicker--cell.-in-range- {
|
||||
background: rgba(92, 196, 239, 0.1);
|
||||
color: #4a4a4a;
|
||||
border-radius: 0; }
|
||||
.datepicker--cell.-in-range-.-focus- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell.-disabled- {
|
||||
cursor: default;
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-disabled-.-focus- {
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-disabled-.-in-range- {
|
||||
color: #a1a1a1; }
|
||||
.datepicker--cell.-disabled-.-current-.-focus- {
|
||||
color: #aeaeae; }
|
||||
.datepicker--cell.-range-from- {
|
||||
border: 1px solid rgba(92, 196, 239, 0.5);
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.datepicker--cell.-range-to- {
|
||||
border: 1px solid rgba(92, 196, 239, 0.5);
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
border-radius: 0 4px 4px 0; }
|
||||
.datepicker--cell.-range-from-.-range-to- {
|
||||
border-radius: 4px; }
|
||||
.datepicker--cell.-selected- {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: #5cc4ef; }
|
||||
.datepicker--cell.-selected-.-current- {
|
||||
color: #fff;
|
||||
background: #5cc4ef; }
|
||||
.datepicker--cell.-selected-.-focus- {
|
||||
background: #45bced; }
|
||||
.datepicker--cell:empty {
|
||||
cursor: default; }
|
||||
|
||||
.datepicker--days-names {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 8px 0 3px; }
|
||||
|
||||
.datepicker--day-name {
|
||||
color: #FF9A19;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: .8em; }
|
||||
|
||||
.datepicker--cell-day {
|
||||
width: 14.28571%; }
|
||||
|
||||
.datepicker--cells-months {
|
||||
height: 170px; }
|
||||
|
||||
.datepicker--cell-month {
|
||||
width: 33.33%;
|
||||
height: 25%; }
|
||||
|
||||
.datepicker--years {
|
||||
height: 170px; }
|
||||
|
||||
.datepicker--cells-years {
|
||||
height: 170px; }
|
||||
|
||||
.datepicker--cell-year {
|
||||
width: 25%;
|
||||
height: 33.33%; }
|
||||
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
color: #c5c5c5; }
|
||||
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
Datepicker
|
||||
------------------------------------------------- */
|
||||
.datepickers-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
@media print {
|
||||
.datepickers-container {
|
||||
display: none; } }
|
||||
|
||||
.datepicker {
|
||||
background: #fff;
|
||||
border: 1px solid #dbdbdb;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
box-sizing: content-box;
|
||||
font-family: Tahoma, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #4a4a4a;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
|
||||
z-index: 100; }
|
||||
.datepicker.-from-top- {
|
||||
-webkit-transform: translateY(-8px);
|
||||
transform: translateY(-8px); }
|
||||
.datepicker.-from-right- {
|
||||
-webkit-transform: translateX(8px);
|
||||
transform: translateX(8px); }
|
||||
.datepicker.-from-bottom- {
|
||||
-webkit-transform: translateY(8px);
|
||||
transform: translateY(8px); }
|
||||
.datepicker.-from-left- {
|
||||
-webkit-transform: translateX(-8px);
|
||||
transform: translateX(-8px); }
|
||||
.datepicker.active {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0);
|
||||
transform: translate(0);
|
||||
transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
|
||||
|
||||
.datepicker-inline .datepicker {
|
||||
border-color: #d7d7d7;
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
left: auto;
|
||||
right: auto;
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none; }
|
||||
|
||||
.datepicker-inline .datepicker--pointer {
|
||||
display: none; }
|
||||
|
||||
.datepicker--content {
|
||||
box-sizing: content-box;
|
||||
padding: 4px; }
|
||||
.-only-timepicker- .datepicker--content {
|
||||
display: none; }
|
||||
|
||||
.datepicker--pointer {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
border-right: 1px solid #dbdbdb;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: -1; }
|
||||
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
|
||||
top: calc(100% - 4px);
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg); }
|
||||
.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
|
||||
right: calc(100% - 4px);
|
||||
-webkit-transform: rotate(225deg);
|
||||
transform: rotate(225deg); }
|
||||
.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
|
||||
bottom: calc(100% - 4px);
|
||||
-webkit-transform: rotate(315deg);
|
||||
transform: rotate(315deg); }
|
||||
.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
|
||||
left: calc(100% - 4px);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
|
||||
left: 10px; }
|
||||
.-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
|
||||
right: 10px; }
|
||||
.-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer {
|
||||
left: calc(50% - 10px / 2); }
|
||||
.-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer {
|
||||
top: 10px; }
|
||||
.-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
|
||||
bottom: 10px; }
|
||||
.-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer {
|
||||
top: calc(50% - 10px / 2); }
|
||||
|
||||
.datepicker--body {
|
||||
display: none; }
|
||||
.datepicker--body.active {
|
||||
display: block; }
|
||||
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
color: #c5c5c5; }
|
||||
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
Navigation
|
||||
------------------------------------------------- */
|
||||
.datepicker--nav {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #efefef;
|
||||
min-height: 32px;
|
||||
padding: 4px; }
|
||||
.-only-timepicker- .datepicker--nav {
|
||||
display: none; }
|
||||
|
||||
.datepicker--nav-title,
|
||||
.datepicker--nav-action {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
|
||||
.datepicker--nav-action {
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.datepicker--nav-action:hover {
|
||||
background: #f0f0f0; }
|
||||
.datepicker--nav-action.-disabled- {
|
||||
visibility: hidden; }
|
||||
.datepicker--nav-action svg {
|
||||
width: 32px;
|
||||
height: 32px; }
|
||||
.datepicker--nav-action path {
|
||||
fill: none;
|
||||
stroke: #9c9c9c;
|
||||
stroke-width: 2px; }
|
||||
|
||||
.datepicker--nav-title {
|
||||
border-radius: 4px;
|
||||
padding: 0 8px; }
|
||||
.datepicker--nav-title i {
|
||||
font-style: normal;
|
||||
color: #9c9c9c;
|
||||
margin-left: 5px; }
|
||||
.datepicker--nav-title:hover {
|
||||
background: #f0f0f0; }
|
||||
.datepicker--nav-title.-disabled- {
|
||||
cursor: default;
|
||||
background: none; }
|
||||
|
||||
.datepicker--buttons {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
border-top: 1px solid #efefef; }
|
||||
|
||||
.datepicker--button {
|
||||
color: #4EB5E6;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 32px; }
|
||||
.datepicker--button:hover {
|
||||
color: #4a4a4a;
|
||||
background: #f0f0f0; }
|
||||
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
color: #c5c5c5; }
|
||||
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
|
||||
/* -------------------------------------------------
|
||||
Timepicker
|
||||
------------------------------------------------- */
|
||||
.datepicker--time {
|
||||
border-top: 1px solid #efefef;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
position: relative; }
|
||||
.datepicker--time.-am-pm- .datepicker--time-sliders {
|
||||
-webkit-flex: 0 1 138px;
|
||||
-ms-flex: 0 1 138px;
|
||||
flex: 0 1 138px;
|
||||
max-width: 138px; }
|
||||
.-only-timepicker- .datepicker--time {
|
||||
border-top: none; }
|
||||
|
||||
.datepicker--time-sliders {
|
||||
-webkit-flex: 0 1 153px;
|
||||
-ms-flex: 0 1 153px;
|
||||
flex: 0 1 153px;
|
||||
margin-right: 10px;
|
||||
max-width: 153px; }
|
||||
|
||||
.datepicker--time-label {
|
||||
display: none;
|
||||
font-size: 12px; }
|
||||
|
||||
.datepicker--time-current {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 0 0 0 10px; }
|
||||
|
||||
.datepicker--time-current-colon {
|
||||
margin: 0 2px 3px;
|
||||
line-height: 1; }
|
||||
|
||||
.datepicker--time-current-hours,
|
||||
.datepicker--time-current-minutes {
|
||||
line-height: 1;
|
||||
font-size: 19px;
|
||||
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.datepicker--time-current-hours:after,
|
||||
.datepicker--time-current-minutes:after {
|
||||
content: '';
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -3px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
z-index: -1;
|
||||
opacity: 0; }
|
||||
.datepicker--time-current-hours.-focus-:after,
|
||||
.datepicker--time-current-minutes.-focus-:after {
|
||||
opacity: 1; }
|
||||
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
color: #9c9c9c;
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 1px; }
|
||||
|
||||
.datepicker--time-row {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
height: 17px;
|
||||
background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px no-repeat; }
|
||||
.datepicker--time-row:first-child {
|
||||
margin-bottom: 4px; }
|
||||
.datepicker--time-row input[type='range'] {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; }
|
||||
.datepicker--time-row input[type='range']::-ms-tooltip {
|
||||
display: none; }
|
||||
.datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:hover::-moz-range-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:hover::-ms-thumb {
|
||||
border-color: #b8b8b8; }
|
||||
.datepicker--time-row input[type='range']:focus {
|
||||
outline: none; }
|
||||
.datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']:focus::-moz-range-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']:focus::-ms-thumb {
|
||||
background: #5cc4ef;
|
||||
border-color: #5cc4ef; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-ms-thumb {
|
||||
box-sizing: border-box;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedede;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: background .2s; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-thumb {
|
||||
margin-top: -6px; }
|
||||
.datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-moz-range-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-track {
|
||||
border: none;
|
||||
height: 1px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-lower {
|
||||
background: transparent; }
|
||||
.datepicker--time-row input[type='range']::-ms-fill-upper {
|
||||
background: transparent; }
|
||||
.datepicker--time-row span {
|
||||
padding: 0 12px; }
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: #9c9c9c;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin: 0 5px -1px 0;
|
||||
width: 1em;
|
||||
height: 1em; }
|
||||
.datepicker--time-icon:after, .datepicker--time-icon:before {
|
||||
content: '';
|
||||
background: currentColor;
|
||||
position: absolute; }
|
||||
.datepicker--time-icon:after {
|
||||
height: .4em;
|
||||
width: 1px;
|
||||
left: calc(50% - 1px);
|
||||
top: calc(50% + 1px);
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%); }
|
||||
.datepicker--time-icon:before {
|
||||
width: .4em;
|
||||
height: 1px;
|
||||
top: calc(50% + 1px);
|
||||
left: calc(50% - 1px); }
|
||||
|
||||
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {
|
||||
color: #c5c5c5; }
|
||||
.-disabled-.-focus-.datepicker--cell-day.-other-month-, .-disabled-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
color: #dedede; }
|
||||
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
|
||||
color: #fff;
|
||||
background: #a2ddf6; }
|
||||
.-selected-.-focus-.datepicker--cell-day.-other-month-, .-selected-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background: #8ad5f4; }
|
||||
.-in-range-.datepicker--cell-day.-other-month-, .-in-range-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.1);
|
||||
color: #cccccc; }
|
||||
.-in-range-.-focus-.datepicker--cell-day.-other-month-, .-in-range-.-focus-.datepicker--cell-year.-other-decade- {
|
||||
background-color: rgba(92, 196, 239, 0.2); }
|
||||
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
|
||||
background: none;
|
||||
border: none; }
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+2
File diff suppressed because one or more lines are too long
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['cs'] = {
|
||||
days: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'],
|
||||
daysShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
|
||||
daysMin: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'],
|
||||
months: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'],
|
||||
monthsShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čvn', 'Čvc', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
|
||||
today: 'Dnes',
|
||||
clear: 'Vymazat',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['da'] = {
|
||||
days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
|
||||
daysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
|
||||
daysMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
|
||||
months: ['Januar','Februar','Marts','April','Maj','Juni', 'Juli','August','September','Oktober','November','December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'I dag',
|
||||
clear: 'Nulstil',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,13 @@
|
||||
;(function ($) { $.fn.datepicker.language['de'] = {
|
||||
days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
|
||||
daysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
|
||||
daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
|
||||
months: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
|
||||
today: 'Heute',
|
||||
clear: 'Aufräumen',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['en'] = {
|
||||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Today',
|
||||
clear: 'Clear',
|
||||
dateFormat: 'mm/dd/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['es'] = {
|
||||
days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
|
||||
daysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
|
||||
daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
|
||||
months: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 'Julio','Augosto','Septiembre','Octubre','Noviembre','Diciembre'],
|
||||
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
|
||||
today: 'Hoy',
|
||||
clear: 'Limpiar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,13 @@
|
||||
;(function ($) { $.fn.datepicker.language['fi'] = {
|
||||
days: ['Sunnuntai', 'Maanantai', 'Tiistai', 'Keskiviikko', 'Torstai', 'Perjantai', 'Lauantai'],
|
||||
daysShort: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
|
||||
daysMin: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
|
||||
months: ['Tammikuu','Helmikuu','Maaliskuu','Huhtikuu','Toukokuu','Kesäkuu', 'Heinäkuu','Elokuu','Syyskuu','Lokakuu','Marraskuu','Joulukuu'],
|
||||
monthsShort: ['Tammi', 'Helmi', 'Maalis', 'Huhti', 'Touko', 'Kesä', 'Heinä', 'Elo', 'Syys', 'Loka', 'Marras', 'Joulu'],
|
||||
today: 'Tänään',
|
||||
clear: 'Tyhjennä',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['fr'] = {
|
||||
days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
|
||||
daysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
|
||||
daysMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
|
||||
months: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Decembre'],
|
||||
monthsShort: ['Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
today: "Aujourd'hui",
|
||||
clear: 'Effacer',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { ;(function ($) { $.fn.datepicker.language['hu'] = {
|
||||
days: ['Vasárnap', 'Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat'],
|
||||
daysShort: ['Va', 'Hé', 'Ke', 'Sze', 'Cs', 'Pé', 'Szo'],
|
||||
daysMin: ['V', 'H', 'K', 'Sz', 'Cs', 'P', 'Sz'],
|
||||
months: ['Január', 'Február', 'Március', 'Április', 'Május', 'Június', 'Július', 'Augusztus', 'Szeptember', 'Október', 'November', 'December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Már', 'Ápr', 'Máj', 'Jún', 'Júl', 'Aug', 'Szep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'Ma',
|
||||
clear: 'Törlés',
|
||||
dateFormat: 'yyyy-mm-dd',
|
||||
timeFormat: 'hh:ii aa',
|
||||
firstDay: 1
|
||||
}; })(jQuery); })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['nl'] = {
|
||||
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
|
||||
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'Vandaag',
|
||||
clear: 'Legen',
|
||||
dateFormat: 'dd-MM-yy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,13 @@
|
||||
;(function ($) { $.fn.datepicker.language['pl'] = {
|
||||
days: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
|
||||
daysShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
|
||||
daysMin: ['Nd', 'Pn', 'Wt', 'Śr', 'Czw', 'Pt', 'So'],
|
||||
months: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
|
||||
monthsShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
|
||||
today: 'Dzisiaj',
|
||||
clear: 'Wyczyść',
|
||||
dateFormat: 'yyyy-mm-dd',
|
||||
timeFormat: 'hh:ii:aa',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['pt-BR'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qu', 'Qu', 'Se', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 0
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['pt'] = {
|
||||
days: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
|
||||
daysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
|
||||
daysMin: ['Do', 'Se', 'Te', 'Qa', 'Qi', 'Sx', 'Sa'],
|
||||
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
|
||||
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
|
||||
today: 'Hoje',
|
||||
clear: 'Limpar',
|
||||
dateFormat: 'dd/mm/yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,13 @@
|
||||
;(function ($) { $.fn.datepicker.language['ro'] = {
|
||||
days: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
|
||||
daysShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
|
||||
daysMin: ['D', 'L', 'Ma', 'Mi', 'J', 'V', 'S'],
|
||||
months: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie','Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
|
||||
monthsShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun', 'Iul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
|
||||
today: 'Azi',
|
||||
clear: 'Şterge',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['sk'] = {
|
||||
days: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'],
|
||||
daysShort: ['Ned', 'Pon', 'Uto', 'Str', 'Štv', 'Pia', 'Sob'],
|
||||
daysMin: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'],
|
||||
months: ['Január','Február','Marec','Apríl','Máj','Jún', 'Júl','August','September','Október','November','December'],
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
|
||||
today: 'Dnes',
|
||||
clear: 'Vymazať',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,12 @@
|
||||
;(function ($) { $.fn.datepicker.language['zh'] = {
|
||||
days: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||||
daysShort: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
daysMin: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
today: '今天',
|
||||
clear: '清除',
|
||||
dateFormat: 'yyyy-mm-dd',
|
||||
timeFormat: 'hh:ii',
|
||||
firstDay: 1
|
||||
}; })(jQuery);
|
||||
@@ -0,0 +1,220 @@
|
||||
kit.PluginManager.register('align',function() {
|
||||
|
||||
var AlignClass = function(){
|
||||
|
||||
var Align = function()
|
||||
{
|
||||
this.reset();
|
||||
this.node = null;
|
||||
this.parentNode = null;
|
||||
this.offsetHorizontal = 0;
|
||||
this.offsetVertical = 0;
|
||||
this.offset = 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param node HTMLElement
|
||||
* @return {Align}
|
||||
*/
|
||||
Align.prototype.setNode = function(node){
|
||||
this.node = node;
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* @param node HTMLElement
|
||||
* @return {Align}
|
||||
*/
|
||||
Align.prototype.setParentNode = function(node){
|
||||
this.parentNode = node;
|
||||
return this;
|
||||
};
|
||||
/**
|
||||
* @return {Align}
|
||||
*/
|
||||
Align.prototype.reset = function(hor = true, vert = true){
|
||||
if(hor) {
|
||||
this.right = {applicability: 0, valid: false};
|
||||
this.left = {applicability: 0, valid: false};
|
||||
}
|
||||
if(vert) {
|
||||
this.top = {applicability: 0, valid: false};
|
||||
this.bottom = {applicability: 0, valid: false};
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
Align.prototype.getContentSizes = function() {
|
||||
return {
|
||||
InnerWidth: window.innerWidth,
|
||||
InnerHeight: window.innerHeight,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @param top bool
|
||||
* @param inner bool
|
||||
* @return {Align}
|
||||
*/
|
||||
Align.prototype.setVertical = function(top = false, inner = false){
|
||||
var contentSizes = this.getContentSizes();
|
||||
this.reset(false, true);
|
||||
|
||||
if(top){
|
||||
!this.calcTop(contentSizes, inner) && this.calcBottom(contentSizes, inner);
|
||||
} else {
|
||||
!this.calcBottom(contentSizes, inner) && this.calcTop(contentSizes, inner);
|
||||
}
|
||||
|
||||
if(!this.top.valid && !this.bottom.valid) {
|
||||
if(this.top.applicability > this.bottom.applicability || contentSizes.InnerHeight < this.node.offsetHeight) {
|
||||
this.calcTop(contentSizes, inner, true);
|
||||
} else {
|
||||
this.calcBottom(contentSizes, inner, true);
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
Align.prototype.calcTop = function (contentSizes, inner, extra = false) {
|
||||
var top, offset;
|
||||
|
||||
this.node.setAttribute('data-kit-align-vertical','top');
|
||||
offset = this.offsetVertical || this.offset;
|
||||
|
||||
if(inner) {
|
||||
top = 0 - this.node.offsetHeight + this.parentNode.offsetHeight - this.parentNode.clientTop - offset;
|
||||
} else {
|
||||
top = 0 - this.parentNode.clientTop - this.node.offsetHeight + this.node.clientTop - offset;
|
||||
}
|
||||
|
||||
this.node.style.top = '' + top + 'px';
|
||||
this.node.style.bottom = 'unset';
|
||||
|
||||
if(extra) {
|
||||
this.checkTop(contentSizes);
|
||||
this.node.style.top = (top - this.top.applicability) + 'px';
|
||||
return false;
|
||||
}
|
||||
return this.checkTop(contentSizes);
|
||||
};
|
||||
Align.prototype.calcBottom = function (contentSizes, inner, extra = false) {
|
||||
|
||||
var top, offset;
|
||||
this.node.setAttribute('data-kit-align-vertical','bottom');
|
||||
offset = this.offsetVertical || this.offset;
|
||||
|
||||
if(inner) {
|
||||
top = 0 - this.parentNode.clientTop + offset;
|
||||
} else {
|
||||
top = this.parentNode.offsetHeight - this.parentNode.clientTop + offset;
|
||||
}
|
||||
|
||||
this.node.style.top = '' + top + 'px';
|
||||
this.node.style.bottom = 'unset';
|
||||
|
||||
if(extra) {
|
||||
this.checkBottom(contentSizes);
|
||||
this.node.style.top = (top + this.bottom.applicability) + 'px';
|
||||
return false;
|
||||
}
|
||||
return this.checkBottom(contentSizes);
|
||||
};
|
||||
Align.prototype.checkTop = function (contentSizes) {
|
||||
var b = this.node.getBoundingClientRect();
|
||||
this.top.applicability = b.top - 0;
|
||||
this.top.valid = b.top >= 0;
|
||||
return this.top.valid;
|
||||
};
|
||||
Align.prototype.checkBottom = function (contentSizes) {
|
||||
var b = this.node.getBoundingClientRect();
|
||||
this.bottom.applicability = contentSizes.InnerHeight - (b.top + b.height);
|
||||
this.bottom.valid = contentSizes.InnerHeight >= (b.top + b.height);
|
||||
return this.bottom.valid;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param right bool
|
||||
* @param inner bool
|
||||
* @return {Align}
|
||||
*/
|
||||
Align.prototype.setHorizontal = function(right = true, inner = false){
|
||||
var contentSizes = this.getContentSizes();
|
||||
this.reset(true, false);
|
||||
|
||||
if(right){
|
||||
!this.calcRight(contentSizes, inner) && this.calcLeft(contentSizes, inner);
|
||||
} else {
|
||||
!this.calcLeft(contentSizes, inner) && this.calcRight(contentSizes, inner);
|
||||
}
|
||||
|
||||
if(!this.left.valid && !this.right.valid) {
|
||||
if(this.left.applicability > this.right.applicability || contentSizes.InnerWidth < this.node.offsetWidth) {
|
||||
this.calcLeft(contentSizes, inner, true);
|
||||
} else {
|
||||
this.calcRight(contentSizes, inner, true)
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
Align.prototype.calcLeft = function (contentSizes, inner, extra = false) {
|
||||
var left, offset;
|
||||
|
||||
this.node.setAttribute('data-kit-align-horizontal','left');
|
||||
offset = this.offsetHorizontal || this.offset;
|
||||
|
||||
if(inner) {
|
||||
left = 0 - this.node.offsetWidth + this.parentNode.offsetWidth - this.parentNode.clientLeft - offset;
|
||||
} else {
|
||||
left = 0 - this.parentNode.clientLeft - this.node.offsetWidth + this.node.clientLeft - offset;
|
||||
}
|
||||
|
||||
this.node.style.left = '' + left + 'px';
|
||||
this.node.style.right = 'unset';
|
||||
|
||||
if(extra) {
|
||||
this.checkLeft(contentSizes);
|
||||
this.node.style.left = (left - this.left.applicability) + 'px';
|
||||
return false;
|
||||
}
|
||||
return this.checkLeft(contentSizes);
|
||||
};
|
||||
Align.prototype.calcRight = function (contentSizes, inner, extra = false) {
|
||||
var left, offset;
|
||||
this.node.setAttribute('data-kit-align-horizontal','right');
|
||||
offset = this.offsetHorizontal || this.offset;
|
||||
|
||||
if(inner) {
|
||||
left = 0 - this.parentNode.clientLeft + offset;
|
||||
} else {
|
||||
left = this.parentNode.offsetWidth - this.parentNode.clientLeft + offset;
|
||||
}
|
||||
|
||||
this.node.style.left = '' + left + 'px';
|
||||
this.node.style.right = 'unset';
|
||||
|
||||
if(extra) {
|
||||
this.checkRight(contentSizes);
|
||||
this.node.style.left = (left + this.right.applicability) + 'px';
|
||||
return false;
|
||||
}
|
||||
return this.checkRight(contentSizes);
|
||||
};
|
||||
Align.prototype.checkLeft = function (contentSizes) {
|
||||
var b = this.node.getBoundingClientRect();
|
||||
this.left.applicability = b.left - 0;
|
||||
this.left.valid = b.left >= 0;
|
||||
return this.left.valid;
|
||||
};
|
||||
Align.prototype.checkRight = function (contentSizes) {
|
||||
var b = this.node.getBoundingClientRect();
|
||||
this.right.applicability = contentSizes.InnerWidth - (b.left + b.width);
|
||||
this.right.valid = contentSizes.InnerWidth >= (b.left + b.width);
|
||||
return this.right.valid;
|
||||
};
|
||||
return Align;
|
||||
}();
|
||||
|
||||
this.Class = AlignClass;
|
||||
return this;
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
/* modal */
|
||||
.modal {
|
||||
display: none;
|
||||
}
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,122 @@
|
||||
.collapse:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.collapsing {
|
||||
/*transition: none;*/
|
||||
}
|
||||
}
|
||||
.accordion-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow-anchor: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.accordion-button {
|
||||
/*transition: none;*/
|
||||
}
|
||||
}
|
||||
.accordion-button:not(.collapsed) {
|
||||
color: #0c63e4;
|
||||
background-color: #e7f1ff;
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
.accordion-button::after {
|
||||
flex-shrink: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-left: auto;
|
||||
content: "";
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25rem;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.accordion-button::after {
|
||||
/*transition: none;*/
|
||||
}
|
||||
}
|
||||
.accordion-button:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
.accordion-button:focus {
|
||||
z-index: 3;
|
||||
border-color: #86b7fe;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.accordion-item:first-of-type {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:first-of-type .accordion-button {
|
||||
border-top-left-radius: calc(0.25rem - 1px);
|
||||
border-top-right-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:not(:first-of-type) {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-item:last-of-type {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-button.collapsed {
|
||||
border-bottom-right-radius: calc(0.25rem - 1px);
|
||||
border-bottom-left-radius: calc(0.25rem - 1px);
|
||||
}
|
||||
.accordion-item:last-of-type .accordion-collapse {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.accordion-flush .accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.accordion-flush .accordion-item .accordion-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -0,0 +1,391 @@
|
||||
kit.PluginManager.register('collapse', function(module, exports, require) {
|
||||
var bsCore = require('bsCore');
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
var {
|
||||
defineJQueryPlugin,
|
||||
getElement,
|
||||
getSelectorFromElement,
|
||||
getElementFromSelector,
|
||||
reflow,
|
||||
typeCheckConfig
|
||||
} = bsCore.util.index;
|
||||
var {Data, EventHandler, Manipulator, SelectorEngine} = bsCore.dom;
|
||||
var BaseComponent = bsCore.BaseComponent;
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'collapse'
|
||||
const DATA_KEY = 'bs.collapse'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
|
||||
const Default = {
|
||||
toggle: true,
|
||||
parent: ''
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
toggle: 'boolean',
|
||||
parent: '(string|element)'
|
||||
}
|
||||
|
||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
|
||||
const CLASS_NAME_SHOW = 'show'
|
||||
const CLASS_NAME_COLLAPSE = 'collapse'
|
||||
const CLASS_NAME_COLLAPSING = 'collapsing'
|
||||
const CLASS_NAME_COLLAPSED = 'collapsed'
|
||||
|
||||
const WIDTH = 'width'
|
||||
const HEIGHT = 'height'
|
||||
|
||||
const SELECTOR_ACTIVES = '.show, .collapsing'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Collapse extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element)
|
||||
|
||||
this._isTransitioning = false
|
||||
this._config = this._getConfig(config)
|
||||
this._triggerArray = SelectorEngine.find(
|
||||
`${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"],` +
|
||||
`${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`
|
||||
)
|
||||
|
||||
const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
|
||||
|
||||
for (let i = 0, len = toggleList.length; i < len; i++) {
|
||||
const elem = toggleList[i]
|
||||
const selector = getSelectorFromElement(elem)
|
||||
const filterElement = SelectorEngine.find(selector)
|
||||
.filter(foundElem => foundElem === this._element)
|
||||
|
||||
if (selector !== null && filterElement.length) {
|
||||
this._selector = selector
|
||||
this._triggerArray.push(elem)
|
||||
}
|
||||
}
|
||||
|
||||
this._parent = this._config.parent ? this._getParent() : null
|
||||
|
||||
if (!this._config.parent) {
|
||||
this._addAriaAndCollapsedClass(this._element, this._triggerArray)
|
||||
}
|
||||
|
||||
if (this._config.toggle) {
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
// Getters
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get NAME() {
|
||||
return NAME
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
toggle() {
|
||||
if (this._element.classList.contains(CLASS_NAME_SHOW)) {
|
||||
this.hide()
|
||||
} else {
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._isTransitioning || this._element.classList.contains(CLASS_NAME_SHOW)) {
|
||||
return
|
||||
}
|
||||
|
||||
let actives
|
||||
let activesData
|
||||
|
||||
if (this._parent) {
|
||||
actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent)
|
||||
.filter(elem => {
|
||||
if (typeof this._config.parent === 'string') {
|
||||
return elem.getAttribute('data-bs-parent') === this._config.parent
|
||||
}
|
||||
|
||||
return elem.classList.contains(CLASS_NAME_COLLAPSE)
|
||||
})
|
||||
|
||||
if (actives.length === 0) {
|
||||
actives = null
|
||||
}
|
||||
}
|
||||
|
||||
const container = SelectorEngine.findOne(this._selector)
|
||||
if (actives) {
|
||||
const tempActiveData = actives.find(elem => container !== elem)
|
||||
activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null
|
||||
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const startEvent = EventHandler.trigger(this._element, EVENT_SHOW)
|
||||
if (startEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
if (actives) {
|
||||
actives.forEach(elemActive => {
|
||||
if (container !== elemActive) {
|
||||
Collapse.collapseInterface(elemActive, 'hide')
|
||||
}
|
||||
|
||||
if (!activesData) {
|
||||
Data.set(elemActive, DATA_KEY, null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const dimension = this._getDimension()
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE)
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSING)
|
||||
|
||||
this._element.style[dimension] = 0
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
this._triggerArray.forEach(element => {
|
||||
element.classList.remove(CLASS_NAME_COLLAPSED)
|
||||
element.setAttribute('aria-expanded', true)
|
||||
})
|
||||
}
|
||||
|
||||
this.setTransitioning(true)
|
||||
|
||||
const complete = () => {
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
||||
|
||||
this._element.style[dimension] = ''
|
||||
|
||||
this.setTransitioning(false)
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN)
|
||||
}
|
||||
|
||||
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
|
||||
const scrollSize = `scroll${capitalizedDimension}`
|
||||
|
||||
this._queueCallback(complete, this._element, true)
|
||||
this._element.style[dimension] = `${this._element[scrollSize]}px`
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning || !this._element.classList.contains(CLASS_NAME_SHOW)) {
|
||||
return
|
||||
}
|
||||
|
||||
const startEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
||||
if (startEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
const dimension = this._getDimension()
|
||||
|
||||
this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
|
||||
|
||||
reflow(this._element)
|
||||
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSING)
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
|
||||
|
||||
const triggerArrayLength = this._triggerArray.length
|
||||
if (triggerArrayLength > 0) {
|
||||
for (let i = 0; i < triggerArrayLength; i++) {
|
||||
const trigger = this._triggerArray[i]
|
||||
const elem = getElementFromSelector(trigger)
|
||||
|
||||
if (elem && !elem.classList.contains(CLASS_NAME_SHOW)) {
|
||||
trigger.classList.add(CLASS_NAME_COLLAPSED)
|
||||
trigger.setAttribute('aria-expanded', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setTransitioning(true)
|
||||
|
||||
const complete = () => {
|
||||
this.setTransitioning(false)
|
||||
this._element.classList.remove(CLASS_NAME_COLLAPSING)
|
||||
this._element.classList.add(CLASS_NAME_COLLAPSE)
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
||||
}
|
||||
|
||||
this._element.style[dimension] = ''
|
||||
|
||||
this._queueCallback(complete, this._element, true)
|
||||
}
|
||||
|
||||
setTransitioning(isTransitioning) {
|
||||
this._isTransitioning = isTransitioning
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_getConfig(config) {
|
||||
config = {
|
||||
...Default,
|
||||
...config
|
||||
}
|
||||
config.toggle = Boolean(config.toggle) // Coerce string values
|
||||
typeCheckConfig(NAME, config, DefaultType)
|
||||
return config
|
||||
}
|
||||
|
||||
_getDimension() {
|
||||
return this._element.classList.contains(WIDTH) ? WIDTH : HEIGHT
|
||||
}
|
||||
|
||||
_getParent() {
|
||||
let { parent } = this._config
|
||||
|
||||
parent = getElement(parent)
|
||||
|
||||
const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]`
|
||||
|
||||
SelectorEngine.find(selector, parent)
|
||||
.forEach(element => {
|
||||
const selected = getElementFromSelector(element)
|
||||
|
||||
this._addAriaAndCollapsedClass(
|
||||
selected,
|
||||
[element]
|
||||
)
|
||||
})
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_addAriaAndCollapsedClass(element, triggerArray) {
|
||||
if (!element || !triggerArray.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const isOpen = element.classList.contains(CLASS_NAME_SHOW)
|
||||
|
||||
triggerArray.forEach(elem => {
|
||||
if (isOpen) {
|
||||
elem.classList.remove(CLASS_NAME_COLLAPSED)
|
||||
} else {
|
||||
elem.classList.add(CLASS_NAME_COLLAPSED)
|
||||
}
|
||||
|
||||
elem.setAttribute('aria-expanded', isOpen)
|
||||
})
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static collapseInterface(element, config) {
|
||||
let data = Collapse.getInstance(element)
|
||||
const _config = {
|
||||
...Default,
|
||||
...Manipulator.getDataAttributes(element),
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
}
|
||||
|
||||
if (!data && _config.toggle && typeof config === 'string' && /show|hide/.test(config)) {
|
||||
_config.toggle = false
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Collapse(element, _config)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`)
|
||||
}
|
||||
|
||||
data[config]()
|
||||
}
|
||||
}
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
Collapse.collapseInterface(this, config)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const triggerData = Manipulator.getDataAttributes(this)
|
||||
const selector = getSelectorFromElement(this)
|
||||
const selectorElements = SelectorEngine.find(selector)
|
||||
|
||||
selectorElements.forEach(element => {
|
||||
const data = Collapse.getInstance(element)
|
||||
let config
|
||||
if (data) {
|
||||
// update parent attribute
|
||||
if (data._parent === null && typeof triggerData.parent === 'string') {
|
||||
data._config.parent = triggerData.parent
|
||||
data._parent = data._getParent()
|
||||
}
|
||||
|
||||
config = 'toggle'
|
||||
} else {
|
||||
config = triggerData
|
||||
}
|
||||
|
||||
Collapse.collapseInterface(element, config)
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .Collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(Collapse)
|
||||
|
||||
module.exports = Collapse;
|
||||
|
||||
return module.exports;
|
||||
});
|
||||
@@ -0,0 +1,554 @@
|
||||
window.kit = window.kit || {};
|
||||
(function(global){
|
||||
var stackPromise = {};
|
||||
var stateList = {
|
||||
undefined: 0,
|
||||
registered: 1,
|
||||
loaded: 3,
|
||||
installed: 4,
|
||||
};
|
||||
var moduleTypeList = {
|
||||
loader: 'loader',
|
||||
import: 'import',
|
||||
};
|
||||
var PluginManager = function(global, modules = {}){
|
||||
this.plugins = {};
|
||||
this.global = global;
|
||||
this.registerPlugins(modules);
|
||||
};
|
||||
|
||||
var __proto = PluginManager.prototype;
|
||||
|
||||
__proto.__manual = function(){
|
||||
return {
|
||||
config: {
|
||||
type: {
|
||||
import: 'Значение по умолчанию. Нативный загрузчик модулей. Файл модуля содержит ключевые фразы "export" и "export default"',
|
||||
loader: 'Файл модуля содержит функцию kit.PluginManager.register(pluginId, function(module, exports, require){})',
|
||||
},
|
||||
alias: 'тип Array|string. Список ключей, которые могут быть использованы вместо pluginId, как и в require() так и в global',
|
||||
import: 'тип string. Ссылка на файл с модулем',
|
||||
loader: 'Используется для загрузки модулей типа loader',
|
||||
deps: 'тип Array|string. Зависимости, Id плагинов.',
|
||||
css: 'тип Array|string. Массив путей к стилям. Стили грузятся синхронно при загрузке плагина. Без событий',
|
||||
js: 'тип Array|string. Массив путей к скриптам. Загрузка идет по цепочке. Для синхронной загрузки скрипты ложатся в массив. пр: [1.js, [1.1.js, 1.2.js]]',
|
||||
loadJsAfterModule: 'определяет порядок загрузки скриптов и модуля',
|
||||
onInstall: 'функция выполняемая после установки плагина (однократно)',
|
||||
onLoad: 'функция выполняемая после загрузки плагина (однократно)',
|
||||
path: 'префикс пути для модуля, скриптов и стилей',
|
||||
modulePath: 'префикс пути для модуля. если не указан, то берется config.path',
|
||||
},
|
||||
}
|
||||
}();
|
||||
|
||||
__proto.__checkState = function(pluginId, state){
|
||||
return this.plugins.hasOwnProperty(pluginId) && this.plugins[pluginId].state >= state;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param plugins
|
||||
* @return {PluginManager}
|
||||
*/
|
||||
__proto.registerPlugins = function (plugins) {
|
||||
if(Array.isArray(plugins)) {
|
||||
plugins = Object.assign({}, plugins);
|
||||
}
|
||||
for (var pluginId in plugins) {
|
||||
if(plugins.hasOwnProperty(pluginId)) {
|
||||
this.register(pluginId, plugins[pluginId]);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
__proto.register = function (pluginId, config = {}) {
|
||||
//console.warn('PluginManager.register: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
|
||||
var defaultPlugin = {
|
||||
module: {
|
||||
exports: {},
|
||||
},
|
||||
config: {
|
||||
},
|
||||
promise: new Promise(function(resolve, reject){resolve()}),
|
||||
id: pluginId,
|
||||
state: stateList.undefined,
|
||||
stateInit: {
|
||||
loading: false,
|
||||
installing: false,
|
||||
},
|
||||
};
|
||||
var plugin = this.__getPlugin(pluginId);
|
||||
if(plugin) {
|
||||
pluginId = plugin.id;
|
||||
} else {
|
||||
plugin = this.plugins[pluginId] = defaultPlugin;
|
||||
}
|
||||
|
||||
if(
|
||||
this.__checkState(pluginId, stateList.installed) ||
|
||||
(
|
||||
(plugin.stateInit.loading || this.__checkState(pluginId, stateList.loaded)) && typeof config === 'object'
|
||||
)
|
||||
) {
|
||||
console.warn('PluginManager.register: plugin ' + pluginId + ' уже невозможно конфигурировать ('+plugin.state+')');
|
||||
return false;
|
||||
}
|
||||
|
||||
var loader;
|
||||
if(typeof config === 'function') {
|
||||
loader = config;
|
||||
config = plugin.config;
|
||||
config.loader = loader;
|
||||
config.type = 'loader';
|
||||
}
|
||||
|
||||
if(typeof config === 'object') {
|
||||
if(typeof config.onLoad !== 'function') {
|
||||
config.onLoad = function(){};
|
||||
}
|
||||
if(typeof config.onInstall !== 'function') {
|
||||
config.onInstall = function(){};
|
||||
}
|
||||
if(typeof config.onRegister !== 'function') {
|
||||
config.onRegister = function(){};
|
||||
}
|
||||
if(typeof config.path !== 'string') {
|
||||
config.path = '';
|
||||
}
|
||||
if(!config.hasOwnProperty('modulePath')) {
|
||||
config.modulePath = config.path;
|
||||
} else if(typeof config.modulePath !== 'string') {
|
||||
config.modulePath = config.path;
|
||||
}
|
||||
if(typeof config.js === 'string') {
|
||||
config.js = [config.js];
|
||||
} else if(!Array.isArray(config.js)) {
|
||||
config.js = [];
|
||||
}
|
||||
if(typeof config.css === 'string') {
|
||||
config.css = [config.css];
|
||||
} else if(!Array.isArray(config.css)) {
|
||||
config.css = [];
|
||||
}
|
||||
|
||||
if(typeof config.alias === 'string') {
|
||||
config.alias = [config.alias];
|
||||
} else if(!Array.isArray(config.alias)) {
|
||||
config.alias = [];
|
||||
}
|
||||
|
||||
config.loadJsAfterModule = !!config.loadJsAfterModule;
|
||||
config.type = config.type || 'import'; //loader
|
||||
|
||||
if(typeof config.deps === 'string') {
|
||||
config.deps = [config.deps];
|
||||
} else if(!Array.isArray(config.deps)) {
|
||||
config.deps = [];
|
||||
}
|
||||
|
||||
} else {
|
||||
console.warn('PluginManager.register: plugin ' + pluginId + ' is not a valid format');
|
||||
return false;
|
||||
}
|
||||
|
||||
Object.assign(plugin.config, config);
|
||||
|
||||
if(!this.__checkState(pluginId, stateList.registered)) {
|
||||
plugin.state = stateList.registered;
|
||||
plugin.config.onRegister(plugin);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param pluginId
|
||||
* @param callback
|
||||
* @return {PluginManager}
|
||||
*/
|
||||
__proto.load = function (pluginId, callback) {
|
||||
//console.log('PluginManager.load: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
|
||||
if(typeof callback !== 'function') {
|
||||
callback = function(){};
|
||||
}
|
||||
|
||||
var plugin = this.__getPlugin(pluginId);
|
||||
if(plugin) {
|
||||
pluginId = plugin.id;
|
||||
}
|
||||
|
||||
if(!this.__checkState(pluginId, stateList.registered)) {
|
||||
console.warn('kit.load: plugin ' + pluginId + ' is not register');
|
||||
return this;
|
||||
}
|
||||
if(this.__checkState(pluginId, stateList.loaded)) {
|
||||
//console.warn('PluginManager.load: plugin ' + pluginId + ' уже загружен');
|
||||
callback();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
if(plugin.stateInit.loading) {
|
||||
//console.log('PluginManager.install: plugin ' + pluginId + ' уже грузится');
|
||||
this.__exec(pluginId, callback);
|
||||
return this;
|
||||
}
|
||||
plugin.stateInit.loading = true;
|
||||
|
||||
var configModule = plugin.config;
|
||||
|
||||
var stackPush = function (callbackPromise, argArr = []){
|
||||
if(typeof plugin.promise === 'undefined') {
|
||||
plugin.promise = callbackPromise.apply(this, argArr);
|
||||
} else {
|
||||
plugin.promise = plugin.promise.then(function(m){
|
||||
return callbackPromise.apply(this, argArr);
|
||||
});
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
var getModulePromise = (function () {
|
||||
|
||||
function loadScript(src, resolveCallback, rejectCallback) {
|
||||
if(typeof resolveCallback !== 'function'){
|
||||
resolveCallback = function(){};
|
||||
}
|
||||
if(typeof rejectCallback !== 'function'){
|
||||
rejectCallback = function(res){
|
||||
console.warn(res.message);
|
||||
};
|
||||
}
|
||||
return new Promise(function(resolve, reject) {
|
||||
var script = document.querySelector('script[src^="'+src+'"]');
|
||||
if (!script) {
|
||||
script = document.createElement('script');
|
||||
script.src = '' + src + '?__pm' + (new Date()).getTime();
|
||||
script.onload = () => resolve(script);
|
||||
script.onerror = () => reject(new Error(`Ошибка загрузки скрипта ${src}`));
|
||||
document.head.append(script);
|
||||
} else {
|
||||
console.warn(`Скрип ${src} уже загружен`);
|
||||
resolve(script);
|
||||
}
|
||||
}).then(resolveCallback, rejectCallback);
|
||||
}
|
||||
function syncLoadScriptList(list) {
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
var i = 0;
|
||||
var status = true;
|
||||
var count = list.length;
|
||||
var checkResolve = function(src, cond){
|
||||
if(!cond) {
|
||||
console.error(`Ошибка загрузки скрипта ${src}`)
|
||||
}
|
||||
status = status && cond;
|
||||
i++;
|
||||
if(i === count) {
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
var syncPromise = new Promise(function(_resolve, _reject){_resolve();});
|
||||
list.forEach(function(item, i, arr){
|
||||
syncPromise.then(function(){
|
||||
var src = configModule.path + item;
|
||||
var script = document.querySelector('script[src^="'+src+'"]');
|
||||
if (!script) {
|
||||
script = document.createElement('script');
|
||||
script.src = '' + src + '?__pm' + (new Date()).getTime();
|
||||
script.onload = () => checkResolve(src, true);
|
||||
script.onerror = () => checkResolve(src, false);
|
||||
document.head.append(script);
|
||||
} else {
|
||||
checkResolve(src, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
}
|
||||
function loadStyle(src) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var link = document.querySelector('link[href^="'+src+'"]');
|
||||
if (!link) {
|
||||
link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = src + '?__pm' + (new Date()).getTime();
|
||||
link.media = 'all';
|
||||
document.head.append(link);
|
||||
resolve(link);
|
||||
} else {
|
||||
console.warn(`Скрип ${src} уже загружен`);
|
||||
resolve(link);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var getImportPromise = function (){
|
||||
if(configModule.module && configModule.type === 'import') {
|
||||
return import(configModule.modulePath + configModule.module).then(function(m) {
|
||||
m.__esModule = true;
|
||||
plugin.module.exports = m;
|
||||
}.bind(this), function(r){
|
||||
console.error(r);
|
||||
});
|
||||
} else if(configModule.module && configModule.type === 'loader') {
|
||||
return loadScript(configModule.modulePath + configModule.module).then(function() {
|
||||
|
||||
}.bind(this));
|
||||
}
|
||||
return new Promise(function(resolve, reject){resolve();});
|
||||
}.bind(this);
|
||||
var getResPromise = function(){
|
||||
var p = new Promise(function(resolve, reject){resolve();});
|
||||
configModule.js.forEach(function(item, i, array){
|
||||
if(Array.isArray(item)) {
|
||||
p = p.then(function () {
|
||||
return syncLoadScriptList(item);
|
||||
});
|
||||
} else {
|
||||
p = p.then(function () {
|
||||
return loadScript(configModule.path + item);
|
||||
});
|
||||
}
|
||||
//loadScript(configModule.path + item);
|
||||
});
|
||||
return p;
|
||||
}.bind(this);
|
||||
var setSkipLoadPromise = function (depsPromise) {
|
||||
|
||||
var noJsPromise, noImportPromise;
|
||||
if(configModule.js.length === 0) {
|
||||
noJsPromise = true;
|
||||
}
|
||||
if((!configModule.module && configModule.type === 'import') || (configModule.type === 'loader' && typeof configModule.loader === 'function')) {
|
||||
noImportPromise = true;
|
||||
}
|
||||
plugin.skipLoadPromise = noImportPromise && noJsPromise && !depsPromise;
|
||||
return plugin.skipLoadPromise;
|
||||
}.bind(this);
|
||||
|
||||
configModule.css.forEach(function(item, i, array){
|
||||
loadStyle(configModule.path + item);
|
||||
});
|
||||
|
||||
var depsPromise = this.__getDepsPromise(configModule.deps);
|
||||
setSkipLoadPromise(depsPromise);
|
||||
|
||||
if(depsPromise) {
|
||||
stackPush(function () {
|
||||
return depsPromise;
|
||||
});
|
||||
}
|
||||
|
||||
if(configModule.loadJsAfterModule) {
|
||||
stackPush(getImportPromise);
|
||||
stackPush(getResPromise);
|
||||
} else {
|
||||
stackPush(getResPromise);
|
||||
stackPush(getImportPromise);
|
||||
}
|
||||
|
||||
this.__exec(pluginId, function(){
|
||||
plugin.state = stateList.loaded;
|
||||
plugin.skipLoadPromise = true;
|
||||
configModule.onLoad.call(plugin.module.exports);
|
||||
callback();
|
||||
}.bind(this));
|
||||
|
||||
return plugin.promise;
|
||||
|
||||
}).bind(this);
|
||||
|
||||
getModulePromise();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param pluginId
|
||||
* @param callback
|
||||
* @return {PluginManager}
|
||||
*/
|
||||
__proto.install = function(pluginId, callback){
|
||||
//console.warn('PluginManager.install: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
|
||||
if(typeof callback !== 'function') {
|
||||
callback = function(){};
|
||||
}
|
||||
|
||||
var plugin = this.__getPlugin(pluginId);
|
||||
if(plugin) {
|
||||
pluginId = plugin.id;
|
||||
}
|
||||
var module = plugin.module;
|
||||
|
||||
if(!this.__checkState(pluginId, stateList.registered)) {
|
||||
console.warn('PluginManager.install: plugin ' + pluginId + ' is not register');
|
||||
return this;
|
||||
}
|
||||
if(this.__checkState(pluginId, stateList.installed)) {
|
||||
callback();
|
||||
return this;
|
||||
}
|
||||
|
||||
if(plugin.stateInit.installing) {
|
||||
//console.log('PluginManager.install: plugin ' + pluginId + ' уже устанавливается');
|
||||
this.__exec(pluginId, callback);
|
||||
return this;
|
||||
}
|
||||
plugin.stateInit.installing = true;
|
||||
|
||||
this.load(pluginId);
|
||||
|
||||
var installer = function(){
|
||||
var setGlobalExtension = function (key, aliasList, data) {
|
||||
if(data === undefined) {
|
||||
return;
|
||||
}
|
||||
if(!this.global.hasOwnProperty(key)) {
|
||||
this.global[key] = data;
|
||||
} else {
|
||||
console.warn('PluginManager.install: plugin ' + pluginId + ' already exist in kit ('+plugin.state+')');
|
||||
}
|
||||
if(Array.isArray(aliasList) && aliasList.length) {
|
||||
aliasList.forEach(function (alias) {
|
||||
setGlobalExtension(alias, [], data)
|
||||
}.bind(this))
|
||||
}
|
||||
}.bind(this);
|
||||
if(plugin.config.type === moduleTypeList.loader && typeof plugin.config.loader === 'function') {
|
||||
var returnData = plugin.config.loader.bind(module.exports).call(module.exports, module, module.exports, this.require.bind(this), global);
|
||||
setGlobalExtension(pluginId, plugin.config.alias, returnData);
|
||||
|
||||
} else if(plugin.config.type === moduleTypeList.import && typeof plugin.config.module === 'string') {
|
||||
setGlobalExtension(pluginId, plugin.config.alias, (typeof module.exports === 'object' && module.exports.default !== undefined)?module.exports.default:module.exports);
|
||||
}
|
||||
console.log('PluginManager.install: plugin ' + pluginId + ' установлен');
|
||||
plugin.state = stateList.installed;
|
||||
}.bind(this);
|
||||
|
||||
this.__exec(pluginId, function(){
|
||||
installer();
|
||||
plugin.config.onInstall.call(module.exports, plugin);
|
||||
callback();
|
||||
}.bind(this));
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
__proto.require = function (pluginId, callback) {
|
||||
//console.warn('PluginManager.require: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
|
||||
|
||||
var plugin = this.__getPlugin(pluginId);
|
||||
if(plugin) {
|
||||
pluginId = plugin.id;
|
||||
}
|
||||
var module = plugin.module;
|
||||
|
||||
if(!this.__checkState(pluginId, stateList.registered)) {
|
||||
console.warn('PluginManager.require: plugin ' + pluginId + ' is not register');
|
||||
return false;
|
||||
}
|
||||
if(typeof callback !== 'function') {
|
||||
callback = function(){};
|
||||
}
|
||||
|
||||
this.install(pluginId, callback);
|
||||
|
||||
return module.exports;
|
||||
};
|
||||
|
||||
__proto.exec = function (deps, callback, argArr = []) {
|
||||
if(!Array.isArray(deps)) {
|
||||
deps = [deps];
|
||||
}
|
||||
if(typeof callback !== 'function') {
|
||||
return undefined;
|
||||
}
|
||||
var depsPromise = this.__getDepsPromise(deps);
|
||||
|
||||
var getArgArr = function () {
|
||||
if(argArr.length === 0) {
|
||||
deps.forEach(function (pluginId) {
|
||||
argArr.push(this.require(pluginId));
|
||||
}.bind(this));
|
||||
return argArr;
|
||||
}
|
||||
return argArr;
|
||||
}.bind(this);
|
||||
|
||||
if(depsPromise) {
|
||||
depsPromise.then(function(){
|
||||
callback.apply(this, getArgArr());
|
||||
});
|
||||
} else {
|
||||
callback.apply(this, getArgArr())
|
||||
}
|
||||
};
|
||||
|
||||
__proto.__exec = function (pluginId, callback, argArr = []) {
|
||||
|
||||
var module = this.plugins[pluginId];
|
||||
|
||||
var exec = function(_callback, argArr){
|
||||
if(module.skipLoadPromise) {
|
||||
_callback.apply(this, argArr);
|
||||
} else {
|
||||
module.promise = module.promise.then(function(){
|
||||
_callback.apply(this, argArr);
|
||||
}.bind(this));
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
exec(callback, argArr);
|
||||
};
|
||||
|
||||
__proto.__getDepsPromise = function (pluginList) {
|
||||
var skipPromise = true;
|
||||
var promise = new Promise((resolve, reject)=>{
|
||||
var i = 0;
|
||||
var checkModule = function(){
|
||||
if(++i === pluginList.length + 1) {
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
checkModule();
|
||||
pluginList.forEach(function(pluginId, i, array){
|
||||
if(!this.__checkState(pluginId, stateList.registered)) {
|
||||
checkModule();
|
||||
return false;
|
||||
}
|
||||
this.install(pluginId, checkModule);
|
||||
skipPromise = skipPromise && this.plugins[pluginId].skipLoadPromise;
|
||||
}.bind(this));
|
||||
});
|
||||
|
||||
return !skipPromise?promise:undefined;
|
||||
};
|
||||
|
||||
|
||||
__proto.__getPlugin = function (pluginId) {
|
||||
if(this.plugins.hasOwnProperty(pluginId)) {
|
||||
return this.plugins[pluginId];
|
||||
}
|
||||
for (var _pluginId in this.plugins) {
|
||||
if(this.plugins.hasOwnProperty(_pluginId) && this.plugins[_pluginId].config.alias.indexOf(pluginId) !== -1) {
|
||||
return this.plugins[_pluginId];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
var manager = new PluginManager(global);
|
||||
manager.register('PluginManager', {
|
||||
alias: 'pm',
|
||||
type: moduleTypeList.loader,
|
||||
loader: function(module, exports, require) {
|
||||
return module.exports = manager;
|
||||
}
|
||||
});
|
||||
manager.install('PluginManager');
|
||||
global.PluginManager = manager;
|
||||
global.exec = manager.exec.bind(manager);
|
||||
global.require = manager.require.bind(manager);
|
||||
})(kit || window);
|
||||
@@ -0,0 +1,133 @@
|
||||
kit.PluginManager.registerPlugins({
|
||||
menu: {
|
||||
path: '/local/templates.dev/kit/assets/menu',
|
||||
module: '/menu.js',
|
||||
css: [
|
||||
'/menu.css'
|
||||
],
|
||||
type: 'loader',
|
||||
deps: ['lib', 'align', 'utils']
|
||||
},
|
||||
lib: {
|
||||
path: '/local/templates.dev/kit/assets/lib',
|
||||
module: '/lib.js',
|
||||
type: 'loader',
|
||||
},
|
||||
align: {
|
||||
path: '/local/templates.dev/kit/assets/align',
|
||||
module: '/align.js',
|
||||
type: 'loader',
|
||||
},
|
||||
utils: {
|
||||
path: '/local/templates.dev/kit/assets/utils',
|
||||
module: '/utils.js',
|
||||
type: 'loader',
|
||||
},
|
||||
jquery: {
|
||||
path: '/local/templates.dev/kit/assets/jquery',
|
||||
module: '/jquery.min.js',
|
||||
type: 'loader',
|
||||
alias: '$',
|
||||
},
|
||||
tooltip: {
|
||||
path: '/local/templates.dev/kit/assets/tooltip',
|
||||
module: '/tooltip.js',
|
||||
type: 'loader',
|
||||
css: '/tooltip.css',
|
||||
onInstall: function(){
|
||||
kit.$('[data-toggle="tooltip"]').tooltip();
|
||||
},
|
||||
deps: ['popper', 'bsCore'],
|
||||
},
|
||||
popper: {
|
||||
path: '/local/templates.dev/kit/assets/popper',
|
||||
alias: 'popper.js',
|
||||
module: '/popper.js',
|
||||
type: 'loader',
|
||||
},
|
||||
bsCore: {
|
||||
path: '/local/templates.dev/kit/assets/bsCore',
|
||||
module: '/bsCore.js',
|
||||
type: 'loader',
|
||||
css: [
|
||||
'/bsCore.css'
|
||||
]
|
||||
},
|
||||
mask: {
|
||||
path: '/local/templates.dev/kit/assets/mask',
|
||||
module: '/mask.js',
|
||||
type: 'loader',
|
||||
deps: ['jquery'],
|
||||
},
|
||||
toolkit: {
|
||||
path: '/local/templates.dev/kit/assets/toolkit',
|
||||
module: '/toolkit.js',
|
||||
type: 'loader',
|
||||
css: ['/toolkit.css'],
|
||||
deps: ['jquery', 'mask'],
|
||||
},
|
||||
modal: {
|
||||
path: '/local/templates.dev/kit/assets/modal',
|
||||
module: '/modal.js',
|
||||
type: 'loader',
|
||||
css: [
|
||||
'/modal.css',
|
||||
],
|
||||
deps: ['bsCore'],
|
||||
onRegister: function (plugin) {
|
||||
plugin.onLoadConditionHandler = function (event) {
|
||||
console.log('1',event);
|
||||
if(event.target && event.target.dataset && event.target.dataset.bsTarget && event.target.dataset.bsToggle === 'modal') {
|
||||
console.log('2');
|
||||
kit.exec(plugin.id, function(){
|
||||
var newEvent = new Event("click");
|
||||
event.target.dispatchEvent(newEvent);
|
||||
});
|
||||
}
|
||||
};
|
||||
window.addEventListener('click', plugin.onLoadConditionHandler, false);
|
||||
},
|
||||
onInstall: function (plugin) {
|
||||
if(plugin.onLoadConditionHandler) {
|
||||
window.removeEventListener('click', plugin.onLoadConditionHandler, false);
|
||||
}
|
||||
},
|
||||
},
|
||||
collapse: {
|
||||
path: '/local/templates.dev/kit/assets/collapse',
|
||||
module: '/collapse.js',
|
||||
type: 'loader',
|
||||
css: [
|
||||
'/collapse.css',
|
||||
],
|
||||
deps: ['bsCore'],
|
||||
onRegister: function (plugin) {
|
||||
kit.PluginManager.install('collapse')
|
||||
},
|
||||
onInstall: function (plugin) {
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
kit.exec([], function () {
|
||||
console.log('start init');
|
||||
|
||||
function _init(){
|
||||
console.log('_init');
|
||||
kit.PluginManager.install('jquery');
|
||||
kit.PluginManager.install('toolkit');
|
||||
kit.PluginManager.install('tooltip');
|
||||
kit.PluginManager.install('bsCore');
|
||||
}
|
||||
|
||||
if (/complete|interactive|loaded/.test(document.readyState)) {
|
||||
// In case the document has finished parsing, document's readyState will
|
||||
// be one of "complete", "interactive" or (non-standard) "loaded".
|
||||
_init();
|
||||
} else {
|
||||
// The document is not ready yet, so wait for the DOMContentLoaded event
|
||||
document.addEventListener("DOMContentLoaded", _init);
|
||||
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,936 @@
|
||||
/* flex-kit.css */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:root {
|
||||
--flex-padding: 15px 15px;
|
||||
--gap: 10px;
|
||||
--gap-section: 30px;
|
||||
--gap-wrapper: 30px;
|
||||
--col-count: 4;
|
||||
--line-clamp: 3;
|
||||
--line-clamp-height: 1.3em;
|
||||
--width-wrapper: 800px;
|
||||
--flex-aspect-ratio: 1;
|
||||
--flex-line-count: 1;
|
||||
--flex-col-count: 2;
|
||||
--aspect-ratio: 1;
|
||||
--font-ratio-height: 0.9;
|
||||
--font-ratio-bottom: 0.1;
|
||||
}
|
||||
.kit-wrapper {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: var(--width-wrapper);
|
||||
max-width: 100%;
|
||||
padding: 0 var(--gap-wrapper);
|
||||
}
|
||||
|
||||
.kit-sections {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-top: var(--gap-section);
|
||||
}
|
||||
.kit-section {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: var(--gap-section);
|
||||
}
|
||||
.col-count:not(.slick-slider) {
|
||||
position: relative;
|
||||
margin-left: calc(var(--gap) / -2) !important;
|
||||
margin-right: calc(var(--gap) / -2) !important;
|
||||
}
|
||||
.col-count:not(.slick-slider) > * {
|
||||
width: calc(100% / var(--col-count)) !important;
|
||||
max-width: calc(100% / var(--col-count)) !important;
|
||||
flex-basis: calc(100% / var(--col-count)) !important;
|
||||
padding-left: calc(var(--gap) / 2);
|
||||
padding-right: calc(var(--gap) / 2);
|
||||
padding-bottom: var(--gap);
|
||||
}
|
||||
|
||||
.kit-line-clamp {
|
||||
line-height: var(--line-clamp-height);
|
||||
max-height: calc(var(--line-clamp-height) * var(--line-clamp));
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: var(--line-clamp);
|
||||
display: -webkit-box;
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.flex-list {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flex-list:not(.owl-loaded) {
|
||||
margin-left: calc(var(--gap) / -2) !important;
|
||||
margin-right: calc(var(--gap) / -2) !important;
|
||||
}
|
||||
|
||||
.flex-list:before,
|
||||
.flex-list:after {
|
||||
content: '';
|
||||
}
|
||||
.flex-list:not(.owl-loaded) > * {
|
||||
position: relative;
|
||||
padding-left: calc(var(--gap) / 2);
|
||||
padding-right: calc(var(--gap) / 2);
|
||||
}
|
||||
.flex-list > .flex-list-item {
|
||||
--col-width: calc((100%) / var(--col-count));
|
||||
width: var(--col-width) !important;
|
||||
max-width: var(--col-width) !important;
|
||||
flex-basis: var(--col-width) !important;
|
||||
margin-bottom: var(--gap);
|
||||
}
|
||||
.flex-list-item:before,
|
||||
.flex-list-item:after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.flex-list-item-delimiter {
|
||||
height: 0;
|
||||
width: 0;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
script, style {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flex-line > *,
|
||||
.flex-col > *,
|
||||
.flex-line-wrap > *,
|
||||
.flex-col-wrap > *,
|
||||
.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child
|
||||
{
|
||||
padding: var(--flex-padding);
|
||||
}
|
||||
|
||||
.flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child,
|
||||
.flex-list-item.aspect-ratio > :first-child
|
||||
{
|
||||
padding: 0 calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
/* деф настрйоки для ячейки */
|
||||
.flex-line > *,
|
||||
.flex-line-wrap > *,
|
||||
.flex-col > *,
|
||||
.flex-col-wrap > *,
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
|
||||
{
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
-ms-flex-preferred-size: auto;
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.flex-line > .flex-line,
|
||||
.flex-line > .flex-col,
|
||||
.flex-line > .flex-col-wrap,
|
||||
.flex-line > .flex-line-wrap,
|
||||
|
||||
.flex-col > .flex-line,
|
||||
.flex-col > .flex-col,
|
||||
.flex-col > .flex-col-wrap,
|
||||
.flex-col > .flex-line-wrap,
|
||||
|
||||
.flex-line-wrap > .flex-line,
|
||||
.flex-line-wrap > .flex-col,
|
||||
.flex-line-wrap > .flex-col-wrap,
|
||||
.flex-line-wrap > .flex-line-wrap,
|
||||
|
||||
.flex-col-wrap > .flex-line,
|
||||
.flex-col-wrap > .flex-col,
|
||||
.flex-col-wrap > .flex-col-wrap,
|
||||
.flex-col-wrap > .flex-line-wrap
|
||||
{
|
||||
-ms-flex-preferred-size: 0;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
/*.flex-line > .flex-line,*/
|
||||
/*.flex-line > .flex-col,*/
|
||||
/*.flex-line > .flex-col-wrap,*/
|
||||
.flex-line > .flex-line-wrap:not(.flex-cell-full-content),
|
||||
|
||||
.flex-col > .flex-line:not(.flex-cell-full-content),
|
||||
.flex-col > .flex-col:not(.flex-cell-full-content),
|
||||
/*.flex-col > .flex-col-wrap,*/
|
||||
.flex-col > .flex-line-wrap:not(.flex-cell-full-content),
|
||||
|
||||
.flex-line-wrap > .flex-line:not(.flex-cell-full-content),
|
||||
/*.flex-line-wrap > .flex-col,*/
|
||||
/*.flex-line-wrap > .flex-col-wrap,*/
|
||||
.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content),
|
||||
|
||||
.flex-col-wrap > .flex-line:not(.flex-cell-full-content),
|
||||
/*.flex-col-wrap > .flex-col,*/
|
||||
/*.flex-col-wrap > .flex-col-wrap,*/
|
||||
.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content)
|
||||
{
|
||||
-ms-flex-preferred-size: auto;
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flex-col > *,
|
||||
.flex-col-wrap > *,
|
||||
.flex-line > *,
|
||||
.flex-line-wrap > *,
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
|
||||
{
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child)
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty {
|
||||
/*display: none !important;*/
|
||||
}
|
||||
|
||||
|
||||
.flex-col,
|
||||
.flex-col-wrap,
|
||||
.flex-line,
|
||||
.flex-line-wrap
|
||||
{
|
||||
/*width: 100%;*/
|
||||
padding: 0 !important;
|
||||
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.flex-col, .flex-col-wrap {
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
-ms-flex-preferred-size: auto;
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.flex-col, .flex-col-wrap {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-line, .flex-line-wrap {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
/* flex-wrap: nowrap */
|
||||
.flex-col,
|
||||
.flex-line {
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.flex-line-wrap, .flex-col-wrap
|
||||
{
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-cell
|
||||
{
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
/*-webkit-flex-direction: column;*/
|
||||
/*-ms-flex-direction: column;*/
|
||||
/*flex-direction: column;*/
|
||||
/*-webkit-flex-wrap: nowrap;*/
|
||||
/*-ms-flex-wrap: nowrap;*/
|
||||
/*flex-wrap: nowrap;*/
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
-ms-flex-preferred-size: auto;
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
}
|
||||
.flex-col.flex-cell,
|
||||
.flex-col-wrap.flex-cell,
|
||||
.flex-line.flex-cell,
|
||||
.flex-line-wrap.flex-cell
|
||||
{
|
||||
padding: var(--flex-padding) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.flex-direction-column {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-direction-row {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */
|
||||
.flex-align-start {
|
||||
-webkit-justify-content: flex-start !important;
|
||||
-ms-flex-pack: start !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.flex-align-end {
|
||||
-webkit-justify-content: flex-end !important;
|
||||
-ms-flex-pack: end !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
.flex-align-center {
|
||||
-webkit-justify-content: center !important;
|
||||
-ms-flex-pack: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.flex-align-around {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/* попереное */
|
||||
.flex-align--stretch {
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flex-align--center {
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* применяем к ячейкам: поперечное выравнивание */
|
||||
.flex-cell-align--start {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.flex-cell-align--end {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.flex-cell-align--center {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
.flex-cell-align--stretch {
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
|
||||
.flex-wrap
|
||||
{
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* применяем к ячейке определяя макс возможное заполнение*/
|
||||
.flex-cell-full-content {
|
||||
-ms-flex-positive: 1;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-cell-fill {
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
-ms-flex-positive: 1;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.flex-box-fill > * {
|
||||
-ms-flex-negative: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
-ms-flex-positive: 1;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
|
||||
.flex-col-count {
|
||||
|
||||
}
|
||||
|
||||
@supports (--flex-col-count:property) {
|
||||
.flex-col-count > * {
|
||||
width: calc(100% / (var(--flex-col-count)));
|
||||
max-width: calc(100% / (var(--flex-col-count)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flex-line-wrap.flex-col-count > *,
|
||||
.flex-line.flex-col-count > *
|
||||
{
|
||||
-ms-flex-preferred-size: calc(100% / var(--flex-col-count));
|
||||
-webkit-flex-basis: calc(100% / var(--flex-col-count));
|
||||
flex-basis: calc(100% / var(--flex-col-count));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-col-count.flex-col-without-frame {
|
||||
|
||||
}
|
||||
|
||||
.flex-line-count {
|
||||
|
||||
}
|
||||
@supports (--flex-line-count:property) {
|
||||
.flex-col-wrap.flex-line-count > *,
|
||||
.flex-col.flex-line-count > *
|
||||
{
|
||||
-ms-flex-preferred-size: calc(100% / (var(--flex-line-count)));
|
||||
-webkit-flex-basis: calc(100% / (var(--flex-line-count)));
|
||||
flex-basis: calc(100% / (var(--flex-line-count)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-cell-aspect-auto {
|
||||
flex-grow: 1000;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
@supports (--flex-aspect-ratio:property) {
|
||||
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img
|
||||
{
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto),
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)
|
||||
{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before,
|
||||
.flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
|
||||
{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
|
||||
}
|
||||
|
||||
.flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before
|
||||
{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: calc((100% - var(--gap)) / (var(--flex-aspect-ratio)));
|
||||
}
|
||||
|
||||
.flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
|
||||
{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
|
||||
}
|
||||
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture,
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img,
|
||||
.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* --aspect-ratio */
|
||||
|
||||
@supports (--aspect-ratio:0) {
|
||||
|
||||
.aspect-ratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.aspect-ratio > img {
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.aspect-ratio::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: calc(100% / (var(--aspect-ratio)));
|
||||
}
|
||||
.aspect-ratio > :first-child {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* flex-marginator */
|
||||
|
||||
|
||||
:root {
|
||||
--flex-marginator: 15px;
|
||||
--flex-marginator-index: 0;
|
||||
}
|
||||
|
||||
.flex-marginator {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--flex-marginator);
|
||||
}
|
||||
|
||||
.flex-marginator > *:empty {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
/* flex-delimiter text */
|
||||
|
||||
:root {
|
||||
--flex-delimiter: ', ';
|
||||
--flex-delimiter-index: 0;
|
||||
}
|
||||
|
||||
.flex-delimiter > *:not(:first-child):not(:empty)::before {
|
||||
content: var(--flex-delimiter);
|
||||
--flex-delimiter-index:1;
|
||||
}
|
||||
|
||||
.flex-delimiter > *:empty + *:not(:empty)::before
|
||||
{
|
||||
content: '';
|
||||
--flex-delimiter-index:0;
|
||||
}
|
||||
|
||||
.flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before
|
||||
{
|
||||
content: var(--flex-delimiter);
|
||||
--flex-delimiter-index:1;
|
||||
}
|
||||
|
||||
.flex-delimiter > *:empty {
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* flex-card */
|
||||
|
||||
.flex-card {
|
||||
--aspect-ratio: calc(200 / 300);
|
||||
--gap-inner: 10px;
|
||||
}
|
||||
.flex-card:hover .flex-card__content {
|
||||
box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.flex-card__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e9e9e9;
|
||||
/*border-radius: 3px;*/
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
background-color: var(--kit-color-content);
|
||||
/*padding-bottom: calc(var(--gap-inner) / 2);*/
|
||||
/*padding-top: calc(var(--gap-inner) / 2);*/
|
||||
}
|
||||
.flex-card__content:after,
|
||||
.flex-card__body:before,
|
||||
.flex-card__body:after {
|
||||
content: '';
|
||||
display: block;
|
||||
flex-basis: calc(var(--gap-inner) / 2);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flex-card__content > *:empty {
|
||||
display: none;
|
||||
}
|
||||
.flex-card__header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.flex-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
.flex-card__body > *, .flex-card__hover > * {
|
||||
margin: calc(var(--gap-inner) / 2) var(--gap-inner);
|
||||
}
|
||||
.flex-card__body > *:empty, .flex-card__hover > *:empty {
|
||||
display: none;
|
||||
}
|
||||
.flex-card__footer {
|
||||
position: relative;
|
||||
}
|
||||
.flex-card__hover {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.flex-card:hover .flex-card__content {
|
||||
height: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
.flex-card:hover .flex-card__content > .flex-card__hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
margin-top: calc(-1 * var(--gap-inner) / 2);
|
||||
}
|
||||
|
||||
.flex-card__picture {
|
||||
flex-basis: 50%;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
height: 0%;
|
||||
--aspect-ratio: 1;
|
||||
}
|
||||
.flex-card__picture.aspect-ratio {
|
||||
--aspect-ratio: 1;
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.flex-card__picture .kit-picture {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-origin: content-box;
|
||||
}
|
||||
.flex-card__name, .flex-card__title {
|
||||
--line-clamp: 2;
|
||||
--line-clamp-height: 1.1em;
|
||||
/*flex-shrink: 0;*/
|
||||
}
|
||||
.flex-card__props {
|
||||
position: relative;
|
||||
}
|
||||
.flex-card__text {
|
||||
position: relative;
|
||||
}
|
||||
.flex-card__manager {
|
||||
position: relative;
|
||||
}
|
||||
.flex-card__flex-delimiter {
|
||||
flex: 1 10 0;
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
.flex-card__ticket {
|
||||
position: absolute;
|
||||
top: var(--gap-inner);
|
||||
left: var(--gap-inner);
|
||||
}
|
||||
/* flex-card-list--list */
|
||||
|
||||
.flex-card-list--list {
|
||||
--col-count: 1;
|
||||
}
|
||||
|
||||
.flex-card-list--list .flex-card.aspect-ratio:before {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.flex-card-list--list .flex-card.aspect-ratio:before {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.flex-card-list--list .flex-card.aspect-ratio > .flex-card__section {
|
||||
position: relative;
|
||||
}
|
||||
.flex-card-list--list .flex-card__body-shell.aspect-ratio:before {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
.flex-card-list--list .flex-card__body {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-card-list--list .flex-card__body > .flex-card__picture {
|
||||
flex-basis: 12%;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.flex-card-list--list .flex-card__body > .flex-card__picture {
|
||||
flex-basis: 50px;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.flex-card-list--list .flex-card__body > .flex-card__picture:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: calc(100% / (var(--aspect-ratio)));
|
||||
}
|
||||
.flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ticket */
|
||||
|
||||
.flex-list--ticket {
|
||||
--col-count: 1;
|
||||
--gap: 3px;
|
||||
--line-clamp: 1;
|
||||
--line-clamp-height: 1em;
|
||||
font-size: 0.7em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.flex-list--ticket > .flex-list-item {
|
||||
--col-width: auto;
|
||||
}
|
||||
.ticket-item {
|
||||
padding: calc(2 * 0.1em) calc(6 * 0.1em);
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
}
|
||||
|
||||
|
||||
/* picture - icon */
|
||||
|
||||
.kit-picture-line, .kit-icon-line {
|
||||
display: inline-block;
|
||||
margin-bottom: calc(-1em * var(--font-ratio-bottom, 0.2));
|
||||
}
|
||||
.kit-picture-line svg,
|
||||
.kit-picture-line picture,
|
||||
.kit-picture-line img,
|
||||
.kit-icon-line svg,
|
||||
.kit-icon-line picture,
|
||||
.kit-icon-line img {
|
||||
height: calc(1em * var(--font-ratio-height, 1));
|
||||
width: auto;
|
||||
vertical-align: baseline;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: inherit;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
|
||||
.kit-icon picture,
|
||||
.kit-icon img,
|
||||
.kit-icon svg,
|
||||
.kit-picture picture,
|
||||
.kit-picture img,
|
||||
.kit-picture svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: inherit;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* flex-kit.css end */
|
||||
Vendored
+10888
File diff suppressed because it is too large
Load Diff
Vendored
+8
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
|
||||
kit.PluginManager.register('lib',function() {
|
||||
|
||||
this.icon = {
|
||||
options: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><g><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g></svg>',
|
||||
arrowMenu: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>',
|
||||
};
|
||||
|
||||
return this;
|
||||
});
|
||||
@@ -0,0 +1,516 @@
|
||||
kit.PluginManager.register('mask', function(module, exports, require){
|
||||
|
||||
var $ = require('jquery');
|
||||
|
||||
var ua = navigator.userAgent,
|
||||
iPhone = /iphone/i.test(ua),
|
||||
chrome = /chrome/i.test(ua),
|
||||
android = /android/i.test(ua),
|
||||
caretTimeoutId;
|
||||
|
||||
$.mask = {
|
||||
//Predefined character definitions
|
||||
definitions: {
|
||||
'9': "[0-9]",
|
||||
'a': "[A-Za-z]",
|
||||
'*': "[A-Za-z0-9]"
|
||||
},
|
||||
autoclear: false,
|
||||
dataName: "rawMaskFn",
|
||||
placeholder: '_'
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
//Helper Function for Caret positioning
|
||||
caret: function(begin, end) {
|
||||
var range;
|
||||
|
||||
if (this.length === 0 || this.is(":hidden") || this.get(0) !== document.activeElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof begin == 'number') {
|
||||
end = (typeof end === 'number') ? end : begin;
|
||||
return this.each(function() {
|
||||
if (this.setSelectionRange) {
|
||||
this.setSelectionRange(begin, end);
|
||||
} else if (this.createTextRange) {
|
||||
range = this.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', end);
|
||||
range.moveStart('character', begin);
|
||||
range.select();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this[0].setSelectionRange) {
|
||||
begin = this[0].selectionStart;
|
||||
end = this[0].selectionEnd;
|
||||
} else if (document.selection && document.selection.createRange) {
|
||||
range = document.selection.createRange();
|
||||
begin = 0 - range.duplicate().moveStart('character', -100000);
|
||||
end = begin + range.text.length;
|
||||
}
|
||||
return { begin: begin, end: end };
|
||||
}
|
||||
},
|
||||
unmask: function() {
|
||||
return this.trigger("unmask");
|
||||
},
|
||||
mask: function(mask, settings) {
|
||||
var input,
|
||||
defs,
|
||||
tests,
|
||||
partialPosition,
|
||||
firstNonMaskPos,
|
||||
lastRequiredNonMaskPos,
|
||||
len,
|
||||
oldVal,
|
||||
actualCaretID;
|
||||
|
||||
if (!mask && this.length > 0) {
|
||||
input = $(this[0]);
|
||||
var fn = input.data($.mask.dataName);
|
||||
return fn?fn():undefined;
|
||||
}
|
||||
|
||||
settings = $.extend({
|
||||
autoclear: $.mask.autoclear,
|
||||
placeholder: $.mask.placeholder, // Load default placeholder
|
||||
completed: null
|
||||
}, settings);
|
||||
|
||||
|
||||
defs = $.mask.definitions;
|
||||
tests = [];
|
||||
partialPosition = len = mask.length;
|
||||
firstNonMaskPos = null;
|
||||
|
||||
mask = String(mask);
|
||||
|
||||
$.each(mask.split(""), function(i, c) {
|
||||
if (c == '?') {
|
||||
len--;
|
||||
partialPosition = i;
|
||||
} else if (defs[c]) {
|
||||
tests.push(new RegExp(defs[c]));
|
||||
if (firstNonMaskPos === null) {
|
||||
firstNonMaskPos = tests.length - 1;
|
||||
}
|
||||
if(i < partialPosition){
|
||||
lastRequiredNonMaskPos = tests.length - 1;
|
||||
}
|
||||
} else {
|
||||
tests.push(null);
|
||||
}
|
||||
});
|
||||
|
||||
return this.trigger("unmask").each(function() {
|
||||
var input = $(this),
|
||||
buffer = $.map(
|
||||
mask.split(""),
|
||||
function(c, i) {
|
||||
if (c != '?') {
|
||||
return defs[c] ? getPlaceholder(i) : c;
|
||||
}
|
||||
}),
|
||||
defaultBuffer = buffer.join(''),
|
||||
isInput = input.get(0).tagName === 'INPUT',
|
||||
focusText = isInput?input.val():input.text();
|
||||
|
||||
function tryFireCompleted(){
|
||||
if (!settings.completed) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
|
||||
if (tests[i] && buffer[i] === getPlaceholder(i)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
settings.completed.call(input);
|
||||
}
|
||||
|
||||
function getPlaceholder(i){
|
||||
if(i < settings.placeholder.length) {
|
||||
return settings.placeholder.charAt(i);
|
||||
}
|
||||
return settings.placeholder.charAt(0);
|
||||
}
|
||||
|
||||
function seekNext(pos) {
|
||||
while (++pos < len && !tests[pos]);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function seekPrev(pos) {
|
||||
while (--pos >= 0 && !tests[pos]);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function shiftL(begin,end) {
|
||||
var i,
|
||||
j;
|
||||
|
||||
if (begin<0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = begin, j = seekNext(end); i < len; i++) {
|
||||
if (tests[i]) {
|
||||
if (j < len && tests[i].test(buffer[j])) {
|
||||
buffer[i] = buffer[j];
|
||||
buffer[j] = getPlaceholder(j);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
j = seekNext(j);
|
||||
}
|
||||
}
|
||||
writeBuffer();
|
||||
input.caret(Math.max(firstNonMaskPos, begin));
|
||||
}
|
||||
|
||||
function shiftR(pos) {
|
||||
var i,
|
||||
c,
|
||||
j,
|
||||
t;
|
||||
|
||||
for (i = pos, c = getPlaceholder(pos); i < len; i++) {
|
||||
if (tests[i]) {
|
||||
j = seekNext(i);
|
||||
t = buffer[i];
|
||||
buffer[i] = c;
|
||||
if (j < len && tests[j].test(t)) {
|
||||
c = t;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function androidInputEvent(e) {
|
||||
var curVal = input.val();
|
||||
var pos = input.caret();
|
||||
if (oldVal && oldVal.length && oldVal.length > curVal.length ) {
|
||||
// a deletion or backspace happened
|
||||
checkVal(true);
|
||||
while (pos.begin > 0 && !tests[pos.begin-1])
|
||||
pos.begin--;
|
||||
if (pos.begin === 0)
|
||||
{
|
||||
while (pos.begin < firstNonMaskPos && !tests[pos.begin])
|
||||
pos.begin++;
|
||||
}
|
||||
input.caret(pos.begin,pos.begin);
|
||||
} else {
|
||||
var pos2 = checkVal(true);
|
||||
var lastEnteredValue = curVal.charAt(pos.begin);
|
||||
if (pos.begin < len){
|
||||
if(!tests[pos.begin]){
|
||||
pos.begin++;
|
||||
if(tests[pos.begin].test(lastEnteredValue)){
|
||||
pos.begin++;
|
||||
}
|
||||
}else{
|
||||
if(tests[pos.begin].test(lastEnteredValue)){
|
||||
pos.begin++;
|
||||
}
|
||||
}
|
||||
}
|
||||
input.caret(pos.begin,pos.begin);
|
||||
}
|
||||
tryFireCompleted();
|
||||
}
|
||||
|
||||
|
||||
function blurEvent(e) {
|
||||
clearInterval(actualCaretID);
|
||||
checkVal();
|
||||
|
||||
if (input.val() != focusText)
|
||||
input.change();
|
||||
}
|
||||
|
||||
function keydownEvent(e) {
|
||||
if (input.prop("readonly")){
|
||||
return;
|
||||
}
|
||||
|
||||
var k = e.which || e.keyCode,
|
||||
pos,
|
||||
begin,
|
||||
end;
|
||||
oldVal = input.val();
|
||||
//backspace, delete, and escape get special treatment
|
||||
if (k === 8 || k === 46 || (iPhone && k === 127)) {
|
||||
pos = input.caret();
|
||||
begin = pos.begin;
|
||||
end = pos.end;
|
||||
|
||||
if (end - begin === 0) {
|
||||
begin=k!==46?seekPrev(begin):(end=seekNext(begin-1));
|
||||
end=k===46?seekNext(end):end;
|
||||
}
|
||||
clearBuffer(begin, end);
|
||||
shiftL(begin, end - 1);
|
||||
|
||||
e.preventDefault();
|
||||
} else if( k === 13 ) { // enter
|
||||
blurEvent.call(this, e);
|
||||
} else if (k === 27) { // escape
|
||||
input.val(focusText);
|
||||
input.caret(0, checkVal());
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function keypressEvent(e) {
|
||||
if (input.prop("readonly")){
|
||||
return;
|
||||
}
|
||||
|
||||
var k = e.which || e.keyCode,
|
||||
pos = input.caret(),
|
||||
p,
|
||||
c,
|
||||
next;
|
||||
|
||||
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
|
||||
return;
|
||||
} else if ( k && k !== 13 ) {
|
||||
if (pos.end - pos.begin !== 0){
|
||||
clearBuffer(pos.begin, pos.end);
|
||||
shiftL(pos.begin, pos.end-1);
|
||||
}
|
||||
|
||||
p = seekNext(pos.begin - 1);
|
||||
if (p < len) {
|
||||
c = String.fromCharCode(k);
|
||||
if (tests[p].test(c)) {
|
||||
shiftR(p);
|
||||
|
||||
buffer[p] = c;
|
||||
writeBuffer();
|
||||
next = seekNext(p);
|
||||
|
||||
if(android){
|
||||
//Path for CSP Violation on FireFox OS 1.1
|
||||
var proxy = function() {
|
||||
$.proxy($.fn.caret,input,next)();
|
||||
};
|
||||
|
||||
setTimeout(proxy,0);
|
||||
}else{
|
||||
input.caret(next);
|
||||
}
|
||||
if(pos.begin <= lastRequiredNonMaskPos){
|
||||
tryFireCompleted();
|
||||
}
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function clearBuffer(start, end) {
|
||||
var i;
|
||||
for (i = start; i < end && i < len; i++) {
|
||||
if (tests[i]) {
|
||||
buffer[i] = getPlaceholder(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function writeBuffer() {
|
||||
if(isInput) {
|
||||
input.val(buffer.join(''));
|
||||
} else {
|
||||
input.text(buffer.join(''));
|
||||
}
|
||||
}
|
||||
|
||||
function isValid() {
|
||||
var i;
|
||||
var wordLength = 0;
|
||||
for (i = 0; i < tests.length; i++) {
|
||||
if (tests[i]) {
|
||||
wordLength++;
|
||||
}
|
||||
}
|
||||
return (wordLength === getRaw().length);
|
||||
}
|
||||
|
||||
|
||||
function checkVal(allow) {
|
||||
//try to place characters where they belong
|
||||
var test = '',
|
||||
lastMatch = -1,
|
||||
i,
|
||||
c,
|
||||
pos;
|
||||
if(isInput) {
|
||||
test = input.val();
|
||||
} else {
|
||||
test = input.text();
|
||||
}
|
||||
|
||||
for (i = 0, pos = 0; i < len; i++) {
|
||||
if (tests[i]) {
|
||||
buffer[i] = getPlaceholder(i);
|
||||
while (pos++ < test.length) {
|
||||
c = test.charAt(pos - 1);
|
||||
if (tests[i].test(c)) {
|
||||
buffer[i] = c;
|
||||
lastMatch = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pos > test.length) {
|
||||
clearBuffer(i + 1, len);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (buffer[i] === test.charAt(pos)) {
|
||||
pos++;
|
||||
}
|
||||
if( i < partialPosition){
|
||||
lastMatch = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (allow) {
|
||||
writeBuffer();
|
||||
} else if (lastMatch + 1 < partialPosition) {
|
||||
if (settings.autoclear || buffer.join('') === defaultBuffer) {
|
||||
// Invalid value. Remove it and replace it with the
|
||||
// mask, which is the default behavior.
|
||||
if(isInput) {
|
||||
if(input.val()) input.val("");
|
||||
} else {
|
||||
if(input.text()) input.text("");
|
||||
}
|
||||
clearBuffer(0, len);
|
||||
} else {
|
||||
// Invalid value, but we opt to show the value to the
|
||||
// user and allow them to correct their mistake.
|
||||
writeBuffer();
|
||||
}
|
||||
} else {
|
||||
writeBuffer();
|
||||
if(isInput) {
|
||||
input.val(input.val().substring(0, lastMatch + 1));
|
||||
} else {
|
||||
input.text(input.text().substring(0, lastMatch + 1));
|
||||
}
|
||||
}
|
||||
return (partialPosition ? i : firstNonMaskPos);
|
||||
}
|
||||
|
||||
function getRaw()
|
||||
{
|
||||
console.log('mask input.data($.mask.dataName)');
|
||||
return $.map(buffer, function(c, i) {
|
||||
return tests[i]&&c!=getPlaceholder(i) ? c : null;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
input.data($.mask.dataName,function(){
|
||||
return getRaw();
|
||||
});
|
||||
|
||||
input.data('maskCall', function(){
|
||||
|
||||
});
|
||||
input.data('isValidMask', function(){
|
||||
return isValid();
|
||||
});
|
||||
|
||||
function focusEvent () {
|
||||
if (input.prop("readonly")){
|
||||
return;
|
||||
}
|
||||
actualCaretID = setInterval(actualCaret, 100);
|
||||
clearTimeout(caretTimeoutId);
|
||||
var pos;
|
||||
|
||||
focusText = input.val();
|
||||
|
||||
pos = checkVal();
|
||||
|
||||
caretTimeoutId = setTimeout(function(){
|
||||
if(input.get(0) !== document.activeElement){
|
||||
return;
|
||||
}
|
||||
writeBuffer();
|
||||
if (pos == mask.replace("?","").length) {
|
||||
input.caret(0, pos);
|
||||
} else {
|
||||
input.caret(pos);
|
||||
}
|
||||
|
||||
}, 10);
|
||||
|
||||
}
|
||||
|
||||
function actualCaret(){
|
||||
var pos = checkVal(true),
|
||||
c = input.caret();
|
||||
if(
|
||||
c.begin === c.end &&
|
||||
c.begin > pos
|
||||
) {
|
||||
input.caret(pos);
|
||||
}
|
||||
}
|
||||
input
|
||||
.one("unmask", function() {
|
||||
// console.log('mask one unmask');
|
||||
input
|
||||
.off(".mask")
|
||||
.removeData($.mask.dataName);
|
||||
if(isInput) {
|
||||
input.removeData('maskCall');
|
||||
}
|
||||
});
|
||||
isInput && input
|
||||
.on("focus.mask", focusEvent)
|
||||
.on("blur.mask", blurEvent)
|
||||
.on("keydown.mask", keydownEvent)
|
||||
.on("keypress.mask", keypressEvent);
|
||||
input
|
||||
.on("input.mask paste.mask", function() {
|
||||
if (input.prop("readonly")){
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
var pos=checkVal(true);
|
||||
input.caret(pos);
|
||||
tryFireCompleted();
|
||||
}, 0);
|
||||
});
|
||||
isInput && input
|
||||
.on("keyup.mask", function() {
|
||||
if (input.prop("readonly")){
|
||||
return;
|
||||
}
|
||||
try {
|
||||
input.data('maskCall')();
|
||||
} catch {
|
||||
|
||||
}
|
||||
});
|
||||
if (chrome && android)
|
||||
{
|
||||
input.off('input.mask');
|
||||
isInput && input.on('input.mask', androidInputEvent);
|
||||
}
|
||||
checkVal(); //Perform initial check for existing values
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,171 @@
|
||||
|
||||
/* kit-menu */
|
||||
|
||||
:root {
|
||||
/*--kit-color-primary-w2: #67b2e4;*/
|
||||
/*--kit-color-primary-w1: #52a7e0;*/
|
||||
/*--kit-color-primary: #3c9cdd;*/
|
||||
/*--kit-color-primary-b1: #2691d9;*/
|
||||
/*--kit-color-primary-b2: #2283c3;*/
|
||||
|
||||
--kit-menu-border-width: 4px;
|
||||
--kit-menu-hover-label-size: calc(3 * 0.1em);
|
||||
--kit-color-menu-content: #212121fa;
|
||||
--kit-color-menu-item-content-hover: #ffffff1a;
|
||||
--kit-color-menu-content-text: #FFFFFF;
|
||||
--kit-color-menu-content-text-hover: var(--kit-color-primary-w2, #67b2e4);
|
||||
}
|
||||
|
||||
.kit-menu {
|
||||
/*border-radius: 5px;*/
|
||||
background: var(--kit-color-menu-content);
|
||||
display: none;
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="right"] {
|
||||
border-left: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
|
||||
box-shadow: 0 0 10px 0 #00000033, inset 5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="left"] {
|
||||
border-right: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
|
||||
box-shadow: 0 0 10px 0 #00000033, inset -5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
|
||||
}
|
||||
.kit-menu.active {
|
||||
display: block;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.kit-menu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;;
|
||||
min-width: calc(15 * 1em);
|
||||
}
|
||||
.kit-menu-item > *:not(.kit-menu) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.kit-menu-item:hover {
|
||||
background-color: var(--kit-color-menu-item-content-hover);
|
||||
}
|
||||
.kit-menu-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.kit-menu > * > .kit-menu {
|
||||
z-index: 20;
|
||||
}
|
||||
.kit-menu > .kit-menu-item:hover > .kit-menu {
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
.kit-menu-item__label {
|
||||
flex: 1 1 100%;
|
||||
order: 500;
|
||||
display: block;
|
||||
padding-top: .715em;
|
||||
padding-bottom: .715em;
|
||||
color: var(--kit-color-menu-content-text);
|
||||
position: relative;
|
||||
user-select: none
|
||||
}
|
||||
.kit-menu-item__icon {
|
||||
flex: 0 0 1.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
order: 100;
|
||||
color: var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c));
|
||||
}
|
||||
.kit-menu-item__icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.kit-menu-item__icon picture,
|
||||
.kit-menu-item__icon img,
|
||||
.kit-menu-item__icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: inherit;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
.kit-menu-item__label > a {
|
||||
color: var(--kit-color-menu-content-text);
|
||||
}
|
||||
.kit-menu-item__label:hover > a {
|
||||
color: var(--kit-color-menu-content-text-hover);
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="left"] .kit-menu-item:before,
|
||||
.kit-menu[data-kit-align-horizontal="right"] .kit-menu-item:before
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: var(--kit-menu-hover-label-size);
|
||||
height: calc(100% - 0.6em);
|
||||
background: var(--kit-color-primary, #3c9cdd);
|
||||
top: 0.3em;
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item:before {
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
.kit-menu .kit-menu-item:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.kit-menu-item__arrow {
|
||||
display: none;
|
||||
}
|
||||
.kit-menu-item__arrow:empty {
|
||||
display: none !important;
|
||||
}
|
||||
.kit-menu-item > .kit-menu ~ .kit-menu-item__arrow
|
||||
{
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
background: transparent;
|
||||
padding: calc(3 * .1em);
|
||||
display: block;
|
||||
flex: 0 0 1.5em;
|
||||
order: 1000;
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
|
||||
/*order: 10;*/
|
||||
/*transform: rotate(180deg);*/
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
|
||||
/*order: 990;*/
|
||||
}
|
||||
.kit-menu[data-kit-align-horizontal="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
|
||||
|
||||
}
|
||||
.kit-menu-item__arrow {
|
||||
color: var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c));
|
||||
}
|
||||
.kit-menu ~ .kit-menu-item__arrow picture,
|
||||
.kit-menu ~ .kit-menu-item__arrow img,
|
||||
.kit-menu ~ .kit-menu-item__arrow svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: inherit;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
/* kit-menu end*/
|
||||
@@ -0,0 +1,787 @@
|
||||
kit.PluginManager.register('menu',function(module, exports, require) {
|
||||
|
||||
var AlignModule = require('align');
|
||||
var libModule = require('lib');
|
||||
var utils = require('utils');
|
||||
|
||||
|
||||
var defaultMenuOptions = {
|
||||
parent: null,
|
||||
nodeProperty: 'kitMenu',
|
||||
class: 'kit-menu',
|
||||
eventType: 'hover',
|
||||
hideDelay: 200,
|
||||
offsetHorizontal: 0,
|
||||
offsetVertical: 0,
|
||||
click: (function (event, menu) {
|
||||
console.log('Menu click');
|
||||
}),
|
||||
hover: (function (event, menu) {
|
||||
console.log('Menu hover');
|
||||
}),
|
||||
dblclick: (function (event, menu) {
|
||||
console.log('Menu dblclick');
|
||||
}),
|
||||
hide: (function () {
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
var MenuList = [];
|
||||
var MenuClass = (function () {
|
||||
|
||||
function Menu(options = {}, items = [])
|
||||
{
|
||||
//console.log('Menu: constructor');
|
||||
var _this = this;
|
||||
this.parentActionHandler = this.parentAction.bind(this);
|
||||
this.documentListenerHandler = this.documentListener.bind(this);
|
||||
this.nodeActionHandler = this.nodeAction.bind(this);
|
||||
|
||||
this.id = MenuList.length;
|
||||
MenuList[this.id] = this;
|
||||
|
||||
|
||||
this.itemList = {};
|
||||
this.align = new AlignModule.Class();
|
||||
this.node = null;
|
||||
this.bInit = false;
|
||||
this.deferredHideID = 0;
|
||||
this.bActive = false;
|
||||
this.options = defaultMenuOptions;
|
||||
this.createNode(); //с пула нужна базовая нода
|
||||
this.setOptions(options);
|
||||
this.addItemList(items);
|
||||
this.handleEvent = function(event) {
|
||||
// console.log('Menu handleEvent');
|
||||
// console.log(event.type);
|
||||
switch(event.type) {
|
||||
case 'click':
|
||||
this.options.click(event, _this);
|
||||
break;
|
||||
case 'mouseover':
|
||||
this.options.hover(event, _this);
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
Menu.prototype.getItemById = function(itemId) {
|
||||
if(this.itemList.hasOwnProperty(itemId)) {
|
||||
return this.itemList[itemId];
|
||||
}
|
||||
return false;
|
||||
};
|
||||
Menu.prototype.getNode = function () {
|
||||
if(this.node.innerHTML === '') {
|
||||
this.render();
|
||||
}
|
||||
return this.node;
|
||||
};
|
||||
Menu.prototype.getParent = function () {
|
||||
return this.options.parent;
|
||||
};
|
||||
Menu.prototype.createNode = function () {
|
||||
this.node = document.createElement('div');
|
||||
this.node.classList.add(this.options.class);
|
||||
this.node.style.display = 'none';
|
||||
this.node.setAttribute('data-menu-id', this.id);
|
||||
this.node[this.options.nodeProperty] = this;
|
||||
};
|
||||
Menu.prototype.showNode = function () {
|
||||
// console.log('Menu: showNode');
|
||||
this.deferredHideCancel();
|
||||
this.node.style.display = '';
|
||||
this.node.classList.add('active');
|
||||
this.options.parent.classList.add('active');
|
||||
this.calcStyle();
|
||||
this.bActive = true;
|
||||
document.addEventListener('click', this.documentListenerHandler, false);
|
||||
};
|
||||
Menu.prototype.hideNode = function () {
|
||||
// console.log('Menu: hideNode');
|
||||
this.hideNodeDeferred();
|
||||
};
|
||||
Menu.prototype.hideNodeDeferred = function () {
|
||||
this.deferredHideCancel();
|
||||
this.deferredHideID = setTimeout(this.hideNodeNow.bind(this), this.options.hideDelay);
|
||||
// console.log('hideNodeDeferred ' + this.deferredHideID);
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {Menu}
|
||||
*/
|
||||
Menu.prototype.deferredHideCancel = function () {
|
||||
if(this.deferredHideID) {
|
||||
clearTimeout(this.deferredHideID);
|
||||
this.deferredHideID = 0;
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {Menu}
|
||||
*/
|
||||
Menu.prototype.hideNodeNow = function () {
|
||||
// console.log('Menu: hideNodeNow');
|
||||
this.deferredHideCancel();
|
||||
this.node.style.display = 'none';
|
||||
this.node.classList.remove('active');
|
||||
this.options.parent.classList.remove('active');
|
||||
this.bActive = false;
|
||||
document.removeEventListener('click', this.documentListenerHandler, false);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns {Menu}
|
||||
*/
|
||||
Menu.prototype.hide = function () {
|
||||
this.hideNodeNow();
|
||||
var tmp = this;
|
||||
while(tmp instanceof MenuClass) {
|
||||
tmp = tmp.hideNodeNow().getParentMenu();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
Menu.prototype.calcStyle = function () {
|
||||
if(!(this.options.parent instanceof Element)) {
|
||||
console.warn('Menu.options.parent NOT instanceof Element');
|
||||
return false;
|
||||
}
|
||||
|
||||
this.node.style.position = 'absolute';
|
||||
this.node.style.width = 'fit-content';
|
||||
|
||||
//var parentNode = this.getParentMenuNode() || this.getParent();
|
||||
var parentNode = this.getParent();
|
||||
|
||||
var right = true;
|
||||
var parentMenu = this.getParentMenu();
|
||||
if(parentMenu && parentMenu instanceof Menu) {
|
||||
right = !parentMenu.align.left.valid;
|
||||
}
|
||||
|
||||
this.align.offsetHorizontal = this.options.offsetHorizontal;
|
||||
this.align.offsetVertical = this.options.offsetVertical;
|
||||
this.align
|
||||
.setNode(this.node)
|
||||
.setParentNode(parentNode)
|
||||
.setHorizontal(right, false)
|
||||
.setVertical(false, true);
|
||||
|
||||
// this.node.setAttribute('data-kit-menu-align-horizontal', horMode);
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {Menu} | null
|
||||
*/
|
||||
Menu.prototype.getParentMenu = function() {
|
||||
if(
|
||||
this.getParent() && (this.getParent() instanceof Element) &&
|
||||
this.getParent().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass) &&
|
||||
this.getParent().kitMenuItem.getMenu() && (this.getParent().kitMenuItem.getMenu() instanceof Menu)
|
||||
) {
|
||||
return this.getParent().kitMenuItem.getMenu();
|
||||
}
|
||||
return null;
|
||||
};
|
||||
Menu.prototype.getParentMenuNode = function() {
|
||||
var parentMenu = this.getParentMenu(),
|
||||
parentMenuNode;
|
||||
if(parentMenu) {
|
||||
parentMenuNode = parentMenu.getNode();
|
||||
}
|
||||
return parentMenuNode;
|
||||
};
|
||||
|
||||
Menu.prototype.addItem = function (options = {}, returnItem = false) {
|
||||
var listIndex;
|
||||
if(options instanceof MenuItemClass) {
|
||||
options.parentId = this.id;
|
||||
listIndex = options.options.id;
|
||||
this.itemList[listIndex] = options;
|
||||
} else if(options instanceof Object){
|
||||
if(!options.id) {
|
||||
options.id = this.uniqueId(8);
|
||||
}
|
||||
listIndex = options.id;
|
||||
this.itemList[listIndex] = (new this.MenuItem(this.id)).setOptions(options).init();
|
||||
}
|
||||
if(returnItem) {
|
||||
return this.itemList[listIndex];
|
||||
}
|
||||
return this;
|
||||
};
|
||||
Menu.prototype.addItemList = function(itemList = []){
|
||||
itemList.forEach((function(element, index, array){
|
||||
this.addItem(element);
|
||||
}).bind(this));
|
||||
return this;
|
||||
};
|
||||
Menu.prototype.sortItems = function() {
|
||||
this.itemList = Object.entries(this.itemList)
|
||||
.sort(function(a, b){
|
||||
return a[1].options.sort - b[1].options.sort;
|
||||
})
|
||||
.reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
|
||||
};
|
||||
Menu.prototype.render = function() {
|
||||
//console.log('Menu: render');
|
||||
this.sortItems();
|
||||
this.node.innerHTML = '';
|
||||
for (var i in this.itemList) {
|
||||
if(this.itemList.hasOwnProperty(i)) {
|
||||
this.node.append(this.itemList[i].getNode());
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
Menu.prototype.uniqueId = function (idStrLen = 32) {
|
||||
var idStr = '';
|
||||
idStrLen && (idStr = (Math.floor((Math.random() * 25)) + 10).toString(36));
|
||||
do {
|
||||
idStr += (Math.floor((Math.random() * 35))).toString(36);
|
||||
} while (idStr.length < idStrLen);
|
||||
return (idStr);
|
||||
};
|
||||
|
||||
Menu.prototype.setParent = function(parentNode) {
|
||||
// console.log('Menu: setParent ' + parentNode);
|
||||
|
||||
if(typeof parentNode === 'string') {
|
||||
parentNode = document.querySelector(parentNode);
|
||||
}
|
||||
|
||||
if(!(parentNode instanceof Element)) {
|
||||
//console.warn('Menu.setParent: Не удалось получить parent. ' + parentNode);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.removeParentEventListener();
|
||||
|
||||
this.options.parent = parentNode;
|
||||
|
||||
if(this.bInit) {
|
||||
this.reInit();
|
||||
}
|
||||
};
|
||||
Menu.prototype.setEventType = function(type = 'hover') {
|
||||
|
||||
this.options.eventType = type;
|
||||
|
||||
if(this.bInit) {
|
||||
this.reInit();
|
||||
}
|
||||
};
|
||||
Menu.prototype.removeParentEventListener = function() {
|
||||
// console.log('Menu: removeParentEventListener');
|
||||
if(this.options.parent instanceof Element) {
|
||||
this.options.parent.classList.remove('active');
|
||||
this.options.parent.removeEventListener('click', this.parentActionHandler, false);
|
||||
this.options.parent.removeEventListener('mouseover', this.parentActionHandler, false);
|
||||
this.options.parent.removeEventListener('mouseout', this.parentActionHandler, false);
|
||||
}
|
||||
};
|
||||
Menu.prototype.addParentEventListener = function() {
|
||||
if(this.options.parent instanceof Element) {
|
||||
if(this.options.eventType === 'hover') {
|
||||
this.options.parent.addEventListener('mouseover', this.parentActionHandler, false);
|
||||
this.options.parent.addEventListener('mouseout', this.parentActionHandler, false);
|
||||
}
|
||||
if(this.options.eventType === 'click') {
|
||||
this.options.parent.addEventListener(this.options.eventType, this.parentActionHandler, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
Menu.prototype.initNodeHandlers = function() {
|
||||
if(this.node) {
|
||||
this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
|
||||
this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
|
||||
}
|
||||
};
|
||||
Menu.prototype.toggleParent = function() {
|
||||
this.node.classList.toggle('active');
|
||||
return this.node.classList.contains('active');
|
||||
};
|
||||
Menu.prototype.insertToNode = function (parent) {
|
||||
if(!(parent instanceof Element)) {
|
||||
console.warn('Menu.insertToNode - node NOT instanceof Element');
|
||||
return false;
|
||||
}
|
||||
this.setParent(parent);
|
||||
this.options.parent.prepend(this.getNode());
|
||||
};
|
||||
Menu.prototype.init = function () {
|
||||
if(this.bInit === true) {
|
||||
return;
|
||||
}
|
||||
if(!this.options.parent instanceof Element) {
|
||||
console.warn('Menu.init: Не установлен parent');
|
||||
}
|
||||
this.setParent(this.options.parent);
|
||||
|
||||
this.render();
|
||||
this.options.parent.append(this.getNode());
|
||||
|
||||
this.addParentEventListener();
|
||||
this.initNodeHandlers();
|
||||
|
||||
//document.addEventListener('click', this.documentListenerHandler, false);
|
||||
|
||||
this.node.setAttribute('data-kit-menu-init', 1);
|
||||
this.bInit = true;
|
||||
|
||||
};
|
||||
Menu.prototype.reInit = function () {
|
||||
//console.log('Menu: reInit ' + this.id);
|
||||
if(this.bInit === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.removeParentEventListener();
|
||||
|
||||
document.removeEventListener('click', this.documentListenerHandler, false);
|
||||
|
||||
this.node.remove();
|
||||
|
||||
this.render();
|
||||
|
||||
this.options.parent.prepend(this.getNode());
|
||||
|
||||
if(this.bActive) {
|
||||
this.showNode();
|
||||
} else {
|
||||
this.hideNode();
|
||||
}
|
||||
|
||||
this.addParentEventListener();
|
||||
this.initNodeHandlers();
|
||||
|
||||
//document.addEventListener('click', this.documentListenerHandler, false);
|
||||
|
||||
};
|
||||
Menu.prototype.toggle = function() {
|
||||
if(this.toggleParent()) {
|
||||
this.showNode();
|
||||
} else {
|
||||
this.hideNode();
|
||||
}
|
||||
};
|
||||
Menu.prototype.parentAction = function (event) {
|
||||
event.stopPropagation();
|
||||
// event.stopImmediatePropagation();
|
||||
switch (event.type) {
|
||||
case 'mouseout':
|
||||
if (this.needHideByParent(event.relatedTarget)) {
|
||||
this.hideNode();
|
||||
}
|
||||
break;
|
||||
case 'mouseover':
|
||||
this.showNode();
|
||||
break;
|
||||
case 'click':
|
||||
this.toggle();
|
||||
break;
|
||||
}
|
||||
};
|
||||
Menu.prototype.nodeAction = function (event) {
|
||||
event.stopPropagation();
|
||||
// event.stopImmediatePropagation();
|
||||
switch (event.type) {
|
||||
case 'mouseout':
|
||||
break;
|
||||
case 'mouseover':
|
||||
break;
|
||||
case 'mouseleave':
|
||||
if(this.options.eventType === 'hover') {
|
||||
this.hideNode();
|
||||
}
|
||||
break;
|
||||
case 'mouseenter':
|
||||
this.deferredHideCancel();
|
||||
break;
|
||||
}
|
||||
};
|
||||
Menu.prototype.needHideByParent = function(target) {
|
||||
var its_menu = target === this.node || this.node.contains(target);
|
||||
var its_parent = target === this.options.parent;
|
||||
var is_active_parent = this.node.classList.contains('active');
|
||||
return !its_menu && !its_parent && is_active_parent;
|
||||
};
|
||||
Menu.prototype.documentListener = function(event) {
|
||||
// console.log('documentListener');
|
||||
// console.log(event);
|
||||
|
||||
if (this.needHideByParent(event.target)) {
|
||||
this.toggle();
|
||||
}
|
||||
};
|
||||
Menu.prototype.setOptions = function (options = {}) {
|
||||
this.options = Object.assign({}, this.options, options);
|
||||
this.setParent(this.options.parent);
|
||||
return this;
|
||||
};
|
||||
|
||||
var MenuItemClass = function () {
|
||||
|
||||
function MenuItem(parentId) {
|
||||
var _thisMenuItem = this;
|
||||
this.parentId = Number(parentId);
|
||||
this.node = Element;
|
||||
this.bInit = false;
|
||||
this.bActive = false;
|
||||
this.child = null;
|
||||
this.options = {
|
||||
id: '',
|
||||
icon: libModule.icon.options,
|
||||
arrow: libModule.icon.arrowMenu,
|
||||
label: 'menu',
|
||||
href: 'javascript:void(0);',
|
||||
class: 'kit-menu-item',
|
||||
sort: 500,
|
||||
visible: true,
|
||||
hover: this.defaultHoverHandler,
|
||||
click: this.defaultClickHandler,
|
||||
dblclick: this.defaultDblClickHandler,
|
||||
};
|
||||
|
||||
this.handleEvent = function(event) {
|
||||
event.stopPropagation();
|
||||
switch(event.type) {
|
||||
case 'mouseover':
|
||||
this.options.hover(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
|
||||
break;
|
||||
case 'click':
|
||||
this.options.click(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
|
||||
break;
|
||||
case 'dblclick':
|
||||
this.options.dblclick(event, _thisMenuItem, MenuList[_thisMenuItem.parentId]);
|
||||
break;
|
||||
}
|
||||
};
|
||||
this.createNode();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param event {MouseEvent}
|
||||
* @param menuItem {MenuItem}
|
||||
* @param menu {Menu}
|
||||
*/
|
||||
MenuItem.prototype.defaultHoverHandler = function (event, menuItem, menu) {
|
||||
console.log('hover: ' + menuItem.options.label);
|
||||
};
|
||||
/**
|
||||
* @param event {MouseEvent}
|
||||
* @param menuItem {MenuItem}
|
||||
* @param menu {Menu}
|
||||
*/
|
||||
MenuItem.prototype.defaultClickHandler = function (event, menuItem, menu) {
|
||||
console.log('click: ' + menuItem.options.label);
|
||||
menu.hide();
|
||||
};
|
||||
/**
|
||||
* @param event {MouseEvent}
|
||||
* @param menuItem {MenuItem}
|
||||
* @param menu {Menu}
|
||||
*/
|
||||
MenuItem.prototype.defaultDblClickHandler = function (event, menuItem, menu) {
|
||||
console.log('dblclick: ' + menuItem.options.label);
|
||||
};
|
||||
|
||||
MenuItem.prototype.getMenu = function () {
|
||||
return MenuList[this.parentId];
|
||||
};
|
||||
|
||||
MenuItem.prototype.getParent = function () {
|
||||
if(MenuList[this.parentId] instanceof Menu) {
|
||||
return MenuList[this.parentId].getNode();
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
MenuItem.prototype.getId = function () {
|
||||
return this.options.id;
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns HTMLElement
|
||||
*/
|
||||
MenuItem.prototype.getNode = function () {
|
||||
return this.node;
|
||||
};
|
||||
|
||||
MenuItem.prototype.createNode = function () {
|
||||
this.node = document.createElement('a');
|
||||
this.node.style.position = 'relative';
|
||||
this.node.dataset.parentId = this.parentId;
|
||||
this.node.kitMenuItem = this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param content HTMLElement | string
|
||||
* @returns {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setLabel = function (content = '') {
|
||||
this.options.label = content;
|
||||
var wrap = this.getNodeScopeElementByClassName('kit-menu-item__label');
|
||||
this.setContent(wrap, content);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param href
|
||||
* @returns {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setHref = function (href = 'javascript:void(0);') {
|
||||
this.options.href = href;
|
||||
this.getNode().setAttribute('href', href);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param content HTMLElement | string
|
||||
* @returns {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setIcon = function (content = '') {
|
||||
this.options.icon = content;
|
||||
var wrap = this.getNodeScopeElementByClassName('kit-menu-item__icon');
|
||||
this.setContent(wrap, content);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param sort int
|
||||
* @returns {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setSort = function (sort = 500) {
|
||||
this.options.sort = Number(sort);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param content HTMLElement | string
|
||||
* @returns {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setArrow = function (content = '') {
|
||||
this.options.arrow = content;
|
||||
var wrap = this.getNodeScopeElementByClassName('kit-menu-item__arrow');
|
||||
this.setContent(wrap, content);
|
||||
return this;
|
||||
};
|
||||
MenuItem.prototype.setId = function (id = '') {
|
||||
if(id) {
|
||||
this.options.id = id;
|
||||
}
|
||||
this.node.id = this.options.id;
|
||||
return this;
|
||||
};
|
||||
MenuItem.prototype.setVisible = function (visible = true) {
|
||||
this.options.visible = visible;
|
||||
this.node.style.display = this.options.visible?'':'none';
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Menu} menu
|
||||
* @return {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setChild = function (menu) {
|
||||
if(menu instanceof Menu) {
|
||||
menu.setParent(this.node);
|
||||
menu.init();
|
||||
}
|
||||
else if( Array.isArray(menu) ) {
|
||||
var menuClass;
|
||||
menuClass = new Menu();
|
||||
menu.forEach(function (item, i) {
|
||||
if(typeof item === 'object') {
|
||||
menuClass.addItem(item);
|
||||
}
|
||||
});
|
||||
menuClass.setParent(this.node);
|
||||
menuClass.init();
|
||||
}
|
||||
return this;
|
||||
};
|
||||
MenuItem.prototype.addClass = function (addClass = '') {
|
||||
this.node.classList.add(addClass);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param options Object
|
||||
* @return {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.setOptions = function (options = {}) {
|
||||
|
||||
this.options = Object.assign({}, this.options, options);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* @return {MenuItem}
|
||||
*/
|
||||
MenuItem.prototype.render = function () {
|
||||
|
||||
this.setLabel(this.options.label);
|
||||
this.setHref(this.options.href);
|
||||
this.setId(this.options.id);
|
||||
this.addClass(this.options.class);
|
||||
this.setChild(this.options.child);
|
||||
this.setIcon(this.options.icon);
|
||||
this.setArrow(this.options.arrow);
|
||||
this.setVisible(this.options.visible);
|
||||
this.setSort(this.options.sort);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
MenuItem.prototype.init = function () {
|
||||
|
||||
if(this.bInit) {
|
||||
return this;
|
||||
}
|
||||
this.render();
|
||||
|
||||
this.node.removeEventListener('click', this, false);
|
||||
this.node.removeEventListener('dblclick', this, false);
|
||||
this.node.addEventListener('click', this, false);
|
||||
this.node.addEventListener('dblclick', this, false);
|
||||
|
||||
this.bInit = true;
|
||||
return this;
|
||||
};
|
||||
|
||||
MenuItem.prototype.reInit = function () {
|
||||
|
||||
this.render();
|
||||
|
||||
this.node.removeEventListener('click', this, false);
|
||||
this.node.removeEventListener('dblclick', this, false);
|
||||
this.node.addEventListener('click', this, false);
|
||||
this.node.addEventListener('dblclick', this, false);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
MenuItem.prototype.remove = function () {
|
||||
this.node.removeEventListener('click', this, false);
|
||||
this.node.removeEventListener('dblclick', this, false);
|
||||
var id = this.options.id;
|
||||
//console.log('remove item' + id);
|
||||
setTimeout((function(parentId, id){
|
||||
return function() {
|
||||
if(MenuList.hasOwnProperty(parentId) && MenuList[parentId].itemList.hasOwnProperty(id)) {
|
||||
delete MenuList[parentId].itemList[id];
|
||||
MenuList[parentId].reInit();
|
||||
}
|
||||
};
|
||||
})(this.parentId, this.options.id),0);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param className
|
||||
* @returns HTMLElement
|
||||
*/
|
||||
MenuItem.prototype.getNodeScopeElementByClassName = function(className = ''){
|
||||
var wrap;
|
||||
this.node && (wrap = this.node.querySelector(':scope > .' + className));
|
||||
|
||||
if(!wrap) {
|
||||
wrap = document.createElement('div');
|
||||
wrap.classList.add(className);
|
||||
this.node.append(wrap);
|
||||
}
|
||||
return wrap;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param node HTMLElement
|
||||
* @param content HTMLElement | string
|
||||
* @param isText boolean
|
||||
* @return boolean
|
||||
*/
|
||||
MenuItem.prototype.setContent = function(node, content, isText = false){
|
||||
if(!(node instanceof Element)) {
|
||||
return false;
|
||||
}
|
||||
while (node.firstChild) {
|
||||
node.removeChild(node.firstChild);
|
||||
}
|
||||
if((content instanceof Element) || isText) {
|
||||
node.append(content);
|
||||
} else {
|
||||
node.innerHTML = content;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
return MenuItem;
|
||||
}();
|
||||
Menu.prototype.MenuItem = MenuItemClass;
|
||||
|
||||
return Menu;
|
||||
})();
|
||||
var getInstance = function(options = {}, items = []) {
|
||||
return new MenuClass(options, items);
|
||||
};
|
||||
var getActiveMenuIdList = function(){
|
||||
var idList = [];
|
||||
MenuList.forEach(function(element, index, array){
|
||||
var pos, posId, id, parentId;
|
||||
if((element instanceof MenuClass) && element.bInit && element.bActive) {
|
||||
id = element.id;
|
||||
parentId = false;
|
||||
element.getParentMenu() && (parentId = element.getParentMenu().id);
|
||||
!(parentId!==false&&(((pos=idList.indexOf(parentId))!==-1)?((idList.indexOf(id)===-1)&&idList.splice(pos
|
||||
+1,0,id)):(((posId=idList.indexOf(id))!==-1)?idList.splice(posId,0,parentId):(idList.push(parentId),
|
||||
idList.push(id))),0))&&(idList.indexOf(id)===-1)&&(idList.push(id));
|
||||
}
|
||||
});
|
||||
return idList
|
||||
};
|
||||
var reInitAllMenu = function(){
|
||||
var idList = getActiveMenuIdList();
|
||||
idList.forEach(function(id, i, arr) {
|
||||
MenuList[id].reInit();
|
||||
});
|
||||
};
|
||||
var reCalcAllMenu = function(){
|
||||
console.log('reCalcAllMenu');
|
||||
var idList = getActiveMenuIdList();
|
||||
idList.forEach(function(id, i, arr) {
|
||||
MenuList[id].calcStyle();
|
||||
});
|
||||
};
|
||||
var autoload = function(doc = document){
|
||||
if(!(doc instanceof Node)) {
|
||||
return false;
|
||||
}
|
||||
var menuList = doc.querySelectorAll('.' + defaultMenuOptions.class);
|
||||
menuList.forEach(
|
||||
function(menuNode, currentIndex, listObj) {
|
||||
if(!menuNode.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
var reCalcAllMenuLimiter = new utils.StackExecutionLimiter(this, reCalcAllMenu, 200);
|
||||
var globalHandlers = {
|
||||
resize: function(){
|
||||
reCalcAllMenuLimiter.exec();
|
||||
},
|
||||
};
|
||||
|
||||
window.addEventListener('resize', globalHandlers.resize);
|
||||
this.Class = MenuClass;
|
||||
this.getInstance = getInstance;
|
||||
this.reInitAllMenu = reInitAllMenu;
|
||||
this.reCalcAllMenu = reCalcAllMenu;
|
||||
this.autoload = autoload;
|
||||
|
||||
return this;
|
||||
});
|
||||
@@ -0,0 +1,287 @@
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1060;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
.modal.fade .modal-dialog {
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: translate(0, -50px);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal.fade .modal-dialog {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.modal.show .modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
.modal.modal-static .modal-dialog {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: calc(100% - 1rem);
|
||||
}
|
||||
.modal-dialog-scrollable .modal-content {
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-dialog-scrollable .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.3rem;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1040;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
}
|
||||
.modal-backdrop.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-top-left-radius: calc(0.3rem - 1px);
|
||||
border-top-right-radius: calc(0.3rem - 1px);
|
||||
}
|
||||
.modal-header .btn-close {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid #dee2e6;
|
||||
border-bottom-right-radius: calc(0.3rem - 1px);
|
||||
border-bottom-left-radius: calc(0.3rem - 1px);
|
||||
}
|
||||
.modal-footer > * {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.modal-dialog {
|
||||
max-width: 500px;
|
||||
margin: 1.75rem auto;
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: calc(100% - 3.5rem);
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
min-height: calc(100% - 3.5rem);
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.modal-lg,
|
||||
.modal-xl {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.modal-xl {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
.modal-fullscreen {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.modal-fullscreen-sm-down {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen-sm-down .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.modal-fullscreen-md-down {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen-md-down .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-md-down .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-md-down .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen-md-down .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
.modal-fullscreen-lg-down {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen-lg-down .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-lg-down .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-lg-down .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen-lg-down .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1199.98px) {
|
||||
.modal-fullscreen-xl-down {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen-xl-down .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-xl-down .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-xl-down .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen-xl-down .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1399.98px) {
|
||||
.modal-fullscreen-xxl-down {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.modal-fullscreen-xxl-down .modal-content {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-xxl-down .modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-fullscreen-xxl-down .modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-fullscreen-xxl-down .modal-footer {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,453 @@
|
||||
kit.PluginManager.register('modal', function(module, exports, require){
|
||||
var bsCore = require('bsCore');
|
||||
var
|
||||
defineJQueryPlugin = bsCore.util.index.defineJQueryPlugin,
|
||||
getElementFromSelector = bsCore.util.index.getElementFromSelector,
|
||||
isRTL = bsCore.util.index.isRTL,
|
||||
isVisible = bsCore.util.index.isVisible,
|
||||
reflow = bsCore.util.index.reflow,
|
||||
typeCheckConfig = bsCore.util.index.typeCheckConfig,
|
||||
EventHandler = bsCore.dom.EventHandler,
|
||||
Manipulator = bsCore.dom.Manipulator,
|
||||
SelectorEngine = bsCore.dom.SelectorEngine,
|
||||
ScrollBarHelper = bsCore.util.ScrollBarHelper,
|
||||
BaseComponent = bsCore.BaseComponent,
|
||||
Backdrop = bsCore.util.Backdrop;
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v5.0.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'modal'
|
||||
const DATA_KEY = 'bs.modal'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const ESCAPE_KEY = 'Escape'
|
||||
|
||||
const Default = {
|
||||
backdrop: true,
|
||||
keyboard: true,
|
||||
focus: true
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
backdrop: '(boolean|string)',
|
||||
keyboard: 'boolean',
|
||||
focus: 'boolean'
|
||||
}
|
||||
|
||||
const EVENT_HIDE = `hide${EVENT_KEY}`
|
||||
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
|
||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
|
||||
const EVENT_SHOW = `show${EVENT_KEY}`
|
||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
||||
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
|
||||
const EVENT_RESIZE = `resize${EVENT_KEY}`
|
||||
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
|
||||
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
|
||||
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
|
||||
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
|
||||
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
|
||||
const CLASS_NAME_OPEN = 'modal-open'
|
||||
const CLASS_NAME_FADE = 'fade'
|
||||
const CLASS_NAME_SHOW = 'show'
|
||||
const CLASS_NAME_STATIC = 'modal-static'
|
||||
|
||||
const SELECTOR_DIALOG = '.modal-dialog'
|
||||
const SELECTOR_MODAL_BODY = '.modal-body'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
|
||||
const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Modal extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
super(element)
|
||||
|
||||
this._config = this._getConfig(config)
|
||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
|
||||
this._backdrop = this._initializeBackDrop()
|
||||
this._isShown = false
|
||||
this._ignoreBackdropClick = false
|
||||
this._isTransitioning = false
|
||||
this._scrollBar = new ScrollBarHelper()
|
||||
}
|
||||
|
||||
// Getters
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get NAME() {
|
||||
return NAME
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
toggle(relatedTarget) {
|
||||
return this._isShown ? this.hide() : this.show(relatedTarget)
|
||||
}
|
||||
|
||||
show(relatedTarget) {
|
||||
if (this._isShown || this._isTransitioning) {
|
||||
return
|
||||
}
|
||||
|
||||
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
|
||||
relatedTarget
|
||||
})
|
||||
|
||||
if (showEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
this._isShown = true
|
||||
|
||||
if (this._isAnimated()) {
|
||||
this._isTransitioning = true
|
||||
}
|
||||
|
||||
this._scrollBar.hide()
|
||||
|
||||
document.body.classList.add(CLASS_NAME_OPEN)
|
||||
|
||||
this._adjustDialog()
|
||||
|
||||
this._setEscapeEvent()
|
||||
this._setResizeEvent()
|
||||
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event))
|
||||
|
||||
EventHandler.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
|
||||
EventHandler.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
|
||||
if (event.target === this._element) {
|
||||
this._ignoreBackdropClick = true
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this._showBackdrop(() => this._showElement(relatedTarget))
|
||||
}
|
||||
|
||||
hide(event) {
|
||||
if (event && ['A', 'AREA'].includes(event.target.tagName)) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
if (!this._isShown || this._isTransitioning) {
|
||||
return
|
||||
}
|
||||
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
|
||||
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
this._isShown = false
|
||||
const isAnimated = this._isAnimated()
|
||||
|
||||
if (isAnimated) {
|
||||
this._isTransitioning = true
|
||||
}
|
||||
|
||||
this._setEscapeEvent()
|
||||
this._setResizeEvent()
|
||||
|
||||
EventHandler.off(document, EVENT_FOCUSIN)
|
||||
|
||||
this._element.classList.remove(CLASS_NAME_SHOW)
|
||||
|
||||
EventHandler.off(this._element, EVENT_CLICK_DISMISS)
|
||||
EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS)
|
||||
|
||||
this._queueCallback(() => this._hideModal(), this._element, isAnimated)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
[window, this._dialog]
|
||||
.forEach(htmlElement => EventHandler.off(htmlElement, EVENT_KEY))
|
||||
|
||||
this._backdrop.dispose()
|
||||
super.dispose()
|
||||
|
||||
/**
|
||||
* `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
|
||||
* Do not move `document` in `htmlElements` array
|
||||
* It will remove `EVENT_CLICK_DATA_API` event that should remain
|
||||
*/
|
||||
EventHandler.off(document, EVENT_FOCUSIN)
|
||||
}
|
||||
|
||||
handleUpdate() {
|
||||
this._adjustDialog()
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_initializeBackDrop() {
|
||||
return new Backdrop({
|
||||
isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
|
||||
isAnimated: this._isAnimated()
|
||||
})
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = {
|
||||
...Default,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...(typeof config === 'object' ? config : {})
|
||||
}
|
||||
typeCheckConfig(NAME, config, DefaultType)
|
||||
return config
|
||||
}
|
||||
|
||||
_showElement(relatedTarget) {
|
||||
const isAnimated = this._isAnimated()
|
||||
const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
|
||||
|
||||
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
// Don't move modal's DOM position
|
||||
document.body.appendChild(this._element)
|
||||
}
|
||||
|
||||
this._element.style.display = 'block'
|
||||
this._element.removeAttribute('aria-hidden')
|
||||
this._element.setAttribute('aria-modal', true)
|
||||
this._element.setAttribute('role', 'dialog')
|
||||
this._element.scrollTop = 0
|
||||
|
||||
if (modalBody) {
|
||||
modalBody.scrollTop = 0
|
||||
}
|
||||
|
||||
if (isAnimated) {
|
||||
reflow(this._element)
|
||||
}
|
||||
|
||||
this._element.classList.add(CLASS_NAME_SHOW)
|
||||
|
||||
if (this._config.focus) {
|
||||
this._enforceFocus()
|
||||
}
|
||||
|
||||
const transitionComplete = () => {
|
||||
if (this._config.focus) {
|
||||
this._element.focus()
|
||||
}
|
||||
|
||||
this._isTransitioning = false
|
||||
EventHandler.trigger(this._element, EVENT_SHOWN, {
|
||||
relatedTarget
|
||||
})
|
||||
}
|
||||
|
||||
this._queueCallback(transitionComplete, this._dialog, isAnimated)
|
||||
}
|
||||
|
||||
_enforceFocus() {
|
||||
EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop
|
||||
EventHandler.on(document, EVENT_FOCUSIN, event => {
|
||||
if (document !== event.target &&
|
||||
this._element !== event.target &&
|
||||
!this._element.contains(event.target)) {
|
||||
this._element.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_setEscapeEvent() {
|
||||
if (this._isShown) {
|
||||
EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
|
||||
if (this._config.keyboard && event.key === ESCAPE_KEY) {
|
||||
event.preventDefault()
|
||||
this.hide()
|
||||
} else if (!this._config.keyboard && event.key === ESCAPE_KEY) {
|
||||
this._triggerBackdropTransition()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS)
|
||||
}
|
||||
}
|
||||
|
||||
_setResizeEvent() {
|
||||
if (this._isShown) {
|
||||
EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog())
|
||||
} else {
|
||||
EventHandler.off(window, EVENT_RESIZE)
|
||||
}
|
||||
}
|
||||
|
||||
_hideModal() {
|
||||
this._element.style.display = 'none'
|
||||
this._element.setAttribute('aria-hidden', true)
|
||||
this._element.removeAttribute('aria-modal')
|
||||
this._element.removeAttribute('role')
|
||||
this._isTransitioning = false
|
||||
this._backdrop.hide(() => {
|
||||
document.body.classList.remove(CLASS_NAME_OPEN)
|
||||
this._resetAdjustments()
|
||||
this._scrollBar.reset()
|
||||
EventHandler.trigger(this._element, EVENT_HIDDEN)
|
||||
})
|
||||
}
|
||||
|
||||
_showBackdrop(callback) {
|
||||
EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false
|
||||
return
|
||||
}
|
||||
|
||||
if (event.target !== event.currentTarget) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._config.backdrop === true) {
|
||||
this.hide()
|
||||
} else if (this._config.backdrop === 'static') {
|
||||
this._triggerBackdropTransition()
|
||||
}
|
||||
})
|
||||
|
||||
this._backdrop.show(callback)
|
||||
}
|
||||
|
||||
_isAnimated() {
|
||||
return this._element.classList.contains(CLASS_NAME_FADE)
|
||||
}
|
||||
|
||||
_triggerBackdropTransition() {
|
||||
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
const { classList, scrollHeight, style } = this._element
|
||||
const isModalOverflowing = scrollHeight > document.documentElement.clientHeight
|
||||
|
||||
// return if the following background transition hasn't yet completed
|
||||
if ((!isModalOverflowing && style.overflowY === 'hidden') || classList.contains(CLASS_NAME_STATIC)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!isModalOverflowing) {
|
||||
style.overflowY = 'hidden'
|
||||
}
|
||||
|
||||
classList.add(CLASS_NAME_STATIC)
|
||||
this._queueCallback(() => {
|
||||
classList.remove(CLASS_NAME_STATIC)
|
||||
if (!isModalOverflowing) {
|
||||
this._queueCallback(() => {
|
||||
style.overflowY = ''
|
||||
}, this._dialog)
|
||||
}
|
||||
}, this._dialog)
|
||||
|
||||
this._element.focus()
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// the following methods are used to handle overflowing modals
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
|
||||
const scrollbarWidth = this._scrollBar.getWidth()
|
||||
const isBodyOverflowing = scrollbarWidth > 0
|
||||
|
||||
if ((!isBodyOverflowing && isModalOverflowing && !isRTL()) || (isBodyOverflowing && !isModalOverflowing && isRTL())) {
|
||||
this._element.style.paddingLeft = `${scrollbarWidth}px`
|
||||
}
|
||||
|
||||
if ((isBodyOverflowing && !isModalOverflowing && !isRTL()) || (!isBodyOverflowing && isModalOverflowing && isRTL())) {
|
||||
this._element.style.paddingRight = `${scrollbarWidth}px`
|
||||
}
|
||||
}
|
||||
|
||||
_resetAdjustments() {
|
||||
this._element.style.paddingLeft = ''
|
||||
this._element.style.paddingRight = ''
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
const data = Modal.getOrCreateInstance(this, config)
|
||||
|
||||
if (typeof config !== 'string') {
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`)
|
||||
}
|
||||
|
||||
data[config](relatedTarget)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
const target = getElementFromSelector(this)
|
||||
|
||||
if (['A', 'AREA'].includes(this.tagName)) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
EventHandler.one(target, EVENT_SHOW, showEvent => {
|
||||
if (showEvent.defaultPrevented) {
|
||||
// only register focus restorer if modal will actually get shown
|
||||
return
|
||||
}
|
||||
|
||||
EventHandler.one(target, EVENT_HIDDEN, () => {
|
||||
if (isVisible(this)) {
|
||||
this.focus()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const data = Modal.getOrCreateInstance(target)
|
||||
|
||||
data.toggle(this)
|
||||
})
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .Modal to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(Modal)
|
||||
|
||||
return Modal;
|
||||
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
:root {
|
||||
--width-wrapper: 1200px;
|
||||
--gap-section: 40px;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size);
|
||||
font-family: var(--kit-font-family);
|
||||
}
|
||||
.global-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.content.content--footer-outside {
|
||||
min-height: 100%;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
blockquote, .blockquote {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,903 @@
|
||||
kit.PluginManager.register('toolkit',function(module, exports, require) {
|
||||
|
||||
var $ = require('jquery');
|
||||
|
||||
|
||||
var __Config = function () {
|
||||
|
||||
function Config() {
|
||||
this.mask =
|
||||
{
|
||||
tel: '+375 (99) 999-99-99'
|
||||
}
|
||||
}
|
||||
|
||||
Config.prototype.test = function test() {
|
||||
|
||||
};
|
||||
|
||||
return Config;
|
||||
}();
|
||||
var Config = new __Config();
|
||||
|
||||
|
||||
var __Helper = function () {
|
||||
|
||||
function Helper() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Вызывает событие
|
||||
* @param {object} elem
|
||||
* @param {string} event Название события
|
||||
*/
|
||||
Helper.prototype.triggerEvent = function triggerEvent(elem, event) {
|
||||
var ev = document.createEvent('HTMLEvents');
|
||||
ev.initEvent(event, true, false);
|
||||
return elem.dispatchEvent(ev);
|
||||
};
|
||||
|
||||
return Helper;
|
||||
}();
|
||||
var Helper = new __Helper();
|
||||
|
||||
|
||||
var __Events = function Events() {
|
||||
function Events() {
|
||||
this.submitForm();
|
||||
}
|
||||
|
||||
Events.prototype.submitForm = function () {
|
||||
$('form.js-kit-form').attr('novalidate', true);
|
||||
$(document).on('submit.kit-event', 'form.js-kit-form', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Inputs.clearForm(e.target);
|
||||
Message.clear(e.target, true);
|
||||
|
||||
var formNode = $(e.target);
|
||||
var sendData = formNode.serializeArray();
|
||||
var action = formNode.attr('action');
|
||||
var additionalData = {};
|
||||
|
||||
var jqxhr = $.post(action, sendData, function (response) {
|
||||
console.log('success');
|
||||
if (typeof response == 'object') {
|
||||
|
||||
Ajax.ajaxProcessingSuccess(response, $(e.target));
|
||||
|
||||
}
|
||||
}, 'json')
|
||||
.done(function (response) {
|
||||
// console.log('done');
|
||||
// console.log(response);
|
||||
})
|
||||
.fail(function (response) {
|
||||
console.log('fail');
|
||||
console.log(response);
|
||||
})
|
||||
.always(function (response) {
|
||||
// console.log('always');
|
||||
// console.log(response);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
return Events;
|
||||
}();
|
||||
var Events = new __Events();
|
||||
|
||||
|
||||
var __Message = function () {
|
||||
|
||||
function Message() {
|
||||
this.selector = '.kit-message';
|
||||
}
|
||||
|
||||
Message.prototype.clear = function (node, recursive = false) {
|
||||
node = $(node);
|
||||
if (!node.length) {
|
||||
return;
|
||||
}
|
||||
function clearNode(node) {
|
||||
node.removeClass('kit-message-error kit-message-success kit-message-warning')
|
||||
.html('');
|
||||
}
|
||||
if(node.is(this.selector)) {
|
||||
clearNode(node);
|
||||
}
|
||||
if(recursive) {
|
||||
clearNode(node.find(this.selector));
|
||||
}
|
||||
};
|
||||
|
||||
return Message;
|
||||
}();
|
||||
var Message = new __Message();
|
||||
|
||||
var __Ajax = function () {
|
||||
|
||||
function Ajax() {
|
||||
|
||||
}
|
||||
|
||||
Ajax.prototype.ajaxProcessingSuccess = function ajaxProcessingSuccess(data, $form) {
|
||||
console.log('ajaxProcessingSuccess');
|
||||
$form = $($form);
|
||||
|
||||
|
||||
if (data.hasOwnProperty('inputs') && Array.isArray(data.inputs)) {
|
||||
data.inputs.forEach(function (item) {
|
||||
|
||||
var inputNode = $('[name="' + item.name + '"]');
|
||||
if (inputNode.length) {
|
||||
if (item.hasOwnProperty('error')) {
|
||||
Inputs.showFieldError(inputNode, item.error)
|
||||
}
|
||||
if (item.hasOwnProperty('readonly')) {
|
||||
inputNode.prop('readonly', item.readonly);
|
||||
}
|
||||
if (item.hasOwnProperty('disabled')) {
|
||||
inputNode.prop('disabled', item.disabled);
|
||||
}
|
||||
if (item.hasOwnProperty('type')) {
|
||||
inputNode.prop('type', item.type);
|
||||
if (item.type === 'hidden') {
|
||||
inputNode.parent().removeClass('kit-hidden').addClass('kit-hidden');
|
||||
} else {
|
||||
inputNode.parent().removeClass('kit-hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.hasOwnProperty('do') && Array.isArray(data.do)) {
|
||||
data.do.forEach(function (item) {
|
||||
var $do = false;
|
||||
var selector = $(document);
|
||||
if (item.hasOwnProperty('form') && item.form === true) {
|
||||
selector = $form;
|
||||
if (selector.length) {
|
||||
$do = true
|
||||
}
|
||||
}
|
||||
if (item.hasOwnProperty('selector')) {
|
||||
selector = $(item.selector);
|
||||
if (selector.length) {
|
||||
$do = true
|
||||
}
|
||||
}
|
||||
|
||||
if ($do) {
|
||||
if (item.hasOwnProperty('html')) {
|
||||
selector.html(item.html);
|
||||
}
|
||||
if (item.hasOwnProperty('replace')) {
|
||||
selector.replaceWith(item.replace);
|
||||
}
|
||||
if (item.hasOwnProperty('addClass')) {
|
||||
selector.addClass(item.addClass);
|
||||
}
|
||||
if (item.hasOwnProperty('removeClass')) {
|
||||
selector.removeClass(item.removeClass);
|
||||
}
|
||||
if (item.hasOwnProperty('disabled')) {
|
||||
selector.prop('disabled', item.disabled);
|
||||
}
|
||||
if (item.hasOwnProperty('trigger')) {
|
||||
selector.trigger(item.trigger);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (item.hasOwnProperty('hide')) {
|
||||
item.hide && selector.find(item.hide).hide();
|
||||
}
|
||||
if (item.hasOwnProperty('show')) {
|
||||
item.show && selector.find(item.show).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (data.hasOwnProperty('success')) {
|
||||
this.showMessageSmart(data.success, $form, 'success');
|
||||
}
|
||||
if (data.hasOwnProperty('warning')) {
|
||||
this.showMessageSmart(data.warning, $form, 'warning');
|
||||
}
|
||||
if (data.hasOwnProperty('errors')) {
|
||||
this.showMessageSmart(data.errors, $form, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
Ajax.prototype.showMessageSmart = function showMessageSmart(messageObject, formNode, type = 'error') {
|
||||
console.log('showMessageSmart');
|
||||
console.log(messageObject);
|
||||
console.log(formNode);
|
||||
console.log(type);
|
||||
|
||||
formNode = $(formNode);
|
||||
console.log(formNode);
|
||||
var unknownMessage = [];
|
||||
var msg = [];
|
||||
var inputNode,
|
||||
key;
|
||||
if (Object.keys(messageObject).length) {
|
||||
|
||||
console.log('1');
|
||||
for (key in messageObject) {
|
||||
msg = messageObject[key];
|
||||
console.log(msg);
|
||||
inputNode = formNode.find("[name='" + key + "']");
|
||||
|
||||
if (inputNode.length) {
|
||||
if (type === 'success') {
|
||||
Inputs.showFieldSuccess(inputNode, msg);
|
||||
} else if (type === 'warning') {
|
||||
Inputs.showFieldWarning(inputNode, msg);
|
||||
} else {
|
||||
Inputs.showFieldError(inputNode, msg);
|
||||
}
|
||||
} else {
|
||||
unknownMessage[unknownMessage.length] = msg;
|
||||
}
|
||||
}
|
||||
console.log('unknownMessage');
|
||||
console.log(unknownMessage);
|
||||
var messageNode = formNode.find('.kit-message');
|
||||
if (unknownMessage.length) {
|
||||
console.log('1');
|
||||
console.log(messageNode.length ? 'messageNode.length' : 'no messageNode.length');
|
||||
messageNode.length && messageNode.html(unknownMessage.join('<br>')).addClass('kit-message-' + type);
|
||||
} else {
|
||||
console.log(unknownMessage);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return Ajax;
|
||||
}();
|
||||
var Ajax = new __Ajax();
|
||||
|
||||
|
||||
function Select() {
|
||||
|
||||
if (Helper.isMobile) {
|
||||
//document.body.classList.add('kit-select-fix');
|
||||
}
|
||||
|
||||
document.addEventListener('click', clickHandler, false);
|
||||
document.addEventListener('change', chahgeHandler, false);
|
||||
document.addEventListener('keydown', escapeKeyHandler, false);
|
||||
window.addEventListener('resize', resizeHandler, false);
|
||||
|
||||
var MINWIDTH = 200;
|
||||
var MAXHEIGHT = 8 * 40;
|
||||
var MINHEIGHT = 4 * 40;
|
||||
|
||||
function clickHandler(e) {
|
||||
|
||||
//if (_helper2.default.isMobile) return;
|
||||
|
||||
var fieldDisplay = e.target;
|
||||
var container = fieldDisplay.parentNode;
|
||||
var dropdownOptionNode = e.target.closest('.kit-dropdown__option');
|
||||
/**
|
||||
* клик по .kit-field__display
|
||||
* открывает селект
|
||||
*/
|
||||
if (hasClass(e.target, 'kit-field__display')) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!hasClass(container, 'kit-select--open')) {
|
||||
|
||||
closeAll(container);
|
||||
addDropdown(container);
|
||||
} else {
|
||||
closeAll(null);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* клик по option
|
||||
*/
|
||||
else if (hasClass(e.target, 'kit-dropdown__option') || dropdownOptionNode) {
|
||||
var wrapper, wrapper2;
|
||||
if (hasClass(e.target, 'kit-dropdown__option')) {
|
||||
wrapper = e.target.parentNode;
|
||||
wrapper2 = e.target;
|
||||
} else {
|
||||
wrapper2 = dropdownOptionNode;
|
||||
wrapper = wrapper2.parentNode;
|
||||
}
|
||||
|
||||
var stamp = wrapper.getAttribute('data-for-select-id');
|
||||
var select = document.querySelector('[ data-select-id = "' + stamp + '" ]');
|
||||
var option = select.querySelectorAll('option')[wrapper2.getAttribute('data-index')];
|
||||
|
||||
if (select.hasAttribute('multiple')) {
|
||||
wrapper2.classList.toggle('kit-active');
|
||||
option.selected = hasClass(wrapper2, 'kit-active');
|
||||
Helper.triggerEvent(select, 'change');
|
||||
closeAll(null);
|
||||
} else {
|
||||
option.selected = true;
|
||||
Helper.triggerEvent(select, 'change');
|
||||
closeAll(null);
|
||||
}
|
||||
} else {
|
||||
closeAll(null);
|
||||
}
|
||||
}
|
||||
|
||||
function closeAll(exceptSelect) {
|
||||
|
||||
var arrayOfOpenedSelects = document.querySelectorAll('.kit-select--open');
|
||||
|
||||
[].filter.call(arrayOfOpenedSelects, function (elem) {
|
||||
return elem !== exceptSelect;
|
||||
}).forEach(function (elem) {
|
||||
removeClass(elem, 'kit-select--open');
|
||||
});
|
||||
|
||||
detachDropDown();
|
||||
}
|
||||
|
||||
// изменение инпута
|
||||
function chahgeHandler(e) {
|
||||
var select = e.target;
|
||||
changeSelect(select);
|
||||
}
|
||||
|
||||
/**
|
||||
* изменение инпута
|
||||
* @param select {HTMLElement}
|
||||
*/
|
||||
function changeSelect(select) {
|
||||
if (hasClass(select, 'kit-field__input') && select.tagName == 'SELECT') {
|
||||
var selected = select.querySelectorAll('option:checked')[0];
|
||||
var data = {};
|
||||
var dataAttrs = [];
|
||||
if(selected) {
|
||||
dataAttrs.filter.call(selected.attributes, function (attr) {
|
||||
return (/^data-/.test(attr.name)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
var isMultiple = select.hasAttribute('multiple');
|
||||
|
||||
var parent = select.parentNode;
|
||||
|
||||
var display = select.parentNode.querySelector('.kit-field__display');
|
||||
|
||||
var bDisplay = true;
|
||||
|
||||
//if(parent && parent.classList.contains('kit-field--select-link') && isMultiple) {
|
||||
if(isMultiple) {
|
||||
bDisplay = false;
|
||||
}
|
||||
|
||||
display.textContent = '';
|
||||
|
||||
if(bDisplay && selected) {
|
||||
display.textContent = selected.textContent;
|
||||
}
|
||||
|
||||
removeClass(parent, 'kit-select--open');
|
||||
|
||||
if(selected) {
|
||||
select.setAttribute('data-dirty', 'true');
|
||||
} else {
|
||||
select.setAttribute('data-dirty', 'false');
|
||||
}
|
||||
|
||||
removeClass(select, 'kit-field--error');
|
||||
|
||||
// for(let key in attrs){
|
||||
// if( attrs[key].nodeName !== 'value' && attrs[key].nodeName !== undefined){
|
||||
// select.setAttribute( attrs[key].nodeName, attrs[key].nodeValue )
|
||||
// }
|
||||
// }
|
||||
|
||||
forEach(dataAttrs, function (index, attr) {
|
||||
data[normalizeDataAttrName(attr.nodeName)] = attr.nodeValue;
|
||||
});
|
||||
|
||||
select.data = data;
|
||||
|
||||
setTimeout(function () {
|
||||
Helper.triggerEvent(select, 'kit-select-change');
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function resizeHandler() {
|
||||
|
||||
var dropdownWrapper = document.querySelectorAll('.kit-dropdown')[0] || null;
|
||||
var stamp = void 0;
|
||||
var select = void 0;
|
||||
var container = void 0;
|
||||
|
||||
if (dropdownWrapper !== null) {
|
||||
|
||||
stamp = dropdownWrapper.getAttribute('data-for-select-id');
|
||||
select = document.querySelector('[ data-select-id = "' + stamp + '" ]') || [];
|
||||
container = select.parentNode;
|
||||
|
||||
dropdownWrapper.style.top = container.getBoundingClientRect().top + container.offsetHeight + window.pageYOffset + 'px';
|
||||
dropdownWrapper.style.maxHeight = calcMaxHeight(container);
|
||||
dropdownWrapper.style.left = calcPosition(container).left;
|
||||
dropdownWrapper.style.width = container.offsetWidth + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function addDropdown(container) {
|
||||
|
||||
var select = container.querySelector('select');
|
||||
var optionElementList = select.querySelectorAll('option');
|
||||
var dropdownWrapper = document.createElement('div');
|
||||
var stamp = Date.now();
|
||||
var isMultiple = select.hasAttribute('multiple');
|
||||
|
||||
if (select.disabled) return;
|
||||
|
||||
select.classList.forEach(function(value, key, listObj){
|
||||
if(value !== 'kit-field__input') {
|
||||
dropdownWrapper.classList.add(value);
|
||||
}
|
||||
});
|
||||
|
||||
select.setAttribute('data-select-id', stamp);
|
||||
dropdownWrapper.setAttribute('data-for-select-id', stamp);
|
||||
|
||||
addClass(dropdownWrapper, 'kit-dropdown');
|
||||
|
||||
if (isMultiple) {
|
||||
dropdownWrapper.setAttribute('data-multiple', 'true');
|
||||
}
|
||||
|
||||
forEach(optionElementList, function (i, item) {
|
||||
|
||||
var dropdownInner = document.createElement('div');
|
||||
var textContent = item.textContent;
|
||||
var dropdownInnerIcon = document.createElement('span');
|
||||
var dropdownInnerIconCheck = '<svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>';
|
||||
addClass(dropdownInnerIcon, 'kit-field__icon');
|
||||
$(dropdownInnerIcon).append(dropdownInnerIconCheck);
|
||||
dropdownInner.textContent = textContent;
|
||||
dropdownInner.setAttribute('data-index', i);
|
||||
|
||||
addClass(dropdownInner, 'kit-dropdown__option');
|
||||
|
||||
if (isMultiple) {
|
||||
dropdownInner.appendChild(dropdownInnerIcon);
|
||||
}
|
||||
// if (item.getAttribute( "block_selected_off" ) == "active") {
|
||||
// addClass(dropdownInner, 'block_selected_off');
|
||||
// dropdownInner.appendChild(dropdownInnerIcon);
|
||||
// }
|
||||
// if (item.getAttribute( "block_selected" ) == "active") {
|
||||
// addClass(dropdownInner, 'block_selected');
|
||||
// dropdownInner.appendChild(dropdownInnerIcon);
|
||||
// }
|
||||
// if (item.getAttribute( "block_selected" ) == "noActive") {
|
||||
// addClass(dropdownInner, 'block_selected_no');
|
||||
// dropdownInner.appendChild(dropdownInnerIcon);
|
||||
// }
|
||||
if (item.disabled) {
|
||||
addClass(dropdownInner, 'kit-disabled');
|
||||
}
|
||||
if (item.selected) {
|
||||
addClass(dropdownInner, 'kit-active');
|
||||
}
|
||||
dropdownWrapper.appendChild(dropdownInner);
|
||||
});
|
||||
|
||||
Helper.triggerEvent(select, 'beforeOpen');
|
||||
|
||||
document.body.appendChild(dropdownWrapper);
|
||||
|
||||
dropdownWrapper.style.position = 'absolute';
|
||||
dropdownWrapper.style.minWidth = MINWIDTH + 'px';
|
||||
dropdownWrapper.style.top = calcPosition(container).top;
|
||||
dropdownWrapper.style.left = calcPosition(container).left;
|
||||
dropdownWrapper.style.minHeight = calcMinHeight(dropdownWrapper);
|
||||
dropdownWrapper.style.maxHeight = calcMaxHeight(container);
|
||||
dropdownWrapper.style.width = container.offsetWidth + 'px';
|
||||
dropdownWrapper.style.zIndex = 20002;
|
||||
|
||||
setTimeout(function () {
|
||||
addClass(dropdownWrapper, 'kit-active');
|
||||
addClass(container, 'kit-select--open');
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function calcPosition(container) {
|
||||
var offsetTop = getOffset(container).top;
|
||||
var offsetLeft = getOffset(container).left;
|
||||
|
||||
var scrollTop = window.pageYOffset;
|
||||
var scrollLeft = window.pageXOffset;
|
||||
|
||||
var left = 0;
|
||||
var top = offsetTop + container.offsetHeight + window.pageYOffset;
|
||||
|
||||
if (viewport().width - MINWIDTH > offsetLeft || container.offsetWidth >= MINWIDTH) {
|
||||
left = offsetLeft + scrollLeft;
|
||||
} else {
|
||||
left = offsetLeft + scrollLeft + container.offsetWidth - MINWIDTH;
|
||||
}
|
||||
|
||||
return {
|
||||
top: top + 'px',
|
||||
left: left + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
function calcMinHeight(el) {
|
||||
|
||||
var height = el.offsetHeight;
|
||||
|
||||
if (height > MINHEIGHT) {
|
||||
return MINHEIGHT + 'px';
|
||||
} else {
|
||||
return height + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function calcMaxHeight(container) {
|
||||
|
||||
var offsetTop = getOffset(container).top;
|
||||
var _maxHeight = viewport().height + window.pageYOffset - offsetTop - container.offsetHeight - window.pageYOffset;
|
||||
|
||||
if (_maxHeight > MAXHEIGHT) {
|
||||
return MAXHEIGHT + 'px';
|
||||
} else {
|
||||
return _maxHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function escapeKeyHandler(e) {
|
||||
if (e.keyCode == 27) {
|
||||
closeAll(null);
|
||||
}
|
||||
}
|
||||
|
||||
function detachDropDown() {
|
||||
var elements = document.querySelectorAll('.kit-dropdown');
|
||||
forEach(elements, function (i, element) {
|
||||
element.parentNode.removeChild(element);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
|
||||
*/
|
||||
function forEach(array, callback, scope) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
callback.call(scope, i, array[i]);
|
||||
}
|
||||
};
|
||||
|
||||
function hasClass(el, className) {
|
||||
if (el.classList) return el.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
|
||||
}
|
||||
|
||||
function addClass(el, className) {
|
||||
if (el.classList) return el.classList.add(className);else return el.className += ' ' + className;
|
||||
}
|
||||
|
||||
function removeClass(el, className) {
|
||||
if (el.classList) return el.classList.remove(className);else return el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
|
||||
function normalizeDataAttrName(string) {
|
||||
var _arguments = arguments;
|
||||
|
||||
return string.replace(/^data-/g, '').replace(/(\-\w)/g, function () {
|
||||
return _arguments[0][1].toUpperCase();
|
||||
});
|
||||
}
|
||||
|
||||
function viewport() {
|
||||
|
||||
var height = void 0;
|
||||
var width = void 0;
|
||||
|
||||
if (document.compatMode === 'BackCompat') {
|
||||
height = document.body.clientHeight;
|
||||
width = document.body.clientWidth;
|
||||
} else {
|
||||
height = document.documentElement.clientHeight;
|
||||
width = document.documentElement.clientWidth;
|
||||
}
|
||||
|
||||
return {
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
}
|
||||
|
||||
function getOffset(el) {
|
||||
return {
|
||||
top: el.getBoundingClientRect().top,
|
||||
left: el.getBoundingClientRect().left
|
||||
};
|
||||
}
|
||||
|
||||
function setLabelByNode(selectNode, html) {
|
||||
|
||||
selectNode = (0, _jquery2.default)(selectNode);
|
||||
|
||||
if(!selectNode.length) return;
|
||||
|
||||
var select = selectNode[0];
|
||||
|
||||
if (hasClass(select, 'kit-field__input') && select.tagName == 'SELECT') {
|
||||
|
||||
|
||||
|
||||
var selected = select.querySelectorAll('option:checked')[0];
|
||||
var data = {};
|
||||
var dataAttrs = [];
|
||||
if(selected) {
|
||||
dataAttrs.filter.call(selected.attributes, function (attr) {
|
||||
return (/^data-/.test(attr.name)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
var isMultiple = select.hasAttribute('multiple');
|
||||
|
||||
var parent = select.parentNode;
|
||||
|
||||
var display = select.parentNode.querySelector('.kit-field__display');
|
||||
var label = select.parentNode.querySelector('.kit-field__label');
|
||||
var labelContent = label.querySelector('.kit-field__label-content');
|
||||
if(labelContent) {
|
||||
label = labelContent;
|
||||
}
|
||||
|
||||
var arrow;
|
||||
|
||||
var arrowInLabel = false;
|
||||
if(label) {
|
||||
arrow = label.querySelector('.kit-field__arrow');
|
||||
if(arrow) {
|
||||
arrowInLabel = true;
|
||||
}
|
||||
}
|
||||
|
||||
if(arrowInLabel) {
|
||||
(0, _jquery2.default)(label).html('').append(html).append(arrow);
|
||||
} else {
|
||||
(0, _jquery2.default)(label).html('').append(html);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var __selectClass = function(){
|
||||
|
||||
}
|
||||
__selectClass.prototype.setLabelByNode = function(select, html) {
|
||||
setLabelByNode(select, html);
|
||||
}
|
||||
__selectClass.prototype.change = function(select) {
|
||||
changeSelect(select);
|
||||
}
|
||||
|
||||
return new __selectClass();
|
||||
};
|
||||
|
||||
var __Inputs = function () {
|
||||
|
||||
function Inputs() {
|
||||
var _this = this;
|
||||
|
||||
this.init();
|
||||
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
return _this.refresh();
|
||||
}, false);
|
||||
document.addEventListener('inputs.reset', function () {
|
||||
return _this.refresh();
|
||||
}, false);
|
||||
document.addEventListener('tabs.toggle', function () {
|
||||
return _this.refresh();
|
||||
}, false);
|
||||
document.addEventListener('modal.open', function () {
|
||||
return _this.refresh();
|
||||
}, false);
|
||||
document.addEventListener('input', function (e) {
|
||||
return _this.changeFiled(e);
|
||||
}, false);
|
||||
document.addEventListener('paste', function (e) {
|
||||
return _this.changeFiled(e);
|
||||
}, false);
|
||||
document.addEventListener('drop', function (e) {
|
||||
return _this.changeFiled(e);
|
||||
}, false);
|
||||
document.addEventListener('cut', function (e) {
|
||||
return _this.changeFiled(e);
|
||||
}, false);
|
||||
document.addEventListener('change', function (e) {
|
||||
return _this.switchField(e);
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
Inputs.prototype.checkDirty = function checkDirty(element) {
|
||||
return !element.value && !element.placeholder.length ? element.setAttribute('data-dirty', 'false') : element.setAttribute('data-dirty', 'true');
|
||||
};
|
||||
|
||||
|
||||
Inputs.prototype.changeFiled = function changeFiled(e) {
|
||||
var _this2 = this;
|
||||
var target = e.target || e;
|
||||
if (target.classList.contains('kit-field__input')) {
|
||||
if (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA') {
|
||||
this.checkDirty(target);
|
||||
|
||||
var value_min = $(target).attr('value_min');
|
||||
var value_max = $(target).attr('value_max');
|
||||
if ((value_min != "") && (Number(value_min) > Number(target.value))) {
|
||||
this.showFieldError(target, 'Минимальное значение ' + value_min);
|
||||
} else if ((value_max != "") && (Number(value_max) < Number(target.value))) {
|
||||
this.showFieldError(target, 'Максимальное значение ' + value_max);
|
||||
} else {
|
||||
this.fieldNormalize(target);
|
||||
}
|
||||
|
||||
if (!$(target).hasClass('kit-field--error')) {
|
||||
$(target).siblings('.kit-field__message').text('');
|
||||
}
|
||||
if (target.classList.contains('kit-autoheight')) {
|
||||
this.calcAutoHeight(target);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Inputs.prototype.checkAllInputs = function checkAllInputs() {
|
||||
var _this2 = this;
|
||||
|
||||
var inputNode = document.querySelectorAll('input.kit-field__input, textarea.kit-field__input');
|
||||
[].forEach.call(inputNode, function (item) {
|
||||
if (item.tagName == 'TEXTAREA') {
|
||||
if (item.classList.contains('kit-autoheight')) {
|
||||
_this2.calcAutoHeight(item);
|
||||
_this2.checkDirty(item);
|
||||
}
|
||||
} else {
|
||||
_this2.checkDirty(item);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) {
|
||||
target.style.height = target.style.minHeight = 'auto';
|
||||
var h;
|
||||
if (target.scrollHeight < 30) {
|
||||
h = '30' + 'px';
|
||||
} else {
|
||||
h = target.scrollHeight + 'px';
|
||||
}
|
||||
target.style.height = target.style.minHeight = h;
|
||||
};
|
||||
|
||||
|
||||
Inputs.prototype.switchField = function switchField(e) {
|
||||
var target = e.target;
|
||||
var input = target.parentNode.querySelector('.kit-field__input');
|
||||
if (input && input.type == 'checkbox') {
|
||||
input.classList.remove('kit-field--error');
|
||||
} else if (input && input.type == 'radio') {
|
||||
var name = input.parentNode.querySelector('.kit-field__input').name;
|
||||
var otherRadio = document.querySelectorAll('[name= ' + name + ']');
|
||||
input.classList.remove('kit-field--error');
|
||||
[].forEach.call(otherRadio, function (item) {
|
||||
item.classList.remove('kit-field--error');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Inputs.prototype.clearForm = function clearForm(formNode) {
|
||||
formNode = $(formNode);
|
||||
if (formNode.length) {
|
||||
formNode.find('.kit-field--error').removeClass('kit-field--error');
|
||||
formNode.find('.kit-field__message').html('');
|
||||
}
|
||||
};
|
||||
|
||||
Inputs.prototype.setMask = function setMask() {
|
||||
var _this3 = this;
|
||||
|
||||
$('[type=tel]').mask(Config.mask.tel, {
|
||||
placeholder: '_', completed: function completed() {
|
||||
_this3.fieldNormalize(this);
|
||||
}
|
||||
}).on('blur.mask', function (e) {
|
||||
_this3.checkDirty(e.currentTarget);
|
||||
});
|
||||
};
|
||||
|
||||
Inputs.prototype.unsetMask = function unsetMask() {
|
||||
$('input[type=tel]').unmask();
|
||||
};
|
||||
|
||||
Inputs.prototype.init = function init() {
|
||||
this.checkAllInputs();
|
||||
this.setMask();
|
||||
};
|
||||
|
||||
Inputs.prototype.refresh = function refresh() {
|
||||
this.unsetMask();
|
||||
this.init();
|
||||
};
|
||||
|
||||
|
||||
Inputs.prototype.fieldNormalize = function fieldNormalize(inputNode) {
|
||||
inputNode = $(inputNode);
|
||||
if (inputNode.length) {
|
||||
//var parentNode = inputNode.parent();
|
||||
inputNode.removeClass('kit-field--warning kit-field--success kit-field--error');
|
||||
inputNode.siblings('.kit-field__message').html('');
|
||||
}
|
||||
return inputNode;
|
||||
};
|
||||
Inputs.prototype.showFieldError = function showFieldError(inputNode, msg) {
|
||||
inputNode = this.fieldNormalize(inputNode);
|
||||
if (inputNode.length) {
|
||||
//var parentNode = inputNode.parent();
|
||||
inputNode.addClass('kit-field--error');
|
||||
inputNode.siblings('.kit-field__message').html(msg);
|
||||
}
|
||||
};
|
||||
Inputs.prototype.showFieldSuccess = function showFieldSuccess(inputNode, msg) {
|
||||
inputNode = this.fieldNormalize(inputNode);
|
||||
if (inputNode.length) {
|
||||
//var parentNode = inputNode.parent();
|
||||
inputNode.addClass('kit-field--success');
|
||||
inputNode.siblings('.kit-field__message').html(msg);
|
||||
}
|
||||
};
|
||||
Inputs.prototype.showFieldWarning = function showFieldWarning(inputNode, msg) {
|
||||
inputNode = this.fieldNormalize(inputNode);
|
||||
if (inputNode.length) {
|
||||
//var parentNode = inputNode.parent();
|
||||
inputNode.addClass('kit-field--warning');
|
||||
inputNode.siblings('.kit-field__message').html(msg);
|
||||
}
|
||||
};
|
||||
Inputs.prototype.hideFieldError = function hideFieldError(inputNode) {
|
||||
inputNode = $(inputNode);
|
||||
if (inputNode.length) {
|
||||
var parentNode = inputNode.parent();
|
||||
inputNode.removeClass('kit-field--error');
|
||||
inputNode.siblings('.kit-field__message').html('');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return Inputs;
|
||||
}();
|
||||
var Inputs = new __Inputs();
|
||||
|
||||
|
||||
module.exports.Helper = Helper;
|
||||
module.exports.Select = Select();
|
||||
module.exports.Config = Config;
|
||||
module.exports.Message = Message;
|
||||
module.exports.Inputs = Inputs;
|
||||
|
||||
return module.exports;
|
||||
});
|
||||
@@ -0,0 +1,175 @@
|
||||
:root {
|
||||
--kit-tooltip-font-size: 0.8em;
|
||||
--kit-tooltip-color: #ffffff;
|
||||
--kit-tooltip-content-color: #212121fa;
|
||||
--kit-tooltip-border-color: #212121fa;
|
||||
--kit-tooltip-border-width: 0px;
|
||||
--kit-tooltip-arrow-width: 0.7em;
|
||||
--math-sqrt-2: 1.414213562373095;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
line-break: auto;
|
||||
font-size: var(--kit-tooltip-font-size);
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0.8rem;
|
||||
height: 0.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow::before {
|
||||
border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
width: var(--kit-tooltip-arrow-width);
|
||||
height: var(--kit-tooltip-arrow-width);
|
||||
background-color: var(--kit-tooltip-content-color);
|
||||
box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
|
||||
}
|
||||
/*top*/
|
||||
.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
|
||||
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
|
||||
}
|
||||
|
||||
.kit-tooltip-top .tooltip-arrow, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow {
|
||||
bottom: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
/* left: 50% !important; */
|
||||
/* transform: translate(-50%, 0); */
|
||||
}
|
||||
|
||||
.kit-tooltip-top .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: rotate(
|
||||
225deg
|
||||
) translate(0, 100%);
|
||||
transform-origin: 0 100%;
|
||||
border-left-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
|
||||
}
|
||||
/*right*/
|
||||
.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
|
||||
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
|
||||
}
|
||||
|
||||
.kit-tooltip-right .tooltip-arrow, .kit-tooltip-auto[x-placement^="right"] .tooltip-arrow {
|
||||
left: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
top: 50% !important;
|
||||
transform: translate(0px, -50%);
|
||||
}
|
||||
|
||||
.kit-tooltip-right .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="right"] .tooltip-arrow::before {
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: rotate(
|
||||
225deg
|
||||
) translate(25%, -50%);
|
||||
transform-origin: 75% 0;
|
||||
border-right-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
}
|
||||
/*bottom*/
|
||||
.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
|
||||
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
|
||||
}
|
||||
|
||||
.kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-arrow {
|
||||
top: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
/*left: 50% !important;*/
|
||||
/*transform: translate(-50%, 0);*/
|
||||
}
|
||||
|
||||
.kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: rotate(
|
||||
45deg
|
||||
) translate(0, 0);
|
||||
transform-origin: 0 0;
|
||||
border-left-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
|
||||
}
|
||||
|
||||
/*left*/
|
||||
.kit-tooltip-left,
|
||||
.kit-tooltip-auto[x-placement^="left"],
|
||||
.kit-tooltip-start[data-popper-placement^="left"] {
|
||||
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
|
||||
}
|
||||
|
||||
.kit-tooltip-left .tooltip-arrow, .kit-tooltip-auto[x-placement^="left"] .tooltip-arrow,
|
||||
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-arrow {
|
||||
right: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
top: 50% !important;
|
||||
transform: translate(0px, -50%) !important;
|
||||
}
|
||||
|
||||
.kit-tooltip-left .tooltip-arrow::before,
|
||||
.kit-tooltip-auto[x-placement^="left"] .tooltip-arrow::before,
|
||||
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-arrow::before {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: rotate(
|
||||
45deg
|
||||
) translate(-25%, -50%);
|
||||
transform-origin: 25% 0;
|
||||
border-right-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: var(--kit-tooltip-color);
|
||||
text-align: center;
|
||||
background-color: var(--kit-tooltip-content-color);
|
||||
border-radius: 0.25rem;
|
||||
border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
|
||||
box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
|
||||
}
|
||||
@@ -0,0 +1,741 @@
|
||||
kit.PluginManager.register('tooltip',function(module, exports, require){
|
||||
|
||||
var Popper = require('popper');
|
||||
|
||||
var bsCore = require('bsCore');
|
||||
|
||||
var {
|
||||
defineJQueryPlugin,
|
||||
findShadowRoot,
|
||||
getElement,
|
||||
getUID,
|
||||
isElement,
|
||||
isRTL,
|
||||
noop,
|
||||
typeCheckConfig
|
||||
} = bsCore.util.index;
|
||||
var {DefaultAllowlist, sanitizeHtml} = bsCore.util.sanitizer;
|
||||
var {Data, EventHandler, Manipulator, SelectorEngine} = bsCore.dom;
|
||||
var BaseComponent = bsCore.BaseComponent;
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'tooltip'
|
||||
const DATA_KEY = 'kit.tooltip'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const CLASS_PREFIX = 'kit-tooltip'
|
||||
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
|
||||
const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
|
||||
|
||||
const DefaultType = {
|
||||
animation: 'boolean',
|
||||
template: 'string',
|
||||
title: '(string|element|function)',
|
||||
trigger: 'string',
|
||||
delay: '(number|object)',
|
||||
html: 'boolean',
|
||||
selector: '(string|boolean)',
|
||||
placement: '(string|function)',
|
||||
offset: '(array|string|function)',
|
||||
container: '(string|element|boolean)',
|
||||
fallbackPlacements: 'array',
|
||||
boundary: '(string|element)',
|
||||
customClass: '(string|function)',
|
||||
sanitize: 'boolean',
|
||||
sanitizeFn: '(null|function)',
|
||||
allowList: 'object',
|
||||
popperConfig: '(null|object|function)'
|
||||
}
|
||||
|
||||
const AttachmentMap = {
|
||||
AUTO: 'auto',
|
||||
TOP: 'top',
|
||||
RIGHT: isRTL() ? 'left' : 'right',
|
||||
BOTTOM: 'bottom',
|
||||
LEFT: isRTL() ? 'right' : 'left'
|
||||
}
|
||||
|
||||
const Default = {
|
||||
animation: true,
|
||||
template: '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div class="tooltip-inner"></div>' +
|
||||
'</div>',
|
||||
trigger: 'hover focus',
|
||||
title: '',
|
||||
delay: 0,
|
||||
html: false,
|
||||
selector: false,
|
||||
placement: 'top',
|
||||
offset: [0, 0],
|
||||
container: false,
|
||||
fallbackPlacements: ['top', 'right', 'bottom', 'left'],
|
||||
boundary: 'clippingParents',
|
||||
customClass: '',
|
||||
sanitize: true,
|
||||
sanitizeFn: null,
|
||||
allowList: DefaultAllowlist,
|
||||
popperConfig: null
|
||||
}
|
||||
|
||||
const Event = {
|
||||
HIDE: `hide${EVENT_KEY}`,
|
||||
HIDDEN: `hidden${EVENT_KEY}`,
|
||||
SHOW: `show${EVENT_KEY}`,
|
||||
SHOWN: `shown${EVENT_KEY}`,
|
||||
INSERTED: `inserted${EVENT_KEY}`,
|
||||
CLICK: `click${EVENT_KEY}`,
|
||||
FOCUSIN: `focusin${EVENT_KEY}`,
|
||||
FOCUSOUT: `focusout${EVENT_KEY}`,
|
||||
MOUSEENTER: `mouseenter${EVENT_KEY}`,
|
||||
MOUSELEAVE: `mouseleave${EVENT_KEY}`
|
||||
}
|
||||
|
||||
const CLASS_NAME_FADE = 'fade'
|
||||
const CLASS_NAME_MODAL = 'modal'
|
||||
const CLASS_NAME_SHOW = 'show'
|
||||
|
||||
const HOVER_STATE_SHOW = 'show'
|
||||
const HOVER_STATE_OUT = 'out'
|
||||
|
||||
const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
|
||||
|
||||
const TRIGGER_HOVER = 'hover'
|
||||
const TRIGGER_FOCUS = 'focus'
|
||||
const TRIGGER_CLICK = 'click'
|
||||
const TRIGGER_MANUAL = 'manual'
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Tooltip extends BaseComponent {
|
||||
constructor(element, config) {
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
||||
}
|
||||
|
||||
super(element)
|
||||
|
||||
// private
|
||||
this._isEnabled = true
|
||||
this._timeout = 0
|
||||
this._hoverState = ''
|
||||
this._activeTrigger = {}
|
||||
this._popper = null
|
||||
|
||||
// Protected
|
||||
this._config = this._getConfig(config)
|
||||
this.tip = null
|
||||
|
||||
this._setListeners()
|
||||
}
|
||||
|
||||
// Getters
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get NAME() {
|
||||
return NAME
|
||||
}
|
||||
|
||||
static get Event() {
|
||||
return Event
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
enable() {
|
||||
this._isEnabled = true
|
||||
}
|
||||
|
||||
disable() {
|
||||
this._isEnabled = false
|
||||
}
|
||||
|
||||
toggleEnabled() {
|
||||
this._isEnabled = !this._isEnabled
|
||||
}
|
||||
|
||||
toggle(event) {
|
||||
if (!this._isEnabled) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event) {
|
||||
const context = this._initializeOnDelegatedTarget(event)
|
||||
|
||||
context._activeTrigger.click = !context._activeTrigger.click
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
context._enter(null, context)
|
||||
} else {
|
||||
context._leave(null, context)
|
||||
}
|
||||
} else {
|
||||
if (this.getTipElement().classList.contains(CLASS_NAME_SHOW)) {
|
||||
this._leave(null, this)
|
||||
return
|
||||
}
|
||||
|
||||
this._enter(null, this)
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
clearTimeout(this._timeout)
|
||||
|
||||
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
|
||||
|
||||
if (this.tip) {
|
||||
this.tip.remove()
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
super.dispose()
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._element.style.display === 'none') {
|
||||
throw new Error('Please use show on visible elements')
|
||||
}
|
||||
|
||||
if (!(this.isWithContent() && this._isEnabled)) {
|
||||
return
|
||||
}
|
||||
|
||||
const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
|
||||
const shadowRoot = findShadowRoot(this._element)
|
||||
const isInTheDom = shadowRoot === null ?
|
||||
this._element.ownerDocument.documentElement.contains(this._element) :
|
||||
shadowRoot.contains(this._element)
|
||||
|
||||
if (showEvent.defaultPrevented || !isInTheDom) {
|
||||
return
|
||||
}
|
||||
|
||||
const tip = this.getTipElement()
|
||||
const tipId = getUID(this.constructor.NAME)
|
||||
|
||||
tip.setAttribute('id', tipId)
|
||||
this._element.setAttribute('aria-describedby', tipId)
|
||||
|
||||
this.setContent()
|
||||
|
||||
if (this._config.animation) {
|
||||
tip.classList.add(CLASS_NAME_FADE)
|
||||
}
|
||||
|
||||
const placement = typeof this._config.placement === 'function' ?
|
||||
this._config.placement.call(this, tip, this._element) :
|
||||
this._config.placement
|
||||
|
||||
const attachment = this._getAttachment(placement)
|
||||
this._addAttachmentClass(attachment)
|
||||
|
||||
const { container } = this._config
|
||||
Data.set(tip, this.constructor.DATA_KEY, this)
|
||||
|
||||
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
||||
container.appendChild(tip)
|
||||
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
|
||||
}
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.update()
|
||||
} else {
|
||||
this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
|
||||
}
|
||||
|
||||
tip.classList.add(CLASS_NAME_SHOW)
|
||||
|
||||
const customClass = typeof this._config.customClass === 'function' ? this._config.customClass() : this._config.customClass
|
||||
if (customClass) {
|
||||
tip.classList.add(...customClass.split(' '))
|
||||
}
|
||||
|
||||
// If this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
// only needed because of broken event delegation on iOS
|
||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children).forEach(element => {
|
||||
EventHandler.on(element, 'mouseover', noop)
|
||||
})
|
||||
}
|
||||
|
||||
const complete = () => {
|
||||
const prevHoverState = this._hoverState
|
||||
|
||||
this._hoverState = null
|
||||
EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
|
||||
|
||||
if (prevHoverState === HOVER_STATE_OUT) {
|
||||
this._leave(null, this)
|
||||
}
|
||||
}
|
||||
|
||||
const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
|
||||
this._queueCallback(complete, this.tip, isAnimated)
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (!this._popper) {
|
||||
return
|
||||
}
|
||||
|
||||
const tip = this.getTipElement()
|
||||
const complete = () => {
|
||||
if (this._isWithActiveTrigger()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._hoverState !== HOVER_STATE_SHOW) {
|
||||
tip.remove()
|
||||
}
|
||||
|
||||
this._cleanTipClass()
|
||||
this._element.removeAttribute('aria-describedby')
|
||||
EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
|
||||
|
||||
if (this._popper) {
|
||||
this._popper.destroy()
|
||||
this._popper = null
|
||||
}
|
||||
}
|
||||
|
||||
const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
|
||||
if (hideEvent.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
|
||||
tip.classList.remove(CLASS_NAME_SHOW)
|
||||
|
||||
// If this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
[].concat(...document.body.children)
|
||||
.forEach(element => EventHandler.off(element, 'mouseover', noop))
|
||||
}
|
||||
|
||||
this._activeTrigger[TRIGGER_CLICK] = false
|
||||
this._activeTrigger[TRIGGER_FOCUS] = false
|
||||
this._activeTrigger[TRIGGER_HOVER] = false
|
||||
|
||||
const isAnimated = this.tip.classList.contains(CLASS_NAME_FADE)
|
||||
this._queueCallback(complete, this.tip, isAnimated)
|
||||
this._hoverState = ''
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this._popper !== null) {
|
||||
this._popper.update()
|
||||
}
|
||||
}
|
||||
|
||||
// Protected
|
||||
|
||||
isWithContent() {
|
||||
return Boolean(this.getTitle())
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
if (this.tip) {
|
||||
return this.tip
|
||||
}
|
||||
|
||||
const element = document.createElement('div')
|
||||
element.innerHTML = this._config.template
|
||||
|
||||
this.tip = element.children[0]
|
||||
return this.tip
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const tip = this.getTipElement()
|
||||
this.setElementContent(SelectorEngine.findOne(SELECTOR_TOOLTIP_INNER, tip), this.getTitle())
|
||||
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
|
||||
}
|
||||
|
||||
setElementContent(element, content) {
|
||||
if (element === null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (isElement(content)) {
|
||||
content = getElement(content)
|
||||
|
||||
// content is a DOM node or a jQuery
|
||||
if (this._config.html) {
|
||||
if (content.parentNode !== element) {
|
||||
element.innerHTML = ''
|
||||
element.appendChild(content)
|
||||
}
|
||||
} else {
|
||||
element.textContent = content.textContent
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (this._config.html) {
|
||||
if (this._config.sanitize) {
|
||||
content = sanitizeHtml(content, this._config.allowList, this._config.sanitizeFn)
|
||||
}
|
||||
|
||||
element.innerHTML = content
|
||||
} else {
|
||||
element.textContent = content
|
||||
}
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
let title = this._element.getAttribute('data-kit-original-title')
|
||||
|
||||
if (!title) {
|
||||
title = typeof this._config.title === 'function' ?
|
||||
this._config.title.call(this._element) :
|
||||
this._config.title
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
updateAttachment(attachment) {
|
||||
if (attachment === 'right') {
|
||||
return 'end'
|
||||
}
|
||||
|
||||
if (attachment === 'left') {
|
||||
return 'start'
|
||||
}
|
||||
|
||||
return attachment
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_initializeOnDelegatedTarget(event, context) {
|
||||
const dataKey = this.constructor.DATA_KEY
|
||||
context = context || Data.get(event.delegateTarget, dataKey)
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(event.delegateTarget, this._getDelegateConfig())
|
||||
Data.set(event.delegateTarget, dataKey, context)
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
_getOffset() {
|
||||
const { offset } = this._config
|
||||
|
||||
if (typeof offset === 'string') {
|
||||
return offset.split(',').map(val => Number.parseInt(val, 10))
|
||||
}
|
||||
|
||||
if (typeof offset === 'function') {
|
||||
return popperData => offset(popperData, this._element)
|
||||
}
|
||||
|
||||
return offset
|
||||
}
|
||||
|
||||
_getPopperConfig(attachment) {
|
||||
const defaultBsPopperConfig = {
|
||||
placement: attachment,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
fallbackPlacements: this._config.fallbackPlacements
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: this._getOffset()
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: this._config.boundary
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
options: {
|
||||
element: `.${this.constructor.NAME}-arrow`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'onChange',
|
||||
enabled: true,
|
||||
phase: 'afterWrite',
|
||||
fn: data => this._handlePopperPlacementChange(data)
|
||||
}
|
||||
],
|
||||
onFirstUpdate: data => {
|
||||
if (data.options.placement !== data.placement) {
|
||||
this._handlePopperPlacementChange(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...defaultBsPopperConfig,
|
||||
...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
|
||||
}
|
||||
}
|
||||
|
||||
_addAttachmentClass(attachment) {
|
||||
this.getTipElement().classList.add(`${CLASS_PREFIX}-${this.updateAttachment(attachment)}`)
|
||||
}
|
||||
|
||||
_getAttachment(placement) {
|
||||
return AttachmentMap[placement.toUpperCase()]
|
||||
}
|
||||
|
||||
_setListeners() {
|
||||
const triggers = this._config.trigger.split(' ')
|
||||
|
||||
triggers.forEach(trigger => {
|
||||
if (trigger === 'click') {
|
||||
EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event))
|
||||
} else if (trigger !== TRIGGER_MANUAL) {
|
||||
const eventIn = trigger === TRIGGER_HOVER ?
|
||||
this.constructor.Event.MOUSEENTER :
|
||||
this.constructor.Event.FOCUSIN
|
||||
const eventOut = trigger === TRIGGER_HOVER ?
|
||||
this.constructor.Event.MOUSELEAVE :
|
||||
this.constructor.Event.FOCUSOUT
|
||||
|
||||
EventHandler.on(this._element, eventIn, this._config.selector, event => this._enter(event))
|
||||
EventHandler.on(this._element, eventOut, this._config.selector, event => this._leave(event))
|
||||
}
|
||||
})
|
||||
|
||||
this._hideModalHandler = () => {
|
||||
if (this._element) {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
|
||||
EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
|
||||
|
||||
if (this._config.selector) {
|
||||
this._config = {
|
||||
...this._config,
|
||||
trigger: 'manual',
|
||||
selector: ''
|
||||
}
|
||||
} else {
|
||||
this._fixTitle()
|
||||
}
|
||||
}
|
||||
|
||||
_fixTitle() {
|
||||
const title = this._element.getAttribute('title')
|
||||
const originalTitleType = typeof this._element.getAttribute('data-kit-original-title')
|
||||
|
||||
if (title || originalTitleType !== 'string') {
|
||||
this._element.setAttribute('data-kit-original-title', title || '')
|
||||
if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
|
||||
this._element.setAttribute('aria-label', title)
|
||||
}
|
||||
|
||||
this._element.setAttribute('title', '')
|
||||
}
|
||||
}
|
||||
|
||||
_enter(event, context) {
|
||||
context = this._initializeOnDelegatedTarget(event, context)
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[
|
||||
event.type === 'focusin' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
||||
] = true
|
||||
}
|
||||
|
||||
if (context.getTipElement().classList.contains(CLASS_NAME_SHOW) || context._hoverState === HOVER_STATE_SHOW) {
|
||||
context._hoverState = HOVER_STATE_SHOW
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout)
|
||||
|
||||
context._hoverState = HOVER_STATE_SHOW
|
||||
|
||||
if (!context._config.delay || !context._config.delay.show) {
|
||||
context.show()
|
||||
return
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(() => {
|
||||
if (context._hoverState === HOVER_STATE_SHOW) {
|
||||
context.show()
|
||||
}
|
||||
}, context._config.delay.show)
|
||||
}
|
||||
|
||||
_leave(event, context) {
|
||||
context = this._initializeOnDelegatedTarget(event, context)
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[
|
||||
event.type === 'focusout' ? TRIGGER_FOCUS : TRIGGER_HOVER
|
||||
] = context._element.contains(event.relatedTarget)
|
||||
}
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout)
|
||||
|
||||
context._hoverState = HOVER_STATE_OUT
|
||||
|
||||
if (!context._config.delay || !context._config.delay.hide) {
|
||||
context.hide()
|
||||
return
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(() => {
|
||||
if (context._hoverState === HOVER_STATE_OUT) {
|
||||
context.hide()
|
||||
}
|
||||
}, context._config.delay.hide)
|
||||
}
|
||||
|
||||
_isWithActiveTrigger() {
|
||||
for (const trigger in this._activeTrigger) {
|
||||
if (this._activeTrigger[trigger]) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
const dataAttributes = Manipulator.getDataAttributes(this._element)
|
||||
|
||||
Object.keys(dataAttributes).forEach(dataAttr => {
|
||||
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
|
||||
delete dataAttributes[dataAttr]
|
||||
}
|
||||
})
|
||||
|
||||
config = {
|
||||
...this.constructor.Default,
|
||||
...dataAttributes,
|
||||
...(typeof config === 'object' && config ? config : {})
|
||||
}
|
||||
|
||||
config.container = config.container === false ? document.body : getElement(config.container)
|
||||
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show: config.delay,
|
||||
hide: config.delay
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof config.title === 'number') {
|
||||
config.title = config.title.toString()
|
||||
}
|
||||
|
||||
if (typeof config.content === 'number') {
|
||||
config.content = config.content.toString()
|
||||
}
|
||||
|
||||
typeCheckConfig(NAME, config, this.constructor.DefaultType)
|
||||
|
||||
if (config.sanitize) {
|
||||
config.template = sanitizeHtml(config.template, config.allowList, config.sanitizeFn)
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_getDelegateConfig() {
|
||||
const config = {}
|
||||
|
||||
if (this._config) {
|
||||
for (const key in this._config) {
|
||||
if (this.constructor.Default[key] !== this._config[key]) {
|
||||
config[key] = this._config[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_cleanTipClass() {
|
||||
const tip = this.getTipElement()
|
||||
const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX)
|
||||
if (tabClass !== null && tabClass.length > 0) {
|
||||
tabClass.map(token => token.trim())
|
||||
.forEach(tClass => tip.classList.remove(tClass))
|
||||
}
|
||||
}
|
||||
|
||||
_handlePopperPlacementChange(popperData) {
|
||||
const { state } = popperData
|
||||
|
||||
if (!state) {
|
||||
return
|
||||
}
|
||||
|
||||
this.tip = state.elements.popper
|
||||
this._cleanTipClass()
|
||||
this._addAttachmentClass(this._getAttachment(state.placement))
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const data = Tooltip.getOrCreateInstance(this, config)
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError(`No method named "${config}"`)
|
||||
}
|
||||
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .Tooltip to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
defineJQueryPlugin(Tooltip)
|
||||
|
||||
module.exports = Tooltip;
|
||||
|
||||
return module.exports;
|
||||
});
|
||||
@@ -0,0 +1,171 @@
|
||||
:root {
|
||||
--kit-tooltip-font-size: 0.8em;
|
||||
--kit-tooltip-color: #ffffff;
|
||||
--kit-tooltip-content-color: #212121fa;
|
||||
--kit-tooltip-border-color: #212121fa;
|
||||
--kit-tooltip-border-width: 0px;
|
||||
--kit-tooltip-arrow-width: 0.8em;
|
||||
--math-sqrt-2: 1.414213562373095;
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
white-space: normal;
|
||||
line-break: auto;
|
||||
font-size: var(--kit-tooltip-font-size);
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tooltip .arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0.8rem;
|
||||
height: 0.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip .arrow::before {
|
||||
border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
width: var(--kit-tooltip-arrow-width);
|
||||
height: var(--kit-tooltip-arrow-width);
|
||||
background-color: var(--kit-tooltip-content-color);
|
||||
box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
|
||||
}
|
||||
|
||||
.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
|
||||
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
|
||||
}
|
||||
|
||||
.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
|
||||
bottom: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
/* left: 50% !important; */
|
||||
/* transform: translate(-50%, 0); */
|
||||
}
|
||||
|
||||
.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: rotate(
|
||||
225deg
|
||||
) translate(0, 100%);
|
||||
transform-origin: 0 100%;
|
||||
border-left-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
|
||||
}
|
||||
|
||||
.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
|
||||
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
|
||||
}
|
||||
|
||||
.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
|
||||
left: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
top: 50% !important;
|
||||
transform: translate(0px, -50%);
|
||||
}
|
||||
|
||||
.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: rotate(
|
||||
225deg
|
||||
) translate(25%, -50%);
|
||||
transform-origin: 75% 0;
|
||||
border-right-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
}
|
||||
|
||||
.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
|
||||
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
|
||||
}
|
||||
|
||||
.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
|
||||
top: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
/*left: 50% !important;*/
|
||||
/*transform: translate(-50%, 0);*/
|
||||
}
|
||||
|
||||
.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: rotate(
|
||||
45deg
|
||||
) translate(0, 0);
|
||||
transform-origin: 0 0;
|
||||
border-left-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
|
||||
}
|
||||
|
||||
::before {}
|
||||
|
||||
.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
|
||||
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
|
||||
}
|
||||
|
||||
.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
|
||||
right: 0;
|
||||
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
|
||||
top: 50% !important;
|
||||
transform: translate(0px, -50%);
|
||||
}
|
||||
|
||||
.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: rotate(
|
||||
45deg
|
||||
) translate(-25%, -50%);
|
||||
transform-origin: 25% 0;
|
||||
border-right-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
border-top-color: var(
|
||||
--kit-tooltip-border-color);
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: var(--kit-tooltip-color);
|
||||
text-align: center;
|
||||
background-color: var(--kit-tooltip-content-color);
|
||||
border-radius: 0.25rem;
|
||||
border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
|
||||
box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
kit.PluginManager.register('utils', function(module, exports, require){
|
||||
var StackExecutionLimiter = (function () {
|
||||
var stack = function (context, callback, timeout = 1000) {
|
||||
this.counter = 0;
|
||||
this.timerId = 0;
|
||||
this.timeout = 0;
|
||||
this.arguments = null;
|
||||
this.context = null;
|
||||
this.setContext(context);
|
||||
this.setCallback(callback);
|
||||
this.setTimeout(timeout);
|
||||
};
|
||||
stack.prototype.setCallback = function(callback){
|
||||
this.callback = callback;
|
||||
};
|
||||
stack.prototype.setContext = function(context){
|
||||
this.context = context || window;
|
||||
};
|
||||
stack.prototype.setTimeout = function(timeout){
|
||||
this.timeout = timeout;
|
||||
};
|
||||
stack.prototype.exec = function() {
|
||||
this.arguments = arguments;
|
||||
this.counter++;
|
||||
|
||||
if(this.timerId === 0) {
|
||||
this.__exec(this.counter);
|
||||
}
|
||||
};
|
||||
stack.prototype.__exec = function (counter) {
|
||||
this.timerId = setTimeout((function(){
|
||||
if(this.counter > counter) {
|
||||
this.__exec(this.counter);
|
||||
return null;
|
||||
}
|
||||
this.timerId = 0;
|
||||
}).bind(this), this.timeout);
|
||||
this.callback.apply(this.context, this.arguments);
|
||||
};
|
||||
stack.prototype.reset = function () {
|
||||
clearTimeout(this.timerId);
|
||||
this.timerId = 0;
|
||||
};
|
||||
return stack;
|
||||
})();
|
||||
|
||||
|
||||
return module.exports = {
|
||||
StackExecutionLimiter: StackExecutionLimiter
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @var array $arParams
|
||||
*/
|
||||
/**
|
||||
* type : button | reset | submit
|
||||
*/
|
||||
|
||||
$preloader = \Wt\Core\Tools::isTrue($arParams['PRELOADER']);
|
||||
|
||||
use Wt\Core\Type\Str as Str;
|
||||
|
||||
?><button
|
||||
<?if(\Wt\Core\Tools::isTrue($arParams['DISABLED'])){?>disabled<?}?>
|
||||
aria-label="<?=$arParams['LABEL']?>"
|
||||
type="<?=$arParams['TYPE']?:'button'?>"
|
||||
<?if($arParams['TITLE']){?>title="<?=$arParams['TITLE']?>"<?}?>
|
||||
<?if($arParams['NAME']){?>name="<?=$arParams['NAME']?>"<?}?>
|
||||
<?if($arParams['ENTITY']){?>data-entity="<?=$arParams['ENTITY']?>"<?}?>
|
||||
<?if($arParams['VALUE']){?>value="<?=$arParams['VALUE']?>"<?}?>
|
||||
class="kit-button <?=$arParams['CLASS']?:'kit-button--material kit-button--radius'?> <?=$arParams['ADD_CLASS']?><?=(!$preloader?' not-preloader ':'')?>"
|
||||
onclick="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['ONCLICK'])?>"
|
||||
<?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR']);?>
|
||||
><div class="kit-button__icon kit-icon"><?=$arParams['ICON']?></div>
|
||||
<div class="kit-button__label kit-line-clamp"><?=$arParams['LABEL']?:$arParams['NAME']?:''?></div>
|
||||
<?if($preloader){?><span class="circle-preloader"></span><?}?>
|
||||
</button><?
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
app()->service()->assets()->setPlugin('collapse');
|
||||
$arParams['ID'] = $arParams['ID']?:'collapse_'.\Wt\Core\Type\Str::random(6);
|
||||
?>
|
||||
<div class="accordion" id="<?=$arParams['ID']?>">
|
||||
<?foreach ($arParams['ITEMS'] as $key => $data) {
|
||||
$data['ID'] = $data['ID']?:$arParams['ID'].'_'.$key;
|
||||
$data['SHOW'] = \Wt\Core\Tools::isTrue($data['SHOW']);
|
||||
?>
|
||||
<div class="accordion-item">
|
||||
<h4 class="accordion-header" id="<?=$data['ID'].'_header'?>">
|
||||
<button class="accordion-button<?if(!$data['SHOW']){?> collapsed<?}?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?=$data['ID'].'_body'?>" aria-expanded="true" aria-controls="<?=$data['ID'].'_body'?>">
|
||||
<?=$data['HEADER']?>
|
||||
</button>
|
||||
</h4>
|
||||
<div id="<?=$data['ID'].'_body'?>" class="accordion-collapse collapse<?if($data['SHOW']){?> show<?}?>" aria-labelledby="<?=$data['ID'].'_header'?>" data-bs-parent="#<?=$arParams['ID']?>">
|
||||
<div class="accordion-body">
|
||||
<?=$data['BODY']?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?}?>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="kit-field__hint kit-icon" data-toggle="tooltip" title="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['TITLE'])?>">
|
||||
<?app()->service()->templater()->render('kit:svg/hint')?>
|
||||
</div>
|
||||
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
/**
|
||||
* @var array $arParams
|
||||
*/
|
||||
|
||||
use Wt\Core\Type\Str as Str;
|
||||
use Wt\Core\Tools as Tools;
|
||||
|
||||
//include ".con/fields.php";
|
||||
|
||||
$arParams['TYPE'] = $arParams['TYPE']?:'hidden';
|
||||
$isReadonly = Tools::isTrue($arParams['READONLY']);
|
||||
$isRequired = Tools::isTrue($arParams['REQUIRED']);
|
||||
$isChecked = Tools::isTrue($arParams['CHECKED']);
|
||||
$isHint = boolval(strlen($arParams['HINT']));
|
||||
$isDatepicker = Tools::isTrue($arParams['DATEPICKER']) || is_array($arParams['DATEPICKER']);
|
||||
|
||||
$label = $arParams['LABEL'];
|
||||
|
||||
if($isDatepicker && !is_array($isDatepicker)) {
|
||||
//include ".con/datepicker.php";
|
||||
$arParams['ADD_CLASS'] .= ' datepicker-here';
|
||||
$arParams['ATTR'] .= ' data-position="bottom left" data-timepicker="true"';
|
||||
}
|
||||
if($isHint) {
|
||||
//include ".con/hint.php";
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<label class="kit-field kit-field--text<?=($hidden?' hidden':'')?> <?=$arParams['FIELD_CLASS']?>"<?
|
||||
if(strlen($arParams['ID'])){?> for="<?=$arParams['ID']?>"<?}?>>
|
||||
<input<?
|
||||
if($isReadonly){?> readonly<?}
|
||||
if($isRequired){?> required<?}
|
||||
if($isChecked){?> checked<?}
|
||||
|
||||
if(strlen($arParams['ID'])){?> id="<?=$arParams['ID']?>"<?}
|
||||
?>
|
||||
data-dirty="<?=($arParams['PLACEHOLDER'] || $arParams['VALUE'])?'true':'false'?>"
|
||||
type="<?=$arParams['TYPE']?>"
|
||||
name="<?=$arParams['NAME']?>"
|
||||
class="kit-field__input <?=$arParams['CLASS']?> <?=$arParams['ADD_CLASS']?><?
|
||||
if(strlen($arParams['MESSAGE'])) {
|
||||
if(Tools::isSuccess($arParams['MESSAGE_TYPE'])){
|
||||
?> kit-field--success<?
|
||||
} else {
|
||||
?> kit-field--error<?
|
||||
}
|
||||
}
|
||||
?>"
|
||||
value="<?=Str::safeHtmlAttr($arParams['VALUE'])?>"
|
||||
maxlength="255"
|
||||
placeholder="<?=Str::safeHtmlAttr($arParams['PLACEHOLDER']).''?>"
|
||||
<?=$arParams['ATTR']?>
|
||||
autocomplete="off"
|
||||
><?
|
||||
if($isHint){?><div class="kit-field__hint kit-icon" data-toggle="tooltip" data-kit-html="true" title="<?=Str::safeHtmlAttr($arParams['HINT'])?>" data-placement="top">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="14px" height="14px" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd;" viewBox="0 0 5.36 5.36"><g id="Слой_x0020_1"><path class="fil0" d="M2.68 0c1.48,0 2.68,1.2 2.68,2.68 0,1.48 -1.2,2.68 -2.68,2.68 -1.48,0 -2.68,-1.2 -2.68,-2.68 0,-1.48 1.2,-2.68 2.68,-2.68zm-0.48 2.98c0.21,-0.16 0.37,-0.34 0.5,-0.55 0.13,-0.2 0.19,-0.41 0.19,-0.62 0,-0.2 -0.08,-0.3 -0.23,-0.3 -0.07,0 -0.12,0.02 -0.16,0.06 -0.04,0.04 -0.06,0.1 -0.06,0.17 0,0.07 0.02,0.15 0.05,0.24l-0.64 0.15c-0.05,-0.14 -0.07,-0.28 -0.07,-0.41 0,-0.25 0.08,-0.45 0.23,-0.6 0.16,-0.14 0.38,-0.21 0.66,-0.21 0.29,0 0.51,0.08 0.67,0.23 0.16,0.15 0.24,0.37 0.24,0.65 0,0.26 -0.06,0.5 -0.19,0.72 -0.13,0.22 -0.31,0.42 -0.55,0.61l0 0.42 -0.64 0 0 -0.56zm-0.02 0.81l0.69 0 0 0.67 -0.69 0 0 -0.67z"/></g></svg>
|
||||
</div><?}
|
||||
?>
|
||||
<div class="kit-field__label"><div class="kit-field__label-content kit-line-clamp"><?=$label;?></div><?
|
||||
if(in_array($arParams['TYPE'], ['radio', 'checkbox'])) {?>
|
||||
<span class="kit-field__icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>
|
||||
</span>
|
||||
<?
|
||||
}
|
||||
?></div>
|
||||
<div class="kit-field__message"><?=$arParams['MESSAGE']?></div>
|
||||
<div class="kit-field__hr"></div>
|
||||
</label>
|
||||
<?
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
|
||||
|
||||
?>
|
||||
<div class="modal fade" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><?=$arParams['TITLE']?></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<svg class xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
|
||||
</button>
|
||||
<?=$arParams['HEADER']?>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<?=$arParams['BODY']?>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<?=$arParams['FOOTER']?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
use Bx\Kit\Lib\Type\Str as StrAlias;
|
||||
|
||||
$root = '';
|
||||
if(strlen($arParams['ROOT'])) {
|
||||
$root = StrAlias::safeHtmlAttr($arParams['ROOT']) . ':';
|
||||
}
|
||||
|
||||
|
||||
?><meta property="<?=$root?><?= StrAlias::safeHtmlAttr($arParams['PROPERTY']?:$arParams['NAME'])?>" content="<?= StrAlias::safeHtmlAttr($arParams['CONTENT']?:$arParams['VALUE'])?>">
|
||||
@@ -0,0 +1,15 @@
|
||||
<?
|
||||
use Wt\Core\Type;
|
||||
?>
|
||||
<picture class="kit-picture <?=$arParams['CLASS']?>">
|
||||
<?
|
||||
$webp = new \Bx\Kit\Image\Webp($_SERVER['DOCUMENT_ROOT'] . $arParams['SRC']);
|
||||
if($webp->convert()->isSuccess()) {
|
||||
$webpSrc = $webp->getRelativePath();
|
||||
?><source srcset="<?=$webpSrc?>" type="image/webp"><?
|
||||
}
|
||||
?>
|
||||
<img src="<?=$arParams['SRC']?>" alt="<?=Type\Str::safeHtmlAttr($arParams['ALT'])?>"<?if($arParams['TITLE']) {?> title="<?=Type\Str::safeHtmlAttr($arParams['TITLE'])?>"<?}?>
|
||||
<?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR']);?>
|
||||
/>
|
||||
</picture>
|
||||
@@ -0,0 +1,16 @@
|
||||
<picture class="kit-picture">
|
||||
<?
|
||||
$webp = new \Bx\Kit\Image\Webp($_SERVER['DOCUMENT_ROOT'] . $arParams['SRC']);
|
||||
if($webp->convert()->isSuccess()) {
|
||||
$webpSrc = $webp->getRelativePath();
|
||||
?><source class="owl-lazy" data-srcset="<?=$webpSrc?>" type="image/webp"><?
|
||||
}
|
||||
?>
|
||||
<img class="kit-img owl-lazy" data-src="<?=$arParams['SRC']?>" alt="<?=\Bx\Kit\Lib\Type\Str::safeHtmlAttr($arParams['ALT'])?>"<?if($arParams['TITLE']) {?> title="<?=\Bx\Kit\Lib\Type\Str::safeHtmlAttr($arParams['TITLE'])?>"<?}?>
|
||||
<?
|
||||
if($arParams['ATTR']) {
|
||||
echo \Bx\Kit\Template::get('attr', $arParams['ATTR']);
|
||||
}
|
||||
?>
|
||||
/>
|
||||
</picture>
|
||||
@@ -0,0 +1,133 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @var array $arParams
|
||||
*/
|
||||
use \Wt\Core\Type;
|
||||
|
||||
$arParamsDefault = [
|
||||
'AUTO_SELECT' => true,
|
||||
'OPTIONS_VALUE_KEY' => 'ID',
|
||||
'OPTIONS_TEXT_KEY' => 'NAME',
|
||||
'ADD_CLASS' => '',
|
||||
'CLASS' => '',
|
||||
'LABEL_CLASS' => '',
|
||||
'ID' => '',
|
||||
'NAME' => '',
|
||||
'ONCHANGE' => '',
|
||||
'HIDDEN' => true, // || 'TYPE' => 'hidden'
|
||||
'SELECTED' => ' id ',
|
||||
'LABEL' => '',
|
||||
'MULTIPLE' => '',
|
||||
'ARROW_IN_LABEL' => false,
|
||||
'OPTIONS_HTML' => '', // !!
|
||||
'CHECK_DIRTY' => true, // !!
|
||||
'OPTIONS' => [],
|
||||
];
|
||||
$optionDefault = [
|
||||
'ID' => '',
|
||||
'NAME' => '',
|
||||
'ATTR' => '',
|
||||
'VISIBLE' => true,
|
||||
'SELECTED' => 'Y',
|
||||
'DISABLED' => 'Y', // || RESTRICTED
|
||||
];
|
||||
|
||||
if(!isset($arParams['AUTO_SELECT'])) {
|
||||
$arParams['AUTO_SELECT'] = $arParamsDefault['AUTO_SELECT'];
|
||||
}
|
||||
$arParams['AUTO_SELECT'] = \Bx\Kit\Tools::isTrue($arParams['AUTO_SELECT']);
|
||||
|
||||
if(!isset($arParams['OPTIONS_VALUE_KEY'])) {
|
||||
$arParams['OPTIONS_VALUE_KEY'] = $arParamsDefault['OPTIONS_VALUE_KEY'];
|
||||
}
|
||||
if(!isset($arParams['OPTIONS_TEXT_KEY'])) {
|
||||
$arParams['OPTIONS_TEXT_KEY'] = $arParamsDefault['OPTIONS_TEXT_KEY'];
|
||||
}
|
||||
$arParams['OPTIONS'] = (array)$arParams['OPTIONS'];
|
||||
|
||||
|
||||
$arrowInLabel = \Bx\Kit\Tools::isTrue($arParams['ARROW_IN_LABEL']);
|
||||
|
||||
if(!isset($arParams['CHECK_DIRTY'])) {
|
||||
$arParams['CHECK_DIRTY'] = $arParamsDefault['CHECK_DIRTY'];
|
||||
}
|
||||
$checkDirty = \Bx\Kit\Tools::isTrue($arParams['CHECK_DIRTY']);
|
||||
|
||||
$optionSelectedArray = [];
|
||||
$hidden = \Bx\Kit\Tools::isTrue($arParams['HIDDEN']) || ($arParams['TYPE'] == 'hidden');
|
||||
$multiple = \Bx\Kit\Tools::isTrue($arParams['MULTIPLE']);
|
||||
$optionsHtml = '';
|
||||
|
||||
if($arParams['OPTIONS']) {
|
||||
if(strlen($arParams['SELECTED'])) {
|
||||
foreach ($arParams['OPTIONS'] as $option) {
|
||||
if(isset($option['VISIBLE']) && !\Bx\Kit\Tools::isTrue($option['VISIBLE'])) continue;
|
||||
if($arParams['SELECTED'] == Type\Arr::get($option, $arParams['OPTIONS_VALUE_KEY'])) {
|
||||
$optionSelectedArray = $option;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if($arParams['AUTO_SELECT']) {
|
||||
if(!$optionSelectedArray) {
|
||||
foreach ($arParams['OPTIONS'] as $option) {
|
||||
if(isset($option['VISIBLE']) && !\Bx\Kit\Tools::isTrue($option['VISIBLE'])) continue;
|
||||
if(\Bx\Kit\Tools::isTrue($option['SELECTED'])) {
|
||||
$optionSelectedArray = $option;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(!$optionSelectedArray) {
|
||||
$optionSelectedArray = reset($arParams['OPTIONS']);
|
||||
}
|
||||
}
|
||||
}
|
||||
$optionsCount = 0;
|
||||
foreach ($arParams['OPTIONS'] as $option) {
|
||||
if(isset($option['VISIBLE']) && !\Bx\Kit\Tools::isTrue($option['VISIBLE'])) continue;
|
||||
$isSelected = (Type\Arr::get($optionSelectedArray, $arParams['OPTIONS_VALUE_KEY']) == Type\Arr::get($option, $arParams['OPTIONS_VALUE_KEY']));
|
||||
$isDisabled = \Bx\Kit\Tools::isTrue($option['DISABLED']) || \Bx\Kit\Tools::isTrue($option['RESTRICTED']);
|
||||
|
||||
$optionsCount++;
|
||||
$optionsHtml .= ' <option value="'.Type\Arr::get($option, $arParams['OPTIONS_VALUE_KEY']).'" '. \Bx\Kit\Node\Lib::getAttrByArray($option['ATTR']) .
|
||||
($isSelected?' selected':'').''.
|
||||
($isDisabled?' disabled':'').'>'.Type\Arr::get($option, $arParams['OPTIONS_TEXT_KEY']).'</option>';
|
||||
}
|
||||
|
||||
|
||||
|
||||
?><label class="kit-field kit-field--select<?=($hidden?' kit-hidden':'')?> <?=$arParams['LABEL_CLASS']?>">
|
||||
<select data-dirty="<?=(!$checkDirty || $optionSelectedArray)?'true':'false'?>"
|
||||
name="<?=$arParams['NAME']?>"
|
||||
<?if($arParams['ID']){?>id="<?=$arParams['ID']?>"<?}?>
|
||||
<?if($multiple){?> multiple<?}?>
|
||||
<?if($arParams['ONCHANGE']){?> onchange="<?=\Bx\Kit\Lib\Type\Str::safeHtmlAttr($arParams['ONCHANGE'])?>"<?}?>
|
||||
class="kit-field__input <?=$arParams['CLASS']?> <?=$arParams['ADD_CLASS']?>"
|
||||
<?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR'])?>
|
||||
<?if($arParams['PLACEHOLDER']){?>data-placeholder="<?=$arParams['PLACEHOLDER']?>"<?}?>
|
||||
>
|
||||
<?
|
||||
echo $optionsHtml?:$arParams['OPTIONS_HTML'];
|
||||
?>
|
||||
</select>
|
||||
<?
|
||||
if($arParams['HINT']){
|
||||
app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);
|
||||
}?>
|
||||
<?if(!$arrowInLabel){?><span class="kit-field__arrow"><?=app()->service()->templater()->get('kit:svg/chevronAnimate')?></span><?}?>
|
||||
<span class="kit-field__display"><?=Type\Arr::get($optionSelectedArray, $arParams['OPTIONS_TEXT_KEY'])?:$arParams['PLACEHOLDER']?></span>
|
||||
<span class="kit-field__label"><?=$arParams['LABEL']?:$arParams['NAME']?:''?><?if($arrowInLabel){?><span class="kit-field__arrow"><?=\Bx\Kit\Template::get('svg/chevronAnimate')?></span><?}?></span>
|
||||
<span class="kit-field__error"></span>
|
||||
<span class="kit-field__hr"></span>
|
||||
<?if($arParams['AREA_LEFT']){?><div class="kit-field__area-left"><?=$arParams['AREA_LEFT']?></div><?}?>
|
||||
<?if($arParams['AREA_RIGHT']){?><div class="kit-field__area-right"><?=$arParams['AREA_RIGHT']?></div><?}?>
|
||||
</label><?
|
||||
|
||||
?>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg class="kit-field__arrow-svg" viewBox="0 0 24 24" stroke="currentColor" focusable="false"><g transform="translate(9.7,12) rotate(45)"><path class="kit-field__arrow-half-left" d="M-4.2 0 L4.2 0" stroke-width="2"></path></g><g transform="translate(14.3,12) rotate(-45)"><path class="kit-field__arrow-half-right" d="M-4.2 0 L4.2 0" stroke-width="2"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 367 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="24px" height="24px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 5.36 5.36"><g><path d="M2.68 0c1.48,0 2.68,1.2 2.68,2.68 0,1.48 -1.2,2.68 -2.68,2.68 -1.48,0 -2.68,-1.2 -2.68,-2.68 0,-1.48 1.2,-2.68 2.68,-2.68zm-0.48 2.98c0.21,-0.16 0.37,-0.34 0.5,-0.55 0.13,-0.2 0.19,-0.41 0.19,-0.62 0,-0.2 -0.08,-0.3 -0.23,-0.3 -0.07,0 -0.12,0.02 -0.16,0.06 -0.04,0.04 -0.06,0.1 -0.06,0.17 0,0.07 0.02,0.15 0.05,0.24l-0.64 0.15c-0.05,-0.14 -0.07,-0.28 -0.07,-0.41 0,-0.25 0.08,-0.45 0.23,-0.6 0.16,-0.14 0.38,-0.21 0.66,-0.21 0.29,0 0.51,0.08 0.67,0.23 0.16,0.15 0.24,0.37 0.24,0.65 0,0.26 -0.06,0.5 -0.19,0.72 -0.13,0.22 -0.31,0.42 -0.55,0.61l0 0.42 -0.64 0 0 -0.56zm-0.02 0.81l0.69 0 0 0.67 -0.69 0 0 -0.67z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 951 B |
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="19.826086" width="24" version="1.1" x="0" y="0" viewBox="0 0 24 19.826086">
|
||||
<path
|
||||
style="fill:none;stroke:currentColor;stroke-width:1.73913;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="0.96"
|
||||
d="m 23.130435,16.946829 c 0,0.533055 -0.213241,1.04422 -0.592696,1.421078 -0.379548,0.376858 -0.89433,0.588615 -1.431003,0.588615 H 2.8932821 c -0.5367281,0 -1.0514643,-0.211757 -1.4309843,-0.588615 -0.37952,-0.376858 -0.59273279,-0.888023 -0.59273279,-1.421078 V 5.8937227 c 0,-0.5329994 0.21321279,-1.0441646 0.59273279,-1.4210504 0.37952,-0.3768858 0.8942562,-0.5886145 1.4309843,-0.5886145 h 4.047425 L 8.9644242,0.86956501 h 6.0711238 l 2.023698,3.01449279 h 4.04749 c 0.536673,0 1.051455,0.2117287 1.431003,0.5886145 0.379455,0.3768858 0.592696,0.888051 0.592696,1.4210504 z" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:currentColor;stroke-opacity:1;stroke-width:1.8;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="0.927536"
|
||||
d="m 12,14.937229 c 2.235362,0 4.047397,-1.799513 4.047397,-4.019386 0,-2.2197794 -1.812035,-4.0192925 -4.047397,-4.0192925 -2.2353625,0 -4.0474344,1.7995131 -4.0474344,4.0192925 0,2.219873 1.8120719,4.019386 4.0474344,4.019386 z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.400016 15.999984" y="0" x="0" height="17.142828" width="24" version="1.1">
|
||||
<path d="M 20.000016,2.5e-8 H 2.4 C 1.0745156,2.5e-8 0,1.0745156 0,2.4 v 11.199984 c 0,1.325485 1.0745156,2.4 2.4,2.4 h 17.600016 c 1.325484,0 2.4,-1.074515 2.4,-2.4 V 2.4 C 22.400016,1.0745156 21.3255,2.5e-8 20.000016,2.5e-8 Z M 20.799984,9.2687813 15.765609,4.2344063 c -0.312375,-0.3123282 -0.818812,-0.3123282 -1.131187,0 L 8.0000156,10.868766 5.3655937,8.2343438 c -0.312375,-0.3123282 -0.8188125,-0.3123282 -1.1311875,0 L 1.5999844,10.868766 V 2.4 C 1.5999844,1.9581563 1.9581562,1.5999844 2.4,1.5999844 h 17.600016 c 0.441843,0 0.800015,0.3581719 0.800015,0.8000156 v 6.8687813 z"/>
|
||||
<circle cx="7.2000003" cy="5.5999689" r="2.4000001"/></svg>
|
||||
|
After Width: | Height: | Size: 781 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="23" width="24" version="1.1" viewBox="0 0 24 23">
|
||||
<path d="M 12,0 15.708206,7.57114 24,8.7852214 18,14.678529 19.416343,23 12,19.07107 4.5835886,23 6,14.678529 0,8.7852214 8.2917943,7.57114 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 253 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1" width="24" height="24">
|
||||
<path stroke-width="2.15306" style="fill:none;fill-opacity:1;stroke:currentColor;stroke-opacity:1" d="M 20.555124,3.6060403 C 20.282198,3.3579273 20.073721,3.2127293 19.505042,3.1120523 L 8.0635534,3.1225293 c 0,0 -0.5220735,-0.07778 -0.823884,0.190715 -0.2786127,0.247841 -0.2297113,0.753532 -0.2297113,0.753532 L 8.9928389,14.63065 13.396911,22.887584 c 0.890464,-0.04995 1.649319,-0.779554 1.649319,-1.691498 v -5.60399 l 6.101959,0.06238 c 0.500086,0 0.967605,-0.179651 1.335528,-0.504338 0.344913,-0.304324 0.497853,-0.770993 0.414163,-1.162137 L 21.254731,4.8340163 v 0 C 21.116234,4.3391983 20.881493,3.9027393 20.555124,3.6060403 Z M 1.254434,4.0243323 3.2236276,14.742034 H 4.8115658 L 2.8423724,4.0243323 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 829 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" version="1.1" viewBox="0 0 24 24">
|
||||
<path style="fill:none;fill-opacity:1;stroke:currentColor;stroke-opacity:1" stroke-width="2.15306" d="m 20.555124,20.394896 c -0.272926,0.248113 -0.481403,0.393311 -1.050082,0.493988 L 8.0635534,20.878407 c 0,0 -0.5220735,0.07778 -0.823884,-0.190715 C 6.9610567,20.439851 7.0099581,19.93416 7.0099581,19.93416 L 8.9928389,9.3702865 13.396911,1.1133523 c 0.890464,0.049951 1.649319,0.7795542 1.649319,1.6914978 V 8.40884 l 6.101959,-0.062376 c 0.500086,0 0.967605,0.1796509 1.335528,0.5043388 0.344913,0.3043237 0.497853,0.7709927 0.414163,1.1621372 l -1.643149,9.15398 v 0 c -0.138497,0.494818 -0.373238,0.931277 -0.699607,1.227976 z M 1.254434,19.976604 3.2236276,9.2589025 H 4.8115658 L 2.8423724,19.976604 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 824 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path d="m 20.161156,24 c -0.855862,-0.01245 -1.014621,-0.781552 -1.181227,-1.46087 -0.503483,-2.44743 -3.427525,-4.344664 -6.990596,-4.344664 -3.56307,0 -6.467747,1.878261 -6.9712243,4.344664 C 4.7787877,23.452898 4.5326852,23.976047 3.8175063,24 2.9493538,23.980595 2.6408315,23.199363 2.7248958,22.249522 c 0.755216,-3.471936 4.6363164,-6.293791 9.2644352,-6.293791 4.628119,0 8.481657,2.637154 9.217508,6.071146 C 21.413876,23.161435 20.986599,23.987249 20.161156,24 Z M 11.989331,13.849802 c -3.8922668,0 -7.068047,-3.111462 -7.068047,-6.9249008 C 4.921284,3.1114625 8.0970642,0 11.989331,0 c 3.892268,0 7.068048,3.1114625 7.068048,6.9249012 0,3.8134388 -3.17578,6.9249008 -7.068048,6.9249008 z m 0,-11.6110668 c -2.6335734,0 -4.7830343,2.0869565 -4.7830343,4.6671937 0,2.5802371 2.1494609,4.6861661 4.7830343,4.6861661 2.633574,0 4.783035,-2.105929 4.783035,-4.6861661 0,-2.5802372 -2.149461,-4.6671937 -4.783035,-4.6671937 z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
/**
|
||||
* @var
|
||||
*/
|
||||
?>
|
||||
<script>
|
||||
var dataLayer = window.dataLayer || [];
|
||||
dataLayer.push({
|
||||
'google_tag_params': <? echo json_encode($arParams['CONTENT']);?>
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user