Rambox-CE/ext/src/ux/dashboard/GoogleRssView.js

/**
 * This view is created by the "google-rss" `Ext.dashboard.Dashboard` part.
 */
Ext.define('Ext.ux.dashboard.GoogleRssView', {
    extend: 'Ext.Component',

    requires: [
        'Ext.tip.ToolTip',
        'Ext.ux.google.Feeds'
    ],

    feedCls: Ext.baseCSSPrefix + 'dashboard-googlerss',
    previewCls: Ext.baseCSSPrefix + 'dashboard-googlerss-preview',

    closeDetailsCls: Ext.baseCSSPrefix + 'dashboard-googlerss-close',
    nextCls: Ext.baseCSSPrefix + 'dashboard-googlerss-next',
    prevCls: Ext.baseCSSPrefix + 'dashboard-googlerss-prev',

    /**
     * The RSS feed URL. Some example RSS Feeds:
     *
     *   * http://rss.slashdot.org/Slashdot/slashdot
     *   * http://sports.espn.go.com/espn/rss/news (ESPN Top News)
     *   * http://news.google.com/news?ned=us&topic=t&output=rss (Sci/Tech - Google News)
     *   * http://rss.news.yahoo.com/rss/software (Yahoo Software News)
     *   * http://feeds.feedburner.com/extblog (Sencha Blog)
     *   * http://sencha.com/forum/external.php?type=RSS2 (Sencha Forums)
     *   * http://feeds.feedburner.com/ajaxian (Ajaxian)
     *   * http://rss.cnn.com/rss/edition.rss (CNN Top Stories)
     */
    feedUrl: null,

    scrollable: true,

    maxFeedEntries: 10,

    previewTips: false,

    mode: 'detail',

    //closeDetailsGlyph: '10008@',
    closeDetailsGlyph: '8657@',

    // black triangles
    prevGlyph: '9664@', nextGlyph: '9654@',

    // hollow triangles
    //prevGlyph: '9665@', nextGlyph: '9655@',

    // black pointing index
    //prevGlyph: '9754@', nextGlyph: '9755@',

    // white pointing index
    //prevGlyph: '9756@', nextGlyph: '9758@',

    // double arrows
    //prevGlyph: '8656@', nextGlyph: '8658@',

    // closed arrows
    //prevGlyph: '8678@', nextGlyph: '8680@',

    detailTpl:
        '<tpl for="entries[currentEntry]">' +
            '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-detail-header">' +
                '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-detail-nav">' +
                    '<tpl if="parent.hasPrev">' +
                        '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-prev ' +
                                Ext.baseCSSPrefix + 'dashboard-googlerss-glyph">'+
                            '{parent.prevGlyph}' +
                        '</span> '+
                    '</tpl>' +
                    ' {[parent.currentEntry+1]}/{parent.numEntries} ' +
                    '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-next ' +
                                Ext.baseCSSPrefix + 'dashboard-googlerss-glyph"' +
                        '<tpl if="!parent.hasNext">' +
                            ' style="visibility:hidden"'+
                        '</tpl>' +
                        '> {parent.nextGlyph}' +
                    '</span> '+
                    '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-close ' +
                                Ext.baseCSSPrefix + 'dashboard-googlerss-glyph"> ' +
                        '{parent.closeGlyph}' +
                    '</span> '+
                '</div>' +
                '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-title">'+
                    '<a href="{link}" target=_blank>{title}</a>'+
                '</div>'+
                '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-author">By {author} - {publishedDate:this.date}</div>' +
            '</div>' +
            '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-detail">' +
                '{content}' +
            '</div>' +
        '</tpl>',

    summaryTpl:
        '<tpl for="entries">' +
            '<div class="' + Ext.baseCSSPrefix + 'dashboard-googlerss">' +
                '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-title">'+
                    '<a href="{link}" target=_blank>{title}</a>'+
                '</span> '+
                '<img src="'+Ext.BLANK_IMAGE_URL+'" data-index="{#}" class="'+Ext.baseCSSPrefix+'dashboard-googlerss-preview"><br>' +
                '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-author">By {author} - {publishedDate:this.date}</span><br>' +
                '<span class="' + Ext.baseCSSPrefix + 'dashboard-googlerss-snippet">{contentSnippet}</span><br>' +
            '</div>' +
        '</tpl>',


    initComponent: function () {
        var me = this;

        me.feedMgr = new google.feeds.Feed(me.feedUrl);

        me.callParent();
    },

    afterRender: function () {
        var me = this;

        me.callParent();

        if (me.feedMgr) {
            me.refresh();
        }

        me.el.on({
            click: me.onClick,
            scope: me
        });

        if (me.previewTips) {
            me.tip = new Ext.tip.ToolTip({
                target: me.el,
                delegate: '.' + me.previewCls,
                maxWidth: 800,
                showDelay: 750,
                autoHide: false,
                scrollable: true,
                anchor: 'top',
                listeners: {
                    beforeshow: 'onBeforeShowTip',
                    scope: me
                }
            });
        }
    },

    formatDate: function (date) {
        if (!date) {
            return '';
        }

        date = new Date(date);
        var now = new Date(),
            d = Ext.Date.clearTime(now, true),
            notime = Ext.Date.clearTime(date, true).getTime();

        if (notime === d.getTime()) {
            return 'Today ' + Ext.Date.format(date, 'g:i a');
        }

        d = Ext.Date.add(d, 'd', -6);
        if (d.getTime() <= notime) {
            return Ext.Date.format(date, 'D g:i a');
        }
        if (d.getYear() === now.getYear()) {
            return Ext.Date.format(date, 'D M d \\a\\t g:i a');
        }

        return Ext.Date.format(date, 'D M d, Y \\a\\t g:i a');
    },

    getTitle: function () {
        var data = this.data;
        return data && data.title;
    },

    onBeforeShowTip: function (tip) {
        if (this.mode !== 'summary') {
            return false;
        }

        var el = tip.triggerElement,
            index = parseInt(el.getAttribute('data-index'), 10);

        tip.maxHeight = Ext.Element.getViewportHeight() / 2;
        tip.update(this.data.entries[index - 1].content);
    },

    onClick: function (e) {
        var me = this,
            entry = me.data.currentEntry,
            target = Ext.fly(e.getTarget());

        if (target.hasCls(me.nextCls)) {
            me.setCurrentEntry(entry+1);
        } else if (target.hasCls(me.prevCls)) {
            me.setCurrentEntry(entry-1);
        } else if (target.hasCls(me.closeDetailsCls)) {
            me.setMode('summary');
        } else if (target.hasCls(me.previewCls)) {
            me.setMode('detail', parseInt(target.getAttribute('data-index'), 10));
        }
    },

    refresh: function () {
        var me = this;

        if (!me.feedMgr) {
            return;
        }

        me.fireEvent('beforeload', me);
        //setTimeout(function () {

        me.feedMgr.setNumEntries(me.maxFeedEntries);
        me.feedMgr.load(function (result) {
            me.setFeedData(result.feed);
            me.fireEvent('load', me);
        });
        //}, 2000);
    },

    setCurrentEntry: function (current) {
        this.setMode(this.mode, current);
    },

    setFeedData: function (feedData) {
        var me = this,
            entries = feedData.entries,
            count = entries && entries.length || 0,
            data = Ext.apply({
                numEntries: count,
                closeGlyph: me.wrapGlyph(me.closeDetailsGlyph),
                prevGlyph: me.wrapGlyph(me.prevGlyph),
                nextGlyph: me.wrapGlyph(me.nextGlyph),
                currentEntry: 0
            }, feedData);

        me.data = data;
        me.setMode(me.mode);
    },

    setMode: function (mode, currentEntry) {
        var me = this,
            data = me.data,
            current = (currentEntry === undefined) ? data.currentEntry : currentEntry;

        me.tpl = me.getTpl(mode + 'Tpl');
        me.tpl.date = me.formatDate;
        me.mode = mode;

        data.currentEntry = current;
        data.hasNext = current+1 < data.numEntries;
        data.hasPrev = current > 0;

        me.update(data);
        me.el.dom.scrollTop = 0;
    },

    wrapGlyph: function (glyph) {
        var glyphFontFamily = Ext._glyphFontFamily,
            glyphParts,
            html;

        if (typeof glyph === 'string') {
            glyphParts = glyph.split('@');
            glyph = glyphParts[0];
            glyphFontFamily = glyphParts[1];
        }

        html = '&#' + glyph + ';';
        if (glyphFontFamily) {
            html = '<span style="font-family:' + glyphFontFamily + '">' + html + '</span>';
        }

        return html;
    },

    // @private
    beforeDestroy: function () {
        Ext.destroy(this.tip);

        this.callParent();
    }
});