Merge pull request #66 from acend/changes

update packages (hyas to thulite)

site/assets/js/app.js

@@ -11,13 +11,30 @@ import SwupHeadPlugin from '@swup/head-plugin';
 import starterScripts from "./assets/js/views/starter-scripts";
 import onEveryPage from "./assets/js/views/on-every-page";
 
+// Include parts of Bootstrap
+
+import {
+  //Alert,
+  Button,
+  //Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  //Popover,
+  //ScrollSpy,
+  //Tab,
+  //Toast,
+  //Tooltip
+} from 'bootstrap';
+
 
 
 const swup = new Swup({
   containers: ['#main', '#main-menu', '#top-menu' ],
   ignoreVisit: (url, { el } = {}) => el?.closest('.language-switcher') ,
   //ignoreVisit: (url, { el } = {}) => el?.closest('[data-no-swup]') || el?.closest('#wpadminbar'),
-  native: true,
+  //native: true,
   plugins: [
     new SwupBodyClassPlugin(),
     new SwupHeadPlugin({ persistAssets: true }),

site/assets/js/utils/imageclouds.js

@@ -1,8 +1,10 @@
 
+import { map, lerp, getMousePosViewport, calcWinsize, getRandomNumber } from 'js/utils/utils';
+
 export default function() {
 
 
-  console.log('imageclouds' );
+  //console.log('imageclouds' );
   const imageclouds = document.querySelectorAll('.imagecloud');
 
 
@@ -21,5 +23,52 @@ export default function() {
 
     }
   });
+
+
+
+
+  // Trainings: img block Animation:
+
+  const images = document.querySelectorAll('.img-container');
+  if (images) {
+
+
+      // Calculate the viewport size
+      let winsize = calcWinsize();
+      window.addEventListener('resize', () => winsize = calcWinsize());
+
+      // Track the mouse position
+      let mousepos = {x: winsize.width/2, y: winsize.height/2};
+      window.addEventListener('mousemove', ev => mousepos = getMousePosViewport(ev));
+
+
+
+      function move(obj) {
+        // amount to move in each axis
+        let translationVals = {tx: 0, ty: 0};
+        // get random start and end movement boundaries
+        const xstart = getRandomNumber(20,50);
+        const ystart = getRandomNumber(20,50);
+
+        // infinite loop
+        const render = () => {
+            // Calculate the amount to move.
+            // Using linear interpolation to smooth things out.
+            // Translation values will be in the range of [-start, start] for a cursor movement from 0 to the window's width/height
+            translationVals.tx = lerp(translationVals.tx, map(mousepos.x, 0, winsize.width, -xstart, xstart), 0.07);
+            translationVals.ty = lerp(translationVals.ty, map(mousepos.y, 0, winsize.height, -ystart, ystart), 0.07);
+
+          // gsap.set(this.DOM.el, {x: translationVals.tx, y: translationVals.ty});
+          obj.style.transform = "translate("+ ( translationVals.tx) + "px,"+  (translationVals.ty) + "px)";
+          //console.log( getMousePosViewport.x)
+            requestAnimationFrame(render);
+        }
+        requestAnimationFrame(render);
+      }
+
+
+      images.forEach(item => move(item));
+
+  }
 
 }

site/assets/js/views/home.js

@@ -5,13 +5,18 @@ export default function() {
     document.getElementById('scrollDownButton').addEventListener('click', function(e) {
 
       console.log('scrollDownButton clicked');
-      
+
       e.preventDefault();
       e.stopPropagation();
       document.getElementById('start').scrollIntoView({ behavior: 'smooth' });
     });
   }
 
+  /* autoplay ios fix */
+document.querySelectorAll('video[autoplay]').forEach( video => {
+  video.play();
+});
+
 
 
 }

site/assets/js/views/on-every-page.js

@@ -13,32 +13,20 @@ import imageclouds from "js/utils/imageclouds";
 
 // lazy sizes for image loading
 import 'lazysizes';
-
 
