From d8d9c027e3e65aaec50c8b4ac82b8e4719539a44 Mon Sep 17 00:00:00 2001 From: Samuel Clay Date: Thu, 2 Aug 2012 19:04:20 -0700 Subject: [PATCH] Truncating story content on blurblogs. --- apps/reader/views.py | 49 ++++++------- media/css/social/social_page.css | 54 ++++++++++++++- media/js/newsblur/models/stories.js | 2 + .../newsblur/social_page/social_page_story.js | 68 +++++++++++++++++++ templates/social/social_story.xhtml | 12 +++- 5 files changed, 156 insertions(+), 29 deletions(-) diff --git a/apps/reader/views.py b/apps/reader/views.py index f65042e29..e8ab9342e 100644 --- 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, diff --git a/media/css/social/social_page.css b/media/css/social/social_page.css index d898b0b49..4b99034b5 100644 --- 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; } diff --git a/media/js/newsblur/models/stories.js b/media/js/newsblur/models/stories.js index 4fe9c263e..9733229e0 100644 --- 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) { diff --git a/media/js/newsblur/social_page/social_page_story.js b/media/js/newsblur/social_page/social_page_story.js index 0e2133869..1f7a4d516 100644 --- 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 '·'; }).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' + }); } }); \ No newline at end of file diff --git a/templates/social/social_story.xhtml b/templates/social/social_story.xhtml index f751aa252..a2815bca7 100644 --- a/templates/social/social_story.xhtml +++ b/templates/social/social_story.xhtml @@ -46,8 +46,9 @@
-
- {{ story.story_content|safe }} +
+
+ {{ story.story_content|safe }}
{% if user.is_authenticated %}
@@ -66,8 +67,13 @@
{% endif %}
+
+
+
Read the whole story
+
+
- +
{% if story.share_count %} {% render_story_share story %}