261 lines
7.7 KiB
JavaScript
261 lines
7.7 KiB
JavaScript
import { createApp } from 'vue'
|
|
import '../scss/main.scss'
|
|
import Content from './vuejs/Content.vue'
|
|
|
|
import REST from './api/rest-axios'
|
|
|
|
// import LocomotiveScroll from 'locomotive-scroll';
|
|
// const scroll = new LocomotiveScroll();
|
|
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { ScrollSmoother } from "gsap/ScrollSmoother";
|
|
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
|
|
|
|
// /**
|
|
// * @file
|
|
// * reha behaviors.
|
|
// * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
|
|
// */
|
|
// (function (Drupal) {
|
|
|
|
// 'use strict';
|
|
|
|
// Drupal.behaviors.reha = {
|
|
// attach: function (context, settings) {
|
|
// console.log('It works!');
|
|
// }
|
|
// };
|
|
|
|
// } (Drupal));
|
|
|
|
(function (Drupal, drupalSettings) {
|
|
const MathalloTheme = function () {
|
|
const _is_front = drupalSettings.path.isFront
|
|
console.log('drupalSettings', drupalSettings)
|
|
|
|
// let _I18n
|
|
|
|
// ___ _ _
|
|
// |_ _|_ _ (_) |_
|
|
// | || ' \| | _|
|
|
// |___|_||_|_|\__|
|
|
function init () {
|
|
console.log('MathalloTheme init()')
|
|
initBurgerMenu();
|
|
initPartieFrontBackCardSwitch();
|
|
initBgFormes();
|
|
initBgAnime();
|
|
// initVues()
|
|
}
|
|
|
|
function initBurgerMenu() {
|
|
let header_right = document.getElementById('burger-btn');
|
|
header_right.parentElement.addEventListener('click', function(e){
|
|
// console.log('click header_right', this);
|
|
this.firstElementChild.toggleAttribute('opened');
|
|
this.firstElementChild.nextElementSibling.toggleAttribute('opened');
|
|
})
|
|
}
|
|
|
|
function initPartieFrontBackCardSwitch() {
|
|
let principes_pratique = document.getElementById('partie-principes-pratique');
|
|
if (principes_pratique) {
|
|
let cards = principes_pratique.getElementsByClassName('field-card');
|
|
// console.log('cards', cards);
|
|
for (const card of cards) {
|
|
card.addEventListener('mousemove', function (e) {
|
|
// console.log(this, e);
|
|
for (const child of this.parentElement.children){
|
|
child.classList.add('back-card')
|
|
child.classList.remove('front-card');
|
|
}
|
|
this.classList.add('front-card')
|
|
this.classList.remove('back-card')
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
async function initBgFormes(){
|
|
const container = document.querySelector('main[role="main"] > .layout-content > .wrapper');
|
|
console.log('container', container);
|
|
|
|
// liste forme file names
|
|
const formesclasses = [
|
|
'pyramide',
|
|
'prct',
|
|
'infinite',
|
|
'pi',
|
|
'supeg',
|
|
'cone',
|
|
'croissant',
|
|
'cube',
|
|
'diamant',
|
|
'cylindre'
|
|
]
|
|
|
|
// listes all available sizes
|
|
let sizes = []
|
|
let min = 150;
|
|
let increment = Math.round((350 / (formesclasses.length -1)));
|
|
for (let i = 0; i < formesclasses.length; i++) {
|
|
sizes.push( min + increment * i)
|
|
}
|
|
console.log('sizes', sizes);
|
|
|
|
let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
|
|
console.log('cards', cards);
|
|
let used_n = [];
|
|
for (const card of cards) {
|
|
console.log('card', card);
|
|
|
|
let forme = document.createElement('div');
|
|
forme.classList.add('bg-forme');
|
|
|
|
// random forme
|
|
// avoid duplicated formes
|
|
let n = Math.round(Math.random() * (formesclasses.length -1));
|
|
while (used_n.includes(n)) {
|
|
n = Math.round(Math.random() * (formesclasses.length -1));
|
|
}
|
|
used_n.push(n);
|
|
console.log('n',n, 'class', formesclasses[n]);
|
|
// forme.classList.add(formesclasses[n]);
|
|
const response = await fetch(`/themes/custom/mathallo/assets/img/formes/${formesclasses[n]}.svg`)
|
|
const svgText = await response.text();
|
|
forme.innerHTML = svgText;
|
|
const svgNode = forme.querySelector('svg');
|
|
const init_wh = svgNode.getAttribute('width');
|
|
|
|
// random size
|
|
// let wh = 150 + Math.random()*350;
|
|
|
|
// pic a size
|
|
let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
|
|
|
|
forme.style.width = forme.style.height = `${wh}px`;
|
|
svgNode.setAttribute('width', wh);
|
|
svgNode.setAttribute('height', wh);
|
|
|
|
// keep stroke width to visualy 1px
|
|
let scale = wh / init_wh;
|
|
const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
|
|
console.log('paths', paths);
|
|
|
|
paths.forEach(path => {
|
|
const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
|
|
let new_SW = init_SW / scale;
|
|
path.setAttribute('stroke-width', `${new_SW}px`);
|
|
path.style.strokeWidth = `${new_SW}px`;
|
|
});
|
|
|
|
|
|
// random position
|
|
// top
|
|
let top = card.offsetTop + card.clientHeight/2 - wh/2;
|
|
forme.style.top = `${top}px`;
|
|
|
|
// left right
|
|
if (card.classList.contains('field-principes-reflexion')) {
|
|
// left
|
|
forme.style.left = `${card.offsetLeft - wh}px`;
|
|
} else if(card.classList.contains('field-en-pratique')) {
|
|
// right
|
|
forme.style.left = `${card.offsetLeft + card.clientWidth}px`;
|
|
} else {
|
|
// random
|
|
forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
|
|
}
|
|
|
|
|
|
container.prepend(forme);
|
|
}
|
|
}
|
|
|
|
function initBgAnime(){
|
|
gsap.to('body', {
|
|
scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport
|
|
backgroundPositionY: 10
|
|
});
|
|
|
|
ScrollSmoother.create({
|
|
smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
|
|
effects: true, // looks for data-speed and data-lag attributes on elements
|
|
smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
|
|
wrapper: 'main[role="main"]',
|
|
content: 'main[role="main"]>.layout-content'
|
|
});
|
|
}
|
|
|
|
// function initVues(){
|
|
// console.log('initVues');
|
|
|
|
// // initVueContent();
|
|
|
|
|
|
// }
|
|
|
|
// function initVueContent(){
|
|
// createApp(Content).mount('main[role="main"]');
|
|
|
|
// // processEtapeLinks();
|
|
// }
|
|
|
|
|
|
// function onClickEtapeLink(e){
|
|
// e.preventDefault();
|
|
|
|
// let a = e.currentTarget;
|
|
// let nid = a.dataset.nodeNid;
|
|
// console.log(nid);
|
|
|
|
// getNodeData(nid);
|
|
|
|
// return null;
|
|
// }
|
|
|
|
|
|
// function processEtapeLinks(){
|
|
// let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
|
|
// etape_link_fields.forEach((field, index) => {
|
|
// let nid = null;
|
|
// let classList = field.classList;
|
|
// classList.forEach((classe) => {
|
|
// let reg = /data-node-(\d+)/;
|
|
// let result = classe.match(reg);
|
|
// if (result) {
|
|
// nid = result[1];
|
|
// console.log(nid);
|
|
// }
|
|
// })
|
|
|
|
// if (nid) {
|
|
// let a = field.querySelector('a');
|
|
// a.setAttribute('data-node-nid', nid);
|
|
// a.addEventListener('click', onClickEtapeLink);
|
|
// }
|
|
|
|
|
|
// })
|
|
// }
|
|
|
|
// function getNodeData(nid){
|
|
// const params = {
|
|
// }
|
|
// REST.get(`/node/${nid}?_format=json`, params)
|
|
// .then((data) => {
|
|
// console.log('user REST getUser data', data)
|
|
// })
|
|
// .catch(error => {
|
|
// console.warn('Issue with getNodedata', error)
|
|
// Promise.reject(error)
|
|
// })
|
|
// }
|
|
|
|
init()
|
|
} // end MathalloTheme()
|
|
|
|
MathalloTheme()
|
|
})(Drupal, drupalSettings) |