topics submenu nnow accessible on stream hover, toValidID funcntion regex expression tweaked to catch parantheses
This commit is contained in:
كارل مبارك
parent
069859d583
commit
4699d6dc53
8 changed files with 69 additions and 247 deletions
|
|
@ -169,6 +169,7 @@ export default {
|
|||
<style>
|
||||
:root {
|
||||
--back: white;
|
||||
--pink: rgb(255, 133, 218);
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
|
|||
|
|
@ -22,9 +22,6 @@ export default {
|
|||
components: {
|
||||
Message,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: ["topic", "show_message_data"],
|
||||
computed: {
|
||||
messagesToShow() {
|
||||
|
|
|
|||
|
|
@ -7,28 +7,12 @@
|
|||
v-bind="$mdOpts"
|
||||
>
|
||||
</vue3-markdown-it>
|
||||
<ul class="index">
|
||||
<li v-for="topic in sortedTopics" :key="topic.title">
|
||||
<router-link
|
||||
:to="`#${toValidID(topic.title)}`"
|
||||
@click.stop="goTo(`#${toValidID(topic.title)}`)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="authors">
|
||||
<span
|
||||
class="author"
|
||||
v-for="author in authors"
|
||||
:key="author"
|
||||
>
|
||||
<span>{{ author }}</span>
|
||||
<span v-if="isLast(author, authors)">.</span>
|
||||
<span v-else-if="isBeforeLast(author, authors)"> and </span>
|
||||
<span v-else>, </span>
|
||||
</span>
|
||||
</p>
|
||||
<Toc
|
||||
:sortedTopics="sortedTopics"
|
||||
/>
|
||||
<Authors
|
||||
:authors="authors"
|
||||
/>
|
||||
<Chapter
|
||||
v-for="topic in sortedTopics"
|
||||
:key="topic.title"
|
||||
|
|
@ -42,20 +26,23 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import Chapter from "./Chapter.vue";
|
||||
import Authors from './Authors';
|
||||
import Chapter from "./Chapter";
|
||||
import Toc from './Toc';
|
||||
|
||||
export default {
|
||||
name: "Content",
|
||||
components: {
|
||||
Chapter,
|
||||
Toc,
|
||||
Authors,
|
||||
},
|
||||
props: ["print", "show_message_data"],
|
||||
computed: {
|
||||
...mapState(["currentStream", "streams"]),
|
||||
...mapGetters(["sortedTopics"]),
|
||||
|
||||
foundStream() {
|
||||
return this.streams.find((s) => s.name == this.currentStream.name)
|
||||
return this.streams.find(s => s.name == this.currentStream.name)
|
||||
},
|
||||
title() {
|
||||
return this.foundStream
|
||||
|
|
@ -87,25 +74,13 @@ export default {
|
|||
toValidID(string) {
|
||||
return encodeURIComponent("ch-" + string)
|
||||
.toLowerCase()
|
||||
.replace(/\.|%[0-9a-z]{2}/gi, "");
|
||||
.replace(/\.|%[0-9a-z]{2}/gi, "")
|
||||
.replace(/\(|\)/gi, "");
|
||||
},
|
||||
goTo(id) {
|
||||
document.querySelector(`${id}`).scrollIntoView({
|
||||
behavior: "smooth",
|
||||
});
|
||||
},
|
||||
isLast: (item, array) => (
|
||||
array.indexOf(item) === array.length - 1
|
||||
),
|
||||
isBeforeLast: (item, array) => (
|
||||
array.indexOf(item) === array.length - 2
|
||||
),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.authors {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
.<template>
|
||||
<nav>
|
||||
|
||||
<ul class="collections">
|
||||
<li
|
||||
v-for="collection in collections"
|
||||
:key="collection.slug"
|
||||
>
|
||||
<router-link :to="collection.slug">
|
||||
{{ collection.name }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="singles">
|
||||
<li
|
||||
v-for="single in singles"
|
||||
:key="single.slug"
|
||||
>
|
||||
<router-link :to="single.slug">
|
||||
{{ single.name }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Nav',
|
||||
data() {
|
||||
return {
|
||||
collections: [
|
||||
{
|
||||
name: 'resources',
|
||||
slug: 'resources'
|
||||
},
|
||||
{
|
||||
name: 'artworks',
|
||||
slug: 'artworks'
|
||||
},
|
||||
],
|
||||
singles: [
|
||||
{
|
||||
name: 'about',
|
||||
slug: 'about'
|
||||
},
|
||||
{
|
||||
name: 'contact',
|
||||
slug: 'contact'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
nav {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="semanticList body">
|
||||
<span :class="name + 's'">
|
||||
<!-- <span v-if="title"> {{ title }} </span> -->
|
||||
<span
|
||||
:class="name"
|
||||
v-for="item in list"
|
||||
:key="item.hash"
|
||||
>
|
||||
<a
|
||||
:href="`${$apiURL}/${item.url}`"
|
||||
target="_blank"
|
||||
class="name"
|
||||
>{{ item.name }}</a>
|
||||
<span v-if="title && isLast(item, list)">. </span>
|
||||
<span v-else-if="isBeforeLast(item, list)"> and </span>
|
||||
<span v-else-if="title">, </span>
|
||||
<span v-else-if="!title && isLast(item, list)"> </span>
|
||||
<span v-else >, </span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SemanticList',
|
||||
props: [
|
||||
'list',
|
||||
'name',
|
||||
'collection'
|
||||
],
|
||||
computed: {
|
||||
title() {
|
||||
return (
|
||||
this.name
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isLast: (item, array) => (
|
||||
array.indexOf(item) === array.length - 1
|
||||
),
|
||||
isBeforeLast: (item, array) => (
|
||||
array.indexOf(item) === array.length - 2
|
||||
),
|
||||
alphabetical: array => (
|
||||
array.sort((a, b) => a.Name.length - b.Name.length)
|
||||
),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.semanticList {
|
||||
font-size: inherit;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a:active,
|
||||
a:hover {
|
||||
/* color: unset; */
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +1,66 @@
|
|||
<template>
|
||||
<div :class="{ selected: selected }">
|
||||
<div :class="['li', { selected: isSelected }]">
|
||||
<p class="name">
|
||||
<router-link :to="stream.slug">
|
||||
{{ stream.name }}
|
||||
</router-link>
|
||||
</p>
|
||||
<Toc
|
||||
v-if="isSelected"
|
||||
:sortedTopics="sortedTopics"
|
||||
:top="top"
|
||||
/>
|
||||
<!-- <p class="desc">{{ stream.description }}</p> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Toc from '../Content/Toc'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Stream',
|
||||
components: { Toc },
|
||||
props: [
|
||||
'stream'
|
||||
'stream',
|
||||
'isSelected',
|
||||
],
|
||||
computed: {
|
||||
selected() { return this.$store.state.currentStream == this.stream.name }
|
||||
data() {
|
||||
return {
|
||||
top: Number,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"sortedTopics"
|
||||
]),
|
||||
},
|
||||
mounted() {
|
||||
this.top = this.$el.offsetTop
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
.li {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
}
|
||||
div .selected {
|
||||
background: rgb(247, 146, 247);
|
||||
.li.selected {
|
||||
background: var(--pink);
|
||||
}
|
||||
div p {
|
||||
.li p {
|
||||
margin: 0;
|
||||
}
|
||||
.li p a {
|
||||
max-width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<section class="streams">
|
||||
<!-- <p class="title">{{ $.type.name }}</p> -->
|
||||
<Stream v-for="stream in streams" :key="stream.id" :stream="stream" />
|
||||
<Stream
|
||||
v-for="stream in streams"
|
||||
:key="stream.id"
|
||||
:stream="stream"
|
||||
:isSelected="currentStream.name == stream.name"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,7 +19,10 @@ export default {
|
|||
Stream,
|
||||
},
|
||||
computed: {
|
||||
...mapState(["streams"]),
|
||||
...mapState([
|
||||
"streams",
|
||||
"currentStream"
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<div class="taglist body">
|
||||
<span
|
||||
v-for="item in list"
|
||||
:key="item.slug"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
path: collection,
|
||||
query: { tag: item.slug }
|
||||
}"
|
||||
>
|
||||
{{ item.Name }}
|
||||
</router-link>
|
||||
<span v-if="!isLast(item, list)">, </span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SemanticList',
|
||||
props: [
|
||||
'list',
|
||||
'name',
|
||||
'collection'
|
||||
],
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
isLast: (item, array) => (
|
||||
array.indexOf(item) === array.length - 1
|
||||
),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.semanticList {
|
||||
font-size: inherit;
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a:active,
|
||||
a:hover {
|
||||
/* color: unset; */
|
||||
/* text-decoration: none; */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue