From 979633a50f11afbb6388ac0fd46e45aac64a286a Mon Sep 17 00:00:00 2001
From: Mike Crute <mcrute@gmail.com>
Date: Wed, 29 Jul 2015 18:30:42 -0700
Subject: Add more features

---
 app.py               |  85 +++++++++++++++---
 templates/items.html | 250 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 213 insertions(+), 122 deletions(-)

diff --git a/app.py b/app.py
index 1740f51..1bc6d93 100755
--- a/app.py
+++ b/app.py
@@ -43,8 +43,7 @@ class RSSItem(DataObject):
     def __init__(self, id, title, author, feed_title, feed_url, url,
             publish_date, content, read):
         self.id = id
-        self.feed_url = RSSFeed(feed_url, None, None).self_link
-        self.feed_title = feed_title
+        self.feed = RSSFeed(feed_url, None, feed_title)
         self.title = title
         self.author = author
         self.url = url
@@ -53,6 +52,10 @@ class RSSItem(DataObject):
         self.read = not bool(read)
         self.no_content = len(content) < 100
 
+    def _update_json(self, data):
+        data['feed'] = self.feed.self_link
+        return data
+
 
 class RSSFeed(DataObject):
 
@@ -64,7 +67,16 @@ class RSSFeed(DataObject):
         self.title = title
 
     def _update_json(self, data):
-        data['items'] = '/feed/{}/items'.format(self.id)
+        data['items'] = self.items
+        data['unread_items'] = self.unread_items
+
+    @property
+    def items(self):
+        return '/feed/{}/items'.format(self.id)
+
+    @property
+    def unread_items(self):
+        return '/feed/{}/items/unread'.format(self.id)
 
     @property
     def id(self):
@@ -77,6 +89,13 @@ class RSSFeed(DataObject):
                 '{}========'.format(token).encode('utf-8')).decode('utf-8')
 
 
+class UnreadRSSFeed(RSSFeed):
+
+    def __init__(self, feed_url, url, title, unread_count):
+        super(UnreadRSSFeed, self).__init__(feed_url, url, title)
+        self.unread_count = unread_count
+
+
 
 class DBReader(object):
 
