#142 extract hash logic, use namespaces

This commit is contained in:
Avris 2020-12-17 22:18:18 +01:00
parent 203ae67f2b
commit 81e2e29f15
7 changed files with 69 additions and 59 deletions

View File

@ -194,11 +194,13 @@
<script>
import { Noun } from "~/src/classes";
import { buildDict } from "../src/helpers";
import hash from "../plugins/hash";
export default {
props: {
load: {type: Boolean}
},
mixins: [ hash ],
data() {
return {
filter: '',
@ -289,16 +291,10 @@
},
watch: {
filter() {
if (process.client) {
if (this.filter) {
window.location.hash = this.filter;
} else {
history.pushState('', document.title, window.location.pathname + window.location.search);
}
if (this.$refs.dictionarytable) {
this.$refs.dictionarytable.reset();
this.$refs.dictionarytable.focus();
}
this.setHash(this.config.nouns.hashNamespace || '', this.filter);
if (this.$refs.dictionarytable) {
this.$refs.dictionarytable.reset();
this.$refs.dictionarytable.focus();
}
}
},

View File

@ -71,6 +71,7 @@ nouns:
templates: true
inclusive:
categories: ['interpłciowość', 'lgbtq+', 'niepełnosprawność', 'rasa', 'trans']
hashNamespace: 'neutratywy'
names:
enabled: false

33
plugins/hash.js Normal file
View File

@ -0,0 +1,33 @@
export default {
methods: {
handleHash(namespace, callback, checkAnchor = true) {
if (!process.client || !window.location.hash) {
return;
}
const anchor = decodeURIComponent(window.location.hash.substr(1));
this.$nextTick(_ => {
const $anchor = document.getElementById(anchor);
if (checkAnchor && $anchor) {
$anchor.scrollIntoView();
} else if (!namespace) {
callback(anchor);
} else if (anchor.startsWith(namespace + '/')) {
callback(anchor.substring(namespace.length + 1));
}
});
},
setHash(namespace, value) {
if (!process.client) {
return;
}
history.pushState(
'',
document.title,
window.location.pathname + window.location.search
+ (value ? '#' + (namespace ? namespace + '/' + value : value) : '')
);
},
}
}

View File

@ -6,7 +6,7 @@
</h2>
<section>
<details v-for="question in Object.keys($t('faq.questions'))" class="border mb-3" :id="question" :ref="question.replace(/-/g, '_')">
<details v-for="question in Object.keys($t('faq.questions'))" class="border mb-3" :id="question" :ref="question.replace(/-/g, '_')" @click="setHash('', question)">
<summary class="bg-light p-3"><T>faq.questions.{{question}}.question</T></summary>
<div class="p-3 border-top">
<T>faq.questions.{{question}}.answer</T>
@ -22,12 +22,13 @@
<script>
import { head } from "../src/helpers";
import hash from "../plugins/hash";
export default {
mixins: [ hash ],
mounted() {
if (process.client && window.location.hash) {
const active = decodeURIComponent(window.location.hash.substr(1));
const $el = this.$refs[active.replace(/-/g, '_')];
this.handleHash('', hash => {
const $el = this.$refs[hash.replace(/-/g, '_')];
if (!$el) {
return;
}
@ -37,7 +38,7 @@
setTimeout(_ => {
$el[0].scrollIntoView();
}, 1000);
}
}, false)
},
head() {
return head({

View File

@ -97,8 +97,10 @@
<script>
import { names } from '~/src/data';
import { head, clearUrl } from '~/src/helpers';
import hash from "../plugins/hash";
export default {
mixins: [ hash ],
data() {
return {
names,
@ -107,14 +109,14 @@
}
},
mounted() {
if (process.client && window.location.hash) {
this.filter = decodeURIComponent(window.location.hash.substr(1));
this.handleHash('', filter => {
this.filter = filter;
this.$refs.filter.focus();
this.$refs.filter.scrollIntoView();
setTimeout(_ => {
this.$refs.filter.scrollIntoView();
}, 1000);
}
});
},
methods: {
visibleNames() {
@ -125,13 +127,7 @@
},
watch: {
filter() {
if (process.client) {
if (this.filter) {
window.location.hash = this.filter;
} else {
history.pushState('', document.title, window.location.pathname + window.location.search);
}
}
this.setHash('', this.filter);
}
},
head() {

View File

@ -34,26 +34,20 @@
import { head } from "../src/helpers";
import NounsNav from "../data/nouns/NounsNav.vue";
import NounsExtra from "../data/nouns/NounsExtra.vue";
import hash from "../plugins/hash";
export default {
components: { NounsNav, NounsExtra },
mixins: [ hash ],
mounted() {
if (process.client && window.location.hash) {
const anchor = decodeURIComponent(window.location.hash.substr(1));
this.$nextTick(_ => {
const $anchor = document.getElementById(anchor);
if ($anchor) {
$anchor.scrollIntoView();
} else {
if (this.$refs.dictionarywrapper) {
this.$refs.dictionarywrapper.open = true;
this.$refs.collapsabledictionary.setFilter(anchor);
} else {
this.$refs.dictionary.setFilter(anchor);
}
}
});
}
this.handleHash(this.config.nouns.hashNamespace || '', filter => {
if (this.$refs.dictionarywrapper) {
this.$refs.dictionarywrapper.open = true;
this.$refs.collapsabledictionary.setFilter(filter);
} else {
this.$refs.dictionary.setFilter(filter);
}
});
},
head() {
return head({

View File

@ -140,8 +140,10 @@
import { pronouns, pronounLibrary } from '../src/data'
import { Source, SourceLibrary } from "../src/classes";
import { head } from "../src/helpers";
import hash from "../plugins/hash";
export default {
mixins: [ hash ],
data() {
return {
pronouns,
@ -160,17 +162,10 @@
}
},
mounted() {
if (process.client && window.location.hash) {
const anchor = decodeURIComponent(window.location.hash.substr(1));
this.$nextTick(_ => {
const $anchor = document.getElementById(anchor);
if ($anchor) {
$anchor.scrollIntoView();
} else {
this.filter = anchor;
}
})
}
this.handleHash('', filter => {
this.filter = filter;
this.$refs.filter.scrollIntoView();
});
},
head() {
return head({
@ -196,13 +191,7 @@
},
watch: {
filter() {
if (process.client) {
if (this.filter) {
window.location.hash = this.filter;
} else {
history.pushState('', document.title, window.location.pathname + window.location.search);
}
}
this.setHash('', this.filter);
}
},
}