Script link

q4.download-library.1.0.0.min.js

Source file

q4.download-library.js, line 2

Requires

• Mustache.js

Examples

$('.download-library').downloadLibrary({
    categoryTypes: ['Press Release', 'Presentations'],
    categoryTpl: (
        '<label for="categories">Filter :</label>' +
        '<select id="categories">' +
            '{{#.}}' +
                '<option value="{{.}}">{{.}}</option>' +
            '{{/.}}' +
        '</select>'
    ),
    onCategoryUpdate: function(inst, $el) {
        $el.find('select').on('change', function(){
            $('.controls').html('');
            inst._getDownloads( $(this).val() );
        });
    },
    dataTypes { 
        "Press Release": {
           api: '/Services/PressReleaseService.svc/GetPressReleaseList',
           name: 'GetPressReleaseListResult',
           options:{
               pressReleaseSelection: 3,
               pressReleaseBodyType: 3
           },
           embedCategories: false,
           showFilters: true,
           includeYears: true,
           minYear: 2010,
           filterTpl: (
               '<label for="">Filter:</label>' +
               '<select id="data-category">' +
                   '<option value="">All Releases</option>' +
                   '{{#types}}' +
                       '<option value="{{tag}}">{{title}}</option>' +
                   '{{/types}}' +
               '</select>' +
               '<label for="">Years:</label>' +
               '<select id="data-year">' +
                   '{{#years}}' +
                       '<option value="{{.}}">{{.}}</option>' +
                   '{{/years}}' +
               '</select>'
           ),
           defaultTitle: 'All Press Releases',
           types: [
               { tag: 'dividend', title: 'Dividend Releases' },
               { tag: 'earnings', title: 'Earnings Releases' }
           ],
           afterFiltersLoad: function(inst) {
               var _ = this,
                   $select = inst.element.find('.controls select');
       
               $select.on('change', function(){
                   inst._getDownloads( 'Press Release', {
                       TagList: $select.filter('#data-category').find('option:selected').val().length ? [ $select.filter('#data-category').find('option:selected').val() ] : [],
                       year: $select.filter('#data-year').find('option:selected').val(),
                       pressReleaseSelection: 3,
                       pressReleaseBodyType: 3
                   });
               });
           },
           tpl: (
               '<ul>' +
                   '<li class="heading">' +
                       '<span>Date</span>' +
                       '<span>Headline</span>' +
                       '<span>Format</span>' +
                   '</li>' +
                   '{{#items}}' +
                       '<li>' +
                           '<span>{{date}}</span>' +
                           '<span>{{title}}</span>' +
                           '<span>' +
                               '<a href="{{url}}">link</a>' +
                               '{{#doc}}<a href="{{doc}}">pdf</a>{{/doc}}' +
                           '</span>' +
                       '</li>' +
                   '{{/items}}' +
               '</ul>'
           ),
           dataTemplate: function(data) {
               return {
                   title: data.Headline,
                   date: $.datepicker.formatDate( 'M d, yy', new Date( data.PressReleaseDate ) ),
                   url: data.LinkToDetailPage,
                   doc: data.DocumentPath
               };
           }
        },
        "Presentations" : {...}
    }
});

Options

loading string

HTML appended during loading / trasitions

Example

'<img src="http://q4widgets.q4web.com/ajax-loader.gif" alt="loading..." />'

dateformat string

A date format string to use with jQuery UI's Datepicker.

Example

'M d, yy'

docContainer string

Class name for where to append the docuemnts

Example

'.documents'

controlContainer string

Class name for where to append the controls (i.e Tag selector / Year selector)

Example

'.controls'

categoryContainer string

Class name for where to append the categories generated using the `categoryTpl` and `categoryTypes`

Example

'.categories'

categoryTypes array

An array of all category types for the document library These names will link to an property inside the `dataTypes` object These items will be passed into the `categoryTpl` This is required

Example

['Presentations', 'Annual Reports', 'Press Release']

categoryTpl string

Template to generate diffenert category types Used with @onCategoryUpdate to generate different lists of documents

Example

categoryTypes: (
  '<label for="categories">Filter :</label>' +
  '<select id="categories">' +
    '{{#.}}' +
      '<option value="{{.}}">{{.}}</option>' +
    '{{/.}}' +
  '</select>'
)

onCategoryUpdate function

An array of all category types for the document library These names will link to an property inside the `dataTypes` object These items will be passed into the `categoryTpl`

Example

onCategoryUpdate: function(inst, $el) {
  $el.find('select').on('change', function(){
    $('.controls').html('');
    inst._getDownloads( $(this).val() );
  });
}

dataTypes object

Required configuration for the different document types. View the full example at the top.

Parameters

api string

url for the api

name string

default object string

options object

api options

embedCategories boolean

group items by tags

showFilters boolean

will trigger the `filterTpl`

includeYears boolean

Will include a year array as part of `filterTpl`

minYear number

defaults to last 5 years

defaultTitle string

includes a title which can be used inside `tpl`

types array

used with `embedCategories` & `filterTpl`

afterFiltersLoad function

attach event handlers to any filters used

tpl string

Template to render this download type

dataTemplate function

edit api data for use with `tpl`

Example

api: '/Services/PressReleaseService.svc/GetPressReleaseList'

Example

name: 'GetPressReleaseListResult'

Example

options: { pressReleaseSelection: 3, pressReleaseBodyType: 3 }

Example

embedCategories: true

Example

showFilters: true

Example

includeYears: true

Example

minYear: 2010

Example

defaultTitle: 'Q4 Inc Press Releases'

Example

types: [ { tag: 'dividend', title: 'Dividend Releases' }, { tag: 'earnings', title: 'Earnings Releases' }],

Example

afterFiltersLoad

Example

tpl

Example

dataTemplate