File manager

#js&llgkk* File manager

File manager - Edit - /home/karenpetzb/www/business/light/js/jScrollPane/script/jquery.jscrollpane.js

Back
/! jScrollPane - v2.0.0beta12 - 2012-09-27 * http://jscrollpane.kelvinluck.com/ * * Copyright (c) 2010 Kelvin Luck * Dual licensed under the MIT or GPL licenses. / // Script: jScrollPane - cross browser customisable scrollbars // // Version: 2.0.0beta12, Last updated: 2012-09-27* // // Project Home - http://jscrollpane.kelvinluck.com/ // GitHub - http://github.com/vitch/jScrollPane // Source - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.js // (Minified) - http://github.com/vitch/jScrollPane/raw/master/script/jquery.jscrollpane.min.js // // About: License // // Copyright (c) 2012 Kelvin Luck // Dual licensed under the MIT or GPL Version 2 licenses. // http://jscrollpane.kelvinluck.com/MIT-LICENSE.txt // http://jscrollpane.kelvinluck.com/GPL-LICENSE.txt // // About: Examples // // All examples and demos are available through the jScrollPane example site at: // http://jscrollpane.kelvinluck.com/ // // About: Support and Testing // // This plugin is tested on the browsers below and has been found to work reliably on them. If you run // into a problem on one of the supported browsers then please visit the support section on the jScrollPane // website (http://jscrollpane.kelvinluck.com/) for more information on getting support. You are also // welcome to fork the project on GitHub if you can contribute a fix for a given issue. // // jQuery Versions - tested in 1.4.2+ - reported to work in 1.3.x // Browsers Tested - Firefox 3.6.8, Safari 5, Opera 10.6, Chrome 5.0, IE 6, 7, 8 // // About: Release History // // 2.0.0beta12 - (2012-09-27) fix for jQuery 1.8+ // 2.0.0beta11 - (2012-05-14) // 2.0.0beta10 - (2011-04-17) cleaner required size calculation, improved keyboard support, stickToBottom/Left, other small fixes // 2.0.0beta9 - (2011-01-31) new API methods, bug fixes and correct keyboard support for FF/OSX // 2.0.0beta8 - (2011-01-29) touchscreen support, improved keyboard support // 2.0.0beta7 - (2011-01-23) scroll speed consistent (thanks Aivo Paas) // 2.0.0beta6 - (2010-12-07) scrollToElement horizontal support // 2.0.0beta5 - (2010-10-18) jQuery 1.4.3 support, various bug fixes // 2.0.0beta4 - (2010-09-17) clickOnTrack support, bug fixes // 2.0.0beta3 - (2010-08-27) Horizontal mousewheel, mwheelIntent, keyboard support, bug fixes // 2.0.0beta2 - (2010-08-21) Bug fixes // 2.0.0beta1 - (2010-08-17) Rewrite to follow modern best practices and enable horizontal scrolling, initially hidden // elements and dynamically sized elements. // 1.x - (2006-12-31 - 2010-07-31) Initial version, hosted at googlecode, deprecated (function($,window,undefined){ $.fn.jScrollPane = function(settings) { // JScrollPane "class" - public methods are available through $('selector').data('jsp') function JScrollPane(elem, s) { var settings, jsp = this, pane, paneWidth, paneHeight, container, contentWidth, contentHeight, percentInViewH, percentInViewV, isScrollableV, isScrollableH, verticalDrag, dragMaxY, verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition, verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown, horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight, reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousContentWidth, wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false, originalElement = elem.clone(false, false).empty(), mwEvent = $.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp'; originalPadding = elem.css('paddingTop') + ' ' + elem.css('paddingRight') + ' ' + elem.css('paddingBottom') + ' ' + elem.css('paddingLeft'); originalPaddingTotalWidth = (parseInt(elem.css('paddingLeft'), 10) \|\| 0) + (parseInt(elem.css('paddingRight'), 10) \|\| 0); function initialise(s) { var /firstChild, lastChild, /isMaintainingPositon, lastContentX, lastContentY, hasContainingSpaceChanged, originalScrollTop, originalScrollLeft, maintainAtBottom = false, maintainAtRight = false; settings = s; if (pane === undefined) { originalScrollTop = elem.scrollTop(); originalScrollLeft = elem.scrollLeft(); elem.css( { overflow: 'hidden', padding: 0 } ); // TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should // come back to it later and check once it is unhidden... paneWidth = elem.innerWidth() + originalPaddingTotalWidth; paneHeight = elem.innerHeight(); elem.width(paneWidth); pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children()); container = $('<div class="jspContainer" />') .css({ 'width': paneWidth + 'px', 'height': paneHeight + 'px' } ).append(pane).appendTo(elem); /* // Move any margins from the first and last children up to the container so they can still // collapse with neighbouring elements as they would before jScrollPane firstChild = pane.find(':first-child'); lastChild = pane.find(':last-child'); elem.css( { 'margin-top': firstChild.css('margin-top'), 'margin-bottom': lastChild.css('margin-bottom') } ); firstChild.css('margin-top', 0); lastChild.css('margin-bottom', 0); / } else { elem.css('width', ''); maintainAtBottom = settings.stickToBottom && isCloseToBottom(); maintainAtRight = settings.stickToRight && isCloseToRight(); hasContainingSpaceChanged = elem.innerWidth() + originalPaddingTotalWidth != paneWidth \|\| elem.outerHeight() != paneHeight; if (hasContainingSpaceChanged) { paneWidth = elem.innerWidth() + originalPaddingTotalWidth; paneHeight = elem.innerHeight(); container.css({ width: paneWidth + 'px', height: paneHeight + 'px' }); } // If nothing changed since last check... if (!hasContainingSpaceChanged && previousContentWidth == contentWidth && pane.outerHeight() == contentHeight) { elem.width(paneWidth); return; } previousContentWidth = contentWidth; pane.css('width', ''); elem.width(paneWidth); container.find('>.jspVerticalBar,>.jspHorizontalBar').remove().end(); } pane.css('overflow', 'auto'); if (s.contentWidth) { contentWidth = s.contentWidth; } else { contentWidth = pane[0].scrollWidth; } contentHeight = pane[0].scrollHeight; pane.css('overflow', ''); percentInViewH = contentWidth / paneWidth; percentInViewV = contentHeight / paneHeight; isScrollableV = percentInViewV > 1; isScrollableH = percentInViewH > 1; //console.log(paneWidth, paneHeight, contentWidth, contentHeight, percentInViewH, percentInViewV, isScrollableH, isScrollableV); if (!(isScrollableH \|\| isScrollableV)) { elem.removeClass('jspScrollable'); pane.css({ top: 0, width: container.width() - originalPaddingTotalWidth }); removeMousewheel(); removeFocusHandler(); removeKeyboardNav(); removeClickOnTrack(); } else { elem.addClass('jspScrollable'); isMaintainingPositon = settings.maintainPosition && (verticalDragPosition \|\| horizontalDragPosition); if (isMaintainingPositon) { lastContentX = contentPositionX(); lastContentY = contentPositionY(); } initialiseVerticalScroll(); initialiseHorizontalScroll(); resizeScrollbars(); if (isMaintainingPositon) { scrollToX(maintainAtRight ? (contentWidth - paneWidth ) : lastContentX, false); scrollToY(maintainAtBottom ? (contentHeight - paneHeight) : lastContentY, false); } initFocusHandler(); initMousewheel(); initTouch(); if (settings.enableKeyboardNavigation) { initKeyboardNav(); } if (settings.clickOnTrack) { initClickOnTrack(); } observeHash(); if (settings.hijackInternalLinks) { hijackInternalLinks(); } } if (settings.autoReinitialise && !reinitialiseInterval) { reinitialiseInterval = setInterval( function() { initialise(settings); }, settings.autoReinitialiseDelay ); } else if (!settings.autoReinitialise && reinitialiseInterval) { clearInterval(reinitialiseInterval); } originalScrollTop && elem.scrollTop(0) && scrollToY(originalScrollTop, false); originalScrollLeft && elem.scrollLeft(0) && scrollToX(originalScrollLeft, false); elem.trigger('jsp-initialised', [isScrollableH \|\| isScrollableV]); } function initialiseVerticalScroll() { if (isScrollableV) { container.append( $('<div class="jspVerticalBar" />').append( $('<div class="jspCap jspCapTop" />'), $('<div class="jspTrack" />').append( $('<div class="jspDrag" />').append( $('<div class="jspDragTop" />'), $('<div class="jspDragBottom" />') ) ), $('<div class="jspCap jspCapBottom" />') ) ); verticalBar = container.find('>.jspVerticalBar'); verticalTrack = verticalBar.find('>.jspTrack'); verticalDrag = verticalTrack.find('>.jspDrag'); if (settings.showArrows) { arrowUp = $('<a class="jspArrow jspArrowUp" />').bind( 'mousedown.jsp', getArrowScroll(0, -1) ).bind('click.jsp', nil); arrowDown = $('<a class="jspArrow jspArrowDown" />').bind( 'mousedown.jsp', getArrowScroll(0, 1) ).bind('click.jsp', nil); if (settings.arrowScrollOnHover) { arrowUp.bind('mouseover.jsp', getArrowScroll(0, -1, arrowUp)); arrowDown.bind('mouseover.jsp', getArrowScroll(0, 1, arrowDown)); } appendArrows(verticalTrack, settings.verticalArrowPositions, arrowUp, arrowDown); } verticalTrackHeight = paneHeight; container.find('>.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow').each( function() { verticalTrackHeight -= $(this).outerHeight(); } ); verticalDrag.hover( function() { verticalDrag.addClass('jspHover'); }, function() { verticalDrag.removeClass('jspHover'); } ).bind( 'mousedown.jsp', function(e) { // Stop IE from allowing text selection $('html').bind('dragstart.jsp selectstart.jsp', nil); verticalDrag.addClass('jspActive'); var startY = e.pageY - verticalDrag.position().top; $('html').bind( 'mousemove.jsp', function(e) { positionDragY(e.pageY - startY, false); } ).bind('mouseup.jsp mouseleave.jsp', cancelDrag); return false; } ); sizeVerticalScrollbar(); } } function sizeVerticalScrollbar() { verticalTrack.height(verticalTrackHeight + 'px'); verticalDragPosition = 0; scrollbarWidth = settings.verticalGutter + verticalTrack.outerWidth(); // Make the pane thinner to allow for the vertical scrollbar pane.width(paneWidth - scrollbarWidth - originalPaddingTotalWidth); // Add margin to the left of the pane if scrollbars are on that side (to position // the scrollbar on the left or right set it's left or right property in CSS) try { if (verticalBar.position().left === 0) { pane.css('margin-left', scrollbarWidth + 'px'); } } catch (err) { } } function initialiseHorizontalScroll() { if (isScrollableH) { container.append( $('<div class="jspHorizontalBar" />').append( $('<div class="jspCap jspCapLeft" />'), $('<div class="jspTrack" />').append( $('<div class="jspDrag" />').append( $('<div class="jspDragLeft" />'), $('<div class="jspDragRight" />') ) ), $('<div class="jspCap jspCapRight" />') ) ); horizontalBar = container.find('>.jspHorizontalBar'); horizontalTrack = horizontalBar.find('>.jspTrack'); horizontalDrag = horizontalTrack.find('>.jspDrag'); if (settings.showArrows) { arrowLeft = $('<a class="jspArrow jspArrowLeft" />').bind( 'mousedown.jsp', getArrowScroll(-1, 0) ).bind('click.jsp', nil); arrowRight = $('<a class="jspArrow jspArrowRight" />').bind( 'mousedown.jsp', getArrowScroll(1, 0) ).bind('click.jsp', nil); if (settings.arrowScrollOnHover) { arrowLeft.bind('mouseover.jsp', getArrowScroll(-1, 0, arrowLeft)); arrowRight.bind('mouseover.jsp', getArrowScroll(1, 0, arrowRight)); } appendArrows(horizontalTrack, settings.horizontalArrowPositions, arrowLeft, arrowRight); } horizontalDrag.hover( function() { horizontalDrag.addClass('jspHover'); }, function() { horizontalDrag.removeClass('jspHover'); } ).bind( 'mousedown.jsp', function(e) { // Stop IE from allowing text selection $('html').bind('dragstart.jsp selectstart.jsp', nil); horizontalDrag.addClass('jspActive'); var startX = e.pageX - horizontalDrag.position().left; $('html').bind( 'mousemove.jsp', function(e) { positionDragX(e.pageX - startX, false); } ).bind('mouseup.jsp mouseleave.jsp', cancelDrag); return false; } ); horizontalTrackWidth = container.innerWidth(); sizeHorizontalScrollbar(); } } function sizeHorizontalScrollbar() { container.find('>.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow').each( function() { horizontalTrackWidth -= $(this).outerWidth(); } ); horizontalTrack.width(horizontalTrackWidth + 'px'); horizontalDragPosition = 0; } function resizeScrollbars() { if (isScrollableH && isScrollableV) { var horizontalTrackHeight = horizontalTrack.outerHeight(), verticalTrackWidth = verticalTrack.outerWidth(); verticalTrackHeight -= horizontalTrackHeight; $(horizontalBar).find('>.jspCap:visible,>.jspArrow').each( function() { horizontalTrackWidth += $(this).outerWidth(); } ); horizontalTrackWidth -= verticalTrackWidth; paneHeight -= verticalTrackWidth; paneWidth -= horizontalTrackHeight; horizontalTrack.parent().append( $('<div class="jspCorner" />').css('width', horizontalTrackHeight + 'px') ); sizeVerticalScrollbar(); sizeHorizontalScrollbar(); } // reflow content if (isScrollableH) { pane.width((container.outerWidth() - originalPaddingTotalWidth) + 'px'); } contentHeight = pane.outerHeight(); percentInViewV = contentHeight / paneHeight; if (isScrollableH) { horizontalDragWidth = Math.ceil(1 / percentInViewH horizontalTrackWidth); if (horizontalDragWidth > settings.horizontalDragMaxWidth) { horizontalDragWidth = settings.horizontalDragMaxWidth; } else if (horizontalDragWidth < settings.horizontalDragMinWidth) { horizontalDragWidth = settings.horizontalDragMinWidth; } horizontalDrag.width(horizontalDragWidth + 'px'); dragMaxX = horizontalTrackWidth - horizontalDragWidth; _positionDragX(horizontalDragPosition); // To update the state for the arrow buttons } if (isScrollableV) { verticalDragHeight = Math.ceil(1 / percentInViewV * verticalTrackHeight); if (verticalDragHeight > settings.verticalDragMaxHeight) { verticalDragHeight = settings.verticalDragMaxHeight; } else if (verticalDragHeight < settings.verticalDragMinHeight) { verticalDragHeight = settings.verticalDragMinHeight; } verticalDrag.height(verticalDragHeight + 'px'); dragMaxY = verticalTrackHeight - verticalDragHeight; _positionDragY(verticalDragPosition); // To update the state for the arrow buttons } } function appendArrows(ele, p, a1, a2) { var p1 = "before", p2 = "after", aTemp; // Sniff for mac... Is there a better way to determine whether the arrows would naturally appear // at the top or the bottom of the bar? if (p == "os") { p = /Mac/.test(navigator.platform) ? "after" : "split"; } if (p == p1) { p2 = p; } else if (p == p2) { p1 = p; aTemp = a1; a1 = a2; a2 = aTemp; } ele[p1](a1)[p2](a2); } function getArrowScroll(dirX, dirY, ele) { return function() { arrowScroll(dirX, dirY, this, ele); this.blur(); return false; }; } function arrowScroll(dirX, dirY, arrow, ele) { arrow = $(arrow).addClass('jspActive'); var eve, scrollTimeout, isFirst = true, doScroll = function() { if (dirX !== 0) { jsp.scrollByX(dirX * settings.arrowButtonSpeed); } if (dirY !== 0) { jsp.scrollByY(dirY * settings.arrowButtonSpeed); } scrollTimeout = setTimeout(doScroll, isFirst ? settings.initialDelay : settings.arrowRepeatFreq); isFirst = false; }; doScroll(); eve = ele ? 'mouseout.jsp' : 'mouseup.jsp'; ele = ele \|\| $('html'); ele.bind( eve, function() { arrow.removeClass('jspActive'); scrollTimeout && clearTimeout(scrollTimeout); scrollTimeout = null; ele.unbind(eve); } ); } function initClickOnTrack() { removeClickOnTrack(); if (isScrollableV) { verticalTrack.bind( 'mousedown.jsp', function(e) { if (e.originalTarget === undefined \|\| e.originalTarget == e.currentTarget) { var clickedTrack = $(this), offset = clickedTrack.offset(), direction = e.pageY - offset.top - verticalDragPosition, scrollTimeout, isFirst = true, doScroll = function() { var offset = clickedTrack.offset(), pos = e.pageY - offset.top - verticalDragHeight / 2, contentDragY = paneHeight * settings.scrollPagePercent, dragY = dragMaxY * contentDragY / (contentHeight - paneHeight); if (direction < 0) { if (verticalDragPosition - dragY > pos) { jsp.scrollByY(-contentDragY); } else { positionDragY(pos); } } else if (direction > 0) { if (verticalDragPosition + dragY < pos) { jsp.scrollByY(contentDragY); } else { positionDragY(pos); } } else { cancelClick(); return; } scrollTimeout = setTimeout(doScroll, isFirst ? settings.initialDelay : settings.trackClickRepeatFreq); isFirst = false; }, cancelClick = function() { scrollTimeout && clearTimeout(scrollTimeout); scrollTimeout = null; $(document).unbind('mouseup.jsp', cancelClick); }; doScroll(); $(document).bind('mouseup.jsp', cancelClick); return false; } } ); } if (isScrollableH) { horizontalTrack.bind( 'mousedown.jsp', function(e) { if (e.originalTarget === undefined \|\| e.originalTarget == e.currentTarget) { var clickedTrack = $(this), offset = clickedTrack.offset(), direction = e.pageX - offset.left - horizontalDragPosition, scrollTimeout, isFirst = true, doScroll = function() { var offset = clickedTrack.offset(), pos = e.pageX - offset.left - horizontalDragWidth / 2, contentDragX = paneWidth * settings.scrollPagePercent, dragX = dragMaxX * contentDragX / (contentWidth - paneWidth); if (direction < 0) { if (horizontalDragPosition - dragX > pos) { jsp.scrollByX(-contentDragX); } else { positionDragX(pos); } } else if (direction > 0) { if (horizontalDragPosition + dragX < pos) { jsp.scrollByX(contentDragX); } else { positionDragX(pos); } } else { cancelClick(); return; } scrollTimeout = setTimeout(doScroll, isFirst ? settings.initialDelay : settings.trackClickRepeatFreq); isFirst = false; }, cancelClick = function() { scrollTimeout && clearTimeout(scrollTimeout); scrollTimeout = null; $(document).unbind('mouseup.jsp', cancelClick); }; doScroll(); $(document).bind('mouseup.jsp', cancelClick); return false; } } ); } } function removeClickOnTrack() { if (horizontalTrack) { horizontalTrack.unbind('mousedown.jsp'); } if (verticalTrack) { verticalTrack.unbind('mousedown.jsp'); } } function cancelDrag() { $('html').unbind('dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp'); if (verticalDrag) { verticalDrag.removeClass('jspActive'); } if (horizontalDrag) { horizontalDrag.removeClass('jspActive'); } } function positionDragY(destY, animate) { if (!isScrollableV) { return; } if (destY < 0) { destY = 0; } else if (destY > dragMaxY) { destY = dragMaxY; } // can't just check if(animate) because false is a valid value that could be passed in... if (animate === undefined) { animate = settings.animateScroll; } if (animate) { jsp.animate(verticalDrag, 'top', destY, _positionDragY); } else { verticalDrag.css('top', destY); _positionDragY(destY); } } function _positionDragY(destY) { if (destY === undefined) { destY = verticalDrag.position().top; } container.scrollTop(0); verticalDragPosition = destY; var isAtTop = verticalDragPosition === 0, isAtBottom = verticalDragPosition == dragMaxY, percentScrolled = destY/ dragMaxY, destTop = -percentScrolled * (contentHeight - paneHeight); if (wasAtTop != isAtTop \|\| wasAtBottom != isAtBottom) { wasAtTop = isAtTop; wasAtBottom = isAtBottom; elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]); } updateVerticalArrows(isAtTop, isAtBottom); pane.css('top', destTop); elem.trigger('jsp-scroll-y', [-destTop, isAtTop, isAtBottom]).trigger('scroll'); } function positionDragX(destX, animate) { if (!isScrollableH) { return; } if (destX < 0) { destX = 0; } else if (destX > dragMaxX) { destX = dragMaxX; } if (animate === undefined) { animate = settings.animateScroll; } if (animate) { jsp.animate(horizontalDrag, 'left', destX, _positionDragX); } else { horizontalDrag.css('left', destX); _positionDragX(destX); } } function _positionDragX(destX) { if (destX === undefined) { destX = horizontalDrag.position().left; } container.scrollTop(0); horizontalDragPosition = destX; var isAtLeft = horizontalDragPosition === 0, isAtRight = horizontalDragPosition == dragMaxX, percentScrolled = destX / dragMaxX, destLeft = -percentScrolled * (contentWidth - paneWidth); if (wasAtLeft != isAtLeft \|\| wasAtRight != isAtRight) { wasAtLeft = isAtLeft; wasAtRight = isAtRight; elem.trigger('jsp-arrow-change', [wasAtTop, wasAtBottom, wasAtLeft, wasAtRight]); } updateHorizontalArrows(isAtLeft, isAtRight); pane.css('left', destLeft); elem.trigger('jsp-scroll-x', [-destLeft, isAtLeft, isAtRight]).trigger('scroll'); } function updateVerticalArrows(isAtTop, isAtBottom) { if (settings.showArrows) { arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled'); arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled'); } } function updateHorizontalArrows(isAtLeft, isAtRight) { if (settings.showArrows) { arrowLeft[isAtLeft ? 'addClass' : 'removeClass']('jspDisabled'); arrowRight[isAtRight ? 'addClass' : 'removeClass']('jspDisabled'); } } function scrollToY(destY, animate) { var percentScrolled = destY / (contentHeight - paneHeight); positionDragY(percentScrolled * dragMaxY, animate); } function scrollToX(destX, animate) { var percentScrolled = destX / (contentWidth - paneWidth); positionDragX(percentScrolled * dragMaxX, animate); } function scrollToElement(ele, stickToTop, animate) { var e, eleHeight, eleWidth, eleTop = 0, eleLeft = 0, viewportTop, viewportLeft, maxVisibleEleTop, maxVisibleEleLeft, destY, destX; // Legal hash values aren't necessarily legal jQuery selectors so we need to catch any // errors from the lookup... try { e = $(ele); } catch (err) { return; } eleHeight = e.outerHeight(); eleWidth= e.outerWidth(); container.scrollTop(0); container.scrollLeft(0); // loop through parents adding the offset top of any elements that are relatively positioned between // the focused element and the jspPane so we can get the true distance from the top // of the focused element to the top of the scrollpane... while (!e.is('.jspPane')) { eleTop += e.position().top; eleLeft += e.position().left; e = e.offsetParent(); if (/^body\|html$/i.test(e[0].nodeName)) { // we ended up too high in the document structure. Quit! return; } } viewportTop = contentPositionY(); maxVisibleEleTop = viewportTop + paneHeight; if (eleTop < viewportTop \|\| stickToTop) { // element is above viewport destY = eleTop - settings.verticalGutter; } else if (eleTop + eleHeight > maxVisibleEleTop) { // element is below viewport destY = eleTop - paneHeight + eleHeight + settings.verticalGutter; } if (destY) { scrollToY(destY, animate); } viewportLeft = contentPositionX(); maxVisibleEleLeft = viewportLeft + paneWidth; if (eleLeft < viewportLeft \|\| stickToTop) { // element is to the left of viewport destX = eleLeft - settings.horizontalGutter; } else if (eleLeft + eleWidth > maxVisibleEleLeft) { // element is to the right viewport destX = eleLeft - paneWidth + eleWidth + settings.horizontalGutter; } if (destX) { scrollToX(destX, animate); } } function contentPositionX() { return -pane.position().left; } function contentPositionY() { return -pane.position().top; } function isCloseToBottom() { var scrollableHeight = contentHeight - paneHeight; return (scrollableHeight > 20) && (scrollableHeight - contentPositionY() < 10); } function isCloseToRight() { var scrollableWidth = contentWidth - paneWidth; return (scrollableWidth > 20) && (scrollableWidth - contentPositionX() < 10); } function initMousewheel() { container.unbind(mwEvent).bind( mwEvent, function (event, delta, deltaX, deltaY) { var dX = horizontalDragPosition, dY = verticalDragPosition; jsp.scrollBy(deltaX * settings.mouseWheelSpeed, -deltaY * settings.mouseWheelSpeed, false); // return true if there was no movement so rest of screen can scroll return dX == horizontalDragPosition && dY == verticalDragPosition; } ); } function removeMousewheel() { container.unbind(mwEvent); } function nil() { return false; } function initFocusHandler() { pane.find(':input,a').unbind('focus.jsp').bind( 'focus.jsp', function(e) { scrollToElement(e.target, false); } ); } function removeFocusHandler() { pane.find(':input,a').unbind('focus.jsp'); } function initKeyboardNav() { var keyDown, elementHasScrolled, validParents = []; isScrollableH && validParents.push(horizontalBar[0]); isScrollableV && validParents.push(verticalBar[0]); // IE also focuses elements that don't have tabindex set. pane.focus( function() { elem.focus(); } ); elem.attr('tabindex', 0) .unbind('keydown.jsp keypress.jsp') .bind( 'keydown.jsp', function(e) { if (e.target !== this && !(validParents.length && $(e.target).closest(validParents).length)){ return; } var dX = horizontalDragPosition, dY = verticalDragPosition; switch(e.keyCode) { case 40: // down case 38: // up case 34: // page down case 32: // space case 33: // page up case 39: // right case 37: // left keyDown = e.keyCode; keyDownHandler(); break; case 35: // end scrollToY(contentHeight - paneHeight); keyDown = null; break; case 36: // home scrollToY(0); keyDown = null; break; } elementHasScrolled = e.keyCode == keyDown && dX != horizontalDragPosition \|\| dY != verticalDragPosition; return !elementHasScrolled; } ).bind( 'keypress.jsp', // For FF/ OSX so that we can cancel the repeat key presses if the JSP scrolls... function(e) { if (e.keyCode == keyDown) { keyDownHandler(); } return !elementHasScrolled; } ); if (settings.hideFocus) { elem.css('outline', 'none'); if ('hideFocus' in container[0]){ elem.attr('hideFocus', true); } } else { elem.css('outline', ''); if ('hideFocus' in container[0]){ elem.attr('hideFocus', false); } } function keyDownHandler() { var dX = horizontalDragPosition, dY = verticalDragPosition; switch(keyDown) { case 40: // down jsp.scrollByY(settings.keyboardSpeed, false); break; case 38: // up jsp.scrollByY(-settings.keyboardSpeed, false); break; case 34: // page down case 32: // space jsp.scrollByY(paneHeight * settings.scrollPagePercent, false); break; case 33: // page up jsp.scrollByY(-paneHeight * settings.scrollPagePercent, false); break; case 39: // right jsp.scrollByX(settings.keyboardSpeed, false); break; case 37: // left jsp.scrollByX(-settings.keyboardSpeed, false); break; } elementHasScrolled = dX != horizontalDragPosition \|\| dY != verticalDragPosition; return elementHasScrolled; } } function removeKeyboardNav() { elem.attr('tabindex', '-1') .removeAttr('tabindex') .unbind('keydown.jsp keypress.jsp'); } function observeHash() { if (location.hash && location.hash.length > 1) { var e, retryInt, hash = escape(location.hash.substr(1)) // hash must be escaped to prevent XSS ; try { e = $('#' + hash + ', a[name="' + hash + '"]'); } catch (err) { return; } if (e.length && pane.find(hash)) { // nasty workaround but it appears to take a little while before the hash has done its thing // to the rendered page so we just wait until the container's scrollTop has been messed up. if (container.scrollTop() === 0) { retryInt = setInterval( function() { if (container.scrollTop() > 0) { scrollToElement(e, true); $(document).scrollTop(container.position().top); clearInterval(retryInt); } }, 50 ); } else { scrollToElement(e, true); $(document).scrollTop(container.position().top); } } } } function hijackInternalLinks() { // only register the link handler once if ($(document.body).data('jspHijack')) { return; } // remember that the handler was bound $(document.body).data('jspHijack', true); // use live handler to also capture newly created links $(document.body).delegate('a[href=#]', 'click', function(event) { // does the link point to the same page? // this also takes care of cases with a <base>-Tag or Links not starting with the hash # // e.g. <a href="index.html#test"> when the current url already is index.html var href = this.href.substr(0, this.href.indexOf('#')), locationHref = location.href, hash, element, container, jsp, scrollTop, elementTop; if (location.href.indexOf('#') !== -1) { locationHref = location.href.substr(0, location.href.indexOf('#')); } if (href !== locationHref) { // the link points to another page return; } // check if jScrollPane should handle this click event hash = escape(this.href.substr(this.href.indexOf('#') + 1)); // find the element on the page element; try { element = $('#' + hash + ', a[name="' + hash + '"]'); } catch (e) { // hash is not a valid jQuery identifier return; } if (!element.length) { // this link does not point to an element on this page return; } container = element.closest('.jspScrollable'); jsp = container.data('jsp'); // jsp might be another jsp instance than the one, that bound this event // remember: this event is only bound once for all instances. jsp.scrollToElement(element, true); if (container[0].scrollIntoView) { // also scroll to the top of the container (if it is not visible) scrollTop = $(window).scrollTop(); elementTop = element.offset().top; if (elementTop < scrollTop \|\| elementTop > scrollTop + $(window).height()) { container[0].scrollIntoView(); } } // jsp handled this event, prevent the browser default (scrolling :P) event.preventDefault(); }); } // Init touch on iPad, iPhone, iPod, Android function initTouch() { var startX, startY, touchStartX, touchStartY, moved, moving = false; container.unbind('touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick').bind( 'touchstart.jsp', function(e) { var touch = e.originalEvent.touches[0]; startX = contentPositionX(); startY = contentPositionY(); touchStartX = touch.pageX; touchStartY = touch.pageY; moved = false; moving = true; } ).bind( 'touchmove.jsp', function(ev) { if(!moving) { return; } var touchPos = ev.originalEvent.touches[0], dX = horizontalDragPosition, dY = verticalDragPosition; jsp.scrollTo(startX + touchStartX - touchPos.pageX, startY + touchStartY - touchPos.pageY); moved = moved \|\| Math.abs(touchStartX - touchPos.pageX) > 5 \|\| Math.abs(touchStartY - touchPos.pageY) > 5; // return true if there was no movement so rest of screen can scroll return dX == horizontalDragPosition && dY == verticalDragPosition; } ).bind( 'touchend.jsp', function(e) { moving = false; /if(moved) { return false; }/ } ).bind( 'click.jsp-touchclick', function(e) { if(moved) { moved = false; return false; } } ); } function destroy(){ var currentY = contentPositionY(), currentX = contentPositionX(); elem.removeClass('jspScrollable').unbind('.jsp'); elem.replaceWith(originalElement.append(pane.children())); originalElement.scrollTop(currentY); originalElement.scrollLeft(currentX); // clear reinitialize timer if active if (reinitialiseInterval) { clearInterval(reinitialiseInterval); } } // Public API $.extend( jsp, { // Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it // was initialised). The settings object which is passed in will override any settings from the // previous time it was initialised - if you don't pass any settings then the ones from the previous // initialisation will be used. reinitialise: function(s) { s = $.extend({}, settings, s); initialise(s); }, // Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so // that it can be seen within the viewport. If stickToTop is true then the element will appear at // the top of the viewport, if it is false then the viewport will scroll as little as possible to // show the element. You can also specify if you want animation to occur. If you don't provide this // argument then the animateScroll value from the settings object is used instead. scrollToElement: function(ele, stickToTop, animate) { scrollToElement(ele, stickToTop, animate); }, // Scrolls the pane so that the specified co-ordinates within the content are at the top left // of the viewport. animate is optional and if not passed then the value of animateScroll from // the settings object this jScrollPane was initialised with is used. scrollTo: function(destX, destY, animate) { scrollToX(destX, animate); scrollToY(destY, animate); }, // Scrolls the pane so that the specified co-ordinate within the content is at the left of the // viewport. animate is optional and if not passed then the value of animateScroll from the settings // object this jScrollPane was initialised with is used. scrollToX: function(destX, animate) { scrollToX(destX, animate); }, // Scrolls the pane so that the specified co-ordinate within the content is at the top of the // viewport. animate is optional and if not passed then the value of animateScroll from the settings // object this jScrollPane was initialised with is used. scrollToY: function(destY, animate) { scrollToY(destY, animate); }, // Scrolls the pane to the specified percentage of its maximum horizontal scroll position. animate // is optional and if not passed then the value of animateScroll from the settings object this // jScrollPane was initialised with is used. scrollToPercentX: function(destPercentX, animate) { scrollToX(destPercentX (contentWidth - paneWidth), animate); }, // Scrolls the pane to the specified percentage of its maximum vertical scroll position. animate // is optional and if not passed then the value of animateScroll from the settings object this // jScrollPane was initialised with is used. scrollToPercentY: function(destPercentY, animate) { scrollToY(destPercentY * (contentHeight - paneHeight), animate); }, // Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then // the value of animateScroll from the settings object this jScrollPane was initialised with is used. scrollBy: function(deltaX, deltaY, animate) { jsp.scrollByX(deltaX, animate); jsp.scrollByY(deltaY, animate); }, // Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then // the value of animateScroll from the settings object this jScrollPane was initialised with is used. scrollByX: function(deltaX, animate) { var destX = contentPositionX() + Math[deltaX<0 ? 'floor' : 'ceil'](deltaX), percentScrolled = destX / (contentWidth - paneWidth); positionDragX(percentScrolled * dragMaxX, animate); }, // Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then // the value of animateScroll from the settings object this jScrollPane was initialised with is used. scrollByY: function(deltaY, animate) { var destY = contentPositionY() + Math[deltaY<0 ? 'floor' : 'ceil'](deltaY), percentScrolled = destY / (contentHeight - paneHeight); positionDragY(percentScrolled * dragMaxY, animate); }, // Positions the horizontal drag at the specified x position (and updates the viewport to reflect // this). animate is optional and if not passed then the value of animateScroll from the settings // object this jScrollPane was initialised with is used. positionDragX: function(x, animate) { positionDragX(x, animate); }, // Positions the vertical drag at the specified y position (and updates the viewport to reflect // this). animate is optional and if not passed then the value of animateScroll from the settings // object this jScrollPane was initialised with is used. positionDragY: function(y, animate) { positionDragY(y, animate); }, // This method is called when jScrollPane is trying to animate to a new position. You can override // it if you want to provide advanced animation functionality. It is passed the following arguments: // * ele - the element whose position is being animated // * prop - the property that is being animated // * value - the value it's being animated to // * stepCallback - a function that you must execute each time you update the value of the property // You can use the default implementation (below) as a starting point for your own implementation. animate: function(ele, prop, value, stepCallback) { var params = {}; params[prop] = value; ele.animate( params, { 'duration' : settings.animateDuration, 'easing' : settings.animateEase, 'queue' : false, 'step' : stepCallback } ); }, // Returns the current x position of the viewport with regards to the content pane. getContentPositionX: function() { return contentPositionX(); }, // Returns the current y position of the viewport with regards to the content pane. getContentPositionY: function() { return contentPositionY(); }, // Returns the width of the content within the scroll pane. getContentWidth: function() { return contentWidth; }, // Returns the height of the content within the scroll pane. getContentHeight: function() { return contentHeight; }, // Returns the horizontal position of the viewport within the pane content. getPercentScrolledX: function() { return contentPositionX() / (contentWidth - paneWidth); }, // Returns the vertical position of the viewport within the pane content. getPercentScrolledY: function() { return contentPositionY() / (contentHeight - paneHeight); }, // Returns whether or not this scrollpane has a horizontal scrollbar. getIsScrollableH: function() { return isScrollableH; }, // Returns whether or not this scrollpane has a vertical scrollbar. getIsScrollableV: function() { return isScrollableV; }, // Gets a reference to the content pane. It is important that you use this method if you want to // edit the content of your jScrollPane as if you access the element directly then you may have some // problems (as your original element has had additional elements for the scrollbars etc added into // it). getContentPane: function() { return pane; }, // Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the // animateScroll value from settings is used instead. scrollToBottom: function(animate) { positionDragY(dragMaxY, animate); }, // Hijacks the links on the page which link to content inside the scrollpane. If you have changed // the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the // contents of your scroll pane will work then call this function. hijackInternalLinks: $.noop, // Removes the jScrollPane and returns the page to the state it was in before jScrollPane was // initialised. destroy: function() { destroy(); } } ); initialise(s); } // Pluginifying code... settings = $.extend({}, $.fn.jScrollPane.defaults, settings); // Apply default speed $.each(['mouseWheelSpeed', 'arrowButtonSpeed', 'trackClickSpeed', 'keyboardSpeed'], function() { settings[this] = settings[this] \|\| settings.speed; }); return this.each( function() { var elem = $(this), jspApi = elem.data('jsp'); if (jspApi) { jspApi.reinitialise(settings); } else { $("script",elem).filter('[type="text/javascript"],:not([type])').remove(); jspApi = new JScrollPane(elem, settings); elem.data('jsp', jspApi); } } ); }; $.fn.jScrollPane.defaults = { showArrows : false, maintainPosition : true, stickToBottom : false, stickToRight : false, clickOnTrack : true, autoReinitialise : false, autoReinitialiseDelay : 500, verticalDragMinHeight : 0, verticalDragMaxHeight : 99999, horizontalDragMinWidth : 0, horizontalDragMaxWidth : 99999, contentWidth : undefined, animateScroll : false, animateDuration : 300, animateEase : 'linear', hijackInternalLinks : false, verticalGutter : 4, horizontalGutter : 4, mouseWheelSpeed : 0, arrowButtonSpeed : 0, arrowRepeatFreq : 50, arrowScrollOnHover : false, trackClickSpeed : 0, trackClickRepeatFreq : 70, verticalArrowPositions : 'split', horizontalArrowPositions : 'split', enableKeyboardNavigation : true, hideFocus : false, keyboardSpeed : 0, initialDelay : 300, // Delay before starting repeating speed : 30, // Default speed when others falsey scrollPagePercent : .8 // Percent of visible area scrolled when pageUp/Down or track area pressed }; })(jQuery,this);