[POC] Analytics context

packages/nuxt-ripple/components/TestContext.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+  context: any
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context } = useEventContext(props.context)
+</script>
+
+<template>
+  <div class="testing123">
+    {{ context }}
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.testing123 {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid;
+  background-color: rgba(0,0,0,0.05);
+}
+</style>

packages/nuxt-ripple/components/TestContextControl.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+  objKey: any
+  on: any
+  off: any
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context, updateContext } = useEventContext()
+</script>
+
+<template>
+  <div>
+    Change <b>{{ objKey }}</b>
+    <button class="rpl-button" @click="updateContext(objKey, on)">
+      {{ on }}
+    </button>
+    <button class="rpl-button" @click="updateContext(objKey, off)">
+      {{ off }}
+    </button>
+  </div>
+</template>
+
+<style scoped></style>

packages/nuxt-ripple/components/TestContextViewer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
+interface ITestContextProps {
+}
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { context } = useEventContext()
+</script>
+
+<template>
+  <div class="testing123">
+    {{ context }}
+  </div>
+</template>
+
+<style scoped>
+.testing123 {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid;
+  background-color: rgba(0,0,0,0.05);
+  font-size: 16px;
+}
+</style>

packages/nuxt-ripple/components/TestFireEvent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+interface ITestContextProps {
+  name: any
+}
+
+const emit = defineEmits<{}>()
+
+const props = withDefaults(defineProps<ITestContextProps>(), {})
+
+const { emitRplEvent } = useRippleEvent('testing', emit)
+
+const fire = () => {
+  emitRplEvent(
+    'testFire',
+    {
+      action: 'search'
+    },
+    { global: true }
+  )
+
+  nextTick()
+}
+</script>
+
+<template>
+  <div>
+    <button class="rpl-button" @click="fire">
+      Fire "testing/testFire" event
+    </button>
+  </div>
+</template>
+
+<style scoped></style>

packages/nuxt-ripple/components/TideBaseLayout.vue

@@ -49,6 +49,44 @@
       </slot>
     </template>
     <template #body="{ hasSidebar }">
+      <div class="rpl-type-p">
+        <TestContext :context="{ wow: 'cool' }">
+          <TestFireEvent name="testFire" />
+
+          <TestContextControl objKey="wow" on="apple" off="orange" />
+          <TestContext :context="{ ooh: 'amazing' }">
+            <TestContext :context="{ ooh: 'something' }">
+              <TestContextControl objKey="ooh" on="cat" off="dog" />
+              <TestContextControl objKey="wow" on="nested" off="blah" />
+              <TestContextControl objKey="new" on="123" off="456" />
+              <TestFireEvent name="testFire" />
+            </TestContext>
+          </TestContext>
+          <TestContext :context="{ ooh: 'blah' }"
+            ><TestContext :context="{ ahh: 'neat' }"><TestFireEvent name="testFire" /></TestContext
+
+
+          ><TestContextControl objKey="ooh" on="dolphin" off="whale" /></TestContext>
+        </TestContext>
+        <TestContext :context="{ wow: 'cool' }">
+          <TestFireEvent name="testFire" />
+
+          <TestContextControl objKey="wow" on="apple" off="orange" />
+          <TestContext :context="{ ooh: 'amazing' }">
+            <TestContext :context="{ ooh: 'something' }">
+              <TestContextControl objKey="ooh" on="cat" off="dog" />
+              <TestContextControl objKey="wow" on="nested" off="blah" />
+              <TestContextControl objKey="new" on="123" off="456" />
+              <TestFireEvent name="testFire" />
+            </TestContext>
+          </TestContext>
+          <TestContext :context="{ ooh: 'blah' }"
+            ><TestContext :context="{ ahh: 'neat' }"><TestFireEvent name="testFire" /></TestContext
+
+
+          ><TestContextControl objKey="ooh" on="dolphin" off="whale" /></TestContext>
+        </TestContext>
+      </div>
       <slot name="body" :hasSidebar="hasSidebar"></slot>
       <TideTopicTags
         v-if="!featureFlags?.disableTopicTags && topicTags.length"

