Adding mark read and preferences modals. Also cleaning up and fixing minor bugs in the manage menu.

media/css/reader.css

@@ -1226,7 +1226,6 @@ form.opml_import_form input {
 #NB-splash .NB-splash-title {
     position: absolute;
     bottom: -1px;
-    margin-left: 244px;
     background: transparent url('../img/reader/newsblur_logo.png') no-repeat 0 0;
     height: 52px;
     right: 250px;
@@ -1271,8 +1270,14 @@ form.opml_import_form input {
     color: #A85B40;
 }
 
-#NB-splash .NB-splash-info {
-    margin-left: 244px;
+.NB-splash-info {
+    background-color: white;
+    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 500px;
+    height: 56px;
 }
 
 /* ============== */
@@ -1871,7 +1876,7 @@ background: transparent;
 
 .NB-menu-manage li {
     margin: 0 0 0 0;
-    padding: 3px 12px;
+    padding: 3px 8px 3px 12px;
     cursor: pointer;
 }
 

media/js/newsblur/reader.js

@@ -113,47 +113,47 @@
         apply_resizable_layout: function() {
             var outerLayout, rightLayout, contentLayout, leftLayout;
             
-        	outerLayout = $('body').layout({ 
-        	    closable: true,
-    			center__paneSelector:	".right-pane",
-    			west__paneSelector:		".left-pane",
-    			west__size:				240,
-    			west__onresize:         "leftLayout.resizeAll",
-    			center__onresize:       "rightLayout.resizeAll",
-    			spacing_open:			4,
-    			resizerDragOpacity:     0.6,
-    			findNestedContent:      true
-    		}); 
-    		
-    		leftLayout = $('.left-pane').layout({
-        	    closable:               false,
-    		    center__paneSelector:   ".left-center",
-    		    center__resizable:      false,
-    			south__paneSelector:	".left-south",
-    			south__size:            30,
-    			south__resizable:       false,
-    			south__spacing_open:    0
-    		});
+            outerLayout = $('body').layout({ 
+                closable: true,
+                center__paneSelector:   ".right-pane",
+                west__paneSelector:     ".left-pane",
+                west__size:             240,
+                west__onresize:         "leftLayout.resizeAll",
+                center__onresize:       "rightLayout.resizeAll",
+                spacing_open:           4,
+                resizerDragOpacity:     0.6,
+                findNestedContent:      true
+            }); 
+            
+            leftLayout = $('.left-pane').layout({
+                closable:               false,
+                center__paneSelector:   ".left-center",
+                center__resizable:      false,
+                south__paneSelector:    ".left-south",
+                south__size:            30,
+                south__resizable:       false,
+                south__spacing_open:    0
+            });
 
-    		rightLayout = $('.right-pane').layout({ 
-    			south__paneSelector:	".right-north",
-    			center__paneSelector:	".content-pane",
-    			center__onresize:       "contentLayout.resizeAll",
-    			south__onresize:        "contentLayout.resizeAll",
-    			south__size:			168,
-    			spacing_open:			10,
-    			resizerDragOpacity:     0.6
-    		}); 
+            rightLayout = $('.right-pane').layout({ 
+                south__paneSelector:    ".right-north",
+                center__paneSelector:   ".content-pane",
+                center__onresize:       "contentLayout.resizeAll",
+                south__onresize:        "contentLayout.resizeAll",
+                south__size:            168,
+                spacing_open:           10,
+                resizerDragOpacity:     0.6
+            }); 
 
-    		contentLayout = $('.content-pane').layout({ 
-    			center__paneSelector:	".content-center",
-    			south__paneSelector:	".content-north",
-    			south__size:            30,
-    			spacing_open:           0,
-    			resizerDragOpacity:     0.6
-    		}); 
-    		
-    		$('.right-pane').hide();
+            contentLayout = $('.content-pane').layout({ 
+                center__paneSelector:   ".content-center",
+                south__paneSelector:    ".content-north",
+                south__size:            30,
+                spacing_open:           0,
+                resizerDragOpacity:     0.6
+            }); 
+            
+            $('.right-pane').hide();
         },
         
         resize_story_content_pane: function() {
@@ -1791,6 +1791,18 @@
                     self.open_manage_feed_modal();
                 }
             });  
