Feed Directives

This page describes using Live Feed Directive.

Creating And Using Post World Template

The starting point of using Live Feed Directive is using a postworld template. A postworld template will do the following:-

1. Enque JQuery, Bootstrap, AngularJS and PostWorld directives
2. Activate PostWorld AngularJS app
3. Create a URL routing mechanism for a Single Page Application

A sample template exists in dev/theme/ and it includes 3 files:
search-results.php, header-postworld.php, footer-postworld.php

To Start, copy the above 3 files to the active wordpress theme, twentytwelve for example.
Then, create a wordpress page and make sure to select the template named "Search Results" That's all.

Full Life Cycle for the Live Feed Directive

Check the figure below while reading the below section.

Main App Cycle

• pwApp creates many routes, using the routeProvider, and renders the results to the ngView.
• each route uses a template defined anywhere, for example \postworld\templates\samples\ , it has all of the widgets that the different routes redirect to.
• a widget may contain any directive (such as live-feed or load-feed, etc...)or initialization settings needed by them (such as feed_settings)
• for the framework to work correctly, it has to exist in a PostWorld template as described in earlier section.

pwData Service

• The pwData Service is the connection between AngularJS Directives and the Wordpress Ajax Backend.
• Feed Settings and Feed Data for all pwApp Directives are stored in pwData.
• Template URLs are retrieved and cached in pwData for use by Directives.
• an Ajax Interface exists in pwData to route all Wordpress calls and retrieve the results and route back to the different directives.
• the $q service is used to promise and resolve all asynchronous calls, providing an easy to implement complex Asynchronous calls.

Live Feed and Load Feed Directives.

• liveFeed and loadFeed Directives share the same controller pwFeedController
• pwFeedController handles all of its operations using a single function GetNext() which is triggered on startup and on scrolling.
• Depending on which directive is running, pwFeedController starts by calling pwLiveFeed or pwLoadFeed
• When the user reaches the end of the scrolling area, pwScrollFeed is triggered.
• The $scope.items array keeps a reference to all posts, while ngRepeat handles showing all items. When the pwFeedController gets posts, adds new posts or even restarts the search after parameter change; the items array is updated and automatically the ngRepeat updates.
• The infinite scroll directive kicks in whenever the scrolling hits the end of the div [originally the window but it is modified to trigger on element instead]. The getNext function is triggered and handles the rest of the job.

Filter Feed Directive (temp)

• FilterFeed Directive is a collection of controls that work together to provide Feed_Query parameters to the pwFeedController and reset the search on the Live/Load Feed Directives.
• When Post Template changes, an even is emitted to the pwFeedController, which holds the final value of the postTemplate(feed_item_template), then pwFeedController will broadcast the template to all its children to make sure they are updated. No page refresh is necessary for this action to reflect.

Usage

Live Feed

• Ensure that you are using PostWorld Template.
• If using routing, create a url route to an html file - as in js/app.js

$routeProvider.when('/live-feed-1/',            {
       templateUrl: jsVars.pluginurl+'/postworld/templates/samples/pwLiveFeed1Widget.html',				
 });

• Create Widget File - referenced from route - and including the liveFeed definition.

<script>
	feed_settings['feed1'] = {
		preload : 10,
		load_increment : 5,
		offset: 0,
		max_posts:50,
		order_by : '-rank_score',
		panels : {
			'panel1'	: 'feed_search',	
			'panel2'	: 'feed_header',	
			'panel3'	: 'feed_register',	
		},
		view : {
			current : 'list',
			options : ['list','detail', 'grid','full']
		},
		query_args : {
			// query args in JSON format
			'year'	: '2009',
			's'	: 'two',
		},
		feed_template: 'live_feed_1',	// Optional, needed in case of different widgets [having different panels for example] 
	};	
</script>
<div live-feed='feed1' ng-include="templateUrl"></div>

• Create the liveFeed template file - taken from feed_settings['feed1'].feed_template - and retrieved from panels templates list. ex: live_feed_1 -> postworld\templates\panels\live_feed_1.html

<div>
	<div class="row" >
			<div class="form-group input-group col-md-12">		
				<h2>Live Feed - 2 Panels </h2>
			</div>
	</div>
	<div class="row" >
			<div class="form-group input-group col-md-6">		
				<div filter-feed="panel1" ng-include="templateUrl" feed-id="args.feed_id" feed-query="args.feed_query" submit="pwRestart()"></div>
			</div>
			<div class="form-group input-group col-md-6">		
				<div filter-feed="panel2" ng-include="templateUrl" feed-id="args.feed_id" feed-query="args.feed_query" submit="pwRestart()"></div>
			</div>
	</div>
    <div id="scrollMe" class="infinite-scroll">
	  <div infinite-scroll='getNext()' infinite-scroll-disabled='busy' infinite-scroll-parent>
	    <div ng-repeat='post in items' >
	    	<div feed-item ng-include="templateUrl" post="post" feed-id='args.feed_id'></div>
			<hr>
	      <div style='clear: both;'></div>
	    </div>
	    <div ng-show='busy' class="text-center"><img src="http://www.showoffimports.nl/sandbox/live/ajaxLoad.gif"></div>
	    <div ng-show='!busy' class="text-center"><strong>{{scrollMessage}}</strong></div>
	    <br><br><br>
	  </div>
  	</div>
</div>

• for each filter-feed panel, depending on its ID, a different filter-feed template is used. Name is retrieved also from the panels attribute of the feed_settings, Template is retrieved from the templates api This is a sample panel. feed_settings['feed1'].panels['panel1'] = feed_search. When getting template from API, feed_search -> /postworld/templates/panels/feed_search.html

<div style="padding:10px; background:#f2f2f2">
		<div class="row">
			<div class="form-group input-group col-md-4">
				<input type="text" class="form-control" ng-model="feedQuery.year"  ng-enter placeholder="Year (YYYY)">
			</div>
			<div class="form-group input-group col-md-4">
				<input type="text" class="form-control" ng-model="feedQuery.monthnum"  ng-enter placeholder="Month (1-12)">
			</div>
			<div class="form-group input-group col-md-4">
				<input type="text" class="form-control" ng-model="feedQuery.author_name"  ng-enter placeholder="Author Name">
			</div>
		</div>
		<div class="row">
			<div class="form-group input-group col-md-4">
				<input type="text" class="form-control" ng-model="feedQuery.post_class"  ng-enter placeholder="Post Class">
			</div>
			<div class="form-group input-group col-md-4">
				<input type="text" class="form-control" ng-model="feedQuery.posts_per_page"  ng-enter placeholder="Posts Per Page">
			</div>
		</div>
</div>