Socket ops are now fully functional.

app.js

@@ -197,6 +197,8 @@ io.configure(function() {
 io.sockets.on('connection', function(socket) {
   console.log('SERVER: Connection Made');
 
+  // @TODO should be this AJAX?
+  // Handle submission of a new note on the form;
   socket.on('newNoteSubmitted', function(noteData) {
     // @TODO use local socket to react differently for submitter.
     console.log('New Note');
@@ -221,4 +223,16 @@ io.sockets.on('connection', function(socket) {
     });
   });
 
+  // Handle onScroll event when user scrolls to bottom of page.
+  socket.on('additionalNotesRequested', function(requestParams) {
+    console.log(requestParams);
+    console.log('Give me new notes');
+    noteController.getNotes(requestParams).then(function(newNotes) {
+      console.log('notes promise.');
+      console.log(newNotes);
+      // Emit new socket with retrieved notes.
+      socket.emit('additionalNotesLoaded', {notes: newNotes, requestParams: requestParams});
+    });
+  });
+
 });

controllers/home.js

@@ -8,7 +8,7 @@ var Note = require('../models/Note');
  */
 
 exports.index = function(req, res) {
-  Note.find(null, null, {limit: 10}, function(err, foundNotes) {
+  Note.find(null, null, {limit: 9}, function(err, foundNotes) {
     console.log(foundNotes);
     res.render('home', {
        notes: foundNotes

controllers/note.js

@@ -60,7 +60,13 @@ exports.saveNote = function(noteData, callback) {
       callback(err, note);
   });
 
-}
+};
+
+exports.getNotes = function(requestParams) {
+  console.log('getnotes');
+  // @TODO -- use select here to figure out unneeded params.
+  return Note.find(null, null, requestParams).exec();
+};
 
 
 

public/js/main.js

@@ -4,19 +4,39 @@ $(document).ready(function() {
   var flashElement = $('.new-content-flash');
   var flashInAnimationName = 'fadeInDown';
   var flashOutAnimationName = 'fadeOut';
+  var noteIncrementLoadLimit = 18;
 
+  // Helpers.
+  var templateNote = function(noteData) {
+    // Template the new note.
+    var newNote = "<li class='note'><div class='note-text'>" + noteData.text + "</div>";
+    if (noteData.twitterHandle) {
+      newNote = newNote + "<div class='note-twitter-handle'><a href='http://twitter.com/" + noteData.twitterHandle + "' target='_blank'>@" + noteData.twitterHandle + "</a></div>";
+    }
+    newNote = newNote + "</li>";
+
+    return newNote;
+  };
+
+  // Setup Stuff.
+  // The notes there initially will always show up so we can be sure about it.
+  // TODO -- look into socket loading in the beginning -- with not db call by load at all.
+  $('ul.notes').data('loadedNotes', 0);
   // Isotope stuff.
-  container.isotope({
+  /*container.isotope({
     itemSelector: '.note',
     // options...
     resizable: false, // disable normal resizing
     // set columnWidth to a percentage of container width
     masonry: { columnWidth: container.width() / 50 }
-  });
+  });*/
 
   $('ul.notes').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
     if (isInView && visiblePartY == 'bottom') {
       console.log('Gonna load some stuff');
+      var noteRequestParams = {skip: container.data('loadedNotes'), limit: noteIncrementLoadLimit};
+      console.log(noteRequestParams);
+      socket.emit('additionalNotesRequested', noteRequestParams);
     }
   });
 
@@ -39,15 +59,43 @@ $(document).ready(function() {
   var socket = io.connect(window.location.href);
   socket.on('connect', function() {
     console.log('CLIENT: Connection Made');
+    var noteRequestParams = {skip: container.data('loadedNotes'), limit: noteIncrementLoadLimit};
+    console.log(noteRequestParams);
+    socket.emit('additionalNotesRequested', noteRequestParams);
   });
 
   socket.on('appFlash', function(flashData) {
     $('#flash').html('<div class="alert animated fadeIn alert-' + flashData.type + '">' + flashData.message + '</div>');
   });
 
+  socket.on('additionalNotesLoaded', function(newNoteData) {
+    console.log(newNoteData);
+    if (!newNoteData.requestParams.skip || newNoteData.requestParams.skip < 1) {
+        container.isotope({
+          itemSelector: '.note',
+          // options...
+          resizable: false, // disable normal resizing
+          // set columnWidth to a percentage of container width
+          masonry: { columnWidth: container.width() / 50 }
+        });
+    }
+    if (newNoteData.notes.length < 1) {
+        container.unbind('inview');
+        return;
+    }
+    console.log('NewNotesReceived');
+    var notesToAdd = '';
+    for (var i = 0; i < newNoteData.notes.length; i++) {
+      notesToAdd = notesToAdd + templateNote(newNoteData.notes[i]);
+    }
+    container.isotope('insert', $(notesToAdd));
+    var updatedNoteCount = container.data('loadedNotes') + noteIncrementLoadLimit;
+    container.data('loadedNotes', updatedNoteCount);
+
+  });
+
   socket.on('newNoteSaved', function(data) {
     console.log('incoming');
-    console.log(data);
     // @TODO how to template this?
     // Get Current "Unread" Note Count
     var noteCount = $('.new-content-flash').data('note-count') || 0;
@@ -60,13 +108,7 @@ $(document).ready(function() {
       .html('<strong>' + noteCount + '</strong> New Notes Available <a href="#" class="flash-show-items">Show Me</a>')
       // Make it animate.css pretty.
       .addClass('animated ' + flashInAnimationName);
-    // Template the new note.
-    var newNote = "<li class='note'><div class='note-text'>" + data.text + "</div>";
-    if (data.twitterHandle) {
-      newNote = newNote + "<div class='note-twitter-handle'><a href='http://twitter.com/" + data.twitterHandle + "' target='_blank'>@" + data.twitterHandle + "</a></div>";
-    }
-    newNote = newNote + "</li>";
-
+    var newNote = templateNote(data);
     // Prepend it to the container, but don't re-init isotope until Show Me Is Clicked.
     container.prepend(newNote);
 
@@ -85,10 +127,16 @@ $(document).ready(function() {
       flashElement
         .data('note-count', 0)
         .addClass('animated ' + flashOutAnimationName)
+
+      // Increment note count by 1;
+      var updatedNoteCount = container.data('loadedNotes') + 1;
+      container.data('loadedNotes', updatedNoteCount);
       return false;
     });
   });
 
+
+
   // @TODO Should this just be ajax?
   $('#new-note-form .btn').click(function(event) {
     event.preventDefault();

views/home.jade

@@ -4,11 +4,11 @@ block content
   h1 Yo Me Quedo en Puerto Rico porque...
   .new-content-flash
   ul.notes
-    for note in notes
-      li.note
-        .note-text= note.text
-        if note.twitterHandle
-          .note-twitter-handle
-            a(href="http://twitter.com/#{note.twitterHandle}" target="_blank")
-              @#{note.twitterHandle}
+//    for note in notes
+//      li.note
+//        .note-text= note.text
+//        if note.twitterHandle
+//          .note-twitter-handle
+//            a(href="http://twitter.com/#{note.twitterHandle}" target="_blank")
+//              @#{note.twitterHandle}