Skip to content

Commit 8aafa0e

Browse files
technikhil314technikhil314
committed
refactor: created more generic drivejs tutorials
All tutorials now resides in one file and all the logic to show and set cookies is in same file. Create more generic function called showTutorials. Removed lots of unwanted code and unwanted variables being passed to template from data()
1 parent 0001e3f commit 8aafa0e

File tree

5 files changed

+155
-93
lines changed

5 files changed

+155
-93
lines changed

‎helpers/driverjsTutorials.ts‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
interface Tutorial {
2+
element: string
3+
popover: {
4+
title: string
5+
description: string
6+
}
7+
}
8+
9+
interface TutorialMetadata {
10+
tutorial: Tutorial[]
11+
cookieName: string
12+
}
13+
14+
type TutorialsMetadata = Record<string, TutorialMetadata[]>
15+
16+
const labelsTutorial: Tutorial[] = [
17+
{
18+
element: '#lhsLabel',
19+
popover: {
20+
title: 'New feature',
21+
description: 'Now you can add custom labels to text blocks',
22+
},
23+
},
24+
{
25+
element: '#rhsLabel',
26+
popover: {
27+
title: 'New feature',
28+
description: 'Now you can add custom labels to text blocks',
29+
},
30+
},
31+
]
32+
33+
const actionBarTutorial: Tutorial[] = [
34+
{
35+
element: '#toggleScrollInSyncSection',
36+
popover: {
37+
title: 'Scroll In Sync',
38+
description: 'Now you can choose to scroll both sides in sync.',
39+
},
40+
},
41+
{
42+
element: '#nextDiffSection',
43+
popover: {
44+
title: 'Travel through diff hunks',
45+
description: 'Now you can move between next and previous diff hunks.',
46+
},
47+
},
48+
{
49+
element: '#prevDiffSection',
50+
popover: {
51+
title: 'Travel through diff hunks',
52+
description: 'Now you can move between next and previous diff hunks.',
53+
},
54+
},
55+
]
56+
57+
const backButtonTutorial: Tutorial[] = [
58+
{
59+
element: '#backToDataLink',
60+
popover: {
61+
title: 'Go back to edit screen',
62+
description:
63+
'Now your data persists between the page navigation. Only if you have clicked on "Compare" button',
64+
},
65+
},
66+
]
67+
68+
const tutorialsMetadata: TutorialsMetadata = {
69+
'/v1/diff': [
70+
{
71+
tutorial: actionBarTutorial,
72+
cookieName: 'isSkipScrollInSyncTutorial',
73+
},
74+
{
75+
tutorial: backButtonTutorial,
76+
cookieName: 'isSkipBackButtonPersistsDataTutorial',
77+
},
78+
],
79+
'/': [
80+
{
81+
tutorial: labelsTutorial,
82+
cookieName: 'isSkipTutorial',
83+
},
84+
],
85+
}
86+
87+
export default async function showTutorials(
88+
cookies: Record<string, boolean>,
89+
route: string,
90+
isDarkMode: boolean
91+
) {
92+
const { default: Driver } = await import('driver.js')
93+
const possibleTutorialsToShow = tutorialsMetadata[route]
94+
let finalTutorial: Tutorial[] = []
95+
const cookiesToSet: string[] = []
96+
const driver = new Driver({
97+
closeBtnText: 'Skip',
98+
className: 'dark:filter dark:invert',
99+
stageBackground: isDarkMode ? 'hsl(221deg 50% 90% / 0.5)' : '#ffffff',
100+
onReset: () => {
101+
cookiesToSet.forEach((x) => {
102+
document.cookie = `${x}=true; max-age=31536000; path=/;`
103+
})
104+
},
105+
})
106+
possibleTutorialsToShow.forEach((x) => {
107+
if (!cookies[x.cookieName]) {
108+
finalTutorial = finalTutorial.concat(x.tutorial)
109+
cookiesToSet.push(x.cookieName)
110+
}
111+
})
112+
driver.defineSteps(finalTutorial)
113+
driver.start()
114+
}

