@icvdeveloper/common-module 1.0.3 → 1.0.4

package/dist/runtime/components/media/components/CeCreditNotification.vue

@@ -1,99 +1,149 @@
-<template>
-  <transition name="slide-fade">
-    <div v-if="visible" class="flex bg-yellow-lightest shadow text-grey-darker py-6 px-10">
-      <div class="flex-1 text-center mx-auto">
-        <p>
-          Time Remaining <span :class="timeRemainingClass">{{ displayFor }} seconds </span>
-        </p>
-        <p v-text="promptText"></p>
-        <p>
-          <button class="btn btn-secondary" @click="acceptClick" v-text="buttonText"></button>
-        </p>
-      </div>
-    </div>
-  </transition>
-</template>
+<script lang="ts" setup>
+import Pusher from "pusher-js";
+import Echo from "laravel-echo";
+import { toRefs, computed } from "vue";
+import { Conference } from "../../../models/conference";
+import { CeCreditPanelClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  conferenceId: number;
+  classObject?: CeCreditPanelClassObj;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      htmlElement: "",
+      noOverviewElement: "",
+    };
+  },
+});
+
+const { conferenceId } = toRefs(props);
+
+const { classBinding } = useClassBinding();
+
+const pusher = ref<any>(null);
+const channel = ref<any>(null);
+const displayFor = ref(0);
+const promptText = ref<string | null | undefined>("");
+const buttonText = ref<string | null | undefined>("");
+const visible = ref(false);
+const countdownLoopId = ref<any>(null);
+
+// computed
+const timeRemainingClass = computed(() => {
+  if (displayFor.value > 10) {
+    return "font-bold text-green-dark";
+  }
+  return "font-bold text-red";
+});
+
+// methods
+const handleNotification = (_conference: Conference) => {
+  clearInterval(countdownLoopId);
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  visible.value = true;
+  displayFor.value = _conference.ce_credit_config?.display_for || 30;
+  promptText.value = _conference.ce_credit_config?.prompt_text;
+  buttonText.value = _conference.ce_credit_config?.button_text;
+  countdownLoopId.value = setInterval(countdownLoop, 1000);
+};
 
-<script>
-import Echo from 'laravel-echo';
-window.Pusher = require('pusher-js');
+const countdownLoop = () => {
+  if (displayFor.value > 0) {
+    displayFor.value--;
+  } else {
+    closeNotification();
+  }
+};
+
+const acceptClick = () => {
+  closeNotification();
+};
 
-/**
- @todo Extract the wsHost and app ID out so that this can run in multiple environments (local, staging, production) 
- */
- 
+const closeNotification = () => {
+  displayFor.value = 0;
+  visible.value = false;
+  clearInterval(countdownLoopId.value);
+};
+
+// Pusher
+window.Pusher = Pusher;
 window.Echo = new Echo({
-  key: '07Ve4MlR6FmN0Il8Wy',
-  broadcaster: 'pusher',
-  cluster: 'us2',
-  wsHost: 'socket.v3plusportal.com',
+  key: "07Ve4MlR6FmN0Il8Wy",
+  broadcaster: "pusher",
+  cluster: "us2",
+  wsHost: "socket.v3plusportal.com",
   wsPort: 6001,
   wssPort: 6002,
   disableStats: false,
   encrypted: true,
-  enabledTransports: ['ws', 'wss'],
+  enabledTransports: ["ws", "wss"],
 });
 
-export default {
-  data() {
-    return {
-      pusher: null,
-      channel: null,
-      displayFor: 0,
-      promptText: '',
-      buttonText: '',
-      visible: false,
-      countdownLoopId: null,
-    };
-  },
-  computed: {
-    timeRemainingClass() {
-      if (this.displayFor > 10) {
-        return 'font-bold text-green-dark';
-      }
-      return 'font-bold text-red';
-    },
-  },
-  props: {
-    conferenceId: {
-      type: Number,
-      required: true,
-    },
-  },
-  methods: {
-    handleNotification(_conference) {
-      clearInterval(this.countdownLoopId);
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-      this.visible = true;
-      this.displayFor = parseInt(_conference.ce_credit_config.display_for) || 30;
-      this.promptText = _conference.ce_credit_config.prompt_text;
-      this.buttonText = _conference.ce_credit_config.button_text;
-      this.countdownLoopId = setInterval(this.countdownLoop, 1000);
-    },
-    countdownLoop() {
-      if (this.displayFor > 0) {
-        this.displayFor--;
-      } else {
-        this.closeNotification();
-      }
-    },
-    acceptClick() {
-      this.closeNotification();
-    },
-    closeNotification() {
-      this.displayFor = 0;
-      this.visible = false;
-      clearInterval(this.countdownLoopId);
-    },
-  },
-  created() {
-    window.Echo.channel(`ce-notification.${this.conferenceId}`).listen('CeCreditNotification', event => {
-      this.handleNotification(event.conference);
-    });
-  },
-};
+// Lifecycle hooks
+onMounted(() => {
+  window.Echo?.channel(`ce-notification.${conferenceId.value}`).listen(
+    // TODO: "window.Echo is potentially undefined."
+    "CeCreditNotification",
+    (event: any) => {
+      // TODO: determine 'event' type
+      handleNotification(event.conference);
+    }
+  );
+});
 </script>
 
