#142 extract hash logic, use namespaces
This commit is contained in:
parent
203ae67f2b
commit
81e2e29f15
|
@ -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();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -71,6 +71,7 @@ nouns:
|
|||
templates: true
|
||||
inclusive:
|
||||
categories: ['interpłciowość', 'lgbtq+', 'niepełnosprawność', 'rasa', 'trans']
|
||||
hashNamespace: 'neutratywy'
|
||||
|
||||
names:
|
||||
enabled: false
|
||||
|
|
|
@ -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) : '')
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
|
@ -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({
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
Reference in New Issue