laradb

git clone git://bebou.netlib.re/laradb
Log | Files | Refs |

script.js (7241B)

 const filter = () => {
 	// textarea qui filtre les tr qui match la string :not(.match){display:none}
 }
 const body = document.querySelector('body')
 
 
 const sortTimeline = () => {
 
 const rows = Array.from(document.querySelectorAll('#TIMELINE tbody tr'));
 
 
 
 rows.sort((a, b) => {
 	const rectA = a.querySelector('.rectangle div');
 	const rectB = b.querySelector('.rectangle div');
 	//console.log(rectA, rectB)
 
 	if (!rectA || !rectB) {
 		return 0
 	}
 
 // sort by shortest to longest lifetime
 //	const widthA = parseFloat(window.getComputedStyle(rectA).width) || 0;
 //	const widthB = parseFloat(window.getComputedStyle(rectB).width) || 0;
 
 // sort by oldest to newest start date
 	const widthA = parseFloat(window.getComputedStyle(rectA).left) || 0;
 	const widthB = parseFloat(window.getComputedStyle(rectB).left) || 0;
 
 	return widthA - widthB;
 });
 
 	const parent = rows[0].parentNode;
 
 	rows.forEach(row => parent.appendChild(row));
 }
 
 const setFrequency = () => {
 const rows = Array.from(document.querySelectorAll('#TIMELINE tbody tr .rectangle div'));
 const verticalBar = document.createElement('div')
 verticalBar.setAttribute("id","vertical-bar")
 
 document.querySelector('#TIMELINE').addEventListener('mousemove', (event) => {
     verticalBar.style.left = `${event.clientX}px`;
 });
 const graduation = document.createElement('div')
 graduation.setAttribute("id","graduation")
 const numbers = document.querySelector('#TIMELINE .numbers')
 for(let i = 1970; i < 1990; i++){
     const number = document.createElement('div')
 	number.classList.add("number")
     number.innerHTML = i
     numbers.appendChild(number)
 }
 numbers.appendChild(graduation)
 body.appendChild(verticalBar)
 console.log(numbers)
 rows.forEach((r) => {
     const noi = r.getAttribute("data-number-of-issues")
     r.style.backgroundImage = `repeating-linear-gradient(90deg,
             var(--noir) 0px,
             var(--noir) calc(${100 / noi}% - var(--noi-width) - 1px),
             var(--accent) calc(${100 / noi}% - var(--noi-width)),
             var(--accent) ${100 / noi}%)`
 })
 
 function handleResize() {
 	console.log("Window resized or loaded.");
 
 let years = 20
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	
 	numbers
 	const width = window.innerWidth;
 	const height = window.innerHeight;
 	console.log(`Width: ${width}, Height: ${height}`);
 	if (width < 1200 && width > 770){
 years = 10
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	numbers.classList.add("numbers-1-of-2")
 	}
 	else if (width < 770){
 	numbers.classList.remove("numbers-1-of-2")
 	numbers.classList.add("numbers-1-of-4")
 years = 5
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 
 	}
 	else if (width > 1200) {
 let years = 20
 graduation.style.backgroundImage = `repeating-linear-gradient(90deg,
             transparent calc(${100 / years}% / 2 * -1),
             transparent calc(${100 / years}% - var(--grad-width) - 1px + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% - var(--grad-width) + ${100 / years}% / 2 * -1),
             var(--accent) calc(${100 / years}% + ${100 / years}% / 2 * -1) )`
 	numbers.classList.remove("numbers-1-of-2")
 	numbers.classList.remove("numbers-1-of-4")
 
 }
 
 }
 
 window.addEventListener('load', handleResize);
 
 window.addEventListener('resize', handleResize);
 }
 
 
 const onClickTable = () => {
 const rows = document.querySelectorAll('#TABLEAU tbody tr');
 
 rows.forEach(row => {
 	row.addEventListener('click', () => {
 		//row.querySelectorAll('td.hidden').forEach(td => {td.classList.toggle('show')})
         row.classList.toggle('show')
 })
 });
 }
 
 let sortDirection = "asc";
 
 function sortTable(n) {
 	n = n - 1;
 
 	const table = document.querySelector("table");
 	const rows = Array.from(table.rows).slice(1); 
 	
 	const headers = document.querySelectorAll('table thead td')
 	headers.forEach((h) => {
 		h.classList.remove('asc','desc')
 	})
 
 	console.log(n);
 
 	rows.sort((rowA, rowB) => {
 		let cellA, cellB;
 
 		if (n === 1 || n === 2) {
 			cellA = rowA.cells[n].getAttribute('data-date');
 			cellB = rowB.cells[n].getAttribute('data-date');
 		} else if (n === 3) {
 			cellA = parseInt(rowA.cells[n].textContent) || 0;
 			cellB = parseInt(rowB.cells[n].textContent) || 0;
 		} else {
 			cellA = rowA.cells[n].textContent.trim().toLowerCase();
 			cellB = rowB.cells[n].textContent.trim().toLowerCase();
 		}
 
 		if (cellA < cellB) {
 			return sortDirection === "asc" ? -1 : 1;
 		}
 		if (cellA > cellB) {
 			return sortDirection === "asc" ? 1 : -1;
 		}
 		return 0;
 	});
 
 	sortDirection = sortDirection === "asc" ? "desc" : "asc";
 	headers[n].classList.add(sortDirection)
 
 	rows.forEach(row => table.appendChild(row));
 }
 
 function convertDate(dateInput) {
 	if (/^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
 		const [year, month, day] = dateInput.split("-");
 		return [`${year}${month}${day}`, `${day}.${month}.${year}`];
 
 	} else if (/^\d{4}-\d{2}$/.test(dateInput)) {
 		const [year, month] = dateInput.split("-");
 		return [`${year}${month}00`, `${month}.${year}`];
 
 	} else if (/^\d{4}$/.test(dateInput)) {
 		return [dateInput + "0000", dateInput];
 
 	} else {
 		return [dateInput, dateInput];
 	}
 }
 
 const formatDate = () => {
 
     document.querySelectorAll('.start-date, .end-date').forEach((e) => {
 	if (e.children.length > 0){
 	let span = e.querySelector('span')
 	e.setAttribute('data-date',convertDate(span.innerText)[0])
     span.innerText = convertDate(span.innerText)[1]
 }
 	else {
 	e.setAttribute('data-date',convertDate(e.innerText)[0])
     e.innerText = convertDate(e.innerText)[1]
 
 }
     })
 }
 
 const path = window.location.pathname;
 
 function findCurrentNavLinks() {
     const links = document.querySelectorAll("nav a");
 	let activeLinks = []
 
     for (let link of links) {
 			console.log("/" + link.href.split('/').splice(-1)[0] == path)
         if ("/" + link.href.split('/').splice(-1)[0] == path) {
 			activeLinks = [...activeLinks, link]
         }
     }
     return activeLinks 
 }
 
 const currentLinks = findCurrentNavLinks();
 currentLinks.forEach((e) => {
 e.setAttribute("id","active"); 
 })
 
 
 switch (path) {
   case '/table.html':
 	onClickTable()
 	formatDate()
     break;
 
   case '/timeline.html':
 	setFrequency()
 	sortTimeline()
     break;
 
   case '/map.html':
     break;
 
   default:
     break;
 }