diff --git a/app.js b/app.js
index 0119375..0a98adc 100755
--- a/app.js
+++ b/app.js
@@ -104,6 +104,7 @@ app.use(express.errorHandler());
app.get('/', homeController.index);
app.get('/note/new', noteController.getNewNoteForm);
app.post('/note/new', noteController.postNewNoteForm);
+app.get('/notes/:skip/:limit', noteController.getNotes);
app.get('/login', userController.getLogin);
app.post('/login', userController.postLogin);
app.get('/logout', userController.logout);
diff --git a/controllers/note.js b/controllers/note.js
index d4b1cfc..8f4f130 100644
--- a/controllers/note.js
+++ b/controllers/note.js
@@ -62,9 +62,26 @@ exports.saveNote = function(noteData, callback) {
};
-exports.getNotes = function(requestParams) {
+/**
+ * GET /notes/:skip/:limit
+ * Get Notes.
+ * @param req
+ * @param res
+ */
+
+exports.getNotes = function(req, res) {
console.log('getnotes');
+ console.log(req.params);
+ var requestParams = {};
+ var requestParams = {skip: req.params.skip, limit: req.params.limit};
+ // TODO validate params incoming.
+ console.log(requestParams);
// @TODO -- use select here to figure out unneeded params.
- return Note.find(null, null, requestParams).sort({ _id: -1 }).exec();
+ Note.find(null, null, requestParams).sort({ _id: -1 }).exec(function(err, foundNotes){
+ res.send({
+ requestParams: requestParams,
+ notes: foundNotes
+ });
+ });
};
diff --git a/public/js/main.js b/public/js/main.js
index 6ec654a..f69cd76 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,14 +1,15 @@
// @TODO most of this stuff is home page specific. Make it only load to front page.
-$(document).ready(function() {
- var container = $('.notes');
- var errorFlashContainer = $('#flash');
- var flashElement = $('.new-content-flash');
- var flashInAnimationName = 'fadeInDown';
- var flashOutAnimationName = 'fadeOut';
- var noteIncrementLoadLimit = 27;
-
- // Helpers.
- var templateNote = function(noteData) {
+
+var prLover = {
+ container: 'ul.notes',
+ errorFlashContainer: $('#flash'),
+ flashElement: $('.new-content-flash'),
+ flashInAnimationName: 'fadeInDown',
+ flashOutAnimationName: 'fadeOut',
+ noteIncrementLoadLimit: 27,
+ flashFinishedEvents: 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
+
+ templateNote: function(noteData) {
// Template the new note.
var newNote = "
" + noteData.text + "
";
if (noteData.twitterHandle) {
@@ -17,76 +18,107 @@ $(document).ready(function() {
newNote = newNote + "";
return newNote;
- };
+ },
- var getDocHeight = function() {
+ getDocHeight: function() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
- }
-
- var requestNotes = function() {
- var noteRequestParams = {skip: container.data('loadedNotes'), limit: noteIncrementLoadLimit};
- console.log(noteRequestParams);
- socket.emit('additionalNotesRequested', noteRequestParams);
- };
-
- container.data('loadedNotes', 0);
- $(window).bind('scroll', function() {
- if($(window).scrollTop() + $(window).height() == getDocHeight()) {
- console.log("bottom!");
- requestNotes();
- }
- });
-
- // 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.
- /*container.data('loadedNotes', 0);
- container.bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
- console.log('Bind Fire.');
- console.log('isInView: ' + isInView);
- console.log('visiblePartY: ' + visiblePartY);
- if (isInView && (visiblePartY == 'bottom' || visiblePartY == 'both')) {
- console.log('Gonna load some stuff');
- var noteRequestParams = {skip: container.data('loadedNotes'), limit: noteIncrementLoadLimit};
- console.log(noteRequestParams);
- socket.emit('additionalNotesRequested', noteRequestParams);
- }
- });*/
-
- // Bind to the flash element that every time the animation is over, to clear the animate.css classes.
- var fadeOutBinding = function () {
+ },
+ fadeOut: function (element) {
console.log('fading out.');
// React differently based on in our out animation;
- if ($(this).hasClass(flashOutAnimationName)) {
+ if ($(element).hasClass(flashOutAnimationName)) {
// Clear html on flash out.
console.log('flashout');
- $(this).html('');
+ $(element).html('');
}
// Regardless remove animation classes.
- $(this).removeClass('animated ' + flashInAnimationName);
- $(this).removeClass('animated ' + flashOutAnimationName);
- };
+ $(element).removeClass('animated ' + flashInAnimationName);
+ $(element).removeClass('animated ' + flashOutAnimationName);
+ },
+
+ getNotes: function(options) {
+ console.log('Get Notes Options');
+ console.log(options);
+ var url = 'notes/' + options.skip + '/' + options.limit;
+ return $.ajax({
+ type: "GET",
+ url: url,
+ dataType: 'json',
+ });
+ },
+ insertNewNotes: function(newNoteData) {
+ console.log('Insert New Notes');
+ console.log(newNoteData);
+ // First Time Call.
+ if (!newNoteData.requestParams.skip || newNoteData.requestParams.skip < 1) {
+ $(this.container).isotope({
+ itemSelector: '.note',
+ // options...
+ resizable: false, // disable normal resizing
+ // set columnWidth to a percentage of container width
+ masonry: { columnWidth: $(this.container).width() / 50 }
+ });
+ }
+ // Last Time Call.
+ if (newNoteData.notes.length < 1) {
+ console.log('Unbind InView');
+ //container.unbind('inview');
+ $(window).unbind('scroll');
+ return;
+ }
+ // Insert notes as needed.
- $(errorFlashContainer).bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', fadeOutBinding);
- $(flashElement).bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', fadeOutBinding);
+ var notesToAdd = '';
+ for (var i = 0; i < newNoteData.notes.length; i++) {
+ notesToAdd = notesToAdd + this.templateNote(newNoteData.notes[i]);
+ }
+ $(this.container).isotope('insert', $(notesToAdd));
+ var updatedNoteCount = $(this.container).data('loadedNotes') + this.noteIncrementLoadLimit;
+ $(this.container).data('loadedNotes', updatedNoteCount);
+ },
+
+ init: function() {
+ // Setup.
+ // Grab Loaded Notes
+ var self = this;
+ $(this.container).data('loadedNotes', 0);
+ // Bind Scroll Loading.
+ $(window).bind('scroll', function() {
+ if ($(window).scrollTop() + $(window).height() == self.getDocHeight()) {
+ console.log("bottom!");
+ self.getNotes({
+ skip: $(self.container).data('loadedNotes'),
+ limit: self.noteIncrementLoadLimit
+ }).then(function(noteData) {
+ self.insertNewNotes(noteData);
+ });
+ }
+ });
+ // Bind Flash Finished Events.
+ $(this.errorFlashContainer).bind(this.flashFinishedEvent, this.fadeOut);
+ $(this.flashElement).bind(this.flashFinishedEvent, this.fadeOut);
+
+ this.getNotes({
+ skip: $(this.container).data('loadedNotes'),
+ limit: this.noteIncrementLoadLimit
+ }).then(function(noteData) {
+ self.insertNewNotes(noteData);
+ });
+ }
+};
- // Socket Ops.
- var socket = io.connect();
- socket.on('connect', function() {
- console.log('CLIENT: Connection Made');
- var noteRequestParams = {skip: container.data('loadedNotes'), limit: noteIncrementLoadLimit};
- socket.emit('additionalNotesRequested', noteRequestParams);
- });
+$(document).ready(function() {
+ prLover.init();
- socket.on('appFlash', function(flashData) {
+ /* socket.on('appFlash', function(flashData) {
var flashString = '';
for (var i = 0; i < flashData.length; i++) {
flashString = flashString + '' + flashData[i].message + '
';
@@ -95,9 +127,9 @@ $(document).ready(function() {
setTimeout(function() {
$(errorFlashContainer).addClass('animated ' + flashOutAnimationName);
}, 500);
- });
+ });*/
- socket.on('additionalNotesLoaded', function(newNoteData) {
+ /*socket.on('additionalNotesLoaded', function(newNoteData) {
if (!newNoteData.requestParams.skip || newNoteData.requestParams.skip < 1) {
container.isotope({
itemSelector: '.note',
@@ -122,9 +154,9 @@ $(document).ready(function() {
var updatedNoteCount = container.data('loadedNotes') + noteIncrementLoadLimit;
container.data('loadedNotes', updatedNoteCount);
- });
+ });*/
- socket.on('newNoteSaved', function(data) {
+ /*socket.on('newNoteSaved', function(data) {
// @TODO how to template this?
// Get Current "Unread" Note Count
var noteCount = $('.new-content-flash').data('note-count') || 0;
@@ -169,7 +201,7 @@ $(document).ready(function() {
return false;
});
});
-
+*/
// @TODO Should this just be ajax?
diff --git a/views/home.jade b/views/home.jade
index e404732..e087344 100644
--- a/views/home.jade
+++ b/views/home.jade
@@ -20,6 +20,7 @@ block content
| Enviar
.new-content-flash
ul.notes
+ //img(src="http://www.ajaxload.info/cache/FF/FF/FF/34/7C/DF/27-1.gif")
// for note in notes
// li.note
// .note-text= note.text