This commit is contained in:
Mathieu Jaumotte 2021-05-20 22:42:52 +02:00
parent a2366d85e0
commit 3e9313d500
3 changed files with 75 additions and 53 deletions

View File

@ -111,7 +111,15 @@
</div>
<script type="text/javascript">
const tables = [{id: '#my-table'}, {id: '#other-table'}];
const tables = [{
id: 'my-table',
sm_md: 450,
md_lg: 800
},{
id: 'other-table',
sm_md: 450,
md_lg: 800
}];
</script>
<script src="js/index3.js"></script>
</body>

View File

@ -1,18 +1,27 @@
/*
* Add heads elements into row
*/
const createHeadsIntoRow = (table, row) => {
const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => {
createHeadIntoCell(table, cell, i);
});
};
/*
* Limites de basculements
* Add head into cell
*/
const minLG = window.matchMedia("(min-width: 801px)");
const maxMD = window.matchMedia("(max-width: 800px)");
const maxSM = window.matchMedia("(max-width: 450px)");
tables.forEach(t => {
const table = document.querySelector(t.id);
const createHeadIntoCell = (table, cell, i) => {
const elem = document.createElement("div");
elem.classList.add("head");
elem.innerHTML = theadContent(table, i);
cell.appendChild(elem);
}
/*
* Récupère le texte des entêtes de colonnes
* Get text in columns thead
*/
const theadContent = i => {
const theadContent = (table, i) => {
const thead = table.querySelectorAll(".thead .td");
let content;
thead.forEach((item, j) => {
@ -23,16 +32,6 @@ tables.forEach(t => {
return content;
};
/*
* Ajoute un nouvel élément thead dans une cellule
*/
const createHeadInto = (cell, i) => {
const elem = document.createElement("div");
elem.classList.add("head");
elem.innerHTML = theadContent(i);
cell.appendChild(elem);
}
/*
* Remove heads from element
*/
@ -44,18 +43,37 @@ tables.forEach(t => {
};
/*
* Règle pour les écrans moyens
* Insert head before cell
*/
const insertHeadBeforeCell = (row, cell) => {
let head = cell.querySelector('.head');
head.classList.add("td");
row.insertBefore(head, cell);
};
/*
* Loop on each table
*/
tables.forEach(t => {
const table = document.querySelector(`#${t.id}`);
/*
* Responsive rules limits
*/
const minLG = window.matchMedia(`(min-width: ${t.md_lg + 1}px)`);
const maxMD = window.matchMedia(`(max-width: ${t.md_lg}px)`);
const maxSM = window.matchMedia(`(max-width: ${t.sm_md}px)`);
/*
* Medium screens rule
*/
const mediumScreen = rule => {
if (rule.matches) {
console.log('medium');
const rows = [...table.querySelectorAll(".tr")];
rows.shift(); // vire le premier rang
rows.forEach(row => {;
const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => {
createHeadInto(cell, i);
});
rows.forEach(row => {
createHeadsIntoRow(table, row);
});
} else {
console.log('not medium');
@ -64,7 +82,7 @@ tables.forEach(t => {
};
/*
* Règle pour les petits écrans
* Small screens rule
*/
const smallScreen = (rule) => {
if (rule.matches) {
@ -73,10 +91,8 @@ tables.forEach(t => {
rows.shift();
rows.forEach(row => {;
const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => {
let head = cell.querySelector('.head');
head.classList.add("td");
row.insertBefore(head, cell);
cells.forEach(cell => {
insertHeadBeforeCell(row, cell);
});
});
} else {
@ -85,11 +101,9 @@ tables.forEach(t => {
rows.shift();
rows.forEach(row => {;
removeHeadsFrom(row);
// Large screen exception !
if (!minLG.matches) {
const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => {
createHeadInto(cell, i);
});
createHeadsIntoRow(table, row);
}
});
}

View File

@ -31,7 +31,7 @@ div.table {
&:nth-child(1) {
border-left: 1px solid grey;
}
&:nth-child(1) { flex: 1; } // les largeurs de colonnes
&:nth-child(1) { flex: 1; }
&:nth-child(2) { flex: 4; }
&:nth-child(3) { flex: 6; }
&:nth-child(4) { flex: 2; }