‎helpers/isSkipBackButtonPersistsDataTutorial.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default function () {
2+
const cookies = document.cookie.split(';')
3+
const cookieMap: {
4+
isSkipBackButtonPersistsDataTutorial?: string
5+
} = {
6+
isSkipBackButtonPersistsDataTutorial: 'false',
7+
}
8+
cookies.forEach((element) => {
9+
const [name, val] = element.split('=')
10+
const trimmedName = name.trim()
11+
if (trimmedName === 'isSkipBackButtonPersistsDataTutorial') {
12+
cookieMap[trimmedName] = val
13+
}
14+
})
15+
return cookieMap.isSkipBackButtonPersistsDataTutorial === 'true'
16+
}

‎pages/index.vue‎

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -74,47 +74,17 @@ import DiffMatchPatch from 'diff-match-patch'
7474
import Vue from 'vue'
7575
import pako from 'pako'
7676
import { doUrlSafeBase64 } from '../helpers/utils'
77+
import showTutorials from '../helpers/driverjsTutorials'
7778
const dmp = new DiffMatchPatch()
7879
export default Vue.extend({
7980
layout: 'main',
8081
data() {
8182
return {
82-
isDarkMode: this.$isDarkMode,
83-
isSkipTutorial: this.$isSkipTutorial,
8483
...this.$store.state.data,
8584
}
8685
},
87-
async mounted() {
88-
const { default: Driver } = await import('driver.js')
89-
const driver = new Driver({
90-
closeBtnText: 'Skip',
91-
className: 'dark:filter dark:invert',
92-
stageBackground: this.isDarkMode
93-
? 'hsl(221deg 50% 90% / 0.5)'
94-
: '#ffffff',
95-
onReset: () => {
96-
document.cookie = 'isSkipTutorial=true; max-age=31536000; path=/;'
97-
},
98-
})
99-
if (!this.isSkipTutorial) {
100-
driver.defineSteps([
101-
{
102-
element: '#lhsLabel',
103-
popover: {
104-
title: 'New feature',
105-
description: 'Now you can add custom labels to text blocks',
106-
},
107-
},
108-
{
109-
element: '#rhsLabel',
110-
popover: {
111-
title: 'New feature',
112-
description: 'Now you can add custom labels to text blocks',
113-
},
114-
},
115-
])
116-
driver.start()
117-
}
86+
mounted() {
87+
showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
11888
},
11989
methods: {
12090
checkForm(e: Event) {

‎pages/v1/diff.vue‎

Lines changed: 3 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<script>
2929
import pako from 'pako'
3030
import { undoUrlSafeBase64, escapeHtml } from '../../helpers/utils'
31+
import showTutorials from '../../helpers/driverjsTutorials'
3132
export default {
3233
layout: 'main',
3334
beforeCreate() {
@@ -78,59 +79,17 @@ export default {
7879
rhsDiff: this.rhsDiff || [],
7980
rhsLabel: this.rhsLabel || '',
8081
lhsLabel: this.lhsLabel || '',
81-
copied: false,
8282
isSrollInSyncEnabled: this.isSrollInSyncEnabled,
83-
isDarkMode: this.$isDarkMode,
84-
isSkipScrollInSyncTutorial: this.$isSkipScrollInSyncTutorial,
8583
}
8684
},
87-
async mounted() {
85+
mounted() {
8886
const isLHSBigger = this.lhsDiff.length > this.rhsDiff.length
8987
const maxLineCount = isLHSBigger ? this.lhsDiff.length : this.rhsDiff.length
9088
document.documentElement.style.setProperty(
9189
'--max-line-number-characher',
9290
`${`${maxLineCount}`.split('').length}ch`
9391
)
94-
const { default: Driver } = await import('driver.js')
95-
const driver = new Driver({
96-
closeBtnText: 'Skip',
97-
className: 'dark:filter dark:invert',
98-
stageBackground: this.isDarkMode
99-
? 'hsl(221deg 50% 90% / 0.5)'
100-
: '#ffffff',
101-
onReset: () => {
102-
document.cookie =
103-
'isSkipScrollInSyncTutorial=true; max-age=31536000; path=/;'
104-
},
105-
})
106-
if (!this.isSkipScrollInSyncTutorial) {
107-
driver.defineSteps([
108-
{
109-
element: '#toggleScrollInSyncSection',
110-
popover: {
111-
title: 'Scroll In Sync',
112-
description: 'Now you can choose to scroll both sides in sync.',
113-
},
114-
},
115-
{
116-
element: '#nextDiffSection',
117-
popover: {
118-
title: 'Travel through diff hunks',
119-
description:
120-
'Now you can move between next and previous diff hunks.',
121-
},
122-
},
123-
{
124-
element: '#prevDiffSection',
125-
popover: {
126-
title: 'Travel through diff hunks',
127-
description:
128-
'Now you can move between next and previous diff hunks.',
129-
},
130-
},
131-
])
132-
driver.start()
133-
}
92+
showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
13493
},
13594
}
13695
</script>

‎plugins/cookie-injector.client.ts‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,46 @@ import { Plugin } from '@nuxt/types'
22
import isDarkModeCookie from '~/helpers/isDarkModeCookie'
33
import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
44
import isSkipScrollInSyncTutorial from '~/helpers/isSkipScrollInSyncTutorial'
5+
import isSkipBackButtonPersistsDataTutorial from '~/helpers/isSkipBackButtonPersistsDataTutorial'
6+
7+
interface Cookies {
8+
isDarkMode: boolean
9+
isSkipTutorial: boolean
10+
isSkipScrollInSyncTutorial: boolean
11+
isSkipBackButtonPersistsDataTutorial: boolean
12+
}
513
declare module 'vue/types/vue' {
6-
// this.$isDarkModeinside Vue components
714
interface Vue {
8-
$isDarkMode: boolean
9-
$isSkipTutorial: boolean
10-
$isSkipScrollInSyncTutorial: boolean
15+
$cookies: Cookies
1116
}
1217
}
1318

1419
declare module '@nuxt/types' {
1520
// nuxtContext.app.$isDarkModeinside asyncData, fetch, plugins, middleware, nuxtServerInit
1621
interface NuxtAppOptions {
17-
$isDarkMode: boolean
18-
$isSkipTutorial: boolean
19-
$isSkipScrollInSyncTutorial: boolean
22+
$cookies: Cookies
2023
}
2124
// nuxtContext.isDarkMode$
2225
interface Context {
23-
$isDarkMode: boolean
24-
$isSkipTutorial: boolean
25-
$isSkipScrollInSyncTutorial: boolean
26+
$cookies: Cookies
2627
}
2728
}
2829

2930
declare module 'vuex/types/index' {
3031
// this.$isDarkModeinside Vuex stores
3132
interface Store<S> {
32-
$isDarkMode: boolean | S
33-
$isSkipTutorial: boolean | S
34-
$isSkipScrollInSyncTutorial: boolean | S
33+
$cookies: Cookies | S
3534
}
3635
}
3736

3837
const cookieInjectorPlugin: Plugin = (_context, inject) => {
39-
inject('isDarkMode', isDarkModeCookie())
40-
inject('isSkipTutorial', isSkipTutorialCookie())
41-
inject('isSkipScrollInSyncTutorial', isSkipScrollInSyncTutorial())
38+
inject('cookies', {
39+
isDarkMode: isDarkModeCookie(),
40+
isSkipTutorial: isSkipTutorialCookie(),
41+
isSkipScrollInSyncTutorial: isSkipScrollInSyncTutorial(),
42+
isSkipBackButtonPersistsDataTutorial:
43+
isSkipBackButtonPersistsDataTutorial(),
44+
})
4245
}
4346

4447
export default cookieInjectorPlugin

0 commit comments

Comments
 (0)