Merge branch 'feat/file_inputs' into 'master'
Small refinements and Multi-File-Checkboxes for previously uploaded files See merge request !19
This commit is contained in:
Felix Hamann
commit
b07ff5db6c
@ -67,5 +67,26 @@
|
||||
Knopf-Test:
|
||||
<form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
|
||||
^{btnWdgt}
|
||||
<li>
|
||||
<button type="button" .toggler>Klick mich für Modal
|
||||
$if True
|
||||
$# meant to be 'if js-supported'
|
||||
<li><br>
|
||||
Modals:
|
||||
<button type="button" .toggler>Klick mich
|
||||
|
||||
<li><br>
|
||||
Multi-File-Input für bereits hochgeladene Dateien:
|
||||
<form>
|
||||
<div .form-group>
|
||||
<label .form-group__label>Datei(en)
|
||||
$# file 1
|
||||
<div .file-checkbox__container>
|
||||
<label .file-checkbox__label.reactive-label.btn for="f2-1">Datenschutz.txt
|
||||
<div .checkbox>
|
||||
<input .file-checkbox id="f2-1" name="f2" value="Datenschutz.txt" type="checkbox">
|
||||
<label for="f2-1">
|
||||
$# file 2
|
||||
<div .file-checkbox__container>
|
||||
<label .file-checkbox__label.reactive-label.btn for="f2-2">fill-db.hs
|
||||
<div .checkbox>
|
||||
<input .file-checkbox id="f2-2" name="f2" value="fill-db.hs" type="checkbox">
|
||||
<label for="f2-2">
|
||||
|
||||
@ -148,6 +148,36 @@
|
||||
setup();
|
||||
}
|
||||
|
||||
// to remove previously uploaded files
|
||||
window.utils.reactiveFileCheckbox = function(input, label, parent) {
|
||||
// adds eventlistener(s)
|
||||
function addListener(container) {
|
||||
input.addEventListener('change', function(event) {
|
||||
container.classList.toggle('file-checkbox__container--valid', this.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// initial setup
|
||||
function setup() {
|
||||
var cont = input.parentNode;
|
||||
while (cont !== document.body) {
|
||||
if (cont.classList.contains('file-checkbox__container')) {
|
||||
break;
|
||||
}
|
||||
cont = cont.parentNode;
|
||||
}
|
||||
|
||||
// take care of properly moving elements
|
||||
if (input.parentNode.classList.contains('checkbox')) {
|
||||
input.parentNode.classList.add('file-checkbox__checkbox');
|
||||
} else {
|
||||
input.classList.add('file-checkbox__checkbox');
|
||||
}
|
||||
addListener(cont);
|
||||
}
|
||||
setup();
|
||||
}
|
||||
|
||||
window.utils.reactiveFormGroup = function(formGroup, input) {
|
||||
// updates to dom
|
||||
if (input.value.length > 0) {
|
||||
@ -179,16 +209,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
var parent = label.parentElement;
|
||||
var type = input.getAttribute('type');
|
||||
var isFileInput = /file/i.test(type);
|
||||
var isFileUpload = /file/i.test(type);
|
||||
var isFileCheckbox = input.classList.contains('file-checkbox');
|
||||
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 (isFileInput) {
|
||||
if (isFileUpload) {
|
||||
window.utils.reactiveFileUpload(input, parent);
|
||||
}
|
||||
if (isFileCheckbox) {
|
||||
window.utils.reactiveFileCheckbox(input, label, parent);
|
||||
}
|
||||
if (isListening) {
|
||||
window.utils.reactiveInputLabel(input, label);
|
||||
} else {
|
||||
|
||||
@ -138,7 +138,6 @@ input[type="checkbox"]:checked::after {
|
||||
.checkbox,
|
||||
.radio {
|
||||
position: relative;
|
||||
margin: 3px;
|
||||
|
||||
> [type="checkbox"],
|
||||
> [type="radio"] {
|
||||
@ -147,8 +146,9 @@ input[type="checkbox"]:checked::after {
|
||||
|
||||
> label {
|
||||
display: block;
|
||||
padding: 7px 13px 7px 30px;
|
||||
background-color: var(--darkbase);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-color: var(--greybase);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
@ -158,8 +158,8 @@ input[type="checkbox"]:checked::after {
|
||||
> label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 4px;
|
||||
top: 14px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -170,13 +170,13 @@ input[type="checkbox"]:checked::after {
|
||||
> label::before {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
transform: scale(0.8, 0.1);
|
||||
transform: scale(0.1, 0.1);
|
||||
}
|
||||
|
||||
> label::after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
transform: scale(0.8, 0.1);
|
||||
transform: scale(0.1, 0.1);
|
||||
}
|
||||
|
||||
> :checked + label {
|
||||
@ -184,12 +184,27 @@ input[type="checkbox"]:checked::after {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover > label::before,
|
||||
&:hover > label {
|
||||
background-color: var(--lighterbase);
|
||||
}
|
||||
|
||||
&:hover > label::before {
|
||||
transform: scale(0.8, 0.4);
|
||||
}
|
||||
|
||||
> :checked + label::before {
|
||||
transform: scale(1, 1) rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover > label::after,
|
||||
> :checked + label:hover::after,
|
||||
> :checked + label:hover::before {
|
||||
transform: scale(1, 1) rotate(0deg);
|
||||
}
|
||||
|
||||
&:hover > label::after {
|
||||
transform: scale(0.8, 0.4);
|
||||
}
|
||||
|
||||
> :checked + label::after {
|
||||
transform: scale(1, 1) rotate(-45deg);
|
||||
}
|
||||
@ -248,25 +263,34 @@ input[type="file"].js-file-input {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
.file-input__container {
|
||||
.file-input__container,
|
||||
.file-checkbox__container {
|
||||
grid-column-start: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.file-input__label,
|
||||
.file-input__remover {
|
||||
.file-input__remover,
|
||||
.file-checkbox__label,
|
||||
.file-checkbox__remover {
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
padding: 5px 13px;
|
||||
color: var(--whitebase);
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-input__label {
|
||||
.file-input__label,
|
||||
.file-checkbox__label {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
}
|
||||
.file-input__label.btn {
|
||||
.file-checkbox__label {
|
||||
background-color: var(--greybase);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.file-input__label.btn,
|
||||
.file-checkbox__label.btn {
|
||||
padding: 5px 13px;
|
||||
}
|
||||
.file-input__label::after,
|
||||
@ -288,6 +312,9 @@ input[type="file"].js-file-input {
|
||||
.file-input__label::before {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.file-checkbox__checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.file-input__remover {
|
||||
display: none;
|
||||
width: 40px;
|
||||
@ -309,6 +336,15 @@ input[type="file"].js-file-input {
|
||||
.file-input__container--valid > .file-input__label {
|
||||
background-color: var(--lightbase);
|
||||
}
|
||||
.file-checkbox__container--valid > .file-checkbox__label {
|
||||
text-decoration: none;
|
||||
background-color: var(--lighterbase);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--greybase);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.file-input__container--valid > .file-input__label::before,
|
||||
.file-input__container--valid > .file-input__label::after {
|
||||
content: none;
|
||||
@ -317,7 +353,8 @@ input[type="file"].js-file-input {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 999px) {
|
||||
.file-input__container {
|
||||
.file-input__container,
|
||||
.file-checkbox__container {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
<label .reactive-label for="inp2">Kürzel
|
||||
<input type="text" id="inp2">
|
||||
<div .form-group>
|
||||
<label .reactive-label for="inp3">Semester
|
||||
<input type="text" id="inp3">
|
||||
<label .reactive-label for="inp3">Aktiv?
|
||||
<div .checkbox>
|
||||
<input id="inp3" name="f2" type="checkbox">
|
||||
<label for="inp3">
|
||||
<div .form-group>
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user