Star stories

Gemfile.lock

@@ -78,7 +78,7 @@ GEM
     multi_json (1.7.3)
     nokogiri (1.5.9)
     pg (0.15.1)
-    pry (0.9.12.1)
+    pry (0.9.12.2)
       coderay (~> 1.0.5)
       method_source (~> 0.8)
       slop (~> 3.4)
@@ -128,7 +128,7 @@ GEM
       tilt (>= 1.3.0)
     sinatra-flash (0.3.0)
       sinatra (>= 1.0.0)
-    slop (3.4.4)
+    slop (3.4.5)
     sqlite3 (1.3.7)
     thor (0.18.1)
     thread (0.0.8)

app/controllers/stories_controller.rb

@@ -14,13 +14,20 @@ class Stringer < Sinatra::Base
     erb :archive
   end
 
+  get "/starred" do
+    @starred_stories = StoryRepository.starred(params[:page])
+
+    erb :starred
+  end
+
   put "/stories/:id" do
     json_params = JSON.parse(request.body.read, symbolize_names: true)
 
     story = StoryRepository.fetch(params[:id])
     story.is_read = !!json_params[:is_read]
     story.keep_unread = !!json_params[:keep_unread]
-
+    story.is_starred = !!json_params[:is_starred]
+
     StoryRepository.save(story)
   end
 
@@ -29,4 +36,4 @@ class Stringer < Sinatra::Base
 
     redirect to("/news")
   end
-end
+end

app/public/css/styles.css

@@ -179,6 +179,25 @@ li.story.open .story-preview {
   margin-right: 25px;
 }
 
