fini il reste juste les corrections sur la tl
This commit is contained in:
Valentin
+79
-3
@@ -217,6 +217,7 @@ collect(['setup', 'filters'])
|
||||
|
||||
function custom_admin_styles() {
|
||||
wp_enqueue_style('custom-admin', get_template_directory_uri() . '/resources/styles/admin_custom.css');
|
||||
wp_enqueue_script('custom-admin-script', get_template_directory_uri() . '/resources/scripts/custom-admin-script.js', array(), null, true);
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'custom_admin_styles');
|
||||
|
||||
@@ -241,20 +242,95 @@ collect(['setup', 'filters'])
|
||||
wp_enqueue_script('custom-editor-script', get_template_directory_uri() . '/resources/scripts/custom-editor-script.js', array(), null, true);
|
||||
wp_enqueue_style('custom-editor-style', get_template_directory_uri() . '/resources/styles/custom-editor-style.css');
|
||||
|
||||
// Create my revisions page
|
||||
$current_user = wp_get_current_user();
|
||||
$author_id = $current_user->ID;
|
||||
$revisionary_page = admin_url('admin.php?page=revisionary-q&author=' . $author_id);
|
||||
|
||||
// Get the content of the specific page (replace '123' with the actual page ID)
|
||||
$page_id = 13940;
|
||||
$page_content = get_post_field('post_content', $page_id);
|
||||
|
||||
$website_url = site_url();
|
||||
|
||||
// Localize the page content to be accessible in your custom script
|
||||
wp_localize_script('custom-editor-script', 'pageContentData', array('content' => $page_content));
|
||||
wp_localize_script('custom-editor-script', 'pageContentData', array(
|
||||
'content' => $page_content,
|
||||
'websiteUrl' => $website_url,
|
||||
'myRevisionsUrl' => $revisionary_page,
|
||||
));
|
||||
}
|
||||
}
|
||||
add_action('admin_enqueue_scripts', 'customize_editor_for_editor_role');
|
||||
|
||||
|
||||
|
||||
function remove_roles() {
|
||||
remove_role('author');
|
||||
remove_role('editor');
|
||||
remove_role('subscriber');
|
||||
remove_role('contributor');
|
||||
}
|
||||
add_action('init', 'remove_roles');
|
||||
|
||||
// Redirect all post URLs to the homepage
|
||||
function redirect_single_posts_to_homepage() {
|
||||
if (is_single() && isset($_GET['p'])) {
|
||||
wp_redirect(home_url(), 301);
|
||||
exit();
|
||||
}
|
||||
}
|
||||
add_action('template_redirect', 'redirect_single_posts_to_homepage');
|
||||
|
||||
function log_posts_with_user_revisions() {
|
||||
$current_user = wp_get_current_user();
|
||||
if (current_user_can('revisor')) {
|
||||
if ($current_user instanceof WP_User) {
|
||||
$current_user_id = $current_user->ID;
|
||||
$args = array(
|
||||
'post_type' => 'revision', // Fetch all post types including revisions
|
||||
'post_status' => 'inherit', // Fetch all post statuses including revisions
|
||||
'posts_per_page' => -1, // Retrieve all posts
|
||||
'author' => $current_user_id,
|
||||
'fields' => 'ids', // Retrieve only IDs to speed up the query
|
||||
);
|
||||
|
||||
$all_posts = get_posts($args);
|
||||
$parents_posts_ids = array();
|
||||
|
||||
$revisions_dates = array();
|
||||
|
||||
foreach ($all_posts as $post_id) {
|
||||
$current_revision_date = array();
|
||||
$current_revision_date[] = get_post(wp_get_post_parent_id($post_id))->post_title;
|
||||
$current_revision_date[] = get_post($post_id)->post_date;
|
||||
$revisions_dates[] = $current_revision_date;
|
||||
$parents_posts_ids[] = wp_get_post_parent_id($post_id);
|
||||
}
|
||||
|
||||
$parents_posts_ids = array_unique($parents_posts_ids);
|
||||
|
||||
$history_posts_titles = array();
|
||||
$history_posts_contents = array();
|
||||
|
||||
foreach ($parents_posts_ids as $parent_post_id) {
|
||||
$history_posts_titles[] = get_post($parent_post_id)->post_title;
|
||||
$history_posts_contents[] = strip_tags(get_post($parent_post_id)->post_content);
|
||||
}
|
||||
|
||||
// Enqueue the script
|
||||
wp_enqueue_script('contribution-history-script', get_template_directory_uri() . '/resources/scripts/contribution_history.js', array('jquery'), '1.0', true);
|
||||
|
||||
// Localize script to pass data to JavaScript
|
||||
wp_localize_script('contribution-history-script', 'historyData', array(
|
||||
'titles' => $history_posts_titles,
|
||||
'contents' => $history_posts_contents,
|
||||
'dates' => $revisions_dates
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
add_action('admin_enqueue_scripts', 'log_posts_with_user_revisions');
|
||||
|
||||
|
||||
// function supprimer_tous_les_articles() {
|
||||
// $args = array(
|
||||
|
||||
Generated
+18985
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
height="24"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="pen_icon.svg"
|
||||
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="38.541667"
|
||||
inkscape:cx="12"
|
||||
inkscape:cy="12"
|
||||
inkscape:window-width="2160"
|
||||
inkscape:window-height="1440"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" />
|
||||
<path
|
||||
d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"
|
||||
id="path1"
|
||||
style="fill:#ffffff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+43
-769
@@ -1,4 +1,7 @@
|
||||
import domReady from '@roots/sage/client/dom-ready';
|
||||
import { customSearch } from './front/search.js';
|
||||
import { customTimeline } from './front/timeline.js';
|
||||
|
||||
|
||||
/**
|
||||
* Application entrypoint
|
||||
@@ -17,6 +20,17 @@ domReady(async () => {
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// POUR LES LIENS D'EDITION/CONNEXION QUAND ON EST PAS CONNECTÉS
|
||||
let connectLinks = document.querySelectorAll('a.xoo-el-login-tgr');
|
||||
for (let connectLink of connectLinks) {
|
||||
if (connectLink.previousElementSibling) {
|
||||
let penImg = connectLink.previousElementSibling;
|
||||
connectLink.classList.add('edit-button');
|
||||
connectLink.innerText = '';
|
||||
connectLink.append(penImg);
|
||||
}
|
||||
}
|
||||
|
||||
// CLEANER LE TABLEAU
|
||||
let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
|
||||
minHeadTh.style.width = `${100 / 8}%`;
|
||||
@@ -48,14 +62,27 @@ domReady(async () => {
|
||||
let tHeadHeight = tableHead.offsetHeight;
|
||||
tableHead.style.maxHeight = `${tHeadHeight}px`;
|
||||
let headerHeight = document.querySelector("header").offsetHeight;
|
||||
let titleLarge = document.querySelector('.brand span:nth-of-type(2)');
|
||||
let titlesSmall = document.querySelectorAll('.brand span:not(.brand span:nth-of-type(2))');
|
||||
let titleContainer = document.querySelector('.brand');
|
||||
window.onscroll = () => {
|
||||
tableHead.style.minHeight = `${headerHeight + 72}px`;
|
||||
let scroll = window.scrollY;
|
||||
let headerNewHeight = tHeadHeight - scroll;
|
||||
if (headerNewHeight > 72) {
|
||||
tableHead.style.height = `${headerHeight + headerNewHeight}px`;
|
||||
titleContainer.style.lineHeight = "1.75rem";
|
||||
titleLarge.style.fontSize = '35px';
|
||||
for (let titleSmall of titlesSmall) {
|
||||
titleSmall.style.fontSize = '25px';
|
||||
}
|
||||
} else {
|
||||
tableHead.style.height = tableHead.style.minHeight;
|
||||
titleContainer.style.lineHeight = "1.4rem";
|
||||
titleLarge.style.fontSize = '24px';
|
||||
for (let titleSmall of titlesSmall) {
|
||||
titleSmall.style.fontSize = '17px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +94,12 @@ domReady(async () => {
|
||||
loginPopupText = loginPopupText.innerText;
|
||||
let loginPopupTextWrapper = document.getElementsByClassName('xoo-el-sidebar');
|
||||
if (loginPopupTextWrapper[0]) {
|
||||
loginPopupTextWrapper[0].innerHTML = `<p>${loginPopupText}</p>`;
|
||||
loginPopupTextWrapper[0].innerHTML = `<div>Espace collaboratif du site</div>`;
|
||||
loginPopupTextWrapper[0].innerHTML += `<p style="padding-top: 15px;">${loginPopupText}</p>`;
|
||||
}
|
||||
let loginPopupHeader = document.querySelector('.xoo-el-sidebar div:first-of-type');
|
||||
if (loginPopupHeader !== null) {
|
||||
loginPopupHeader.setAttribute('style', 'background-color: white; width: 100%; font-weight: bold; padding: 20px 30px;');
|
||||
}
|
||||
let policyDropdown = document.createElement('div');
|
||||
policyDropdown.style.width = "100%";
|
||||
@@ -104,6 +136,14 @@ domReady(async () => {
|
||||
loginPopupTextWrapper[0].appendChild(privacyPolicyContent);
|
||||
}
|
||||
|
||||
const privacyLink = document.querySelector('.xoo-aff-checkbox_single a');
|
||||
if (privacyLink) {
|
||||
privacyLink.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
togglePolicy();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function togglePolicy() {
|
||||
if (policyOpen) {
|
||||
@@ -117,497 +157,8 @@ domReady(async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// titres de parties dans le tableau
|
||||
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' : 'cf0118'},
|
||||
{'blue1': '0101c4'},
|
||||
{'blue2': '01049e'},
|
||||
{'blue3': '010678'},
|
||||
{'blue4': '010952'},
|
||||
{'blue5': '00113c'},
|
||||
{'yellow1': 'ade719'},
|
||||
{'yellow2': '8cc700'},
|
||||
{'yellow3': '74af00'},
|
||||
{'yellow4': '5c9900'},
|
||||
{'yellow5': '377600'},
|
||||
{'pink1': 'cf0118'},
|
||||
{'pink2': 'a10418'}
|
||||
];
|
||||
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];
|
||||
}
|
||||
|
||||
// set parts rectangles
|
||||
function convertToSeconds(timeStr) {
|
||||
let [hourStr, minStr] = timeStr.split('h');
|
||||
if (!minStr) {
|
||||
minStr = hourStr;
|
||||
hourStr = '0';
|
||||
}
|
||||
minStr = minStr.replace('’', ':');
|
||||
minStr = minStr.replace("'", ':');
|
||||
const [min, sec] = minStr.split(':');
|
||||
|
||||
return parseInt(hourStr) * 3600 + parseInt(min) * 60 + parseInt(sec);
|
||||
}
|
||||
|
||||
let partTimesNodes = document.querySelectorAll('body #app main tbody tr:not(.isContentPart) + tr:not(.isSubPart) td:first-of-type');
|
||||
let partTimes = Array.from(partTimesNodes);
|
||||
for (let i = 0; i < partTimes.length; i++) {
|
||||
partTimes[i] = convertToSeconds(partTimes[i].innerText);
|
||||
}
|
||||
let lastTime = document.querySelectorAll('body #app main tbody tr:last-of-type td:first-of-type');
|
||||
partTimes.push(convertToSeconds(lastTime[0].innerText));
|
||||
let partDurations = [];
|
||||
for (let i = 0; i < partTimes.length - 1; i++) {
|
||||
partDurations.push(partTimes[i + 1] - partTimes[i]);
|
||||
}
|
||||
let totalTime = convertToSeconds(lastTime[0].innerText);
|
||||
|
||||
let tlContainer, tlContainerHeight;
|
||||
let partBlockHeights = [];
|
||||
let activePartIndex = 0;
|
||||
|
||||
function getAllHeights() {
|
||||
partBlockHeights = [];
|
||||
tlContainer = document.querySelector('#timeline_container');
|
||||
let header = document.querySelector('header'), footer = document.querySelector('footer');
|
||||
tlContainer.style.height = `calc(100vh - ${header.offsetHeight}px - ${footer.offsetHeight}px - 60px)`;
|
||||
tlContainer.style.top = `${document.querySelector('header').offsetHeight + 30}px`;
|
||||
tlContainerHeight = tlContainer.offsetHeight;
|
||||
for (let partDuration of partDurations) {
|
||||
partBlockHeights.push(partDuration / totalTime * tlContainerHeight);
|
||||
}
|
||||
}
|
||||
getAllHeights();
|
||||
|
||||
function drawFriseRects() {
|
||||
for (let i = 0; i < partBlockHeights.length; i++) {
|
||||
let partDiv = document.createElement('div');
|
||||
partDiv.style.width = "22px";
|
||||
partDiv.style.height = partBlockHeights[i] + "px";
|
||||
partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
||||
partDiv.style.borderBottom = "solid 1px #010d19";
|
||||
partDiv.style.borderTop = "solid 1px #010d19";
|
||||
partDiv.style.transition = "width 0.3s ease-out";
|
||||
partDiv.style.cursor = "pointer";
|
||||
tlContainer.prepend(partDiv);
|
||||
tlContainer.children[0].addEventListener("mouseenter", function() {
|
||||
let el = tlContainer.children[tlContainer.children.length - 1 - i];
|
||||
if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
|
||||
el.style.width = "32px";
|
||||
toggleTitleHover(i, 'show');
|
||||
}
|
||||
});
|
||||
tlContainer.children[0].addEventListener("mouseleave", function() {
|
||||
let el = tlContainer.children[tlContainer.children.length - 1 - i];
|
||||
if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
|
||||
el.style.width = "22px";
|
||||
}
|
||||
toggleTitleHover(i, 'hide');
|
||||
});
|
||||
tlContainer.children[0].addEventListener("click", function() {
|
||||
isScrollingFromGrab = false;
|
||||
titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
}
|
||||
}
|
||||
drawFriseRects();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
while(tlContainer.lastChild) {
|
||||
tlContainer.removeChild(tlContainer.lastChild);
|
||||
}
|
||||
getAllHeights();
|
||||
drawFriseRects();
|
||||
});
|
||||
|
||||
// titres parties frise
|
||||
let titreFriseEl = document.createElement('div');
|
||||
|
||||
let elements = Array.from(document.querySelectorAll('.isMainPart, .isSubPart'));
|
||||
|
||||
let mainWithoutSubAfter = [];
|
||||
let mainWithSubAfter = [];
|
||||
let subWithoutMainBefore = [];
|
||||
|
||||
let lastMain = null;
|
||||
|
||||
let grabbing = false;
|
||||
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let current = elements[i];
|
||||
let next = elements[i + 1];
|
||||
|
||||
if (current.classList.contains('isMainPart')) {
|
||||
lastMain = current;
|
||||
if (next && next.classList.contains('isSubPart')) {
|
||||
mainWithSubAfter.push({ index: i, main: current.innerText, sub: next.innerText, el: elements[i] });
|
||||
} else {
|
||||
mainWithoutSubAfter.push({ index: i, main: current.innerText, sub: "", el: elements[i] });
|
||||
}
|
||||
}
|
||||
|
||||
if (current.classList.contains('isSubPart')) {
|
||||
let prevMain = lastMain && lastMain.classList.contains('isMainPart') ? lastMain.innerText : "";
|
||||
subWithoutMainBefore.push({ index: i, main: prevMain, sub: current.innerText, el: elements[i] });
|
||||
}
|
||||
}
|
||||
|
||||
let titresFrise = [...mainWithoutSubAfter, ...mainWithSubAfter, ...subWithoutMainBefore];
|
||||
|
||||
titresFrise.sort((a, b) => a.index - b.index);
|
||||
|
||||
for (let i = titresFrise.length - 1; i > 0; i--) {
|
||||
let current = titresFrise[i];
|
||||
let next = titresFrise[i - 1];
|
||||
|
||||
if (current.main === next.main && current.sub === next.sub) {
|
||||
titresFrise.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
titreFriseEl.setAttribute('id', 'titres_frise');
|
||||
titreFriseEl.innerHTML = `
|
||||
<p class="uppercase">${getCurrentTime(titresFrise[0].el)}</p>
|
||||
<p>${titresFrise[0].main}</p>
|
||||
<p class="font-authentic-60">${titresFrise[0].sub}</p>
|
||||
`;
|
||||
titreFriseEl.style.fontSize = '0.9em';
|
||||
titreFriseEl.style.zIndex = '0';
|
||||
titreFriseEl.style.position = 'fixed';
|
||||
titreFriseEl.style.left = '60px';
|
||||
titreFriseEl.style.width = '10vw';
|
||||
titreFriseEl.style.lineHeight = '1.2';
|
||||
titreFriseEl.style.marginTop = '-8px';
|
||||
titreFriseEl.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
|
||||
let main = document.querySelector('#main');
|
||||
main.prepend(titreFriseEl);
|
||||
|
||||
// création et togle des titres au survol des div de la timeline
|
||||
function drawFixedTitles() {
|
||||
let tlContainer = document.querySelector('#timeline_container');
|
||||
let fixedTitlesContainer = document.createElement('div');
|
||||
fixedTitlesContainer.setAttribute('id', 'fixedTitlesContainer');
|
||||
main.prepend(fixedTitlesContainer);
|
||||
for (let index = 0; index < titresFrise.length; index++) {
|
||||
let titreFixedEl = document.createElement('div');
|
||||
titreFixedEl.style.position = 'fixed';
|
||||
titreFixedEl.style.zIndex = 1;
|
||||
titreFixedEl.style.display = 'none';
|
||||
titreFixedEl.style.opacity = '0';
|
||||
titreFixedEl.style.transition = 'opacity 0.3s ease-out';
|
||||
titreFixedEl.style.width = '10vw';
|
||||
titreFixedEl.style.top = `${tlContainer.children[index].getBoundingClientRect().top - 8}px`;
|
||||
titreFixedEl.style.left = '60px';
|
||||
titreFixedEl.style.fontSize = '0.9em';
|
||||
titreFixedEl.style.lineHeight = '1.2';
|
||||
let titreFixedElContent = document.createElement('p');
|
||||
titreFixedElContent.innerHTML = `
|
||||
<p>${titresFrise[titresFrise.length - index - 1].main}</p>
|
||||
<p class="font-authentic-60">${titresFrise[titresFrise.length - index - 1].sub}</p>
|
||||
`;
|
||||
titreFixedElContent.style.backgroundColor = '#010d19';
|
||||
titreFixedEl.append(titreFixedElContent);
|
||||
let topGradient = document.createElement('div');
|
||||
topGradient.style.height = '10px';
|
||||
topGradient.style.width = '100%';
|
||||
topGradient.style.background = 'linear-gradient(to bottom, transparent, #010d19)';
|
||||
titreFixedEl.prepend(topGradient);
|
||||
let bottomGradient = document.createElement('div');
|
||||
bottomGradient.style.height = '10px';
|
||||
bottomGradient.style.width = '100%';
|
||||
bottomGradient.style.background = 'linear-gradient(to top, transparent, #010d19)';
|
||||
titreFixedEl.append(bottomGradient);
|
||||
fixedTitlesContainer.prepend(titreFixedEl);
|
||||
}
|
||||
}
|
||||
drawFixedTitles();
|
||||
|
||||
function toggleTitleHover(elIndex, state) {
|
||||
let fixedTitlesContainer = document.querySelector('#fixedTitlesContainer');
|
||||
let el = fixedTitlesContainer.children[elIndex];
|
||||
if (state === 'show') {
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
}, 1);
|
||||
} else if (state === 'hide') {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
el.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE GRAB DU CURSEUR DE LA TL
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
// make the cursor move on scroll
|
||||
let cursor = document.querySelector('#cursor');
|
||||
cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
|
||||
cursor.style.cursor = 'grab';
|
||||
let titres = document.querySelector('#titres_frise');
|
||||
titres.style.cursor = 'grab';
|
||||
let partRects = document.querySelectorAll('#timeline_container div');
|
||||
partRects = Array.from(partRects);
|
||||
partRects = partRects.reverse();
|
||||
partRects[0].style.width = '32px';
|
||||
document.addEventListener("scroll", () => {
|
||||
if (!grabbing) {
|
||||
displayCurrentPartTitle(getCurrentPartFromScroll());
|
||||
moveCursorFromScroll(getCurrentPartFromScroll());
|
||||
}
|
||||
});
|
||||
|
||||
function makeElementDraggable(element, relatedEl) {
|
||||
let offsetY;
|
||||
|
||||
element.addEventListener('mousedown', (e) => {
|
||||
let elTransformY;
|
||||
if (!element.style.transform) {
|
||||
elTransformY = 0;
|
||||
} else {
|
||||
elTransformY = +element.style.transform.split('(')[1].split('p')[0];
|
||||
}
|
||||
e.preventDefault();
|
||||
grabbing = true;
|
||||
offsetY = e.clientY - elTransformY;
|
||||
element.style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (grabbing) {
|
||||
if (e.clientY < tlContainerHeight + tlContainer.offsetTop && e.clientY > tlContainer.offsetTop) {
|
||||
const y = e.clientY - offsetY;
|
||||
element.style.transform = `translateY(${y}px)`;
|
||||
relatedEl.style.transform = `translateY(${y}px)`;
|
||||
if (!isNaN(y)) displayCurrentPartTitle(getCurrentPartFromCursor(y));
|
||||
} else if (e.clientY < tlContainer.offsetTop + 10) {
|
||||
element.style.transform = `translateY(0px)`;
|
||||
relatedEl.style.transform = `translateY(0px)`;
|
||||
} else if (e.clientY >= tlContainerHeight + tlContainer.offsetTop) {
|
||||
element.style.transform = `translateY(${tlContainerHeight}px)`;
|
||||
relatedEl.style.transform = `translateY(${tlContainerHeight}px)`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (grabbing) scrollOnGrab(element);
|
||||
element.style.cursor = 'grab';
|
||||
grabbing = false;
|
||||
});
|
||||
}
|
||||
|
||||
makeElementDraggable(cursor, titres);
|
||||
makeElementDraggable(titres, cursor);
|
||||
|
||||
// get heights of parts dans le tableau et dans la timeline
|
||||
function getSteps() {
|
||||
let tlElSteps = [];
|
||||
for (let i = 0; i < partRects.length; i++) {
|
||||
tlElSteps.push(partRects[i].offsetTop);
|
||||
}
|
||||
let titles = document.querySelectorAll('.isMainPart, .isSubPart');
|
||||
let scrollSteps = [];
|
||||
for (let title of titles) {
|
||||
let nextLine = title.nextElementSibling;
|
||||
if (!nextLine?.classList.contains('isSubPart')) {
|
||||
scrollSteps.push(title.offsetTop);
|
||||
}
|
||||
}
|
||||
return({
|
||||
'tlElSteps':tlElSteps,
|
||||
'scrollSteps':scrollSteps
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE SCROLL DU GRAB
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
let isScrollingFromGrab = false;
|
||||
|
||||
function scrollOnGrab(el) {
|
||||
let scrollValue =
|
||||
((getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp] - getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp - 1]) * getCursorPositionInTimelinePart(el).proportionInPart)
|
||||
+ getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp];
|
||||
isScrollingFromGrab = true;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
setTimeout(() => {
|
||||
isScrollingFromGrab = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function getCursorPositionInTimelinePart(el) {
|
||||
let elTransformY;
|
||||
if (!el.style.transform) {
|
||||
elTransformY = 0;
|
||||
} else {
|
||||
elTransformY = +el.style.transform.split('(')[1].split('p')[0];
|
||||
}
|
||||
|
||||
let tlPartHeight, tlPartBottom, tlPartTop, proportionInPart, stepAfterMouseUp;
|
||||
for (let j = 0; j < partRects.length; j++) {
|
||||
if (j === getCurrentPartFromCursor(elTransformY)) {
|
||||
tlPartHeight = partRects[j].getBoundingClientRect().height;
|
||||
tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
|
||||
tlPartTop = tlPartBottom - tlPartHeight;
|
||||
proportionInPart = ((tlPartHeight - (elTransformY - tlPartTop)) / tlPartHeight) * -1;
|
||||
if (proportionInPart > 0 && proportionInPart < 1) {
|
||||
stepAfterMouseUp = j;
|
||||
return {stepAfterMouseUp, proportionInPart};
|
||||
} else {
|
||||
stepAfterMouseUp = j;
|
||||
proportionInPart = 0;
|
||||
return {stepAfterMouseUp, proportionInPart};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE RAPPORT SCROLL / TIMELINE
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
function moveCursorFromScroll(currentPartIndex) {
|
||||
if (!isScrollingFromGrab) {
|
||||
let currentScroll = window.scrollY;
|
||||
|
||||
let cursorTopValue = 0;
|
||||
let tlPartHeight, tlPartBottom;
|
||||
|
||||
for (let j = 0; j < partRects.length; j++) {
|
||||
tlPartHeight = partRects[j].getBoundingClientRect().height
|
||||
tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
|
||||
cursorTopValue = tlPartBottom;
|
||||
// get the amount of the current scrollpart scrolled
|
||||
if (j === currentPartIndex) break;
|
||||
}
|
||||
|
||||
let currentScrollPartBottom = getSteps().scrollSteps[currentPartIndex - 1] ? getSteps().scrollSteps[currentPartIndex - 1] : 0;
|
||||
let currentScrollPartHeight;
|
||||
if (getSteps().scrollSteps[currentPartIndex + 1]) {
|
||||
currentScrollPartHeight = getSteps().scrollSteps[currentPartIndex + 1] - currentScrollPartBottom;
|
||||
} else {
|
||||
currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
|
||||
}
|
||||
let currentScrollSincePartBottom = currentScroll - currentScrollPartBottom;
|
||||
let scrollPartProportion = currentScrollSincePartBottom / currentScrollPartHeight;
|
||||
|
||||
cursorTopValue = cursorTopValue + tlPartHeight * (tlPartHeight / tlPartHeight * (scrollPartProportion - 0.3));
|
||||
|
||||
if (cursorTopValue > 0) {
|
||||
cursor.style.transform = `translateY(${cursorTopValue}px)`;
|
||||
titres.style.transform = `translateY(${cursorTopValue}px)`;
|
||||
} else {
|
||||
cursor.style.transform = `translateY(0px)`;
|
||||
titres.style.transform = `translateY(0px)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let prevPartIndex = 0;
|
||||
let lastCallTimestamp = 0;
|
||||
|
||||
function displayCurrentPartTitle(currentPartIndex) {
|
||||
if (isNaN(currentPartIndex)) currentPartIndex = 0;
|
||||
const currentTime = performance.now();
|
||||
if (currentTime - lastCallTimestamp >= 400) {
|
||||
lastCallTimestamp = currentTime;
|
||||
titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el); // ICI POUR METTRE LE TEMPS BIEN
|
||||
}
|
||||
let mainEl = titres.children[1];
|
||||
let subEl = titres.lastElementChild;
|
||||
if (mainEl.innerText != titresFrise[currentPartIndex]?.main || subEl.innerText != titresFrise[currentPartIndex]?.sub) {
|
||||
mainEl.innerText = titresFrise[currentPartIndex]?.main;
|
||||
subEl.innerText = titresFrise[currentPartIndex]?.sub;
|
||||
partRects[prevPartIndex].style.width = '22px';
|
||||
partRects[currentPartIndex].style.width = '32px';
|
||||
}
|
||||
activePartIndex = currentPartIndex;
|
||||
prevPartIndex = currentPartIndex;
|
||||
}
|
||||
|
||||
function getCurrentPartFromScroll() {
|
||||
let currentScroll = window.scrollY;
|
||||
for (let i = 0; i < getSteps().scrollSteps.length; i++) {
|
||||
if (
|
||||
(currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
|
||||
&& currentScroll + window.innerHeight / 2 <= getSteps().scrollSteps[i + 1]) ||
|
||||
(currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
|
||||
&& i === getSteps().scrollSteps.length - 1)
|
||||
) {
|
||||
return(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentPartFromCursor(cursorTransformY) {
|
||||
for (let i = 0; i < getSteps().tlElSteps.length; i++) {
|
||||
if (cursorTransformY >= getSteps().tlElSteps[i] && cursorTransformY < getSteps().tlElSteps[i + 1]) {
|
||||
return(i);
|
||||
} else if (cursorTransformY > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
|
||||
return(getSteps().tlElSteps.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////
|
||||
// ICI LE GETCURRENTTIME !!!!!!!!!!!!!!
|
||||
///////////////////////////////////////
|
||||
|
||||
function getCurrentTime(titleEl) {
|
||||
let nextRow = titleEl?.nextElementSibling;
|
||||
if (!grabbing) {
|
||||
while(nextRow) {
|
||||
if (nextRow.offsetTop > window.scrollY &&
|
||||
nextRow.classList.contains('isContentPart')) {
|
||||
return(nextRow.firstElementChild.innerText);
|
||||
}
|
||||
nextRow = nextRow.nextElementSibling;
|
||||
}
|
||||
} else {
|
||||
let cursor = document.querySelector('#cursor');
|
||||
let allRowsUnder = [];
|
||||
nextRow = nextRow.nextElementSibling.nextElementSibling;
|
||||
while(nextRow) {
|
||||
if (nextRow.classList.contains('isMainPart') || nextRow.classList.contains('isSubPart')) {
|
||||
break;
|
||||
}
|
||||
allRowsUnder.push(nextRow);
|
||||
nextRow = nextRow.nextElementSibling;
|
||||
}
|
||||
return allRowsUnder[Math.floor(allRowsUnder.length * getCursorPositionInTimelinePart(cursor).proportionInPart)].firstElementChild.innerText;
|
||||
}
|
||||
}
|
||||
customTimeline();
|
||||
customSearch();
|
||||
|
||||
|
||||
// désactive le loading quand les éléments sont affichés correctement
|
||||
@@ -619,283 +170,6 @@ domReady(async () => {
|
||||
}, 200);
|
||||
}, 100);
|
||||
|
||||
|
||||
// recherche
|
||||
let searchableContent = document.querySelectorAll('tr td:not(:first-of-type):not(:last-of-type)');
|
||||
let searchInput = document.querySelector('input[type="search"]');
|
||||
let searchResults = document.querySelector('#search_results');
|
||||
let isResultOpen = false;
|
||||
let resultAmount = 0;
|
||||
let resultAmountText = document.querySelector('#result_amount');
|
||||
let hilightedWords;
|
||||
let typingTimer;
|
||||
let currentSelectedWord = 0;
|
||||
let downArrow = document.querySelector('#search_results div div img:first-of-type');
|
||||
let upArrow = document.querySelector('#search_results div div img:last-of-type');
|
||||
|
||||
let thereAreResults = false;
|
||||
let inputIsActive = false;
|
||||
|
||||
searchInput.addEventListener('focus', () => { inputIsActive = true; toggleSearchResults(); });
|
||||
searchInput.addEventListener('blur', () => { inputIsActive = false; });
|
||||
|
||||
searchInput.addEventListener('keydown', function(e) {
|
||||
triggerSearch();
|
||||
});
|
||||
|
||||
function triggerSearch() {
|
||||
setTimeout(() => {
|
||||
|
||||
hilightedWords = [];
|
||||
|
||||
removeHighlightTags();
|
||||
|
||||
resultAmount = 0;
|
||||
|
||||
let input = searchInput.value.toLowerCase();
|
||||
|
||||
if (searchInput.value.length >= 3) {
|
||||
|
||||
thereAreResults = true;
|
||||
|
||||
clearTimeout(typingTimer);
|
||||
|
||||
typingTimer = setTimeout(function() {
|
||||
|
||||
searchInContent(input);
|
||||
|
||||
/* if (!isResultOpen) {
|
||||
toggleSearchResults();
|
||||
}
|
||||
*/
|
||||
let currentScroll = window.scrollY;
|
||||
|
||||
if (hilightedWords.length != 0) {
|
||||
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "block";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "none";
|
||||
|
||||
for (let i = 0; i < hilightedWords.length; i++) {
|
||||
|
||||
let wordBoundingTop = hilightedWords[i].getBoundingClientRect().top;
|
||||
|
||||
if (hilightedWords.length <= 1) {
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
} else {
|
||||
if (currentScroll < hilightedWords[i].getBoundingClientRect().top && i === 0) {
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
break;
|
||||
|
||||
} else if (
|
||||
currentScroll < wordBoundingTop + currentScroll && currentScroll > hilightedWords[i - 1]?.getBoundingClientRect().top + currentScroll
|
||||
) {
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = i + 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.remove('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
break;
|
||||
|
||||
} else if (currentScroll > wordBoundingTop && i === hilightedWords.length - 1) {
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = hilightedWords.length;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.remove('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "none";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "block";
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
}
|
||||
|
||||
}, 800);
|
||||
|
||||
} else {
|
||||
removeHighlightTags();
|
||||
thereAreResults = false;
|
||||
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "none";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "block";
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
/* if (isResultOpen) {
|
||||
toggleSearchResults();
|
||||
}
|
||||
*/ }
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function searchInContent(input) {
|
||||
for (let content of searchableContent) {
|
||||
|
||||
if (content.innerText != '') {
|
||||
|
||||
for (let textEl of content.children) {
|
||||
|
||||
if (textEl.innerText !== '') {
|
||||
|
||||
if (textEl.innerHTML.toLowerCase().includes(input)) {
|
||||
|
||||
let splitContent = textEl.innerHTML.toLowerCase().split(input);
|
||||
|
||||
let processedText = '';
|
||||
|
||||
for (let i = 0; i < splitContent.length; i++) {
|
||||
|
||||
if (splitContent[0] !== '' || splitContent[splitContent.length - 1] !== '') {
|
||||
|
||||
if (i === 0) {
|
||||
processedText += textEl.innerHTML.substring(0, splitContent[i].length);
|
||||
|
||||
} else {
|
||||
let amountOfTextToConcatenate = 0;
|
||||
for (let j = 0; j <= i - 1; j ++) {
|
||||
amountOfTextToConcatenate += splitContent[j].length + input.length;
|
||||
}
|
||||
processedText +=
|
||||
'<span class="highlight">' +
|
||||
textEl.innerHTML.substring(amountOfTextToConcatenate - input.length, amountOfTextToConcatenate) +
|
||||
'</span>' +
|
||||
textEl.innerHTML.substring(
|
||||
amountOfTextToConcatenate, amountOfTextToConcatenate + splitContent[i].length
|
||||
);
|
||||
|
||||
}
|
||||
} else if (splitContent[splitContent.length - 1] === '' && splitContent[0] === '') {
|
||||
processedText = '<span class="highlight">' + textEl.innerHTML.substring(splitContent[i - 1].length, splitContent[i - 1].length + input.length) + '</span>';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
textEl.innerHTML = processedText;
|
||||
|
||||
hilightedWords = document.querySelectorAll('.highlight');
|
||||
resultAmount = hilightedWords.length;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resultAmountText.innerText = resultAmount;
|
||||
}
|
||||
|
||||
function removeHighlightTags() {
|
||||
for (let content of searchableContent) {
|
||||
if (content.innerHTML.includes('<span class="highlight">')) {
|
||||
content.innerHTML = content.innerHTML.replace(/<span class="highlight">|<\/span>/g, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSearchResults() {
|
||||
if (thereAreResults || inputIsActive) {
|
||||
searchResults.style.display = "block";
|
||||
searchResults.style.opacity = 1;
|
||||
searchResults.style.maxHeight = "1000px";
|
||||
isResultOpen = true;
|
||||
} else {
|
||||
searchResults.style.opacity = 0;
|
||||
searchResults.style.maxHeight = "0px";
|
||||
isResultOpen = false;
|
||||
setTimeout(() => {
|
||||
searchResults.style.display = "none";
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
upArrow.addEventListener('click', function (el) {
|
||||
if (!el.target.classList.contains('disabled')) {
|
||||
let currentScroll = window.scrollY;
|
||||
currentSelectedWord--;
|
||||
|
||||
let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
|
||||
|
||||
if (currentSelectedWord === 1) {
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
} else {
|
||||
upArrow.classList.remove('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
downArrow.addEventListener('click', function (el) {
|
||||
if (!el.target.classList.contains('disabled')) {
|
||||
let currentScroll = window.scrollY;
|
||||
currentSelectedWord++;
|
||||
|
||||
let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
|
||||
|
||||
if (currentSelectedWord === hilightedWords.length) {
|
||||
downArrow.classList.add('disabled');
|
||||
upArrow.classList.remove('disabled');
|
||||
} else {
|
||||
downArrow.classList.remove('disabled');
|
||||
upArrow.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let tagsDiv = document.querySelector('#search_results > div:last-of-type');
|
||||
|
||||
window.addEventListener('click', function (el) {
|
||||
if (!searchResults.contains(el.target) && isResultOpen && el.target != searchInput && el.target != tagsDiv) {
|
||||
toggleSearchResults();
|
||||
}
|
||||
});
|
||||
|
||||
let searchWordList = document.querySelector('#content_search_tag');
|
||||
searchWordList = searchWordList.innerText.substring(1, searchWordList.innerText.length - 1).split(', ');
|
||||
|
||||
for (let tag of searchWordList) {
|
||||
let tagWrapper = document.createElement('p');
|
||||
tagWrapper.innerText = tag;
|
||||
tagWrapper.addEventListener('click', function () {
|
||||
searchInput.value = tag;
|
||||
triggerSearch();
|
||||
});
|
||||
tagsDiv.appendChild(tagWrapper);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
const contributionPostsTitles = historyData.titles;
|
||||
const contributionPostsContents = historyData.contents;
|
||||
const contributionDates = historyData.dates;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (document.querySelector('.revision-q') && contributionDates.length > 0) {
|
||||
let historyBlock = document.createElement('div');
|
||||
historyBlock.style.marginRight = "20px";
|
||||
let historyTitle = document.createElement('h1');
|
||||
historyTitle.style.marginTop = "100px";
|
||||
historyTitle.style.fontWeight = "lighter";
|
||||
historyTitle.innerText = "Minutages auxquels vous avez contribué";
|
||||
historyBlock.append(historyTitle);
|
||||
|
||||
let historyTable = document.createElement('table');
|
||||
historyTable.style.width = "100%";
|
||||
historyTable.style.padding = "20px";
|
||||
let historyTableHead = document.createElement('thead');
|
||||
let tableHeadTr = document.createElement('tr');
|
||||
|
||||
let thDate = document.createElement('th');
|
||||
thDate.style.paddingBottom = "10px";
|
||||
thDate.style.fontStyle = "italic";
|
||||
thDate.style.borderRight = "solid 1px white";
|
||||
thDate.innerText = "Date de la contribution";
|
||||
|
||||
|
||||
let thMinutage = document.createElement('th');
|
||||
thMinutage.style.paddingBottom = "10px";
|
||||
thMinutage.style.fontStyle = "italic";
|
||||
thMinutage.innerText = "Minutage";
|
||||
let thImage = document.createElement('th');
|
||||
thImage.style.paddingBottom = "10px";
|
||||
thImage.style.fontStyle = "italic";
|
||||
thImage.innerText = "Images";
|
||||
let thVoix = document.createElement('th');
|
||||
thVoix.style.paddingBottom = "10px";
|
||||
thVoix.style.fontStyle = "italic";
|
||||
thVoix.innerText = "Voix Off et In";
|
||||
let thBandeSon = document.createElement('th');
|
||||
thBandeSon.style.paddingBottom = "10px";
|
||||
thBandeSon.style.fontStyle = "italic";
|
||||
thBandeSon.innerText = "Bande Son";
|
||||
let thEcrits = document.createElement('th');
|
||||
thEcrits.style.paddingBottom = "10px";
|
||||
thEcrits.style.fontStyle = "italic";
|
||||
thEcrits.innerText = "Écrits";
|
||||
tableHeadTr.append(thDate);
|
||||
tableHeadTr.append(thMinutage);
|
||||
tableHeadTr.append(thImage);
|
||||
tableHeadTr.append(thVoix);
|
||||
tableHeadTr.append(thBandeSon);
|
||||
tableHeadTr.append(thEcrits);
|
||||
historyTableHead.append(tableHeadTr);
|
||||
historyTable.append(historyTableHead);
|
||||
let tableBody = document.createElement('tbody');
|
||||
|
||||
for (let i = 0; i < contributionPostsTitles.length; i++) {
|
||||
let tableRow = document.createElement('tr');
|
||||
|
||||
let caseDate = document.createElement('th');
|
||||
caseDate.style.borderRight = "solid 1px white";
|
||||
for (let date of contributionDates) {
|
||||
if (date[0] === contributionPostsTitles[i]) {
|
||||
let thisDate = date[1];
|
||||
let time = thisDate.split(' ')[1];
|
||||
thisDate = thisDate.split(' ')[0].split('-');
|
||||
thisDate = `${thisDate[2]}/${thisDate[1]}/${thisDate[0]}`;
|
||||
caseDate.innerHTML += `<p>${thisDate} ${time}</p>`;
|
||||
}
|
||||
}
|
||||
tableRow.append(caseDate);
|
||||
|
||||
let caseMinutage = document.createElement('th');
|
||||
caseMinutage.innerText = contributionPostsTitles[i];
|
||||
caseMinutage.style.paddingTop = "10px";
|
||||
caseMinutage.style.paddingBottom = "10px";
|
||||
|
||||
tableRow.append(caseMinutage);
|
||||
|
||||
let casesContents = contributionPostsContents[i].split('---');
|
||||
|
||||
let imageTh = document.createElement('th');
|
||||
imageTh.innerHTML = casesContents[1].slice(0, -17);
|
||||
tableRow.append(imageTh);
|
||||
|
||||
let voixTh = document.createElement('th');
|
||||
voixTh.innerHTML = casesContents[2].slice(0, -11);
|
||||
tableRow.append(voixTh);
|
||||
|
||||
let bandeSonTh = document.createElement('th');
|
||||
bandeSonTh.innerHTML = casesContents[3].slice(0, -8);
|
||||
tableRow.append(bandeSonTh);
|
||||
|
||||
let ecritsTh = document.createElement('th');
|
||||
ecritsTh.innerHTML = casesContents[4];
|
||||
tableRow.append(ecritsTh);
|
||||
|
||||
tableBody.append(tableRow);
|
||||
}
|
||||
|
||||
historyTable.append(tableBody);
|
||||
|
||||
let allThs = historyTable.querySelectorAll('th');
|
||||
for (let th of allThs) {
|
||||
th.style.padding = "10px";
|
||||
th.style.paddingBottom = "20px";
|
||||
th.style.paddingTop = "20px";
|
||||
th.style.borderBottom = "solid 1px white";
|
||||
}
|
||||
|
||||
historyBlock.append(historyTable);
|
||||
|
||||
let wpContent = document.querySelector('#wpbody-content');
|
||||
wpContent.append(historyBlock);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector('.block-editor-writing-flow')) {
|
||||
setTimeout(() => {
|
||||
document.querySelector('.rvy-current-status').innerText = replaceText(document.querySelector('.rvy-current-status').innerText);
|
||||
document.querySelector('.revision-approve.revision-created').innerText = replaceText(document.querySelector('.revision-approve.revision-created').innerText);
|
||||
let sendButton = document.querySelector('a.revision-approve');
|
||||
sendButton.addEventListener('click', () => {
|
||||
setTimeout(() => {
|
||||
let elToDelete = document.querySelector('.components-panel__row.rvy-creation-ui.edit-post-revision-status')
|
||||
elToDelete.style.display = "none";
|
||||
}, 300);
|
||||
});
|
||||
|
||||
}, 500);
|
||||
} else if (document.querySelector('.revision-q')) {
|
||||
document.querySelector('.wp-menu-name').innerText = replaceText(document.querySelector('.wp-menu-name').innerText);
|
||||
document.querySelector('h1').innerText = replaceText(document.querySelector('h1').innerText);
|
||||
let mine = document.querySelector('.mine a');
|
||||
if (mine !== null) {
|
||||
document.querySelector('.mine a').innerText = replaceText(document.querySelector('.mine a').innerText);
|
||||
}
|
||||
document.querySelector('#title a').innerText = replaceText(document.querySelector('#title a').innerText);
|
||||
document.querySelector('#date a').innerText = replaceText(document.querySelector('#date a').innerText);
|
||||
|
||||
let sentStatus = document.querySelectorAll('.wp-list-table tbody tr td[data-colname="État"]');
|
||||
if (sentStatus) {
|
||||
for (let caseStatus of sentStatus) {
|
||||
if (caseStatus.firstElementChild.innerText === "Envoyé") {
|
||||
caseStatus.firstElementChild.innerText = "Envoyé, en attente de validation";
|
||||
}
|
||||
}
|
||||
}
|
||||
let revisionTitles = document.querySelectorAll('.row-title');
|
||||
if (revisionTitles) {
|
||||
for (let revisionTitle of revisionTitles) {
|
||||
revisionTitle.innerText = revisionTitle.innerText + " (afficher)";
|
||||
}
|
||||
}
|
||||
} else if (document.querySelector('.profile-php')) {
|
||||
document.querySelector('#toplevel_page_revisionary-q a .wp-menu-name').innerText = replaceText(document.querySelector('#toplevel_page_revisionary-q a .wp-menu-name').innerText);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
})
|
||||
|
||||
function replaceText(content) {
|
||||
content = content.replace(/Révision/g, 'Contribution');
|
||||
content = content.replace(/révision/g, 'contribution');
|
||||
content = content.replace(/Révisions/g, 'Contributions');
|
||||
content = content.replace(/révisions/g, 'contributions');
|
||||
return content;
|
||||
}
|
||||
@@ -1,21 +1,73 @@
|
||||
(function($) {
|
||||
// Access the page content
|
||||
var pageContent = pageContentData.content;
|
||||
var websiteUrl = pageContentData.websiteUrl;
|
||||
var myRevisionsUrl = pageContentData.myRevisionsUrl;
|
||||
|
||||
// Now you can use the 'pageContent' variable in your JavaScript code
|
||||
console.log(pageContent);
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
setTimeout(() => {
|
||||
let editorWriting = document.querySelector('.edit-post-visual-editor');
|
||||
let writingSpace = document.querySelector('.block-editor-writing-flow');
|
||||
writingSpace.style.padding = "0";
|
||||
console.log(editorWriting);
|
||||
let tutorialWrapper = document.createElement('div');
|
||||
tutorialWrapper.style.width = "100%";
|
||||
tutorialWrapper.style.backgroundColor = "#384756";
|
||||
tutorialWrapper.style.padding = "20px";
|
||||
tutorialWrapper.innerHTML = pageContent;
|
||||
editorWriting.appendChild(tutorialWrapper);
|
||||
}, 2000);
|
||||
setTimeout(() => {
|
||||
// display tutorial
|
||||
let editorWriting = document.querySelector('.edit-post-visual-editor');
|
||||
let writingSpace = document.querySelector('.block-editor-writing-flow');
|
||||
let sidePannel = document.querySelector('.interface-interface-skeleton__sidebar');
|
||||
if (writingSpace) {
|
||||
writingSpace.style.maxWidth = "75vw";
|
||||
writingSpace.style.overflowX = "hidden";
|
||||
sidePannel.style.maxWidth = "25vw";
|
||||
sidePannel.style.overflowX = "hidden";
|
||||
writingSpace.style.padding = "0";
|
||||
let tutorialWrapper = document.createElement('div');
|
||||
let tutorialTitle = document.createElement('p');
|
||||
tutorialWrapper.prepend(tutorialTitle);
|
||||
tutorialTitle.innerText = "Notice d'utilisation de l'espace contribution";
|
||||
tutorialTitle.style.fontSize = "1.3rem";
|
||||
tutorialWrapper.setAttribute('id', 'tutorial_editor');
|
||||
tutorialWrapper.style.width = "100%";
|
||||
tutorialWrapper.style.backgroundColor = "#384756";
|
||||
tutorialWrapper.style.padding = "20px";
|
||||
tutorialWrapper.innerHTML += pageContent;
|
||||
for (let tutorialParagraph of tutorialWrapper.children) {
|
||||
tutorialParagraph.style.marginBottom = '10px';
|
||||
}
|
||||
sidePannel.appendChild(tutorialWrapper);
|
||||
}
|
||||
|
||||
// create the go back to the index button and the go back to my revisions page
|
||||
let pannel = document.querySelector('.interface-pinned-items');
|
||||
if (pannel) {
|
||||
let backToIndexButton = document.createElement('div');
|
||||
let backToIndexLink = document.createElement('a');
|
||||
backToIndexLink.setAttribute('href', websiteUrl);
|
||||
backToIndexLink.innerHTML = "← Retour à la Partition";
|
||||
backToIndexLink.style.color = "white";
|
||||
backToIndexLink.style.padding = "6px 8px";
|
||||
backToIndexLink.style.border = "solid 1px white";
|
||||
backToIndexButton.style.paddingTop = '7px';
|
||||
backToIndexButton.style.marginRight = '5px';
|
||||
backToIndexButton.appendChild(backToIndexLink);
|
||||
backToIndexButton.setAttribute('id', 'backToIndexButton');
|
||||
pannel.prepend(backToIndexButton);
|
||||
|
||||
let backToMyRevisionsButton = document.createElement('div');
|
||||
let backToMyRevisionsLink = document.createElement('a');
|
||||
backToMyRevisionsLink.setAttribute('href', myRevisionsUrl);
|
||||
backToMyRevisionsLink.innerHTML = "← Liste des contributions";
|
||||
backToMyRevisionsLink.style.color = "white";
|
||||
backToMyRevisionsLink.style.padding = "6px 8px";
|
||||
backToMyRevisionsLink.style.border = "solid 1px white";
|
||||
backToMyRevisionsButton.style.paddingTop = '7px';
|
||||
backToMyRevisionsButton.style.marginRight = '5px';
|
||||
backToMyRevisionsButton.appendChild(backToMyRevisionsLink);
|
||||
backToMyRevisionsButton.setAttribute('id', 'backToMyRevisionsButton');
|
||||
pannel.prepend(backToMyRevisionsButton);
|
||||
}
|
||||
|
||||
// transformer le "article" en "envoyer"
|
||||
let tabButton = document.querySelector('.components-button.edit-post-sidebar__panel-tab');
|
||||
if (tabButton) {
|
||||
tabButton.innerText = "Soumettre la contribution";
|
||||
}
|
||||
}, 2000);
|
||||
})
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@@ -0,0 +1,318 @@
|
||||
function customSearch() {
|
||||
let searchableContent = document.querySelectorAll('tr td:not(:last-of-type)');
|
||||
let searchInput = document.querySelector('input[type="search"]');
|
||||
let searchResults = document.querySelector('#search_results');
|
||||
let isResultOpen = false;
|
||||
let resultAmount = 0;
|
||||
let resultAmountText = document.querySelector('#result_amount');
|
||||
let hilightedWords;
|
||||
let typingTimer;
|
||||
let currentSelectedWord = 0;
|
||||
let downArrow = document.querySelector('#search_results div div img:first-of-type');
|
||||
let upArrow = document.querySelector('#search_results div div img:last-of-type');
|
||||
|
||||
let thereAreResults = false;
|
||||
let inputIsActive = false;
|
||||
|
||||
searchInput.addEventListener('focus', () => { inputIsActive = true; toggleSearchResults(); });
|
||||
searchInput.addEventListener('blur', () => { inputIsActive = false; });
|
||||
|
||||
searchInput.addEventListener('keydown', function(e) {
|
||||
if ((e.key === 'Enter' || e.keyCode === 13) && resultAmount > 1) {
|
||||
if (+resultAmountText.innerText.split('/')[0] === resultAmount) {
|
||||
getToFirstOccurence();
|
||||
} else {
|
||||
getToNextOccurence(downArrow);
|
||||
}
|
||||
} else {
|
||||
triggerSearch();
|
||||
}
|
||||
});
|
||||
|
||||
function triggerSearch() {
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
hilightedWords = [];
|
||||
|
||||
resultAmount = 0;
|
||||
|
||||
removeHighlightTags();
|
||||
|
||||
let input = searchInput.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
||||
|
||||
if (searchInput.value.length >= 3) {
|
||||
|
||||
thereAreResults = true;
|
||||
|
||||
clearTimeout(typingTimer);
|
||||
|
||||
typingTimer = setTimeout(function() {
|
||||
|
||||
searchInContent(input);
|
||||
|
||||
let currentScroll = window.scrollY;
|
||||
|
||||
if (hilightedWords.length != 0) {
|
||||
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "block";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "none";
|
||||
|
||||
for (let i = 0; i < hilightedWords.length; i++) {
|
||||
|
||||
let wordBoundingTop = hilightedWords[i].getBoundingClientRect().top;
|
||||
|
||||
if (hilightedWords.length <= 1) {
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
} else {
|
||||
if (currentScroll <= wordBoundingTop + currentScroll && i === 0) {
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
break;
|
||||
|
||||
} else if (
|
||||
currentScroll <= wordBoundingTop + currentScroll && currentScroll >= hilightedWords[i - 1]?.getBoundingClientRect().top + currentScroll
|
||||
) {
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = i + 1;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.remove('disabled');
|
||||
if (i === hilightedWords.length - 1) {
|
||||
downArrow.classList.add('disabled');
|
||||
} else {
|
||||
downArrow.classList.remove('disabled');
|
||||
}
|
||||
break;
|
||||
|
||||
} else if (currentScroll >= wordBoundingTop && i === hilightedWords.length - 1) {
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
currentSelectedWord = hilightedWords.length;
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText;
|
||||
upArrow.classList.remove('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "none";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "block";
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
}
|
||||
|
||||
}, 800);
|
||||
|
||||
} else {
|
||||
removeHighlightTags();
|
||||
clearTimeout(typingTimer);
|
||||
thereAreResults = false;
|
||||
|
||||
searchResults.querySelector('div p:first-of-type').style.display = "none";
|
||||
searchResults.querySelector('div p:last-of-type').style.display = "block";
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.add('disabled');
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function searchInContent(input) {
|
||||
for (let content of searchableContent) {
|
||||
if (content.innerText != '') {
|
||||
if (content.children.length > 0) {
|
||||
for (let textEl of content.children) {
|
||||
compareTexts(textEl, input);
|
||||
}
|
||||
} else {
|
||||
compareTexts(content, input);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
resultAmountText.innerText = resultAmount;
|
||||
}
|
||||
|
||||
function compareTexts(textEl, input) {
|
||||
if (textEl.innerText !== '') {
|
||||
|
||||
if (textEl.parentElement.tagName === "TR") {
|
||||
input = input.replace(/'/g, '’');
|
||||
}
|
||||
|
||||
if (textEl.innerHTML.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(input)) {
|
||||
|
||||
let splitContent = textEl.innerHTML.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").split(input);
|
||||
|
||||
|
||||
let processedText = '';
|
||||
|
||||
for (let i = 0; i < splitContent.length; i++) {
|
||||
|
||||
if (splitContent[0] !== '' || splitContent[splitContent.length - 1] !== '') {
|
||||
|
||||
if (i === 0) {
|
||||
processedText += textEl.innerHTML.substring(0, splitContent[i].length);
|
||||
|
||||
} else {
|
||||
let amountOfTextToConcatenate = 0;
|
||||
for (let j = 0; j <= i - 1; j ++) {
|
||||
amountOfTextToConcatenate += splitContent[j].length + input.length;
|
||||
}
|
||||
processedText +=
|
||||
'<span class="highlight">' +
|
||||
textEl.innerHTML.substring(amountOfTextToConcatenate - input.length, amountOfTextToConcatenate) +
|
||||
'</span>' +
|
||||
textEl.innerHTML.substring(
|
||||
amountOfTextToConcatenate, amountOfTextToConcatenate + splitContent[i].length
|
||||
);
|
||||
|
||||
}
|
||||
} else if (splitContent[splitContent.length - 1] === '' && splitContent[0] === '') {
|
||||
processedText = '<span class="highlight">' + textEl.innerHTML + '</span>';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
textEl.innerHTML = processedText;
|
||||
|
||||
hilightedWords = document.querySelectorAll('.highlight');
|
||||
resultAmount = hilightedWords.length;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function removeHighlightTags() {
|
||||
for (let content of searchableContent) {
|
||||
if (content.innerHTML.includes('<span class="highlight">')) {
|
||||
content.innerHTML = content.innerHTML.replace(/<span class="highlight">|<\/span>/g, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSearchResults() {
|
||||
// dans le if thereAreResults || inputIsActive
|
||||
// si on veut que les résultats restent ouvert
|
||||
// quand il y a des résultats
|
||||
if (inputIsActive) {
|
||||
searchResults.style.top = `${searchInput.getBoundingClientRect().bottom + 5}px`;
|
||||
searchResults.style.display = "block";
|
||||
searchResults.style.opacity = 1;
|
||||
searchResults.style.maxHeight = "1000px";
|
||||
isResultOpen = true;
|
||||
} else {
|
||||
searchResults.style.opacity = 0;
|
||||
searchResults.style.maxHeight = "0px";
|
||||
isResultOpen = false;
|
||||
setTimeout(() => {
|
||||
searchResults.style.display = "none";
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
upArrow.addEventListener('click', function (el) {
|
||||
getToPrevOccurence(el)
|
||||
});
|
||||
|
||||
function getToPrevOccurence(el) {
|
||||
if (!el.target.classList.contains('disabled')) {
|
||||
let currentScroll = window.scrollY;
|
||||
currentSelectedWord--;
|
||||
|
||||
let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
|
||||
|
||||
if (currentSelectedWord === 1) {
|
||||
upArrow.classList.add('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
} else {
|
||||
upArrow.classList.remove('disabled');
|
||||
downArrow.classList.remove('disabled');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
downArrow.addEventListener('click', function (el) {
|
||||
getToNextOccurence(el.target);
|
||||
});
|
||||
|
||||
function getToNextOccurence(el) {
|
||||
if (!el.classList.contains('disabled')) {
|
||||
let currentScroll = window.scrollY;
|
||||
currentSelectedWord++;
|
||||
|
||||
let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
|
||||
|
||||
if (currentSelectedWord === hilightedWords.length) {
|
||||
downArrow.classList.add('disabled');
|
||||
upArrow.classList.remove('disabled');
|
||||
} else {
|
||||
downArrow.classList.remove('disabled');
|
||||
upArrow.classList.remove('disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getToFirstOccurence() {
|
||||
let currentScroll = window.scrollY;
|
||||
currentSelectedWord = 1;
|
||||
|
||||
let wordBoundingTop = hilightedWords[currentSelectedWord - 1].getBoundingClientRect().top;
|
||||
|
||||
let scrollValue = (wordBoundingTop + currentScroll) - window.innerHeight / 2;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
resultAmountText.innerText = currentSelectedWord + "/" + resultAmountText.innerText.split('/')[1];
|
||||
|
||||
downArrow.classList.remove('disabled');
|
||||
upArrow.classList.add('disabled');
|
||||
}
|
||||
|
||||
let tagsDiv = document.querySelector('#search_results > div:last-of-type');
|
||||
|
||||
window.addEventListener('click', function (el) {
|
||||
if (!searchResults.contains(el.target) && isResultOpen && el.target != searchInput && el.target != tagsDiv) {
|
||||
toggleSearchResults();
|
||||
}
|
||||
});
|
||||
|
||||
let searchWordList = document.querySelector('#content_search_tag');
|
||||
searchWordList = searchWordList.innerText.substring(1, searchWordList.innerText.length - 1).split(', ');
|
||||
|
||||
for (let tag of searchWordList) {
|
||||
let tagWrapper = document.createElement('p');
|
||||
tagWrapper.innerText = tag;
|
||||
tagWrapper.addEventListener('click', function () {
|
||||
searchInput.value = tag;
|
||||
triggerSearch();
|
||||
});
|
||||
tagsDiv.appendChild(tagWrapper);
|
||||
}
|
||||
}
|
||||
|
||||
export { customSearch };
|
||||
@@ -0,0 +1,537 @@
|
||||
function customTimeline() {
|
||||
// titres de parties dans le tableau
|
||||
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' : 'cf0118'},
|
||||
{'blue1': '0101c4'},
|
||||
{'blue2': '01049e'},
|
||||
{'blue3': '010678'},
|
||||
{'blue4': '010952'},
|
||||
{'blue5': '00113c'},
|
||||
{'yellow1': 'ade719'},
|
||||
{'yellow2': '8cc700'},
|
||||
{'yellow3': '74af00'},
|
||||
{'yellow4': '5c9900'},
|
||||
{'yellow5': '377600'},
|
||||
{'pink1': 'cf0118'},
|
||||
{'pink2': 'a10418'}
|
||||
];
|
||||
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];
|
||||
}
|
||||
|
||||
// set parts rectangles
|
||||
function convertToSeconds(timeStr) {
|
||||
let [hourStr, minStr] = timeStr.split('h');
|
||||
if (!minStr) {
|
||||
minStr = hourStr;
|
||||
hourStr = '0';
|
||||
}
|
||||
minStr = minStr.replace('’', ':');
|
||||
minStr = minStr.replace("'", ':');
|
||||
const [min, sec] = minStr.split(':');
|
||||
|
||||
return parseInt(hourStr) * 3600 + parseInt(min) * 60 + parseInt(sec);
|
||||
}
|
||||
|
||||
let partTimesNodes = document.querySelectorAll('body #app main tbody tr:not(.isContentPart) + tr:not(.isSubPart) td:first-of-type');
|
||||
let partTimes = Array.from(partTimesNodes);
|
||||
for (let i = 0; i < partTimes.length; i++) {
|
||||
partTimes[i] = convertToSeconds(partTimes[i].innerText);
|
||||
}
|
||||
let lastTime = document.querySelectorAll('body #app main tbody tr:last-of-type td:first-of-type');
|
||||
partTimes.push(convertToSeconds(lastTime[0].innerText));
|
||||
let partDurations = [];
|
||||
for (let i = 0; i < partTimes.length - 1; i++) {
|
||||
partDurations.push(partTimes[i + 1] - partTimes[i]);
|
||||
}
|
||||
let totalTime = convertToSeconds(lastTime[0].innerText);
|
||||
|
||||
let tlContainer, tlContainerHeight;
|
||||
let partBlockHeights = [];
|
||||
let activePartIndex = 0;
|
||||
|
||||
function getAllHeights() {
|
||||
partBlockHeights = [];
|
||||
tlContainer = document.querySelector('#timeline_container');
|
||||
let header = document.querySelector('header'), footer = document.querySelector('footer');
|
||||
tlContainer.style.height = `calc(100vh - ${header.offsetHeight}px - ${footer.offsetHeight}px - 60px)`;
|
||||
tlContainer.style.top = `${document.querySelector('header').offsetHeight + 30}px`;
|
||||
tlContainerHeight = tlContainer.offsetHeight;
|
||||
for (let partDuration of partDurations) {
|
||||
partBlockHeights.push(partDuration / totalTime * tlContainerHeight);
|
||||
}
|
||||
}
|
||||
getAllHeights();
|
||||
|
||||
function drawFriseRects() {
|
||||
for (let i = 0; i < partBlockHeights.length; i++) {
|
||||
let partDiv = document.createElement('div');
|
||||
partDiv.style.width = "22px";
|
||||
partDiv.style.height = partBlockHeights[i] + "px";
|
||||
partDiv.style.backgroundColor = "#" + Object.values(colors[i])[0];
|
||||
partDiv.style.borderBottom = "solid 1px #010d19";
|
||||
partDiv.style.borderTop = "solid 1px #010d19";
|
||||
partDiv.style.transition = "width 0.3s ease-out";
|
||||
partDiv.style.cursor = "pointer";
|
||||
tlContainer.prepend(partDiv);
|
||||
tlContainer.children[0].addEventListener("mouseenter", function() {
|
||||
let el = tlContainer.children[tlContainer.children.length - 1 - i];
|
||||
if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
|
||||
el.style.width = "32px";
|
||||
toggleTitleHover(i, 'show');
|
||||
}
|
||||
});
|
||||
tlContainer.children[0].addEventListener("mouseleave", function() {
|
||||
let el = tlContainer.children[tlContainer.children.length - 1 - i];
|
||||
if (Array.from(el.parentNode.children).length - Array.from(el.parentNode.children).indexOf(el) - 1 != activePartIndex) {
|
||||
el.style.width = "22px";
|
||||
}
|
||||
toggleTitleHover(i, 'hide');
|
||||
});
|
||||
tlContainer.children[0].addEventListener("click", function() {
|
||||
isScrollingFromGrab = false;
|
||||
titresFrise[i].el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
}
|
||||
}
|
||||
drawFriseRects();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
while(tlContainer.lastChild) {
|
||||
tlContainer.removeChild(tlContainer.lastChild);
|
||||
}
|
||||
getAllHeights();
|
||||
drawFriseRects();
|
||||
setPartRects();
|
||||
});
|
||||
|
||||
// detect if is scrolling
|
||||
|
||||
let previousScroll;
|
||||
|
||||
function isWindowScrolling() {
|
||||
let currentScroll = window.scrollY;
|
||||
if (currentScroll !== previousScroll) {
|
||||
previousScroll = currentScroll;
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// titres parties frise
|
||||
let titreFriseEl = document.createElement('div');
|
||||
|
||||
let elements = Array.from(document.querySelectorAll('.isMainPart, .isSubPart'));
|
||||
|
||||
let mainWithoutSubAfter = [];
|
||||
let mainWithSubAfter = [];
|
||||
let subWithoutMainBefore = [];
|
||||
|
||||
let lastMain = null;
|
||||
|
||||
let grabbing = false;
|
||||
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let current = elements[i];
|
||||
let next = elements[i + 1];
|
||||
|
||||
if (current.classList.contains('isMainPart')) {
|
||||
lastMain = current;
|
||||
if (next && next.classList.contains('isSubPart')) {
|
||||
mainWithSubAfter.push({ index: i, main: current.innerText, sub: next.innerText, el: elements[i] });
|
||||
} else {
|
||||
mainWithoutSubAfter.push({ index: i, main: current.innerText, sub: "", el: elements[i] });
|
||||
}
|
||||
}
|
||||
|
||||
if (current.classList.contains('isSubPart')) {
|
||||
let prevMain = lastMain && lastMain.classList.contains('isMainPart') ? lastMain.innerText : "";
|
||||
subWithoutMainBefore.push({ index: i, main: prevMain, sub: current.innerText, el: elements[i] });
|
||||
}
|
||||
}
|
||||
|
||||
let titresFrise = [...mainWithoutSubAfter, ...mainWithSubAfter, ...subWithoutMainBefore];
|
||||
|
||||
titresFrise.sort((a, b) => a.index - b.index);
|
||||
|
||||
for (let i = titresFrise.length - 1; i > 0; i--) {
|
||||
let current = titresFrise[i];
|
||||
let next = titresFrise[i - 1];
|
||||
|
||||
if (current.main === next.main && current.sub === next.sub) {
|
||||
titresFrise.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
titreFriseEl.setAttribute('id', 'titres_frise');
|
||||
titreFriseEl.innerHTML = `
|
||||
<p class="uppercase">${getCurrentTime(titresFrise[0].el)}</p>
|
||||
<p>${titresFrise[0].main}</p>
|
||||
<p class="font-authentic-60">${titresFrise[0].sub}</p>
|
||||
`;
|
||||
titreFriseEl.style.fontSize = '0.9em';
|
||||
titreFriseEl.style.backgroundColor = 'rgba(1, 13, 25, 0.6)';
|
||||
titreFriseEl.style.zIndex = '20';
|
||||
titreFriseEl.style.position = 'fixed';
|
||||
titreFriseEl.style.left = '60px';
|
||||
titreFriseEl.style.width = '10vw';
|
||||
titreFriseEl.style.lineHeight = '1.2';
|
||||
titreFriseEl.style.marginTop = '-8px';
|
||||
titreFriseEl.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
|
||||
let main = document.querySelector('#main');
|
||||
main.prepend(titreFriseEl);
|
||||
|
||||
// création et togle des titres au survol des div de la timeline
|
||||
function drawFixedTitles() {
|
||||
let tlContainer = document.querySelector('#timeline_container');
|
||||
let fixedTitlesContainer = document.createElement('div');
|
||||
fixedTitlesContainer.setAttribute('id', 'fixedTitlesContainer');
|
||||
main.prepend(fixedTitlesContainer);
|
||||
for (let index = 0; index < titresFrise.length; index++) {
|
||||
let titreFixedEl = document.createElement('div');
|
||||
titreFixedEl.style.position = 'fixed';
|
||||
titreFixedEl.style.zIndex = 1;
|
||||
titreFixedEl.style.display = 'none';
|
||||
titreFixedEl.style.opacity = '0';
|
||||
titreFixedEl.style.transition = 'opacity 0.3s ease-out';
|
||||
titreFixedEl.style.width = '10vw';
|
||||
titreFixedEl.style.top = `${tlContainer.children[index].getBoundingClientRect().top - 8}px`;
|
||||
titreFixedEl.style.left = '60px';
|
||||
titreFixedEl.style.fontSize = '0.9em';
|
||||
titreFixedEl.style.lineHeight = '1.2';
|
||||
let titreFixedElContent = document.createElement('p');
|
||||
titreFixedElContent.innerHTML = `
|
||||
<p>${titresFrise[titresFrise.length - index - 1].main}</p>
|
||||
<p class="font-authentic-60">${titresFrise[titresFrise.length - index - 1].sub}</p>
|
||||
`;
|
||||
titreFixedElContent.style.backgroundColor = '#010d19';
|
||||
titreFixedEl.append(titreFixedElContent);
|
||||
let topGradient = document.createElement('div');
|
||||
topGradient.style.height = '10px';
|
||||
topGradient.style.width = '100%';
|
||||
topGradient.style.background = 'linear-gradient(to bottom, transparent, #010d19)';
|
||||
titreFixedEl.prepend(topGradient);
|
||||
let bottomGradient = document.createElement('div');
|
||||
bottomGradient.style.height = '10px';
|
||||
bottomGradient.style.width = '100%';
|
||||
bottomGradient.style.background = 'linear-gradient(to top, transparent, #010d19)';
|
||||
titreFixedEl.append(bottomGradient);
|
||||
fixedTitlesContainer.prepend(titreFixedEl);
|
||||
}
|
||||
}
|
||||
drawFixedTitles();
|
||||
|
||||
function toggleTitleHover(elIndex, state) {
|
||||
let fixedTitlesContainer = document.querySelector('#fixedTitlesContainer');
|
||||
let el = fixedTitlesContainer.children[elIndex];
|
||||
if (state === 'show') {
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
}, 1);
|
||||
} else if (state === 'hide') {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
el.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE GRAB DU CURSEUR DE LA TL
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
// make the cursor move on scroll
|
||||
let cursor = document.querySelector('#cursor');
|
||||
cursor.style.top = `${document.querySelector('#timeline_container').getBoundingClientRect().top}px`;
|
||||
cursor.style.cursor = 'grab';
|
||||
let titres = document.querySelector('#titres_frise');
|
||||
titres.style.cursor = 'grab';
|
||||
let partRects;
|
||||
function setPartRects() {
|
||||
partRects = document.querySelectorAll('#timeline_container div');
|
||||
partRects = Array.from(partRects);
|
||||
partRects = partRects.reverse();
|
||||
partRects[0].style.width = '32px';
|
||||
}
|
||||
setPartRects();
|
||||
document.addEventListener("scroll", () => {
|
||||
if (!grabbing) {
|
||||
displayCurrentPartTitle(getCurrentPartFromScroll());
|
||||
if (document.documentElement.scrollTop === 0) {
|
||||
let firstTimeText = document.querySelector('tbody tr:nth-of-type(2) td:first-of-type');
|
||||
titres.firstElementChild.innerText = firstTimeText.innerText;
|
||||
} else if (document.documentElement.scrollTop + window.innerHeight >= document.body.scrollHeight) {
|
||||
let lastTimeText = document.querySelector('tbody tr:last-of-type td:first-of-type');
|
||||
titres.firstElementChild.innerText = lastTimeText.innerText;
|
||||
}
|
||||
moveCursorFromScroll(getCurrentPartFromScroll());
|
||||
}
|
||||
});
|
||||
|
||||
function makeElementDraggable(element, relatedEl) {
|
||||
let offsetY;
|
||||
|
||||
element.addEventListener('mousedown', (e) => {
|
||||
let elTransformY;
|
||||
if (!element.style.transform) {
|
||||
elTransformY = 0;
|
||||
} else {
|
||||
elTransformY = +element.style.transform.split('(')[1].split('p')[0];
|
||||
}
|
||||
e.preventDefault();
|
||||
grabbing = true;
|
||||
offsetY = e.clientY - elTransformY;
|
||||
element.style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (grabbing) {
|
||||
if (e.clientY < tlContainerHeight + tlContainer.offsetTop && e.clientY > tlContainer.offsetTop) {
|
||||
const y = e.clientY - offsetY;
|
||||
element.style.transform = `translateY(${y}px)`;
|
||||
relatedEl.style.transform = `translateY(${y}px)`;
|
||||
if (!isNaN(y)) displayCurrentPartTitle(getCurrentPartFromCursor(y));
|
||||
} else if (e.clientY < tlContainer.offsetTop + 10) {
|
||||
element.style.transform = `translateY(0px)`;
|
||||
relatedEl.style.transform = `translateY(0px)`;
|
||||
let firstTimeText = document.querySelector('tbody tr:nth-of-type(2) td:first-of-type');
|
||||
titres.firstElementChild.innerText = firstTimeText.innerText;
|
||||
} else if (e.clientY >= tlContainerHeight + tlContainer.offsetTop) {
|
||||
element.style.transform = `translateY(${tlContainerHeight}px)`;
|
||||
relatedEl.style.transform = `translateY(${tlContainerHeight}px)`;
|
||||
let lastTimeText = document.querySelector('tbody tr:last-of-type td:first-of-type');
|
||||
titres.firstElementChild.innerText = lastTimeText.innerText;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (grabbing) scrollOnGrab(element);
|
||||
element.style.cursor = 'grab';
|
||||
grabbing = false;
|
||||
});
|
||||
}
|
||||
|
||||
makeElementDraggable(cursor, titres);
|
||||
makeElementDraggable(titres, cursor);
|
||||
|
||||
// get heights of parts dans le tableau et dans la timeline
|
||||
function getSteps() {
|
||||
let tlElSteps = [];
|
||||
for (let i = 0; i < partRects.length; i++) {
|
||||
tlElSteps.push(partRects[i].offsetTop);
|
||||
}
|
||||
let titles = document.querySelectorAll('.isMainPart, .isSubPart');
|
||||
let scrollSteps = [];
|
||||
for (let title of titles) {
|
||||
let nextLine = title.nextElementSibling;
|
||||
if (!nextLine?.classList.contains('isSubPart')) {
|
||||
scrollSteps.push(title.offsetTop);
|
||||
}
|
||||
}
|
||||
return({
|
||||
'tlElSteps':tlElSteps,
|
||||
'scrollSteps':scrollSteps
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE SCROLL DU GRAB
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
let isScrollingFromGrab = false;
|
||||
|
||||
function scrollOnGrab(el) {
|
||||
let scrollValue =
|
||||
((getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp] - getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp - 1]) * getCursorPositionInTimelinePart(el).proportionInPart)
|
||||
+ getSteps().scrollSteps[getCursorPositionInTimelinePart(el).stepAfterMouseUp];
|
||||
isScrollingFromGrab = true;
|
||||
window.scrollTo({ top: scrollValue, behavior: 'smooth' });
|
||||
setTimeout(() => {
|
||||
isScrollingFromGrab = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function getCursorPositionInTimelinePart(el) {
|
||||
let elTransformY;
|
||||
if (!el.style.transform) {
|
||||
elTransformY = 0;
|
||||
} else {
|
||||
elTransformY = +el.style.transform.split('(')[1].split('p')[0];
|
||||
}
|
||||
|
||||
let tlPartHeight, tlPartBottom, tlPartTop, proportionInPart, stepAfterMouseUp;
|
||||
for (let j = 0; j < partRects.length; j++) {
|
||||
if (j === getCurrentPartFromCursor(elTransformY)) {
|
||||
tlPartHeight = partRects[j].getBoundingClientRect().height;
|
||||
tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
|
||||
tlPartTop = tlPartBottom - tlPartHeight;
|
||||
proportionInPart = ((tlPartHeight - (elTransformY - tlPartTop)) / tlPartHeight) * -1;
|
||||
if (proportionInPart > 0 && proportionInPart < 1) {
|
||||
stepAfterMouseUp = j;
|
||||
return {stepAfterMouseUp, proportionInPart};
|
||||
} else {
|
||||
stepAfterMouseUp = j;
|
||||
proportionInPart = 0;
|
||||
return {stepAfterMouseUp, proportionInPart};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
// ICI IL Y A LE RAPPORT SCROLL / TIMELINE
|
||||
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
function moveCursorFromScroll(currentPartIndex) {
|
||||
if (!isScrollingFromGrab) {
|
||||
let currentScroll = window.scrollY;
|
||||
|
||||
let cursorTopValue = 0;
|
||||
let tlPartHeight, tlPartBottom;
|
||||
|
||||
for (let j = 0; j < partRects.length; j++) {
|
||||
tlPartHeight = partRects[j].getBoundingClientRect().height
|
||||
tlPartBottom = partRects[j].getBoundingClientRect().top - tlContainer.getBoundingClientRect().top;
|
||||
cursorTopValue = tlPartBottom;
|
||||
// get the amount of the current scrollpart scrolled
|
||||
if (j === currentPartIndex) break;
|
||||
}
|
||||
|
||||
let currentScrollPartBottom = getSteps().scrollSteps[currentPartIndex - 1] ? getSteps().scrollSteps[currentPartIndex - 1] : 0;
|
||||
let currentScrollPartHeight;
|
||||
if (getSteps().scrollSteps[currentPartIndex + 1]) {
|
||||
currentScrollPartHeight = getSteps().scrollSteps[currentPartIndex + 1] - currentScrollPartBottom;
|
||||
} else {
|
||||
currentScrollPartHeight = document.querySelector('body').scrollHeight - currentScrollPartBottom;
|
||||
}
|
||||
let currentScrollSincePartBottom = currentScroll - currentScrollPartBottom;
|
||||
let scrollPartProportion = currentScrollSincePartBottom / currentScrollPartHeight;
|
||||
|
||||
cursorTopValue = cursorTopValue + tlPartHeight * (tlPartHeight / tlPartHeight * (scrollPartProportion - 0.3));
|
||||
|
||||
if (cursorTopValue > 0) {
|
||||
cursor.style.transform = `translateY(${cursorTopValue}px)`;
|
||||
titres.style.transform = `translateY(${cursorTopValue}px)`;
|
||||
} else {
|
||||
cursor.style.transform = `translateY(0px)`;
|
||||
titres.style.transform = `translateY(0px)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let prevPartIndex = 0;
|
||||
let lastCallTimestamp = 0;
|
||||
|
||||
function displayCurrentPartTitle(currentPartIndex) {
|
||||
if (isNaN(currentPartIndex)) currentPartIndex = 0;
|
||||
const currentTime = performance.now();
|
||||
if (currentTime - lastCallTimestamp >= 400) {
|
||||
lastCallTimestamp = currentTime;
|
||||
titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el); // ICI POUR METTRE LE TEMPS BIEN
|
||||
setTimeout(() => {
|
||||
if (isWindowScrolling()) {
|
||||
setTimeout(() => {
|
||||
titres.firstElementChild.innerText = getCurrentTime(titresFrise[currentPartIndex]?.el);
|
||||
}, 400);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
let mainEl = titres.children[1];
|
||||
let subEl = titres.lastElementChild;
|
||||
if (mainEl.innerText != titresFrise[currentPartIndex]?.main || subEl.innerText != titresFrise[currentPartIndex]?.sub) {
|
||||
mainEl.innerText = titresFrise[currentPartIndex]?.main;
|
||||
subEl.innerText = titresFrise[currentPartIndex]?.sub;
|
||||
partRects[prevPartIndex].style.width = '22px';
|
||||
partRects[currentPartIndex].style.width = '32px';
|
||||
}
|
||||
activePartIndex = currentPartIndex;
|
||||
prevPartIndex = currentPartIndex;
|
||||
}
|
||||
|
||||
function getCurrentPartFromScroll() {
|
||||
let currentScroll = window.scrollY;
|
||||
for (let i = 0; i < getSteps().scrollSteps.length; i++) {
|
||||
if (
|
||||
(currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
|
||||
&& currentScroll + window.innerHeight / 2 <= getSteps().scrollSteps[i + 1]) ||
|
||||
(currentScroll + window.innerHeight / 2 >= getSteps().scrollSteps[i]
|
||||
&& i === getSteps().scrollSteps.length - 1)
|
||||
) {
|
||||
return(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentPartFromCursor(cursorTransformY) {
|
||||
for (let i = 0; i < getSteps().tlElSteps.length; i++) {
|
||||
if (cursorTransformY >= getSteps().tlElSteps[i] && cursorTransformY < getSteps().tlElSteps[i + 1]) {
|
||||
return(i);
|
||||
} else if (cursorTransformY > getSteps().tlElSteps[getSteps().tlElSteps.length - 1]) {
|
||||
return(getSteps().tlElSteps.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////
|
||||
// ICI LE GETCURRENTTIME !!!!!!!!!!!!!!
|
||||
///////////////////////////////////////
|
||||
|
||||
function getCurrentTime(titleEl) {
|
||||
let nextRow = titleEl?.nextElementSibling;
|
||||
if (!grabbing) {
|
||||
while(nextRow) {
|
||||
if (nextRow.offsetTop - window.innerHeight / 4 > window.scrollY &&
|
||||
nextRow.classList.contains('isContentPart')) {
|
||||
return(nextRow.firstElementChild.innerText);
|
||||
}
|
||||
nextRow = nextRow.nextElementSibling;
|
||||
}
|
||||
} else {
|
||||
let cursor = document.querySelector('#cursor');
|
||||
let allRowsUnder = [];
|
||||
nextRow = nextRow.nextElementSibling.nextElementSibling;
|
||||
while(nextRow) {
|
||||
if (nextRow.classList.contains('isMainPart') || nextRow.classList.contains('isSubPart')) {
|
||||
break;
|
||||
}
|
||||
allRowsUnder.push(nextRow);
|
||||
nextRow = nextRow.nextElementSibling;
|
||||
}
|
||||
let currentRowIndex = Math.floor(allRowsUnder.length * getCursorPositionInTimelinePart(cursor).proportionInPart);
|
||||
if (currentRowIndex - 20 >= 0) {
|
||||
return allRowsUnder[currentRowIndex - 20].firstElementChild.innerText;
|
||||
} else {
|
||||
return allRowsUnder[0].firstElementChild.innerText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { customTimeline };
|
||||
@@ -10,13 +10,47 @@ html {
|
||||
background-color: #1e262e !important;
|
||||
}
|
||||
|
||||
body.wp-admin {
|
||||
background-color: #26313b;
|
||||
body.wp-admin, div:not(#tutorial_editor), .notice, table, th, td, tr, tr.active, tbody {
|
||||
background-color: #26313b !important;
|
||||
background: #26313b !important;
|
||||
color: white !important;
|
||||
font-family: "Authentic_Sans_60";
|
||||
}
|
||||
|
||||
.wp-admin table,
|
||||
textarea {
|
||||
color: #1e262e !important;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea {
|
||||
border: solid 1px white !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
button span .components-menu-item__info,
|
||||
button span .components-menu-item__item,
|
||||
.components-menu-item__item,
|
||||
.components-menu-item__shortcut,
|
||||
.components-tab-panel__tabs-item {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.components-tab-panel__tabs-item.is-active {
|
||||
background-color: #1e262e !important;
|
||||
}
|
||||
|
||||
#postcustomstuff input,
|
||||
#postcustomstuff textarea,
|
||||
#postcustomstuff select {
|
||||
color: white !important;
|
||||
background-color: #1e262e !important;
|
||||
}
|
||||
|
||||
.wp-admin.toplevel_page_revisionary-q table,
|
||||
.wp-admin.toplevel_page_revisionary-q table td,
|
||||
.wp-admin.toplevel_page_revisionary-q table th,
|
||||
.wp-admin.toplevel_page_revisionary-q table thead,
|
||||
.wp-admin.toplevel_page_revisionary-q table tfoot,
|
||||
.wp-admin #adminmenuwrap li,
|
||||
.wp-admin #adminmenuwrap ul {
|
||||
background: #1f2730 !important;
|
||||
@@ -62,7 +96,7 @@ body.wp-admin {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.wp-admin a {
|
||||
.wp-admin a:not(#backToIndexButton a):not(#backToMyRevisionsButton a) {
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
@@ -103,6 +137,27 @@ body.wp-admin {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.interface-pinned-items button.has-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.wp-block-freeform,
|
||||
h1.wp-block {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
button#mceu_28-button i {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.components-snackbar-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.components-panel__header button.has-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.components-panel__header button svg {
|
||||
fill: white !important;
|
||||
outline: white !important;
|
||||
@@ -129,11 +184,25 @@ body.wp-admin {
|
||||
background-color: #1e262e !important;
|
||||
color: white !important;
|
||||
}
|
||||
/*
|
||||
.components-panel > div {
|
||||
display: none !important;
|
||||
} */
|
||||
|
||||
.components-panel > div:first-of-type {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.user-admin-color-wrap {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div.row-actions {
|
||||
position: unset !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#contextual-help-columns li,
|
||||
#contextual-help-columns p {
|
||||
color: #1e262e !important;
|
||||
}
|
||||
|
||||
#bulk-revisions #bulk-action-selector-top > option[value="publish_revision"] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -55,7 +55,7 @@
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
height: 91px;
|
||||
background-color: #010d19;
|
||||
top: 100px;
|
||||
left: 83.3333vw;
|
||||
@@ -103,7 +103,7 @@
|
||||
}
|
||||
|
||||
#about_popup {
|
||||
z-index: 10;
|
||||
z-index: 15;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -121,12 +121,16 @@
|
||||
background-color: white;
|
||||
color: #010d19;
|
||||
width: 75vw;
|
||||
max-width: 75vw;
|
||||
max-height: 60vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#about_popup #about_modale span {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: -11px;
|
||||
top: 20px;
|
||||
right: 5px;
|
||||
color: #010d19;
|
||||
font-size: 23px;
|
||||
border-radius: 50%;
|
||||
@@ -173,7 +177,6 @@
|
||||
|
||||
#search_results {
|
||||
display: none;
|
||||
top: 8vh;
|
||||
background-color: #26313b;
|
||||
max-height: 0px;
|
||||
height:auto;
|
||||
@@ -205,4 +208,35 @@
|
||||
#search_results > div:last-of-type p:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.contributionWanted a {
|
||||
opacity: 1 !important;
|
||||
background-color: yellow;
|
||||
border-radius: 8px;
|
||||
color: #010d19;
|
||||
padding: 3px 5px;
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.contributionWanted a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
transition: font-size 0.2s ease-in, line-height 0.2s ease-in;
|
||||
}
|
||||
|
||||
.xoo-el-wrap .xoo-el-sidebar div,
|
||||
.xoo-el-wrap .xoo-el-sidebar p,
|
||||
.xoo-el-srcont .xoo-el-main div,
|
||||
.xoo-el-srcont .xoo-el-main li,
|
||||
.xoo-el-srcont .xoo-el-main input {
|
||||
font-family: "Authentic_Sans_60" !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
.edit-button {
|
||||
transform: translateX(70px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
.edit-post-header > div:first-of-type,
|
||||
.block-editor-block-toolbar {
|
||||
.block-editor-block-toolbar,
|
||||
.components-modal__screen-overlay,
|
||||
.table-of-contents,
|
||||
.table-of-contents__popover {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -37,12 +40,16 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.components-panel > div:not(:first-of-type),
|
||||
.components-panel > div:not(:first-of-type):not(:last-of-type),
|
||||
.edit-post-post-status > h2,
|
||||
.edit-post-post-status > div:nth-of-type(3) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-post-post-status > #backToIndexButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.rvy-author-selection,
|
||||
.rvy-submission-div > a:last-of-type,
|
||||
.revision-created > a {
|
||||
@@ -54,4 +61,18 @@
|
||||
#bulk-action-selector-top > option[value="decline_revision"],
|
||||
#bulk-action-selector-top > option[value="publish_revision"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tablenav.bottom,
|
||||
tfoot,
|
||||
.search-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.wpie-message {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.block-editor-block-card {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -25,9 +25,9 @@
|
||||
</svg>
|
||||
|
||||
|
||||
<table class="w-full bg-jlg-dark-blue flex justify-center mt-[70px] z-0 pl-10 lg:pl-[10px]">
|
||||
<table class="w-full bg-jlg-dark-blue flex justify-center mt-[70px] z-0 pl-10 lg:pl-[10px] pr-[96px] lg:pr-0">
|
||||
<thead>
|
||||
<tr class="border-jlg-white border-b h-64 top-0 lg:w-2/3 fixed z-0 flex items-stretch justify-around text-left uppercase bg-jlg-dark-blue">
|
||||
<tr class="border-jlg-white border-b h-64 top-0 w-full lg:w-2/3 fixed z-0 flex items-stretch justify-around text-left uppercase bg-jlg-dark-blue pr-[130px] lg:pr-0">
|
||||
<th class="flex items-end justify-start"></th>
|
||||
<th class="flex items-end justify-start pb-4">Images</th>
|
||||
<th class="flex items-end justify-start pb-4">Voix Off et In</th>
|
||||
@@ -78,7 +78,8 @@
|
||||
$ecrits = isset($infosArray[4]) ? $infosArray[4] : '';
|
||||
|
||||
//lien pour le crayon
|
||||
$edit_link = 'https://localhost/wp/wp-admin/admin.php?page=rvy-revisions&post='. get_the_ID() .'&action=revise';
|
||||
$edit_link = site_url('/wp-admin/admin.php?page=rvy-revisions&post=' . get_the_ID() . '&action=revise');
|
||||
|
||||
?>
|
||||
<tr class="border-jlg-light-white border-b font-authentic-60 w-full flex flex-row py-6 isContentPart">
|
||||
<td class="block text-sm pl-0 pr-6">{{ the_title()}}</td>
|
||||
@@ -88,9 +89,11 @@
|
||||
<td class="block pl-0 pr-6"><?php echo $ecrits; ?></td>
|
||||
<td class="block text-sm pl-0 pr-6">
|
||||
<?php if(is_user_logged_in()){
|
||||
echo '<a title="Contribution" href="' . esc_url( $edit_link ) . '" class="edit-button">🖉</a>';
|
||||
} elseif (!is_user_logged_in()) {
|
||||
echo '<a href="' . esc_url( $edit_link ) . '" class="edit-button xoo-el-login-tgr ">🖉</a>';
|
||||
echo '<a title="Contribution" href="' . esc_url( $edit_link ) . '" class="edit-button">'; ?>
|
||||
<img src="<?= get_template_directory_uri(); ?>/resources/assets/icons/pen_icon.svg" alt="icon pen" /></a>
|
||||
<?php } elseif (!is_user_logged_in()) {
|
||||
echo '<img src="' . get_template_directory_uri() . '/resources/assets/icons/pen_icon.svg" alt="icon pen" />';
|
||||
echo do_shortcode('[xoo_el_action type="login" text="Connexion" redirect_to="' . $edit_link . '"]');
|
||||
}?>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -54,7 +54,8 @@
|
||||
event.target != document.querySelector('#about_button') &&
|
||||
event.target != document.querySelector('#about_title') &&
|
||||
event.target != document.querySelector('#about_content') &&
|
||||
event.target.parentElement != document.querySelector('#about_content')
|
||||
event.target.parentElement != document.querySelector('#about_content') &&
|
||||
(event.target.tagName != "EM" && event.target.parentElement.parentElement != document.querySelector('#about_content'))
|
||||
) {
|
||||
closeAboutPopup();
|
||||
}
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
<header class="border-b border-jlg-light-white py-4 h-1/12 shadow-xlg fixed top-0 w-full bg-jlg-dark-blue flex flex-row justify-between items-center z-10">
|
||||
<div class="text-sm">
|
||||
<button class="bg-jlg-xlight-white hover:bg-jlg-hxlight-white active:bg-jlg-axlight-white px-4 py-2 rounded-full border-jlg-hxlight-white border ml-6 transition-colors">
|
||||
<?php
|
||||
$current_user = wp_get_current_user();
|
||||
$author_id = $current_user->ID;
|
||||
$revisionary_page = admin_url('admin.php?page=revisionary-q&author=' . $author_id);
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm mt-[-10px] mb-[15px] pl-5 text-center">
|
||||
<?php if (is_user_logged_in()) {
|
||||
$current_user = wp_get_current_user();
|
||||
$logout_url = wp_logout_url();
|
||||
echo "Connecté en tant que " . $current_user->display_name . " | <span class='underline decoration-dotted'><a href='" . esc_url($logout_url) . "'>Se déconnecter</a></span>";
|
||||
} ?>
|
||||
</div>
|
||||
<div class="text-sm flex flex-row flex-nowrap">
|
||||
<button class="bg-jlg-xlight-white hover:bg-jlg-hxlight-white active:bg-jlg-axlight-white px-4 py-2 rounded-full border-jlg-hxlight-white border ml-6 transition-colors whitespace-nowrap">
|
||||
<?php
|
||||
$current_user = wp_get_current_user();
|
||||
$author_id = $current_user->ID;
|
||||
$revisionary_page = admin_url('admin.php?page=revisionary-q&author=' . $author_id);
|
||||
|
||||
$link = sprintf(
|
||||
'<a href="%s">MES CONTRIBUTIONS</a>',
|
||||
esc_url($revisionary_page)
|
||||
);
|
||||
echo do_shortcode('[xoo_el_action type="login" change_to="' . $revisionary_page . '" change_to_text="MES CONTRIBUTIONS" text="CONTRIBUER" redirect_to="' . $revisionary_page . '"]');
|
||||
|
||||
echo do_shortcode('[xoo_el_action type="login" change_to="' . $revisionary_page . '" change_to_text="MES CONTRIBUTIONS" text="CONTRIBUER" redirect_to="' . $revisionary_page . '"]');
|
||||
?>
|
||||
</button>
|
||||
<button class="bg-jlg-xlight-white hover:bg-jlg-hxlight-white active:bg-jlg-axlight-white px-4 py-2 rounded-full border-jlg-hxlight-white border ml-6 transition-colors"><a href="<?php echo esc_url(home_url('/?format=csv')); ?>">EXPORT</a></button>
|
||||
?>
|
||||
</button>
|
||||
<button class="bg-jlg-xlight-white hover:bg-jlg-hxlight-white active:bg-jlg-axlight-white px-4 py-2 rounded-full border-jlg-hxlight-white border ml-6 transition-colors"><a href="<?php echo esc_url(home_url('/?format=csv')); ?>">EXPORT</a></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="brand text-center text-2xl leading-none" href="{{ home_url('/') }}">
|
||||
<a class="brand text-center leading-7 whitespace-nowrap" href="{{ home_url('/') }}">
|
||||
<!-- {!! $siteName !!} -->
|
||||
<span class="font-caslon uppercase">Partition<br></span>
|
||||
<span class="font-caslon italic">Le Livre d'Image</span>
|
||||
<span class="font-caslon uppercase text-2xl">Partition<br></span>
|
||||
<span class="font-caslon italic text-3xl">Le Livre d'Image<br></span>
|
||||
<span class="font-caslon text-xl pr-1">de </span><span class="font-caslon text-2xl">Jean-Luc Godard</span>
|
||||
</a>
|
||||
|
||||
<div class="mr-6 w-52">
|
||||
@@ -48,11 +54,3 @@
|
||||
@endif
|
||||
</header>
|
||||
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
const privacyLink = document.querySelector('.xoo-aff-checkbox_single a');
|
||||
privacyLink.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
+2
-1
@@ -24,7 +24,8 @@ const config = {
|
||||
base: '15px',
|
||||
lg: '18px',
|
||||
xl: '21px',
|
||||
'2xl': '35px'
|
||||
'2xl': '25px',
|
||||
'3xl': '35px',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
+2
-2
@@ -1361,12 +1361,12 @@
|
||||
{
|
||||
"name": "2xl",
|
||||
"slug": "2xl",
|
||||
"size": "35px"
|
||||
"size": "25px"
|
||||
},
|
||||
{
|
||||
"name": "3xl",
|
||||
"slug": "3xl",
|
||||
"size": "1.875rem"
|
||||
"size": "35px"
|
||||
},
|
||||
{
|
||||
"name": "4xl",
|
||||
|
||||
Reference in New Issue
Block a user