@ozdao/prometheus-framework 0.2.104 → 0.2.106

package/src/components/Marquee/Marquee.vue

@@ -0,0 +1,356 @@
+<template>
+  <div
+    v-if="ready"
+    class="vue3-marquee"
+    :class="{ vertical: vertical, horizontal: !vertical }"
+    :style="getCurrentStyle"
+    :key="componentKey"
+    @mouseenter="hoverStarted"
+    @mouseleave="hoverEnded"
+    @mousedown="mouseDown"
+    @mouseup="mouseUp"
+  >
+    <div
+      class="transparent-overlay"
+      ref="marqueeOverlayContainer"
+      :aria-hidden="true"
+      :class="{ vertical: vertical, horizontal: !vertical, overlay: gradient }"
+    />
+
+    <div 
+      class="marquee"
+      ref="marqueeContent">
+      <slot></slot>
+    </div>
+
+    <div 
+      class="marquee" 
+      :aria-hidden="true"
+    >
+      <slot></slot>
+    </div>
+
+    <div
+      v-for="num in cloneAmount"
+      :key="num"
+      :aria-hidden="true"
+      class="marquee cloned"
+    >
+      <slot></slot>
+    </div
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+
+const props = defineProps({
+  vertical: { type: Boolean, default: false },
+  direction: { type: String, default: 'normal' },
+  duration: { type: Number, default: 20 },
+  delay: { type: Number, default: 0 },
+  loop: { type: Number, default: 0 },
+  clone: { type: Boolean, default: false },
+  gradient: { type: Boolean, default: false },
+  gradientColor: { type: Array, default: () => [255, 255, 255] },
+  gradientLength: { type: String },
+  pauseOnHover: { type: Boolean, default: false },
+  pauseOnClick: { type: Boolean, default: false },
+  pause: { type: Boolean, default: false }
+})
+
+const emits = defineEmits(['onComplete', 'onLoopComplete', 'onPause', 'onResume'])
+
+const ready = ref(false)
+
+const componentKey = ref(0)
+const cloneAmount = ref(0)
+const loopCounter = ref(0)
+const loopInterval = ref(null)
+
+const widthMin = ref('100%')
+const widthContainer = ref(0)
+const widthContent = ref(0)
+const heightMin = ref('100%')
+const heightContainer = ref(0)
+const heightContent = ref(0)
+
+const gradientLength = ref('200px')
+
+const verticalAnimationPause = ref(false)
+const marqueeContent = ref(null)
+const marqueeOverlayContainer = ref(null)
+
+const ForcesUpdate = async () => {
+  await checkForClone()
+  componentKey.value++
+}
+
+const checkForClone = async () => {
+  if (props.vertical) {
+    verticalAnimationPause.value = true
+  }
+
+  setInterval(() => {
+    widthMin.value = '0%'
+    heightMin.value = '0%'
+
+    if (marqueeContent.value !== null && marqueeOverlayContainer.value !== null) {
+      if (marqueeContent.value && marqueeOverlayContainer.value) {
+        if (
+          props.vertical &&
+          'clientHeight' in marqueeContent.value &&
+          'clientHeight' in marqueeOverlayContainer.value
+        ) {
+          heightContent.value = marqueeContent.value.clientHeight
+          heightContainer.value = marqueeOverlayContainer.value.clientHeight
+
+          const localCloneAmount = Math.ceil(heightContainer.value / heightContent.value)
+
+          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0
+
+          verticalAnimationPause.value = false
+
+          return cloneAmount.value
+        } else if (
+          !props.vertical &&
+          'clientWidth' in marqueeContent.value &&
+          'clientWidth' in marqueeOverlayContainer.value
+        ) {
+          widthContent.value = marqueeContent.value.clientWidth
+          widthContainer.value = marqueeOverlayContainer.value.clientWidth
+
+          const localCloneAmount = Math.ceil(widthContainer.value / widthContent.value)
+
+          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0
+
+          return cloneAmount.value
+        } else {
+          widthMin.value = '100%'
+          heightMin.value = '100%'
+          return 0
+        }
+      } else {
+        widthMin.value = '100%'
+        heightMin.value = '100%'
+        return 0
+      }
+    } else {
+      widthMin.value = '100%'
+      heightMin.value = '100%'
+      return 0
+    }
+  }, 100)
+}
+
+const hoverStarted = () => { if (props.pauseOnHover) emits('onPause') }
+const hoverEnded = () => { if (props.pauseOnHover) emits('onResume') }
+const mouseDown = () => { if (props.pauseOnClick) emits('onPause') }
+const mouseUp = () => { if (props.pauseOnClick) emits('onResume') }
+
+const getCurrentStyle = computed(() => {
+  return {
+    '--loops': `${props.loop === 0 ? 'infinite' : props.loop}`,
+    '--duration': `${props.duration}s`,
+    '--delay': `${props.delay}s`,
+    '--direction': `${props.direction}`,
+    '--pauseOnHover': `${props.pauseOnHover ? 'paused' : 'running'}`,
+    '--pauseOnClick': `${props.pauseOnClick ? 'paused' : 'running'}`,
+    '--pauseAnimation': `${(props.vertical && verticalAnimationPause.value) || props.pause ? 'paused' : 'running'}`,
+    '--gradient-color': `rgba(${props.gradientColor}, 1), rgba(${props.gradientColor}, 0)`,
+    '--gradient-length': `${gradientLength.value}`,
+    '--min-width': `${widthMin.value}`,
+    '--min-height': `${heightMin.value}`,
+    '--orientation': props.vertical ? 'scrollY' : 'scrollX'
+  }
+})
+
+const setupMarquee = async () => {
+  if (props.vertical) {
+    heightMin.value = '100%'
+    widthMin.value = 'auto'
+  } else {
+    heightMin.value = 'auto'
+    widthMin.value = '100%'
+  }
+
+  if (props.gradient && props.gradientLength) {
+    gradientLength.value = props.gradientLength
+  }
+
+  if (props.clone) {
+    await checkForClone()
+    ForcesUpdate()
+    ready.value = true
+  } else {
+    ready.value = true
+  }
+}
+
+onMounted(async () => {
+  setupMarquee()
+
+  loopInterval.value = setInterval(() => {
+    loopCounter.value++
+
+    if (props.loop !== 0 && loopCounter.value === props.loop) {
+      emits('onComplete')
+      clearInterval(loopInterval.value)
+    }
+
+    emits('onLoopComplete')
+  }, props.duration * 1000)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(loopInterval.value)
+})
+
+watch(widthContent, async () => {
+  if (props.clone) {
+    ForcesUpdate()
+  }
+})
+
+watch(widthContainer, async () => {
+  if (props.clone) {
+    ForcesUpdate()
+  }
+})
+
+watch(
+  () => props.pause,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      if (newVal) {
+        emits('onResume')
+      } else {
+        emits('onPause')
+      }
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+.vue3-marquee {
+  display: flex !important;
+  position: relative;
+
+  .marquee {
+    flex: 0 0 auto;
+    min-width: var(--min-width);
+    min-height: var(--min-height);
+    z-index: 1;
+
+    animation: var(--orientation) var(--duration) linear var(--delay) var(--loops);
+    animation-play-state: var(--pauseAnimation);
+    animation-direction: var(--direction);
+  }
+
+  .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    &:before {
+      left: 0;
+      top: 0;
+    }
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      z-index: 2;
+    }
+  }
+
+  .transparent-overlay {
+    position: absolute;
+    width: 100.5%;
+    height: 100.5%;
+  }
+
+
+  &.horizontal {
+    overflow-x: hidden !important;
+    flex-direction: row !important;
+    width: 100%;
+    height: max-content;
+
+    .marquee {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .overlay::before,.overlay::after {
+      background: linear-gradient(to right, var(--gradient-color));
+      height: 100%;
+      width: var(--gradient-length);
+    }
+
+    .overlay::after {
+      transform: rotateZ(180deg);
+      right: 0;
+      top: 0;
+    }
+  }
+
+  &.vertical {
+    overflow-y: hidden !important;
+    flex-direction: column !important;
+    height: 100%;
+    width: max-content;
+
+    .marquee {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .overlay::before, .overlay::after {
+      background: linear-gradient(to bottom, var(--gradient-color));
+      height: var(--gradient-length);
+      width: 100%;
+    }
+
+    .overlay::after {
+      transform: rotateZ(-180deg);
+      left: 0;
+      bottom: 0;
+    }
+  }
+
+  &:hover {
+    div {
+      animation-play-state: var(--pauseOnHover);
+    }
+  }
+
+  &:active {
+    div {
+      animation-play-state: var(--pauseOnClick);
+    } 
+  }
+}
+
+@keyframes scrollX {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes scrollY {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+</style>

package/src/components/index.js

@@ -38,3 +38,5 @@ export { default as Shader } from './Shader/Shader.vue';
 export { default as Sidebar } from './Sidebar/Sidebar.vue';
 export { default as Slider } from './Slider/Slider.vue';
 export { default as Status } from './Status/Status.vue';
+
+export { default as Marquee } from './Marquee/Marquee.vue';

package/src/main.js

@@ -44,7 +44,8 @@ import {
   Shader,
   Sidebar,
   Slider,
-  Status
+  Status,
+  Marquee
 } from  './components';
 
 export default {

package/src/modules/community/components/sections/JoinUs.vue

@@ -1,121 +1,76 @@
 <template>
-    <div class="pd-extra o-hidden w-100 container container-joinus">
-        <div class="content">
-            <span class="h0 mn-b-big">
-                {{ userCount.toLocaleString() }}
-            </span>
-            <p class="w-m-33r t-center mn-b-small p-big">
-                Together, we're shaping the future of the globals cannabis community.
-            </p>
-            <router-link :to="{name: 'Sign In'}" class="bg-black t-medium t-white button">
-                Join Now
-            </router-link>
-        </div>
+  <div class="pd-extra o-hidden w-100 container container-joinus">
+    <div class="content">
+      <span class="h0 mn-b-big">
+        {{ userCount.toLocaleString() }}
+      </span>
+      <p class="w-m-33r t-center mn-b-small p-big">
+        Together, we're shaping the future of the globals cannabis community.
+      </p>
+      <router-link :to="{ name: 'Sign In' }" class="bg-black t-medium t-white button">
+        Join Now
+      </router-link>
     </div>
+    <FloatingImages 
+        :container="'.container-joinus'"
+        :images="[
+            '/avatars/01.png',
+            '/avatars/02.png',
+            '/avatars/03.png',
+            '/avatars/04.png',
+            '/avatars/05.png',
+            '/avatars/06.png'
+        ]" 
+        :config="{
+            size: '5rem',
+            square: true,
+            minDuration: 5,
+            maxDuration: 15,
+            spawnPoints: [10, 90],
+            animation: {
+              startOpacity: 0.1,
+              midOpacity: 1,
+              endOpacity: 0.0,
+              translateY: '-33vh'
+            },
+            class: 'my-custom-class'
+          }" 
+      
+    />
+  </div>
 </template>
 
-<style lang="scss">
-.container-joinus {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 66%;
-    position: relative;
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: 2;
-    }
-}
-
-.floating-image {
-    position: absolute;
-    bottom: 0;
-    width: 5rem;
-    height: 5rem;
-    opacity: 1;
-    animation: floatUp linear infinite;
-}
-
-@keyframes floatUp {
-    0% {
-        transform: translateY(0);
-        opacity: 0.1; // плавное появление
-    }
-    10% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 1;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(-33vh); // движение вверх на высоту экрана
-        opacity: 0.0
-    }
-}
-
-</style>
-
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted } from 'vue';
 
-const userCount = ref(1230); // начальное значение
-
-const images = ref([
-    '/avatars/01.png',
-    '/avatars/02.png',
-    '/avatars/03.png',
-    '/avatars/04.png',
-    '/avatars/05.png',
-    '/avatars/06.png'
-]);
+import FloatingImages from '@pf/src/modules/landing/components/elements/FloatingImages.vue';
 
+const userCount = ref(1230);
 
 const increaseUserCount = () => {
-    setInterval(() => {
-        userCount.value += Math.floor(Math.random() * 2) + 1; // случайное увеличение от 1 до 5
-    }, 1330); // каждые 0.33 секунды,95
-};
-
-
-const config = {
-    minSize: '6rem',
-    maxSize: '10rem',
-    minDuration: 5,
-    maxDuration: 15,
-    spawnPoints: [10, 90]
+  setInterval(() => {
+    userCount.value += Math.floor(Math.random() * 2) + 1;
+  }, 1330);
 };
 
 onMounted(() => {
-    createFloatingImages();
-    increaseUserCount();
+  increaseUserCount();
 });
+</script>
 
-const createFloatingImages = () => {
-    images.value.forEach((imageSrc, index) => {
-        let imgElement = document.createElement('img');
-        imgElement.src = imageSrc;
-        imgElement.classList.add('floating-image');
-        // imgElement.style.width = `${Math.random() * (parseFloat(config.maxSize) - parseFloat(config.minSize)) + parseFloat(config.minSize)}rem`;
-        
-        let spawnPoint = config.spawnPoints[Math.floor(Math.random() * config.spawnPoints.length)];
-        let deviation = (Math.random() - 0.5) * 2 * 10; // случайное отклонение от -10% до 10%
-        imgElement.style.left = `${spawnPoint + deviation}%`;
-
-        imgElement.style.animationDuration = `${Math.random() * (config.maxDuration - config.minDuration) + config.minDuration}s`;
-
-        document.querySelector('.container').appendChild(imgElement);
+<style lang="scss">
+.container-joinus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 66%;
+  position: relative;
 
-            imgElement.addEventListener("animationiteration", () => {
-                const newSpawnPoint = config.spawnPoints[Math.floor(Math.random() * config.spawnPoints.length)];
-                const newDeviation = (Math.random() - 0.5) * 2 * 10; // новое случайное отклонение от -10% до 10%
-                imgElement.style.left = `${newSpawnPoint + newDeviation}%`;
-            });
-    });
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 2;
+  }
 }
