rf-feed-base.tmpl

{% define "content" %}
<link rel="import" href="/dist/iron-collapse/iron-collapse.html">
<link rel="import" href="/dist/iron-icon/iron-icon.html">
<link rel="import" href="/dist/iron-icons/iron-icons.html">
<link rel="import" href="/dist/iron-signals/iron-signals.html">
<link rel="import" href="/dist/iron-pages/iron-pages.html">
<link rel="import" href="/dist/more-routing/more-routing.html">
<link rel="import" href="/dist/paper-fab/paper-fab.html">
<link rel="import" href="/dist/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/dist/paper-ripple/paper-ripple.html">
<link rel="import" href="/dist/polymer/polymer.html">
<link rel="import" href="/dist/pushstate-anchor/pushstate-anchor.html">
<link rel="import" href="/dist/more-routing/more-route-template-helpers.html">
<link rel="import" href="/dist/more-routing/more-routing.html">

<link rel="import" href="/component/rf-api">
<link rel="import" href="/component/rf-app-scaffold">
<link rel="import" href="/component/rf-feed">

<dom-module id="rf-feed-base">
    <style>
.drawer-menu a {
    color: var(--text-primary-color);
    text-decoration: none;
    min-height: 20px;
    font-size: 16px;

    @apply(--layout-horizontal);
    @apply(--layout-center);
}

.drawer-menu .submenu {
    margin-left: 16px;
}

.drawer-menu .submenu a {
    font-size: 14px;
}

.drawer-menu paper-icon-button.item {
    padding: 8px;
    margin-left: 4px;
}

rf-app-scaffold /deep/ .main-title-container paper-fab {
    position: fixed;
    right: 50px;
    top: 32px;
    z-index: 1;
    background: white;
}

rf-app-scaffold /deep/ .main-title-container paper-fab.notify {
    background: var(--paper-fab-notify-background);
    color: var(--text-primary-color-inverse);
}

rf-app-scaffold /deep/ .main-title-container paper-icon-button {
    margin-top: -8px;
    margin-left: -8px;
}

