@lilaquadrat/design-core 0.1.0

package/src/plugins/events.ts

@@ -0,0 +1,156 @@
+import type GenericEvents from '../interfaces/GenericEvents.interface';
+import type EventDeclaration from '../interfaces/EventDeclaration.interface';
+import { auth } from './auth';
+import useUserStore from '../stores/user.store';
+import useCartStore from '../stores/cart.store';
+import { useTraceable } from './traceable';
+import StudioSDK from '@lilaquadrat/sdk';
+import useMainStore from '../stores/main.store';
+import logger from '../mixins/logger';
+import type { Ref } from 'vue';
+
+const eventDeclarations: EventDeclaration[] = [
+  {
+    id         : 'login',
+    name       : 'Anmelden',
+    description: 'löst den Login für Benutzer aus',
+  },
+  {
+    id         : 'logout',
+    name       : 'Abmelden',
+    description: 'löst den Logout für Benutzer aus',
+  },
+  {
+    id         : 'register',
+    name       : 'Registrieren',
+    description: 'erstellt ein neues Benutzerkonto',
+  },
+  {
+    id             : 'resendConfirmationMail',
+    name           : 'Bestätigungscode erneut senden',
+    description    : 'Eingeloggte Nutzer',
+    confirmRequired: true,
+    operation      : true,
+    feedback       : {
+      resolved: 'Bestätigungscode wurde versendet',
+      rejected: 'Bestätigungscode konnte nicht gesendet werden',
+      pending : 'Bestätigungscode wird versendet'
+    }
+  },
+  {
+    id         : 'refresh_token',
+    name       : 'Anmeldung aktualisieren',
+    description: 'aktualisiert das Authentifizierungstoken für den Benutzer',
+  },
+  {
+    id            : 'addToCart',
+    name          : 'In den Warenkorb legen',
+    description   : 'fügt das angegebene Produkt dem Warenkorb hinzu',
+    additionalData: {
+      name       : 'shopifyid',
+      description: 'die Produkt-ID'
+    }
+  },
+  {
+    id         : 'scrollToNextModule',
+    name       : 'Scroll zum nächstes Module',
+    description: 'Scrollt zum nächsten Module',
+  }
+];
+const events: GenericEvents = {
+  login: () => {
+
+    const userStore = useUserStore();
+
+    auth.triggerLogin(userStore.customer?._id, userStore.emailConfirmationCode);
+
+  },
+  logout: () => {
+
+    auth.triggerLogout();
+
+  },
+  register: () => {
+
+    const userStore = useUserStore();
+
+    auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
+
+  },
+  addToCart: (product?: string) => {
+
+    console.log('add to cart', product);
+
+    if (!product) {
+      console.warn('ADD_TO_CART_FAILED_PRODUCT_ID_MISSING');
+      return;
+    }
+
+    const cartStore = useCartStore();
+
+    cartStore.addProduct(product as string);
+
+  },
+  refresh_token: () => {
+
+    auth.triggerLogin()
+
+  },
+  scrollToNextModule: (additionalData: string | undefined, mouseEvent: MouseEvent) => {
+
+    const target = mouseEvent.target as HTMLElement;
+    const parentModule = target?.closest('.lila-module');
+    const nextSibling = parentModule?.nextElementSibling;
+
+    console.log('scroll to next module');
+
+    if (nextSibling) {
+
+      nextSibling.scrollIntoView({
+        behavior: 'smooth',
+        block   : 'center'
+      });
+
+    }
+
+  },
+  resendConfirmationMail: async (additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) => {
+
+    const { apiConfig } = useMainStore();
+    const { traceable } = useTraceable();
+    const sdk = new StudioSDK(apiConfig)
+
+    return traceable(sdk.members.me.resendConfirmationMail(), traceId);
+
+  }
+}
+
+/**
+ * triggers a predefined event
+ */
+function triggerEvent (type: keyof typeof events | string, additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) {
+
+  const event = events[type as keyof typeof events];
+
+  if (!event) {
+
+    console.error('EVENT_MISSING', type, event);
+    throw new Error('EVENT_MISSING');
+
+  }
+
+  return event(additionalData, mouseEvent, traceId);
+
+}
+
+const useEvents = () => ({ triggerEvent, eventDeclarations, events })
+const plugin = {
+  install: () => {
+    logger.plugins('events installed');
+  },
+};
+
+export default plugin;
+export {
+  useEvents
+}

package/src/plugins/filters.ts

