npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

framework7-plugin-feeds

v3.0.0

Published

Framework7 Feeds plugin brings easy RSS feeds integration into Framework7 app

Downloads

15

Readme

Framework7 Feeds Plugin

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 npm:

npm install framework7-plugin-feeds

And link them to your app 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

Install & Enable Plugin

After you included plugin script file, you need to install plugin before you init app:

// install plugin to Framework7
Framework7.use(Framework7Feeds);

// init app
var app = new Framework7({
  ...
})

ES Module

This plugin comes with ready to use ES module:

import Framework7 from 'framework7';
import Framework7Feeds from 'framework7-plugin-feeds';

// install plugin
Framework7.use(Framework7Feeds);

// init app
var app = new Framework7({
  ...
})

API

Plugin extends initiliazed app instance with new methods:

  • app.feeds.create(parameters) - init Feeds. This method returns initialized Feeds instance.
  • app.feeds.get(feedsEl) - get Feeds instance by HTML element. Method returns initialized Feeds instance.
  • app.feeds.destroy(feedsEl) - destroy Feeds instance

Feeds Parameters

Usage example with manual initialization:

<div class="list my-feed"></div>
var feed = app.feeds.create({
  el: '.my-feed',
  feedUrl: '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 feeds-init" data-feed-url="http://path-to-rss.com/rss.xml" data-open-in="popup"></div>

Feeds Events

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 make demo works you need to run in terminal:

$ npm run prod

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:

$ npm run build:dev

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

$ gulp server

or

$ npm run dev

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

Live Preview

https://framework7io.github.io/framework7-plugin-feeds/