Script link

q4.blog.1.0.7.min.js

Source file

q4.blog.js, line 2

Requires

• Mustache.js

Options

url string

The feed URL for the site. No setup is needed, simply use the client's q4web domain name after /news/.

Example

https://q4modules.herokuapp.com/news/q4sandbox

pressReleaseCategoryName string

The user-friendly name of the custom press release category containing the blog posts.

Default value

Press%20Releases

Example

pressReleaseCategoryName: 'Blog'

tag Array.<string>

A list of tags to filter by. Use this option to load the blog with a preset tag filter.

Default value

[]

categories Array.<string>

A list of predefined blog categories. Categories will not render in the category filter list unless they are defined here. Each category tag listed should match the format of how it is saved in the CMS.

Default value

[]

Example

categories: ['category-1', 'Category-2', 'category_3']

featuredTag string

A tag used for another purpose outside of the blog widget, for example a list of featured blog posts in a slider on another page. The word used in this option will not be visible in the categories/keywords filters or within the main template.

Example

featuredTag: 'homepage'

params Object

An object containing the parameters for our Press Release API.

Common options are:

Default value

{"pressReleaseSelection":3,"pressReleaseBodyType":0,"pressReleaseCategoryWorkflowId":"cb807d2-208f-4bc3-9133-6a9ad45ac3b0"}

Parameters

pressReleaseSelection number

Values are 0 = Future, 1 = Past, 2 = DateRange, 3 = ALL

pressReleaseBodyType number

Values are 0 = IncludeNoBody, 1 = IncludeShortAndFullBody, 2 = IncludeFullBody, 3 = IncludeShortBody

pressReleaseCategoryWorkflowId number

Specifies the workflow ID of the press release category you wish to use.

year number

Value of -1 will return all years.

noItems string

A message to show when there are no items.

Default value

<p><i class="q4-icon_warning-line"></i> No blog items found.</p>

loadingMessage string

A message to show when the widget is loading. This is also triggered when a new filter is selected.

Default value

<p class="module_loader"><i class="q4-icon_spinner"></i><span class="sr-only">Loading ...</span></p>

items number

The number of blog posts per page. Used with the pagination feature.

Default value

10

loadingClass string

A CSS class to add to the widget while data is loading.

firstPostClass string

A string for first item class.

Default value

module_item--first

defaultStartIndex number

Set the index to load the blog items from. This will allow you to skip a set number of blog posts before rendering the list. The start index is always 0 by default. For example, a featured post may be shown in a page header section, setting the start index to 1 would mean the list of blog posts starts at the second post - thus preventing a the first post from being duplicated (once in the header and again in the list). This index will reset if any filtering actions are taken.

shortBodyLength number

Set the number of characters to limit the short body.

Default value

500

bodyLength number

Set the number of characters to limit the body.

Default value

0

months Array.<string>

A list months. This option can be used to overwrite the default month format for the Archive feature. Additionally, it can be used to overwrite the month language.

Default value

["January","February","March","April","May","June","July","August","September","October","November","December"]

formatDate string

Set the date format to use (datepicker)

Default value

MM d, yy

dateRegion string

Set the date region to use (datepicker). This is for multi-language support.

Example

dateRegion: "fr"

listTpl string

A Mustache.js template for a single blog post.

'{{#.}}' +
'{{#.}}' +
'<div class="module_item">' +
    '<div class="module_thumbnail">' +
        '{{#thumb}}' +
            '<img src="{{thumb}}" alt="{{title}}" />' +
        '{{/thumb}}' +
    '</div>' +
    '<div class="module_item-content">' +
        '<div class="module_headline"><a class="module_headline-link" href="{{url}}">{{{title}}}</a></div>' +
        '<div class="module_date">{{date}}</div>' +
        '<div class="module_body">{{shortBody}}</div>'+
        '<div class="module_category">' +
            '{{#category}}'+
                '<span>{{modified}}</span>'+
            '{{/category}}' +
        '</div>'+
        '<div class="keywords">' +
            '{{#keywords}}' +
                '<span>{{modified}}</span>' +
            '{{/keywords}}' +
        '</div>' +
    '</div>' +
'</div>' +
'{{/.}}'
'{{/.}}'

search Array.<Object>

Options for the search feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

url string

Overwrite the URL used to get search results data. Example: '?category=Blog&body=0&callback=?&search='

selector string

The CSS selector for the search results input container. Default is: '.blog-search'.

onSearch function

A callback that fires after the full widget has loaded for the first time.

search:{
  enable: true,
  url: '',
  selector: '.module-blog_search',
  onSearch: function(inst){
     var o = inst.options;
     $(this.selector).find('span').on('click', function(e){
         var $search = $(this).closest(o.search.selector),
         text = $search.find('input:text').val();
         if(text.length) {
             inst.getSearchResults(text);
             $(o.pagination.selector).hide();
             location.hash = 'search';
             return false;
         }
         e.preventDefault();
     });
     
     $(this.selector).find('input').on('keypress', function(e){
         var text = $(this).val(),
         $search = $(this).closest(o.search.selector);
         if(e.which == 13) {
             e.preventDefault();
         }
         if(e.which == 13 && text.length) {
             $search.find('span').trigger('click');
         }
     });
  }
}

keywordList Array.<Object>

Options for the keywords feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

url string

Overwrite the URL used to get the list of tags. Example: '/tags?category=Blog'

selector string

The CSS selector for the container. Default is: '.blog-keywords ul'.

tpl string

A Mustache.js template for the keyword items. This will render inside the selector.

onItemComplete function

A callback that fires after the feature has rendered for the first time.

