From b5d0958e82b157febbc438c698a54f25c5ba6093 Mon Sep 17 00:00:00 2001 From: Hyunje Alex Jun Date: Thu, 5 Feb 2015 18:57:33 +0000 Subject: [PATCH] If scrollbar's detached, reinitialise the plugin in update. --- examples/text-content.html | 43 +++++++--- src/js/plugin/handler/click-rail.js | 2 +- src/js/plugin/handler/drag-scrollbar.js | 2 +- src/js/plugin/handler/keyboard.js | 2 +- src/js/plugin/handler/mouse-wheel.js | 2 +- src/js/plugin/handler/native-scroll.js | 2 +- src/js/plugin/handler/selection.js | 2 +- src/js/plugin/handler/touch.js | 2 +- src/js/plugin/initialize.js | 2 +- src/js/plugin/update-geometry.js | 106 ++++++++++++++++++++++++ src/js/plugin/update.js | 104 +++-------------------- 11 files changed, 154 insertions(+), 115 deletions(-) create mode 100644 src/js/plugin/update-geometry.js diff --git a/examples/text-content.html b/examples/text-content.html index eb8c349..6b7b2a9 100644 --- a/examples/text-content.html +++ b/examples/text-content.html @@ -11,30 +11,47 @@ height:150px; width: 400px; overflow: hidden; - position: absolute; + position: relative; }
-
-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-

The command takes options applicable

