Truncating story content on blurblogs.

2025-09-18 21:50:56 +00:00 · 2012-08-02 19:04:20 -07:00 · 2012-08-02 19:04:20 -07:00 · d8d9c027e3
commit d8d9c027e3
parent 8bab14b68a
5 changed files with 156 additions and 29 deletions
--- a/apps/reader/views.py
+++ b/apps/reader/views.py
@ -274,8 +274,8 @@ def load_feeds_flat(request):
    try:
        folders = UserSubscriptionFolders.objects.get(user=user)
    except UserSubscriptionFolders.DoesNotExist:
-        data = dict(folders=[], iphone_version=iphone_version)
-        return data
+        folders = []
+        flat_folders = []
        
    user_subs = UserSubscription.objects.select_related('feed').filter(user=user, active=True)

@ -284,30 +284,31 @@ def load_feeds_flat(request):
            sub.calculate_feed_scores(silent=True)
        feeds[sub.feed_id] = sub.canonical(include_favicon=include_favicons)
    
-    folders = json.decode(folders.folders)
-    flat_folders = {" ": []}
+    if folders:
+        folders = json.decode(folders.folders)
+        flat_folders = {" ": []}
    
-    def make_feeds_folder(items, parent_folder="", depth=0):
-        for item in items:
-            if isinstance(item, int) and item in feeds:
-                if not parent_folder:
-                    parent_folder = ' '
-                if parent_folder in flat_folders:
-                    flat_folders[parent_folder].append(item)
-                else:
-                    flat_folders[parent_folder] = [item]
-            elif isinstance(item, dict):
-                for folder_name in item:
-                    folder = item[folder_name]
-                    flat_folder_name = "%s%s%s" % (
-                        parent_folder if parent_folder and parent_folder != ' ' else "",
-                        " - " if parent_folder and parent_folder != ' ' else "",
-                        folder_name
-                    )
-                    flat_folders[flat_folder_name] = []
-                    make_feeds_folder(folder, flat_folder_name, depth+1)
+        def make_feeds_folder(items, parent_folder="", depth=0):
+            for item in items:
+                if isinstance(item, int) and item in feeds:
+                    if not parent_folder:
+                        parent_folder = ' '
+                    if parent_folder in flat_folders:
+                        flat_folders[parent_folder].append(item)
+                    else:
+                        flat_folders[parent_folder] = [item]
+                elif isinstance(item, dict):
+                    for folder_name in item:
+                        folder = item[folder_name]
+                        flat_folder_name = "%s%s%s" % (
+                            parent_folder if parent_folder and parent_folder != ' ' else "",
+                            " - " if parent_folder and parent_folder != ' ' else "",
+                            folder_name
+                        )
+                        flat_folders[flat_folder_name] = []
+                        make_feeds_folder(folder, flat_folder_name, depth+1)
        