/deep/ .feed-favicon {
    margin-right: 5px;
}
    </style>
    <template>
        <rf-app-scaffold narrow="{{ narrow }}">
            <div class="drawer-title">Feeds</div>
            <div class="drawer-menu">
                <div hidden$="[[  _computeHideFeedItems(feeds) ]]">
                    <a is="pushstate-anchor" href="[[ feedUrlFor('favorite') ]]" class="item">
                        <span>Favorite</span>
                        <paper-ripple></paper-ripple>
                    </a>

                    <div class="layout horizontal center">
                        <paper-icon-button icon="expand-more" expands="popular-feeds" class="item" on-tap="onToggleExpand"></paper-icon-button>
                        <a is="pushstate-anchor" href="[[ feedUrlFor('popular:all') ]]" class="layout horizontal flex">
                            <div style="position: relative" class="flex item">
                                Popular
                                <paper-ripple></paper-ripple>
                            </div>
                        </a>
                    </div>
                    <iron-collapse id="popular-feeds">
                        <div class="menu submenu">
                            <template is="dom-repeat" items="[[ tags ]]">
                                <a is="pushstate-anchor" href="[[ feedUrlFor(item.name, 'tag') ]]" class="item">
                                    <span>[[ item.name ]]</span>
                                    <paper-ripple></paper-ripple>
                                </a>
                            </template>

                            <template is="dom-repeat" items="[[ feeds ]]">
                                <a is="pushstate-anchor" href="[[ feedUrlFor(item.Id) ]]" class="item">
                                    <img src="[[ _computeFavIconUrl(item) ]]" alt="favicon" class="feed-favicon">
                                    <span>[[ item.Title ]]</span>
                                    <paper-ripple></paper-ripple>
                                </a>
                            </template>
                        </div>
                    </iron-collapse>
                    <hr>

                    <template is="dom-repeat" items="[[ _computeNavigationTags(tags) ]]">
                        <div class="layout horizontal center">
                            <paper-icon-button icon="expand-more" expands$="[[ _computeNavigationExpandTag(item) ]]" class="item" on-tap="onToggleExpand"></paper-icon-button>
                            <a is="pushstate-anchor" href="[[ repeaterTagUrl(item.name) ]]" class="layout horizontal flex">
                                <div style="position: relative" class="flex item">
                                    <span>[[ item.name ]]</span>
                                    <paper-ripple></paper-ripple>
                                </div>
                            </a>
                        </div>
                        <iron-collapse id="[[ _computeNavigationExpandTag(item) ]]">
                            <div class="menu submenu">
                                <template is="dom-repeat" items="[[ item.feeds ]]">
                                    <a is="pushstate-anchor" href="[[ feedUrlFor(item.Id) ]]" class="item">
                                        <img src="[[ _computeFavIconUrl(item) ]]" alt="favicon" class="feed-favicon">
                                        <span>[[ item.Title ]]</span>
                                        <paper-ripple></paper-ripple>
                                    </a>
                                </template>
                            </div>
                        </iron-collapse>

                    </template>
                    <hr>
                </div>
                <a is="pushstate-anchor" href="[[ urlFor('settings-general') ]]" class="item">
                    <span>Settings</span>
                    <paper-ripple></paper-ripple>
                </a>
                <a is="pushstate-anchor" href="[[ urlFor('logout') ]]" class="item">
                    <span>Logout</span>
                    <paper-ripple></paper-ripple>
                </a>
            </div>
            <div class="main-title">
                <template>
                    <more-route-selector>
                        <iron-pages style="display: inline-block;">
                            <paper-icon-button route="feed" icon="menu" paper-drawer-toggle></paper-icon-button>
                            <paper-icon-button route="article" icon="arrow-back" on-tap="onArticleUp"></paper-icon-button>
                        </iron-pages>
                    </more-route-selector>
                    Title
                    <paper-fab icon="refresh" on-tap="onRefresh" hidden$="[[ narrow ]]"></paper-fab>
                </template>
            </div>
            <div class="main-content">
                <rf-feed user="[[ user ]]" feeds="[[ feeds ]]" narrow="[[ narrow ]]"></rf-feed>
            </div>
        </rf-app-scaffold>

        <rf-api id="list-feeds" method="list-feeds" on-rf-api-message="onAllFeedsMessage" user="{{ user }}"></rf-api>
        <iron-signals on-iron-signal-rf-feeds-added="onSignalFeedsChanged"></iron-signals>
        <iron-signals on-iron-signal-rf-feed-removed="onSignalFeedsChanged"></iron-signals>
        <iron-signals on-iron-signal-rf-feed-tags-changed="onSignalFeedTagsChanged"></iron-signals>
    </template>

    <script>
        "use strict";
        Polymer({
            is: "rf-feed-base",
            behaviors: [
                UserBehavior,
                NestedRouteBehavior,
                MoreRouting.TemplateHelpers,
            ],
            properties: {
                user: Object,
                feeds: {
                    type: Array,
                    notify: true,
                    observer: '_feedsChanged'
                },
                tags: Array
            },
            _urlParser: document.createElement('a'),

            attached: function() {
                var feedElement = Polymer.dom(this.root).querySelector('rf-feed');

                this.defaultNestedRoute('feed-base', 'feed', {tagOrId: 'all'});
                this.routeParamObserver('feed', 'tagOrId', function(value) {
                    feedElement.tagOrId = value;
                }.bind(this));
            },

            feedUrlFor: function(tagOrId, prefix) {
                if (prefix) {
                    tagOrId = prefix + ":" + tagOrId;
                }
                return this.urlFor('feed', {tagOrId: tagOrId})
            },

            repeaterTagUrl: function(name) {
                if (name == 'All') {
                    return this.feedUrlFor('all');
                } else {
                    return this.feedUrlFor(name, 'tag');
                }
            },

            updateTags: function() {
                var tagList = [], tags = {};

                this.feeds.forEach(function(feed) {
                    if (feed.Tags && feed.Tags.length) {
                        for (var i = 0, tag; tag = feed.Tags[i]; ++i) {
                            if (!tags[tag]) {
                                tags[tag] = [];
                            }

                            tags[tag].push(feed);
                        }
                    }
                });

                Object.keys(tags).sort().forEach(function(tag) {
                    tagList.push({name: tag, feeds: tags[tag]});
                });

                this.tags = tagList;
            },

            ready: function() {
                this.$['list-feeds'].send();
            },
            
            onAllFeedsMessage: function(event, detail) {
                this.feeds = detail.arguments.Feeds;
            },

            onSignalFeedsChanged: function() {
                this.$['list-feeds'].send();
            },

            onSignalFeedTagsChanged: function(event, detail) {
                for (var i = 0, f; f = this.feeds[i]; ++i) {
                    if (f.Id == detail.Id) {
                        f.Tags = detail.Tags;

                        this.updateTags();
                        this.set('feeds.' + i, f);
                    }
                }
            },

            onToggleExpand: function(event) {
                var element = event.target;

                while (!element.hasAttribute('expands')) {
                    element = element.parentNode;
                }

                var collapser = Polymer.dom(this.root).querySelector(
                        '#' + element.getAttribute('expands'));

                if ('icon' in element) {
                    element.icon = collapser.opened ? 'expand-more' : 'expand-less';
                }
                collapser.toggle();
            },

            onArticleUp: function() {
                MoreRouting.navigateTo('feed', {tagOrId: MoreRouting.getRoute('feed').params.tagOrId});
            },

            onRefresh: function() {
            },

            _feedsChanged: function(newValue, oldValue) {
                this.updateTags();
            },

            _computeHideFeedItems: function(feeds) {
                return this.feeds == 0;
            },

            _computeFavIconUrl: function(feed) {
                this._urlParser.href = feed.Link

                return "//www.google.com/s2/favicons?domain=" + this._urlParser.host;
            },

            _computeNavigationTags: function(tags) {
                return [].concat({name: 'All', feeds: this.feeds}, this.tags);
            },

            _computeNavigationExpandTag: function(item) {
                return 'feeds-' + item.name;
            }
        })
    </script>
</dom-module>
{% end %}