pelagra/framework7-feeds

Framework7 Feeds plugin brings easy RSS feeds integration into Framework7 app.

Framework7 Feeds

Framework7 Feeds plugin brings easy RSS feeds integration into Framework7 app.

Plugin comes with easy and powerful JS API to integrate and customize RSS feeds. But in most cases you will not need to use JavaScript at all.

Installation

Just grab plugin files from dist/ folder or using bower:

bower install framework7-feeds

And link them to your app's right AFTER Framework7's scripts and styles:

<link rel="stylesheet" href="path/to/framework7.min.css">
<link rel="stylesheet" href="path/to/framework7.feeds.css">
...
<script src="path/to/framework7.min.js"></script>
<script src="path/to/framework7.feeds.js"></script>

Usage

Manual initialization

Plugin extends initiliazed app instance with new .feeds() method:

myApp.feeds(container, parameters);

• container - HTMLElement or string (with CSS Selector) of container HTML element with parsed RSS feed. Required
• parameters - object with Slider parameters. Optional

This method returns initialized Feeds instance

Parameters:

url	string	URL of RSS feed to parse and load
openIn	string	Could be `'page'` or `'popup'`. Defines how to open generated page of single feed item
formatDate	function (date)	Function to format RSS item date, this function should return string with formatted date
virtualList	object	Object with Virtual List parameters. If specified, then RSS feed will be loaded as Virtual List
customItemFields	array	Array with additional item fields (xml tags) that also should be parsed from RSS, for example `['content:encoded', 'author']`. Such custom RSS tags with colon (:) will be parsed and available in template without colon, for example, the value of `content:encoded` tag will be available in templates as `contentencoded` property.
listTemplate	string/function	Template7 template for list with RSS items
itemPageTemplate	string/function	Template7 template for single RSS item page
itemPopupTemplate	string/function	Template7 template for single RSS item popup
onAjaxStart	function(feeds)	Callback function that will be executed right before Ajax request to RSS feed
onAjaxComplete	function(feeds, response)	Callback function that will be executed when Ajax request to RSS feed will be completed

Usage example with manual initialization:

<div class="list-block my-feed"></div>

var myFeed = myApp.feeds('.my-feed', {
  url: 'http://path-to-rss.com/rss.xml',
  openIn: 'popup'
});

Automatic initialization

If you need minimal parser setup you may use automatic initialization without JavaScript at all. In this case you need to add additional feeds-init class to feeds container and specify all parameters from table above using data- attributes, for example:

<div class="list-block feeds-init" data-url="http://path-to-rss.com/rss.xml" data-openIn="page"></div>

Usage with Pull To Refresh

Feeds plugin fully compatible with Pull To Refresh component, and will automatically refresh feed on pull to refresh. No additional actions or code are required.

Demo

Plugin comes with demo example to see how it works and looks. To launch demo you need:

• install bower dependencies. Go to demo/ folder and execute in terminal bower install

Or check out live demo

Contribute

All changes should be done only in src/ folder. This project uses gulp to build a distributable version.

First you need to install all dependencies:

$ npm install

Then to build plugin's files for testing run:

$ gulp build

If you need a local server while you developing you can run:

$ gulp server

And working demo will be available at http://localhost:3000/demo/