@@ -0,0 +1,43 @@
+import useDate from '../mixins/date';
+import logger from '../mixins/logger';
+import type { App } from 'vue';
+
+const HelpersPlugin = {
+
+  leadingZero (value: string | number, minLength: number) {
+    return value.toString().padStart(minLength, '0');
+  },
+
+  getFilename (contentType: 'public' | 'members', path?: string) {
+
+    const contentIdArray = [];
+
+    if(!path || path === '/') return 'home';
+
+    if(contentType === 'members' && path !== '/m' && !path.startsWith('/m/')) contentIdArray.push('m');
+
+    contentIdArray.push(...path.split('/'));
+
+    return contentIdArray.filter((single) => single.length).join('/');
+  
+  },
+
+  date (date: string | Date, format?: string) {
+
+    return useDate(date).locale('de').format(format || 'DD.MM.YYYY HH:mm');
+
+  }
+
+}
+const plugin = {
+  install: (vue: App): void => {
+
+    vue.config.globalProperties.$helpers = HelpersPlugin;
+    logger.plugins('helpers installed')
+  },
+};
+
+export default plugin;
+export {
+  HelpersPlugin
+};

package/src/plugins/inview.ts

@@ -0,0 +1,351 @@
+import { computed, watch } from 'vue';
+import { ref } from 'vue';
+import { type Ref } from 'vue';
+
+class Inview {
+
+  timeout!: NodeJS.Timeout | undefined;
+
+  lastScrollingAdjustment = 0;
+
+  debounceTime: number = 50;
+
+  isTop = ref<boolean>(false);
+
+  scrolledEvent: Event;
+
+  scrolled = ref<number>(0);
+
+  moduleAdded = ref<number>(0);
+
+  scrollDirection = ref<'up' | 'down'>();
+
+  parentElement = ref<HTMLElement>();
+
+  lastScrollY = 0;
+  lastTimestamp = 0;
+  scrollVelocity = 0;
+
+  /**
+  * if true we fire an inital scroll event to indicate that scrolling has started without waiting for the debounce
+  */
+  triggerStart = ref<boolean>(true);
+
+  safeWindow = computed(() => {
+
+    if (typeof window === 'undefined') return null;
+    if (this.parentElement.value) return this.parentElement.value;
+    return window;
+
+  });
+
+  scrollY () {
+
+    if (this.safeWindow.value instanceof Window) {
+
+      return this.safeWindow.value.scrollY;
+
+    }
+
+    if (this.parentElement.value) {
+
+      return this.parentElement.value.scrollTop;
+    }
+
+    return 0
+
+  }
+
+  height () {
+
+    if (this.safeWindow.value instanceof Window) {
+
+      return this.safeWindow.value.outerHeight;
+
+    }
+
+    if (this.parentElement.value) {
+
+      return this.parentElement.value.offsetHeight;
+    }
+
+    return 0
+    
+  }
+
+  constructor () {
+
+    this.scrolledEvent = new Event('scrolled');
+    this.checkIsTop();
+
+    if (this.safeWindow.value) {
+
+      this.safeWindow.value?.addEventListener('scroll', () => {
+
+        this.debounce();
+
+      });
+
+    }
+
+  }
+
+  setParentElement (element: HTMLElement) {
+
+    this.parentElement.value = element;
+    this.addScrollListener(element);
+
+  }
+
+  addScrollListener (element: Element) {
+
+    element.addEventListener('scroll', () => {
+
+      const currentTimestamp = performance.now();
+      const deltaY = this.scrollY() - this.lastScrollY;
+      const deltaTime = currentTimestamp - this.lastTimestamp;
+  
+      // Calculate velocity (pixels per millisecond)
+      this.scrollVelocity = Math.abs(deltaY / deltaTime);
+  
+      this.lastScrollY = this.scrollY();
+      this.lastTimestamp = currentTimestamp;
+  
+      // console.log(`Scroll Velocity: ${this.scrollVelocity.toFixed(2)} pixels/ms`);
+
+      this.debounce();
+
+    });
+
+  }
+
+  trigger (isStart?: boolean) {
+
+    if (!this.safeWindow.value) return;
+
+    this.checkIsTop();
+    this.scrollDirection.value = this.scrolled.value > this.scrollY()
+      ? 'down'
+      : 'up'
+    this.scrolled.value = this.scrollY();
+
+    this.safeWindow.value?.dispatchEvent(this.scrolledEvent);
+    if (!isStart) this.triggerStart.value = true;
+
+  }
+
+  checkIsTop () {
+
+    if (!this.safeWindow.value) return;
+
+    this.isTop.value = this.scrollY() <= 0
+
+  }
+
+  debounce () {
+
+    /**
+     * indicates that the scrolling has begun and fire an inital scrolling event without waiting for the debounce
+     */
+    if (this.triggerStart.value) {
+
+      this.triggerStart.value = false;
+      this.trigger(true);
+
+    }
+
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+
+      this.trigger();
+
+    }, this.debounceTime);
+
+  }
+
+  check (component: HTMLElement, state: Ref<string[]>, options?: { align?: boolean }) {
+    const element = component;
+    const newState: string[] = [];
+
+    if (typeof element?.getBoundingClientRect !== 'function') return;
+    if (!this.safeWindow.value) return;
+
+    const viewportHeight = this.height();
+    const height = viewportHeight / 2;
+    const rect = element.getBoundingClientRect();
+    let top = rect.top - height + 10;
+    let bottom = rect.bottom - height + 10;
+    let visibleHeight = 0;
+    let marginToTop = 0;
+
+    if (this.parentElement.value) {
+
+      const parentRect = this.parentElement.value.getBoundingClientRect();
+      // Adjust top and bottom based on parent element's top and bottom
+      const parentTop = parentRect.top;
+      const parentBottom = parentRect.bottom;
+
+      top = rect.top - parentTop - height + 10;
+      bottom = rect.bottom - parentTop - height + 10;
+
+      marginToTop = Math.abs(rect.top - parentTop);
+
+      // Adjust visibleTop and visibleBottom for parent element
+      const visibleTop = Math.max(parentTop, rect.top);
+      const visibleBottom = Math.min(parentBottom, rect.bottom);
+
+      visibleHeight = Math.max(0, visibleBottom - visibleTop);
+
+    } else {
+
+      // Original calculations if no parent element is provided
+      const visibleTop = Math.max(0, rect.top);
+      const visibleBottom = Math.min(rect.bottom, viewportHeight);
+
+      marginToTop = Math.abs(rect.top);
+
+      visibleHeight = Math.max(0, visibleBottom - visibleTop);
+
+    }
+
+    if (top > 0) {
+      newState.push('inview-after');
+    }
+
+    if (top <= 0 && bottom >= 0) {
+      newState.push('inview-current');
+    }
+
+    if (bottom < 0) {
+      newState.push('inview-before');
+    }
+
+    // Check if more than 30% of the element is visible
+    if (visibleHeight / rect.height >= 0.3) {
+      newState.push('inview-visible');
+    }
+
+    if (newState.includes('inview-current') && options?.align) {
+
+      if(!this.lastScrollingAdjustment || Date.now() - this.lastScrollingAdjustment > 1500) {
+
+        requestAnimationFrame(() => this.adjustScrolling(element, marginToTop));
+
+      }
+
+    }
+
+    state.value.length = 0;
+    state.value.push(...newState);
+  }
+
+  checkPreload (component: HTMLElement, state: Ref<boolean>) {
+
+    const preloadRange = window?.outerHeight * 2;
+    const rect = component.getBoundingClientRect();
+
+    if (rect.bottom > -preloadRange && rect.top < preloadRange) {
+
+      state.value = true;
+
+    }
+
+  }
+
+  adjustScrolling (component: HTMLElement, top: number) {
+
+    const offset = this.height() / 10;
+
+    if (top < offset && top > (offset * -1)) {
+
+      this.lastScrollingAdjustment = Date.now();
+
+      component.scrollIntoView({
+        behavior: 'smooth',
+      });
+
+    }
+
+  }
+
+  moduleRendered () {
+
+    this.moduleAdded.value++;
+
+  }
+
+}
+
+const inview = new Inview();
+
+/**
+ * the preload option is used to check if the element is in range of two times of the viewport and changes the preload value accordingly
+ *
+ * without the preload options the inviewState array holds the following values
+ ** inview-before - the element is before the viewport
+ ** inview-current - the element is centered in the viewport
+ ** inview-after - the element is after the viewport
+ ** inview-visible - more than 30% of the element are visible in the current viewport, regardless if it is centered or nor
+ */
+
+export function useInview (element?: Ref<HTMLElement | undefined>, options?: { align?: boolean, preload?: boolean }) {
+
+  const state = ref<string[]>([]);
+  const preload = ref<boolean>(false);
+
+  if (element) {
+
+    watch(element, () => {
+
+      if (element.value) {
+
+        inview.moduleRendered();
+
+        if (options?.preload) {
+
+          inview.checkPreload(element.value, preload);
+
+          const unwatchPreload = watch(inview.scrolled, () => {
+
+            if (!element.value) return;
+
+            inview.checkPreload(element.value as HTMLElement, preload);
+
+            //unwatch when the preload value is true
+            if (preload.value) unwatchPreload();
+
+          })
+
+        } else {
+
+          inview.check(element.value, state, options);
+
+          watch(inview.scrolled, () => {
+
+            inview.check(element.value as HTMLElement, state, options)
+
+          })
+
+          watch(inview.moduleAdded, () => {
+
+            requestAnimationFrame(() => {
+
+              inview.check(element.value as HTMLElement, state, options);
+
+            })
+
+          })
+
+        }
+
+      }
+
+    })
+
+  }
+
+  return { inviewState: state, scrolled: inview.scrolled, scrollDirection: inview.scrollDirection, preload };
+
+}
+
+export default inview;

