1let onHomepage = true; 2let isInfoPageOpen = false; 3let isContactPageOpen = false; 4let isProjectPageOpen = false; 5let isProjectsPageOpen = false; 6let isImageSlideshowOpen = false; 7let currentSelectImageID = 0; 8 9let oneColunm = true; 10 11 12console.clear(); 13gsap.registerPlugin(Observer); 14gsap.registerPlugin(ScrollTrigger); 15 16let isTweening = false; 17let currentSection = 0; 18let amount = 0; 19let base = 0; 20 21const columns = gsap.utils.toArray(".column"); 22const page = gsap.utils.toArray(".homepage"); 23const columnsNumber = columns.length; 24 25const configureSingleColumnLayout= () => { 26 columns.forEach((col, i) => { 27 gsap.set(col, { yPercent: 0 }); 28 29 const els = gsap.utils.toArray(".box", col); 30 amount = (els.length); 31 console.log("number of box : ", amount); 32 base = 100 * (amount - 1); 33 }); 34 35 } 36 37 const configureMultiColumnLayout= () => { 38 39 40 columns.forEach((col, i) => { 41 gsap.set(col, { yPercent: -base }); 42 43 const els = gsap.utils.toArray(".box", col); 44 amount = (els.length); 45 base = 100 * (amount - 1); 46 47 }); 48 } 49 50 51ScrollTrigger.matchMedia({ 52 "(max-width:800px)": function(){ 53 54 if(oneColunm==false){ 55 currentSection = 0; 56 gsap.to(page, { 57 yPercent: 0, 58 duration: 1, 59 onComplete: () => (isTweening = false) 60 }); 61 62 } 63 console.log("smartphone"); 64 oneColunm = true; 65 66 //configureSingleColumnLayout 67 configureSingleColumnLayout(); 68 // console.log("small screen"); 69 70 }, 71 72 "(min-width:801px)": function(){ 73 console.log("desktop"); 74 75 if(oneColunm==true){ 76 currentSection = 0; 77 gsap.to(page, { 78 yPercent: 0, 79 duration: 1, 80 onComplete: () => (isTweening = false) 81 }); 82 83 gsap.to(columns, { 84 yPercent: (i) => (i < 1 ? 0: -base), 85 duration: 1, 86 onComplete: () => (isTweening = false) 87 }); 88 89 90 } 91 oneColunm = false; 92 //configureMultiolumnLayout 93 configureMultiColumnLayout(); 94 95 // console.log("big screen"); 96 97 } 98}); 99 100 101const goToSection = (e) => { 102 var target; 103 if(oneColunm){ 104 target = page; 105 }else{ 106 target=columns; 107 } 108 if(onHomepage){ 109 if (isTweening) return; 110 let value; 111 if (e.deltaY > 0 && currentSection < amount - 1) { 112 isTweening = true; 113 114 currentSection++; 115 value = 100 * currentSection; 116 console.log("value:", -value ); 117 console.log("base", base ); 118 console.log("value - base", value - base ); 119 120 gsap.to(target, { 121 yPercent: (i) => (i < 1 ? -value: value - base), 122 duration: 1, 123 onComplete: () => (isTweening = false) 124 }); 125 126 127 }else if (e.deltaY < 0 && currentSection > 0) { 128 isTweening = true; 129 currentSection--; 130 value = 100 * currentSection; 131 console.log("value:", -value ); 132 console.log("base", base ); 133 console.log("value - base", value - base ); 134 gsap.to(target, { 135 yPercent: (i) => (i < 1 ? -value : value - base), 136 duration: 1, 137 onComplete: () => (isTweening = false) 138 }); 139 } 140 141 } 142 143 }; 144 145 146 147 Observer.create({ 148 target: window, 149 type: "wheel, touch, scroll, pointer", 150 onChangeY: goToSection 151 }); 152 153/*function myFunction(x) { 154 if (x.matches) { 155 oneColunm = true; 156 console.log("onecolumn", oneColunm); 157 let homepage = document.querySelector(".homepage"); 158 homepage.scrollTop = 0; 159 160 //position righColumn après leftColumn 161 162 } else { 163 oneColunm = false; 164 console.log("oneColunm",oneColunm); 165 166 } 167 } 168 169 var x = window.matchMedia("(max-width: 800px)") 170 myFunction(x); 171 x.addEventListener("change", function() { 172 myFunction(x); 173 }); */ 174 175 176 /*------ HOME slideshow ------ */ 177/* 178 let isTweening = false; 179 let currentSection = 0; 180 let amount = 0; 181 let base = 0; 182 183 const columns = gsap.utils.toArray(".column"); 184 console.log("columns",columns); 185 186 187 columns.forEach((col, i) => { 188 const els = gsap.utils.toArray(".box", col); 189 190 amount = els.length; 191 console.log("i",i); 192 193 base = 100 * (amount - 1); 194 if (i) { 195 if(oneColunm ) { 196 gsap.set(col, { 197 // yPercent: 200 198 }); 199 200 }else{ 201 202 gsap.set(col, { 203 yPercent: -base 204 }); 205 }} 206 }); 207 208 209 210 const goToSection = (e) => { 211 if(onHomepage ) { 212 if(oneColunm == false){ 213 //&& !oneColunm 214 // console.log(e.deltaY, isTweening); 215 if (isTweening) return; 216 let value; 217 if (e.deltaY > 0 && currentSection < amount - 1) { 218 isTweening = true; 219 currentSection++; 220 value = 100 * currentSection; 221 gsap.to(columns, { 222 yPercent: (i) => (i < 1 ? -value : value - base), 223 duration: 1, 224 onComplete: () => (isTweening = false) 225 }); 226 } else if (e.deltaY < 0 && currentSection > 0) { 227 isTweening = true; 228 currentSection--; 229 value = 100 * currentSection; 230 gsap.to(columns, { 231 yPercent: (i) => (i < 1 ? -value : value - base), 232 duration: 1, 233 onComplete: () => (isTweening = false) 234 }); 235 } 236 } 237 238 } 239 240 241 }; 242 243Observer.create({ 244 target: window, 245 type: "wheel", 246 onChangeY: goToSection 247}); 248*/ 249document.addEventListener('DOMContentLoaded', function() { 250 251 document.body.addEventListener('mouseover', function(e) { 252 if(e.target.matches(".project-link")){ 253 id = e.target.getAttribute('id'); 254 let imageProjectID = "img_" + id; 255 currentSelectImageID = imageProjectID; 256 let imageSelect = document.getElementById(imageProjectID); 257 if(imageSelect !== null){ 258 imageSelect.style.opacity = 1; 259 } 260 } 261 }); 262 263 document.body.addEventListener('mouseout', function(e) { 264 265 if(e.target.matches(".project-link")){ 266 let imageSelect = document.getElementById(currentSelectImageID); 267 if(imageSelect !== null) imageSelect.style.opacity = 0; 268 } 269 }); 270 271 272 document.body.addEventListener('click', function(e) { 273 274 if(e.target.matches(".nav-title")){ 275 e.preventDefault(); 276 277 if(isInfoPageOpen) closeInfoPage(); 278 if(isContactPageOpen) closeContactPage(); 279 if(isProjectsPageOpen){ 280 if(isProjectPageOpen){ 281 if(isImageSlideshowOpen){ 282 handleClickOnClose(() =>{ 283 console.log("fonction terminée"); 284 displayNavigationButton(true); 285 href = e.target.getAttribute('href'); 286 title = e.target.getAttribute('name'); 287 288 loadContent(href, title); 289 isProjectPageOpen = false;
290 isProjectsPageOpen = false; 291 isImageSlideshowOpen = false; 292 }); 293 294 }else{ 295 displayNavigationButton(true); 296 href = e.target.getAttribute('href'); 297 title = e.target.getAttribute('name'); 298 299 loadContent(href, title); 300 isProjectPageOpen = false; 301 isProjectsPageOpen = false; 302 isImageSlideshowOpen = false; 303 304 } 305 306 307 308 }else{ 309 closeProjectSelectionPage(); 310 311 } 312 } 313 314 315 onHomepage = true; 316 } 317 318 if(e.target.matches('.nav-infos')){ 319 e.preventDefault(); 320 if(isProjectsPageOpen) closeProjectSelectionPage(); 321 if(isContactPageOpen) closeContactPage(); 322 323 isInfoPageOpen ? closeInfoPage() : openInfoPage(); 324 } 325 326 if(e.target.matches('.nav-contact')){ 327 title = e.target.getAttribute('name'); 328 if(title ==="contact"){ 329 e.preventDefault(); 330 onHomepage = false; 331 if(isProjectsPageOpen) closeProjectSelectionPage(); 332 if(isInfoPageOpen) closeInfoPage(); 333 334 isContactPageOpen ? closeContactPage() : openContactPage(); 335 } 336 } 337 338 if(e.target.matches(".nav-projects")){ 339 e.preventDefault(); 340 console.log("open project"); 341 if(isInfoPageOpen) closeInfoPage(); 342 if(isContactPageOpen) closeContactPage(); 343 344 isProjectsPageOpen ? closeProjectSelectionPage() : openProjectSelectionPage(); 345 346 } 347 348 if (e.target.matches('a.project-link') ) { 349 e.preventDefault(); 350 href = e.target.getAttribute('href'); 351 title = "project"; 352 isProjectPageOpen = true; 353 loadContent(href,title); 354 } 355 356 if(e.target.matches('.close')){ 357 e.preventDefault(); 358 if(!isImageSlideshowOpen){ 359 360 361 362 console.log("CLOSE project"); 363 const homepage = document.querySelector(".homepage"); 364 homepage.style.visibility = 'visible'; 365 // gsap.fromTo(".homepage", { opacity: 1 },{ opacity:0, duration: 0.1, ease:"none",onComplete(){ 366 367 // }}); 368 gsap.fromTo(".image-project", { opacity: 1 },{ opacity:0, duration: 0.1, ease:"none",onComplete(){ 369 href = e.target.getAttribute('href'); 370 title = e.target.getAttribute('name'); 371 loadContent(href, title); 372 isProjectPageOpen = false; 373 }}); 374 375 } 376 } 377 378 379 if(isProjectPageOpen){ 380 381 manageSlideShow(e); 382 383 384 } 385 386 }); 387 388 389 390 function loadImageOnHover(src) { 391 392 } 393 394 function loadContent(url,target) { 395 var pageData = ''; 396 console.log("LOAD CONTENT, target:", target); 397 var xhr = new XMLHttpRequest(); 398 xhr.open('POST', url, true); 399 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 400 401 xhr.onload = function() { 402 if (xhr.status >= 200 && xhr.status < 400) { 403 // Succès de la requête 404 pageData = xhr.responseText; 405 406 pageData = '<div class="content ajax">' + pageData + '</div>'; 407 document.querySelector('.content-container').insertAdjacentHTML('beforeend', pageData); 408 var currentContent = document.querySelector('.content.current-content'); 409 if (currentContent) { 410 currentContent.remove(); 411 } 412 413 // Afficher le nouveau contenu et nettoyer les classes 414 var newContent = document.querySelector('.content-container .ajax'); 415 if (newContent) { 416 newContent.classList.remove('ajax'); 417 newContent.classList.add('current-content'); 418 } 419 console.log("target,", target); 420 if(target === "Projects") closeProjectPage(); 421 if(target === "project") openProjectPage(); 422 if(target === "home") { 423 closeProjectPage(); 424 closeProjectSelectionPage(); 425 } 426 427 428 } else { 429 // Erreur de la requête 430 console.error('Erreur lors du chargement du contenu:', xhr.statusText); 431 } 432 }; 433 xhr.onerror = function() { 434 // Erreur réseau 435 console.log("errer"); 436 console.error('Erreur réseau lors du chargement du contenu.'); 437 }; 438 439 // Envoyer la requête avec les données 'ajax: true' 440 xhr.send('ajax=true'); 441 } 442 443}); 444 445const changeSlide = (number) => { 446 const projectPage = document.querySelector(".projects"); 447 const images = projectPage.querySelectorAll(".img-project"); 448 const navigationDots = projectPage.querySelectorAll('.dot'); 449 const ACTIVE_CLASS = 'active'; 450
451 images.forEach((image, index) => { 452 image.style.opacity = index === number ? 1 : 0; 453 navigationDots[index].classList.toggle(ACTIVE_CLASS, index === number); 454 }); 455}; 456 457const handleClickOnClose = (callback) => { 458 const projectPage = document.querySelector(".projects"); 459 const images = projectPage.querySelectorAll(".img-project"); 460 const imageSection = projectPage.querySelector('.image-project'); 461 462 const navButtonLeft = projectPage.querySelector('.btn-left'); 463 const navButtonRight = projectPage.querySelector('.btn-right'); 464 const slideNavigation = document.querySelector(".navigation-button"); 465 466 if(isImageSlideshowOpen){ 467 minimizeSizeSection(imageSection); 468 imageClicked = false; 469 images.forEach(img => { 470 img.style.opacity = 1; 471 minimizeSizeContainer(img.parentElement); 472 minimizeSizeImage(img); 473 }); 474 displayElement(false, navButtonLeft); 475 displayElement(false, navButtonRight); 476 displayElement(false, slideNavigation); 477 isImageSlideshowOpen = false; 478 if(callback){ 479 callback(); 480 } 481 } 482 483 }; 484 485 function handleImageClick(image, index){ 486 const projectPage = document.querySelector(".projects"); 487 const images = projectPage.querySelectorAll(".img-project"); 488 const imageSection = projectPage.querySelector('.image-project'); 489 490 const navButtonLeft = projectPage.querySelector('.btn-left'); 491 const navButtonRight = projectPage.querySelector('.btn-right'); 492 const slideNavigation = document.querySelector(".navigation-button"); 493 494 currentImage = index; 495 images.forEach(img => { 496 img.style.opacity = 0; 497 setFullSizeContainer(img.parentElement); 498 setFullSizeImage(img); 499 }); 500 changeSlide(currentImage); 501 setFullsizeSection(imageSection); 502 displayElement(true, navButtonLeft); 503 displayElement(true, navButtonRight); 504 displayElement(true, slideNavigation); 505 506 isImageSlideshowOpen = true; 507} 508 509function manageSlideShow(e){ 510 const projectPage = document.querySelector(".projects"); 511 const images = projectPage.querySelectorAll(".img-project"); 512 const closebutton = projectPage.querySelector(".close-btn"); 513 const homebutton = document.querySelector('.nav-title'); 514 const closeIcon = projectPage.querySelector(".icon-close"); 515 const navButtonLeft = projectPage.querySelector('.btn-left'); 516 const navIconLeft = projectPage.querySelector('.icon-left'); 517 const navButtonRight = projectPage.querySelector('.btn-right'); 518 const navIconRight = projectPage.querySelector('.icon-right'); 519 const navigationDots = projectPage.querySelectorAll('.dot'); 520 const firstImageIndex = 0; 521 522 const lastImageIndex = images.length - 1; 523 524 525 const handleClickOnNavLeft = () => { 526 527 if (currentImage > firstImageIndex && currentImage <= lastImageIndex) { 528 currentImage--; 529 } else if (currentImage === firstImageIndex) { 530 currentImage = lastImageIndex; 531 } 532 changeSlide(currentImage); 533 }; 534 535 const handleClickOnNavRight = () => { 536 537 if (currentImage >= firstImageIndex && currentImage < lastImageIndex) { 538 currentImage++; 539 } else { 540 currentImage = firstImageIndex; 541 } 542 changeSlide(currentImage); 543 544 }; 545 546 547 // if(homebutton=== e.target) handleClickOnClose(); 548 549 if(isImageSlideshowOpen) if(closebutton === e.target || closeIcon === e.target) handleClickOnClose(); 550 if(navButtonLeft === e.target || navIconLeft === e.target) handleClickOnNavLeft(); 551 if(navButtonRight === e.target || navIconRight === e.target ) handleClickOnNavRight(); 552 553 554 images.forEach((image,index)=> { 555 if(!isImageSlideshowOpen && image==e.target) handleImageClick(image,index);; 556 }); 557 558 559} 560 561function openInfoPage(){ 562 isInfoPageOpen = true; 563 onHomepage = false; 564 const textPanel = document.querySelector(".info-section"); 565 const containterText = document.querySelector(".container-section") 566 gsap.fromTo(textPanel, { y: "-100vh" }, { y:"100vh", duration: 1, ease:"none",}); 567 console.log("scroll",containterText.scrollTop); 568 containterText.scrollTop = 0; 569 570 const subtitle = document.querySelector(".subtitle"); 571 if(subtitle !== null) gsap.fromTo(".subtitle", { opacity: 1 },{ opacity:0, duration: 0.1, ease:"none",}); 572 573 574} 575 576function closeInfoPage(){ 577 isInfoPageOpen = false;
578 onHomepage = true; 579 580 const subtitle = document.querySelector(".subtitle"); 581 if(subtitle !== null) gsap.fromTo(".subtitle", { opacity: 0 },{ opacity:1, duration: 0.1, ease:"none",}); 582 583 const textPanel = document.querySelector(".info-section"); 584 gsap.fromTo(textPanel, { y: "100vh" }, { y:"-100vh", duration: 1, ease:"none",}); 585} 586 587function openContactPage(){ 588 isContactPageOpen = true; 589 onHomepage = false; 590 const textPanel = document.querySelector(".contact-section"); 591 const containterText = textPanel.querySelector(".container-section") 592 gsap.fromTo(textPanel, { y: "100vh" }, { y:"-50vh", duration: 1, ease:"none",}); 593 const subtitle = document.querySelector(".subtitle"); 594 if(subtitle !== null) gsap.fromTo(".subtitle", { opacity: 1 },{ opacity:0, duration: 0.1, ease:"none",}); 595 596 // gsap.fromTo(textPanel, { y: "-100vh" }, { y:"150vh", duration: 1, ease:"none",}); 597 // console.log("scroll",containterText.scrollTop); 598 // containterText.scrollTop = 0; 599} 600 601function closeContactPage(){ 602 isContactPageOpen = false; 603 onHomepage = true; 604 605 const subtitle = document.querySelector(".subtitle"); 606 if(subtitle !== null) gsap.fromTo(".subtitle", { opacity: 0 },{ opacity:1, duration: 0.1, ease:"none",}); 607 608 const textPanel = document.querySelector(".contact-section"); 609 gsap.fromTo(textPanel, { y: "-50vh" }, { y:"100vh", duration: 1, ease:"none",}); 610 611 612 // gsap.fromTo(textPanel, { y: "150vh" }, { y:"-100vh", duration: 1, ease:"none",}); 613} 614 615function openProjectSelectionPage(){ 616 isProjectsPageOpen = true; 617 const subtitle = document.querySelector(".subtitle"); 618 if(subtitle !== null)gsap.fromTo(".subtitle", { opacity: 1 },{ opacity:0, duration: 0.1, ease:"none",}); 619 620 onHomepage = false; 621 622 const projectsTextPanel = document.querySelector(".projectSectionTexte"); 623 projectsTextPanel.style.visibility = 'visible'; 624 gsap.fromTo(projectsTextPanel, { y: "100vh" }, { y:"-100vh", duration: 1, ease:"none",}); 625 626 const projectsImagePanel = document.querySelector(".projectSectionImage"); 627 if(!oneColunm) projectsImagePanel.style.visibility = 'visible'; 628 gsap.fromTo(projectsImagePanel, { y: "-100vh" }, { y:"100vh", duration: 1, ease:"none",}); 629} 630 631function closeProjectSelectionPage(){ 632 console.log("close project selection"); 633 isProjectsPageOpen = false; 634 onHomepage = true; 635 const subtitle = document.querySelector(".subtitle"); 636 if(subtitle !== null) gsap.fromTo(".subtitle", { opacity: 0 },{ opacity:1, duration: 0.1, ease:"none",}); 637 638 const projectsTextPanel = document.querySelector(".projectSectionTexte"); 639 gsap.fromTo(projectsTextPanel, { y: "-100vh" }, { y:"100vh", duration: 1, ease:"none",}); 640 641 const projectsImagePanel = document.querySelector(".projectSectionImage"); 642 gsap.fromTo(projectsImagePanel, { y: "100vh" }, { y:"-100vh", duration: 1, ease:"none",}); 643} 644 645function openProjectPage(){ 646 displayNavigationButton(false); 647 const homepage = document.querySelector(".homepage"); 648 homepage.style.visibility = "hidden"; 649 650 const imagePanel = document.querySelector(".image-project"); 651 const textPanel = document.querySelector(".text-project"); 652 imagePanel.scrollTop = 0; 653 654 textPanel.style.visibility = "visible"; 655 656 657 gsap.fromTo(imagePanel, { opacity: 1 }, { opacity:1, duration: 0.4, ease:"none",onComplete() { 658 } }) 659 // gsap.fromTo(imagePanel, { y: "-100vh" }, { y:"100vh", duration: 1, ease:"none",onComplete() { 660 // } }); 661 662} 663 664 665function closeProjectPage(){ 666 console.log("close project page"); 667 const homepage = document.querySelector(".homepage"); 668 homepage.style.visibility = "visible"; 669 670 671 const projectsTextPanel = document.querySelector(".projectSectionTexte"); 672 const projectsImagePanel = document.querySelector(".projectSectionImage"); 673 674 675 displayNavigationButton(true); 676 677 projectsTextPanel.style.visibility = "visible"; 678 projectsImagePanel.style.visibility = "visible"; 679 680 681 682 gsap.fromTo(".projectSectionImage", { y: "100vh" },{ y:"100vh", duration: 1, ease:"none",onComplete(){ 683 }}); 684 685 gsap.fromTo(".projectSectionImage", { opacity: 0 }, { opacity:1, duration: 0.1, ease:"none",onComplete(){ 686 }}); 687 688 gsap.fromTo(".projectSectionTexte", { y: "-100vh" },{ y:"-100vh", duration: 1, ease:"none",}); 689 690 if(oneColunm){ 691 projectsImagePanel.visibility = "hidden"; 692 } 693 // gsap.fromTo(".projectSectionImage", { y: "100vh" }, { y:"100vh", duration: 1, ease:"none",}); 694 695} 696 697function displayNavigationButton(statut){ 698 console.log("DISPLAY NAV", statut); 699 const infoButton = document.querySelector(".nav-infos"); 700 const contactButton = document.querySelector(".nav-contact"); 701 const projectsSelectionButton = document.querySelector(".nav-projects"); 702 703 displayElement(statut,infoButton); 704 displayElement(statut,contactButton); 705 displayElement(statut,projectsSelectionButton); 706 707} 708 709function displayElement(on, element){ 710 const visibility = on ? "visible" : "hidden"; 711 element.style.visibility =visibility; 712 } 713 714 715function displayElement(on, element){ 716 const visibility = on ? "visible" : "hidden"; 717 element.style.visibility =visibility; 718} 719 720function setFullsizeSection(section){ 721 section.classList.remove("section-mini"); 722 section.classList.add("section-fullsize"); 723} 724 725function minimizeSizeSection(section){ 726 section.classList.remove("section-fullsize"); 727 section.classList.add("section-mini"); 728} 729 730 731function setFullSizeContainer(container){ 732 container.classList.remove("container-mini"); 733 container.classList.add("container-fullsize"); 734} 735 736function minimizeSizeContainer(container){ 737 container.classList.remove("container-fullsize"); 738 container.classList.add("container-mini"); 739} 740 741function setFullSizeImage(image){ 742 image.classList.remove("image-mini"); 743 image.classList.add("image-fullsize"); 744} 745 746function minimizeSizeImage(image){ 747 image.classList.remove("image-fullsize"); 748 image.classList.add("image-mini"); 749} 750 751 752 753 754
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.