# RSS Reader App

This is an RSS reader application using jQuery.

## Demo

[**Import RSS Reader App to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=64082ab2e78885eb0ea02f45)

**Tested Environment**

* Android 9.0
* iOS 12.2

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfayQAMZ5W6TktXTQwa%2F-Mfayp5MeClhyH4YtT5c%2Fimage.png?alt=media\&token=5d573e31-76d0-48ad-8d72-32feb138c845)

## File Components

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-MfayQAMZ5W6TktXTQwa%2F-Mfayslibr1mrmsRFT-X%2Fimage.png?alt=media\&token=9cea0b93-db15-43e5-baa5-b0bf63c1364a)

| File                   | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `index.html`           | The Startup page where RSS feeds will be loaded |
| `loading.gif`          | A loading image file                            |
| `README.md`            | A README file about this template               |
| `js/feed-reader.js`    | A JavaScript file for retrieving the RSS feeds  |
| `js/phpjs_LICENSE.txt` | A license file (You can ignore this file.)      |
| `css/style.css`        | Style Sheet for the application                 |

## Required JS/CSS Components

* `jQuery`

## Required Cordova Plugins

* `InAppBrowser`                                             

## HTML Explanation

### index.html

`index.html` is the Startup page.

The HTML body of this file is simply a placeholder of a `loading.gif`, the feed list and error message.

## JavaScript Explanation

### index.html

As soon as the application starts, the RSS feeds retrieval also begins. While loading the content of RSS feeds, `loading.gif` file is displayed. The following JavaScript code is used to invoke the RSS feeds retrieval function. This function is defined in `feed-reader.js` file which will be explained later in this page. You can try changing the RSS feeds URL.

```javascript
...
//RSS Feeds URL
Feed.feedUrl = "http://feeds.bbci.co.uk/news/technology/rss.xml";

$(function() {
    Feed.load();
});
...
```

### feed-reader.js

When the RSS feeds retrieval function (`Feed.load()`) is called, the following JavaScript code is executed:

```javascript
...
Feed.prototype.load = function() {
    var self = this;

    $(this.maskEl).show();
    $(this.errorEl).text('');

    $.ajax({
        url: this.url,
        dataType: 'text',
        crossDomain: true,
        success: function(data) {
            data = $.parseXML(data.trim());

            $(self.listEl).empty();

            // Display RSS contents
            var $rss = $(data);
            $rss.find('item').each(function() {
                var item = this;
                $(self.listEl).append(self.createListElement(item));
            });
        },
        error: function() {
            $(self.errorEl).text('Failed to load RSS.');
        },
        complete: function() {
            $(self.maskEl).hide();
        }
    });
};
...
```

If the function is successfully executed, the retrieved RSS feed will be displayed on the home screen.

The following JavaScript code corresponds to the display arrangement of RSS feeds in the Home screen (`index.html`):

```javascript
...
Feed.prototype.createListElement = function(item) {
    var $item = $(item);

    var link = this.escape($item.find('link').text());
    var title = this.escape($item.find('title').text());
    var description = this.escape(strip_tags($item.find('description').text()));
    var date = new Date($item.find('pubDate').text());

    return '<li class="feed-item" data-link="' + link + '">' +
        '<time>' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</time>' +
        '<h2>' + title + '</h2><p>' + description + '</p></li>';
};
...
```

RSS feeds are displayed in a listview format. If you tap each item of this feed, InAppBrowser will launch and transition to the specified URL.

The following JavaScript code corresponds to the above function:

```javascript
...
Feed.prototype.addClickHandler = function() {
    $(this.listEl).on('click', 'li', function() {
        var url = $(this).data('link');

        if (/^http/.test(url)) {
            var ref = window.open(url, '_blank', 'location=yes');
            ref.addEventListener("exit", function() {});
        } else {
            alert('Invalid URL.');
        }
    });
};
...
```