Change theme:   

Edicy blog article pages fetcher

It is a jquery plugin that communicates with article api using AJAX and fetches list with pagination.

Example articles listing

Loading ...

Code

Get jquery.articlePages.js from Github edicy-jsplugins.

Article box template for rendering one article box:
<script type="text/html" id="article-box-template">
  <div class="article-box">
    <div class="article-head">
      <a href="[[url]]">
        <span class="title">[[title]]</span>
      </a>
      <span class="date">[[date]]</span>
    </div>
    <div class="article-content">
        <p>[[excerpt]]</p>
        <p>[[body]]</p>
    </div>
  </div>
</script>  
HTML used in example:
<style type="text/css">
  .article-box, #page-numbers a { background: #def; padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; }
  #page-numbers a { padding: 5px; display: inline-block; margin-right: 5px; }
  #page-numbers a.active { background: #789; color: white; }
</style> 

<div id="article-page-example"><!-- articles will be rendered here --></div>
<span id="page-numbers"></span><!-- navigation controls -->
<span id="loading-status">Loading ...</span> <!-- simple loding indicator --> 
Javascript initiation:
NB!
Current api does not return maximum number of articles or pages, so number of articles must be passed from template. on blog listing page it can be retrieved with liquid tag {{ articles.size }} as in example. 

<!-- plugin needs jQuery to work -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.articlePages.js"></script> 
<script type="text/javascript">
// initiates articles with 5 articles per page and $('#article-page-example').articlePages({ perPage: 5, nr_articles: {{ articles.size }} }); // geting pagelinks jQuery object and adding it into suitable dom element
$('#page-numbers').append($('#article-page-example').articlePages('getPageLinks')); // binding very simple loading indicator $('#article-page-example').on({ 'articles.loading': function() { $('#loading-status').html('Loading ...'); }, 'articles.loaded': function() { $('#loading-status').html(''); } }); </script> 

Configuration

Available tempate replacement strings:

[[url]]: url of article
[[title]]: title of article
[[excerpt]]: article excerpt
[[date]]: date of article. defult format is (2013-11-01), but can be redefined in option dateFormat
[[author]]: author of article
[[body]]: the main article body

Available options on initiation:

$('#article-page-example').articlePages({
    template: "#article-box-template", // element of template
    perPage: 10, // how many articles per page
    dateFormat: function(date) {
        // for formating date object into string
        return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
    },
    nr_articles: {{ articles.size }}, // maximum number of articles must be passed from template to get pagination numbers. if omitted numbers will not be displayed between navigation arrows
    pageId: 123, // if multiple blogs are present on site adding blog listing page here limits results to that blog 
    tags: ["news", "releases"], // limits results to blog posts with given tags
    older: "older &gt;", // older button text
    newer: "&lt; newer" // newer button text
});

Additional actions

jQueryElement.articlePages('prev'): navigates to previous older page
jQueryElement.articlePages('next')navigates to next newer page
jQueryElement.articlePages('showPage', nr)navigates to page number "nr"
jQueryElement.articlePages('getPageLinks'): returns pagelinks jQuery object
jQueryElement.articlePages('getObject'): returns whole control object if ever needed