Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto Reinitialising - Using event based updates to remove polling overhead #341

Closed
wants to merge 3 commits into from
Closed

Auto Reinitialising - Using event based updates to remove polling overhead #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73af7cd
Replacing autoReinitialise timer with event based reinitialising to a…
Sep 5, 2016
4a411c5
Reverting change to use minified script again
Sep 5, 2016
d3a4a18
Fixing issue where update would not occur if containing element was r…
Sep 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions auto_reinitialise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,7 @@ <h1>jScrollPane - automatic reinitialisation demo page</h1>
<p>
This demonstration shows how you can tell jScrollPane to automatically reinitialise itself. You do this
by passing in <strong><a href="settings.html#autoReinitialise">autoReinitialise</a>: true</strong> as a
setting. If you do this then the scrollpane attempts to reinitialise itself every
<a href="settings.html#autoReinitialiseDelay">autoReinitialiseDelay</a> miliseconds.
</p>
<p>
Note that there is obviously a processing overhead associated with this method as the script is running
repeatedly in the background. For this reason <strong>autoReinitialise</strong> is false by default and
if possible you are recommended to <a href="dynamic_content.html">manually reinitialise</a>
jScrollPane when you add content to it. However, in some situations this isn't possible so the
<strong>autoReinitialise</strong> method is provided for convenience.
setting. This will update the scroll bars automatically based if the contents change in size.
</p>
<div class="scroll-pane">
</div>
Expand All @@ -95,4 +87,4 @@ <h2>Page CSS</h2>
</div>
</div>
</body>
</html>
</html>
6 changes: 2 additions & 4 deletions image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,7 @@ <h1>jScrollPane - image demo page</h1>
</p>
<p>
We use <a href="settings.html#autoReinitialise">autoReinitialse</a> so that the scrollpane automatically
re-calculates the size of it's content if and when it changes. Note that use of this property adds an
overhead to your page and is subject to the same warnings on the <a href="auto_reinitialise.html">auto
reinitialise demo</a> page.
re-calculates the size of it's content if and when it changes.
</p>
<p>
If you can it is better to include width and height for each image (either through width and height
Expand All @@ -93,4 +91,4 @@ <h2>Page CSS</h2>
</div>
</div>
</body>
</html>
</html>
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ <h2 id="examples">Simple examples/ tests</h2>
</li>
<li>
<a href="auto_reinitialise.html">Demo</a> showing how jScrollPane can be set to automatically
reinitialise itself on a timer via the <a href="settings.html#autoReinitialise">autoReinitialise</a>
reinitialise itself using the <a href="settings.html#autoReinitialise">autoReinitialise</a>
parameter

</li>
Expand Down Expand Up @@ -316,4 +316,4 @@ <h2 id="donate">Donate</h2>
</form>
</div>
</body>
</html>
</html>
110 changes: 97 additions & 13 deletions script/jquery.jscrollpane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
//
// About: Release History
//
// 2.0.23 - (2016-01-28) Various
// 2.0.23 - (2016-01-28) Various
// 2.0.22 - (2015-04-25) Resolve a memory leak due to an event handler that isn't cleaned up in destroy (thanks @timjnh)
// 2.0.21 - (2015-02-24) Simplify UMD pattern: fixes browserify when loading jQuery outside of bundle
// 2.0.20 - (2014-10-23) Adds AMD support (thanks @carlosrberto) and support for overflow-x/overflow-y (thanks @darimpulso)
Expand Down Expand Up @@ -88,11 +88,14 @@
verticalDragPosition, horizontalDrag, dragMaxX, horizontalDragPosition,
verticalBar, verticalTrack, scrollbarWidth, verticalTrackHeight, verticalDragHeight, arrowUp, arrowDown,
horizontalBar, horizontalTrack, horizontalTrackWidth, horizontalDragWidth, arrowLeft, arrowRight,
reinitialiseInterval, originalPadding, originalPaddingTotalWidth, previousContentWidth,
resizeEventsAdded, originalPadding, originalPaddingTotalWidth, previousContentWidth,
wasAtTop = true, wasAtLeft = true, wasAtBottom = false, wasAtRight = false,
originalElement = elem.clone(false, false).empty(),
mwEvent = $.fn.mwheelIntent ? 'mwheelIntent.jsp' : 'mousewheel.jsp';

// // declare variables to monitor resize events
// var resizeElement, resizeGrowElement, resizeShrinkElement, resizeGrowChildElement, resizeShrinkChildElement, resizeWidth, resizeHeight;

if (elem.css('box-sizing') === 'border-box') {
originalPadding = 0;
originalPaddingTotalWidth = 0;
Expand Down Expand Up @@ -120,6 +123,7 @@

elem.css(
{
position: 'relative',
overflow: 'hidden',
padding: 0
}
Expand Down Expand Up @@ -246,16 +250,20 @@
}
}

if (settings.autoReinitialise && !reinitialiseInterval) {
reinitialiseInterval = setInterval(
function()
{
initialise(settings);
},
settings.autoReinitialiseDelay
);
} else if (!settings.autoReinitialise && reinitialiseInterval) {
clearInterval(reinitialiseInterval);
if (settings.autoReinitialise && !resizeEventsAdded) {

var reinitialiseFn = function() {
// if size has changed then reinitialise
initialise(settings);
};

// detect size change in content
detectSizeChanges(pane, reinitialiseFn);

// detect size changes of container
detectSizeChanges(elem, reinitialiseFn);

resizeEventsAdded = true;
}

originalScrollTop && elem.scrollTop(0) && scrollToY(originalScrollTop, false);
Expand All @@ -264,6 +272,83 @@
elem.trigger('jsp-initialised', [isScrollableH || isScrollableV]);
}

function detectSizeChanges(element, callback) {

// create resize event elements - based on resize sensor: https://github.com/flowkey/resize-sensor/
var resizeWidth, resizeHeight;
var resizeElement = document.createElement('div');
var resizeGrowElement = document.createElement('div');
var resizeGrowChildElement = document.createElement('div');
var resizeShrinkElement = document.createElement('div');
var resizeShrinkChildElement = document.createElement('div');

// add necessary styling
resizeElement.style.cssText = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';
resizeGrowElement.style.cssText = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';
resizeShrinkElement.style.cssText = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;';

resizeGrowChildElement.style.cssText = 'position: absolute; left: 0; top: 0;';
resizeShrinkChildElement.style.cssText = 'position: absolute; left: 0; top: 0; width: 200%; height: 200%;';

// Create a function to programmatically update sizes
var updateSizes = function() {

resizeGrowChildElement.style.width = resizeGrowElement.offsetWidth + 10 + 'px';
resizeGrowChildElement.style.height = resizeGrowElement.offsetHeight + 10 + 'px';

resizeGrowElement.scrollLeft = resizeGrowElement.scrollWidth;
resizeGrowElement.scrollTop = resizeGrowElement.scrollHeight;

resizeShrinkElement.scrollLeft = resizeShrinkElement.scrollWidth;
resizeShrinkElement.scrollTop = resizeShrinkElement.scrollHeight;

resizeWidth = element.width();
resizeHeight = element.height();
};

// create functions to call when content grows
var onGrow = function() {

// check to see if the content has change size
if (element.width() > resizeWidth || element.height() > resizeHeight) {

// if size has changed then reinitialise
callback.apply(this, []);
}
// after reinitialising update sizes
updateSizes();
};

// create functions to call when content shrinks
var onShrink = function() {

// check to see if the content has change size
if (element.width() < resizeWidth || element.height() < resizeHeight) {

// if size has changed then reinitialise
callback.apply(this, []);
}
// after reinitialising update sizes
updateSizes();
};

// bind to scroll events
resizeGrowElement.addEventListener('scroll', onGrow.bind(this));
resizeShrinkElement.addEventListener('scroll', onShrink.bind(this));

// nest elements before adding to pane
resizeGrowElement.appendChild(resizeGrowChildElement);
resizeShrinkElement.appendChild(resizeShrinkChildElement);

resizeElement.appendChild(resizeGrowElement);
resizeElement.appendChild(resizeShrinkElement);

element.append(resizeElement);

// update sizes initially
updateSizes();
}

function initialiseVerticalScroll()
{
if (isScrollableV) {
Expand Down Expand Up @@ -1483,7 +1568,6 @@
stickToRight : false,
clickOnTrack : true,
autoReinitialise : false,
autoReinitialiseDelay : 500,
verticalDragMinHeight : 0,
verticalDragMaxHeight : 99999,
horizontalDragMinWidth : 0,
Expand Down
Loading