no more reactive labels and breakpoint changes in forms
This commit is contained in:
Felix Hamann
parent
a2d56683ab
commit
c18dbae6f9
@ -3,27 +3,6 @@
|
||||
|
||||
window.utils = window.utils || {};
|
||||
|
||||
// makes <label> smaller if <input> is focussed
|
||||
window.utils.reactiveInputLabel = function(input, label) {
|
||||
// updates to dom
|
||||
if (input.value.length > 0) {
|
||||
label.classList.add('reactive-label--small');
|
||||
}
|
||||
// add event listeners
|
||||
input.addEventListener('focus', function() {
|
||||
label.classList.add('reactive-label--small');
|
||||
});
|
||||
label.addEventListener('click', function() {
|
||||
label.classList.add('reactive-label--small');
|
||||
input.focus();
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
if (input.value.length < 1) {
|
||||
label.classList.remove('reactive-label--small');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// allows for multiple file uploads with separate inputs
|
||||
window.utils.reactiveFileUpload = function(input, formGroup) {
|
||||
var currValidInputCount = 0;
|
||||
@ -182,52 +161,10 @@
|
||||
setup();
|
||||
}
|
||||
|
||||
window.utils.reactiveFormGroup = function(formGroup, input) {
|
||||
// updates to dom
|
||||
if (input.value.length > 0) {
|
||||
formGroup.classList.add('form-group--valid');
|
||||
} else {
|
||||
formGroup.classList.remove('form-group--valid');
|
||||
}
|
||||
input.addEventListener('input', function() {
|
||||
formGroup.classList.remove('form-group--has-error');
|
||||
if (input.value.length > 0) {
|
||||
formGroup.classList.add('form-group--valid');
|
||||
} else {
|
||||
formGroup.classList.remove('form-group--valid');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// setup reactive labels
|
||||
Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
|
||||
var input = document.querySelector('#' + label.getAttribute('for'));
|
||||
if (!input) {
|
||||
console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
|
||||
label.classList.remove('reactive-label');
|
||||
return false;
|
||||
}
|
||||
|
||||
var parent = label.parentElement;
|
||||
var type = input.getAttribute('type');
|
||||
var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
|
||||
var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
|
||||
|
||||
|
||||
if (isInFormGroup) {
|
||||
window.utils.reactiveFormGroup(parent, input);
|
||||
}
|
||||
if (isListening) {
|
||||
window.utils.reactiveInputLabel(input, label);
|
||||
} else {
|
||||
label.classList.remove('reactive-label');
|
||||
}
|
||||
});
|
||||
|
||||
// initialize file-upload-fields
|
||||
Array.from(document.querySelectorAll('input[type="file"]')).map(function(inp) {
|
||||
var formGroup = inp.parentNode;
|
||||
|
||||
@ -24,7 +24,7 @@ form {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
@media (max-width: 768px) {
|
||||
.form-group {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 30px;
|
||||
@ -179,12 +179,12 @@ input[type="checkbox"]:checked::after {
|
||||
.radio {
|
||||
position: relative;
|
||||
|
||||
> [type="checkbox"],
|
||||
> [type="radio"] {
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> label {
|
||||
label {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
@ -194,8 +194,8 @@ input[type="checkbox"]:checked::after {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> label::before,
|
||||
> label::after {
|
||||
label::before,
|
||||
label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
@ -207,52 +207,52 @@ input[type="checkbox"]:checked::after {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
> label::before {
|
||||
label::before {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
transform: scale(0.1, 0.1);
|
||||
}
|
||||
|
||||
> label::after {
|
||||
label::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
transform: scale(0.1, 0.1);
|
||||
}
|
||||
|
||||
> :checked + label {
|
||||
:checked + label {
|
||||
background-color: var(--color-light);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover > label {
|
||||
&:hover label {
|
||||
background-color: var(--color-lighter);
|
||||
}
|
||||
|
||||
&:hover > label::before {
|
||||
&:hover label::before {
|
||||
transform: scale(0.8, 0.4);
|
||||
}
|
||||
|
||||
> :checked + label::before {
|
||||
:checked + label::before {
|
||||
transform: scale(1, 1) rotate(45deg);
|
||||
}
|
||||
|
||||
> :checked + label:hover::after,
|
||||
> :checked + label:hover::before {
|
||||
:checked + label:hover::after,
|
||||
:checked + label:hover::before {
|
||||
transform: scale(1, 1) rotate(0deg);
|
||||
}
|
||||
|
||||
&:hover > label::after {
|
||||
&:hover label::after {
|
||||
transform: scale(0.8, 0.4);
|
||||
}
|
||||
|
||||
> :checked + label::after {
|
||||
:checked + label::after {
|
||||
transform: scale(1, 1) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.radio > label::before {
|
||||
.radio label::before {
|
||||
transform: scale(0.01, 0.01) rotate(45deg);
|
||||
}
|
||||
.radio > label::after {
|
||||
.radio label::after {
|
||||
transform: scale(0.01, 0.01) rotate(-45deg);
|
||||
}
|
||||
|
||||
@ -279,17 +279,6 @@ input[type="checkbox"]:checked::after {
|
||||
cursor: default;
|
||||
color: var(--color-font);
|
||||
}
|
||||
@media (max-width: 999px) {
|
||||
.reactive-label {
|
||||
position: relative;
|
||||
transform: translate(2px, 30px);
|
||||
}
|
||||
.reactive-label--small {
|
||||
transform: translate(2px, 0px);
|
||||
color: var(--color-fontsec);
|
||||
/*font-size: 14px;*/
|
||||
}
|
||||
}
|
||||
|
||||
/* CUSTOM FILE INPUT */
|
||||
input[type="file"].js-file-input {
|
||||
@ -397,7 +386,7 @@ input[type="file"].js-file-input {
|
||||
.file-input__container--valid > .file-input__remover {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 999px) {
|
||||
@media (max-width: 768px) {
|
||||
.file-input__wrapper,
|
||||
.file-input__container,
|
||||
.file-checkbox__container,
|
||||
|
||||
@ -7,5 +7,7 @@ $case formLayout
|
||||
$if not (Blaze.null $ fvLabel view)
|
||||
<label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
|
||||
$# TODO: inputs should have proper placeholders
|
||||
^{fvInput view}
|
||||
$# FIXME: file-input element does not have `required` attribute, although set on form-group
|
||||
$# TODO: can we wrap checkboxes in a <div.checkbox> and radio buttons in a <div.radio>?
|
||||
<div .form-group__input>
|
||||
$# FIXME: file-input does not have `required` attribute, although set on form-group
|
||||
^{fvInput view}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user