Framework7 Feeds plugin brings easy RSS feeds integration into Framework7 app.
JavaScript HTML CSS PHP
Latest commit 72d390e Aug 21, 2015 @nolimits4web 1.0.1 Release
Permalink
Failed to load latest commit information.
demo 1.0.1 Release Aug 21, 2015
dist 1.0.1 Release Aug 21, 2015
src Switch .html to .text Dec 8, 2014
.gitignore 1.0.1 Release Aug 21, 2015
.jshintrc First commit Dec 8, 2014
CHANGELOG.md 1.0.1 Release Aug 21, 2015
LICENSE First commit Dec 8, 2014
README.md 1.0.1 Release Aug 21, 2015
bower.json 1.0.1 Release Aug 21, 2015
gulpfile.js 1.0.1 Release Aug 21, 2015
package.json 1.0.1 Release Aug 21, 2015

README.md

devDependency Status Flattr this git repo

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/