pushing current code up

undp · Nov 20, 2024 · cf31b12 · cf31b12
1 parent 3739eae
commit cf31b12
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 40 deletions.
diff --git a/stories/Components/Forms/SearchExpand/SearchExpand.jsx b/stories/Components/Forms/SearchExpand/SearchExpand.jsx
@@ -2,19 +2,19 @@ import React, { useEffect, useRef } from 'react';
 import './search-expand.scss';
 import img from 'icons/search-black.svg';
 import img_close from 'icons/times.svg';
-import { expandSearch } from '../../../assets/js/expand-search';
+import loader from '../../../assets/js/loader';
 
 export const SearchExpand = () => {
   const expandContainerRef = useRef(null);
 
   useEffect(() => {
-    if (expandContainerRef.current) {
-      expandSearch(jQuery(expandContainerRef.current));
+    if (loader) {
+      loader();
     }
   }, []);
 
   return (
-    <div className="expand-search" ref={expandContainerRef}>
+    <div className="expand-search" data-undpds="data-undpds-expand-search" ref={expandContainerRef}>
       <button className='expand-button'>
         <img src={img} alt="search expand" />
       </button>

diff --git a/...es/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.jsx b/...es/Components/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.jsx
@@ -6,6 +6,7 @@ import {
   navigationMultiLevelEdgeDetection,
   navigationOverFlow,
 } from '../../../../assets/js/navigation';
+import loader from '../../../../assets/js/loader';
 import { Logo } from '../../../../Atom/Logo/Logo';
 import { CtaButton } from '../../../UIcomponents/Buttons/CtaButton/CtaButton';
 import { Menu } from '../../Menu/Menu';
@@ -33,7 +34,7 @@ function CountrySiteHeader({
 }) {
   useEffect(() => {
     getMegaMenu(locale);
-    navigationInitialize(locale);
+    loader(locale);
     navigationOverFlow();
     navigationMultiLevelEdgeDetection();
   }, [locale, args.menu_type, args.menu_extended, args.cta_enabled]);
@@ -55,7 +56,7 @@ function CountrySiteHeader({
   args.overflow = overflow;
 
   return (
-    <header className="country-header country-load-animation">
+    <header className="country-header country-load-animation" data-undpds="data-undpds-navigation">
       <section className="header">
         <div className="grid-container fluid">
           <div className="grid-x grid-margin-x align-content-middle">

diff --git a/...nents/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.jsx b/...nents/Navigationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeaderDropdown.jsx
@@ -6,6 +6,7 @@ import {
   navigationMultiLevelEdgeDetection,
   navigationOverFlow,
 } from '../../../../assets/js/navigation';
+import loader from '../../../../assets/js/loader';
 import { Logo } from '../../../../Atom/Logo/Logo';
 import { CtaButton } from '../../../UIcomponents/Buttons/CtaButton/CtaButton';
 import { Languageswitcher } from '../../../UIcomponents/LanguageSwitcher/LanguageSwitcher';
@@ -32,7 +33,7 @@ function CountrySiteHeader({
 }) {
   useEffect(() => {
     getMegaMenu(locale);
-    navigationInitialize(locale);
+    loader(locale);
     navigationOverFlow();
     navigationMultiLevelEdgeDetection();
   }, [locale, args.menu_extended, args.cta_enabled]);
@@ -55,7 +56,7 @@ function CountrySiteHeader({
   args.overflow = overflow;
 
   return (
-    <header className="country-header country-load-animation">
+    <header className="country-header country-load-animation" data-undpds="data-undpds-navigation">
       <section className="header">
         <div className="grid-container fluid">
           <div className="grid-x grid-margin-x align-content-middle">

diff --git a/stories/Components/Navigationcomponents/Mainnavigation/GlobalHeader/GlobalHeader.jsx b/stories/Components/Navigationcomponents/Mainnavigation/GlobalHeader/GlobalHeader.jsx
@@ -10,8 +10,10 @@ import MegaMenu from '../MegaMenu/MegaMenu';
 import MobileNav from '../MobileNav/MobileNav';
 import './global-header.scss';
 import '../../../../assets/scss/_grid.scss';
+import loader from '../../../../assets/js/loader';
 import '../../../../assets/js/lazyload';
 
+
 function GlobalHeader({
   text,
   languageswitcherData,
@@ -26,11 +28,11 @@ function GlobalHeader({
 }) {
   useEffect(() => {
     getMegaMenu(locale);
-    navigationInitialize(locale);
+    loader(locale);
   }, [locale]);
 
   return (
-    <header className="global-header global-load-animation">
+    <header className="global-header global-load-animation" data-undpds="data-undpds-navigation">
       <section className="header">
         <div className="grid-container fluid">
           <div className="grid-x grid-margin-x align-content-middle">

diff --git a/stories/Components/Navigationcomponents/Mainnavigation/MobileNav/MobileNav.jsx b/stories/Components/Navigationcomponents/Mainnavigation/MobileNav/MobileNav.jsx
@@ -3,8 +3,8 @@ import Iconsback from 'icons/back.svg';
 import IconsGlobe from 'icons/globe.svg';
 import IconsLanguage from 'icons/language.svg';
 import { Icons } from '../../../../Atom/Icons/Icons';
-import { navigationInitialize } from '../../../../assets/js/navigation';
 import { CtaButton } from '../../../UIcomponents/Buttons/CtaButton/CtaButton';
+import loader from '../../../../assets/js/loader';
 import './mobile-nav.scss';
 
 function MobileNav({
@@ -18,11 +18,11 @@ function MobileNav({
   ...args
 }) {
   useEffect(() => {
-    navigationInitialize(locale);
+    loader(locale);
   }, [locale]);
 
   return (
-    <div className="mobile-nav">
+    <div className="mobile-nav" data-undpds="data-undpds-navigation">
       <div className="grid-x">
         <div className="cell mobile-links">
           <ul>

diff --git a/stories/Components/UIcomponents/Cards/ParallaxCard/ParallaxCards.jsx b/stories/Components/UIcomponents/Cards/ParallaxCard/ParallaxCards.jsx
@@ -1,12 +1,11 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import React, { useEffect } from 'react';
 import './parallax-cards.scss';
-import { swiper } from '../../../../assets/js/swiper';
-import { parallaxEffect } from '../../../../assets/js/parallax';
 import Img from '../../../../assets/images/parallax-card.jpg';
 import { Heading } from '../../../../Atom/Typography/Heading/Heading';
 import ParallaxCard from '../../../../Molecules/ParallaxCard/ParallaxCard';
 import '../../../../assets/js/smartresize';
+import loader from '../../../../assets/js/loader';
 
 // RTL Fix for Storybook.
 let rtl = document.dir || undefined;
@@ -15,11 +14,10 @@ if (window.location.href.indexOf('direction=rtl') > -1) {
 }
 function ParallaxCards({ data, alt, title }) {
   useEffect(() => {
-    swiper('.parallax__content');
-    parallaxEffect('.parallax-card', ['.parallax-card__image', '.parallax-card__content'], 'top center', 'bottom+=85 center', 'vertical', 'desktop', 'percent');
+    loader();
   }, []);
   return (
-    <section className="parallax">
+    <section className="parallax" data-undpds="data-undpds-swiper">
       <div className="parallax__heading small-offset-1">
         <Heading type="2" label={title} />
       </div>

diff --git a/stories/Organism/Stats/Stats.jsx b/stories/Organism/Stats/Stats.jsx
@@ -1,19 +1,19 @@
 import React, { useEffect } from 'react';
 import { StatsPanel } from '../../Molecules/Blocks/StatsPanel/StatsPanel';
-import { statsHover } from '../../assets/js/stats';
 import './stats.scss';
 import '../../assets/scss/_grid.scss';
+import loader from '../../assets/js/loader';
 
 export function Stats({
   data,
   imageback,
   ...args
 }) {
   useEffect(() => {
-    statsHover();
+    loader();
   }, []);
   return (
-    <div className="grid-x stats-grid">
+    <div className="grid-x stats-grid" data-undps="data-undpds-stats-hover">
       {data.map((item, index) => (
         <div className={`cell medium-3 delay-${2 + index++}`} key={index} data-viewport="true">
           <StatsPanel number={item.number} imageback={imageback} percent={item.percent} content={item.content} {...args} />

diff --git a/stories/assets/js/loader.js b/stories/assets/js/loader.js
@@ -5,7 +5,11 @@ import { tabs } from './tabs';
 import { accordion } from './accordion';
 import { sidebarNav, sidebarMenu } from './sidebar';
 import { select } from './select';
-
+import { expandSearch } from './expand-search';
+import { navigationInitialize } from './navigation';
+import { statsHover } from './stats';
+import { swiper } from './swiper';
+import { parallaxEffect } from './parallax';
 
 const loader = () => {
     // Select all elements with the attribute data-undpds and convert to an array
@@ -18,27 +22,13 @@ const loader = () => {
         const undpdsValue = $(element).attr('data-undpds');
         // Use switch statement to check the value and call appropriate functions
         switch (undpdsValue) {
-            case 'data-undpds-carousel':
-                carousel();
-                break;
-            case 'data-undpds-tooltip':
-                tooltip();
-                break;
             case 'data-undpds-tab':
                 tabs();
                 console.log('tabs');
                 break;
-            case 'data-undpds-dropdown':
-                dropdown();
-                break;
-            case 'data-undpds-progress-bar':
-                progressBar();
-                break;
             case 'data-undpds-expand-search':
-                expandSearch();      
-                break;
-            case 'data-undpds-multi-select':
-                multiSelect();
+                expandSearch($(element));
+                console.log('expandSearch');      
                 break;
             case 'data-undpds-select':
                 select();
@@ -51,6 +41,7 @@ const loader = () => {
                 break;
             case 'data-undpds-navigation':
                 navigationInitialize();
+                console.log('navigation');
                 break;
             case 'data-undpds-accordion':
                 accordion();
@@ -70,9 +61,37 @@ const loader = () => {
                 break;
             case 'data-undpds-stats-hover':
                 statsHover();
+                console.log('statsHover');
+                break;
+            case 'data-undpds-swiper':
+                swiper('.parallax__content');
+                parallaxEffect('.parallax-card', ['.parallax-cardimage', '.parallax-cardcontent'], 'top center', 'bottom+=85 center', 'vertical', 'desktop', 'percent');
+                console.log('swiper');
+                break;
+            case 'data-undpds-fit-text':
+                fitText('.stats-card.medium', {desktop: 110, mobile: 80});
+                break;
+            case 'data-undpds-swiper-fixed-carousel':
+                swiper('.fixed-carousel', '.fixed-carousel__button-wrap');
+                break;
+            case 'data-undpds-swiper-fluid-carousel':
+                swiper('.fluid-carousel', '.slide-content');
+                break;
+            case 'data-undpds-swiper-image-carousel':
+                swiper('.image-carousel', '.slider-slide');
+                break;
+            case 'data-undpds-parralax-effect-images':
+                parallaxEffect('.parallax-gallery-images', '.column', 'top center', 'bottom+=15% center', 'vertical', 'all');
+                break;
+            case 'data-undpds-expand-to-size-homepage-hero-full':
+                expandToSize('.homepage-hero-full');
+                break;
+            case 'data-undpds-expand-to-size-page-hero-full':
+                expandToSize('.pagehero-fulll');
+                break;
+            case 'data-undpds-swiper-page-hero-cards':
+                swiper('.pagehero-cards-items')
                 break;
-
-                // TODO MORE COMPLEX EXAMPLES
 
             default:
                 console.warn(`No function defined for ${undpdsValue}`);