/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./src/assets/scss/quartiers_de_demain.scss": /*!**************************************************!*\ !*** ./src/assets/scss/quartiers_de_demain.scss ***! \**************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + \"./css/bundle.css\");\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/scss/quartiers_de_demain.scss?"); /***/ }), /***/ "./src/assets/js/animated_logo.js": /*!****************************************!*\ !*** ./src/assets/js/animated_logo.js ***! \****************************************/ /***/ (() => { eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.querySelector('#logo-animated');\n let svgElement = document.querySelector('#logo-animated svg');\n svgContainer.style.height = `${svgElement.clientHeight}px`;\n }\n setLogoContainerSize();\n window.addEventListener('resize', setLogoContainerSize);\n console.log('animated');\n\n let chemins = document.querySelectorAll('#logo-animated svg path');\n for (let chemin of chemins) {\n let length = chemin.getTotalLength();\n chemin.style.strokeDasharray = length;\n chemin.style.strokeDashoffset = length;\n }\n\n \n let consultationCouleur = document.querySelector('#consultation-couleur');\n let consultationNoir = document.querySelector('#consultation-noir');\n \n let quartierCouleur = document.querySelector('#quartier-couleur');\n let quartierNoir = document.querySelector('#quartier-noir');\n \n let consultationTranslate = 200;\n let quartierTranslate = -200;\n\n function startCountdown() {\n let startTime;\n let animationTime = 1800;\n\n function animate(timestamp) {\n if (!startTime) startTime = timestamp;\n const elapsedTime = timestamp - startTime;\n\n if (elapsedTime <= animationTime) {\n const animationPercent = elapsedTime / animationTime;\n animateLogo(animationPercent);\n requestAnimationFrame(animate);\n } else {\n animateLogo(1);\n }\n\n }\n requestAnimationFrame(animate);\n }\n\n // function animateLogo(animationPercent) {\n // for (let i = 0; i < chemins.length; i++) {\n // let draw = chemins[i].getTotalLength() * animationPercent;\n // chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n // chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);\n // }\n // let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);\n // let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);\n\n // consultationCouleur.style.opacity = animationPercentCouleur;\n // consultationNoir.style.opacity = animationPercentNoir;\n // quartierCouleur.style.opacity = animationPercentCouleur;\n // quartierNoir.style.opacity = animationPercentNoir;\n\n // consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;\n\n // quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;\n // }\n\n function animateLogo(animationPercent) {\n // Calcul du pourcentage de l'animation principale\n let mainAnimationPercent = animationPercent;\n\n // Décalage pour l'animation des éléments noir\n let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale\n let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale\n\n // Calcul du pourcentage de l'animation pour les éléments noir avec décalage\n let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);\n\n let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n consultationCouleur.style.opacity = animationPercentCouleur;\n consultationNoir.style.opacity = animationPercentNoir;\n quartierCouleur.style.opacity = animationPercentCouleur;\n quartierNoir.style.opacity = animationPercentNoirQuartier;\n\n // Décalage des éléments noir dans le temps\n consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;\n quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;\n}\n\n\n\n window.addEventListener('load', startCountdown);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_logo.js?"); /***/ }), /***/ "./src/assets/js/quartiers_de_demain.js": /*!**********************************************!*\ !*** ./src/assets/js/quartiers_de_demain.js ***! \**********************************************/ /***/ (() => { eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n//////////// agrandissement du shema\n\n $('#paragraph-id--9 img').click(function() {\n $(this).toggleClass('zoom_in');\n });\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n})(jQuery);\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) /******/ }); /************************************************************************/ /******/ // The require scope /******/ var __webpack_require__ = {}; /******/ /************************************************************************/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/global */ /******/ (() => { /******/ __webpack_require__.g = (function() { /******/ if (typeof globalThis === 'object') return globalThis; /******/ try { /******/ return this || new Function('return this')(); /******/ } catch (e) { /******/ if (typeof window === 'object') return window; /******/ } /******/ })(); /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/publicPath */ /******/ (() => { /******/ var scriptUrl; /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; /******/ var document = __webpack_require__.g.document; /******/ if (!scriptUrl && document) { /******/ if (document.currentScript) /******/ scriptUrl = document.currentScript.src; /******/ if (!scriptUrl) { /******/ var scripts = document.getElementsByTagName("script"); /******/ if(scripts.length) { /******/ var i = scripts.length - 1; /******/ while (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src; /******/ } /******/ } /******/ } /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); /******/ __webpack_require__.p = scriptUrl; /******/ })(); /******/ /************************************************************************/ /******/ /******/ // startup /******/ // Load entry module and return exports /******/ // This entry module can't be inlined because the eval devtool is used. /******/ __webpack_modules__["./src/assets/js/quartiers_de_demain.js"](0, {}, __webpack_require__); /******/ __webpack_modules__["./src/assets/js/animated_logo.js"](0, {}, __webpack_require__); /******/ var __webpack_exports__ = {}; /******/ __webpack_modules__["./src/assets/scss/quartiers_de_demain.scss"](0, __webpack_exports__, __webpack_require__); /******/ /******/ })() ;