mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-09-28 09:34:59 +00:00
fix folder name
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
require("./layout.scss");
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
nav.chill-breadcrumb {
|
||||
ul.list.on-left {
|
||||
li {
|
||||
border-right: 10px solid var(--chill-red);
|
||||
}
|
||||
li.active {
|
||||
border-right: 10px solid var(--chill-green);
|
||||
}
|
||||
li.past {
|
||||
border-right: 10px solid var(--chill-blue);
|
||||
}
|
||||
li.no-jump{
|
||||
border-right: 10px solid var(--chill-light-gray);
|
||||
background-color: var(--chill-yellow);
|
||||
padding: 0.3em 0.3em 0.3em 0.6em;
|
||||
color: var(--chill-dark-gray);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,333 @@
|
||||
/*
|
||||
* CKEditor 5 (v25.0.0) content styles.
|
||||
* Generated on Wed, 27 Jan 2021 08:22:01 GMT.
|
||||
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
|
||||
--ck-color-mention-text: hsl(341, 100%, 30%);
|
||||
--ck-highlight-marker-blue: hsl(201, 97%, 72%);
|
||||
--ck-highlight-marker-green: hsl(120, 93%, 68%);
|
||||
--ck-highlight-marker-pink: hsl(345, 96%, 73%);
|
||||
--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
|
||||
--ck-highlight-pen-green: hsl(112, 100%, 27%);
|
||||
--ck-highlight-pen-red: hsl(0, 85%, 49%);
|
||||
--ck-image-style-spacing: 1.5em;
|
||||
--ck-todo-list-checkmark-size: 16px;
|
||||
}
|
||||
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-side {
|
||||
float: right;
|
||||
margin-left: var(--ck-image-style-spacing);
|
||||
max-width: 50%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-align-left {
|
||||
float: left;
|
||||
margin-right: var(--ck-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-align-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-align-right {
|
||||
float: right;
|
||||
margin-left: var(--ck-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized img {
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized > figcaption {
|
||||
display: block;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagecaption.css */
|
||||
.ck-content .image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
word-break: break-word;
|
||||
color: hsl(0, 0%, 20%);
|
||||
background-color: hsl(0, 0%, 97%);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image {
|
||||
display: table;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 1em auto;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
min-width: 50px;
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .marker-yellow {
|
||||
background-color: var(--ck-highlight-marker-yellow);
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .marker-green {
|
||||
background-color: var(--ck-highlight-marker-green);
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .marker-pink {
|
||||
background-color: var(--ck-highlight-marker-pink);
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .marker-blue {
|
||||
background-color: var(--ck-highlight-marker-blue);
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .pen-red {
|
||||
color: var(--ck-highlight-pen-red);
|
||||
background-color: transparent;
|
||||
}
|
||||
/* ckeditor5-highlight/theme/highlight.css */
|
||||
.ck-content .pen-green {
|
||||
color: var(--ck-highlight-pen-green);
|
||||
background-color: transparent;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-tiny {
|
||||
font-size: .7em;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-small {
|
||||
font-size: .85em;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-big {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
/* ckeditor5-font/theme/fontsize.css */
|
||||
.ck-content .text-huge {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
/* ckeditor5-block-quote/theme/blockquote.css */
|
||||
.ck-content blockquote {
|
||||
overflow: hidden;
|
||||
padding-right: 1.5em;
|
||||
padding-left: 1.5em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
border-left: solid 5px hsl(0, 0%, 80%);
|
||||
}
|
||||
/* ckeditor5-block-quote/theme/blockquote.css */
|
||||
.ck-content[dir="rtl"] blockquote {
|
||||
border-left: 0;
|
||||
border-right: solid 5px hsl(0, 0%, 80%);
|
||||
}
|
||||
/* ckeditor5-basic-styles/theme/code.css */
|
||||
.ck-content code {
|
||||
background-color: hsla(0, 0%, 78%, 0.3);
|
||||
padding: .15em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table {
|
||||
margin: 1em auto;
|
||||
display: table;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px double hsl(0, 0%, 70%);
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table td,
|
||||
.ck-content .table table th {
|
||||
min-width: 2em;
|
||||
padding: .4em;
|
||||
border: 1px solid hsl(0, 0%, 75%);
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table table th {
|
||||
font-weight: bold;
|
||||
background: hsla(0, 0%, 0%, 5%);
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content[dir="rtl"] .table th {
|
||||
text-align: right;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content[dir="ltr"] .table th {
|
||||
text-align: left;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break {
|
||||
position: relative;
|
||||
clear: both;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 2px dashed hsl(0, 0%, 77%);
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break__label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: .3em .6em;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-radius: 2px;
|
||||
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
|
||||
font-size: 0.75em;
|
||||
font-weight: bold;
|
||||
color: hsl(0, 0%, 20%);
|
||||
background: hsl(0, 0%, 100%);
|
||||
box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list {
|
||||
list-style: none;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list li .todo-list {
|
||||
margin-top: 5px;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input {
|
||||
-webkit-appearance: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: var(--ck-todo-list-checkmark-size);
|
||||
height: var(--ck-todo-list-checkmark-size);
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
left: -25px;
|
||||
margin-right: -15px;
|
||||
right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid hsl(0, 0%, 20%);
|
||||
border-radius: 2px;
|
||||
transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: content-box;
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
||||
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input[checked]::before {
|
||||
background: hsl(126, 64%, 41%);
|
||||
border-color: hsl(126, 64%, 41%);
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label > input[checked]::after {
|
||||
border-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
/* ckeditor5-list/theme/todolist.css */
|
||||
.ck-content .todo-list .todo-list__label .todo-list__label__description {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* ckeditor5-media-embed/theme/mediaembed.css */
|
||||
.ck-content .media {
|
||||
clear: both;
|
||||
margin: 1em 0;
|
||||
display: block;
|
||||
min-width: 15em;
|
||||
}
|
||||
/* ckeditor5-html-embed/theme/htmlembed.css */
|
||||
.ck-content .raw-html-embed {
|
||||
margin: 1em auto;
|
||||
min-width: 15em;
|
||||
font-style: normal;
|
||||
}
|
||||
/* ckeditor5-horizontal-line/theme/horizontalline.css */
|
||||
.ck-content hr {
|
||||
margin: 15px 0;
|
||||
height: 4px;
|
||||
background: hsl(0, 0%, 87%);
|
||||
border: 0;
|
||||
}
|
||||
/* ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre {
|
||||
padding: 1em;
|
||||
color: hsl(0, 0%, 20.8%);
|
||||
background: hsla(0, 0%, 78%, 0.3);
|
||||
border: 1px solid hsl(0, 0%, 77%);
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
tab-size: 4;
|
||||
white-space: pre-wrap;
|
||||
font-style: normal;
|
||||
min-width: 200px;
|
||||
}
|
||||
/* ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre code {
|
||||
background: unset;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* ckeditor5-mention/theme/mention.css */
|
||||
.ck-content .mention {
|
||||
background: var(--ck-color-mention-background);
|
||||
color: var(--ck-color-mention-text);
|
||||
}
|
||||
@media print {
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break {
|
||||
padding: 0;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
//require('@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css');
|
||||
|
||||
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
|
||||
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
|
||||
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
|
||||
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
|
||||
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
|
||||
//require('./ckeditor5.css');
|
||||
|
||||
let Fields = document.querySelectorAll('textarea');
|
||||
|
||||
Fields.forEach(function(field) {
|
||||
ClassicEditor
|
||||
.create( field, {
|
||||
plugins: [
|
||||
Markdown,
|
||||
Essentials,
|
||||
Bold,
|
||||
Italic,
|
||||
],
|
||||
} )
|
||||
.then( editor => {
|
||||
console.log( editor );
|
||||
})
|
||||
.catch( error => {
|
||||
console.error( error );
|
||||
})
|
||||
;
|
||||
})
|
||||
@@ -0,0 +1,67 @@
|
||||
/*
|
||||
* Copyright (C) 2018 Champs Libres Cooperative <info@champs-libres.coop>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
var mime = require('mime-types')
|
||||
|
||||
var download_report = (url, container) => {
|
||||
var download_text = container.dataset.downloadText,
|
||||
alias = container.dataset.alias;
|
||||
|
||||
window.fetch(url, { credentials: 'same-origin' })
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw Error(response.statusText);
|
||||
}
|
||||
|
||||
return response.blob();
|
||||
}).then(blob => {
|
||||
|
||||
var content = URL.createObjectURL(blob),
|
||||
link = document.createElement("a"),
|
||||
type = blob.type,
|
||||
hasForcedType = 'mimeType' in container.dataset,
|
||||
extension;
|
||||
|
||||
if (hasForcedType) {
|
||||
// force a type
|
||||
type = container.dataset.mimeType;
|
||||
blob = new Blob([ blob ], { 'type': type });
|
||||
content = URL.createObjectURL(blob);
|
||||
}
|
||||
|
||||
extension = mime.extension(type);
|
||||
|
||||
link.appendChild(document.createTextNode(download_text));
|
||||
link.classList.add("sc-button", "btn-action");
|
||||
link.href = content;
|
||||
link.download = alias;
|
||||
if (extension !== false) {
|
||||
link.download = link.download + '.' + extension;
|
||||
}
|
||||
container.innerHTML = "";
|
||||
container.appendChild(link);
|
||||
}).catch(function(error) {
|
||||
console.log(error);
|
||||
var problem_text =
|
||||
document.createTextNode("Problem during download");
|
||||
|
||||
container
|
||||
.replaceChild(problem_text, container.firstChild);
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = download_report;
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* Copyright (C) 2018 Champs Libres Cooperative <info@champs-libres.coop>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
chill.download_report = require("./download-report.js");
|
||||
@@ -0,0 +1,20 @@
|
||||
.container-export {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
.export-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.export-list__element {
|
||||
min-width: 18rem;
|
||||
max-width: 20rem;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
flex-grow: 1;
|
||||
|
||||
border: 1px solid var(--chill-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
@@ -0,0 +1,3 @@
|
||||
require('./login.scss');
|
||||
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
@import './../../fonts/OpenSans/OpenSans';
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
height: 90%;
|
||||
padding-top: 10%;
|
||||
footer.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#content:before {
|
||||
bottom: 0;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
background-image: url('./desert.jpg');
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
label {
|
||||
width : 15em;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
padding-right: 5px;
|
||||
}
|
||||
input {
|
||||
color: 'black';
|
||||
}
|
||||
form {
|
||||
|
||||
}
|
||||
button {
|
||||
margin-left: 15em;
|
||||
margin-top: 1em;
|
||||
background-color: #df4949;
|
||||
border: medium none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
p.forgot-password-link {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
window.addEventListener('load', function (e) {
|
||||
var
|
||||
postalCodes = document.querySelectorAll('[data-select-interactive-loading]')
|
||||
;
|
||||
|
||||
for (let i = 0; i < postalCodes.length; i++) {
|
||||
let
|
||||
searchUrl = postalCodes[i].dataset.searchUrl,
|
||||
noResultsLabel = postalCodes[i].dataset.noResultsLabel,
|
||||
errorLoadLabel = postalCodes[i].dataset.errorLoadLabel,
|
||||
searchingLabel = postalCodes[i].dataset.searchingLabel
|
||||
;
|
||||
|
||||
|
||||
$(postalCodes[i]).select2({
|
||||
allowClear: true,
|
||||
language: {
|
||||
errorLoading: function () {
|
||||
return errorLoadLabel;
|
||||
},
|
||||
noResults: function () {
|
||||
return noResultsLabel;
|
||||
},
|
||||
searching: function () {
|
||||
return searchingLabel;
|
||||
}
|
||||
},
|
||||
ajax: {
|
||||
url: searchUrl,
|
||||
dataType: 'json',
|
||||
delay: 250
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
require("./show_hide.js");
|
||||
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* Create a control to show or hide values
|
||||
*
|
||||
* Possible options are:
|
||||
*
|
||||
* - froms: an Element, an Array of Element, or a NodeList. A
|
||||
* listener will be attached to **all** input of those elements
|
||||
* and will trigger the check on changes
|
||||
* - test: a function which will test the element and will return true
|
||||
* if the content must be shown, false if it must be hidden.
|
||||
* The function will receive the `froms` as first argument, and the
|
||||
* event as second argument.
|
||||
* - container: an Element, an Array of Element, or a Node List. The
|
||||
* child nodes will be hidden / shown inside this container
|
||||
* - event_name: the name of the event to listen to. `'change'` by default.
|
||||
*
|
||||
* @param object options
|
||||
*/
|
||||
var ShowHide = function(options) {
|
||||
var
|
||||
froms = typeof options.froms[Symbol.iterator] === "function" ? options.froms : [ options.froms ], //options.froms;
|
||||
test = options.test,
|
||||
container = typeof options.container[Symbol.iterator] === "function" ? options.container : [ options.container ],
|
||||
is_shown = true,
|
||||
event_name = 'event_name' in options ? options.event_name : 'change',
|
||||
container_content = [],
|
||||
debug = 'debug' in options ? options.debug : false,
|
||||
load_event = 'load_event' in options ? options.load_event : 'load',
|
||||
id = 'uid' in options ? options.id : Math.random();
|
||||
|
||||
var bootstrap = function(event) {
|
||||
if (debug) {
|
||||
console.log('debug is activated on this show-hide', this);
|
||||
}
|
||||
// keep the content in memory
|
||||
for (let c of container.values()) {
|
||||
let contents = [];
|
||||
for (let el of c.childNodes.values()) {
|
||||
contents.push(el);
|
||||
}
|
||||
container_content.push(contents);
|
||||
}
|
||||
|
||||
// attach the listener on each input
|
||||
for (let f of froms.values()) {
|
||||
let
|
||||
inputs = f.querySelectorAll('input'),
|
||||
selects = f.querySelectorAll('select');
|
||||
|
||||
for (let input of inputs.values()) {
|
||||
if (debug) {
|
||||
console.log('attaching event to input', input);
|
||||
}
|
||||
input.addEventListener(event_name, function(e) {
|
||||
onChange(e);
|
||||
});
|
||||
}
|
||||
for (let input of selects.values()) {
|
||||
if (debug) {
|
||||
console.log('attaching event to selects', input);
|
||||
}
|
||||
input.addEventListener(event_name, function(e) {
|
||||
onChange(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// first launch of the show/hide
|
||||
onChange(event);
|
||||
};
|
||||
|
||||
|
||||
var onChange = function (event) {
|
||||
var result = test(froms, event), me;
|
||||
|
||||
if (result === true) {
|
||||
if (is_shown === false) {
|
||||
forceShow();
|
||||
me = new CustomEvent('show-hide-show', { detail: { id: id, container: container, froms: froms } });
|
||||
window.dispatchEvent(me);
|
||||
}
|
||||
} else if (result === false) {
|
||||
if (is_shown) {
|
||||
forceHide();
|
||||
me = new CustomEvent('show-hide-hide', { detail: { id: id, container: container, froms: froms } });
|
||||
window.dispatchEvent(me);
|
||||
}
|
||||
} else {
|
||||
throw "the result of test is not a boolean";
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var forceHide = function() {
|
||||
if (debug) {
|
||||
console.log('force hide');
|
||||
}
|
||||
for (let contents of container_content.values()) {
|
||||
for (let el of contents.values()) {
|
||||
el.remove();
|
||||
}
|
||||
}
|
||||
is_shown = false;
|
||||
};
|
||||
|
||||
var forceShow = function() {
|
||||
if (debug) {
|
||||
console.log('show');
|
||||
}
|
||||
for (let i of container_content.keys()) {
|
||||
var contents = container_content[i];
|
||||
for (let el of contents.values()) {
|
||||
container[i].appendChild(el);
|
||||
}
|
||||
}
|
||||
is_shown = true;
|
||||
};
|
||||
|
||||
var forceCompute = function(event) {
|
||||
onChange(event);
|
||||
};
|
||||
|
||||
|
||||
if (load_event !== null) {
|
||||
window.addEventListener('load', bootstrap);
|
||||
} else {
|
||||
bootstrap(null);
|
||||
}
|
||||
|
||||
return {
|
||||
forceHide: forceHide,
|
||||
forceShow: forceShow,
|
||||
forceCompute: forceCompute,
|
||||
};
|
||||
};
|
||||
|
||||
export {ShowHide};
|
||||
@@ -0,0 +1,2 @@
|
||||
require("./tabs.js");
|
||||
require("./tabs.scss");
|
||||
118
src/Bundle/ChillMainBundle/Resources/public/modules/tabs/tabs.js
Normal file
118
src/Bundle/ChillMainBundle/Resources/public/modules/tabs/tabs.js
Normal file
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* Remove active class on both elements: link and content
|
||||
*/
|
||||
let resetActive = function(links, contents)
|
||||
{
|
||||
for (items of [links, contents]) {
|
||||
items.forEach(function(item) {
|
||||
if (item.classList.contains('active')) {
|
||||
item.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Count links array and return rank of given link
|
||||
*/
|
||||
let countNewActive = function(links, link)
|
||||
{
|
||||
let rank = 0;
|
||||
for (let i = 0; i < links.length; ++i) {
|
||||
rank++;
|
||||
if(links[i] == link) {
|
||||
return rank;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Set class active on both new elements: link and content
|
||||
*/
|
||||
let setNewActive = function(links, contents, rank)
|
||||
{
|
||||
if (! links[rank-1]) { rank = 1; }
|
||||
link = links[rank-1];
|
||||
|
||||
link.classList.add('active');
|
||||
|
||||
count = 0;
|
||||
contents.forEach(function(pane) {
|
||||
count++;
|
||||
if (rank == count) {
|
||||
pane.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Set height of content pane
|
||||
*/
|
||||
let setPaneHeight = function(contents)
|
||||
{
|
||||
contents.forEach(function(pane) {
|
||||
|
||||
// let computedStyle = getComputedStyle(pane);
|
||||
// console.log(computedStyle.height);
|
||||
// comment prendre la hauteur d'une div masquée avec display:none
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Check if links are defined in controller
|
||||
* If true, disable javascript listener
|
||||
*/
|
||||
let isLinkRef = function(link) {
|
||||
|
||||
if (link.getAttribute('href') == "#") {
|
||||
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* Main function
|
||||
*/
|
||||
window.addEventListener('load', function()
|
||||
{
|
||||
tabParams.forEach(function(unit) {
|
||||
|
||||
let tabPanel = document.querySelector('#'+ unit.id );
|
||||
if (tabPanel) {
|
||||
|
||||
let
|
||||
nav = tabPanel.querySelector('nav'),
|
||||
tabs = nav.querySelectorAll('ul.nav-tabs li.nav-item'),
|
||||
links = nav.querySelectorAll('ul.nav-tabs li.nav-item a.nav-link'),
|
||||
contents = tabPanel.querySelectorAll('div.tab-content div.tab-pane')
|
||||
;
|
||||
|
||||
if (unit.type == 'pill') {
|
||||
tabPanel.classList.add('pills');
|
||||
}
|
||||
|
||||
if (! unit.initPane) {
|
||||
unit.initPane = 1;
|
||||
}
|
||||
|
||||
setPaneHeight(contents);
|
||||
|
||||
// initial position
|
||||
setNewActive(links, contents, unit.initPane);
|
||||
|
||||
// listen
|
||||
links.forEach(function(link) {
|
||||
if (isLinkRef(link) == false) {
|
||||
link.addEventListener('click', function()
|
||||
{
|
||||
resetActive(links, contents);
|
||||
setNewActive(links, contents, countNewActive(links, link));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
|
||||
$navigation-color: #334d5c;
|
||||
$body-font-color: #ffffff;
|
||||
$tab-font-color: #495057;
|
||||
$border-color: #dee2e6;
|
||||
$pills-color: #ed9345;
|
||||
$radius : .25rem;
|
||||
|
||||
div.tabs {
|
||||
margin: 3em;
|
||||
|
||||
nav {
|
||||
ul.nav-tabs {
|
||||
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
li.nav-item {
|
||||
margin-bottom: -1px;
|
||||
|
||||
a.nav-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
div.tab-content {
|
||||
|
||||
div.tab-pane {
|
||||
display: none;
|
||||
|
||||
&.fade {
|
||||
transition: opacity .15s linear;
|
||||
}
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pills) {
|
||||
nav {
|
||||
ul.nav-tabs {
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
li.nav-item {
|
||||
|
||||
a.nav-link {
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
color: $navigation-color;
|
||||
}
|
||||
|
||||
&.show a.nav-link,
|
||||
& a.nav-link.active {
|
||||
|
||||
color: $tab-font-color;
|
||||
background-color: $body-font-color;
|
||||
border-color: $border-color $border-color $body-font-color;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pills {
|
||||
nav {
|
||||
ul.nav-tabs {
|
||||
|
||||
border-bottom: 0;
|
||||
li.nav-item {
|
||||
|
||||
& a.nav-link {
|
||||
border: 0;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
&.show > a.nav-link,
|
||||
& a.nav-link.active {
|
||||
color: $body-font-color;
|
||||
background-color: $pills-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user