Merge branch 'master' of ssh://gitea.yvvas.com:4022/craft-in-america/vue-wp

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -51,6 +51,25 @@ class Make_Endpoint_For extends WP_REST_Controller {
         return new WP_REST_Response( $this->prepare_item_for_response($args), 200 );
     }
 
+    private function _getAttachments($item) {
+        // Get media
+        $attached = array();
+            
+        // Image sizes you want
+        $desiredSizes = ['thumbnail', 'medium', 'large', 'full'];
+        
+        foreach ( get_attached_media( '', $item->ID ) as $attached_media ):
+            $imageSizes = array();
+            foreach ( $desiredSizes as $size ):
+                $imageSizes[$size] = wp_get_attachment_image_url($attached_media->ID, $size);
+            endforeach;
+            // store size:url map under image id
+            $attached[$attached_media->ID] = $imageSizes;
+        endforeach;
+
+        return $attached;
+    }
+
     public function prepare_item_for_response( $args ) {
         $collection = array();
         
@@ -63,16 +82,11 @@ class Make_Endpoint_For extends WP_REST_Controller {
                 parse_blocks( $item->post_content )
             );
 
-            // Get media
-            $media_ids = [];
-            foreach (get_attached_media( '', $item->ID ) as $attached_media):
-                array_push($media_ids, $attached_media->ID);
-            endforeach;
-            $filtered[attached] = $media_ids;
+            $filtered[attached] = $this->_getAttachments($item);
             
             // Galleries From blocks
-            $galleries = [];
-            foreach (get_attached_media( '', $item->ID ) as $attached_media):
+            $media_ids = array();
+            foreach ( get_attached_media( '', $item->ID ) as $attached_media ):
                 array_push($media_ids, $attached_media->ID);
             endforeach;
             $filtered[galleries] = get_ids_from_gallery_block(

plugins/cia-post-types/cia-post-types.php

@@ -56,6 +56,7 @@ class PostType {
         ];
         
         if( $this->post_type == 'artist' ) { $args['taxonomies'] = ['category']; }
+        if( $this->post_type == 'event' ) { $args['taxonomies'] = ['type']; }
 
         register_post_type( $this->post_type, $args );
     }

plugins/cia-post-types/includes/custom-types.php

@@ -1,18 +1,23 @@
 <?php
     function get_all_custom_types() {
         return [
-            // 'customtype',
             'artist',
             'episode',
+            'event',
+                // 'talk',
+            
             // 'short',
-            // 'talk',
-            // 'object',
+                // 'technique',
+            
+                // 'object',
+
             // 'guide',
-            // 'event',
+
             // 'exhibition',
-            // 'technique',
-            // 'profile',
+            
             // 'publication',
+                // 'profile',
+            
             // 'release',
             // 'article',
             // 'product'
@@ -30,9 +35,7 @@
             case 'short':
                 return 'dashicons-video-alt3';
                 break;
-            case 'talk':
-                return 'dashicons-format-chat';
-                break;
+
             case 'object';
                 return 'dashicons-visibility';
                 break;

vue-theme/package.json

@@ -15,35 +15,35 @@
   "author": "TOJ",
   "license": "UNLICENSED",
   "devDependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.9.0",
-    "@vue/compiler-sfc": "^3.0.2",
-    "axios": "^0.19.2",
-    "babel-loader": "^8.1.0",
+    "@babel/preset-env": "^7.12.11",
+    "@vue/compiler-sfc": "^3.0.5",
+    "axios": "^0.21.1",
+    "babel-loader": "^8.2.2",
     "css-loader": "^3.6.0",
-    "file-loader": "^6.1.1",
+    "file-loader": "^6.2.0",
     "postcss-calc": "^7.0.5",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "precss": "^4.0.0",
     "pug": "^2.0.4",
-    "pug-plain-loader": "^1.0.0",
+    "pug-plain-loader": "^1.1.0",
     "style-loader": "^2.0.0",
     "sugarss": "^2.0.0",
-    "url-loader": "^4.0.0",
+    "url-loader": "^4.1.1",
     "vue-hot-reload-api": "^2.3.4",
-    "vue-loader": "^16.0.0-beta.8",
+    "vue-loader": "^16.1.2",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.44.2",
+    "webpack": "^4.45.0",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.1"
   },
   "dependencies": {
     "compression-webpack-plugin": "^3.1.0",
-    "vue": "^3.0.2",
-    "vue-router": "^4.0.0-rc.1",
-    "vuex": "^4.0.0-beta.4"
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.2",
+    "vuex": "^4.0.0-rc.2"
   },
   "babel": {
     "presets": [

vue-theme/src/components/gallery.vue

@@ -1,18 +1,11 @@
 <template lang="pug">
 .gallery.active.f-col.center
     button(@click="hideGallery").hide hide
-    
-    .wrap(v-if="allMediaLoaded")
-        p image: {{ imageIds[activeImageIndex] }}
-        p {{ imageIds }}
-        p {{ allMedia }}
-    .loading(v-else)
-        p loading...
 
-    ul
-        li(v-for="(image, i) of images" :class="{ active: i === selected }")
-            .image-wrapper.f-col.center
-                img(:src="image")
+    figure.f-col.center
+        img(v-if="selectedImageUrl" :src="selectedImageUrl")
+        p placeholder caption
+
     .controls.f-row
         button(@click="prev") left
         .f-grow
@@ -26,11 +19,21 @@ export default {
     props: {
         imageIds: { type: Array, required: true },
         activeImageIndex: { type: Number, default: 0 },
-        activeGalleryIndex: { type: Number },
+        imageSizes: { required: true }
     },
     data() { 
         return {
-            selected: -1
+            selected: 0
+        }
+    },
+    computed:{
+        selectedImageId() {
+            return this.imageIds[this.selected]
+        },
+        selectedImageUrl() {
+            const image = this.imageSizes[this.selectedImageId]
+            if(!image) return
+            return image.large
         }
     },
     computed: {
@@ -98,18 +101,7 @@ export default {
             z-index: 1011
         button.hide
             z-index: 1100
-        ul
-            list-style: none
-            li
-                display: none
-                &.active
-                    display: block
-                .image-wrapper
-                    height: 100%
-                    width: 50vw
-                    background-color: yellow
-                h1
-                    color: green
+
         .controls
             position: absolute
             width: 100vw

vue-theme/src/components/navigation/navigation.vue

@@ -9,16 +9,16 @@ nav.main.f-row.center
         li.f-grow
             p  
         li
-            router-link(to="/")
+            router-link(:to="`/`")
                 p.t-up home
         li
-            router-link(to="/posts")
+            router-link(:to="`/posts`")
                 p.t-up news
         li
-            router-link(to="/artists")
+            router-link(:to="`/artists`")
                 p.t-up artists
         li
-            router-link(to="/episodes")
+            router-link(:to="`/episodes`")
                 p.t-up episodes
 </template>
 

vue-theme/src/pages/index.vue

@@ -3,25 +3,25 @@
 .page--index.f-row.between
     article.f-grow
         .f-row
-            section(v-if="allEpisodesLoaded").shadow
+            section(v-if="allEpisodesLoaded && allEpisodes.length").shadow
                 router-link(:to="`./episodes`")
                     h4.t-cap episodes
                 router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
                     p {{ Object.values(allEpisodes)[0].title }}
 
-            section(v-if="allArtistsLoaded").shadow
+            section(v-if="allArtistsLoaded && allArtists.length").shadow
                 router-link(:to="`./artists`")
                     h4.t-cap artists
                 router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
                     p {{ Object.values(allArtists)[0].title }}
                     
-            section(v-if="allPagesLoaded").shadow
+            section(v-if="allPagesLoaded && allPages.length").shadow
                 h4.t-cap pages
                 router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")
                     p {{ Object.values(allPages)[0].title }}
         
         .f-row
-            section(v-if="allPostsLoaded").shadow
+            section(v-if="allPostsLoaded && allPosts.length").shadow
                 router-link(:to="`./posts`")
                     h4.t-cap posts
                 router-link(:to="{ path: `/posts/${Object.values(allPosts)[0].slug}` }")

vue-theme/src/pages/list.vue

@@ -7,7 +7,7 @@
                 h1  sorted by {{ sortBy.replace('-', ' ') }}
 
         .posts(:class="{ 'is-grid': isGrid }")
-            section(v-for="post in posts").shadow
+            section(v-for="post in posts" :key="post.slug").shadow.post
                 router-link(:to="`/${type}/${post.slug}`")
                     h4 {{ post.title }} 
                     p(style="font-size: 9px;") {{ post.date }}

vue-theme/src/pages/single.vue

@@ -1,32 +1,28 @@
 <template lang="pug">
 .page--single.f-row.between
-    article.f-grow.shadow
+    article(v-if="post").f-grow.shadow
         header
-            h1 {{ type }}:{{ $route.params.slug }} single
-            p categories: 
-                span(v-for="category in post.categories") {{ category }}&nbsp;
+            h1 {{ type }}:{{ $route.params.slug }} {{ post.title }}
+            p categories: {{ post.categories }}
 
-        section(v-if="post")
-            h4 {{ post.title }}
-            p {{ activeGalleryIndex }}
-            .block-wrapper(v-for="(block, i) in post.blocks")
-                    //- ?: are objects are always gallery blocks
-                    .gallery.block(v-if="typeof block === 'object'")
-                        p gallery number: {{ i }}
-                        ul
-                            li(v-for="(imageID, j) in post.galleries[block.gallery].ids") 
-                                button(@click="openGallery(i - 1, j)") gallery: {{ i }} image: {{ imageID }}
-                        //- Fullscreen gallery
-                        gallery(
-                            v-if="activeGalleryIndex == (i - 1)"
-                            :activeGalleryIndex="activeGalleryIndex"
-                            :image-ids="post.galleries[block.gallery].ids"
-                            :activeImageIndex="activeImageIndex"
-                            v-on:close="activeGalleryIndex = -1"
-                        )
+        .post-single.block-wrapper(v-for="(block, i) in post.blocks" :key="`block-${i}`")
+            //- ?: are objects are always gallery blocks
+            .gallery.block(v-if="typeof block === 'object'")
+                p gallery number: {{ i }}
+                ul
+                    li(v-for="(imageID, j) in post.galleries[block.gallery].ids") 
+                        button(@click="openGallery(i - 1, j)") gallery: {{ i }} image: {{ imageID }}
+                //- Fullscreen gallery
+                gallery(
+                    v-if="activeGalleryIndex == (i - 1)"
+                    :image-ids="post.galleries[block.gallery].ids"
+                    :activeImageIndex="activeImageIndex"
+                    v-on:close="activeGalleryIndex = -1"
+                    :image-sizes="post.attached"
+                )
 
-                    //- Just a regular block
-                    .block(v-else v-html="block")
+            //- Just a regular block
+            .block(v-else v-html="block")
 
     sidebar(v-if="sidebar" :type="`${type}`")
         .shadow
@@ -100,6 +96,14 @@ export default {
 
             const json = JSON.parse(post.hero)
             this.$store.commit('SET_HERO', json)
+        },
+        async checkAndSetImages(posts) {
+            const post = posts[this.$route.params.slug]
+            if(!post || ! post.attached) return
+
+            const imagesAttached = post.attached
+            await this.$store.dispatch(`getMediaById`, imagesAttached)
+            console.log(this.$store.media)
         }
     },
     watch: {
@@ -108,11 +112,12 @@ export default {
             // this.checkForImages(newVal)
             
             this.checkAndSetHero(newVal)
+            this.checkAndSetImages(newVal)
         }
     },
     created() {
         let type = convertTitleCase(this.$route.params.type)
-        this.$store.dispatch(`getMediaById`, [7])
+        
         if(!this[`all{type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)

vue-theme/src/router/index.js

@@ -4,7 +4,7 @@ import routes from './routes'
 import { convertTitleCase } from '@/utils/helpers'
 
 const router = createRouter({
-    history: createWebHistory('/'),
+    history: createWebHistory(),
     routes
 })