clizzin · April 12, 2012 04:30 · Apr 12, 2012 · Apr 12, 2012 · Apr 12, 2012 · Apr 12, 2012
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@
 * Indent the messages so they all start at the same spot.
 * Use Shift-Up and Shift-Down to switch between channels.
 * Focus the message input field whenever you click anywhere in the window.
+* Eliminate the annoying image flash between when it's inserted and when it's resized.
 
 Props to [reissbaker](https://github.com/reissbaker) and [h4rry](https://github.com/h4rry)
 for the foundations of this gist.

diff --git a/grove-ui.css b/grove-ui.css
@@ -17,4 +17,9 @@
 /* This bit looks janky if your window is too narrow. :( */
 .attachments {
   margin-left: 94px;
+}
+
+.attachments .image {
+  max-height: 200px;
+  max-width: 200px;
 }
diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@
 * Only show the user name and avatar for the first message in a group of messages by that user.
 * Indent the messages so they all start at the same spot.
 * Use Shift-Up and Shift-Down to switch between channels.
+* Focus the message input field whenever you click anywhere in the window.
 
 Props to [reissbaker](https://github.com/reissbaker) and [h4rry](https://github.com/h4rry)
 for the foundations of this gist.

diff --git a/grove-ui.js b/grove-ui.js
@@ -65,4 +65,6 @@ $(document).bind('keydown', function(e){
        App.router.routePath(App.channels.at(nextIndex).get('app_url'))
        return false;
   }
-});
+});
+
+$('.main-wrapper').click(function(){ App.channelView.focusMessageForm(); })
diff --git a/grove-ui.js b/grove-ui.js
@@ -3,43 +3,44 @@
 // Only show user name and avatar for first message in a group of messages
 // Thanks to reissbaker for the first iteration of this functionality.
 