package/src/plugins/replacer.ts

@@ -0,0 +1,18 @@
+import logger from '../mixins/logger';
+import replaceVariables from '../mixins/replaceVariables';
+import useContentStore from '../stores/content.store';
+import useUserStore from '../stores/user.store';
+import type { App } from 'vue';
+
+const plugin = {
+  install: (vue: App): void => {
+
+    const contentStore = useContentStore();
+    const userStore = useUserStore();
+
+    vue.config.globalProperties.$replacer = (content: string) => replaceVariables(content, {...contentStore.context, recipient: contentStore.recipient, list: contentStore.list, user: userStore.userData });
+    logger.plugins('replacer installed')
+  },
+};
+
+export default plugin;

package/src/plugins/resize.ts

@@ -0,0 +1,128 @@
+import logger from '../mixins/logger';
+import { ref, computed } from 'vue';
+
+class Resize {
+
+  timeout: any;
+
+  debounceTime: number = 50;
+
+  resizedEvent: Event;
+
+  mediaEvent: Event;
+
+  media = ref<string>('mobile');
+
+  resized = ref<number>(Date.now());
+
+  realHeight = ref<number>(0);
+
+  /**
+  * if true we fire an inital resized event to indicate that resizing has started without waiting for the debounce
+  */
+  triggerStart = ref<boolean>(true); 
+
+  safeWindow = computed(() => {
+
+    if(typeof window === 'undefined') return null;
+    return window;
+
+  });
+
+  constructor () {
+
+    this.resizedEvent = new Event('resized');
+    this.mediaEvent = new Event('media');
+    this.realHeight.value = this.safeWindow.value?.innerHeight || 0;
+
+    this.getMediaQuery();
+
+    this.safeWindow.value?.addEventListener('resize', () => this.debounce());
+
+  }
+
+  trigger (isStart?: boolean) {
+
+    this.getMediaQuery();
+
+    if(this.safeWindow.value) {
+
+      this.realHeight.value = this.safeWindow.value?.innerHeight;
+    }
+
+    this.resized.value = Date.now();
+    this.safeWindow.value?.dispatchEvent(this.resizedEvent);
+
+    if(!isStart) this.triggerStart.value = true;
+
+  }
+
+  getMediaQuery (): void {
+
+    if(typeof document === 'undefined') return;
+    
+    const element = document.getElementById('mediadetection');
+    
+    if (!element) return;
+
+    const child = Array.from(element.children).find(child => this.safeWindow.value?.getComputedStyle(child).display === 'block');
+
+    if (child) {
+      const childClass = child.getAttribute('class') as string;
+
+      if (this.media.value !== childClass) {
+
+        this.media.value = childClass;
+        this.safeWindow.value?.dispatchEvent(this.mediaEvent);
+
+      } else {
+
+        this.media.value = childClass;
+        
+      }
+    }
+  }
+
+  debounce () {
+
+    /**
+     * indicates that the scrolling has begun and fire an inital scrolling event without waiting for the debounce
+     */
+    if(this.triggerStart.value) {
+
+      this.triggerStart.value = false;
+      this.trigger(true);
+    
+    } 
+
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+
+      this.trigger();
+
+    }, this.debounceTime);
+
+  }
+
+}
+
+const resize = new Resize();
+const plugin = {
+  install: (): void => {
+    // this exists only for initialization purposes
+    logger.plugins('resize installed');
+  },
+};
+
+function useResize () {
+
+  return {realHeight: resize.realHeight, media: resize.media, resized: resize.resized, plugin: resize};
+
+}
+
+export default plugin;
+
+export {
+  useResize,
+  resize
+};