+.story-starred-box {
+  display: inline-block;
+  float: left;
+  padding-left: 4px;
+  width: 20%;
+}
+
+.story-starred {
+  display: inline-block;
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-right: 25px;
+}
+
 .story-body {
   margin-left: 20px;
   margin-right: 20px;

app/public/js/app.js

@@ -47,6 +47,16 @@ var Story = Backbone.Model.extend({
     if (this.shouldSave()) this.save();
   },
 
+  toggleStarred: function() {
+    if (this.get("is_starred")) {
+      this.set("is_starred", false);
+    } else {
+      this.set("is_starred", true);
+    }
+
+    if (this.shouldSave()) this.save();
+  },
+
   close: function() {
     this.set("open", false);
   },
@@ -73,7 +83,8 @@ var StoryView = Backbone.View.extend({
 
   events: {
     "click .story-preview" : "storyClicked",
-    "click .story-keep-unread" : "toggleKeepUnread"
+    "click .story-keep-unread" : "toggleKeepUnread",
+    "click .story-starred" : "toggleStarred"
   },
 
   initialize: function() {
@@ -83,6 +94,7 @@ var StoryView = Backbone.View.extend({
     this.listenTo(this.model, 'change:open', this.itemOpened);
     this.listenTo(this.model, 'change:is_read', this.itemRead);
     this.listenTo(this.model, 'change:keep_unread', this.itemKeepUnread);
+    this.listenTo(this.model, 'change:is_starred', this.itemStarred);
   },
 
   render: function() {
@@ -110,18 +122,28 @@ var StoryView = Backbone.View.extend({
     if (!this.$el.visible()) window.scrollTo(0, this.$el.offset().top);
   },
 
-  itemKeepUnread: function(){
+  itemKeepUnread: function() {
     var icon = this.model.get("keep_unread") ? "icon-check" : "icon-check-empty";
     this.$(".story-keep-unread > i").attr("class", icon);
   },
 
+  itemStarred: function() {
+    var icon = this.model.get("is_starred") ? "icon-star" : "icon-star-empty";
+    this.$(".story-starred > i").attr("class", icon);
+  },
+
   storyClicked: function() {
     this.model.toggle();
     window.scrollTo(0, this.$el.offset().top);
   },
 
   toggleKeepUnread: function() {
     this.model.toggleKeepUnread();
+  },
+
+  toggleStarred: function(e) {
+    e.stopPropagation();
+    this.model.toggleStarred();
   }
 });
 
@@ -203,6 +225,11 @@ var StoryList = Backbone.Collection.extend({
   toggleCurrentKeepUnread: function() {
     if (this.cursorPosition < 0) this.cursorPosition = 0;
     this.at(this.cursorPosition).toggleKeepUnread();
+  },
+
+  toggleCurrentStarred: function() {
+    if (this.cursorPosition < 0) this.cursorPosition = 0;
+    this.at(this.cursorPosition).toggleStarred();
   }
 });
 
@@ -263,6 +290,10 @@ var AppView = Backbone.View.extend({
 
   toggleCurrentKeepUnread: function() {
     this.stories.toggleCurrentKeepUnread();
+  },
+
+  toggleCurrentStarred: function() {
+    this.stories.toggleCurrentStarred();
   }
 });
 
@@ -287,4 +318,4 @@ $(document).ready(function() {
   Mousetrap.bind("?", function() {
     $("#shortcuts").modal('toggle');
   });
-});
+});

app/repositories/story_repository.rb

@@ -8,6 +8,7 @@ def self.add(entry, feed)
                 permalink: entry.url,
                 body: extract_content(entry),
                 is_read: false,
+                is_starred: false,
                 published: entry.published || Time.now)
   end
 
@@ -31,6 +32,11 @@ def self.read(page = 1)
     Story.where(is_read: true).order("published desc").page(page).per_page(15)
   end
 
+  def self.starred(page = 1)
+    Story.where(is_starred: true)
+          .order("published desc").page(page).per_page(15)
+  end
+
   def self.read_count
     Story.where(is_read: true).count
   end

app/views/js/stories.js.erb

@@ -35,5 +35,9 @@
     Mousetrap.bind(["m"], function() {
       StoryApp.toggleCurrentKeepUnread();
     });
+
+    Mousetrap.bind(["s"], function() {
+      StoryApp.toggleCurrentStarred();
+    });
   });
-</script>
+</script>

app/views/js/templates/_story.js.erb

@@ -1,11 +1,16 @@
 <script type="text/template" id="story-template">
   <div class="row-fluid story-preview">
     <div class="span3">
+      <div class="story-starred-box">
+        <div class="story-starred">
+          <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+        </div>
+      </div>
       <p class="blog-title">
         {{= source }}
       </p>
     </div>
-    <div class="span9">
+    <div class="span8">
       <p class="story-details">
         <span class="story-title">
           {{= headline }}
@@ -32,10 +37,13 @@
         <div class="story-keep-unread">
           <i class="icon-check{{ if(!keep_unread) { }}-empty{{ } }}"></i> <%= t('stories.keep_unread') %>
         </div>
+        <div class="story-starred">
+          <i class="icon-star{{ if(!is_starred) { }}-empty{{ } }}"></i>
+        </div>
         <a class="story-permalink" href="{{= permalink }}">
           <i class="icon-external-link"></i>
         </a>
       </div>
     </div>
   </div>
-</script>
+</script>

app/views/partials/_action_bar.erb

@@ -11,6 +11,9 @@
   </div>
 
   <div class="pull-right">
+    <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.action_bar.starred_stories') %>">
+      <i class="icon-star"></i>
+    </a>
     <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.action_bar.archived_stories') %>">
       <i class="icon-time"></i>
     </a>

app/views/partials/_feed_action_bar.erb

@@ -6,6 +6,9 @@
   </div>
 
   <div class="pull-right">
+    <a class="btn btn-primary" id="starred" href="/starred" title="<%= t('partials.feed_action_bar.starred_stories') %>">
+      <i class="icon-star"></i>
+    </a>
     <a class="btn btn-primary" id="archive" href="/archive" title="<%= t('partials.feed_action_bar.archived_stories') %>">
       <i class="icon-time"></i>
     </a>

app/views/partials/_shortcuts.erb

@@ -9,6 +9,7 @@
       <li><kbd>n</kbd>/<kbd>p</kbd>: <%= t('partials.shortcuts.keys.np') %></li>
       <li><kbd>o</kbd> <%= t('partials.shortcuts.keys.or') %> <kbd>enter</kbd>: <%= t('partials.shortcuts.keys.oenter') %></li>
       <li><kbd>m</kbd>: <%= t('partials.shortcuts.keys.m') %></li>
+      <li><kbd>s</kbd>: <%= t('partials.shortcuts.keys.s') %></li>
       <li><kbd>v</kbd>: <%= t('partials.shortcuts.keys.v') %></li>
       <li class="blank"></li>
       <li><kbd>shift</kbd>+<kbd>a</kbd>: <%= t('partials.shortcuts.keys.shifta') %></li>

app/views/starred.erb

@@ -0,0 +1,30 @@
+<div id="action-bar">
+  <%= render_partial :feed_action_bar %>
+</div>
+
+<% unless @starred_stories.empty? %>
+  <%= render_js :stories, { stories: @starred_stories } %>
+
+  <div id="stories">
+    <ul id="story-list">
+    </ul>
+  </div>
+
+  <div id="pagination">
+  <% if @starred_stories.previous_page %>
+    <a href="?page=<%= @starred_stories.previous_page %>"><%= t('starred.previous') %></a>
+  <% end %>
+
+  <% if @starred_stories.total_pages > 1 %>
+    <%= @starred_stories.current_page %> <%= t('starred.of') %> <%= @read_stories.total_pages %>
+  <% end %>
+
+  <% if @starred_stories.next_page %>
+    <a href="?page=<%= @starred_stories.next_page %>"><%= t('starred.next') %></a>
+  <% end %>
+  </div>
+<% else %>
+  <div id="sorry">
+    <p><%= t('starred.sorry') %></p>
+  </div>
+<% end %>

config/locales/en.yml

@@ -4,6 +4,11 @@ en:
     of: of
     previous: Previous
     sorry: Sorry, you haven't read any stories yet!
+  starred:
+    next: Next
+    of: of
+    previous: Previous
+    sorry: Sorry, you haven't starred any stories yet!
   date:
     abbr_month_names:
     - 
@@ -70,6 +75,7 @@ en:
       mark_all: Mark all as read
       refresh: Refresh
       view_feeds: View feeds
+      starred_stories: Starred stories
     feed:
       last_fetched:
         never: Never
@@ -83,10 +89,12 @@ en:
       archived_stories: Archived stories
       feeds: View feeds
       home: Return to Stories
+      starred_stories: Starred stories
     shortcuts:
       keys:
         jk: Next/previous story
         m: Mark item as read/unread
+        s: Mark item as starred/unstarred
         np: Move down/move up
         oenter: Toggle story open/closed
         or: or

config/locales/zh-CN.yml

@@ -4,6 +4,11 @@ zh-CN:
     of: of
     previous: 上一页
     sorry: 呃，你现在还没有已经读过的故事
+  starred:
+    next: 下一页
+    of: of
+    previous: 上一页
+    sorry: 呃，你现在还没有为任何故事加注星标
   date:
     abbr_month_names:
     - 
@@ -70,6 +75,7 @@ zh-CN:
       mark_all: 全部标为已读
       refresh: 刷新
       view_feeds: 查看订阅列表
+      starred_stories: 加星标的故事
     feed:
       last_fetched:
         never: 尚未成功读取过
@@ -83,10 +89,12 @@ zh-CN:
       archived_stories: 已读故事
       feeds: 查看订阅列表
       home: 返回未读故事列表
+      starred_stories: 加星标的故事
     shortcuts:
       keys:
         jk: 下一个/上一个故事
         m: 将一个条目标为已读/未读
+        s: 为一个条目加注星标/取消星标
         np: 向上/向下移动
         oenter: 点击打开/关闭
         or: 或

db/migrate/20130513044029_add_is_starred_status_for_stories.rb

@@ -0,0 +1,5 @@
+class AddIsStarredStatusForStories < ActiveRecord::Migration
+  def change
+    add_column :stories, :is_starred, :boolean, default: false
+  end
+end