Add starred option to archive and news page

keliwang · keliwang · commit e0e3bc06e7f7 · 2013-05-18T11:03:04.000+08:00
diff --git a/app/public/css/styles.css b/app/public/css/styles.css
@@ -179,6 +179,18 @@ li.story.open .story-preview {
   margin-right: 25px;
 }
 
+.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;
diff --git a/app/public/js/app.js b/app/public/js/app.js
@@ -53,6 +53,8 @@ var Story = Backbone.Model.extend({
     } else {
       this.set("is_starred", true);
     }
+
+    if (this.shouldSave()) this.save();
   },
 
   close: function() {
@@ -92,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() {
@@ -119,11 +122,16 @@ 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);
diff --git a/app/views/js/templates/_story.js.erb b/app/views/js/templates/_story.js.erb
@@ -32,10 +32,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>
