79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
|
|
||
|
|
const max800 = window.matchMedia("(max-width: 800px)");
|
||
|
|
const max450 = window.matchMedia("(max-width: 450px)");
|
||
|
|
|
||
|
|
const theadContent = i => {
|
||
|
|
const header = table.querySelectorAll(".header .td");
|
||
|
|
let content;
|
||
|
|
header.forEach((item, j) => {
|
||
|
|
if (i === j) {
|
||
|
|
content = item.textContent;
|
||
|
|
}
|
||
|
|
}, i);
|
||
|
|
return content;
|
||
|
|
};
|
||
|
|
|
||
|
|
const createThead = (cell, i) => {
|
||
|
|
const elem = document.createElement("div");
|
||
|
|
elem.classList.add("thead");
|
||
|
|
elem.innerHTML = theadContent(i);
|
||
|
|
cell.appendChild(elem);
|
||
|
|
}
|
||
|
|
|
||
|
|
const mediumScreen = rule => {
|
||
|
|
if (rule.matches) {
|
||
|
|
console.log('medium');
|
||
|
|
const rows = [...table.querySelectorAll(".tr")];
|
||
|
|
rows.shift();
|
||
|
|
rows.forEach(row => {;
|
||
|
|
const cells = row.querySelectorAll(".td");
|
||
|
|
cells.forEach((cell, i) => {
|
||
|
|
createThead(cell, i);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log('not medium');
|
||
|
|
const theads = table.querySelectorAll(".thead");
|
||
|
|
theads.forEach(element => {
|
||
|
|
element.parentNode.removeChild(element);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const smallScreen = (rule) => {
|
||
|
|
if (rule.matches) {
|
||
|
|
console.log('small');
|
||
|
|
const rows = [...table.querySelectorAll(".tr")];
|
||
|
|
rows.shift();
|
||
|
|
rows.forEach(row => {;
|
||
|
|
const cells = row.querySelectorAll(".td");
|
||
|
|
cells.forEach((cell, i) => {
|
||
|
|
let thead = cell.querySelector('.thead');
|
||
|
|
thead.classList.add("td");
|
||
|
|
row.insertBefore(thead, cell);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log('not small'); // large is not small, donc il passe ici !! pas normal
|
||
|
|
const rows = [...table.querySelectorAll(".tr")];
|
||
|
|
rows.shift();
|
||
|
|
rows.forEach(row => {;
|
||
|
|
const theads = row.querySelectorAll(".thead");
|
||
|
|
theads.forEach((thead) => {
|
||
|
|
thead.classList.remove("td");
|
||
|
|
thead.parentNode.removeChild(thead);
|
||
|
|
});
|
||
|
|
const cells = row.querySelectorAll(".td");
|
||
|
|
cells.forEach((cell, i) => {
|
||
|
|
createThead(cell, i);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
mediumScreen(max800);
|
||
|
|
max800.addListener(mediumScreen);
|
||
|
|
|
||
|
|
smallScreen(max450);
|
||
|
|
max450.addListener(smallScreen);
|