/*!
* jQuery scrollintoview() plugin and :scrollable selector filter
*
* Version 1.8 (14 Jul 2011)
* Requires jQuery 1.4 or newer
*
* Copyright (c) 2011 Robert Koritnik
* Licensed under the terms of the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
var stopScrollEvent = false;
(function ($) {
var converter = {
vertical: { x: false, y: true },
horizontal: { x: true, y: false },
both: { x: true, y: true },
x: { x: true, y: false },
y: { x: false, y: true }
};
var settings = {
duration: "fast",
direction: "both"
};
var rootrx = /^(?:html)$/i;
// gets border dimensions
var borders = function (domElement, styles) {
styles = styles || (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(domElement, null) : domElement.currentStyle);
var px = document.defaultView && document.defaultView.getComputedStyle ? true : false;
var b = {
top: (parseFloat(px ? styles.borderTopWidth : $.css(domElement, "borderTopWidth")) || 0),
left: (parseFloat(px ? styles.borderLeftWidth : $.css(domElement, "borderLeftWidth")) || 0),
bottom: (parseFloat(px ? styles.borderBottomWidth : $.css(domElement, "borderBottomWidth")) || 0),
right: (parseFloat(px ? styles.borderRightWidth : $.css(domElement, "borderRightWidth")) || 0)
};
return {
top: b.top,
left: b.left,
bottom: b.bottom,
right: b.right,
vertical: b.top + b.bottom,
horizontal: b.left + b.right
};
};
var dimensions = function ($element) {
var win = $(window);
var isRoot = rootrx.test($element[0].nodeName);
return {
border: isRoot ? { top: 0, left: 0, bottom: 0, right: 0} : borders($element[0]),
scroll: {
top: (isRoot ? win : $element).scrollTop(),
left: (isRoot ? win : $element).scrollLeft()
},
scrollbar: {
right: isRoot ? 0 : $element.innerWidth() - $element[0].clientWidth,
bottom: isRoot ? 0 : $element.innerHeight() - $element[0].clientHeight
},
rect: (function () {
var r = $element[0].getBoundingClientRect();
return {
top: isRoot ? 0 : r.top,
left: isRoot ? 0 : r.left,
bottom: isRoot ? $element[0].clientHeight : r.bottom,
right: isRoot ? $element[0].clientWidth : r.right
};
})()
};
};
$.fn.extend({
scrollintoview: function (options) {
/// Scrolls the first element in the set into view by scrolling its closest scrollable parent.
/// Additional options that can configure scrolling:
/// duration (default: "fast") - jQuery animation speed (can be a duration string or number of milliseconds)
/// direction (default: "both") - select possible scrollings ("vertical" or "y", "horizontal" or "x", "both")
/// complete (default: none) - a function to call when scrolling completes (called in context of the DOM element being scrolled)
///
/// Returns the same jQuery set that this function was run on.
options = $.extend({}, settings, options);
options.direction = converter[typeof (options.direction) === "string" && options.direction.toLowerCase()] || converter.both;
var dirStr = "";
if (options.direction.x === true) dirStr = "horizontal";
if (options.direction.y === true) dirStr = dirStr ? "both" : "vertical";
var el = this.eq(0);
var scroller = el.closest(":scrollable(" + dirStr + ")");
// check if there's anything to scroll in the first place
if (scroller.length > 0)
{
scroller = scroller.eq(0);
var dim = {
e: dimensions(el),
s: dimensions(scroller)
};
var rel = {
top: dim.e.rect.top - (dim.s.rect.top + dim.s.border.top),
bottom: dim.s.rect.bottom - dim.s.border.bottom - dim.s.scrollbar.bottom - dim.e.rect.bottom,
left: dim.e.rect.left - (dim.s.rect.left + dim.s.border.left),
right: dim.s.rect.right - dim.s.border.right - dim.s.scrollbar.right - dim.e.rect.right
};
var animOptions = {};
// vertical scroll
if (options.direction.y === true)
{
if (rel.top < 0)
{
animOptions.scrollTop = dim.s.scroll.top + rel.top;
}
else if (rel.top > 0 && rel.bottom < 0)
{
animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
}
}
// horizontal scroll
if (options.direction.x === true)
{
if (rel.left < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + rel.left;
}
else if (rel.left > 0 && rel.right < 0)
{
animOptions.scrollLeft = dim.s.scroll.left + Math.min(rel.left, -rel.right);
}
}
// scroll if needed
if (!$.isEmptyObject(animOptions))
{
if (rootrx.test(scroller[0].nodeName))
{
scroller = $("html,body");
}
scroller
.animate(animOptions, options.duration)
.eq(0) // we want function to be called just once (ref. "html,body")
.queue(function (next) {
$.isFunction(options.complete) && options.complete.call(scroller[0]);
next();
});
}
else
{
// when there's nothing to scroll, just call the "complete" function
$.isFunction(options.complete) && options.complete.call(scroller[0]);
}
}
// return set back
return this;
}
});
var scrollValue = {
auto: true,
scroll: true,
visible: false,
hidden: false
};
$.extend($.expr[":"], {
scrollable: function (element, index, meta, stack) {
var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;
var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);
var overflow = {
x: scrollValue[styles.overflowX.toLowerCase()] || true,
y: scrollValue[styles.overflowY.toLowerCase()] || false,
isRoot: rootrx.test(element.nodeName)
};
// check if completely unscrollable (exclude HTML element because it's special)
if (!overflow.x && !overflow.y && !overflow.isRoot)
{
return false;
}
var size = {
height: {
scroll: element.scrollHeight,
client: element.clientHeight
},
width: {
scroll: element.scrollWidth,
client: element.clientWidth
},
// check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars
scrollableX: function () {
return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;
},
scrollableY: function () {
return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;
}
};
return direction.y && size.scrollableY() || direction.x && size.scrollableX();
}
});
})(jQuery);
/*
* jQuery scrollsync Plugin
* version: 1.0 (30 -Jun-2009)
* Copyright (c) 2009 Miquel Herrera
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
;(function($){ // secure $ jQuery alias
/**
* Synchronizes scroll of one element (first matching targetSelector filter)
* with all the rest meaning that the rest of elements scroll will follow the
* matched one.
*
* options is composed of the following properties:
* ------------------------------------------------------------------------
* targetSelector | A jQuery selector applied to filter. The first element of
* | the resulting set will be the target all the rest scrolls
* | will be synchronised against. Defaults to ':first' which
* | selects the first element in the set.
* ------------------------------------------------------------------------
* axis | sets the scroll axis which will be synchronised, can be
* | x, y or xy. Defaults to xy which will synchronise both.
* ------------------------------------------------------------------------
*/
$.fn.scrollsync = function( options ){
var settings = $.extend(
{
targetSelector:':first',
axis: 'xy'
},options || {});
function scrollHandler(event) {
if (event.data.xaxis){
event.data.followers.scrollLeft(event.data.target.scrollLeft());
}
if (event.data.yaxis){
event.data.followers.scrollTop(event.data.target.scrollTop());
}
}
// Find target to follow and separate from followers
settings.target = this.filter(settings.targetSelector).filter(':first');
settings.followers=this.not(settings.target); // the rest of elements
// Parse axis
settings.xaxis= (settings.axis=='xy' || settings.axis=='x') ? true : false;
settings.yaxis= (settings.axis=='xy' || settings.axis=='y') ? true : false;
if (!settings.xaxis && !settings.yaxis) return; // No axis left
// bind scroll event passing array of followers
settings.target.bind('scroll', settings, scrollHandler);
}; // end plugin scrollsync
})( jQuery ); // confine scope
/*
* jQuery dragscrollable Plugin
* version: 1.0 (25-Jun-2009)
* Copyright (c) 2009 Miquel Herrera
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
;(function($){ // secure $ jQuery alias
/**
* Adds the ability to manage elements scroll by dragging
* one or more of its descendant elements. Options parameter
* allow to specifically select which inner elements will
* respond to the drag events.
*
* options properties:
* ------------------------------------------------------------------------
* dragSelector | jquery selector to apply to each wrapped element
* | to find which will be the dragging elements.
* | Defaults to '>:first' which is the first child of
* | scrollable element
* ------------------------------------------------------------------------
* acceptPropagatedEvent| Will the dragging element accept propagated
* | events? default is yes, a propagated mouse event
* | on a inner element will be accepted and processed.
* | If set to false, only events originated on the
* | draggable elements will be processed.
* ------------------------------------------------------------------------
* preventDefault | Prevents the event to propagate further effectivey
* | dissabling other default actions. Defaults to true
* ------------------------------------------------------------------------
*
* usage examples:
*
* To add the scroll by drag to the element id=viewport when dragging its
* first child accepting any propagated events
* $('#viewport').dragscrollable();
*
* To add the scroll by drag ability to any element div of class viewport
* when dragging its first descendant of class dragMe responding only to
* evcents originated on the '.dragMe' elements.
* $('div.viewport').dragscrollable({dragSelector:'.dragMe:first',
* acceptPropagatedEvent: false});
*
* Notice that some 'viewports' could be nested within others but events
* would not interfere as acceptPropagatedEvent is set to false.
*
*/
$.fn.dragscrollable = function( options ){
var settings = $.extend(
{
dragSelector:'>:first',
acceptPropagatedEvent: true,
preventDefault: true
},options || {});
var dragscroll= {
mouseDownHandler : function(event) {
stopScrollEvent = false;
// mousedown, left click, check propagation
if (event.which!=1 ||
(!event.data.acceptPropagatedEvent && event.target != this)){
return false;
}
// Initial coordinates will be the last when dragging
event.data.lastCoord = {left: event.clientX, top: event.clientY};
$.event.add( document, "mouseup",
dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove",
dragscroll.mouseMoveHandler, event.data );
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseMoveHandler : function(event) { // User is dragging
// How much did the mouse move?
var delta = {left: (event.clientX - event.data.lastCoord.left),
top: (event.clientY - event.data.lastCoord.top)};
// Set the scroll position relative to what ever the scroll is now
event.data.scrollable.scrollLeft(
event.data.scrollable.scrollLeft() - delta.left);
event.data.scrollable.scrollTop(
event.data.scrollable.scrollTop() - delta.top);
// Save where the cursor is
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseUpHandler : function(event) { // Stop scrolling
$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
if (event.data.preventDefault) {
event.preventDefault();
if (handleEndScroll)
handleEndScroll();
return false;
}
}
}
// set up the initial events
this.each(function() {
// closure object data for each scrollable element
var data = {scrollable : $(this),
acceptPropagatedEvent : settings.acceptPropagatedEvent,
preventDefault : settings.preventDefault }
// Set mouse initiating event on the desired descendant
$(this).find(settings.dragSelector).
bind('mousedown', data, dragscroll.mouseDownHandler);
});
}; //end plugin dragscrollable
})( jQuery ); // confine scope