ScoDoc/ScoDoc
ScoDoc/ScoDoc
9
2
Fork 15
Code Issues 154 Pull Requests 2 Projects 3 Releases 111 Wiki Activity

Assiduites : saisie sur mobile #723

Browse Source
This commit is contained in:
iziram 2023-09-11 10:45:21 +02:00
parent c4c7e0ef80
commit 044926fd62
1 changed files with 80 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
app/templates/assiduites/widgets/timeline.j2
View File

@ -18,6 +18,8 @@
const period_default = {{ periode_defaut }}; const period_default = {{ periode_defaut }};
let handleMoving = false;
function createTicks() { function createTicks() {
let i = t_start; let i = t_start;
@ -87,72 +89,92 @@
} }
function setupTimeLine(callback) { function timelineMainEvent(event, callback) {
const func_call = callback ? callback : () => { }; const func_call = callback ? callback : () => { };
timelineContainer.addEventListener("mousedown", (event) => {
const startX = event.clientX;
if (event.target === periodTimeLine) { const startX = (event.clientX || event.changedTouches[0].clientX);
const startLeft = parseFloat(periodTimeLine.style.left);
const onMouseMove = (moveEvent) => { if (event.target.classList.contains("period-handle")) {
const deltaX = moveEvent.clientX - startX; const startWidth = parseFloat(periodTimeLine.style.width);
const containerWidth = timelineContainer.clientWidth; const startLeft = parseFloat(periodTimeLine.style.left);
const isLeftHandle = event.target.classList.contains("left");
handleMoving = true
const onMouseMove = (moveEvent) => {
if (!handleMoving) return;
const deltaX = (moveEvent.clientX || moveEvent.changedTouches[0].clientX) - startX;
const containerWidth = timelineContainer.clientWidth;
const newWidth =
startWidth + ((isLeftHandle ? -deltaX : deltaX) / containerWidth) * 100;
if (isLeftHandle) {
const newLeft = startLeft + (deltaX / containerWidth) * 100; const newLeft = startLeft + (deltaX / containerWidth) * 100;
adjustPeriodPosition(newLeft, newWidth);
} else {
adjustPeriodPosition(parseFloat(periodTimeLine.style.left), newWidth);
}
adjustPeriodPosition(newLeft, parseFloat(periodTimeLine.style.width)); updatePeriodTimeLabel();
};
const mouseUp = () => {
snapHandlesToQuarters();
generateAllEtudRow();
updatePeriodTimeLabel(); timelineContainer.removeEventListener("mousemove", onMouseMove);
}; handleMoving = false;
func_call();
document.addEventListener("mousemove", onMouseMove);
document.addEventListener(
"mouseup",
() => {
generateAllEtudRow();
snapHandlesToQuarters();
document.removeEventListener("mousemove", onMouseMove);
func_call();
},
{ once: true }
);
} else if (event.target.classList.contains("period-handle")) {
const startWidth = parseFloat(periodTimeLine.style.width);
const startLeft = parseFloat(periodTimeLine.style.left);
const isLeftHandle = event.target.classList.contains("left");
const onMouseMove = (moveEvent) => {
const deltaX = moveEvent.clientX - startX;
const containerWidth = timelineContainer.clientWidth;
const newWidth =
startWidth + ((isLeftHandle ? -deltaX : deltaX) / containerWidth) * 100;
if (isLeftHandle) {
const newLeft = startLeft + (deltaX / containerWidth) * 100;
adjustPeriodPosition(newLeft, newWidth);
} else {
adjustPeriodPosition(parseFloat(periodTimeLine.style.left), newWidth);
}
updatePeriodTimeLabel();
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener(
"mouseup",
() => {
snapHandlesToQuarters();
generateAllEtudRow();
document.removeEventListener("mousemove", onMouseMove);
func_call();
},
{ once: true }
);
} }
}); timelineContainer.addEventListener("mousemove", onMouseMove);
timelineContainer.addEventListener("touchmove", onMouseMove);
document.addEventListener(
"mouseup",
mouseUp,
);
document.addEventListener(
"touchend",
mouseUp,
);
} else if (event.target === periodTimeLine) {
const startLeft = parseFloat(periodTimeLine.style.left);
const onMouseMove = (moveEvent) => {
console.warn("move Period")
if (handleMoving) return;
const deltaX = (moveEvent.clientX || moveEvent.changedTouches[0].clientX) - startX;
const containerWidth = timelineContainer.clientWidth;
const newLeft = startLeft + (deltaX / containerWidth) * 100;
adjustPeriodPosition(newLeft, parseFloat(periodTimeLine.style.width));
updatePeriodTimeLabel();
};
const mouseUp = () => {
generateAllEtudRow();
snapHandlesToQuarters();
timelineContainer.removeEventListener("mousemove", onMouseMove);
func_call();
}
timelineContainer.addEventListener("mousemove", onMouseMove);
timelineContainer.addEventListener("touchmove", onMouseMove);
document.addEventListener(
"mouseup",
mouseUp,
{ once: true }
);
document.addEventListener(
"touchend",
mouseUp,
{ once: true }
);
}
}
function setupTimeLine(callback) {
timelineContainer.addEventListener("mousedown", (e) => { timelineMainEvent(e, callback) });
timelineContainer.addEventListener("touchstart", (e) => { timelineMainEvent(e, callback) });
} }
function adjustPeriodPosition(newLeft, newWidth) { function adjustPeriodPosition(newLeft, newWidth) {