-!function($, App) {
-  var initialized = false;
-  var updateUI = function() {
-    var $pic, $picLI, index, $prevLI, $prevPic, 
-        $picSeparator, $picContent,
-        $pics = $('.userpic img' + (!initialized ? '' : ':visible')),
-        SPACING = '3px';
+window.onload = function(e) {
+  !function($, App) {
+    var initialized = false;
+    var updateUI = function() {
+      var $pic, $picLI, index, $prevLI, $prevPic, 
+          $picSeparator, $picContent,
+          $pics = $('.userpic img' + (!initialized ? '' : ':visible')),
+          SPACING = '3px';
 
-    initialized = true;
+      initialized = true;
 
-    for(index = $pics.length - 1; index >= 0; index--) {
-      $pic = $($pics[index]);
-      $picLI = $pic.closest('li');
-      if($picLI.attr('data-seen')) break;
+      for(index = $pics.length - 1; index >= 0; index--) {
+        $pic = $($pics[index]);
+        $picLI = $pic.closest('li');
+        if($picLI.attr('data-seen')) break;
 
-      $picLI.attr('data-seen', true);
-      $prevLI = $picLI.prev();
+        $picLI.attr('data-seen', true);
+        $prevLI = $picLI.prev();
 
-      if($prevLI) {
-        $prevPic = $prevLI.find('.userpic img');
-        $picSeparator = $picLI.find('.separator');
-        if($prevPic.attr('src') === $pic.attr('src')) {
-          $pic.css('visibility', 'hidden');
-          $picLI.find('.user').css('visibility', 'hidden');
-          $picSeparator.hide();
-          $picLI.css('margin-top', '-5px');
+        if($prevLI) {
+          $prevPic = $prevLI.find('.userpic img');
+          $picSeparator = $picLI.find('.separator');
+          if($prevPic.attr('src') === $pic.attr('src')) {
+            $pic.css('visibility', 'hidden');
+            $picLI.find('.user').css('visibility', 'hidden');
+            $picSeparator.hide();
+            $picLI.css('margin-top', '-5px');
+          }
         }
       }
-    }
-  };
-
-  App.on('newMessage', updateUI);
-  App.on('newPrivateMessage', updateUI);
-  App.on('routeClicked', updateUI);
-  updateUI();
-}(jQuery, App)
+    };
 
+    App.on('newMessage', updateUI);
+    App.on('newPrivateMessage', updateUI);
+    App.on('routeClicked', updateUI);
+    updateUI();
+  }(jQuery, App)
+}
 
 // shift+up and shift+down to move between channels
 // Thanks to h4rry for this bit.

diff --git a/README.md b/README.md
@@ -1,12 +1,9 @@
-Make the Grove web client look like this
+# Make the Grove web client look like this
 
 [![Sweet UI](http://f.cl.ly/items/462K1G1z273P2A3E182V/Screen%20Shot%202012-04-11%20at%209.44.31%20PM.png)](http://cl.ly/2E0J262R2a1Z2X1y0N3Z)
 
 * Only show the user name and avatar for the first message in a group of messages by that user.
 * Indent the messages so they all start at the same spot.
-
-Additional functionality:
-
 * Use Shift-Up and Shift-Down to switch between channels.
 
 Props to [reissbaker](https://github.com/reissbaker) and [h4rry](https://github.com/h4rry)

diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-Make the Grove web client look like this: http://cl.ly/2E0J262R2a1Z2X1y0N3Z
+Make the Grove web client look like this
+
+[![Sweet UI](http://f.cl.ly/items/462K1G1z273P2A3E182V/Screen%20Shot%202012-04-11%20at%209.44.31%20PM.png)](http://cl.ly/2E0J262R2a1Z2X1y0N3Z)
 
 * Only show the user name and avatar for the first message in a group of messages by that user.
 * Indent the messages so they all start at the same spot.

diff --git a/README.md b/README.md
@@ -10,4 +10,5 @@ Additional functionality:
 Props to [reissbaker](https://github.com/reissbaker) and [h4rry](https://github.com/h4rry)
 for the foundations of this gist.
 
-This is an [Airbnb nerds](http://airbnb.com/jobs/departments/engineering) production.
+*This is an [Airbnb nerds](http://airbnb.com/jobs/departments/engineering) production.  If you
+like this, check out other [sweet JS work](http://airbnb.github.com/backpack.js/).*
diff --git a/README.md b/README.md
@@ -5,4 +5,9 @@ Make the Grove web client look like this: http://cl.ly/2E0J262R2a1Z2X1y0N3Z
 
 Additional functionality:
 
-* Use Shift-Up and Shift-Down to switch between channels.
+* Use Shift-Up and Shift-Down to switch between channels.
+
+Props to [reissbaker](https://github.com/reissbaker) and [h4rry](https://github.com/h4rry)
+for the foundations of this gist.
+
+This is an [Airbnb nerds](http://airbnb.com/jobs/departments/engineering) production.
diff --git a/grove-ui.css b/grove-ui.css
@@ -12,4 +12,9 @@
 
 .message {
   overflow: auto;
+}
+
+/* This bit looks janky if your window is too narrow. :( */
+.attachments {
+  margin-left: 94px;
 }
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 Make the Grove web client look like this: http://cl.ly/2E0J262R2a1Z2X1y0N3Z
 
 * Only show the user name and avatar for the first message in a group of messages by that user.
-* Indent the messages so they all start at the spot.
+* Indent the messages so they all start at the same spot.
 
 Additional functionality:
 

diff --git a/grove-ui.js b/grove-ui.js
@@ -1,8 +1,7 @@
 // Add this to the User Scripts of your Fluid App
 
-// Thanks to reissbaker for the first iteration of this bit.
-//
 // Only show user name and avatar for first message in a group of messages
+// Thanks to reissbaker for the first iteration of this functionality.
 
 !function($, App) {
   var initialized = false;
@@ -42,9 +41,8 @@
 }(jQuery, App)
 
 
-// Thanks to h4rry for this next bit.
-//
 // shift+up and shift+down to move between channels
+// Thanks to h4rry for this bit.
 
 $(document).bind('keydown', function(e){
   var shifted = e.shiftKey;

diff --git a/grove-ui.js b/grove-ui.js
@@ -1,5 +1,7 @@
-/* Add this to the User Scripts of your Fluid App */
+// Add this to the User Scripts of your Fluid App
 
+// Thanks to reissbaker for the first iteration of this bit.
+//
 // Only show user name and avatar for first message in a group of messages
 
 !function($, App) {
@@ -43,10 +45,6 @@
 // Thanks to h4rry for this next bit.
 //
 // shift+up and shift+down to move between channels
-// 
-// copy and paste into the console
-// or if you're using Fluid.app put
-// in Userscripts
 
 $(document).bind('keydown', function(e){
   var shifted = e.shiftKey;

diff --git a/README.md b/README.md
@@ -1,4 +1,8 @@
 Make the Grove web client look like this: http://cl.ly/2E0J262R2a1Z2X1y0N3Z
 
 * Only show the user name and avatar for the first message in a group of messages by that user.
-* Indent the messages so they all start at the spot.
+* Indent the messages so they all start at the spot.
+
+Additional functionality:
+
+* Use Shift-Up and Shift-Down to switch between channels.
diff --git a/grove-ui.css b/grove-ui.css
@@ -1,3 +1,5 @@
+/* Add this to the User Styles of your Fluid App */
+
 .content {
   float: left;
   width: 80%;

diff --git a/grove-ui.js b/grove-ui.js
@@ -1,3 +1,7 @@
+/* Add this to the User Scripts of your Fluid App */
+
+// Only show user name and avatar for first message in a group of messages
+
 !function($, App) {
   var initialized = false;
   var updateUI = function() {
@@ -33,4 +37,35 @@
   App.on('newPrivateMessage', updateUI);
   App.on('routeClicked', updateUI);
   updateUI();
-}(jQuery, App)
+}(jQuery, App)
+
+
+// Thanks to h4rry for this next bit.
+//
+// shift+up and shift+down to move between channels
+// 
+// copy and paste into the console
+// or if you're using Fluid.app put
+// in Userscripts
+
+$(document).bind('keydown', function(e){
+  var shifted = e.shiftKey;
+
+  if (e.keyCode == 40 && shifted) {
+       var length = App.channels.length - 1,
+           curIndex = App.channels.indexOf(currentChannel),
+           nextIndex = curIndex + 1;
+       if (nextIndex > length) nextIndex = 0;
+       App.router.routePath(App.channels.at(nextIndex).get('app_url'))
+       return false;
+    }
+
+  if (e.keyCode == 38 && shifted) {
+       var length = App.channels.length - 1,
+           curIndex = App.channels.indexOf(currentChannel),
+           nextIndex = curIndex - 1;
+       if (nextIndex < 0) nextIndex = length;
+       App.router.routePath(App.channels.at(nextIndex).get('app_url'))
+       return false;
+  }
+});
diff --git a/README → README.md b/README → README.md
diff --git a/README b/README
@@ -0,0 +1,4 @@
+Make the Grove web client look like this: http://cl.ly/2E0J262R2a1Z2X1y0N3Z
+
+* Only show the user name and avatar for the first message in a group of messages by that user.
+* Indent the messages so they all start at the spot.
diff --git a/grove-ui.css b/grove-ui.css
@@ -0,0 +1,13 @@
+.content {
+  float: left;
+  width: 80%;
+}
+
+.user {
+  float: left;
+  width: 100px;
+}
+
+.message {
+  overflow: auto;
+}
diff --git a/grove-ui.js b/grove-ui.js
@@ -20,20 +20,10 @@
         $prevPic = $prevLI.find('.userpic img');
         $picSeparator = $picLI.find('.separator');
         if($prevPic.attr('src') === $pic.attr('src')) {
-          $pic.hide();
-          $picLI.find('.user').hide();
+          $pic.css('visibility', 'hidden');
+          $picLI.find('.user').css('visibility', 'hidden');
           $picSeparator.hide();
           $picLI.css('margin-top', '-5px');
-        } else {
-          $picSeparator.css({
-            'border-bottom': '1px solid #EAEAEA',
-            'margin-bottom': SPACING
-          });
-          $picLI.find('.content').css({
-            display: 'block',
-            'margin-top': '9px'
-          });
-          $picLI.css('margin-top', SPACING);
         }
       }
     }

diff --git a/grove-ui.js b/grove-ui.js
@@ -1,5 +1,3 @@
-// close, couple edge cases left but should be pretty efficient
-
 !function($, App) {
   var initialized = false;
   var updateUI = function() {
@@ -43,5 +41,6 @@
 
   App.on('newMessage', updateUI);
   App.on('newPrivateMessage', updateUI);
-  updateUI(true);
+  App.on('routeClicked', updateUI);
+  updateUI();
 }(jQuery, App)
diff --git a/grove-ui.js b/grove-ui.js
@@ -1,12 +1,15 @@
-!function($) {
-  var INTERVAL = 100;
+// close, couple edge cases left but should be pretty efficient
 
-  setInterval(function() {
+!function($, App) {
+  var initialized = false;
+  var updateUI = function() {
     var $pic, $picLI, index, $prevLI, $prevPic, 
         $picSeparator, $picContent,
-        $pics = $('.userpic img:visible'),
+        $pics = $('.userpic img' + (!initialized ? '' : ':visible')),
         SPACING = '3px';
 
+    initialized = true;
+
     for(index = $pics.length - 1; index >= 0; index--) {
       $pic = $($pics[index]);
       $picLI = $pic.closest('li');
@@ -35,7 +38,10 @@
           $picLI.css('margin-top', SPACING);
         }
       }
-
     }
-  }, INTERVAL);
-}(jQuery)
+  };
+
+  App.on('newMessage', updateUI);
+  App.on('newPrivateMessage', updateUI);
+  updateUI(true);
+}(jQuery, App)
diff --git a/grove-ui.js b/grove-ui.js
@@ -4,7 +4,7 @@
   setInterval(function() {
     var $pic, $picLI, index, $prevLI, $prevPic, 
         $picSeparator, $picContent,
-        $pics = $('.userpic img'),
+        $pics = $('.userpic img:visible'),
         SPACING = '3px';
 
     for(index = $pics.length - 1; index >= 0; index--) {

diff --git a/grove-ui.js b/grove-ui.js
@@ -4,7 +4,8 @@
   setInterval(function() {
     var $pic, $picLI, index, $prevLI, $prevPic, 
         $picSeparator, $picContent,
-        $pics = $('.userpic img');
+        $pics = $('.userpic img'),
+        SPACING = '3px';
 
     for(index = $pics.length - 1; index >= 0; index--) {
       $pic = $($pics[index]);
@@ -25,13 +26,13 @@
         } else {
           $picSeparator.css({
             'border-bottom': '1px solid #EAEAEA',
-            'margin-bottom': '3px'
+            'margin-bottom': SPACING
           });
           $picLI.find('.content').css({
             display: 'block',
             'margin-top': '9px'
           });
-          $picLI.css('margin-top', '3px');
+          $picLI.css('margin-top', SPACING);
         }
       }
 

diff --git a/grove-ui.js b/grove-ui.js
@@ -2,7 +2,8 @@
   var INTERVAL = 100;
 
   setInterval(function() {
-    var $pic, $picLI, index, $prevLI, $prevPic, $picSeparator,
+    var $pic, $picLI, index, $prevLI, $prevPic, 
+        $picSeparator, $picContent,
         $pics = $('.userpic img');
 
     for(index = $pics.length - 1; index >= 0; index--) {
@@ -20,8 +21,17 @@
           $pic.hide();
           $picLI.find('.user').hide();
           $picSeparator.hide();
+          $picLI.css('margin-top', '-5px');
         } else {
-          $picSeparator.css('border-bottom', '1px solid #EAEAEA');
+          $picSeparator.css({
+            'border-bottom': '1px solid #EAEAEA',
+            'margin-bottom': '3px'
+          });
+          $picLI.find('.content').css({
+            display: 'block',
+            'margin-top': '9px'
+          });
+          $picLI.css('margin-top', '3px');
         }
       }
 

diff --git a/grove-ui.js b/grove-ui.js
@@ -0,0 +1,30 @@
+!function($) {
+  var INTERVAL = 100;
+
+  setInterval(function() {
+    var $pic, $picLI, index, $prevLI, $prevPic, $picSeparator,
+        $pics = $('.userpic img');
+
+    for(index = $pics.length - 1; index >= 0; index--) {
+      $pic = $($pics[index]);
+      $picLI = $pic.closest('li');
+      if($picLI.attr('data-seen')) break;
+
+      $picLI.attr('data-seen', true);
+      $prevLI = $picLI.prev();
+
+      if($prevLI) {
+        $prevPic = $prevLI.find('.userpic img');
+        $picSeparator = $picLI.find('.separator');
+        if($prevPic.attr('src') === $pic.attr('src')) {
+          $pic.hide();
+          $picLI.find('.user').hide();
+          $picSeparator.hide();
+        } else {
+          $picSeparator.css('border-bottom', '1px solid #EAEAEA');
+        }
+      }
+
+    }
+  }, INTERVAL);
+}(jQuery)
No results found