champs-libres/responsive-table-fluxbox
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index3.html
View File

@ -111,7 +111,15 @@
</div> </div>
<script type="text/javascript"> <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>
<script src="js/index3.js"></script> <script src="js/index3.js"></script>
</body> </body>

98
js/index3.js
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 createHeadIntoCell = (table, cell, i) => {
const maxMD = window.matchMedia("(max-width: 800px)"); const elem = document.createElement("div");
const maxSM = window.matchMedia("(max-width: 450px)"); elem.classList.add("head");
elem.innerHTML = theadContent(table, i);
cell.appendChild(elem);
}
tables.forEach(t => { /*
const table = document.querySelector(t.id); * Get text in columns thead
*/
/* const theadContent = (table, i) => {
* Récupère le texte des entêtes de colonnes
*/
const theadContent = i => {
const thead = table.querySelectorAll(".thead .td"); const thead = table.querySelectorAll(".thead .td");
let content; let content;
thead.forEach((item, j) => { thead.forEach((item, j) => {
@ -21,41 +30,50 @@ tables.forEach(t => {
} }
}, i); }, i);
return content; return content;
}; };
/* /*
* Ajoute un nouvel élément thead dans une cellule * Remove heads from element
*/ */
const createHeadInto = (cell, i) => { const removeHeadsFrom = (element) => {
const elem = document.createElement("div");
elem.classList.add("head");
elem.innerHTML = theadContent(i);
cell.appendChild(elem);
}
/*
* Remove heads from element
*/
const removeHeadsFrom = (element) => {
const heads = element.querySelectorAll(".head"); const heads = element.querySelectorAll(".head");
heads.forEach(head => { heads.forEach(head => {
head.parentNode.removeChild(head); head.parentNode.removeChild(head);
}); });
}; };
/*
* 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}`);
/* /*
* Règle pour les écrans moyens * 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 => { const mediumScreen = rule => {
if (rule.matches) { if (rule.matches) {
console.log('medium'); console.log('medium');
const rows = [...table.querySelectorAll(".tr")]; const rows = [...table.querySelectorAll(".tr")];
rows.shift(); // vire le premier rang rows.shift(); // vire le premier rang
rows.forEach(row => {; rows.forEach(row => {
const cells = row.querySelectorAll(".td"); createHeadsIntoRow(table, row);
cells.forEach((cell, i) => {
createHeadInto(cell, i);
});
}); });
} else { } else {
console.log('not medium'); console.log('not medium');
@ -64,7 +82,7 @@ tables.forEach(t => {
}; };
/* /*
* Règle pour les petits écrans * Small screens rule
*/ */
const smallScreen = (rule) => { const smallScreen = (rule) => {
if (rule.matches) { if (rule.matches) {
@ -73,10 +91,8 @@ tables.forEach(t => {
rows.shift(); rows.shift();
rows.forEach(row => {; rows.forEach(row => {;
const cells = row.querySelectorAll(".td"); const cells = row.querySelectorAll(".td");
cells.forEach((cell, i) => { cells.forEach(cell => {
let head = cell.querySelector('.head'); insertHeadBeforeCell(row, cell);
head.classList.add("td");
row.insertBefore(head, cell);
}); });
}); });
} else { } else {
@ -85,11 +101,9 @@ tables.forEach(t => {
rows.shift(); rows.shift();
rows.forEach(row => {; rows.forEach(row => {;
removeHeadsFrom(row); removeHeadsFrom(row);
// Large screen exception !
if (!minLG.matches) { if (!minLG.matches) {
const cells = row.querySelectorAll(".td"); createHeadsIntoRow(table, row);
cells.forEach((cell, i) => {
createHeadInto(cell, i);
});
} }
}); });
} }

2
scss/styles3.scss
View File

@ -31,7 +31,7 @@ div.table {
&:nth-child(1) { &:nth-child(1) {
border-left: 1px solid grey; 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(2) { flex: 4; }
&:nth-child(3) { flex: 6; } &:nth-child(3) { flex: 6; }
&:nth-child(4) { flex: 2; } &:nth-child(4) { flex: 2; }