-<style scoped>
+<template>
+  <transition name="slide-fade">
+    <div
+      v-if="visible"
+      :class="
+        classBinding(
+          classObject,
+          'container',
+          'flex bg-yellow-lightest shadow text-grey-darker py-6 px-10'
+        )
+      "
+    >
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'containerInner',
+            'flex-1 text-center mx-auto'
+          )
+        "
+      >
+        <p :class="classBinding(classObject, 'timeRemaining', '')">
+          Time Remaining
+          <span
+            :class="[
+              classBinding(classObject, 'timeInSeconds', ''),
+              timeRemainingClass,
+            ]"
+            >{{ displayFor }} seconds
+          </span>
+        </p>
+        <p
+          :class="classBinding(classObject, 'promptText', '')"
+          v-text="promptText"
+        ></p>
+        <p :class="classBinding(classObject, 'buttonContainer', '')">
+          <button
+            :class="
+              classBinding(classObject, 'acceptButton', 'btn btn-secondary')
+            "
+            @click="acceptClick"
+            v-text="buttonText"
+          ></button>
+        </p>
+      </div>
+    </div>
+  </transition>
+</template>
 
-</style>
+<style lang="scss" scoped></style>

package/dist/runtime/components/media/components/DocumentsPanel.vue

@@ -1,36 +1,113 @@
+<script lang="ts" setup>
+import { toRefs, computed } from "vue";
+import { Presentation } from "../../../models/conference";
+import { Document } from "../../../models/document";
+import { DocumentsPanelClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  presentation: Presentation;
+  classObject?: DocumentsPanelClassObj;
+};
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      documentList: "",
+      listElement: "",
+      lastElement: "",
+      elementLink: "",
+      elementText: "",
+      elementDescription: "",
+      noDocumentsElement: "",
+      noDocumentsText: "",
+    };
+  },
+});
+
+const { presentation } = toRefs(props);
+const { classBinding } = useClassBinding();
+
+const documentArray = computed((): Array<Document> | null => {
+  return presentation.value.documents ? presentation.value.documents : null;
+});
+</script>
+
 <template>
-  <div v-if="documentArray && documentArray.length > 0" class="py-4 px-4 text-base md:text-md lg:text-lg leading-normal">
-    <ul class="list-reset">
-      <li v-for="(document, index) in documentArray" :key="index" class="py-2" :class="{'border-b-2 contrast-border' : index !== documentArray.length-1}">
-          <!-- fix file image -->
-          <!--<img src="/images/pdf.svg" class="inline-block icon" />-->
-          <a :href="document.url" class="no-underline font-semibold text-sm md:text-base" target="_blank">
-            <p class="leading-tight mb-0">
-              {{document.name}}
-            </p>
-          </a>
-          <p v-if="document.description" class="mt-2 mb-6">{{document.description}}</p>
+  <div
+    v-if="documentArray && documentArray.length > 0"
+    :class="
+      classBinding(
+        classObject,
+        'container',
+        'py-4 px-4 text-base md:text-md lg:text-lg leading-normal'
+      )
+    "
+  >
+    <ul :class="classBinding(classObject, 'documentList', 'list-reset')">
+      <li
+        v-for="(document, index) in documentArray"
+        :key="index"
+        :class="[
+          index == documentArray.length - 1
+            ? classBinding(classObject, 'lastElement', 'py-2')
+            : classBinding(
+                classObject,
+                'listElement',
+                'py-2 border-b-2 contrast-border'
+              ),
+        ]"
+      >
+        <!-- fix file image -->
+        <!--<img src="/images/pdf.svg" class="inline-block icon" />-->
+        <a
+          :href="document.url"
+          :class="
+            classBinding(
+              classObject,
+              'elementLink',
+              'no-underline font-semibold text-sm md:text-base'
+            )
+          "
+          target="_blank"
+        >
+          <p
+            :class="
+              classBinding(classObject, 'elementText', 'leading-tight mb-0')
+            "
+          >
+            {{ document.name }}
+          </p>
+        </a>
+        <p
+          v-if="document.description"
+          :class="classBinding(classObject, 'elementDescription', 'mt-2 mb-6')"
+        >
+          {{ document.description }}
+        </p>
       </li>
     </ul>
   </div>