-
+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+ diff --git a/src/js/plugin/handler/click-rail.js b/src/js/plugin/handler/click-rail.js index 8567b48..2063689 100644 --- a/src/js/plugin/handler/click-rail.js +++ b/src/js/plugin/handler/click-rail.js @@ -5,7 +5,7 @@ var h = require('../../lib/helper') , instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindClickRailHandler(element, i) { function pageOffset(el) { diff --git a/src/js/plugin/handler/drag-scrollbar.js b/src/js/plugin/handler/drag-scrollbar.js index 972fda0..4bab8c6 100644 --- a/src/js/plugin/handler/drag-scrollbar.js +++ b/src/js/plugin/handler/drag-scrollbar.js @@ -6,7 +6,7 @@ var d = require('../../lib/dom') , h = require('../../lib/helper') , instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindMouseScrollXHandler(element, i) { var currentLeft = null; diff --git a/src/js/plugin/handler/keyboard.js b/src/js/plugin/handler/keyboard.js index 1729eac..7159152 100644 --- a/src/js/plugin/handler/keyboard.js +++ b/src/js/plugin/handler/keyboard.js @@ -5,7 +5,7 @@ var h = require('../../lib/helper') , instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindKeyboardHandler(element, i) { var hovered = false; diff --git a/src/js/plugin/handler/mouse-wheel.js b/src/js/plugin/handler/mouse-wheel.js index 24f0b3c..c44e79b 100644 --- a/src/js/plugin/handler/mouse-wheel.js +++ b/src/js/plugin/handler/mouse-wheel.js @@ -5,7 +5,7 @@ var h = require('../../lib/helper') , instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindMouseWheelHandler(element, i) { var shouldPrevent = false; diff --git a/src/js/plugin/handler/native-scroll.js b/src/js/plugin/handler/native-scroll.js index 3acd429..3c6b4ba 100644 --- a/src/js/plugin/handler/native-scroll.js +++ b/src/js/plugin/handler/native-scroll.js @@ -4,7 +4,7 @@ 'use strict'; var instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindNativeScrollHandler(element, i) { i.event.bind(element, 'scroll', function () { diff --git a/src/js/plugin/handler/selection.js b/src/js/plugin/handler/selection.js index 840b7f4..fffc8f4 100644 --- a/src/js/plugin/handler/selection.js +++ b/src/js/plugin/handler/selection.js @@ -5,7 +5,7 @@ var h = require('../../lib/helper') , instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindSelectionHandler(element, i) { function getRangeNode() { diff --git a/src/js/plugin/handler/touch.js b/src/js/plugin/handler/touch.js index bd4ebe3..0b5ceb4 100644 --- a/src/js/plugin/handler/touch.js +++ b/src/js/plugin/handler/touch.js @@ -4,7 +4,7 @@ 'use strict'; var instances = require('../instances') - , updateGeometry = require('../update'); + , updateGeometry = require('../update-geometry'); function bindTouchHandler(element, i, supportsTouch, supportsIePointer) { function shouldPreventDefault(deltaX, deltaY) { diff --git a/src/js/plugin/initialize.js b/src/js/plugin/initialize.js index e621878..e007608 100644 --- a/src/js/plugin/initialize.js +++ b/src/js/plugin/initialize.js @@ -6,7 +6,7 @@ var cls = require('../lib/class') , h = require('../lib/helper') , instances = require('./instances') - , updateGeometry = require('./update'); + , updateGeometry = require('./update-geometry'); // Handlers var clickRailHandler = require('./handler/click-rail') diff --git a/src/js/plugin/update-geometry.js b/src/js/plugin/update-geometry.js new file mode 100644 index 0000000..b1dd110 --- /dev/null +++ b/src/js/plugin/update-geometry.js @@ -0,0 +1,106 @@ +/* Copyright (c) 2015 Hyunje Alex Jun and other contributors + * Licensed under the MIT License + */ +'use strict'; + +var cls = require('../lib/class') + , d = require('../lib/dom') + , h = require('../lib/helper') + , instances = require('./instances'); + +function getThumbSize(i, thumbSize) { + if (i.settings.minScrollbarLength) { + thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength); + } + if (i.settings.maxScrollbarLength) { + thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength); + } + return thumbSize; +} + +function updateCss(element, i) { + var xRailOffset = {width: i.railXWidth}; + if (i.isRtl) { + xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth; + } else { + xRailOffset.left = element.scrollLeft; + } + if (i.isScrollbarXUsingBottom) { + xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop; + } else { + xRailOffset.top = i.scrollbarXTop + element.scrollTop; + } + d.css(i.scrollbarXRail, xRailOffset); + + var yRailOffset = {top: element.scrollTop, height: i.railYHeight}; + if (i.isScrollbarYUsingRight) { + if (i.isRtl) { + yRailOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarYOuterWidth; + } else { + yRailOffset.right = i.scrollbarYRight - element.scrollLeft; + } + } else { + if (i.isRtl) { + yRailOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth; + } else { + yRailOffset.left = i.scrollbarYLeft + element.scrollLeft; + } + } + d.css(i.scrollbarYRail, yRailOffset); + + d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth}); + d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth}); +} + +module.exports = function (element) { + var i = instances.get(element); + + // Hide scrollbars not to affect scrollWidth and scrollHeight + cls.remove(element, 'ps-active-x'); + cls.remove(element, 'ps-active-y'); + + i.containerWidth = element.clientWidth; + i.containerHeight = element.clientHeight; + i.contentWidth = element.scrollWidth; + i.contentHeight = element.scrollHeight; + + if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) { + i.scrollbarXActive = true; + i.railXWidth = i.containerWidth - i.railXMarginWidth; + i.scrollbarXWidth = getThumbSize(i, h.toInt(i.railXWidth * i.containerWidth / i.contentWidth)); + i.scrollbarXLeft = h.toInt(element.scrollLeft * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth)); + } else { + i.scrollbarXActive = false; + i.scrollbarXWidth = 0; + i.scrollbarXLeft = 0; + element.scrollLeft = 0; + } + + if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) { + i.scrollbarYActive = true; + i.railYHeight = i.containerHeight - i.railYMarginHeight; + i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight)); + i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight)); + } else { + i.scrollbarYActive = false; + i.scrollbarYHeight = 0; + i.scrollbarYTop = 0; + element.scrollTop = 0; + } + + if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) { + i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth; + } + if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) { + i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight; + } + + updateCss(element, i); + + if (i.scrollbarXActive) { + cls.add(element, 'ps-active-x'); + } + if (i.scrollbarYActive) { + cls.add(element, 'ps-active-y'); + } +}; diff --git a/src/js/plugin/update.js b/src/js/plugin/update.js index b1dd110..2b86bd3 100644 --- a/src/js/plugin/update.js +++ b/src/js/plugin/update.js @@ -3,104 +3,20 @@ */ 'use strict'; -var cls = require('../lib/class') - , d = require('../lib/dom') - , h = require('../lib/helper') - , instances = require('./instances'); - -function getThumbSize(i, thumbSize) { - if (i.settings.minScrollbarLength) { - thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength); - } - if (i.settings.maxScrollbarLength) { - thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength); - } - return thumbSize; -} - -function updateCss(element, i) { - var xRailOffset = {width: i.railXWidth}; - if (i.isRtl) { - xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth; - } else { - xRailOffset.left = element.scrollLeft; - } - if (i.isScrollbarXUsingBottom) { - xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop; - } else { - xRailOffset.top = i.scrollbarXTop + element.scrollTop; - } - d.css(i.scrollbarXRail, xRailOffset); - - var yRailOffset = {top: element.scrollTop, height: i.railYHeight}; - if (i.isScrollbarYUsingRight) { - if (i.isRtl) { - yRailOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarYOuterWidth; - } else { - yRailOffset.right = i.scrollbarYRight - element.scrollLeft; - } - } else { - if (i.isRtl) { - yRailOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth; - } else { - yRailOffset.left = i.scrollbarYLeft + element.scrollLeft; - } - } - d.css(i.scrollbarYRail, yRailOffset); - - d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth}); - d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth}); -} +var destroy = require('./destroy') + , initialize = require('./initialize') + , instances = require('./instances') + , updateGeometry = require('./update-geometry'); module.exports = function (element) { var i = instances.get(element); - // Hide scrollbars not to affect scrollWidth and scrollHeight - cls.remove(element, 'ps-active-x'); - cls.remove(element, 'ps-active-y'); - - i.containerWidth = element.clientWidth; - i.containerHeight = element.clientHeight; - i.contentWidth = element.scrollWidth; - i.contentHeight = element.scrollHeight; - - if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) { - i.scrollbarXActive = true; - i.railXWidth = i.containerWidth - i.railXMarginWidth; - i.scrollbarXWidth = getThumbSize(i, h.toInt(i.railXWidth * i.containerWidth / i.contentWidth)); - i.scrollbarXLeft = h.toInt(element.scrollLeft * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth)); + if (!i.scrollbarXRail || !element.contains(i.scrollbarXRail) || + !i.scrollbarYRail || !element.contains(i.scrollbarYRail)) { + // If there's something wrong in the plugin, re-initialise. + destroy(element); + initialize(element); } else { - i.scrollbarXActive = false; - i.scrollbarXWidth = 0; - i.scrollbarXLeft = 0; - element.scrollLeft = 0; - } - - if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) { - i.scrollbarYActive = true; - i.railYHeight = i.containerHeight - i.railYMarginHeight; - i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight)); - i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight)); - } else { - i.scrollbarYActive = false; - i.scrollbarYHeight = 0; - i.scrollbarYTop = 0; - element.scrollTop = 0; - } - - if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) { - i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth; - } - if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) { - i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight; - } - - updateCss(element, i); - - if (i.scrollbarXActive) { - cls.add(element, 'ps-active-x'); - } - if (i.scrollbarYActive) { - cls.add(element, 'ps-active-y'); + updateGeometry(element); } };