CSR-762 Rename and move around GA logic
This commit is contained in:
parent
0e3b1d79b8
commit
132f39e2de
4 changed files with 41 additions and 41 deletions
|
|
@ -5,17 +5,17 @@
|
||||||
name="route-fade"
|
name="route-fade"
|
||||||
mode="out-in">
|
mode="out-in">
|
||||||
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
|
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
|
||||||
<component :is="Component" @focusin="handleChildFocus" />
|
<component :is="Component" @focusin="handleAnyComponentFocus" />
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { handleChildFocus } from "@/helpers/analytics-helper"
|
import { handleAnyComponentFocus } from "@/helpers/input-button-focus-helper"
|
||||||
export default {
|
export default {
|
||||||
name: "app",
|
name: "app",
|
||||||
methods: {
|
methods: {
|
||||||
handleChildFocus: handleChildFocus
|
handleAnyComponentFocus: handleAnyComponentFocus
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
import { useField } from "vee-validate";
|
import { useField } from "vee-validate";
|
||||||
import { toRef } from "vue";
|
import { toRef } from "vue";
|
||||||
import { queryStrings } from "@/constants/query-strings";
|
import { queryStrings } from "@/constants/query-strings";
|
||||||
import { handleInputFocus, handleInputBlur } from "@/helpers/analytics-helper";
|
import { handleButtonComponentFocus, handleInputComponentBlur } from "@/helpers/input-button-focus-helper";
|
||||||
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
|
import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -100,14 +100,14 @@ export default {
|
||||||
this.$emit("update:modelValue", this.valueToEmit);
|
this.$emit("update:modelValue", this.valueToEmit);
|
||||||
},
|
},
|
||||||
handleFocus() {
|
handleFocus() {
|
||||||
handleInputFocus({
|
handleButtonComponentFocus({
|
||||||
groupName: this.groupName,
|
groupName: this.groupName,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleBlur() {
|
handleBlur() {
|
||||||
handleInputBlur({
|
handleInputComponentBlur({
|
||||||
groupName: this.groupName,
|
groupName: this.groupName,
|
||||||
onFocusCallback: this.handlePushClickEventToGACheck,
|
onButtonQuestionLostFocusCallback: this.handlePushClickEventToGACheck,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handlePushClickEventToGACheck(source) {
|
handlePushClickEventToGACheck(source) {
|
||||||
|
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
let lastFocusedInputGroupName = "";
|
|
||||||
let onFocusCallback = null;
|
|
||||||
|
|
||||||
const handleChildFocus = (e) => {
|
|
||||||
const targetType = e.target.type;
|
|
||||||
if (targetType !== "radio" && targetType !== "checkbox") {
|
|
||||||
handleInputFocus({
|
|
||||||
groupName: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleInputFocus = (e) => {
|
|
||||||
if (
|
|
||||||
e &&
|
|
||||||
lastFocusedInputGroupName !== e.groupName &&
|
|
||||||
onFocusCallback
|
|
||||||
) {
|
|
||||||
onFocusCallback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleInputBlur = (e) => {
|
|
||||||
if (e) {
|
|
||||||
lastFocusedInputGroupName = e.groupName;
|
|
||||||
onFocusCallback = e.onFocusCallback;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export {
|
|
||||||
handleChildFocus,
|
|
||||||
handleInputFocus,
|
|
||||||
handleInputBlur
|
|
||||||
}
|
|
||||||
34
src/helpers/input-button-focus-helper.js
Normal file
34
src/helpers/input-button-focus-helper.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
let lastFocusedInputGroupName = "";
|
||||||
|
let onButtonQuestionLostFocusCallback = null;
|
||||||
|
|
||||||
|
const handleAnyComponentFocus = (e) => {
|
||||||
|
const targetType = e.target.type;
|
||||||
|
if (targetType !== "radio" && targetType !== "checkbox") {
|
||||||
|
invokeButtonQuestionLostFocusCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleButtonComponentFocus = (e) => {
|
||||||
|
if (e && lastFocusedInputGroupName !== e.groupName) {
|
||||||
|
invokeButtonQuestionLostFocusCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputComponentBlur = (e) => {
|
||||||
|
if (e) {
|
||||||
|
lastFocusedInputGroupName = e.groupName;
|
||||||
|
onButtonQuestionLostFocusCallback = e.onButtonQuestionLostFocusCallback;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const invokeButtonQuestionLostFocusCallback = () => {
|
||||||
|
if (onButtonQuestionLostFocusCallback) {
|
||||||
|
onButtonQuestionLostFocusCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
handleAnyComponentFocus,
|
||||||
|
handleButtonComponentFocus,
|
||||||
|
handleInputComponentBlur,
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue