Merge pull request #85 from shprink/feature/wp-api_v2

Closes #76

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/bookmark/bookmark.html

@@ -4,8 +4,8 @@
         <wphc-empty-list list="bookmarkCtrl.posts" text="bookmark.emptyList" icon="ion-bookmark"></wphc-empty-list>
         <wphc-loader ng-if="!bookmarkCtrl.posts"></wphc-loader>
         <div class="list">
-            <div class="item item-button-right" collection-repeat="post in bookmarkCtrl.posts" ui-sref="public.post({ id: post.ID, post: post })">
-                <span ng-bind-html="post.title"></span>
+            <div class="item item-button-right" collection-repeat="post in bookmarkCtrl.posts" ui-sref="public.post({ id: post.id, post: post })">
+                <span ng-bind-html="post.title.rendered"></span>
                 <p class="text-muted">{{post.bookmarked | amTimeAgo}}</p>
                 <button class="button button-clear button-light button-large action-remove" ng-click="$event.stopPropagation(); bookmarkCtrl.remove(post)">
                     <i class="icon ion-close-round"></i>

lib/bookmark/bookmark.service.coffee

@@ -15,7 +15,7 @@ module.exports = angular.module('wordpress-hybrid-client.bookmark')
         isBookmarked: (post) ->
             list = getCache().get 'list'
             test = _.findWhere list,
-                ID: post.ID
+                id: post.id
             test?
 
         toggle: (post) ->
@@ -26,7 +26,7 @@ module.exports = angular.module('wordpress-hybrid-client.bookmark')
         remove: (post) ->
             list = getCache().get 'list'
             _.remove list,
-                ID: post.ID
+                id: post.id
             getCache().put 'list', list
             $cordovaToast.showShortBottom($filter('translate') 'bookmark.removed') if _.get $window, 'plugins.toast'
 

lib/cordova/cordova.pushNotifications.coffee

@@ -55,7 +55,7 @@ module.exports = angular.module 'wordpress-hybrid-client.cordova'
                     switch notification.event
                         when 'registered'
                             return if !notification.regid.length
-                            $log.debug 'registration ID', notification.regid
+                            $log.debug 'registration id', notification.regid
                             register('Android', notification.regid).success ->
                                 $log.info 'Push notif Token stored'
                             break

lib/directives/author/author.coffee

@@ -0,0 +1,13 @@
+module.exports = angular.module('wordpress-hybrid-client.directives').directive 'wphcAuthor', ($log) ->
+    restrict: 'E'
+    transclude: false
+    replace: true
+    scope:
+        author: "="
+        date: "="
+    template: require './author.html'
+    bindToController: true
+    controllerAs: 'authorCtrl'
+    controller: ($log, $scope, $element) ->
+        vm = @
+        return @

lib/directives/author/author.html

@@ -0,0 +1,5 @@
+<div class="item item-author" ng-class="::{'item-avatar' : authorCtrl.author.avatar_urls[96]}">
+    <img wphc-img-cache ng-src="{{::authorCtrl.author.avatar_urls[96]}}" ng-if="::authorCtrl.author.avatar_urls[96]">
+    <h2>{{::authorCtrl.author.name}}</h2>
+    <span ng-if="::authorCtrl.date">{{authorCtrl.date | amDateFormat:'LL'}}</span>
+</div>

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,11 +14,12 @@ 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
-                    commentsTemp[comment.ID] = comment
+                for comment in comments
+                    commentsTemp[comment.id] = comment
                     comment.children = []
                     if comment.parent is 0
                         comment.level = 1

lib/directives/directives.module.coffee

@@ -13,6 +13,7 @@ require "./hideWhen/hideWhen.coffee"
 require "./showWhen/showWhen.coffee"
 require "./comments/comments.coffee"
 require "./comment/comment.coffee"
+require "./author/author.coffee"
 require "./loader/loader.coffee"
 require "./posts/posts.coffee"
 require "./post/post.coffee"

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,22 +1,19 @@
 <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"></h1>
+        <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>
-    <div class="item item-author" ng-class="::{'item-avatar' : postCtrl.post.author.avatar}">
-        <img wphc-img-cache ng-src="{{::postCtrl.post.author.avatar}}" ng-if="::postCtrl.post.author.avatar">
-        <h2>{{::postCtrl.post.author.name}}</h2>
-        {{postCtrl.post.date | amDateFormat:'LL'}}
-    </div>
-    <div class="post-content" ng-if="::postCtrl.post.excerpt" bind-and-compile-html="::(postCtrl.post.content | prepLink | highlight)"></div>
+    <wphc-author author="::postCtrl.post._embedded.author[0]" date="::postCtrl.post.date"></wphc-author>
+    <div class="post-content" ng-if="::postCtrl.post.excerpt" bind-and-compile-html="::(postCtrl.post.content.rendered | prepLink | highlight)"></div>
 
     <div class="item item-divider item-toolbar">
         <wphc-post-toolbar post="::postCtrl.post" show-share show-bookmark></wphc-post-toolbar>
     </div>
-    <wphc-comments post-id="{{::postCtrl.post.ID}}" ng-if="::postCtrl.enabled"></wphc-comments>
+    <wphc-comments post-id="{{::postCtrl.post.id}}" ng-if="::postCtrl.enabled"></wphc-comments>
     <section class="footer">
         <a class="button button-positive button-open-browser" wphc-href href="{{::postCtrl.post.link}}">
             {{'post.openInBrowser' | translate}}

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/postToolbar/postToolbar.coffee

@@ -12,6 +12,7 @@ module.exports = angular.module('wordpress-hybrid-client.directives').directive
         @isBookmarked = $WPHCBookmark.isBookmarked @post
         @hasBookmark = angular.isDefined $attrs.showBookmark
         @hasShare = angular.isDefined $attrs.showShare
+        @terms = @post._embedded['http://v2.wp-api.org/term'];
         @showTaxonomies = (translation, list, term) ->
             $WPHCTaxonomies.showTaxonomiesInModal translation, list, term
         @bookmark = () ->

lib/directives/postToolbar/postToolbar.html

@@ -1,8 +1,8 @@
 <div class="wphc-post-toolbar">
-    <button class="button button-clear" ng-if="::postToolbarCtrl.post.terms.category.length" ng-click="postToolbarCtrl.showTaxonomies( 'categories.title', postToolbarCtrl.post.terms.category, 'category') ">
+    <button class="button button-clear" ng-if="::postToolbarCtrl.terms[0].length" ng-click="postToolbarCtrl.showTaxonomies( 'categories.title', postToolbarCtrl.terms[0], 'category') ">
         <i class="icon ion-folder"></i>
     </button>
-    <button class="button button-clear" ng-if="::postToolbarCtrl.post.terms.post_tag.length" ng-click="postToolbarCtrl.showTaxonomies( 'tags.title', postToolbarCtrl.post.terms.post_tag, 'post_tag') ">
+    <button class="button button-clear" ng-if="::postToolbarCtrl.terms[1].length" ng-click="postToolbarCtrl.showTaxonomies( 'tags.title', postToolbarCtrl.terms[1], 'post_tag') ">
         <i class="icon ion-pricetags"></i>
     </button>
     <button ng-if="::postToolbarCtrl.hasShare" class="button button-clear pull-right" ng-click="postToolbarCtrl.share('native', postToolbarCtrl.post.title, postToolbarCtrl.post.link) ">

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,28 +1,24 @@
 <div list="posts">
-    <div class="list card card-posts repeat-animation" ng-repeat="post in 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="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 != 0" wphc-img-background-cache="{{::postCtrl.featureImages[post.id]}}">
                 <div class="img-border"></div>
-                <h1 class="item-title" ng-bind-html="::post.title"></h1>
+                <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>
                     <span>{{'posts.featured' | translate}}</span>
                 </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">
-                <h1 class="item-title" ng-bind-html="::post.title"></h1>
+            <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>
                     <span>{{'posts.featured' | translate}}</span>
                 </div>
             </div>
-            <div class="item item-author" ng-class="::{'item-avatar' : post.author.avatar}">
-                <img wphc-img-cache ng-src="{{::post.author.avatar}}" ng-if="::post.author.avatar">
-                <h2>{{::post.author.name}}</h2>
-                {{post.date | amDateFormat:'LL'}}
-            </div>
-            <div class="item item-text-wrap" ng-if="::post.excerpt" ng-bind-html="::post.excerpt"></div>
+            <wphc-author author="::post._embedded.author[0]" date="::post.date"></wphc-author>
+            <div class="item item-text-wrap" ng-if="::post.excerpt.rendered" ng-bind-html="::post.excerpt.rendered"></div>
         </div>
         <div class="item item-divider item-footer">
             <wphc-post-toolbar post="::post" show-share show-bookmark></wphc-post-toolbar>

lib/directives/taxonomies/taxonomies.html

@@ -1,5 +1,5 @@
 <div class="list">