@@ -95,6 +114,20 @@ class DBReader(object):
             i.pubDate desc
         '''
 
+    UNREAD_FEEDS = '''
+        SELECT
+            f.rssurl, f.url, f.title,
+            count(*) as unread_count
+        FROM
+            rss_item i
+        LEFT JOIN rss_feed f
+            ON f.rssurl = i.feedurl
+        WHERE
+            i.unread = 1
+        GROUP BY
+            i.feedurl
+        '''
+
     def __init__(self, db_path):
         self.con = sqlite3.connect(db_path)
         self.con.row_factory = RSSItem.from_db_row
@@ -120,17 +153,26 @@ class DBReader(object):
                 [1 if unread else 0, id])
             con.commit()
 
+    def update_feed_unread(self, token, unread=True):
+        with self.con as con:
+            con.execute(
+                'UPDATE rss_item SET unread = ? WHERE feedurl = ?',
+                [1 if unread else 0, RSSFeed.parse_token(token)])
+            con.commit()
+
     def get_entry(self, id):
         return self._fetch("i.id = ?", [id])[0]
 
     def get_unread(self):
         data = defaultdict(list)
-        unread = self._fetch("i.unread = ?", [1])
-
-        for record in unread:
-            data[record.feed_title].append(record)
+        return self._fetch("i.unread = ?", [1])
 
-        return sorted(data.items())
+    def get_unread_feeds(self):
+        with self.con as con:
+            con.row_factory = UnreadRSSFeed.from_db_row
+            curs = con.cursor()
+            curs.execute(self.UNREAD_FEEDS)
+            return curs.fetchall()
 
     def get_unread_for_feed(self, token, only_unread=False):
         if only_unread:
@@ -159,16 +201,21 @@ def json_list(data):
 
 @app.route('/')
 def index():
-    reader = DBReader(DB_PATH)
-    return render_template('items.html', items=reader.get_unread())
+    return render_template('items.html')
 
 
-@app.route('/feed/')
+@app.route('/feed')
 def feed_list():
     reader = DBReader(DB_PATH)
     return jsonify({ 'feeds': json_list(reader.get_feeds()) })
 
 
+@app.route('/feed/unread')
+def unread_feed_list():
+    reader = DBReader(DB_PATH)
+    return jsonify({ 'feeds': json_list(reader.get_unread_feeds()) })
+
+
 @app.route('/feed/<token>')
 def feed(token):
     reader = DBReader(DB_PATH)
@@ -182,13 +229,27 @@ def feed_items(token):
     return jsonify({ 'items': json_list(unread), "count": len(unread) })
 
 
-@app.route('/feed/<token>/items/unread')
+@app.route('/feed/<token>/items/unread', methods=["GET", "POST"])
 def unread_feed_items(token):
     reader = DBReader(DB_PATH)
+    if request.method == 'POST':
+        try:
+            read = bool(int(request.form.get('read')))
+        except:
+            return make_response('', 400)
+
+        reader.update_feed_unread(token, not read)
+
     unread = reader.get_unread_for_feed(token, True)
     return jsonify({ 'items': json_list(unread), "count": len(unread) })
 
 
+@app.route('/item/unread')
+def unread_item_list():
+    reader = DBReader(DB_PATH)
+    return jsonify({ 'items': json_list(reader.get_unread()) })
+
+
 @app.route("/item/<int:entry_id>", methods=["GET", "POST"])
 def item(entry_id):
     #post read=1
diff --git a/templates/items.html b/templates/items.html
index 22adbba..e138ece 100644
--- a/templates/items.html
+++ b/templates/items.html
@@ -8,120 +8,80 @@
                 font: 12px Georgia,serif;
             }
 
-            .entries li {
-                position: relative;
+            #feeds, #feed-items {
+                margin: 0;
+                padding: 0;
                 list-style: none;
-                border: 1px solid #999;
-                margin: 0.5em 0;
+                width: 95%;
             }
 
-            .entries {
+            #feeds-container {
                 margin: 0;
                 padding: 0;
+                display: inline-block;
+                vertical-align: top;
+                border: 1px solid #999;
             }
 
-            .entries a.headline {
-                display: block;
-                background: #ddd;
-                padding: 1em;
-                color: black;
-                text-decoration: none;
-                font-weight: bolder;
+            #feeds li {
+                padding: 0.7em;
+                cursor: pointer;
             }
 
-            .entries .highlighted a.headline {
-                background-color: #FFFF99;
+            #minimize-feeds {
+                cursor: pointer;
+                padding: 0.7em;
+                background-color: #ccc;
             }
 
-            .entries li > input.read {
-                position: absolute;
-                top: 1em;
-                right: 1em;
+            #feed-items li {
+                position: relative;
+                border: 1px solid gray;
+                border-top: none;
+                width: 1000px;
             }
 
-            .entries .content {
-                padding: 1em;
-                display: none;
+            #feed-items li .title {
+                display: inline-block;
+                cursor: pointer;
+                padding: 0.5em;
+                margin: 0.1em;
+                line-height: 1.5em;
             }
 
-            h2 a.mark-all-read {
-                display: inline-block;
-                position: absolute;
-                right: 1em;
+            #feed-items li:first-child {
+                border-top: 1px solid gray;
             }
-        </style>
 
-        <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
+            #feed-items li input {
+                margin: 0.5em;
+            }
 
-        <script type="text/javascript">
-            /**
-             * Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
-             * Licensed under MIT
-             * @author Ariel Flesler
-             * @version 1.4.12
-             */
-            ;(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else{a(jQuery)}}(function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||typeof a=='object'?a:{top:a,left:a}};return j}));
-        </script>
+            #feeds li.active {
+                background-color: #ff9;
+                border: 1px solid goldenrod;
+                border-right: none;
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+            }
 
-        <script type="text/javascript">
-            /*
-             * Viewport - jQuery selectors for finding elements in viewport
-             *
-             * Copyright (c) 2008-2009 Mika Tuupola
-             *
-             * Licensed under the MIT license:
-             *   http://www.opensource.org/licenses/mit-license.php
-             *
-             * Project home:
-             *  http://www.appelsiini.net/projects/viewport
-             *
-             */
-            (function($) {
-
-                $.belowthefold = function(element, settings) {
-                    var fold = $(window).height() + $(window).scrollTop();
-                    return fold <= $(element).offset().top - settings.threshold;
-                };
-
-                $.abovethetop = function(element, settings) {
-                    var top = $(window).scrollTop();
-                    return top >= $(element).offset().top + $(element).height() - settings.threshold;
-                };
-
-                $.rightofscreen = function(element, settings) {
-                    var fold = $(window).width() + $(window).scrollLeft();
-                    return fold <= $(element).offset().left - settings.threshold;
-                };
-
-                $.leftofscreen = function(element, settings) {
-                    var left = $(window).scrollLeft();
-                    return left >= $(element).offset().left + $(element).width() - settings.threshold;
-                };
-
-                $.inviewport = function(element, settings) {
-                    return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
-                };
-
-                $.extend($.expr[':'], {
-                    "below-the-fold": function(a, i, m) {
-                        return $.belowthefold(a, {threshold : 0});
-                    },
-                    "above-the-top": function(a, i, m) {
-                        return $.abovethetop(a, {threshold : 0});
-                    },
-                    "left-of-screen": function(a, i, m) {
-                        return $.leftofscreen(a, {threshold : 0});
-                    },
-                    "right-of-screen": function(a, i, m) {
-                        return $.rightofscreen(a, {threshold : 0});
-                    },
-                    "in-viewport": function(a, i, m) {
-                        return $.inviewport(a, {threshold : 0});
-                    }
-                });
-            })(jQuery);
-        </script>
+            .content-iframe {
+                width: 100%;
+                border: none;
+            }
+
+            .no-content {
+                background: url(http://www.famfamfam.com/lab/icons/silk/icons/tab.png) no-repeat 99% center;
+            }
+        </style>
 
+        <script src="https://mike.crute.me/resources/modernizr-2.8.2.js"></script>
+        <script src="https://mike.crute.me/resources/jquery-2.1.1.js"></script>
+        <script src="https://mike.crute.me/resources/underscore-1.6.0.js"></script>
+        <script src="https://mike.crute.me/resources/jquery.scrollTo-1.4.12.js"></script>
+        <script src="https://mike.crute.me/resources/jquery.viewport.js"></script>
+
+        <!--
         <script type="text/javascript">
             $(document).ready(function() {
                 $("a.headline").on("click", function(event) {
@@ -162,13 +122,15 @@
                     });
                 });
 
-                $("h2 a.mark-all-read").on("click", function(event) {
+                $("h1 a.mark-all-read").on("click", function(event) {
                     event.preventDefault();
 
-                    $(event.target).parents(".feed").find("a.headline").each(function(idx, box) {
-                        $(box).trigger("mark-read");
+                    $.ajax($(event.target).parents(".feed").attr("data-unread-items"), {
+                        data: { read: 1 },
+                        type: "POST"
                     });
 
+
                     return false;
                 });
 
@@ -231,22 +193,90 @@
                 });
             });
         </script>
+        -->
+
+        <script type="text/javascript">
+            function loadFeedItems(url) {
+                var feed_item_template = _.template($("#feed_item_template").text());
+                $("#feed-items li").remove();
+
+                $.ajax(url).done(function(data) {
+                    _.forEach(data.items, function(item) {
+                        $("#feed-items").append(feed_item_template({ item: item }));
+                    });
+
+                    $("#feed-items .title").on("click", function(event) {
+                        var target = $(event.target);
+                        var template = _.template($("#item_contents_template").text());
+
+                        $.ajax(target.parents("li").attr("data-item-href")).done(function(data) {
+                            if (data.no_content) {
+                            alert("No content");
+                            /*
+                                var win = window.open(data.url, "_blank");
+                                if (!win) {
+                                    alert("Popups are blocked");
+                                }
+                            */
+                            } else {
+                                target.parent("li").find(".content-area").append(template({ item: data }));
+                                var iframe = $("#" + data.id + "-item-contents");
+
+                                iframe.contents().find("html").html(data.content);
+                                iframe.height(iframe.contents().find("html").height());
+                            }
+                        });
+                    });
+                });
+            }
+
+            $(document).ready(function() {
+                var feed_template = _.template($("#feed_template").text());
+
+                $.ajax("/feed/unread").done(function(data) {
+                    _.forEach(data.feeds, function(item) {
+                        $("#feeds").append(feed_template({ item: item }));
+                    });
+
+                    $("#feeds li").on("click", function(event) {
+                        var target = $(event.currentTarget);
+                        $("#feeds li").removeClass("active");
+                        target.addClass("active");
+
+                        loadFeedItems(target.attr("data-unread-href"));
+                    });
+                });
+
+                $("#minimize-feeds").on("click", function() {
+                    $("#feeds").slideToggle();
+                });
+
+                loadFeedItems("/item/unread");
+            });
+        </script>
     </head>
     <body>
-        <h1>RSS Entries</h1>
-        {% for feed, records in items %}
-        <div class="feed">
-            <h2>{{ feed }} ({{ records|length }}) <a href="#" class="mark-all-read">Mark All Read</a></h2>
-            <ul class="entries">
-                {% for record in records %}
-                <li data-url="{{ record.self_link }}" >
-                <a class="headline" href="{{ record.url }}">{{ record.title }}</a>
-                <input type="checkbox" class="read" />
-                <div class="content"></div>
-                </li>
-                {% endfor %}
+        <div id="feeds-container">
+            <div id="minimize-feeds">Feeds</div>
+            <ul id="feeds">
             </ul>
         </div>
-        {% endfor %}
+        <li id="feed-items"></li>
+
+
+        <script type="text/template" id="feed_template">
+            <li data-unread-href="<%= item.unread_items %>"><%= item.title %> (<%= item.unread_count %>)</li>
+        </script>
+
+        <script type="text/template" id="feed_item_template">
+            <li data-item-href="<%= item.self %>" <% if (item.no_content) { %>class="no-content"<% } %>>
+                <input type="checkbox" /><span class="title"><%= item.title %></span>
+                <div class="content-area"></div>
+            </li>
+        </script>
+
+        <script type="text/template" id="item_contents_template">
+            <iframe id="<%= item.id %>-item-contents" class="content-iframe"></iframe>
+        </script>
     </body>
 </html>
-- 
cgit v1.2.3