jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 GA WIP, think it's working but needs more testing

Browse source
This commit is contained in:
Katie 2022-10-04 14:43:43 -04:00
parent a669556c80
commit a6d8a5d8d1
4 changed files with 115 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -1,4 +1,4 @@
{ {
"tabWidth": 2, "tabWidth": 4,
"bracketSameLine": true "bracketSameLine": true
} }

69
src/App.vue
View file

@ -1,36 +1,57 @@
<template> <template>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in"> lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" --> <transition
<component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/> :duration="{ enter: 200, leave: 200 }"
</transition> name="route-fade"
</router-view> mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" @focusin="handleChildFocus" />
</transition>
</router-view>
</template> </template>
<script> <script>
export default { export default {
name: "app", name: "app",
data() { data() {
return { return {
lastFocusedInputGroupName: "", lastFocusedInputGroupName: "",
onFocusCallback: null onFocusCallback: null,
} };
}, },
methods: { methods: {
handleFocus(e) { handleChildFocus(e) {
console.log("app focus: ", e) const targetType = e.target.type;
}, if (targetType !== "radio") {
handleBlur(e) { this.handleInputFocus({
console.log("app blur: ", e) groupName: null
}, });
} }
} },
handleInputFocus(e) {
if (
e &&
this.lastFocusedInputGroupName !== e.groupName &&
this.onFocusCallback
) {
this.onFocusCallback();
}
},
handleInputBlur(e) {
if (e) {
this.lastFocusedInputGroupName = e.groupName;
this.onFocusCallback = e.onFocusCallback;
}
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap"; @import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss"; @import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss"; @import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss"; @import "@/styles/common-animations.scss";
</style> </style>

57
src/common-components/button-question/button-question.vue
View file

@ -125,7 +125,8 @@ export default {
data() { data() {
return { return {
primaryValue: "", primaryValue: "",
lastFocusedInputGroup: "", // lastFocusedInputGroup: "",
lastPushedGaEventValue: null,
}; };
}, },
computed: { computed: {
@ -197,6 +198,9 @@ export default {
}) })
); );
}, },
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
}, },
methods: { methods: {
formatString(str) { formatString(str) {
@ -222,31 +226,46 @@ export default {
}, },
handleAnswerChange(primaryAnswerValue) { handleAnswerChange(primaryAnswerValue) {
this.primaryValue = primaryAnswerValue; this.primaryValue = primaryAnswerValue;
console.log("hAC: ", primaryAnswerValue)
this.pushClickEventToGA(null, primaryAnswerValue);
this.$emit("buttonQuestionChange", primaryAnswerValue); this.$emit("buttonQuestionChange", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue);
}, },
pushClickEventToGA(e, value) { pushClickEventToGA(e, value) {
this.pushEventToGA( const valueToPushToGa =
this.$route.query[queryStrings.FMG_PAGE], value?.toString() ?? this.primaryValue?.toString();
this.GaActions.CLICKED, console.log({
value?.toString() ?? this.primaryValue?.toString(), valueToPushToGa,
true, lastPushedGaEventValue: this.lastPushedGaEventValue,
this.valueToLogType });
); if (valueToPushToGa !== this.lastPushedGaEventValue) {
this.lastPushedGaEventValue = valueToPushToGa;
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
valueToPushToGa,
true,
this.valueToLogType
);
}
}, },
handleFocus() { onFocusCallbackForRoot() {
this.$root.handleFocus({ if (!this.isValueSelectedOnClick) {
groupName: this.groupName, this.pushClickEventToGA();
value: this.primaryValue }
})
}, },
handleBlur() { handleFocus(e) {
this.$root.handleBlur({ this.$root.handleInputFocus({
groupName: this.groupName, groupName: this.groupName,
value: this.primaryValue });
}) },
} handleBlur(e) {
this.$root.handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot,
});
},
}, },
components: { components: {
listButton, listButton,

62
src/mixins/base-mixin.js
View file

@ -61,39 +61,39 @@ export default {
state: serviceZipValidationResponse.data.state, state: serviceZipValidationResponse.data.state,
}; };
}, },
pushRadioClickEventIfNecessary() { // pushRadioClickEventIfNecessary() {
const { // const {
firedGaClickEventValues, // firedGaClickEventValues,
currentlySelectedValues, // currentlySelectedValues,
lastFocusedInputGroup, // lastFocusedInputGroup,
wasLastFocusedInputMultiselect, // wasLastFocusedInputMultiselect,
} = this.$store.getters.gaClickInformation; // } = this.$store.getters.gaClickInformation;
// Keyboard navigation // // Keyboard navigation
if ( // if (
!wasLastFocusedInputMultiselect && // !wasLastFocusedInputMultiselect &&
currentlySelectedValues[lastFocusedInputGroup] && // currentlySelectedValues[lastFocusedInputGroup] &&
firedGaClickEventValues[lastFocusedInputGroup] != // firedGaClickEventValues[lastFocusedInputGroup] !=
currentlySelectedValues[lastFocusedInputGroup] // currentlySelectedValues[lastFocusedInputGroup]
) { // ) {
const value = // const value =
currentlySelectedValues[lastFocusedInputGroup]?.toString(); // currentlySelectedValues[lastFocusedInputGroup]?.toString();
// this.dispatchStoreAction( // // this.dispatchStoreAction(
// gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, // // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
// { // // {
// groupName: lastFocusedInputGroup, // // groupName: lastFocusedInputGroup,
// value: value, // // value: value,
// } // // }
// ); // // );
this.pushEventToGA( // this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE], // this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED, // this.GaActions.CLICKED,
value, // value,
true // true
); // );
} // }
}, // },
}, },
computed: { computed: {
storeActions() { storeActions() {