-    <a class="item item-icon-left repeat-animation" ng-class="::{'active disabled': isCurrentState(taxonomy.slug)}" ng-disabled="isCurrentState(taxonomy.slug)" ui-sref="public.taxonomies.slug({ slug: taxonomy.slug, term: term })" ng-repeat="taxonomy in taxonomies | orderBy:['count']:true track by taxonomy.ID"
+    <a class="item item-icon-left repeat-animation" ng-class="::{'active disabled': isCurrentState(taxonomy.slug)}" ng-disabled="isCurrentState(taxonomy.slug)" ui-sref="public.taxonomies.slug({ slug: taxonomy.slug, term: term })" ng-repeat="taxonomy in taxonomies | orderBy:['count']:true track by taxonomy.id"
     ng-click="triggerOnClick(taxonomy)">
         <h2 ng-bind-html="taxonomy.name"></h2>
         <small class="balanced" bind-and-compile-html="::(taxonomy.description | prepLink)"></small>

lib/index.coffee

@@ -9,10 +9,8 @@ require 'angular-moment'
 require 'angular-filter'
 require 'moment'
 require './font/font.coffee'
-
-# lodash is a restangular dependency that is bundled in wp-api-angularjs.bundle
 require 'expose?_!lodash'
-require 'wp-api-angularjs/dist/wp-api-angularjs.bundle'
+require 'wp-api-angularjs'
 
 # Style entry point
 require './scss/bootstrap'
@@ -71,18 +69,9 @@ app.config require('./config/ionic.config.coffee');
 REST CONF
 ###
 app.config ($WPHCConfig, WpApiProvider) ->
-    RestangularProvider = WpApiProvider.getRestangularProvider()
-    RestangularProvider.setDefaultHttpFields
+    WpApiProvider.setDefaultHttpProperties
         timeout: _.get($WPHCConfig, 'api.timeout') || 5000
-    RestangularProvider.setBaseUrl _.get($WPHCConfig, 'api.baseUrl') || null
-    RestangularProvider.setFullResponse true
-    RestangularProvider.addResponseInterceptor (data, operation, what, url, response, deferred) ->
-        data.wpApiHeaders =
-            total: response.headers 'X-WP-Total'
-            pages: response.headers 'X-WP-TotalPages'
-        data
-    RestangularProvider.setRestangularFields
-        id: "ID"
+    WpApiProvider.setBaseUrl _.get($WPHCConfig, 'api.baseUrl') || null
 
 ###
 TRANSLATION CONF

lib/post/post.html

@@ -1,5 +1,5 @@
 <ion-view>
-    <ion-nav-title>{{ post.post.title | translate}}</ion-nav-title>
+    <ion-nav-title>{{ post.post.title.rendered | translate}}</ion-nav-title>
     <wphc-loader ng-if="!post.post" on-load="post.init"></wphc-loader>
     <ion-content>
         <wphc-post post="post.post" ng-if="post.post"></wphc-post>

lib/post/post.service.coffee

@@ -1,6 +1,6 @@
 md5 = require 'MD5'
 
-module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPost', ($log, $wpApiPosts, $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
@@ -21,13 +27,16 @@ module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPo
         if itemCache
             deferred.resolve itemCache
         else
-            $wpApiPosts.one(id).getList('comments')
+            $wpApiComments.getList
+                post: id
+                status: "approved"
+                type: "comment"
+                orderby: 'date'
+                order: 'asc'
+                per_page: _.get($WPHCConfig, 'post.comments.per_page') || 50
             .then (response) ->
-                data = _.filter response.data.plain(),
-                    status: 'approved'
-                    type: 'comment'
-                getCommentsCache().put 'item-comments-' + hash, data
-                deferred.resolve data
+                getCommentsCache().put 'item-comments-' + hash, response.data
+                deferred.resolve response.data
             .catch (error) ->
                 deferred.reject error
         deferred.promise
@@ -40,7 +49,8 @@ module.exports = angular.module('wordpress-hybrid-client.post').factory '$WPHCPo
         if itemCache
             deferred.resolve itemCache
         else
-            $wpApiPosts.$get id
+            $wpApiPosts.get id,
+                "_embed": true
             .then (response) ->
                 getPostCache().put 'item-' + hash, response
                 deferred.resolve response

lib/posts/posts.service.coffee

@@ -14,10 +14,11 @@ module.exports = angular.module('wordpress-hybrid-client.posts')
 
         getQuery: (page) ->
             page: page
-            "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
+            "_embed": true
+            "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
@@ -28,7 +29,7 @@ module.exports = angular.module('wordpress-hybrid-client.posts')
             if listCache
                 deferred.resolve listCache
             else
-                $wpApiPosts.$getList query
+                $wpApiPosts.getList query
                 .then (response) ->
                     response.isPaginationOver = (response.data.length is 0 or response.data.length < $WPHCConfig.posts.posts_per_page)
                     getCache().put 'list-' + hash, response