+            $.targetIs(e, { tagSelector: '.NB-menu-manage-mark-read' }, function($t, $p){
+                e.preventDefault();
+                if (!$t.hasClass('NB-disabled')) {
+                    self.open_mark_read_modal();
+                }
+            });  
+            $.targetIs(e, { tagSelector: '.NB-menu-manage-preferences' }, function($t, $p){
+                e.preventDefault();
+                if (!$t.hasClass('NB-disabled')) {
+                    self.open_preferences_modal();
+                }
+            });  
             $.targetIs(e, { tagSelector: '.task_button_view' }, function($t, $p){
                 e.preventDefault();
                 var view;
@@ -2067,6 +2079,18 @@
             NEWSBLUR.manage_feed = new NEWSBLUR.ReaderManageFeed(feed_id);
         },
         
+        open_mark_read_modal: function() {
+            var feed_id = this.active_feed;
+            
+            NEWSBLUR.mark_read = new NEWSBLUR.ReaderMarkRead();
+        },
+        
+        open_preferences_modal: function() {
+            var feed_id = this.active_feed;
+            
+            NEWSBLUR.preferences = new NEWSBLUR.ReaderPreferences();
+        },
+        
         make_manage_menu: function() {
             var feed_id = this.active_feed;
             var feed = this.model.get_feed(feed_id);
@@ -2094,8 +2118,8 @@
             }
             
             var $site_specific = [
-                $.make('li', { className: 'NB-menu-manage-mark-read' }, 'Mark read older than...'),
-                $.make('li', { className: 'NB-menu-manage-mark-read' }, 'Preferences')
+                $.make('li', { className: 'NB-menu-manage-mark-read' }, 'Mark old stories as read'),
+                $.make('li', { className: 'NB-menu-manage-preferences' }, 'Preferences')
             ];
             for (var f in $site_specific) {
                 $manage_menu.append($site_specific[f]);
@@ -2128,18 +2152,30 @@
                 'complete': function() {
                     $(document).bind('click.menu', function() {
                         self.hide_manage_menu();
-                        $(document).unbind('click.menu');
                     });
                 }
             });
             $('.NB-task-manage').addClass('NB-hover');
+
+            clearTimeout(this.flags.closed_manage_menu);
             