-import { Popover } from 'bootstrap';
-
-//import Popover from 'bootstrap/js/dist/popover';
+//import { Popover } from 'bootstrap';
 
 
-import { map, lerp, getMousePosViewport, calcWinsize, getRandomNumber } from 'js/utils/utils';
-
 export default function() {
 
   ScrollOut({
     /* options */
     once: true,
   });
-/*
-  ScrollOut({
-    targets: ".banner",
-    offset: 200,
-  });
-*/
-
- // var sticky = new Sticky('.sticky');
+
 
 
-  let root = document.documentElement;
+  const root = document.documentElement;
   const colors = [
     "7 71 97", //#E6ECEE", //AC-Blue
     "125 15 75", //#E8D4DF", //AC-Red
@@ -57,18 +45,22 @@ export default function() {
       "230 237 234",         //AC-Green - light
       "246 232 219",         //AC-Yellow - light
           ];
-  let randomColor =  Math.floor(Math.random() * colors.length);
 
-  root.style.setProperty('--primary', 'rgb('+colors[randomColor]+')');
-  root.style.setProperty('--primary-medium', 'rgb('+colors_medium[randomColor]+')');
-  root.style.setProperty('--primary-light', 'rgb('+colors_light[randomColor]+')');
-  //root.style.setProperty('--color', colors[randomColor]);
-  root.style.setProperty('--shadowColor', 'rgba('+colors[randomColor].split(' ').join(',')+', 0.3)');
-  root.style.setProperty('--primary-opaque', 'rgba('+colors[randomColor].split(' ').join(',')+', 0.96)');
-  root.style.setProperty('--primary-opaque-light', 'rgba('+colors_light[randomColor].split(' ').join(',')+', 0.75)');
 
-
-
+  const currentColor = root.style.getPropertyValue('--primary').replace('rgb(', '').replace(')', '');
+  //console.log("currentColor " + root.style.getPropertyValue('--primary').replace('rgb(', '').replace(')', ''));
+  let newRandomColor;
+  do {
+    newRandomColor = Math.floor(Math.random() * colors.length);
+  } while (colors[newRandomColor] === currentColor);
+
+  root.style.setProperty('--primary', 'rgb('+colors[newRandomColor]+')');
+  root.style.setProperty('--primary-medium', 'rgb('+colors_medium[newRandomColor]+')');
+  root.style.setProperty('--primary-light', 'rgb('+colors_light[newRandomColor]+')');
+  root.style.setProperty('--shadowColor', 'rgba('+colors[newRandomColor].split(' ').join(',')+', 0.3)');
+  root.style.setProperty('--primary-opaque', 'rgba('+colors[newRandomColor].split(' ').join(',')+', 0.96)');
+  root.style.setProperty('--primary-opaque-light', 'rgba('+colors_light[newRandomColor].split(' ').join(',')+', 0.75)');
+
 
 
 
@@ -85,22 +77,10 @@ export default function() {
 
 
 
-// still needed?
-  const anmeldeToggler = document.querySelector(".anmelde-toggler");
-if (anmeldeToggler) {
-
-  anmeldeToggler.addEventListener('click', function() {
-    document.querySelector('.box-anmelden .inner').classList.toggle('active');
-  });
-}          
-
-
-/* autoplay ios fix */
-document.querySelectorAll('video[autoplay]').forEach( video => {
-  video.play();
-});
-
-
+
+
+  // still needed?
+/**/
   const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
 
   if (popoverTriggerList) {
@@ -110,49 +90,6 @@ document.querySelectorAll('video[autoplay]').forEach( video => {
 
 
 
-  // Trainings: img block Animation:
-
-  const images = document.querySelectorAll('.img-container');
-  if (images) {
-
-
-      // Calculate the viewport size
-      let winsize = calcWinsize();
-      window.addEventListener('resize', () => winsize = calcWinsize());
-
-      // Track the mouse position
-      let mousepos = {x: winsize.width/2, y: winsize.height/2};
-      window.addEventListener('mousemove', ev => mousepos = getMousePosViewport(ev));
-
-
-
-      function move(obj) {
-        // amount to move in each axis
-        let translationVals = {tx: 0, ty: 0};
-        // get random start and end movement boundaries
-        const xstart = getRandomNumber(20,50);
-        const ystart = getRandomNumber(20,50);
-
-        // infinite loop
-        const render = () => {
-            // Calculate the amount to move.
-            // Using linear interpolation to smooth things out.
-            // Translation values will be in the range of [-start, start] for a cursor movement from 0 to the window's width/height
-            translationVals.tx = lerp(translationVals.tx, map(mousepos.x, 0, winsize.width, -xstart, xstart), 0.07);
-            translationVals.ty = lerp(translationVals.ty, map(mousepos.y, 0, winsize.height, -ystart, ystart), 0.07);
-
-          // gsap.set(this.DOM.el, {x: translationVals.tx, y: translationVals.ty});
-          obj.style.transform = "translate("+ ( translationVals.tx) + "px,"+  (translationVals.ty) + "px)";
-          //console.log( getMousePosViewport.x)
-            requestAnimationFrame(render);
-        }
-        requestAnimationFrame(render);
-      }
-
-
-      images.forEach(item => move(item));
-
-  }
 }
 
 

site/assets/js/views/trainings.js

@@ -1,6 +1,17 @@
 export default function() {
   const filterlist = document.querySelector('.filterlist');
 
+
+  const anmeldeToggler = document.querySelector(".anmelde-toggler");
+  if (anmeldeToggler) {
+
+    anmeldeToggler.addEventListener('click', function() {
+      document.querySelector('.box-anmelden .inner').classList.toggle('active');
+    });
+  }          
+
+
+
   if (filterlist) {
     // helper function
     function containsAll(needles, haystack) {

site/assets/scss/common/_swup.scss

@@ -51,10 +51,13 @@ html.is-changing .transition-fade {
 /* Define a transition duration during page visits */
 
 html.is-changing:not(.swup-native) .transition-fade {
-  transition: 0.25s opacity;
+  transition: 0.25s opacity, 0.25s transform;
   opacity: 1;
+  transform: translateY(0);
+
 }
 /* Define the styles for the unloaded pages */
 html.is-animating:not(.swup-native) .transition-fade {
   opacity: 0;
+  transform: translateY(2rem);
 }

site/assets/scss/components/_animations.scss

@@ -7,9 +7,22 @@
   }
 }
 
-.scrollmove {
-  animation-timeline: scroll(block root );
-  animation-name: moveXProgress;
-  animation-duration: auto;
-  animation-timing-function: ease-out;
+@include media-breakpoint-up(md) {
+  .scrollmove {
+    animation-timeline: scroll(block root );
+    animation-name: moveXProgress;
+    animation-duration: auto;
+    animation-timing-function: ease-out;
+  }
 }
+
+.overflow-x-hidden {
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

site/assets/scss/components/_buttons.scss

@@ -1,4 +1,5 @@
 .btn {
+  --bs-btn-color: var(--primary);
   box-shadow: none !important;
   font-family: "TTFirsNeue-Medium", sans-serif;
   font-size: 1em;
@@ -9,6 +10,8 @@
   font-family: "TTFirsNeue-Light", sans-serif;
   font-size: 1.4rem;
 }
+
+
 /*
 .bg-primary {
   background-color: var(--primary) !important;
@@ -46,6 +49,7 @@
 
 .btn-primary {
     //color: #fff;
+    --bs-btn-color: #fff;
     --bs-btn-bg: var(--primary);
     --bs-btn-border-color: var(--primary);
     --bs-btn-border-width: 2px;

site/assets/scss/layouts/_trainings.scss

@@ -151,7 +151,7 @@
   @include media-breakpoint-down(md) {
 
     .inner {
-
+        background-color: var(--primary);
       //.box-anmelden {
         position: fixed;
         //top: 180px;