keywordList: {
  enable: true,
  url: '',
  selector: '.module-blog_keywords ul',
  tpl:(
    '<li data-tag="all">All</li>' +
    '{{#.}}' +
      '<li data-tag="{{id}}">{{name}}</li>' +
    '{{/.}}'
  ),
  onItemComplete: function(inst){
    var o = inst.options;
    $(this.selector).on('click', 'li', function(){
      location.hash = '';
      inst.onPageLoad();
      o.defaultStartIndex = null;
      if ($(this).data('tag') != "all"){
        inst.getBlogList({
          year: -1,
          TagList: [$(this).data('tag')],
          ItemCount: -1
        });
        $(o.pagination.selector).hide();
      } else {
        inst.getBlogList({
            year: -1
        });
        $(o.pagination.selector).show();
      }
    });
  }
}

categoryList Array.<Object>

Options for the categories feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

showAllCategories boolean

Force the widget to render all categories listed in the category option, even if they do not exist on any press releases. Default is: false.

url string

Overwrite the URL used to get the list of tags. Example: '/tags?category=Blog'

selector string

The CSS selector for the container. Default is: '.blog-categories ul'.

tpl string

A Mustache.js template for the category items. This will render inside the selector.

onItemComplete function

A callback that fires after the feature has rendered for the first time.

categoryList: {
  enable: false,
  url: '',
  showAllCategories: false,
  selector: '.module-blog_categories ul',
  tpl:(
    '<li data-tag="all">All</li>' +
    '{{#.}}' +
      '<li data-tag="{{id}}">{{name}}</li>' +
    '{{/.}}'
  ),
  onItemComplete: function(inst){
    var o = inst.options;
    $(this.selector).on('click', 'li', function(){
      location.hash = '';
      inst.onPageLoad();
      o.defaultStartIndex = null;
      if ($(this).data('tag') != "all"){
        inst.getBlogList({
          year: -1,
          TagList: [$(this).data('tag')],
          ItemCount: -1
        });
        $(o.pagination.selector).hide();
      } else {
        inst.getBlogList({
            year: -1
        });
        $(o.pagination.selector).show();
      }
    });
  }
}

archiveList Array.<Object>

Options for the archive feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

url string

Overwrite the URL used to get the list of months/years. Example: '/archive?category=Blog'

selector string

The CSS selector for the container. Default is: '.blog-archive ul'.

tpl string

A Mustache.js template for the archive items. This will render inside the selector.

onItemComplete function

A callback that fires after the feature has rendered for the first time.

archiveList:{
  enable: true,
  url: '',
  selector: '.module-blog_archive ul',
  tpl:(
      '<li data-tag="all">All</li>' +
      '{{#.}}' +
        '<li data-start="{{start}}" data-end="{{end}}" data-tag="{{month}}-{{year}}">' +
          '<span>{{month}} {{year}} ({{total}})</span>' +
        '</li>' +
      '{{/.}}'
  ),
  onItemComplete: function(inst){
    var o = inst.options;
    $(this.selector).on('click', 'li', function(){
      location.hash = '';
      inst.onPageLoad();
      o.defaultStartIndex = null;
      if ($(this).data('tag') != "all"){
          inst.getBlogList({
            year: -1,
            pressReleaseSelection: 2,
            startDate: '/Date(' + $(this).data('start') + ')/',
            endDate: '/Date(' + $(this).data('end') + ')/',
            ItemCount: -1
          }, 0, -1);
          $(o.pagination.selector).hide();
      } else {
        inst.getBlogList({
            year: -1
        });
        $(o.pagination.selector).show();
      }
    });
  }
}

yearList Array.<Object>

Options for the year list feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

selector string

The CSS selector for the container. Default is: '.blog-years ul'.

tpl string

A Mustache.js template for the year items. This will render inside the selector.

onItemComplete function

A callback that fires after the feature has rendered for the first time.

yearList:{
  enable: true,
  selector: '.module-blog_years ul',
  tpl:(
    '{{#GetPressReleaseYearListResult}}' +
        '<li>{{.}}</li>' +
    '{{/GetPressReleaseYearListResult}}'
  ),
  onItemComplete: function(inst){
    var o = inst.options;
    $(this.selector).on('click', 'li', function(){
      inst.onPageLoad();
      o.defaultStartIndex = null;
      inst.getBlogList({
        pressReleaseSelection: 3,
        year: $(this).text()
      }, 0, -1);
      $(o.pagination.selector).hide();
    });
  }
}

pagination Array.<Object>

Options for the pagination feature.

Parameters

enable boolean

Enable or disable the feature. Default is: true.

selector string

The CSS selector for the container. Default is: '.blog-years ul'.

tpl string

A Mustache.js template for the pagination. This will render inside the selector.

pagination: {
  enable: true,
  selector: '.module-blog_pagination',
  tpl: (
    '<div class="showing">Showing <span>{{perPer}}</span> of {{total}} Posts</div>' +
    '<span class="prev disabled">< Previous</span>' +
    '<div class="numbers">' +
        '<ul>' +
            '{{#pageArr}}<li>{{.}}</li>{{/pageArr}}' +
        '</ul>' +
    '</div>' +
    '<span class="next">Next ></span>'
  )
}

onFirstLoad function

A callback that fires when after the blog list has rendered for the first time.

Parameters

inst Event

The widget instance.

items Object

The blog post items that were rendered.

onListComplete function

A callback that fires each time the blog list is loaded.

Parameters

inst Event

The widget instance.

blogList Object

The blog post items that were rendered.

onBlogCreate function

A callback that fires when the blog is first created, before anything has been rendered.

Parameters

inst Event

The widget instance.