diff --git a/index.php b/index.php index e52ca13..d621635 100644 --- a/index.php +++ b/index.php @@ -27,7 +27,9 @@ let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type"); for (let minTableTd of minTableTds) { - minTableTd.style.width = `${100 / 8}%`; + if (minTableTd.parentNode.childElementCount != 1) { + minTableTd.style.width = `${100 / 8}%`; + } } let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)"); @@ -43,6 +45,128 @@ let headerNewHeight = tHeadHeight - scroll; tableHead.style.height = `${headerNewHeight}px`; } + // italiques -> A FAIRE SUR LE CSV AVANT D'IMPORTER CA RALENTIT DE OUF LE CHARGEMENT + let tbody = document.querySelectorAll('tbody'); + let tbodyContent = tbody[0].innerHTML; + let asteriskCounter = 0; + for (let i = 0; i < tbodyContent.length; i++) { + if (tbodyContent[i] == "*") { + if (asteriskCounter % 2 == 0) { + tbodyContent = tbodyContent.substring(0, i) + '' + tbodyContent.substring(i + 1); + } else { + tbodyContent = tbodyContent.substring(0, i) + '' + tbodyContent.substring(i + 1); + } + asteriskCounter++; + } + } + tbody[0].innerHTML = tbodyContent; + + + // titres de parties + let mainpartTitless = document.querySelectorAll('.isMainPart'); + for (let mainpartTitles of mainpartTitless) { + if (mainpartTitles.nextElementSibling.classList.contains('isSubPart')) { + mainpartTitles.firstElementChild.firstElementChild.style.height = "1.5rem"; + mainpartTitles.firstElementChild.style.marginBottom = "-0.25rem"; + mainpartTitles.style.borderBottom = "0"; + mainpartTitles.style.paddingBottom = "0"; + mainpartTitles.nextElementSibling.style.paddingTop = "0"; + } + } + // couleurs titres + let colors = [ + {'red' : 'e4000c'}, + {'blue1': '5dfffd'}, + {'blue2': '0fe5f9'}, + {'blue3': '11c1f8'}, + {'blue4': '0779f1'}, + {'blue5': '040bcb'}, + {'yellow1': 'ffe113'}, + {'yellow2': 'f4ff1b'}, + {'yellow3': 'e2ff0c'}, + {'yellow4': '93fe0b'}, + {'yellow5': '17fe0b'}, + {'pink1': 'e70060'}, + {'pink2': 'f03cf3'} + ]; + let titles = document.querySelectorAll('.isMainPart, .isSubPart'); + let partTitles = []; + for (let title of titles) { + if (!title.nextElementSibling.classList.contains('isSubPart')) { + partTitles.push(title); + } + } + for (let i = 0; i < partTitles.length; i++) { + if (partTitles[i].previousElementSibling?.classList.contains('isMainPart')) { + partTitles[i].previousElementSibling.firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0]; + } + partTitles[i].firstElementChild.firstElementChild.style.backgroundColor = "#" + Object.values(colors[i])[0]; + } + // scroll with cursor + // display parts rectangle on timeline + + let tlContainer, tlContainerHeight, bodyHeight; + let partsHeight = []; + let prevHeight = 0; + let partBlockHeights = []; + + function getAllHeights() { + tlContainer = document.querySelector('#timeline_container'); + tlContainerHeight = tlContainer.offsetHeight; + bodyHeight = document.querySelector('tbody').offsetHeight; + let lastTitle = document.querySelectorAll('.isMainPart'); + lastTitle = lastTitle[lastTitle.length - 1]; + for (let i = 0; i < partTitles.length; i++) { + let elTopFromParentTop = partTitles[i].offsetTop - document.querySelector('tbody').offsetTop; + let partSize = elTopFromParentTop - prevHeight; + prevHeight = elTopFromParentTop; + if (i != 0) { + partsHeight.push(partSize); + } + } + partsHeight.push(bodyHeight - lastTitle.offsetTop); + const partsHeightSum = partsHeight.reduce((partialSum, a) => partialSum + a, 0); + for (let partHeight of partsHeight) { + partBlockHeights.push(partHeight / bodyHeight * tlContainerHeight); + } + } + getAllHeights(); + window.addEventListener("resize", (event) => { + getAllHeights(); + }); + + for (let i = 0; i < partBlockHeights.length; i++) { + let partDiv = document.createElement('div'); + partDiv.style.width = "32px"; + partDiv.style.height = partBlockHeights[i] + "px"; + partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0]; + partDiv.style.borderBottom = "solid 1.5px #010d19"; + partDiv.style.opacity = "0.7"; + partDiv.style.transition = "opacity 0.3s ease-out"; + partDiv.style.cursor = "pointer"; + tlContainer.prepend(partDiv); + console.log(tlContainer.children[0].style.opacity) + tlContainer.children[0].addEventListener("mouseenter", function() { + tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "1"; + }); + tlContainer.children[0].addEventListener("mouseleave", function() { + tlContainer.children[tlContainer.children.length - 1 - i].style.opacity = "0.7"; + }); + } + // make the cursor move on scroll + let scrollValue, cursorTop; + document.addEventListener("scroll", (event) => { + scrollValue = window.scrollY; + let diffSize = scrollValue / bodyHeight * tlContainerHeight; + document.querySelector('#cursor').style.transform = `translateY(${diffSize}px)`; + cursorTop = cursorTop + diffSize; + }); + + // TODO + // ajouter le titre collé au curseur et le temps total en bas + // drag and drop curseur + // smoothscroll au clic sur une partie + // détection partie à allumer }, false); diff --git a/package.json b/package.json index e323404..1ef5dd8 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,6 @@ "@roots/sage": "6.12.2" }, "dependencies": { - "caniuse-lite": "^1.0.30001504" + "caniuse-lite": "^1.0.30001513" } } diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 0044759..00ce8c3 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -2,21 +2,17 @@ @section('content') - +
+ + + + + + - + @@ -24,7 +20,7 @@ - + 'post', @@ -37,15 +33,31 @@ $query = new WP_Query($args); if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); - ?> - - - - - - - - + + + + + + + + + + + + + + + + + + +
@yield('content')
diff --git a/yarn.lock b/yarn.lock index 51bb984..66573b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4007,10 +4007,15 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001504: - version "1.0.30001504" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001504.tgz#eaf77e5c852dfa5f82c4924468c30602ac53744a" - integrity sha512-5uo7eoOp2mKbWyfMXnGO9rJWOGU8duvzEiYITW+wivukL7yHH4gX9yuRaobu6El4jPxo6jKZfG+N6fB621GD/Q== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: + version "1.0.30001513" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz" + integrity sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww== + +caniuse-lite@^1.0.30001513: + version "1.0.30001513" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001513.tgz#382fe5fbfb0f7abbaf8c55ca3ac71a0307a752e9" + integrity sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww== ccount@^2.0.0: version "2.0.1"
Images Voix Off et InÉcrits
{{ get_post_meta(get_the_ID(), 'Minutage', true) }}{{ get_post_meta(get_the_ID(), 'Images', true) }}{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}
{{ get_post_meta(get_the_ID(), 'Minutage', true) }}{{ get_post_meta(get_the_ID(), 'Images', true) }}{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}
+
+
{{ get_post_meta(get_the_ID(), 'isMainPart', true) }}
+
+
+
{{ get_post_meta(get_the_ID(), 'isSubPart', true) }}
+