-  <div v-else class="text-grey-800 px-2 py-4">
-      <p class="text-base leading-normal font-light">There are no documents associated with this presentation.</p>
+  <div
+    v-else
+    :class="
+      classBinding(classObject, 'noDocumentsElement', 'text-grey-800 px-2 py-4')
+    "
+  >
+    <p
+      :class="
+        classBinding(
+          classObject,
+          'noDocumentsText',
+          'text-base leading-normal font-light'
+        )
+      "
+    >
+      There are no documents associated with this presentation.
+    </p>
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  },
-  computed: {
-    documentArray() {
-      return this.$parent.currentPresentation.documents;
-    }
-  }
-};
-</script>
-
 <style scoped>
 .document-grid {
   display: grid;
@@ -49,4 +126,4 @@ export default {
 .icon {
   width: 30px;
 }
-</style>
+</style>

package/dist/runtime/components/media/components/SponsorsPanel.vue

@@ -1,76 +1,200 @@
+<script lang="ts" setup>
+import { toRefs } from "vue";
+import { Presentation, Sponsor } from "../../../models/conference";
+import { SponsorsPanelClassObj } from "../../../@types/components";
+import { useClassBinding } from "../../../composables/useClassBinding";
+
+type Props = {
+  //   sponsorType: string;
+  presentation: Presentation;
+  classObject?: SponsorsPanelClassObj;
+};
+const props = withDefaults(defineProps<Props>(), {
+  classObject: () => {
+    return {
+      container: "",
+      sessionSponsorsContainer: "",
+      sessionSponsorsHeader: "",
+      sessionSponsorsInner: "",
+      sessionSponsor: "",
+      sponsorLink: "",
+      sponsorImage: "",
+      trackSponsorsContainer: "",
+      trackSponsorsHeader: "",
+      trackSponsorsInner: "",
+      trackSponsor: "",
+      trackLink: "",
+      trackImage: "",
+      noSponsorsElement: "",
+      noSponsorsText: "",
+    };
+  },
+});
+
+const { presentation } = toRefs(props);
+const { classBinding } = useClassBinding();
+
+const sponsorsArray = ref<Array<Sponsor> | undefined>(
+  presentation.value.sponsors
+);
+// TODO: presentation.tracks too likely to be undefined to reliably set on mount
+const trackSponsorsArray = ref<Array<Sponsor> | undefined>([]);
+
+watch(presentation, (_newPresentation: Presentation) => {
+  if (_newPresentation.sponsors) {
+    sponsorsArray.value = _newPresentation.sponsors;
+  }
+  if (_newPresentation.tracks) {
+    trackSponsorsArray.value = _newPresentation.tracks[0]?.sponsors;
+  }
+});
+</script>
+
 <template>
-    <div>
-        <div v-if="sponsorsArray.length > 0" class="text-grey-800 px-4 py-4" :class="trackSponsorsArray.length > 0 ? 'border-b border-light-grey' : ''">
-            <div class="mb-4">
-                <!-- Session Sponsors -->
-                <h3 class="primary-link text-lg text-center mb-3">Session Sponsors</h3>
-                <div class="flex flex-row md:flex-col flex-wrap">
-                    <div v-for="(sponsor, index) in sponsorsArray" :key="index" class="flex-1 mx-4 my-2 md:mx-0 self-center">
-                        <a :href="sponsor.website" target="_blank" class="block mx-auto">
-                            <img :src="sponsor.photo" class="block mx-auto" />
-                        </a>
-                    </div>
-                </div>
-            </div>
+  <div :class="classBinding(classObject, 'container', '')">
+    <div
+      v-if="sponsorsArray != undefined && sponsorsArray.length > 0"
+      :class="[
+        classBinding(
+          classObject,
+          'sessionSponsorsContainer',
+          'text-grey-800 px-4 py-4 mb-4'
+        ),
+        trackSponsorsArray != undefined && trackSponsorsArray.length > 0
+          ? 'border-b border-light-grey'
+          : '',
+      ]"
+    >
+      <!-- Session Sponsors -->
+      <h3
+        :class="
+          classBinding(
+            classObject,
+            'sessionSponsorsHeader',
+            'primary-link text-lg text-center mb-3'
+          )
+        "
+      >
+        Session Sponsors
+      </h3>
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'sessionSponsorsInner',
+            'flex flex-row md:flex-col flex-wrap'
+          )
+        "
+      >
+        <div
+          v-for="(sponsor, index) in sponsorsArray"
+          :key="index"
+          :class="
+            classBinding(
+              classObject,
+              'sessionSponsor',
+              'flex-1 mx-4 my-2 md:mx-0 self-center'
+            )
+          "
+        >
+          <a
+            :href="sponsor.website"
+            target="_blank"
+            :class="classBinding(classObject, 'sponsorLink', 'block mx-auto')"
+          >
+            <img
+              :src="sponsor.photo"
+              :class="
+                classBinding(classObject, 'sponsorImage', 'block mx-auto')
+              "
+            />
+          </a>
         </div>
