Updated jquery.scrollGlue.js
This commit is contained in:
Mattias Erming
parent
e6679fc35b
commit
a3e958108b
|
|
@ -116,8 +116,9 @@
|
|||
</script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/js/lib/mustache.min.js"></script>
|
||||
<script src="/js/lib/jquery-2.1.0.min.js"></script>
|
||||
<script src="/js/lib/mustache.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/chat.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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":
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -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