-    make_feeds_folder(folders)
+        make_feeds_folder(folders)
    
    social_params = {
        'user_id': user.pk,
--- a/media/css/social/social_page.css
+++ b/media/css/social/social_page.css
@ -456,8 +456,17 @@ header {
    border-bottom-right-radius: 4px;
 }

+.NB-story-content-wrapper {
+    max-height: 500px; /* ALSO CHANGE IN social_page_story.js */
+    padding-bottom: 24px;
+    overflow: hidden;
+    position: relative;
+}
+.NB-story-content-wrapper.NB-story-content-wrapper-height-fudged {
+    max-height: none;
+}
 .NB-story-content {
-    padding: 12px 222px 24px 28px;
+    padding: 12px 222px 0 28px;
    position: relative;
 }
 /*@media all and (max-width: 800px) {
@ -505,6 +514,47 @@ header {
    color: #661616;
 }

+/* ================== */
+/* = Story Expander = */
+/* ================== */
+
+.NB-story-content-expander {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-top: 2px solid #3C6C2B;
+    color: #202020;
+    font-size: 14px;
+    text-align: center;
+    padding: 12px 0;
+    width: 100%;
+    text-shadow: 0 1px 0 #A4E68C;
+    opacity: .95;
+    text-transform: uppercase;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: #73BE58;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73BE58), to(#71A35F));
+    background: -moz-linear-gradient(center bottom, #73BE58 0%, #71A35F 100%);
+}
+.NB-story-content-expander:hover {
+    color: white;
+    text-shadow: 0 1px 0 black;
+    background-color: #58A13E;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#58A13E), to(#3C7627));
+    background: -moz-linear-gradient(center bottom, #58A13E 0%, #3C7627 100%);
+}
+.NB-story-content-expander:active {
+    color: white;
+    text-shadow: 0 1px 0 black;
+    background-color: #3C7627;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C7627), to(#265018));
+    background: -moz-linear-gradient(center bottom, #3C7627 0%, #265018 100%);
+}
+.NB-story-content-expander-pages {
+    font-size: 26px;
+}
 /* ======================= */
 /* = Shares and Comments = */
 /* ======================= */
@ -829,7 +879,7 @@ header {
 .NB-feed-story-sideoptions-container {
    position: absolute;
    right: 28px;
-    bottom: 32px;
+    bottom: 0px;
    text-align: center;
    width: 162px;
 }
--- a/media/js/newsblur/models/stories.js
+++ b/media/js/newsblur/models/stories.js
@ -6,6 +6,8 @@ NEWSBLUR.Models.Story = Backbone.Model.extend({
        this.bind('change:comments', this.populate_comments);
        this.bind('change:comment_count', this.populate_comments);
        this.populate_comments();
+        this.story_permalink = this.get('story_permalink');
+        this.story_title = this.get('story_title');
    },
    
    populate_comments: function(story, collection, changes) {
--- a/media/js/newsblur/social_page/social_page_story.js
+++ b/media/js/newsblur/social_page/social_page_story.js
@ -1,5 +1,15 @@
 NEWSBLUR.Views.SocialPageStory = Backbone.View.extend({
    
+    FUDGE_CONTENT_HEIGHT_OVERAGE: 250,
+    
+    STORY_CONTENT_MAX_HEIGHT: 500, // ALSO CHANGE IN social_page.css
+    
+    flags: {},
+    
+    events: {
+        "click .NB-story-content-expander": "expand_story"
+    },
+    
    initialize: function() {
        var story_id = this.$el.data("storyId");
        var feed_id = this.$el.data("feedId");
@ -52,6 +62,7 @@ NEWSBLUR.Views.SocialPageStory = Backbone.View.extend({
        this.$mark = this.$el.closest('.NB-mark');
        this.attach_tooltips();
        this.truncate_story_height();
+        this.watch_images_for_story_height();
    },
    
    attach_tooltips: function() {
@ -64,7 +75,35 @@ NEWSBLUR.Views.SocialPageStory = Backbone.View.extend({
    },
    
    truncate_story_height: function() {
+        var $expander = this.$(".NB-story-content-expander");
+        var $wrapper = this.$(".NB-story-content-wrapper");
+        var $content = this.$(".NB-story-content");
        
+        var max_height = parseInt($wrapper.css('maxHeight'), 10) || this.STORY_CONTENT_MAX_HEIGHT;
+        var content_height = this.$(".NB-story-content").outerHeight();
+        
+        if (content_height > max_height && 
+            content_height < max_height + this.FUDGE_CONTENT_HEIGHT_OVERAGE) {
+            // console.log(["Height over but within fudge", content_height, max_height]);
+            $wrapper.addClass('NB-story-content-wrapper-height-fudged');
+        } else if (content_height > max_height) {
+            $expander.css('display', 'block');
+            $wrapper.removeClass('NB-story-content-wrapper-height-fudged');
+            $wrapper.addClass('NB-story-content-wrapper-height-truncated');
+            var pages = Math.round(content_height / max_height, true);
+            var dots = _.map(_.range(pages), function() { return '&middot;'; }).join(' ');
+            
+            // console.log(["Height over, truncating...", content_height, max_height, pages]);
+            this.$(".NB-story-content-expander-pages").html(dots);
+        } else {
+            // console.log(["Height under.", content_height, max_height]);
+        }
+    },
+    
+    watch_images_for_story_height: function() {
+        this.$('img').load(_.bind(function() {
+            this.truncate_story_height();
+        }, this));
    },
    
    story_url: function() {
@ -72,6 +111,35 @@ NEWSBLUR.Views.SocialPageStory = Backbone.View.extend({
        var url = window.location.protocol + '//' + window.location.host + '/story/' + guid;

        return url;
+    },
+    
+    // ==========
+    // = Events =
+    // ==========
+    
+    expand_story: function() {
+        var $expander = this.$(".NB-story-content-expander");
+        var $wrapper = this.$(".NB-story-content-wrapper");
+        var $content = this.$(".NB-story-content");
+        var max_height = parseInt($wrapper.css('maxHeight'), 10) || this.STORY_CONTENT_MAX_HEIGHT;
+        var content_height = this.$(".NB-story-content").height();
+        var height_ratio = content_height / max_height;
+        
+        $wrapper.removeClass('NB-story-content-wrapper-height-truncated');
+        // console.log(["max height", max_height, content_height, content_height / max_height]);
+        $wrapper.animate({
+            maxHeight: content_height
+        }, {
+            duration: parseInt(350 * height_ratio, 10),
+            easing: 'easeOutQuart'
+        });
+        
+        $expander.animate({
+            bottom: -1 * $expander.outerHeight()
+        }, {
+            duration: parseInt(350 * height_ratio, 10),
+            easing: 'easeOutQuart'
+        });
    }
    
 });
--- a/templates/social/social_story.xhtml
+++ b/templates/social/social_story.xhtml
@ -46,8 +46,9 @@
    </div>
    
    <div class="NB-story {% if story.saved %}NB-story-saved{% endif %} {% if story.shared_by_user %}NB-story-shared{% endif %}" data-feed-id="{{ story.story_feed_id }}" data-story-id="{{ story.id }}" data-guid="{{ story.guid_hash }}" {% if story.user_comments %}data-user-comments="{{ story.user_comments }}"{% endif %}>
-        <div class="NB-story-content">
-            {{ story.story_content|safe }}
+        <div class="NB-story-content-wrapper">
+            <div class="NB-story-content">
+                {{ story.story_content|safe }}
                <div class="NB-feed-story-sideoptions-container">
                    {% if user.is_authenticated %}
                        <div class="NB-sideoption NB-feed-story-save">
@ -66,8 +67,13 @@
                        </div>
                    {% endif %}
                </div>
+            </div>
+            <div class="NB-story-content-expander">
+                <div class="NB-story-content-expander-text">Read the whole story</div>
+                <div class="NB-story-content-expander-pages"></div>
+            </div>
        </div>
-    
+        
        <div class="NB-story-comments-container">
        {% if story.share_count %}
            {% render_story_share story %}