+            $manage_menu_container.hover(function() {
+                clearTimeout(self.flags.closed_manage_menu);
+            }, function() {
+                clearTimeout(self.flags.closed_manage_menu);
+                self.flags.closed_manage_menu = setTimeout(function() {
+                    self.hide_manage_menu();
+                }, 1000);
+            });
         },
         
         hide_manage_menu: function() {
             var $manage_menu_container = $('.NB-menu-manage-container');
             var height = $manage_menu_container.outerHeight();
-            
+
+            clearTimeout(this.flags.closed_manage_menu);
+            $(document).unbind('click.menu');
+
             $manage_menu_container.animate({
                 'opacity': 0
             }, {

media/js/newsblur/reader_classifier.js

@@ -368,10 +368,10 @@ var classifier = {
             'minHeight': height,
             'overlayClose': true,
             'onOpen': function (dialog) {
-	            dialog.overlay.fadeIn(200, function () {
-		            dialog.container.fadeIn(200);
-		            dialog.data.fadeIn(200);
-	            });
+                dialog.overlay.fadeIn(200, function () {
+                    dialog.container.fadeIn(200);
+                    dialog.data.fadeIn(200);
+                });
             },
             'onShow': function(dialog) {
                 $('#simplemodal-container').corner('6px').css({'width': 600, 'height': height});

media/js/newsblur/reader_manage_feed.js

@@ -265,10 +265,10 @@ NEWSBLUR.ReaderManageFeed.prototype = {
             'minHeight': height,
             'overlayClose': true,
             'onOpen': function (dialog) {
-	            dialog.overlay.fadeIn(200, function () {
-		            dialog.container.fadeIn(200);
-		            dialog.data.fadeIn(200);
-	            });
+                dialog.overlay.fadeIn(200, function () {
+                    dialog.container.fadeIn(200);
+                    dialog.data.fadeIn(200);
+                });
             },
             'onShow': function(dialog) {
                 $('#simplemodal-container').corner('6px').css({'width': 600, 'height': height});

media/js/newsblur/reader_mark_read.js

@@ -0,0 +1,98 @@
+NEWSBLUR.ReaderMarkRead = function(options) {
+    var defaults = {};
+    
+    this.options = $.extend({}, defaults, options);
+    this.model = NEWSBLUR.AssetModel.reader();
+    this.google_favicon_url = 'http://www.google.com/s2/favicons?domain_url=';
+    this.runner();
+};
+
+NEWSBLUR.ReaderMarkRead.prototype = {
+    
+    runner: function() {
+        this.make_modal();
+        this.handle_cancel();
+        this.open_modal();
+        
+        this.$modal.bind('click', $.rescope(this.handle_click, this));
+    },
+    
+    make_modal: function() {
+        var self = this;
+        
+        this.$modal = $.make('div', { className: 'NB-modal-markread NB-modal' }, [
+            $.make('h2', { className: 'NB-modal-title' }, 'Mark old stories as read'),
+            $.make('form', { className: 'NB-markread-form' }, [
+                $.make('div', { className: 'NB-modal-submit' }, [
+                    $.make('input', { name: 'score', value: this.score, type: 'hidden' }),
+                    $.make('input', { name: 'feed_id', value: this.feed_id, type: 'hidden' }),
+                    $.make('input', { name: 'story_id', value: this.story_id, type: 'hidden' }),
+                    $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled', value: 'Check what you like above...' }),
+                    ' or ',
+                    $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel')
+                ])
+            ]).bind('submit', function(e) {
+                e.preventDefault();
+                self.save_mark_read();
+                return false;
+            })
+        ]);
+    },
+    
+    open_modal: function() {
+        var self = this;
+
+        var $holder = $.make('div', { className: 'NB-modal-holder' }).append(this.$modal).appendTo('body').css({'visibility': 'hidden', 'display': 'block', 'width': 600});
+        var height = $('.NB-add', $holder).outerHeight(true);
+        $holder.css({'visibility': 'visible', 'display': 'none'});
+        
+        this.$modal.modal({
+            'minWidth': 600,
+            'minHeight': height,
+            'overlayClose': true,
+            'onOpen': function (dialog) {
+                dialog.overlay.fadeIn(200, function () {
+                    dialog.container.fadeIn(200);
+                    dialog.data.fadeIn(200);
+                });
+            },
+            'onShow': function(dialog) {
+                $('#simplemodal-container').corner('6px').css({'width': 600, 'height': height});
+                // $('.NB-classifier-tag', self.$modal).corner('4px');
+            },
+            'onClose': function(dialog) {
+                dialog.data.hide().empty().remove();
+                dialog.container.hide().empty().remove();
+                dialog.overlay.fadeOut(200, function() {
+                    dialog.overlay.empty().remove();
+                    $.modal.close();
+                });
+                $('.NB-modal-holder').empty().remove();
+            }
+        });
+    },
+    
+    handle_cancel: function() {
+        var $cancel = $('.NB-modal-cancel', this.$modal);
+        
+        $cancel.click(function(e) {
+            e.preventDefault();
+            $.modal.close();
+        });
+    },
+            
+    // ===========
+    // = Actions =
+    // ===========
+
+    handle_click: function(elem, e) {
+        var self = this;
+        
+        $.targetIs(e, { tagSelector: '.NB-add-url-submit' }, function($t, $p) {
+            e.preventDefault();
+            
+            self.save_add_url();
+        });
+    }
+    
+};

media/js/newsblur/reader_preferences.js

@@ -0,0 +1,95 @@
+NEWSBLUR.ReaderPreferences = function(options) {
+    var defaults = {};
+    
+    this.options = $.extend({}, defaults, options);
+    this.model = NEWSBLUR.AssetModel.reader();
+    this.google_favicon_url = 'http://www.google.com/s2/favicons?domain_url=';
+    this.runner();
+};
+
+NEWSBLUR.ReaderPreferences.prototype = {
+    
+    runner: function() {
+        this.make_modal();
+        this.handle_cancel();
+        this.open_modal();
+        
+        this.$modal.bind('click', $.rescope(this.handle_click, this));
+    },
+    
+    make_modal: function() {
+        var self = this;
+        
+        this.$modal = $.make('div', { className: 'NB-modal-preferences NB-modal' }, [
+            $.make('h2', { className: 'NB-modal-title' }, 'Preferences'),
+            $.make('form', { className: 'NB-preferences-form' }, [
+                $.make('div', { className: 'NB-modal-submit' }, [
+                    $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled', value: 'Check what you like above...' }),
+                    ' or ',
+                    $.make('a', { href: '#', className: 'NB-modal-cancel' }, 'cancel')
+                ])
+            ]).bind('submit', function(e) {
+                e.preventDefault();
+                self.save_preferences();
+                return false;
+            })
+        ]);
+    },
+    
+    open_modal: function() {
+        var self = this;
+
+        var $holder = $.make('div', { className: 'NB-modal-holder' }).append(this.$modal).appendTo('body').css({'visibility': 'hidden', 'display': 'block', 'width': 600});
+        var height = $('.NB-add', $holder).outerHeight(true);
+        $holder.css({'visibility': 'visible', 'display': 'none'});
+        
+        this.$modal.modal({
+            'minWidth': 600,
+            'minHeight': height,
+            'overlayClose': true,
+            'onOpen': function (dialog) {
+                dialog.overlay.fadeIn(200, function () {
+                    dialog.container.fadeIn(200);
+                    dialog.data.fadeIn(200);
+                });
+            },
+            'onShow': function(dialog) {
+                $('#simplemodal-container').corner('6px').css({'width': 600, 'height': height});
+                // $('.NB-classifier-tag', self.$modal).corner('4px');
+            },
+            'onClose': function(dialog) {
+                dialog.data.hide().empty().remove();
+                dialog.container.hide().empty().remove();
+                dialog.overlay.fadeOut(200, function() {
+                    dialog.overlay.empty().remove();
+                    $.modal.close();
+                });
+                $('.NB-modal-holder').empty().remove();
+            }
+        });
+    },
+    
+    handle_cancel: function() {
+        var $cancel = $('.NB-modal-cancel', this.$modal);
+        
+        $cancel.click(function(e) {
+            e.preventDefault();
+            $.modal.close();
+        });
+    },
+            
+    // ===========
+    // = Actions =
+    // ===========
+
+    handle_click: function(elem, e) {
+        var self = this;
+        
+        $.targetIs(e, { tagSelector: '.NB-add-url-submit' }, function($t, $p) {
+            e.preventDefault();
+            
+            self.save_add_url();
+        });
+    }
+    
+};

settings.py

@@ -113,6 +113,8 @@ COMPRESS_JS = {
             'js/newsblur/reader_classifier.js',
             'js/newsblur/reader_add_feed.js',
             'js/newsblur/reader_manage_feed.js',
+            'js/newsblur/reader_mark_read.js',
+            'js/newsblur/reader_preferences.js',
         ),
         'output_filename': 'js/all-compressed-?.js'
     }

templates/reader/feeds.xhtml

@@ -7,132 +7,87 @@
   
 <div id="NB-splash">
 
-  <div class="NB-splash-info">
 
-    <div class="NB-account">
-      {% if not user.is_authenticated %}
-        
-        <div class="NB-module">
-          <h5>
-            <div class="NB-module-header-login">Login</div>
-            <div class="NB-module-header-signup">Signup</div>
-          </h5>
-
-          <div class="NB-login">
-            {% if login_form.errors %}
-              {% for field, error in login_form.errors.items %}
-                {{ error }}
-              {% endfor %}
-            {% endif %}
-            <!--
-            <div class="NB-account-label">Want an account?</div>
-            <div class="NB-account-text">Talk to <a href="http://twitter.com/samuelclay">@samuelclay</a>.</div>
-            -->
-        
-            <form method="post" action="{% url login %}">
-              <div>
-                {{ login_form.username.label_tag }}
-                {{ login_form.username }}
-              </div>
-              <div>
-                {{ login_form.password.label_tag }}
-                {{ login_form.password }}
-              </div>
-
-              <input name="submit" type="submit" value="login" />
-              <input type="hidden" name="next" value="/" />
-            </form>
-          </div>
-
-          <div class="NB-signup">
-            {% if signup_form.errors %}
-              {% for field, error in signup_form.errors.items %}
-                {{ error }}
-              {% endfor %}
-            {% endif %}
-        
-            <form method="post" action="{% url signup %}">
-              <div>
-                {{ signup_form.signup_username.label_tag }}
-                {{ signup_form.signup_username }}
-              </div>
-              <div>
-                {{ signup_form.signup_password.label_tag }}
-                {{ signup_form.signup_password }}
-              </div>
-              <div>
-                {{ signup_form.email.label_tag }}
-                {{ signup_form.email }}
-              </div>
-
-              <input name="submit" type="submit" value="create account" />
-              <input type="hidden" name="next" value="/" />
-            </form>
-          </div>
-        </div>
-        
-        <div class="NB-module NB-module-howitworks">
-          <h5 class="NB-module-header">
-            How It Works
-          </h5>
-        
-          <table class="NB-module-features">
-            <tr class="NB-module-feature">
-              <td class="NB-module-feature-date">1. </td>
-              <td class="NB-module-feature-description">Add websites you read. Even from Google Reader.</td>
-            </tr>
-            <tr class="NB-module-feature">
-              <td class="NB-module-feature-date">2. </td>
-              <td class="NB-module-feature-description">NewsBlur learns your opinions when you like or dislike stories.</td>
-            </tr>
-            <tr class="NB-module-feature last">
-              <td class="NB-module-feature-date">3. </td>
-              <td class="NB-module-feature-description">Read those stories directly on the original website.</td>
-            </tr>
-          </table>
-          {% if user.is_staff %}
-            <form action="{% url add-feature %}" id="add-feature-form" method="post">
-              {{ feature_form.description }}
-              <input type="submit" value="Add feature" />
-            </form>
-          {% endif %}
-        </div>
-      {% else %}
-        <div class="NB-module NB-module-stats">
-          <h5 class="NB-module-header">
-            Welcome, {{ user.username }}
-            <div class="NB-module-header-right">
-              <a href="{% url logout %}?next=/">Logout</a>
-            </div>
-          </h5>
-        </div>
-      {% endif %}
-    
-      <div class="NB-module NB-module-stats">
-        <h5 class="NB-module-header">
-          New Features
-          <div class="NB-module-header-right">
-            {% if user.is_staff %}
-              <a href="#" id="add-feature-button">Add</a>
-              <script>
-              $(document).ready(function() {
-                $('#add-feature-button').click(function(e) {
-                  e.preventDefault();
-                  $('#add-feature-form').fadeIn(500);
-                });
-              });
-              </script>
-            {% endif %}
-          </div>
+  <div class="NB-account">
+    {% if not user.is_authenticated %}
+      
+      <div class="NB-module">
+        <h5>
+          <div class="NB-module-header-login">Login</div>
+          <div class="NB-module-header-signup">Signup</div>
         </h5>
-        
+
+        <div class="NB-login">
+          {% if login_form.errors %}
+            {% for field, error in login_form.errors.items %}
+              {{ error }}
+            {% endfor %}
+          {% endif %}
+          <!--
+          <div class="NB-account-label">Want an account?</div>
+          <div class="NB-account-text">Talk to <a href="http://twitter.com/samuelclay">@samuelclay</a>.</div>
+          -->
+      
+          <form method="post" action="{% url login %}">
+            <div>
+              {{ login_form.username.label_tag }}
+              {{ login_form.username }}
+            </div>
+            <div>
+              {{ login_form.password.label_tag }}
+              {{ login_form.password }}
+            </div>
+
+            <input name="submit" type="submit" value="login" />
+            <input type="hidden" name="next" value="/" />
+          </form>
+        </div>
+
+        <div class="NB-signup">
+          {% if signup_form.errors %}
+            {% for field, error in signup_form.errors.items %}
+              {{ error }}
+            {% endfor %}
+          {% endif %}
+      
+          <form method="post" action="{% url signup %}">
+            <div>
+              {{ signup_form.signup_username.label_tag }}
+              {{ signup_form.signup_username }}
+            </div>
+            <div>
+              {{ signup_form.signup_password.label_tag }}
+              {{ signup_form.signup_password }}
+            </div>
+            <div>
+              {{ signup_form.email.label_tag }}
+              {{ signup_form.email }}
+            </div>
+
+            <input name="submit" type="submit" value="create account" />
+            <input type="hidden" name="next" value="/" />
+          </form>
+        </div>
+      </div>
+      
+      <div class="NB-module NB-module-howitworks">
+        <h5 class="NB-module-header">
+          How It Works
+        </h5>
+      
         <table class="NB-module-features">
-          {% for feature in features %}
-            <tr class="NB-module-feature {% if forloop.last %}last{% endif %}">
-              <td class="NB-module-feature-date">{{ feature.date|date:"M d, Y" }}</td>
-              <td class="NB-module-feature-description">{{ feature.description }}</td>
-            </tr>
-          {% endfor %}
+          <tr class="NB-module-feature">
+            <td class="NB-module-feature-date">1. </td>
+            <td class="NB-module-feature-description">Add websites you read. Even from Google Reader.</td>
+          </tr>
+          <tr class="NB-module-feature">
+            <td class="NB-module-feature-date">2. </td>
+            <td class="NB-module-feature-description">NewsBlur learns your opinions when you like or dislike stories.</td>
+          </tr>
+          <tr class="NB-module-feature last">
+            <td class="NB-module-feature-date">3. </td>
+            <td class="NB-module-feature-description">Read those stories directly on the original website.</td>
+          </tr>
         </table>
         {% if user.is_staff %}
           <form action="{% url add-feature %}" id="add-feature-form" method="post">
@@ -141,20 +96,61 @@
           </form>
         {% endif %}
       </div>
-      
-    </div>
-  </div>
+    {% else %}
+      <div class="NB-module NB-module-stats">
+        <h5 class="NB-module-header">
+          Welcome, {{ user.username }}
+          <div class="NB-module-header-right">
+            <a href="{% url logout %}?next=/">Logout</a>
+          </div>
+        </h5>
+      </div>
+    {% endif %}
   
-  <div class="NB-splash-info NB-splash-info-about"></div>
-
-  <ul class="NB-splash-links">
-    <li class="NB-splash-link">Hand-crafted by: <a href="http://www.samuelclay.com">Samuel Clay</a></li>
-    <li class="NB-splash-link">Write to me: <a href="mailto:samuel@ofbrooklyn.com">samuel@ofbrooklyn.com</a></li>
-    <li class="NB-splash-link">Twitter, Twitter: <a href="http://twitter.com/samuelclay">@samuelclay</a></li>
-  </ul>
+    <div class="NB-module NB-module-stats">
+      <h5 class="NB-module-header">
+        New Features
+        <div class="NB-module-header-right">
+          {% if user.is_staff %}
+            <a href="#" id="add-feature-button">Add</a>
+            <script>
+            $(document).ready(function() {
+              $('#add-feature-button').click(function(e) {
+                e.preventDefault();
+                $('#add-feature-form').fadeIn(500);
+              });
+            });
+            </script>
+          {% endif %}
+        </div>
+      </h5>
       
-  {# <div class="NB-splash-image"></div> #}
-  <div class="NB-splash-title"></div>
+      <table class="NB-module-features">
+        {% for feature in features %}
+          <tr class="NB-module-feature {% if forloop.last %}last{% endif %}">
+            <td class="NB-module-feature-date">{{ feature.date|date:"M d, Y" }}</td>
+            <td class="NB-module-feature-description">{{ feature.description }}</td>
+          </tr>
+        {% endfor %}
+      </table>
+      {% if user.is_staff %}
+        <form action="{% url add-feature %}" id="add-feature-form" method="post">
+          {{ feature_form.description }}
+          <input type="submit" value="Add feature" />
+        </form>
+      {% endif %}
+    </div>
+    
+  </div>
+
+  <div class="NB-splash-info">
+    <ul class="NB-splash-links">
+      <li class="NB-splash-link">Hand-crafted by: <a href="http://www.samuelclay.com">Samuel Clay</a></li>
+      <li class="NB-splash-link">Write to me: <a href="mailto:samuel@ofbrooklyn.com">samuel@ofbrooklyn.com</a></li>
+      <li class="NB-splash-link">Twitter, Twitter: <a href="http://twitter.com/samuelclay">@samuelclay</a></li>
+    </ul>
+    <div class="NB-splash-title"></div>
+  </div>
 
 </div>