packages/ripple-tide-landing-page/components/global/TideLandingPage/WebForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
 import { FormKitSchemaNode } from '@formkit/core'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { MappedCaptchaConfig } from '@dpc-sdp/ripple-tide-webform/types'
@@ -87,9 +89,12 @@ customInputs.library = (node: any) => {
     }
   })
 }
+
+const { context } = useEventContext({form_name: props.title, form_id: props.formId })
 </script>
 
 <template>
+  {{ context }}
   <div
     :style="{
       '--local-max-width': '595px'

packages/ripple-tide-search/components/global/TideCustomCollection.vue

@@ -16,6 +16,8 @@ import type {
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { get } from 'lodash-es'
+import { useEventContext } from '@dpc-sdp/ripple-ui-core'
+
 
 interface Props {
   id: string
@@ -548,10 +550,17 @@ const locationOrGeolocation = computed(() => {
     ? userGeolocation.value
     : locationQuery.value
 })
+
+const { updateContext } = useEventContext({ mode: 'asdasd'})
+
+watch(activeTab, (newActiveTab) => {
+  updateContext('mode', newActiveTab)
+})
 </script>
 
 <template>
   <div class="rpl-u-margin-t-8">
+    <TestContextViewer />
     <div
       v-if="!searchListingConfig?.hideSearchForm"
       :class="{

packages/ripple-ui-core/src/composables/useEventContext.ts

@@ -0,0 +1,48 @@
+import { computed, provide, inject, ref } from 'vue'
+
+export default (addedContext?) => {
+  const { context: parentContext, updateContext: updateParentContext } =
+    inject<any>('rplEventContext', {})
+
+  if (!addedContext) {
+    return {
+      context: parentContext,
+      updateContext: updateParentContext
+    }
+  }
+
+  const context = ref(addedContext || {})
+
+  function updateContext(key, value) {
+
+
+    if (typeof updateParentContext === 'function') {
+      updateParentContext(key, value)
+    }
+    if (context.value?.hasOwnProperty(key)) {
+      context.value = {
+        ...context.value,
+        [key]: value
+      }
+    }
+
+  }
+
+  const mergedContext = computed(() => {
+
+    return {
+      ...(parentContext?.value || {}),
+      ...(context.value || {})
+    }
+  })
+
+  provide('rplEventContext', {
+    context: mergedContext,
+    updateContext
+  })
+
+  return {
+    context: mergedContext,
+    updateContext
+  }
+}

packages/ripple-ui-core/src/composables/useRippleEvent.ts

@@ -1,5 +1,6 @@
 import { inject } from 'vue'
 import rplEventBus from './../lib/eventbus'
+import useEventContext from '../composables/useEventContext'
 
 export type rplEventPayload = {
   id?: string
@@ -24,16 +25,14 @@ export type rplEventOptions = {
 
 export function useRippleEvent(namespace: string, emit?: any) {
   const $rplEvent: typeof rplEventBus | undefined = inject('$rplEvent')
-  const eventContext: rplEventPayload = inject('eventContext', {})
+  const { context } = useEventContext()
 
   const emitRplEvent = (
     event: string,
     payload: rplEventPayload = {},
     options: rplEventOptions = {}
   ) => {
-    if (eventContext) {
-      payload = { ...eventContext, ...payload }
-    }
+      payload = { ...(context?.value || {}), ...payload }
     if (emit) {
       emit(event, payload)
     }

packages/ripple-ui-core/src/index.ts

@@ -6,4 +6,5 @@ export { isExternalUrl } from './utils/isExternalUrl'
 export { formatDate } from './lib/helpers'
 export { RplIconGroups } from './components/icon/constants'
 export { useRippleEvent } from './composables/useRippleEvent'
+export { default as useEventContext } from './composables/useEventContext'
 export type { rplEventPayload } from './composables/useRippleEvent'