:sparkles: address #56 | adding check for route #

vue-theme/src/pages/list.vue

@@ -31,16 +31,19 @@ import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'
 
+const TIMEOUT = 1
+
 export default {
     components: { sidebar, featuredImage, card },
     props: {
         sidebar: { type: Boolean },
         grid: { type: Boolean },
-        sortBy: { type: String }
+        sortBy: { type: String },
     },
     mixins: [postTypeGetters, scrollTop],
     computed: {
-        type() { // Checks for type and fixes Episodes route edge case 
+        type() {
+            // Checks for type and fixes Episodes route edge case
             return typeFromRoute(this.$route)
         },
         dispatchName() {
@@ -49,45 +52,54 @@ export default {
         },
         loaded() {
             let type = convertTitleCase(this.type)
-            if(!type) return
+            if (!type) return
             return this[`all${type}Loaded`]
         },
         posts() {
             let type = convertTitleCase(this.type)
-            if(!type) return
+            if (!type) return
             return this[`all${type}`]
         },
     },
     methods: {
         getPosts() {
             // Sorting
-            let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
+            let sort = this.sortBy
+                ? this.sortBy
+                : this.$route.path.split('/').pop()
             // !: BUG
             // if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null
-            if(Object.values(sortTypes).includes(sort)) {
+            if (Object.values(sortTypes).includes(sort)) {
                 console.log('trying to sort by:', sort)
-                console.log(`sortTypes includes ${sort}:`, Object.values(sortTypes).includes(sort))
+                console.log(
+                    `sortTypes includes ${sort}:`,
+                    Object.values(sortTypes).includes(sort),
+                )
             }
-            
+
             // Don't dispatch if there's no type
-            if(this.type && this.dispatchName) {
+            if (this.type && this.dispatchName) {
                 this.$store.dispatch(this.dispatchName, sort)
             }
         },
         async checkAndSetHero(type) {
-            if(!this['allPagesLoaded']) {
+            if (!this['allPagesLoaded']) {
                 await this.$store.dispatch('getAllPages')
             }
             const page = this.allPages[type]
-            if(!page) return
-            
+            if (!page) return
+
             let json = { url: page.featured, heroType: 'image' }
-            if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
+            if (
+                page.hero &&
+                JSON.parse(page.hero) &&
+                JSON.parse(page.hero).url
+            ) {
                 json = JSON.parse(page.hero)
                 json.heroType = 'video'
             }
             // No featured or youTube
-            if(!json.url) {
+            if (!json.url) {
                 json.heroType = null
             }
             // Set the hero text to the post title or excerpt
@@ -95,66 +107,48 @@ export default {
 
             this.$store.commit('SET_HERO', json)
         },
+        scrollTo(hashtag) {
+            setTimeout(() => {
+                location.href = hashtag
+            }, TIMEOUT)
+        },
     },
     watch: {
-        async $route(to, from){
+        async $route(to, from) {
             // console.log(this.sidebar)
             let type = convertTitleCase(this.type)
             let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
             this.checkAndSetHero(this.type)
             // console.log('---')
             // console.log(sort)
-            if(!this[`all${type}Loaded`] || sort) this.getPosts()
+            if (!this[`all${type}Loaded`] || sort) this.getPosts()
+        },
+    },
+    mounted() {
+        if (this.$route.hash) {
+            setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
         }
     },
     created() {
         let type = convertTitleCase(this.type)
         console.log(`${type} already loaded?:`, this[`all${type}Loaded`])
-        
+
         this.checkAndSetHero(this.type)
-        
-        if(!this[`all${type}Loaded`]) this.getPosts()
-    }
+
+        if (!this[`all${type}Loaded`]) this.getPosts()
+    },
 }
 </script>
 
 <style lang="postcss">
-@import '../sss/variables.sss'
-@import '../sss/theme.sss'
-.page--list
-    /* background-color: white */
-    article
-        > header
-            /* padding: 1em 0 1em 0 */
-            padding: 1em
-            > h1
-                margin: 0
-            > .content
-                padding: 0
-                width: 100%
-        /* posts not grid list */
-        ul
-            img
-                max-width: 50%
-
-        .is-grid
-            display: flex
-            flex-direction: row
-            flex-wrap: wrap
-            justify-content: space-between
-            /* extra padding required? */
-            /* padding: $ms-0 */
-            /* background-color: white */
-            section
-                width: 32.5%
-                /* 4 column grid see how dense this becomes */
-                /* width: 24% */
-            ul
-                flex-wrap: wrap
-                list-style: none
-                img
-                    max-width: 100%
-@media (min-width: $medium)
-    .page--list.f-col
-        flex-direction: row
-</style>
+@import '../sss/variables.sss' @import '../sss/theme.sss' .page--list
+    /* background-color: white */ article > header /* padding: 1em 0 1em 0 */
+    padding: 1em > h1 margin: 0 > .content padding: 0 width: 100%
+    /* posts not grid list */ ul img max-width: 50% .is-grid display: flex
+    flex-direction: row flex-wrap: wrap justify-content: space-between
+    /* extra padding required? */ /* padding: $ms-0 */
+    /* background-color: white */ section width: 32.5%
+    /* 4 column grid see how dense this becomes */ /* width: 24% */ ul flex-wrap:
+    wrap list-style: none img max-width: 100% @media (min-width: $medium)
+    .page--list.f-col flex-direction: row;
+</style>

vue-theme/src/pages/single.vue

@@ -48,43 +48,47 @@ import breadcrumb from '@/components/breadcrumb'
 import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, dePluralize, typeFromRoute } from '@/utils/helpers'
- 
+
+const TIMEOUT = 1
+
 export default {
     components: { sidebar, gallery, credits, card, breadcrumb },
     props: {
         sidebar: { type: Boolean },
-        id: { type: Number }
+        id: { type: Number },
     },
     mixins: [postTypeGetters, scrollTop],
     data() {
         return {
             // Gallery control
             activeGalleryIndex: -1,
-            activeImageID: -1
+            activeImageID: -1,
         }
     },
     computed: {
-        type() { // Checks for type and fixes Episodes route edge case
+        type() {
+            // Checks for type and fixes Episodes route edge case
             return typeFromRoute(this.$route)
         },
         /**
          * We get the actual post data using the slug
          */
         post() {
-            if(!this[this.type]) return
+            if (!this[this.type]) return
 
             const type = dePluralize(this.type)
 
             // State not a getter!
-            const singleOfTypeFromState = this[this.type][`single${convertTitleCase(type)}`]
+            const singleOfTypeFromState =
+                this[this.type][`single${convertTitleCase(type)}`]
 
-            if(!singleOfTypeFromState) return
+            if (!singleOfTypeFromState) return
 
             return singleOfTypeFromState
         },
 
         idsForGallery() {
-            if(!this.post || this.activeGalleryIndex < 0) return []
+            if (!this.post || this.activeGalleryIndex < 0) return []
             return this.post.galleries[this.activeGalleryIndex].ids
         },
         /**
@@ -94,7 +98,7 @@ export default {
          * image size and url information returned by post.attached
          */
         imagesInGallery() {
-            if(!this.activeGalleryIndex < 0) return {}
+            if (!this.activeGalleryIndex < 0) return {}
 
             return this.idsForGallery.reduce((imageMap, id) => {
                 imageMap[id] = this.post.attached[parseInt(id)]
@@ -102,15 +106,23 @@ export default {
             }, {})
         },
         activeImageIndex() {
-            return Object.keys(this.imagesInGallery).indexOf(this.activeImageID.toString())
+            return Object.keys(this.imagesInGallery).indexOf(
+                this.activeImageID.toString(),
+            )
         },
         p2pPostsByType() {
-            return this.post ? Object.values(this.post.relatedto).reduce((byType, relatedPost) => {
-                if(!byType[relatedPost.type]) byType[relatedPost.type] = []
-                byType[relatedPost.type].push(relatedPost)
-                return byType
-            }, {}) : {}
-        }
+            return this.post
+                ? Object.values(this.post.relatedto).reduce(
+                      (byType, relatedPost) => {
+                          if (!byType[relatedPost.type])
+                              byType[relatedPost.type] = []
+                          byType[relatedPost.type].push(relatedPost)
+                          return byType
+                      },
+                      {},
+                  )
+                : {}
+        },
     },
     methods: {
         /**
@@ -121,16 +133,26 @@ export default {
          * @param {string} imageInfo
          */
         openGallery(imageInfo) {
-            const byIndex = this.post.galleries.reduce((byIndex, gallery, index) => {
-                byIndex[index] = gallery.ids
-                return byIndex
-            }, {})
+            const byIndex = this.post.galleries.reduce(
+                (byIndex, gallery, index) => {
+                    byIndex[index] = gallery.ids
+                    return byIndex
+                },
+                {},
+            )
             let matchingIndex = 0
             Object.keys(byIndex).forEach(galleryIndex => {
-                if(byIndex[galleryIndex].includes(parseInt(imageInfo.dataset.id))) matchingIndex = galleryIndex
+                if (
+                    byIndex[galleryIndex].includes(
+                        parseInt(imageInfo.dataset.id),
+                    )
+                )
+                    matchingIndex = galleryIndex
             })
             this.activeGalleryIndex = matchingIndex
-            this.activeImageID = imageInfo.dataset.id ? parseInt(imageInfo.dataset.id) : parseInt(imageInfo.className.split('-').pop())
+            this.activeImageID = imageInfo.dataset.id
+                ? parseInt(imageInfo.dataset.id)
+                : parseInt(imageInfo.className.split('-').pop())
         },
         closeGallery() {
             this.activeGalleryIndex = this.activeImageID = -1
@@ -142,28 +164,32 @@ export default {
          * @param {object} posts
          */
         checkAndSetHero(post) {
-            if(!post) return
+            if (!post) return
 
             let json = { url: post.featured, heroType: 'image' }
-            if(post.hero && JSON.parse(post.hero) && JSON.parse(post.hero).url) {
+            if (
+                post.hero &&
+                JSON.parse(post.hero) &&
+                JSON.parse(post.hero).url
+            ) {
                 json = JSON.parse(post.hero)
                 json.heroType = 'video'
             }
             // No featured or youTube
-            if(!json.url) {
+            if (!json.url) {
                 json.heroType = null
             }
             // Set the hero text to the post title
             json.text = post.title
-            
+
             this.$store.commit('SET_HERO', json)
         },
-        
+
         /**
          * Date Object from unix strings from db
          */
         dateFrom(unix) {
-            return new Date( parseInt(unix) * 1000 )
+            return new Date(parseInt(unix) * 1000)
         },
 
         async loadPostData() {
@@ -173,27 +199,38 @@ export default {
              * !: posts watcher fires when this finishes
              */
             let type = convertTitleCase(this.type)
-            
-            if(!this.$store.state[this.type]) return 
+
+            if (!this.$store.state[this.type]) return
 
             let allPostsOfType = this.$store.state[this.type].all
 
             /**
              * Load posts if they're not already in state
              */
-            if(!this[`all${type}Loaded`] && allPostsOfType.length < 1) {
+            if (!this[`all${type}Loaded`] && allPostsOfType.length < 1) {
                 const res = await this.$store.dispatch(`getAll${type}`)
                 allPostsOfType = res
                 // console.log(`reloaded ${type}...`)
             }
 
-            if(Object.values(allPostsOfType).length < 1) return
-            const singlePostData = Object.values(allPostsOfType).filter(post => post.slug == this.$route.params.slug)[0]
+            if (Object.values(allPostsOfType).length < 1) return
+            const singlePostData = Object.values(allPostsOfType).filter(
+                post => post.slug == this.$route.params.slug,
+            )[0]
 
-            if(!singlePostData) return
+            if (!singlePostData) return
 
-            await this.$store.dispatch(`getSingle${dePluralize(type)}`, singlePostData.id)
-        }
+            await this.$store.dispatch(
+                `getSingle${dePluralize(type)}`,
+                singlePostData.id,
+            )
+        },
+
+        scrollTo(hashtag) {
+            setTimeout(() => {
+                location.href = hashtag
+            }, TIMEOUT)
+        },
     },
     watch: {
         post(newVal, oldVal) {
@@ -201,92 +238,36 @@ export default {
         },
         $route(newVal, oldVal) {
             this.loadPostData()
+        },
+    },
+    mounted() {
+        if (this.$route.hash) {
+            setTimeout(() => this.scrollTo(this.$route.hash), TIMEOUT)
         }
     },
     async created() {
         await this.loadPostData()
         this.checkAndSetHero(this.post)
-    }
+    },
 }
 </script>
 
 <style lang="postcss">
-@import '../sss/variables.sss'
-@import '../sss/theme.sss'
-.page--single
-    /* background-color: $cia_white2 */
-    article
-        background-color: white
-        padding: $ms-0
-        h1
-            color: $cia_black
-            /* font-weight: 800 */
-            /* padding: $ms--3 0 */
-        > ul
-            /* grid-gap: $ms-0 */
-            list-style: none
-            /* change to a 1/3 width of the article*/
-            img.feature
-                width: 20em 
-            li
-        /* iframe container 16:9 */
-        .iframe-container 
-            position: relative
-            width: 100% 
-            padding-bottom: 56.25% 
-
-        /* iframe container portrait */
-        .iframe-container-v
-            position: relative
-            width: 100%
-            height: 100%
-            padding-bottom: 125%
-            
-        iframe 
-            position: absolute 
-            top: 0px 
-            left: 0px 
-            width: 100% 
-            height: 100%
-        
-        .wp-block-embed .is-type-video
-            position: relative
-            width: 100% 
-            padding-bottom: 56.25% 
-
-        * hr
-            border: $ms--3
-            margin: $ms-2 auto
-            outline-style: auto
-
-            &.is-style-default
-                height: 1px
-                width: 15vw
-
-            &.is-style-wide
-                height: 1px
-                width: 50vw
-        
-            &.is-style-dots
-                outline-style: none
-                font-weight: bolder
-
-        breadcrumb
-            h5
-                /* color: yellow */
-                color: $cia_red
-                /* font-weight: 400 */
-                /* padding: $ms--6 0 */
-        
-        //- end of article icon
-        footer
-            padding: $ms-6 0
-            img
-                height: $ms-3
-                width: $ms-3
-
-        
-@media (min-width: $medium)
-    .page--single.f-col
-        flex-direction: row
-</style>
+@import '../sss/variables.sss' @import '../sss/theme.sss' .page--single
+    /* background-color: $cia_white2 */ article background-color: white padding:
+    $ms-0 h1 color: $cia_black /* font-weight: 800 */ /* padding: $ms--3 0 */ >
+    ul /* grid-gap: $ms-0 */ list-style: none
+    /* change to a 1/3 width of the article*/ img.feature width: 20em li
+    /* iframe container 16:9 */ .iframe-container position: relative width: 100%
+    padding-bottom: 56.25% /* iframe container portrait */ .iframe-container-v
+    position: relative width: 100% height: 100% padding-bottom: 125% iframe
+    position: absolute top: 0px left: 0px width: 100% height: 100%
+    .wp-block-embed .is-type-video position: relative width: 100% padding-bottom:
+    56.25% * hr border: $ms--3 margin: $ms-2 auto outline-style: auto
+    &.is-style-default height: 1px width: 15vw &.is-style-wide height: 1px width:
+    50vw &.is-style-dots outline-style: none font-weight: bolder breadcrumb h5
+    /* color: yellow */ color: $cia_red /* font-weight: 400 */
+    /* padding: $ms--6 0 */ //- end of article icon
+    footer padding: $ms-6 0 img height: $ms-3 width: $ms-3 @media
+    (min-width: $medium) .page--single.f-col flex-direction: row;
+</style>