-        <div v-if="trackSponsorsArray.length > 0" class="text-grey-800 px-4 py-4">
-            <div class="mb-4">
-                <!-- Session Sponsors -->
-                <h3 class="primary-link text-lg text-center mb-3">Track Sponsors</h3>
-                <div class="flex flex-row md:flex-col flex-wrap">
-                    <div v-for="(sponsor, index) in trackSponsorsArray" :key="index" class="flex-1 mx-4 my-2 md:mx-0 self-center">
-                        <a :href="sponsor.website" target="_blank" class="block mx-auto">
-                            <img :src="sponsor.photo" class="block mx-auto" />
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>        
-        <div v-if="!sponsorsArray.length && !trackSponsorsArray.length" class="text-grey-800 px-2 py-4">
-            <p class="text-base leading-normal font-light">There are no sponsors associated with this presentation.</p>
+      </div>
+    </div>
+    <div
+      v-if="trackSponsorsArray != undefined && trackSponsorsArray.length > 0"
+      :class="
+        classBinding(
+          classObject,
+          'trackSponsorsContainer',
+          'text-grey-800 px-4 py-4 mb-4'
+        )
+      "
+    >
+      <!-- Session Sponsors -->
+      <h3
+        :class="
+          classBinding(
+            classObject,
+            'trackSponsorsHeader',
+            'primary-link text-lg text-center mb-3'
+          )
+        "
+      >
+        Track Sponsors
+      </h3>
+      <div
+        :class="
+          classBinding(
+            classObject,
+            'trackSponsorsInner',
+            'flex flex-row md:flex-col flex-wrap'
+          )
+        "
+      >
+        <div
+          v-for="(sponsor, index) in trackSponsorsArray"
+          :key="index"
+          :class="
+            classBinding(
+              classObject,
+              'trackSponsor',
+              'flex-1 mx-4 my-2 md:mx-0 self-center'
+            )
+          "
+        >
+          <a
+            :href="sponsor.website"
+            target="_blank"
+            :class="classBinding(classObject, 'trackLink', 'block mx-auto')"
+          >
+            <img
+              :src="sponsor.photo"
+              :class="classBinding(classObject, 'trackImage', 'block mx-auto')"
+            />
+          </a>
         </div>
+      </div>
+    </div>
+    <div
+      v-if="
+        (sponsorsArray == undefined && trackSponsorsArray == undefined) ||
+        (!sponsorsArray?.length && !trackSponsorsArray?.length)
+      "
+      :class="
+        classBinding(
+          classObject,
+          'noSponsorsElement',
+          'text-grey-800 px-2 py-4'
+        )
+      "
+    >
+      <p
+        :class="
+          classBinding(
+            classObject,
+            'noSponsorsText',
+            'text-base leading-normal font-light'
+          )
+        "
+      >
+        There are no sponsors associated with this presentation.
+      </p>
     </div>
+  </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            sponsorsArray: [],
-            trackSponsorsArray: []
-        };
-    },
-    props: {
-        sponsorType: {
-            type: String
-        },
-        currentPresentation: {
-          type: Object,
-          default: () => {
-            return {};
-          }
-        },
-    },
-    computed: {
-    },
-    methods: {
-    },
-    watch: {
-        currentPresentation: {
-            immediate: true,
-            handler (currentPres) {
-                if(currentPres.sponsors) {
-                    this.sponsorsArray = currentPres.sponsors;
-                }
-                if(currentPres.tracks) {
-                    this.trackSponsorsArray = currentPres.tracks[0].sponsors;
-                }
-            }
-        }
-    }
-}
-</script>
-
 <style scoped>
 .sponsor-grid {
   display: grid;
@@ -82,4 +206,4 @@ export default {
   align-self: center;
   justify-self: center;
 }
-</style>
+</style>

package/dist/runtime/composables/usePusher.d.ts

@@ -0,0 +1,15 @@
+import Pusher from "pusher-js";
+import Echo from "laravel-echo";
+declare global {
+    interface Window {
+        Echo?: Echo;
+        Pusher: typeof Pusher;
+    }
+}
+export type usePusherMethods = {
+    /**
+     * Join the Pusher presence channel to be detected as online
+     */
+    joinPresenceChannel(): void;
+};
+export declare const usePusher: () => usePusherMethods;