@utogether/udp-core 1.0.1-beta.1 → 1.0.1-beta.11

package/src/components/udp/count-down.vue

@@ -0,0 +1,536 @@
+<template>
+  <div class="flip-clock">
+    <template v-for="data in timeData" :key="data.label">
+      <span v-show="data.show" :id="data.elementId" class="flip-clock__piece">
+        <div v-if="flipAnimation">
+          <span
+            class="flip-clock__card flip-card"
+            :style="countdownSize ? `font-size:${countdownSize}` : ''"
+          >
+            <b class="flip-card__top">{{ twoDigits(data.current) }}</b>
+            <b class="flip-card__bottom" :data-value="twoDigits(data.current)" />
+            <b class="flip-card__back" :data-value="twoDigits(data.previous)" />
+            <b class="flip-card__back-bottom" :data-value="twoDigits(data.previous)" />
+          </span>
+        </div>
+        <div v-else>
+          <span class="no-animation__card">{{ twoDigits(data.current) }}</span>
+        </div>
+        <span
+          v-if="showLabels"
+          class="flip-clock__slot"
+          :style="labelSize ? `font-size:${labelSize}` : ''"
+          >{{ data.label }}</span
+        >
+      </span>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'SuCountdown'
+};
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  countdown: {
+    type: Boolean,
+    default: false
+  },
+  deadline: {
+    type: String,
+    required: false,
+    default: dayjs().add(5, 'days').format('YYYY-MM-DD HH:mm:ss')
+  },
+  deadlineISO: {
+    type: String,
+    required: false
+  },
+  deadlineDate: {
+    type: Date,
+    required: false
+  },
+  countdownSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+
+  labelSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+  stop: {
+    type: Boolean,
+    required: false
+  },
+  flipAnimation: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showDays: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showHours: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showMinutes: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showSeconds: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showLabels: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  labels: {
+    type: Object,
+    required: false,
+    default: function () {
+      return {
+        days: 'Days',
+        hours: 'Hours',
+        minutes: 'Minutes',
+        seconds: 'Seconds'
+      };
+    }
+  },
+  mainColor: {
+    type: String,
+    default: '#EC685C'
+  },
+  secondFlipColor: {
+    type: String,
+    default: props => props.mainColor
+  },
+  mainFlipBackgroundColor: {
+    type: String,
+    default: '#222222'
+  },
+  secondFlipBackgroundColor: {
+    type: String,
+    default: '#393939'
+  },
+  labelColor: {
+    type: String,
+    default: '#222222'
+  }
+});
+
+const now = ref(Math.trunc(new Date().getTime() / 1000));
+const date = ref<number>(0);
+const interval = ref();
+const diff = ref(0);
+const show = ref(false);
+const timeData = ref([
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.days,
+    elementId: 'flip-card-days-' + Date.now(),
+    show: props.showDays
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.hours,
+    elementId: 'flip-card-hours-' + Date.now(),
+    show: props.showHours
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.minutes,
+    elementId: 'flip-card-minutes-' + Date.now(),
+    show: props.showMinutes
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.seconds,
+    elementId: 'flip-card-seconds-' + Date.now(),
+    show: props.showSeconds
+  }
+]);
+
+const updateAllCards = () => {
+  updateTime(0, days);
+  updateTime(1, hours);
+  updateTime(2, minutes);
+  updateTime(3, seconds);
+};
+
+const twoDigits = value => {
+  if (value != undefined) {
+    if (value.toString().length <= 1) {
+      return '0' + value.toString();
+    }
+    return value.toString();
+  } else {
+    return '00';
+  }
+};
+
+const updateTime = (idx, newValue) => {
+  if (idx >= timeData.value.length || newValue === undefined) {
+    return;
+  }
+
+  // if (window['requestAnimationFrame']) {
+  //     frame = requestAnimationFrame(updateTime.bind(this));
+  // }
+
+  const d = timeData.value[idx];
+  const val = newValue.value < 0 ? 0 : newValue.value;
+  const el = document.querySelector(`#${d.elementId}`);
+
+  if (val !== d.current) {
+    d.previous = d.current;
+    d.current = val;
+
+    if (el) {
+      el.classList.remove('flip');
+      // @ts-ignore
+      void el.offsetWidth;
+      el.classList.add('flip');
+    }
+
+    if (idx === 0) {
+      const els = el!.querySelectorAll('span b');
+      if (els) {
+        //@ts-ignore
+        for (const e of els) {
+          const cls = e.classList[0];
+          if (newValue.value / 1000 >= 1) {
+            if (!cls.includes('-4digits')) {
+              const newCls = cls + '-4digits';
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          } else {
+            if (cls.includes('-4digits')) {
+              const newCls = cls.replace('-4digits', '');
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          }
+        }
+      } else {
+        console.log('....');
+      }
+    }
+  }
+};
+
+const seconds = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value) % 60;
+  }
+  return Math.trunc(now.value) % 60;
+});
+
+const minutes = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60) % 60;
+  }
+  return Math.trunc(now.value / 60) % 60;
+});
+const hours = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60) % 24;
+  }
+  return new Date(now.value * 1000).getHours();
+  // return Math.trunc(now.value / 60 / 60) % 24;
+});
+const days = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60 / 24);
+  }
+  return Math.trunc(now.value / 60 / 60 / 24);
+});
+
+watch(
+  () => props.deadline,
+  newVal => {
+    const endTime = newVal as unknown as String;
+    date.value = Math.trunc(Date.parse(endTime.replace(/-/g, '/')) / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+);
+
+watch(now, () => {
+  if (props.countdown) {
+    diff.value = date.value - now.value;
+    if (diff.value <= 0 || props.stop) {
+      diff.value = 0;
+      updateTime(3, 0);
+    } else {
+      updateAllCards();
+    }
+  } else {
+    updateAllCards();
+  }
+});
+
+watch(diff, newVal => {
+  if (newVal == 0) {
+    // emit('timeElapsed');
+    updateAllCards();
+  }
+});
+
+onMounted(() => {
+  if (diff.value !== 0) {
+    show.value = true;
+  }
+});
+
+onBeforeMount(() => {
+  if (props.countdown) {
+    if (!props.deadline) {
+      throw new Error("Missing props 'deadline'");
+    }
+    const endTime = props.deadline;
+    let epoch = Date.parse(endTime.replace(/-/g, '/'));
+    if (props.deadlineDate != null) {
+      epoch = Date.parse(props.deadlineDate.toDateString());
+    }
+    if (props.deadlineISO) {
+      epoch = Date.parse(props.deadlineISO);
+    }
+    date.value = Math.trunc(epoch / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+  interval.value = setInterval(() => {
+    now.value = Math.trunc(new Date().getTime() / 1000);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  // if (window['cancelAnimationFrame']) {
+  //     cancelAnimationFrame(frame);
+  // }
+  clearInterval(interval.value);
+});
+</script>
+
+<style lang="scss">
+.no-animation__card {
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(mainColor);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+
+  @media (min-width: 1000px) {
+    margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(labelColor);
+}
+
+$halfHeight: 0.72em;
+$borderRadius: 0.15em;
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: $halfHeight;
+  font-size: 2.25rem;
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+    font-size: 1.2rem;
+  }
+
+  .flip-card {
+    font-size: 3rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+  height: $halfHeight;
+}
+
+.flip-card__top-4digits,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits,
+.flip-card__back-4digits::before,
+.flip-card__back-4digits::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.65em;
+  height: $halfHeight;
+}
+
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits {
+  color: v-bind(secondFlipColor);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-top: solid 1px #000;
+  background: v-bind(secondFlipBackgroundColor);
+  border-radius: 0 0 $borderRadius $borderRadius;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.flip-card__back-bottom,
+.flip-card__back-bottom-4digits {
+  z-index: 1;
+}
+
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  display: block;
+  margin-top: -$halfHeight;
+}
+
+.flip-card__back::before,
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__back-4digits::before,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  content: attr(data-value);
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0%;
+  pointer-events: none;
+}
+
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+  position: relative;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+  z-index: 1;
+  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+  animation-fill-mode: both;
+  transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+  transform-origin: center top;
+  animation-fill-mode: both;
+  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+
+@keyframes flipTop {
+  0% {
+    transform: rotateX(0deg);
+    z-index: 2;
+  }
+
+  0%,
+  99% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipBottom {
+  0%,
+  50% {
+    z-index: -1;
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+
+  51% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    z-index: 5;
+  }
+}
+</style>