react-spy-scroll
Version:
Scrollspy components for react
316 lines (257 loc) • 12.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__RewireAPI__ = exports.__ResetDependency__ = exports.__set__ = exports.__Rewire__ = exports.__GetDependency__ = exports.__get__ = undefined;
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
* The class responsible for keeping track of scrolling
*/
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _utils = require('./utils');
var _scroller = require('./scroller');
var _scroller2 = _interopRequireDefault(_scroller);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// eslint-disable-line import/no-named-as-default
var ScrollSpy = function () {
function ScrollSpy() {
var _this = this;
_classCallCheck(this, ScrollSpy);
this._linksRegister = [];
this._scrollPanelRegister = [];
window.addEventListener('scroll', _get__('throttle')(function () {
return _this._handleScroll({ target: document.body });
}));
this._handleScroll({ target: document.body });
}
_createClass(ScrollSpy, [{
key: 'registerLink',
value: function registerLink(component) {
if (!this._linksRegister.includes(component)) {
this._linksRegister.push(component);
}
}
}, {
key: 'registerScrollpanel',
value: function registerScrollpanel(component) {
if (!this._scrollPanelRegister.includes(component)) {
var listener = _get__('throttle')(this._handleScroll.bind(this));
component.addEventListener('scroll', listener);
this._handleScroll({ target: component });
this._scrollPanelRegister.push({ component: component, listener: listener });
}
}
}, {
key: 'unregisterLink',
value: function unregisterLink(component) {
var index = this._linksRegister.indexOf(component);
if (index >= 0) {
this._linksRegister.splice(index, 1);
}
}
}, {
key: 'unregisterScrollpanel',
value: function unregisterScrollpanel(component) {
var index = this._scrollPanelRegister.findIndex(function (el) {
return el.component === component;
});
if (index >= 0) {
var el = this._scrollPanelRegister[index];
el.component.removeEventListener('scroll', el.listener);
this._scrollPanelRegister.splice(index, 1);
}
}
}, {
key: '_handleScroll',
value: function _handleScroll(e) {
var scrolledIn = e.target;
var scrollOffset = _get__('getScrollYPosition')(scrolledIn);
var elements = this._linksRegister.map(function (link) {
return { link: link, href: link.props.href };
}).map(function (_ref) {
var link = _ref.link,
href = _ref.href;
return {
link: link,
href: href,
panelComp: _get__('Scroller').getElementPanel(href),
// eslint-disable-next-line react/no-find-dom-node
panel: _get__('ReactDOM').findDOMNode(_get__('Scroller').getElementPanel(href))
};
}).filter(function (_ref2) {
var panel = _ref2.panel;
return scrolledIn.contains(panel);
}).map(function (elem) {
return elem.link._handleScroll(scrollOffset, scrolledIn, elem);
});
elements = _get__('ScrollSpy').consolidateActiveState(scrollOffset, elements);
var newActive = elements.filter(function (_ref3) {
var isInside = _ref3.isInside,
hasActive = _ref3.hasActive;
return isInside && !hasActive;
});
var oldActive = elements.filter(function (_ref4) {
var isInside = _ref4.isInside,
hasActive = _ref4.hasActive;
return !isInside && hasActive;
});
newActive.forEach(function (_ref5) {
var link = _ref5.link,
activeClass = _ref5.activeClass;
return link.classList.add(activeClass);
});
oldActive.forEach(function (_ref6) {
var link = _ref6.link,
activeClass = _ref6.activeClass;
return link.classList.remove(activeClass);
});
}
}]);
return ScrollSpy;
}();
_get__('ScrollSpy').consolidateActiveState = function (scrollOffset, elements) {
return elements.map(function (elementConfig) {
var panelComp = elementConfig.panelComp,
_elementConfig$isInsi = elementConfig.isInside,
elementTop = _elementConfig$isInsi.elementTop,
elementBottom = _elementConfig$isInsi.elementBottom,
element = _elementConfig$isInsi.element,
container = _elementConfig$isInsi.container;
return _extends({}, elementConfig, {
isInside: panelComp.props.isInside(scrollOffset, elementTop, elementBottom, element, container)
});
});
};
var _DefaultExportValue = new (_get__('ScrollSpy'))();
exports.default = _DefaultExportValue;
var _RewiredData__ = Object.create(null);
var INTENTIONAL_UNDEFINED = '__INTENTIONAL_UNDEFINED__';
var _RewireAPI__ = {};
(function () {
function addPropertyToAPIObject(name, value) {
Object.defineProperty(_RewireAPI__, name, {
value: value,
enumerable: false,
configurable: true
});
}
addPropertyToAPIObject('__get__', _get__);
addPropertyToAPIObject('__GetDependency__', _get__);
addPropertyToAPIObject('__Rewire__', _set__);
addPropertyToAPIObject('__set__', _set__);
addPropertyToAPIObject('__reset__', _reset__);
addPropertyToAPIObject('__ResetDependency__', _reset__);
addPropertyToAPIObject('__with__', _with__);
})();
function _get__(variableName) {
if (_RewiredData__ === undefined || _RewiredData__[variableName] === undefined) {
return _get_original__(variableName);
} else {
var value = _RewiredData__[variableName];
if (value === INTENTIONAL_UNDEFINED) {
return undefined;
} else {
return value;
}
}
}
function _get_original__(variableName) {
switch (variableName) {
case 'throttle':
return _utils.throttle;
case 'getScrollYPosition':
return _utils.getScrollYPosition;
case 'Scroller':
return _scroller2.default;
case 'ReactDOM':
return _reactDom2.default;
case 'ScrollSpy':
return ScrollSpy;
}
return undefined;
}
function _assign__(variableName, value) {
if (_RewiredData__ === undefined || _RewiredData__[variableName] === undefined) {
return _set_original__(variableName, value);
} else {
return _RewiredData__[variableName] = value;
}
}
function _set_original__(variableName, _value) {
switch (variableName) {}
return undefined;
}
function _update_operation__(operation, variableName, prefix) {
var oldValue = _get__(variableName);
var newValue = operation === '++' ? oldValue + 1 : oldValue - 1;
_assign__(variableName, newValue);
return prefix ? newValue : oldValue;
}
function _set__(variableName, value) {
if ((typeof variableName === 'undefined' ? 'undefined' : _typeof(variableName)) === 'object') {
Object.keys(variableName).forEach(function (name) {
_RewiredData__[name] = variableName[name];
});
} else {
if (value === undefined) {
_RewiredData__[variableName] = INTENTIONAL_UNDEFINED;
} else {
_RewiredData__[variableName] = value;
}
return function () {
_reset__(variableName);
};
}
}
function _reset__(variableName) {
delete _RewiredData__[variableName];
}
function _with__(object) {
var rewiredVariableNames = Object.keys(object);
var previousValues = {};
function reset() {
rewiredVariableNames.forEach(function (variableName) {
_RewiredData__[variableName] = previousValues[variableName];
});
}
return function (callback) {
rewiredVariableNames.forEach(function (variableName) {
previousValues[variableName] = _RewiredData__[variableName];
_RewiredData__[variableName] = object[variableName];
});
var result = callback();
if (!!result && typeof result.then == 'function') {
result.then(reset).catch(reset);
} else {
reset();
}
return result;
};
}
var _typeOfOriginalExport = typeof _DefaultExportValue === 'undefined' ? 'undefined' : _typeof(_DefaultExportValue);
function addNonEnumerableProperty(name, value) {
Object.defineProperty(_DefaultExportValue, name, {
value: value,
enumerable: false,
configurable: true
});
}
if ((_typeOfOriginalExport === 'object' || _typeOfOriginalExport === 'function') && Object.isExtensible(_DefaultExportValue)) {
addNonEnumerableProperty('__get__', _get__);
addNonEnumerableProperty('__GetDependency__', _get__);
addNonEnumerableProperty('__Rewire__', _set__);
addNonEnumerableProperty('__set__', _set__);
addNonEnumerableProperty('__reset__', _reset__);
addNonEnumerableProperty('__ResetDependency__', _reset__);
addNonEnumerableProperty('__with__', _with__);
addNonEnumerableProperty('__RewireAPI__', _RewireAPI__);
}
exports.__get__ = _get__;
exports.__GetDependency__ = _get__;
exports.__Rewire__ = _set__;
exports.__set__ = _set__;
exports.__ResetDependency__ = _reset__;
exports.__RewireAPI__ = _RewireAPI__;