|
@@ -7,6 +7,7 @@ export interface Skill {
|
|
|
|
|
|
export interface SkillsState {
|
|
export interface SkillsState {
|
|
currentTag: string | null
|
|
currentTag: string | null
|
|
|
|
+ descriptions: boolean
|
|
skills: Skill[]
|
|
skills: Skill[]
|
|
tags: string[]
|
|
tags: string[]
|
|
visibleSkills: Skill[]
|
|
visibleSkills: Skill[]
|
|
@@ -14,6 +15,7 @@ export interface SkillsState {
|
|
init(): void
|
|
init(): void
|
|
setCurrentTag(e: MouseEvent): void
|
|
setCurrentTag(e: MouseEvent): void
|
|
tagClass(value: string): string
|
|
tagClass(value: string): string
|
|
|
|
+ toggleDescriptions(e: MouseEvent): void
|
|
}
|
|
}
|
|
|
|
|
|
export default function Skills(): SkillsState {
|
|
export default function Skills(): SkillsState {
|
|
@@ -24,6 +26,11 @@ export default function Skills(): SkillsState {
|
|
return usp.get('skill')
|
|
return usp.get('skill')
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ function readCurrentDescriptions() {
|
|
|
|
+ const usp = new URLSearchParams(window.location.search)
|
|
|
|
+ return usp.get('descriptions') === '1'
|
|
|
|
+ }
|
|
|
|
+
|
|
function updateVisibleSkills(this: SkillsState) {
|
|
function updateVisibleSkills(this: SkillsState) {
|
|
const tag = this.currentTag
|
|
const tag = this.currentTag
|
|
if (tag) this.visibleSkills = this.skills.filter(skill => skill.tags.includes(tag))
|
|
if (tag) this.visibleSkills = this.skills.filter(skill => skill.tags.includes(tag))
|
|
@@ -32,6 +39,7 @@ export default function Skills(): SkillsState {
|
|
|
|
|
|
return {
|
|
return {
|
|
currentTag: null,
|
|
currentTag: null,
|
|
|
|
+ descriptions: false,
|
|
skills: [],
|
|
skills: [],
|
|
visibleSkills: [],
|
|
visibleSkills: [],
|
|
|
|
|
|
@@ -47,8 +55,8 @@ export default function Skills(): SkillsState {
|
|
},
|
|
},
|
|
|
|
|
|
async init() {
|
|
async init() {
|
|
- const tag = readCurrentTag()
|
|
|
|
- this.currentTag = tag
|
|
|
|
|
|
+ this.currentTag = readCurrentTag()
|
|
|
|
+ this.descriptions = readCurrentDescriptions()
|
|
|
|
|
|
try {
|
|
try {
|
|
const res = await fetch(url)
|
|
const res = await fetch(url)
|
|
@@ -69,14 +77,19 @@ export default function Skills(): SkillsState {
|
|
|
|
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
|
|
|
|
|
|
+ const usp = new URLSearchParams(window.location.search)
|
|
if (tag === this.currentTag) {
|
|
if (tag === this.currentTag) {
|
|
- window.history.pushState({ tag }, '', window.location.pathname)
|
|
|
|
this.currentTag = null
|
|
this.currentTag = null
|
|
|
|
+ usp.delete('skill')
|
|
} else {
|
|
} else {
|
|
- window.history.pushState({ tag }, '', `${window.location.pathname}?skill=${tag}`)
|
|
|
|
this.currentTag = tag
|
|
this.currentTag = tag
|
|
|
|
+ usp.set('skill', tag)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ const search = usp.toString()
|
|
|
|
+ if (search) window.history.pushState({ tag }, '', `${window.location.pathname}?${search}`)
|
|
|
|
+ else window.history.pushState({ tag }, '', window.location.pathname)
|
|
|
|
+
|
|
updateVisibleSkills.apply(this)
|
|
updateVisibleSkills.apply(this)
|
|
return tag
|
|
return tag
|
|
},
|
|
},
|
|
@@ -85,5 +98,19 @@ export default function Skills(): SkillsState {
|
|
if (value === this.currentTag) return 'tag active'
|
|
if (value === this.currentTag) return 'tag active'
|
|
return 'tag'
|
|
return 'tag'
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ toggleDescriptions(e) {
|
|
|
|
+ e.preventDefault()
|
|
|
|
+
|
|
|
|
+ const usp = new URLSearchParams(window.location.search)
|
|
|
|
+ if (this.descriptions) usp.delete('descriptions')
|
|
|
|
+ else usp.set('descriptions', '1')
|
|
|
|
+
|
|
|
|
+ const search = usp.toString()
|
|
|
|
+ if (search) window.history.pushState(null, '', `${window.location.pathname}?${search}`)
|
|
|
|
+ else window.history.pushState(null, '', window.location.pathname)
|
|
|
|
+
|
|
|
|
+ this.descriptions = !this.descriptions
|
|
|
|
+ },
|
|
}
|
|
}
|
|
}
|
|
}
|