151 lines
5.0 KiB
JavaScript
151 lines
5.0 KiB
JavaScript
/*global window, jQuery */
|
|
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var init = function (htmlElement) {
|
|
|
|
var $element = $(htmlElement),
|
|
$scrollbar, $drag, $wrapper, $content, mouseOffsetY, updateId,
|
|
update, scroll;
|
|
|
|
if (!$element.css("position") || $element.css("position") === "static") {
|
|
$element.css("position", "relative");
|
|
}
|
|
|
|
$scrollbar = $("<div class='scrollbar' />");
|
|
$drag = $("<div class='drag' />").appendTo($scrollbar);
|
|
$element
|
|
.wrapInner("<div class='wrapper'><div class='content' /></div>")
|
|
.append($scrollbar);
|
|
$wrapper = $element.find("> .wrapper");
|
|
$content = $wrapper.find("> .content");
|
|
mouseOffsetY = 0;
|
|
|
|
update = function (repeat) {
|
|
|
|
var visibleHeight, contentHeight, scrollTop, scrollTopFrac, visVertFrac;
|
|
|
|
if (updateId && !repeat) {
|
|
clearInterval(updateId);
|
|
updateId = undefined;
|
|
} else if (!updateId && repeat) {
|
|
updateId = setInterval(function() { update(true); }, 50);
|
|
}
|
|
|
|
$wrapper.css("height", $element.height());
|
|
visibleHeight = $element.height();
|
|
contentHeight = $content.outerHeight();
|
|
scrollTop = $wrapper.scrollTop();
|
|
scrollTopFrac = scrollTop / contentHeight;
|
|
visVertFrac = Math.min(visibleHeight / contentHeight, 1);
|
|
|
|
if (visVertFrac < 1) {
|
|
$scrollbar
|
|
.fadeIn(50)
|
|
.css({
|
|
height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight(true)
|
|
});
|
|
$drag
|
|
.css({
|
|
top: $scrollbar.height() * scrollTopFrac,
|
|
height: $scrollbar.height() * visVertFrac
|
|
});
|
|
} else {
|
|
$scrollbar.fadeOut(50);
|
|
}
|
|
};
|
|
|
|
scroll = function (event) {
|
|
|
|
var clickFrac = (event.pageY - $scrollbar.offset().top - mouseOffsetY) / $scrollbar.height();
|
|
|
|
$wrapper.scrollTop($content.outerHeight() * clickFrac);
|
|
update();
|
|
event.preventDefault();
|
|
};
|
|
|
|
$element
|
|
.mousewheel(function (event, delta) {
|
|
|
|
$wrapper.scrollTop($wrapper.scrollTop() - 50 * delta);
|
|
update();
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
})
|
|
.scroll(update);
|
|
$element.get(0).updateScrollbar = update;
|
|
$wrapper
|
|
.css({
|
|
"padding-right": $scrollbar.outerWidth(true),
|
|
height: $element.height(),
|
|
overflow: "hidden"
|
|
});
|
|
$scrollbar
|
|
.css({
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
overflow: "hidden",
|
|
cursor: "pointer"
|
|
})
|
|
.mousedown(function (event) {
|
|
|
|
mouseOffsetY = $drag.outerHeight() / 2;
|
|
scroll(event);
|
|
$scrollbar.addClass("dragOn");
|
|
$(window)
|
|
.bind("mousemove", scroll)
|
|
.one("mouseup", function (event) {
|
|
|
|
$scrollbar.removeClass("dragOn");
|
|
$(window).unbind("mousemove", scroll);
|
|
scroll(event);
|
|
event.stopPropagation();
|
|
});
|
|
event.preventDefault();
|
|
})
|
|
.each(function () {
|
|
|
|
this.onselectstart = function () {
|
|
|
|
return false;
|
|
};
|
|
});
|
|
$drag
|
|
.css({
|
|
position: "absolute",
|
|
left: 0,
|
|
width: "100%"
|
|
})
|
|
.mousedown(function (event) {
|
|
|
|
mouseOffsetY = event.pageY - $drag.offset().top;
|
|
scroll(event);
|
|
$scrollbar.addClass("dragOn");
|
|
$(window)
|
|
.bind("mousemove", scroll)
|
|
.one("mouseup", function (event) {
|
|
|
|
$scrollbar.removeClass("dragOn");
|
|
$(window).unbind("mousemove", scroll);
|
|
scroll(event);
|
|
event.stopPropagation();
|
|
});
|
|
event.stopPropagation();
|
|
});
|
|
|
|
update();
|
|
};
|
|
|
|
|
|
$.fn.scrollpanel = function () {
|
|
|
|
return this.each(function () {
|
|
|
|
init(this);
|
|
});
|
|
};
|
|
|
|
}(jQuery));
|