adding featured images and fix comments for v2

INSTALLATION.md

@@ -48,7 +48,7 @@ There are two config files, ```config.json``` for the application configuration
 
 ### Installing the Web service
 
-Install this plugin <https://wordpress.org/plugins/json-rest-api/> (only version 1.2.x) to your WordPress website then add the address to the ```config.json``` file:
+Install this plugin <https://wordpress.org/plugins/rest-api/> (v2.x) to your WordPress website then add the address to the ```config.json``` file:
 
 ```
 "api": {

config.json.dist

@@ -127,7 +127,8 @@
     "post": {
         "comments": {
             "enabled": true,
-            "depth": 2
+            "depth": 2,
+            "per_page": 50
         },
         "cache": {
             "maxAge": 172800000,
@@ -148,7 +149,7 @@
     "posts": {
         "posts_per_page": 6,
         "orderby": "date",
-        "orderby": "desc",
+        "order": "desc",
         "post_status": "publish",
         "cache": {
             "capacity": 25,

lib/directives/comment/comment.html

@@ -1,8 +1,8 @@
 <div>
     <ion-item class="item-avatar item-text-wrap comment">
-        <img wphc-img-cache ng-src="{{::commentCtrl.comment.author.avatar}}" ng-if="::commentCtrl.comment.author.avatar">
+        <img wphc-img-cache ng-src="{{::commentCtrl.comment.author_avatar_urls[96]}}" ng-if="::commentCtrl.comment.author_avatar_urls[96]">
         <h2>{{::commentCtrl.comment.author.name}}</h2>
-        <div class="comment-content" bind-and-compile-html="::commentCtrl.comment.content"></div>
+        <div class="comment-content" bind-and-compile-html="::commentCtrl.comment.content.rendered"></div>
         <p class="text-muted" am-time-ago="::commentCtrl.comment.date"></p>
         <wphc-comment ng-if="commentCtrl.comment.children.length" ng-repeat="comment in commentCtrl.comment.children" comment="comment" class="level-{{::comment.level}}"></wphc-comment>
     </ion-item>

lib/directives/comments/comments.coffee

@@ -14,10 +14,11 @@ module.exports = angular.module('wordpress-hybrid-client.directives').directive
         depth = _.get($WPHCConfig, 'post.comments.depth') || 2
         $WPHCPost.getComments vm.postId
             .then (comments) ->
+                console.log('comments', comments)
                 if !comments.lenght
                     vm.comments = []
                 commentsTemp = []
-                for comment in comments by -1
+                for comment in comments
                     commentsTemp[comment.id] = comment
                     comment.children = []
                     if comment.parent is 0

lib/directives/post/post.coffee

@@ -9,7 +9,12 @@ module.exports = angular.module('wordpress-hybrid-client.directives').directive
     template: require './post.html'
     bindToController: true
     controllerAs: 'postCtrl'
-    controller: ($WPHCConfig) ->
+    controller: ($WPHCConfig, $WPHCPost) ->
         vm = @
+        vm.featured_image = undefined
         vm.enabled = _.get($WPHCConfig, 'post.comments.enabled')
+        $WPHCPost.getFeatureImage vm.post.featured_image
+        .then (image) ->
+            return if !image
+            vm.featured_image = image.media_details.sizes.medium.source_url
         return @

lib/directives/post/post.html

@@ -1,8 +1,9 @@
 <div class="post padding">
-    <div class="item item-image" ng-if="::postCtrl.post.featured_image.is_image" wphc-img-background-cache="{{postCtrl.post.featured_image.attachment_meta.sizes.medium.url}}">
+    <div class="item item-image" ng-if="::postCtrl.post.featured_image != 0" wphc-img-background-cache="{{::postCtrl.featured_image}}">
         <div class="img-border"></div>
         <h1 class="item-title" ng-bind-html="::postCtrl.post.title.rendered"></h1>
     </div>
+    <h1 class="item-title item-title-without-image" ng-if="::postCtrl.post.featured_image == 0" ng-bind-html="::postCtrl.post.title.rendered"></h1>
     <div class="item item-divider item-toolbar">
         <wphc-post-toolbar post="::postCtrl.post" show-share show-bookmark></wphc-post-toolbar>
     </div>

lib/directives/post/style.scss

@@ -5,14 +5,22 @@
         margin-bottom: 20px;
         margin-top: -10px;
     }
+
     .item-toolbar {
         margin: 15px 0;
     }
+
+    .item-title-without-image {
+        line-height: 35px;
+        margin-top: 10px;
+    }
+
     section.footer {
         text-align: center;
         border-top: 1px solid $gray-lighter;
         padding-top: 15px;
         margin-top: 5px;
+
         .button-open-browser {
 
         }

lib/directives/posts/posts.coffee

@@ -7,10 +7,24 @@ Display posts list
 @example
 "<pre></pre>"
 ###
-module.exports = angular.module('wordpress-hybrid-client.directives').directive 'wphcPosts', ($log) ->
+module.exports = angular.module('wordpress-hybrid-client.directives').directive 'wphcPosts', () ->
     restrict: 'E'
     transclude: true
     scope:
         posts: "="
-        layout: '='
     template: require './posts.html'
+    bindToController: true
+    controllerAs: 'postCtrl'
+    controller: ($log, $scope, $WPHCPost) ->
+        vm = @
+        vm.featureImages = []
+
+        $scope.$watchCollection 'postCtrl.posts', (newValue, oldValue) ->
+            return if !newValue
+            _.each newValue, (post) ->
+                return if vm.featureImages[post.id]
+                $WPHCPost.getFeatureImage post.featured_image
+                .then (image) ->
+                    return if !image
+                    vm.featureImages[post.id] = image.media_details.sizes.medium.source_url
+        return @

lib/directives/posts/posts.html

@@ -1,7 +1,7 @@
 <div list="posts">
-    <div class="list card card-posts repeat-animation" ng-repeat="post in posts track by $index">
+    <div class="list card card-posts repeat-animation" ng-repeat="post in postCtrl.posts track by $index">
         <div ui-sref="public.post(::{ id: post.id })">
-            <div class="item item-image" ng-if="::post.featured_image.is_image" wphc-img-background-cache="{{post.featured_image.attachment_meta.sizes.medium.url}}">
+            <div class="item item-image" ng-if="::post.featured_image != 0" wphc-img-background-cache="{{::postCtrl.featureImages[post.id]}}">
                 <div class="img-border"></div>
                 <h1 class="item-title" ng-bind-html="::post.title.rendered"></h1>
                 <div ng-if="::post.sticky" class="sticky-post badge badge-stable">
@@ -10,7 +10,7 @@ <h1 class="item-title" ng-bind-html="::post.title.rendered"></h1>
                 </div>
                 <!-- <img ng-src="{{post.featured_image.attachment_meta.sizes.medium.url}}"> -->
             </div>
-            <div class="item item-text-wrap" ng-if="::!post.featured_image.is_image">
+            <div class="item item-text-wrap" ng-if="::post.featured_image == 0">
                 <h1 class="item-title" ng-bind-html="::post.title.rendered"></h1>
                 <div ng-if="::post.sticky" class="sticky-post badge badge-stable">
                     <i class="icon ion-star"></i>

lib/post/post.service.coffee

@@ -1,6 +1,6 @@
 md5 = require 'MD5'
 
-module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPost', ($log, $wpApiPosts, $wpApiComments, $q, $WPHCConfig, CacheFactory) ->
+module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPost', ($log, $wpApiPosts, $wpApiMedia, $wpApiComments, $q, $WPHCConfig, CacheFactory) ->
     $log.info '$WPHCPost'
 
     getCommentsCache = () ->
@@ -13,6 +13,12 @@ module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPo
             return CacheFactory.get 'post'
         CacheFactory 'post', _.get $WPHCConfig, 'post.cache'
 
+    getFeatureImage: (featureImageId) ->
+        return $q.when(null) if !featureImageId or featureImageId is 0
+        return $wpApiMedia.get featureImageId
+        .then (response) ->
+            response.data
+
     getComments: (id) ->
         deferred = $q.defer()
         hash = md5 $WPHCConfig.api.baseUrl + id
@@ -25,6 +31,9 @@ module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPo
                 post: id
                 status: "approved"
                 type: "comment"
+                orderby: 'date'
+                order: 'asc'
+                per_page: _.get($WPHCConfig, 'post.comments.per_page') || 50
             .then (response) ->
                 getCommentsCache().put 'item-comments-' + hash, response.data
                 deferred.resolve response.data

lib/posts/posts.service.coffee

@@ -15,10 +15,10 @@ module.exports = angular.module('wordpress-hybrid-client.posts')
         getQuery: (page) ->
             page: page
             "_embed": true
-            "filter[posts_per_page]": $WPHCConfig.posts.posts_per_page
-            "filter[orderby]": $WPHCConfig.posts.orderby
-            "filter[order]": $WPHCConfig.posts.order
-            "filter[post_status]": $WPHCConfig.posts.post_status
+            "filter[posts_per_page]": _.get($WPHCConfig, 'posts.per_page') || 5
+            "filter[orderby]": _.get($WPHCConfig, 'posts.orderby') || 'date'
+            "filter[order]": _.get($WPHCConfig, 'posts.order') || 'desc'
+            "filter[post_status]": _.get($WPHCConfig, 'posts.post_status') || 'publish'
 
         getList: (query) ->
             queryString = JSON.stringify query

package.json

@@ -94,6 +94,6 @@
     "moment": "^2.9.0",
     "ng-cordova": "^0.1.20-alpha",
     "v-accordion": "~1.3.1",
-    "wp-api-angularjs": "^2.0.0-alpha2"
+    "wp-api-angularjs": "^2.0.0-alpha3"
   }
 }