Updated jquery.scrollGlue.js
This commit is contained in:
parent
e6679fc35b
commit
a3e958108b
@ -116,8 +116,9 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
<script src="/js/lib/mustache.min.js"></script>
|
<script src="/js/lib/mustache.js"></script>
|
||||||
<script src="/js/lib/jquery-2.1.0.min.js"></script>
|
<script src="/js/lib/jquery.js"></script>
|
||||||
|
<script src="/js/lib/jquery.scrollGlue.js"></script>
|
||||||
<script src="/js/lib/bootstrap.js"></script>
|
<script src="/js/lib/bootstrap.js"></script>
|
||||||
<script src="/js/chat.js"></script>
|
<script src="/js/chat.js"></script>
|
||||||
|
|
||||||
|
@ -1,12 +1,6 @@
|
|||||||
$(function() {
|
$(function() {
|
||||||
var socket = io.connect("");
|
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) {
|
socket.on(type, function(json) {
|
||||||
event(type, json);
|
event(type, json);
|
||||||
});
|
});
|
||||||
@ -50,7 +44,7 @@ $(function() {
|
|||||||
.first()
|
.first()
|
||||||
.addClass("active");
|
.addClass("active");
|
||||||
|
|
||||||
chat.find(".messages").sticky().scrollToBottom();
|
chat.find(".messages").scrollGlue({animate: 400}).scrollToBottom();
|
||||||
chat.find(".window")
|
chat.find(".window")
|
||||||
.first()
|
.first()
|
||||||
.bringToTop();
|
.bringToTop();
|
||||||
@ -81,7 +75,7 @@ $(function() {
|
|||||||
.last()
|
.last()
|
||||||
.bringToTop()
|
.bringToTop()
|
||||||
.find(".messages")
|
.find(".messages")
|
||||||
.sticky();
|
.scrollGlue({animate: 400});
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "USERS":
|
case "USERS":
|
||||||
@ -196,9 +190,7 @@ $(function() {
|
|||||||
text: "/QUERY " + name
|
text: "/QUERY " + name
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
var highest = 1;
|
var highest = 1;
|
||||||
$.fn.bringToTop = function() {
|
$.fn.bringToTop = function() {
|
||||||
return this.css('z-index', highest++)
|
return this.css('z-index', highest++)
|
||||||
@ -210,67 +202,4 @@ $(function() {
|
|||||||
.removeClass("active")
|
.removeClass("active")
|
||||||
.end();
|
.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);
|
|
88
client/js/lib/jquery.scrollGlue.js
Normal file
88
client/js/lib/jquery.scrollGlue.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
/*!
|
||||||
|
* jquery-scroll-glue
|
||||||
|
* https://github.com/erming/jquery-scroll-glue
|
||||||
|
*
|
||||||
|
* Copyright 2014 Mattias Erming <mattias@mattiaserming.com>
|
||||||
|
* 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);
|
Loading…
Reference in New Issue
Block a user