-</script>
+</style>

package/src/modules/landing/components/elements/FloatingImages.vue

@@ -0,0 +1,124 @@
+<template>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
+  container: {
+    type: String,
+    required: true
+  },
+  images: {
+    type: Array,
+    required: true
+  },
+  config: {
+    type: Object,
+    required: true,
+    default: () => ({
+      sizeMin: null,
+      sizeMax: null,
+      size: '5rem',
+      minDuration: 5,
+      maxDuration: 15,
+      spawnPoints: [10, 90],
+      maintainAspectRatio: true,
+      animation: {
+        startOpacity: 0.1,
+        midOpacity: 1,
+        endOpacity: 0.0,
+        translateY: '-33vh'
+      },
+      class: ''
+    })
+  },
+});
+
+const getRandomSize = (sizeMin, sizeMax) => {
+  const units = sizeMin.replace(/[0-9.]/g, '');
+  const min = parseFloat(sizeMin);
+  const max = parseFloat(sizeMax);
+  const randomSize = Math.random() * (max - min) + min;
+  return `${randomSize}${units}`;
+};
+
+const createKeyframes = (animation) => {
+  const styleSheet = document.styleSheets[0];
+  const keyframes = `
+    @keyframes floatUp {
+      0% {
+        transform: translateY(0);
+        opacity: ${animation.startOpacity};
+      }
+      10% {
+        opacity: ${animation.midOpacity};
+      }
+      50% {
+        opacity: ${animation.midOpacity};
+      }
+      90% {
+        opacity: ${animation.midOpacity};
+      }
+      100% {
+        transform: translateY(${animation.translateY});
+        opacity: ${animation.endOpacity};
+      }
+    }
+  `;
+  styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
+};
+
+const createFloatingImages = () => {
+  createKeyframes(props.config.animation);
+  
+  props.images.forEach((imageSrc) => {
+    let imgElement = document.createElement('img');
+    
+    imgElement.src = imageSrc;
+    imgElement.classList.add('floating-image');
+    if (props.config.class) {
+      imgElement.classList.add(props.config.class);
+    }
+    
+    let spawnPoint = props.config.spawnPoints[Math.floor(Math.random() * props.config.spawnPoints.length)];
+    let deviation = (Math.random() - 0.5) * 2 * 10;
+    
+    imgElement.style.left = `${spawnPoint + deviation}%`;
+
+    let width, height;
+
+    if (props.config.sizeMin && props.config.sizeMax) {
+      width = getRandomSize(props.config.sizeMin, props.config.sizeMax);
+    } else {
+      width = props.config.size;
+    }
+
+    if (props.config.square) {
+      height = width;
+    } else {
+      height = 'auto';
+    }
+    
+    imgElement.style.width = width;
+    imgElement.style.height = height;
+    imgElement.style.position = 'absolute';
+    imgElement.style.bottom = '0';
+    imgElement.style.opacity = '1';
+    imgElement.style.animation = `floatUp linear infinite`;
+    imgElement.style.animationDuration = `${Math.random() * (props.config.maxDuration - props.config.minDuration) + props.config.minDuration}s`;
+
+    document.querySelector(props.container).appendChild(imgElement);
+
+    imgElement.addEventListener("animationiteration", () => {
+      const newSpawnPoint = props.config.spawnPoints[Math.floor(Math.random() * props.config.spawnPoints.length)];
+      const newDeviation = (Math.random() - 0.5) * 2 * 10;
+      imgElement.style.left = `${newSpawnPoint + newDeviation}%`;
+    });
+  });
+};
+
+onMounted(() => {
+  createFloatingImages();
+});
+</script>

package/src/modules/landing/landing.client.js

@@ -2,7 +2,10 @@
 import MobileApp from './components/sections/MobileApp.vue';
 import SectionFeatures from './components/sections/SectionFeatures.vue';
 
+import FloatingImages from './components/elements/FloatingImages.vue';
+
 export {
   MobileApp,
+  FloatingImages,
   SectionFeatures
 };