diff --git a/client/index.html b/client/index.html index 4115e5c5..dbe2dd38 100644 --- a/client/index.html +++ b/client/index.html @@ -116,11 +116,12 @@ - - + + + - + diff --git a/client/js/chat.js b/client/js/chat.js index f13d0823..ed9a9fa3 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -1,12 +1,6 @@ $(function() { var socket = io.connect(""); - - $.each([ - "NETWORKS", - "CHANNELS", - "MESSAGES", - "USERS" - ], function(i, type) { + $.each(["NETWORKS", "CHANNELS", "MESSAGES", "USERS"], function(i, type) { socket.on(type, function(json) { event(type, json); }); @@ -50,7 +44,7 @@ $(function() { .first() .addClass("active"); - chat.find(".messages").sticky().scrollToBottom(); + chat.find(".messages").scrollGlue({animate: 400}).scrollToBottom(); chat.find(".window") .first() .bringToTop(); @@ -81,7 +75,7 @@ $(function() { .last() .bringToTop() .find(".messages") - .sticky(); + .scrollGlue({animate: 400}); break; case "USERS": @@ -125,7 +119,7 @@ $(function() { chat.find(".window[data-id='" + id + "']") .bringToTop(); }); - + sidebar.find("input[type=checkbox]").each(function() { var input = $(this); var value = input.val(); @@ -196,9 +190,7 @@ $(function() { text: "/QUERY " + name }); }); -}); -(function($) { var highest = 1; $.fn.bringToTop = function() { return this.css('z-index', highest++) @@ -210,67 +202,4 @@ $(function() { .removeClass("active") .end(); }; -})(jQuery); - -// Sticky plugin -// https://github.com/erming/sticky - -(function($) { - var append = $.fn.append; - $.fn.append = function() { - return append.apply(this, arguments).trigger("append"); - }; - - $.fn.sticky = function() { - var self = this; - if (self.size() > 1) { - return self.each(function() { - $(this).sticky(); - }); - } - - var timer; - var resizing = false; - $(window).on("resize", function() { - // This will prevent the scroll event from triggering - // while resizing the window. - resizing = true; - - clearTimeout(timer); - timer = setTimeout(function() { - resizing = false; - }, 100); - - if (sticky) { - self.scrollToBottom(); - } - }); - - var sticky = false; - self.on("scroll", function() { - if (!resizing) { - sticky = self.isScrollAtBottom(); - } - }); - self.trigger("scroll"); - self.on("append", function() { - if (sticky) { - self.scrollToBottom(); - } - }); - - return this; - }; - - $.fn.scrollToBottom = function() { - return this.each(function() { - this.scrollTop = this.scrollHeight; - }); - }; - - $.fn.isScrollAtBottom = function() { - if ((this.scrollTop() + this.outerHeight() + 1) >= this.prop("scrollHeight")) { - return true; - } - }; -})(jQuery); \ No newline at end of file +}); \ No newline at end of file diff --git a/client/js/lib/jquery-2.1.0.min.js b/client/js/lib/jquery.js similarity index 100% rename from client/js/lib/jquery-2.1.0.min.js rename to client/js/lib/jquery.js diff --git a/client/js/lib/jquery.scrollGlue.js b/client/js/lib/jquery.scrollGlue.js new file mode 100644 index 00000000..3c8768d9 --- /dev/null +++ b/client/js/lib/jquery.scrollGlue.js @@ -0,0 +1,88 @@ +/*! + * jquery-scroll-glue + * https://github.com/erming/jquery-scroll-glue + * + * Copyright 2014 Mattias Erming + * MIT License + */ + +(function($) { + + var append = $.fn.append; + $.fn.append = function() { + return append.apply(this, arguments).trigger("append"); + }; + + var html = $.fn.html; + $.fn.html = function() { + var result = html.apply(this, arguments); + if (arguments.length) { + // Only trigger this event when something + // has been inserted. + this.trigger("html"); + } + return result; + }; + + $.fn.scrollGlue = function(options) { + var settings = $.extend({ + animate: 0 + }, options); + + var self = this; + if (self.size() > 1) { + return self.each(function() { + $(this).scrollGlue(options); + }); + } + + var timer; + var resizing = false; + $(window).on("resize", function() { + // This will prevent the scroll event from triggering + // while resizing the window. + resizing = true; + + clearTimeout(timer); + timer = setTimeout(function() { + resizing = false; + }, 100); + + if (sticky) { + self.scrollToBottom(); + } + }); + + var sticky = false; + self.on("scroll", function() { + if (!resizing) { + sticky = self.isScrollAtBottom(); + } + }); + self.trigger("scroll"); + self.on("append html", function() { + if (sticky) { + self.scrollToBottom(settings.animate); + } + }); + + return this; + }; + + $.fn.scrollToBottom = function(animate) { + return this.each(function() { + $(this).finish().animate({scrollTop: this.scrollHeight}, animate || 0); + }); + }; + + $.fn.isScrollAtBottom = function() { + if ((this.scrollTop() + this.outerHeight() + 1) >= this.prop("scrollHeight")) { + return true; + } + }; + + // Find elements with the 'scroll-glue' attribute and + // activate the plugin. + $("[scroll-glue]").scrollGlue(); + +})(jQuery); \ No newline at end of file diff --git a/client/js/lib/mustache.min.js b/client/js/lib/mustache.js similarity index 100% rename from client/js/lib/mustache.min.js rename to client/js/lib/mustache.js