Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@nrk/core-scroll
Advanced tools
@nrk/core-scroll - npm Package Compare versions
Comparing version 4.3.1 to 4.4.0
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v4.3.1 - Copyright (c) 2017-2022 NRK */ | ||
| /*! @nrk/core-scroll v4.4.0 - Copyright (c) 2017-2022 NRK */ | ||
| 'use strict'; | ||
@@ -177,2 +177,76 @@ | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _createForOfIteratorHelper(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (!it) { | ||
| if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { | ||
| if (it) o = it; | ||
| var i = 0; | ||
| var F = function () {}; | ||
| return { | ||
| s: F, | ||
| n: function () { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }, | ||
| e: function (e) { | ||
| throw e; | ||
| }, | ||
| f: F | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| var normalCompletion = true, | ||
| didErr = false, | ||
| err; | ||
| return { | ||
| s: function () { | ||
| it = it.call(o); | ||
| }, | ||
| n: function () { | ||
| var step = it.next(); | ||
| normalCompletion = step.done; | ||
| return step; | ||
| }, | ||
| e: function (e) { | ||
| didErr = true; | ||
| err = e; | ||
| }, | ||
| f: function () { | ||
| try { | ||
| if (!normalCompletion && it.return != null) it.return(); | ||
| } finally { | ||
| if (didErr) throw err; | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var IS_BROWSER = typeof window !== 'undefined'; | ||
@@ -326,2 +400,10 @@ var HAS_NAVIGATOR = IS_BROWSER && typeof window.navigator !== 'undefined'; | ||
| /** | ||
| * @typedef {Object} scrollStatus | ||
| * @property {Number} up distance above to bounding element | ||
| * @property {Number} right distance right to bounding element | ||
| * @property {Number} down distance below to bounding element | ||
| * @property {Number} left distance left to bounding element | ||
| */ | ||
| /** | ||
| * @typedef {scrollDirection | scrollPoint | Element} scrollTarget | ||
@@ -425,3 +507,10 @@ */ | ||
| document.addEventListener('click', this); | ||
| document.addEventListener('click', this); // Observe children for changes and run this.handleEvent() | ||
| // - jsx in particular relies on onScrollChange triggering to update button states | ||
| if (!this._childListObserver && window.MutationObserver) this._childListObserver = new window.MutationObserver(onDOMchange.bind(this)); | ||
| if (this._childListObserver) this._childListObserver.observe(this, { | ||
| childList: true, | ||
| subtree: true | ||
| }); | ||
| setTimeout(function () { | ||
@@ -434,3 +523,4 @@ return _this.handleEvent(); | ||
| value: function disconnectedCallback() { | ||
| this._throttledEvent = null; // Garbage collection | ||
| if (this._childListObserver) this._childListObserver.disconnect(); | ||
| this._childListObserver = this._throttledEvent = null; // Garbage collection | ||
@@ -462,14 +552,6 @@ this.removeEventListener('mousedown', this); | ||
| } else { | ||
| // We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| var scroll = { | ||
| up: Math.floor(this.scrollTop), | ||
| right: Math.floor(this.scrollRight), | ||
| down: Math.floor(this.scrollBottom), | ||
| left: Math.floor(this.scrollLeft) | ||
| }; | ||
| var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : ''; | ||
| queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scroll[el.value]; | ||
| }); | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| var cursor = scrollStatus.left || scrollStatus.right || scrollStatus.up || scrollStatus.down ? 'grab' : ''; | ||
@@ -656,3 +738,74 @@ if (!event.type) { | ||
| } | ||
| /** | ||
| * scroll.DOMChange | ||
| * | ||
| * fired when MutationObserver in CoreScroll detects a change in child nodes | ||
| * | ||
| * @event scroll.DOMChange | ||
| * @type {object} | ||
| * @param {NodeList} addedNodes | ||
| * @param {NodeList} removedNodes | ||
| */ | ||
| /** | ||
| * Handle DOM changes in childlist observed with MutationObserver in CoreScroll | ||
| * | ||
| * @this {CoreScroll} CoreScroll HTMLElement | ||
| * @param {MutationRecord[]} mutationList | ||
| * @fires scroll.DOMChange when a MutationRecord has type childList | ||
| */ | ||
| function onDOMchange(mutationList) { | ||
| if (!this.parentNode) return; // Abort if removed from DOM | ||
| var _iterator = _createForOfIteratorHelper(mutationList), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var mutation = _step.value; | ||
| /* One or more children have been added to and/or removed from the tree. */ | ||
| if (mutation.type === 'childList') { | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } | ||
| /** | ||
| * getScrollStatus | ||
| * We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @returns {scrollStatus} Object with values for distance to bounding element in cardinal directions | ||
| */ | ||
| function getScrollStatus(self) { | ||
| return { | ||
| up: Math.floor(self.scrollTop), | ||
| right: Math.floor(self.scrollRight), | ||
| down: Math.floor(self.scrollBottom), | ||
| left: Math.floor(self.scrollLeft) | ||
| }; | ||
| } | ||
| /** | ||
| * Updates disabled attribute on all connected buttons with value set as a scrollDirection | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @param {scrollStatus} scrollStatus | ||
| */ | ||
| function updateButtons(self, scrollStatus) { | ||
| queryAll(self.id && "[for=\"".concat(self.id, "\"],[data-for=\"").concat(self.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scrollStatus[el.value]; | ||
| }); | ||
| } | ||
| module.exports = CoreScroll; |
@@ -19,2 +19,10 @@ import { IS_BROWSER, addStyle, closest, dispatchEvent, throttle, getUUID, queryAll } from '../utils' | ||
| /** | ||
| * @typedef {Object} scrollStatus | ||
| * @property {Number} up distance above to bounding element | ||
| * @property {Number} right distance right to bounding element | ||
| * @property {Number} down distance below to bounding element | ||
| * @property {Number} left distance left to bounding element | ||
| */ | ||
| /** | ||
| * @typedef {scrollDirection | scrollPoint | Element} scrollTarget | ||
@@ -80,2 +88,8 @@ */ | ||
| document.addEventListener('click', this) | ||
| // Observe children for changes and run this.handleEvent() | ||
| // - jsx in particular relies on onScrollChange triggering to update button states | ||
| if (!this._childListObserver && window.MutationObserver) this._childListObserver = new window.MutationObserver(onDOMchange.bind(this)) | ||
| if (this._childListObserver) this._childListObserver.observe(this, { childList: true, subtree: true }) | ||
| setTimeout(() => this.handleEvent()) // Initialize buttons after children is parsed | ||
@@ -85,3 +99,4 @@ } | ||
| disconnectedCallback () { | ||
| this._throttledEvent = null // Garbage collection | ||
| if (this._childListObserver) this._childListObserver.disconnect() | ||
| this._childListObserver = this._throttledEvent = null // Garbage collection | ||
| this.removeEventListener('mousedown', this) | ||
@@ -107,13 +122,7 @@ this.removeEventListener('wheel', this, EVENT_PASSIVE) | ||
| } else { | ||
| // We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| const scroll = { | ||
| up: Math.floor(this.scrollTop), | ||
| right: Math.floor(this.scrollRight), | ||
| down: Math.floor(this.scrollBottom), | ||
| left: Math.floor(this.scrollLeft) | ||
| } | ||
| const cursor = (scroll.left || scroll.right || scroll.up || scroll.down) ? 'grab' : '' | ||
| queryAll(this.id && `[for="${this.id}"],[data-for="${this.id}"]`).forEach((el) => (el.disabled = !scroll[el.value])) | ||
| const scrollStatus = getScrollStatus(this) | ||
| updateButtons(this, scrollStatus) | ||
| dispatchEvent(this, 'scroll.change') | ||
| const cursor = (scrollStatus.left || scrollStatus.right || scrollStatus.up || scrollStatus.down) ? 'grab' : '' | ||
| if (!event.type) { // Do not change cursor while dragging | ||
@@ -264,1 +273,56 @@ this.style.cursor = `-webkit-${cursor}` | ||
| } | ||
| /** | ||
| * scroll.DOMChange | ||
| * | ||
| * fired when MutationObserver in CoreScroll detects a change in child nodes | ||
| * | ||
| * @event scroll.DOMChange | ||
| * @type {object} | ||
| * @param {NodeList} addedNodes | ||
| * @param {NodeList} removedNodes | ||
| */ | ||
| /** | ||
| * Handle DOM changes in childlist observed with MutationObserver in CoreScroll | ||
| * | ||
| * @this {CoreScroll} CoreScroll HTMLElement | ||
| * @param {MutationRecord[]} mutationList | ||
| * @fires scroll.DOMChange when a MutationRecord has type childList | ||
| */ | ||
| function onDOMchange (mutationList) { | ||
| if (!this.parentNode) return // Abort if removed from DOM | ||
| for (const mutation of mutationList) { | ||
| /* One or more children have been added to and/or removed from the tree. */ | ||
| if (mutation.type === 'childList') { | ||
| const scrollStatus = getScrollStatus(this) | ||
| updateButtons(this, scrollStatus) | ||
| dispatchEvent(this, 'scroll.change') | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * getScrollStatus | ||
| * We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @returns {scrollStatus} Object with values for distance to bounding element in cardinal directions | ||
| */ | ||
| function getScrollStatus (self) { | ||
| return { | ||
| up: Math.floor(self.scrollTop), | ||
| right: Math.floor(self.scrollRight), | ||
| down: Math.floor(self.scrollBottom), | ||
| left: Math.floor(self.scrollLeft) | ||
| } | ||
| } | ||
| /** | ||
| * Updates disabled attribute on all connected buttons with value set as a scrollDirection | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @param {scrollStatus} scrollStatus | ||
| */ | ||
| function updateButtons (self, scrollStatus) { | ||
| queryAll(self.id && `[for="${self.id}"],[data-for="${self.id}"]`).forEach((el) => (el.disabled = !scrollStatus[el.value])) | ||
| } |
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v4.3.1 - Copyright (c) 2017-2022 NRK */ | ||
| /*! @nrk/core-scroll v4.4.0 - Copyright (c) 2017-2022 NRK */ | ||
| (function (global, factory) { | ||
@@ -185,2 +185,76 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) : | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _createForOfIteratorHelper(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (!it) { | ||
| if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { | ||
| if (it) o = it; | ||
| var i = 0; | ||
| var F = function () {}; | ||
| return { | ||
| s: F, | ||
| n: function () { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }, | ||
| e: function (e) { | ||
| throw e; | ||
| }, | ||
| f: F | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| var normalCompletion = true, | ||
| didErr = false, | ||
| err; | ||
| return { | ||
| s: function () { | ||
| it = it.call(o); | ||
| }, | ||
| n: function () { | ||
| var step = it.next(); | ||
| normalCompletion = step.done; | ||
| return step; | ||
| }, | ||
| e: function (e) { | ||
| didErr = true; | ||
| err = e; | ||
| }, | ||
| f: function () { | ||
| try { | ||
| if (!normalCompletion && it.return != null) it.return(); | ||
| } finally { | ||
| if (didErr) throw err; | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var IS_BROWSER = typeof window !== 'undefined'; | ||
@@ -334,2 +408,10 @@ var HAS_NAVIGATOR = IS_BROWSER && typeof window.navigator !== 'undefined'; | ||
| /** | ||
| * @typedef {Object} scrollStatus | ||
| * @property {Number} up distance above to bounding element | ||
| * @property {Number} right distance right to bounding element | ||
| * @property {Number} down distance below to bounding element | ||
| * @property {Number} left distance left to bounding element | ||
| */ | ||
| /** | ||
| * @typedef {scrollDirection | scrollPoint | Element} scrollTarget | ||
@@ -433,3 +515,10 @@ */ | ||
| document.addEventListener('click', this); | ||
| document.addEventListener('click', this); // Observe children for changes and run this.handleEvent() | ||
| // - jsx in particular relies on onScrollChange triggering to update button states | ||
| if (!this._childListObserver && window.MutationObserver) this._childListObserver = new window.MutationObserver(onDOMchange.bind(this)); | ||
| if (this._childListObserver) this._childListObserver.observe(this, { | ||
| childList: true, | ||
| subtree: true | ||
| }); | ||
| setTimeout(function () { | ||
@@ -442,3 +531,4 @@ return _this.handleEvent(); | ||
| value: function disconnectedCallback() { | ||
| this._throttledEvent = null; // Garbage collection | ||
| if (this._childListObserver) this._childListObserver.disconnect(); | ||
| this._childListObserver = this._throttledEvent = null; // Garbage collection | ||
@@ -470,14 +560,6 @@ this.removeEventListener('mousedown', this); | ||
| } else { | ||
| // We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| var scroll = { | ||
| up: Math.floor(this.scrollTop), | ||
| right: Math.floor(this.scrollRight), | ||
| down: Math.floor(this.scrollBottom), | ||
| left: Math.floor(this.scrollLeft) | ||
| }; | ||
| var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : ''; | ||
| queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scroll[el.value]; | ||
| }); | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| var cursor = scrollStatus.left || scrollStatus.right || scrollStatus.up || scrollStatus.down ? 'grab' : ''; | ||
@@ -664,6 +746,77 @@ if (!event.type) { | ||
| } | ||
| /** | ||
| * scroll.DOMChange | ||
| * | ||
| * fired when MutationObserver in CoreScroll detects a change in child nodes | ||
| * | ||
| * @event scroll.DOMChange | ||
| * @type {object} | ||
| * @param {NodeList} addedNodes | ||
| * @param {NodeList} removedNodes | ||
| */ | ||
| var version = "4.3.1"; | ||
| /** | ||
| * Handle DOM changes in childlist observed with MutationObserver in CoreScroll | ||
| * | ||
| * @this {CoreScroll} CoreScroll HTMLElement | ||
| * @param {MutationRecord[]} mutationList | ||
| * @fires scroll.DOMChange when a MutationRecord has type childList | ||
| */ | ||
| function onDOMchange(mutationList) { | ||
| if (!this.parentNode) return; // Abort if removed from DOM | ||
| var _iterator = _createForOfIteratorHelper(mutationList), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var mutation = _step.value; | ||
| /* One or more children have been added to and/or removed from the tree. */ | ||
| if (mutation.type === 'childList') { | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } | ||
| /** | ||
| * getScrollStatus | ||
| * We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @returns {scrollStatus} Object with values for distance to bounding element in cardinal directions | ||
| */ | ||
| function getScrollStatus(self) { | ||
| return { | ||
| up: Math.floor(self.scrollTop), | ||
| right: Math.floor(self.scrollRight), | ||
| down: Math.floor(self.scrollBottom), | ||
| left: Math.floor(self.scrollLeft) | ||
| }; | ||
| } | ||
| /** | ||
| * Updates disabled attribute on all connected buttons with value set as a scrollDirection | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @param {scrollStatus} scrollStatus | ||
| */ | ||
| function updateButtons(self, scrollStatus) { | ||
| queryAll(self.id && "[for=\"".concat(self.id, "\"],[data-for=\"").concat(self.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scrollStatus[el.value]; | ||
| }); | ||
| } | ||
| var version = "4.4.0"; | ||
| /** | ||
| * closest | ||
@@ -670,0 +823,0 @@ * @param {Element} el Element to traverse up from |
@@ -1,3 +0,3 @@ | ||
| /*! @nrk/core-scroll v4.3.1 - Copyright (c) 2017-2022 NRK */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreScroll=e()}(this,(function(){"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function r(t){return r=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},r(t)}function i(t,e){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},i(t,e)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function c(t,e,n){return c=s()?Reflect.construct.bind():function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r},c.apply(null,arguments)}function l(t){var e="function"==typeof Map?new Map:void 0;return l=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return c(t,arguments,r(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),i(o,t)},l(t)}function a(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}var u="undefined"!=typeof window,f=u&&void 0!==window.navigator;f&&/(android)/i.test(navigator.userAgent),f&&/iPad|iPhone|iPod/.test(String(navigator.platform)),u||global.HTMLElement||(global.HTMLElement=function(){return o((function t(){e(this,t)}))}());var d,h,p=(d="undefined"==typeof window?{}:window.Element.prototype,h=d.matches||d.msMatchesSelector||d.webkitMatchesSelector,d.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(h.call(t,e))return t;return null});function m(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var i=t.dispatchEvent(n);return t[r]=null,i}function y(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var v={},g={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},b=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];try{window.addEventListener("test",null,{get passive(){t={passive:!0}}})}catch(t){}return t}(),w=u&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,E=u&&(window.requestAnimationFrame||window.setTimeout),x=function(n){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&i(t,e)}(f,n);var c,l,u=(c=f,l=s(),function(){var t,e=r(c);if(l){var n=r(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function f(){return e(this,f),u.apply(this,arguments)}return o(f,[{key:"connectedCallback",value:function(){var t,e,n,o,r=this;t=this.nodeName,e="\n ".concat(this.nodeName,"{display:block}\n ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.webkitOverflowScrolling="touch";var i,s,c,l=this.offsetWidth-this.clientWidth,a=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(l,"px"),this.style.marginBottom="-".concat(a,"px"),this.style.maxHeight="calc(100% + ".concat(a,"px)"),this._throttledEvent=(i=this.handleEvent.bind(this),s=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];c||(c=setTimeout((function(){i.apply(this,e),c=null}),s))}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,b),this.addEventListener("scroll",this._throttledEvent,b),window.addEventListener("resize",this._throttledEvent,b),window.addEventListener("load",this),document.addEventListener("click",this),setTimeout((function(){return r.handleEvent()}))}},{key:"disconnectedCallback",value:function(){this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,b),this.removeEventListener("scroll",this._throttledEvent,b),window.removeEventListener("resize",this._throttledEvent,b),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.parentNode&&!t.defaultPrevented)if("wheel"===t.type)v.animate=!1;else if("mousedown"===t.type)L.call(this,t);else if("click"===t.type){var e=this.id&&p(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'));e&&m(this,"scroll.click",{move:e.value})&&this.scroll(e.value)}else{var n={up:Math.floor(this.scrollTop),right:Math.floor(this.scrollRight),down:Math.floor(this.scrollBottom),left:Math.floor(this.scrollLeft)},o=n.left||n.right||n.up||n.down?"grab":"";y(this.id&&'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]')).forEach((function(t){return t.disabled=!n[t.value]})),m(this,"scroll.change"),t.type||(this.style.cursor="-webkit-".concat(o),this.style.cursor=o)}}},{key:"scroll",value:function(e){var n=this,o=function(e,n){var o=e.items,r=n&&n.nodeType&&o.filter((function(t){return t.contains(n)}))[0];if(r)return{x:Math.max(0,r.offsetLeft-e.offsetLeft-(e.offsetWidth/2-r.offsetWidth/2)),y:Math.max(0,r.offsetTop-e.offsetTop-(e.offsetHeight/2-r.offsetHeight/2))};n&&n.nodeType&&!r&&console.warn(e,"cannot find child element ".concat(n," as a valid target for scrolling"));var i="object"===t(n)?n:{move:n};"number"!=typeof i.x&&(i.x=e.scrollLeft);"number"!=typeof i.y&&(i.y=e.scrollTop);if(i.move=g[i.move]){var s=i.move.x?"x":"y",c=i.move.x?"left":"top",l=e.getBoundingClientRect(),a=l[c]-e[i.move.x?"scrollLeft":"scrollTop"],u=l[c]+l[i.move.x?"width":"height"]*i.move[s];o.every((function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(c)];return i[s]=e[c]-parseInt(o,10)-a,e[i.move.prop||n]<u}))}return{x:Math.max(0,Math.min(i.x,e.scrollWidth-e.clientWidth)),y:Math.max(0,Math.min(i.y,e.scrollHeight-e.clientHeight))}}(this,e),r=o.x,i=o.y,s=v.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),c=this.friction,l=w?1:r-this.scrollLeft,a=w?1:i-this.scrollTop;return new Promise((function(t){!function e(){v.animate===s&&(Math.round(l)||Math.round(a))?(n.scrollLeft=r-Math.round(l*=c),n.scrollTop=i-Math.round(a*=c),E(e)):t(o)}()}))}},{key:"items",get:function(){return y(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return Math.max(0,this.scrollWidth-this.clientWidth-this.scrollLeft)}},{key:"scrollBottom",get:function(){return Math.max(0,this.scrollHeight-this.clientHeight-this.scrollTop)}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}]),f}(l(HTMLElement));function L(t){p(t.target,'[contenteditable="true"],input,select,textarea')||0===t.button&&(t.preventDefault(),v.pageX=t.pageX,v.pageY=t.pageY,v.diffSumX=0,v.diffSumY=0,v.animate=v.diffX=v.diffY=0,v.scrollX=this.scrollLeft,v.scrollY=this.scrollTop,v.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",M),document.addEventListener("mouseup",T))}function M(t){v.diffX=v.pageX-(v.pageX=t.pageX),v.diffY=v.pageY-(v.pageY=t.pageY),v.diffSumX+=v.diffX,v.diffSumY+=v.diffY,v.target.scrollLeft=v.scrollX+=v.diffX,v.target.scrollTop=v.scrollY+=v.diffY,Math.max(Math.abs(v.diffSumX),Math.abs(v.diffSumY))>10&&(v.target.style.pointerEvents="none")}function T(t){var e=Math.abs(v.diffX||v.diffY)>10?20:0;document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",T),document.body.style.cursor="",e&&v.target.scroll({x:v.scrollX+v.diffX*e,y:v.scrollY+v.diffY*e}),v.target.style.pointerEvents="",v.target.style.cursor="-webkit-grab",v.target.style.cursor="grab",v.target=null}return x})),window.customElements.define("core-scroll",coreScroll); | ||
| /*! @nrk/core-scroll v4.4.0 - Copyright (c) 2017-2022 NRK */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreScroll=e()}(this,(function(){"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function r(t){return r=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},r(t)}function i(t,e){return i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},i(t,e)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function c(t,e,n){return c=s()?Reflect.construct.bind():function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r},c.apply(null,arguments)}function l(t){var e="function"==typeof Map?new Map:void 0;return l=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return c(t,arguments,r(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),i(o,t)},l(t)}function a(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function u(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function f(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return u(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var o=0,r=function(){};return{s:r,n:function(){return o>=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,s=!0,c=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return s=t.done,t},e:function(t){c=!0,i=t},f:function(){try{s||null==n.return||n.return()}finally{if(c)throw i}}}}var d="undefined"!=typeof window,h=d&&void 0!==window.navigator;h&&/(android)/i.test(navigator.userAgent),h&&/iPad|iPhone|iPod/.test(String(navigator.platform)),d||global.HTMLElement||(global.HTMLElement=function(){return o((function t(){e(this,t)}))}());var p,v,m=(p="undefined"==typeof window?{}:window.Element.prototype,v=p.matches||p.msMatchesSelector||p.webkitMatchesSelector,p.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(v.call(t,e))return t;return null});function y(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var i=t.dispatchEvent(n);return t[r]=null,i}function b(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var g={},w={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},E=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];try{window.addEventListener("test",null,{get passive(){t={passive:!0}}})}catch(t){}return t}(),L=d&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,M=d&&(window.requestAnimationFrame||window.setTimeout),x=function(n){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&i(t,e)}(f,n);var c,l,u=(c=f,l=s(),function(){var t,e=r(c);if(l){var n=r(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function f(){return e(this,f),u.apply(this,arguments)}return o(f,[{key:"connectedCallback",value:function(){var t,e,n,o,r=this;t=this.nodeName,e="\n ".concat(this.nodeName,"{display:block}\n ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.webkitOverflowScrolling="touch";var i,s,c,l=this.offsetWidth-this.clientWidth,a=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(l,"px"),this.style.marginBottom="-".concat(a,"px"),this.style.maxHeight="calc(100% + ".concat(a,"px)"),this._throttledEvent=(i=this.handleEvent.bind(this),s=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];c||(c=setTimeout((function(){i.apply(this,e),c=null}),s))}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,E),this.addEventListener("scroll",this._throttledEvent,E),window.addEventListener("resize",this._throttledEvent,E),window.addEventListener("load",this),document.addEventListener("click",this),!this._childListObserver&&window.MutationObserver&&(this._childListObserver=new window.MutationObserver(_.bind(this))),this._childListObserver&&this._childListObserver.observe(this,{childList:!0,subtree:!0}),setTimeout((function(){return r.handleEvent()}))}},{key:"disconnectedCallback",value:function(){this._childListObserver&&this._childListObserver.disconnect(),this._childListObserver=this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,E),this.removeEventListener("scroll",this._throttledEvent,E),window.removeEventListener("resize",this._throttledEvent,E),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.parentNode&&!t.defaultPrevented)if("wheel"===t.type)g.animate=!1;else if("mousedown"===t.type)O.call(this,t);else if("click"===t.type){var e=this.id&&m(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'));e&&y(this,"scroll.click",{move:e.value})&&this.scroll(e.value)}else{var n=k(this);j(this,n),y(this,"scroll.change");var o=n.left||n.right||n.up||n.down?"grab":"";t.type||(this.style.cursor="-webkit-".concat(o),this.style.cursor=o)}}},{key:"scroll",value:function(e){var n=this,o=function(e,n){var o=e.items,r=n&&n.nodeType&&o.filter((function(t){return t.contains(n)}))[0];if(r)return{x:Math.max(0,r.offsetLeft-e.offsetLeft-(e.offsetWidth/2-r.offsetWidth/2)),y:Math.max(0,r.offsetTop-e.offsetTop-(e.offsetHeight/2-r.offsetHeight/2))};n&&n.nodeType&&!r&&console.warn(e,"cannot find child element ".concat(n," as a valid target for scrolling"));var i="object"===t(n)?n:{move:n};"number"!=typeof i.x&&(i.x=e.scrollLeft);"number"!=typeof i.y&&(i.y=e.scrollTop);if(i.move=w[i.move]){var s=i.move.x?"x":"y",c=i.move.x?"left":"top",l=e.getBoundingClientRect(),a=l[c]-e[i.move.x?"scrollLeft":"scrollTop"],u=l[c]+l[i.move.x?"width":"height"]*i.move[s];o.every((function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(c)];return i[s]=e[c]-parseInt(o,10)-a,e[i.move.prop||n]<u}))}return{x:Math.max(0,Math.min(i.x,e.scrollWidth-e.clientWidth)),y:Math.max(0,Math.min(i.y,e.scrollHeight-e.clientHeight))}}(this,e),r=o.x,i=o.y,s=g.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),c=this.friction,l=L?1:r-this.scrollLeft,a=L?1:i-this.scrollTop;return new Promise((function(t){!function e(){g.animate===s&&(Math.round(l)||Math.round(a))?(n.scrollLeft=r-Math.round(l*=c),n.scrollTop=i-Math.round(a*=c),M(e)):t(o)}()}))}},{key:"items",get:function(){return b(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return Math.max(0,this.scrollWidth-this.clientWidth-this.scrollLeft)}},{key:"scrollBottom",get:function(){return Math.max(0,this.scrollHeight-this.clientHeight-this.scrollTop)}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}]),f}(l(HTMLElement));function O(t){m(t.target,'[contenteditable="true"],input,select,textarea')||0===t.button&&(t.preventDefault(),g.pageX=t.pageX,g.pageY=t.pageY,g.diffSumX=0,g.diffSumY=0,g.animate=g.diffX=g.diffY=0,g.scrollX=this.scrollLeft,g.scrollY=this.scrollTop,g.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",S),document.addEventListener("mouseup",T))}function S(t){g.diffX=g.pageX-(g.pageX=t.pageX),g.diffY=g.pageY-(g.pageY=t.pageY),g.diffSumX+=g.diffX,g.diffSumY+=g.diffY,g.target.scrollLeft=g.scrollX+=g.diffX,g.target.scrollTop=g.scrollY+=g.diffY,Math.max(Math.abs(g.diffSumX),Math.abs(g.diffSumY))>10&&(g.target.style.pointerEvents="none")}function T(t){var e=Math.abs(g.diffX||g.diffY)>10?20:0;document.removeEventListener("mousemove",S),document.removeEventListener("mouseup",T),document.body.style.cursor="",e&&g.target.scroll({x:g.scrollX+g.diffX*e,y:g.scrollY+g.diffY*e}),g.target.style.pointerEvents="",g.target.style.cursor="-webkit-grab",g.target.style.cursor="grab",g.target=null}function _(t){if(this.parentNode){var e,n=f(t);try{for(n.s();!(e=n.n()).done;){if("childList"===e.value.type)j(this,k(this)),y(this,"scroll.change")}}catch(t){n.e(t)}finally{n.f()}}}function k(t){return{up:Math.floor(t.scrollTop),right:Math.floor(t.scrollRight),down:Math.floor(t.scrollBottom),left:Math.floor(t.scrollLeft)}}function j(t,e){b(t.id&&'[for="'.concat(t.id,'"],[data-for="').concat(t.id,'"]')).forEach((function(t){return t.disabled=!e[t.value]}))}return x})),window.customElements.define("core-scroll",coreScroll); | ||
| //# sourceMappingURL=core-scroll.min.js.map |
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v4.3.1 - Copyright (c) 2017-2022 NRK */ | ||
| /*! @nrk/core-scroll v4.4.0 - Copyright (c) 2017-2022 NRK */ | ||
| 'use strict'; | ||
@@ -649,10 +649,61 @@ | ||
| }))); | ||
| it('dispatches "scroll.change" onConnected and when children are added/removed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() { | ||
| return _regeneratorRuntime().wrap(function _callee7$(_context7) { | ||
| while (1) { | ||
| switch (_context7.prev = _context7.next) { | ||
| case 0: | ||
| _context7.next = 2; | ||
| return browser.executeScript(function () { | ||
| window.scrollEvents = []; | ||
| document.body.innerHTML = '<core-scroll id="scroller"></core-scroll>'; | ||
| document.addEventListener('scroll.change', function (event) { | ||
| return window.scrollEvents.push(event); | ||
| }); | ||
| }); | ||
| case 2: | ||
| _context7.next = 4; | ||
| return expect(browser.executeScript(function () { | ||
| return window.scrollEvents.length; | ||
| })).toEqual(1); | ||
| case 4: | ||
| _context7.next = 6; | ||
| return browser.executeScript(function () { | ||
| document.getElementById('scroller').insertAdjacentHTML('beforeend', "\n <div>This is overflowing content</div>\n <div>This is overflowing content</div>\n <div>This is overflowing content</div>\n "); | ||
| }); | ||
| case 6: | ||
| _context7.next = 8; | ||
| return expect(browser.executeScript(function () { | ||
| return window.scrollEvents.length; | ||
| })).toEqual(2); | ||
| case 8: | ||
| _context7.next = 10; | ||
| return browser.executeScript(function () { | ||
| return document.getElementById('scroller').children[0].remove(); | ||
| }); | ||
| case 10: | ||
| _context7.next = 12; | ||
| return expect(browser.executeScript(function () { | ||
| return window.scrollEvents.length; | ||
| })).toEqual(3); | ||
| case 12: | ||
| case "end": | ||
| return _context7.stop(); | ||
| } | ||
| } | ||
| }, _callee7); | ||
| }))); | ||
| }); | ||
| describe('scroll-function', function () { | ||
| it('works with a cardinal direction', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() { | ||
| return _regeneratorRuntime().wrap(function _callee8$(_context8) { | ||
| it('works with a cardinal direction', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() { | ||
| return _regeneratorRuntime().wrap(function _callee9$(_context9) { | ||
| while (1) { | ||
| switch (_context8.prev = _context8.next) { | ||
| switch (_context9.prev = _context9.next) { | ||
| case 0: | ||
| _context8.next = 2; | ||
| _context9.next = 2; | ||
| return browser.executeScript(function () { | ||
@@ -663,3 +714,3 @@ document.body.innerHTML = "\n <button data-for=\"scroller\" value=\"down\">Down</button>\n <div class=\"content-container\">\n <core-scroll id=\"scroller\" friction=\"0.001\">\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n </core-scroll>\n </div>\n "; | ||
| case 2: | ||
| _context8.next = 4; | ||
| _context9.next = 4; | ||
| return expect(browser.executeScript(function () { | ||
@@ -670,3 +721,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 4: | ||
| _context8.next = 6; | ||
| _context9.next = 6; | ||
| return expect(browser.executeScript(function () { | ||
@@ -677,8 +728,8 @@ return document.getElementById('scroller').scrollBottom; | ||
| case 6: | ||
| _context8.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() { | ||
| _context9.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() { | ||
| var coreScroll; | ||
| return _regeneratorRuntime().wrap(function _callee7$(_context7) { | ||
| return _regeneratorRuntime().wrap(function _callee8$(_context8) { | ||
| while (1) { | ||
| switch (_context7.prev = _context7.next) { | ||
| switch (_context8.prev = _context8.next) { | ||
| case 0: | ||
@@ -689,3 +740,3 @@ /** | ||
| coreScroll = document.getElementById('scroller'); | ||
| _context7.next = 3; | ||
| _context8.next = 3; | ||
| return coreScroll.scroll('right'); | ||
@@ -695,10 +746,10 @@ | ||
| case "end": | ||
| return _context7.stop(); | ||
| return _context8.stop(); | ||
| } | ||
| } | ||
| }, _callee7); | ||
| }, _callee8); | ||
| }))); | ||
| case 8: | ||
| _context8.next = 10; | ||
| _context9.next = 10; | ||
| return expect(browser.executeScript(function () { | ||
@@ -709,3 +760,3 @@ return document.getElementById('scroller').scrollLeft; | ||
| case 10: | ||
| _context8.next = 12; | ||
| _context9.next = 12; | ||
| return expect(browser.executeScript(function () { | ||
@@ -716,3 +767,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 12: | ||
| _context8.next = 14; | ||
| _context9.next = 14; | ||
| return expect(browser.executeScript(function () { | ||
@@ -724,13 +775,13 @@ return document.getElementById('scroller').scrollBottom; | ||
| case "end": | ||
| return _context8.stop(); | ||
| return _context9.stop(); | ||
| } | ||
| } | ||
| }, _callee8); | ||
| }, _callee9); | ||
| }))); | ||
| it('works with x,y coordinates', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() { | ||
| return _regeneratorRuntime().wrap(function _callee10$(_context10) { | ||
| it('works with x,y coordinates', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() { | ||
| return _regeneratorRuntime().wrap(function _callee11$(_context11) { | ||
| while (1) { | ||
| switch (_context10.prev = _context10.next) { | ||
| switch (_context11.prev = _context11.next) { | ||
| case 0: | ||
| _context10.next = 2; | ||
| _context11.next = 2; | ||
| return browser.executeScript(function () { | ||
@@ -741,3 +792,3 @@ document.body.innerHTML = "\n <button data-for=\"scroller\" value=\"down\">Down</button>\n <div class=\"content-container\">\n <core-scroll id=\"scroller\" friction=\"0.001\">\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n </core-scroll>\n </div>\n "; | ||
| case 2: | ||
| _context10.next = 4; | ||
| _context11.next = 4; | ||
| return expect(browser.executeScript(function () { | ||
@@ -748,3 +799,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 4: | ||
| _context10.next = 6; | ||
| _context11.next = 6; | ||
| return expect(browser.executeScript(function () { | ||
@@ -755,8 +806,8 @@ return document.getElementById('scroller').scrollBottom; | ||
| case 6: | ||
| _context10.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9() { | ||
| _context11.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() { | ||
| var coreScroll; | ||
| return _regeneratorRuntime().wrap(function _callee9$(_context9) { | ||
| return _regeneratorRuntime().wrap(function _callee10$(_context10) { | ||
| while (1) { | ||
| switch (_context9.prev = _context9.next) { | ||
| switch (_context10.prev = _context10.next) { | ||
| case 0: | ||
@@ -767,3 +818,3 @@ /** | ||
| coreScroll = document.getElementById('scroller'); | ||
| _context9.next = 3; | ||
| _context10.next = 3; | ||
| return coreScroll.scroll({ | ||
@@ -776,10 +827,10 @@ x: 2, | ||
| case "end": | ||
| return _context9.stop(); | ||
| return _context10.stop(); | ||
| } | ||
| } | ||
| }, _callee9); | ||
| }, _callee10); | ||
| }))); | ||
| case 8: | ||
| _context10.next = 10; | ||
| _context11.next = 10; | ||
| return expect(browser.executeScript(function () { | ||
@@ -790,3 +841,3 @@ return document.getElementById('scroller').scrollLeft; | ||
| case 10: | ||
| _context10.next = 12; | ||
| _context11.next = 12; | ||
| return expect(browser.executeScript(function () { | ||
@@ -797,3 +848,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 12: | ||
| _context10.next = 14; | ||
| _context11.next = 14; | ||
| return expect(browser.executeScript(function () { | ||
@@ -804,3 +855,3 @@ return document.getElementById('scroller').scrollTop; | ||
| case 14: | ||
| _context10.next = 16; | ||
| _context11.next = 16; | ||
| return expect(browser.executeScript(function () { | ||
@@ -812,13 +863,13 @@ return document.getElementById('scroller').scrollBottom; | ||
| case "end": | ||
| return _context10.stop(); | ||
| return _context11.stop(); | ||
| } | ||
| } | ||
| }, _callee10); | ||
| }, _callee11); | ||
| }))); | ||
| it('works with an element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() { | ||
| return _regeneratorRuntime().wrap(function _callee12$(_context12) { | ||
| it('works with an element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() { | ||
| return _regeneratorRuntime().wrap(function _callee13$(_context13) { | ||
| while (1) { | ||
| switch (_context12.prev = _context12.next) { | ||
| switch (_context13.prev = _context13.next) { | ||
| case 0: | ||
| _context12.next = 2; | ||
| _context13.next = 2; | ||
| return browser.executeScript(function () { | ||
@@ -829,3 +880,3 @@ document.body.innerHTML = "\n <button data-for=\"scroller\" value=\"down\">Down</button>\n <div class=\"content-container\">\n <core-scroll id=\"scroller\" friction=\"0.001\">\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n <div class=\"content-item\">This is overflowing content</div>\n </core-scroll>\n </div>\n "; | ||
| case 2: | ||
| _context12.next = 4; | ||
| _context13.next = 4; | ||
| return expect(browser.executeScript(function () { | ||
@@ -836,3 +887,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 4: | ||
| _context12.next = 6; | ||
| _context13.next = 6; | ||
| return expect(browser.executeScript(function () { | ||
@@ -843,8 +894,8 @@ return document.getElementById('scroller').scrollBottom; | ||
| case 6: | ||
| _context12.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() { | ||
| _context13.next = 8; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() { | ||
| var coreScroll; | ||
| return _regeneratorRuntime().wrap(function _callee11$(_context11) { | ||
| return _regeneratorRuntime().wrap(function _callee12$(_context12) { | ||
| while (1) { | ||
| switch (_context11.prev = _context11.next) { | ||
| switch (_context12.prev = _context12.next) { | ||
| case 0: | ||
@@ -855,3 +906,3 @@ /** | ||
| coreScroll = document.getElementById('scroller'); | ||
| _context11.next = 3; | ||
| _context12.next = 3; | ||
| return coreScroll.scroll(document.getElementById('fourth')); | ||
@@ -861,10 +912,10 @@ | ||
| case "end": | ||
| return _context11.stop(); | ||
| return _context12.stop(); | ||
| } | ||
| } | ||
| }, _callee11); | ||
| }, _callee12); | ||
| }))); | ||
| case 8: | ||
| _context12.next = 10; | ||
| _context13.next = 10; | ||
| return expect(browser.executeScript(function () { | ||
@@ -875,3 +926,3 @@ return document.getElementById('scroller').scrollLeft; | ||
| case 10: | ||
| _context12.next = 12; | ||
| _context13.next = 12; | ||
| return expect(browser.executeScript(function () { | ||
@@ -882,3 +933,3 @@ return document.getElementById('scroller').scrollRight; | ||
| case 12: | ||
| _context12.next = 14; | ||
| _context13.next = 14; | ||
| return expect(browser.executeScript(function () { | ||
@@ -889,3 +940,3 @@ return document.getElementById('scroller').scrollTop; | ||
| case 14: | ||
| _context12.next = 16; | ||
| _context13.next = 16; | ||
| return expect(browser.executeScript(function () { | ||
@@ -897,13 +948,13 @@ return document.getElementById('scroller').scrollBottom; | ||
| case "end": | ||
| return _context12.stop(); | ||
| return _context13.stop(); | ||
| } | ||
| } | ||
| }, _callee12); | ||
| }, _callee13); | ||
| }))); | ||
| it('returns a promise when scrolling is complete', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() { | ||
| return _regeneratorRuntime().wrap(function _callee14$(_context14) { | ||
| it('returns a promise when scrolling is complete', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() { | ||
| return _regeneratorRuntime().wrap(function _callee15$(_context15) { | ||
| while (1) { | ||
| switch (_context14.prev = _context14.next) { | ||
| switch (_context15.prev = _context15.next) { | ||
| case 0: | ||
| _context14.next = 2; | ||
| _context15.next = 2; | ||
| return browser.executeScript(function () { | ||
@@ -914,8 +965,8 @@ document.body.innerHTML = "\n <button data-for=\"scroller\" value=\"down\">Down</button>\n <div class=\"content-container\">\n <core-scroll id=\"scroller\">\n <div class=\"content-item\">This is overflowing content</div>\n <br>\n <div class=\"content-item\">This is overflowing content</div>\n <br>\n <div class=\"content-item\" id=\"targetEl\">This is overflowing content</div>\n </core-scroll>\n </div>\n "; | ||
| case 2: | ||
| _context14.next = 4; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13() { | ||
| _context15.next = 4; | ||
| return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14() { | ||
| var coreScroll; | ||
| return _regeneratorRuntime().wrap(function _callee13$(_context13) { | ||
| return _regeneratorRuntime().wrap(function _callee14$(_context14) { | ||
| while (1) { | ||
| switch (_context13.prev = _context13.next) { | ||
| switch (_context14.prev = _context14.next) { | ||
| case 0: | ||
@@ -926,18 +977,18 @@ /** | ||
| coreScroll = document.getElementById('scroller'); | ||
| _context13.next = 3; | ||
| _context14.next = 3; | ||
| return coreScroll.scroll(document.getElementById('targetEl')); | ||
| case 3: | ||
| window.done = _context13.sent; | ||
| window.done = _context14.sent; | ||
| case 4: | ||
| case "end": | ||
| return _context13.stop(); | ||
| return _context14.stop(); | ||
| } | ||
| } | ||
| }, _callee13); | ||
| }, _callee14); | ||
| }))); | ||
| case 4: | ||
| _context14.next = 6; | ||
| _context15.next = 6; | ||
| return expect(browser.executeScript(function () { | ||
@@ -951,4 +1002,4 @@ return window.done; | ||
| case 6: | ||
| _context14.t0 = expect; | ||
| _context14.next = 9; | ||
| _context15.t0 = expect; | ||
| _context15.next = 9; | ||
| return browser.wait(function () { | ||
@@ -961,5 +1012,5 @@ return browser.executeScript(function () { | ||
| case 9: | ||
| _context14.t1 = _context14.sent; | ||
| _context14.next = 12; | ||
| return (0, _context14.t0)(_context14.t1).toEqual({ | ||
| _context15.t1 = _context15.sent; | ||
| _context15.next = 12; | ||
| return (0, _context15.t0)(_context15.t1).toEqual({ | ||
| x: 0, | ||
@@ -971,8 +1022,8 @@ y: 175 | ||
| case "end": | ||
| return _context14.stop(); | ||
| return _context15.stop(); | ||
| } | ||
| } | ||
| }, _callee14); | ||
| }, _callee15); | ||
| }))); | ||
| }); | ||
| }); |
@@ -134,2 +134,27 @@ import fs from 'fs' | ||
| }) | ||
| it('dispatches "scroll.change" onConnected and when children are added/removed', async () => { | ||
| await browser.executeScript(() => { | ||
| window.scrollEvents = [] | ||
| document.body.innerHTML = '<core-scroll id="scroller"></core-scroll>' | ||
| document.addEventListener('scroll.change', (event) => (window.scrollEvents.push(event))) | ||
| }) | ||
| // Assert single event dispatched onConnected | ||
| await expect(browser.executeScript(() => window.scrollEvents.length)).toEqual(1) | ||
| // Add children | ||
| await browser.executeScript(() => { | ||
| document.getElementById('scroller').insertAdjacentHTML('beforeend', ` | ||
| <div>This is overflowing content</div> | ||
| <div>This is overflowing content</div> | ||
| <div>This is overflowing content</div> | ||
| `) | ||
| }) | ||
| // Assert event dispatched for adding children | ||
| await expect(browser.executeScript(() => window.scrollEvents.length)).toEqual(2) | ||
| // Assert event dispatched for removing children | ||
| await browser.executeScript(() => document.getElementById('scroller').children[0].remove()) | ||
| await expect(browser.executeScript(() => window.scrollEvents.length)).toEqual(3) | ||
| }) | ||
| }) | ||
@@ -136,0 +161,0 @@ |
183
jsx.js
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v4.3.1 - Copyright (c) 2017-2022 NRK */ | ||
| /*! @nrk/core-scroll v4.4.0 - Copyright (c) 2017-2022 NRK */ | ||
| 'use strict'; | ||
@@ -183,2 +183,76 @@ | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _createForOfIteratorHelper(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (!it) { | ||
| if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { | ||
| if (it) o = it; | ||
| var i = 0; | ||
| var F = function () {}; | ||
| return { | ||
| s: F, | ||
| n: function () { | ||
| if (i >= o.length) return { | ||
| done: true | ||
| }; | ||
| return { | ||
| done: false, | ||
| value: o[i++] | ||
| }; | ||
| }, | ||
| e: function (e) { | ||
| throw e; | ||
| }, | ||
| f: F | ||
| }; | ||
| } | ||
| throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| } | ||
| var normalCompletion = true, | ||
| didErr = false, | ||
| err; | ||
| return { | ||
| s: function () { | ||
| it = it.call(o); | ||
| }, | ||
| n: function () { | ||
| var step = it.next(); | ||
| normalCompletion = step.done; | ||
| return step; | ||
| }, | ||
| e: function (e) { | ||
| didErr = true; | ||
| err = e; | ||
| }, | ||
| f: function () { | ||
| try { | ||
| if (!normalCompletion && it.return != null) it.return(); | ||
| } finally { | ||
| if (didErr) throw err; | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var IS_BROWSER = typeof window !== 'undefined'; | ||
@@ -332,2 +406,10 @@ var HAS_NAVIGATOR = IS_BROWSER && typeof window.navigator !== 'undefined'; | ||
| /** | ||
| * @typedef {Object} scrollStatus | ||
| * @property {Number} up distance above to bounding element | ||
| * @property {Number} right distance right to bounding element | ||
| * @property {Number} down distance below to bounding element | ||
| * @property {Number} left distance left to bounding element | ||
| */ | ||
| /** | ||
| * @typedef {scrollDirection | scrollPoint | Element} scrollTarget | ||
@@ -431,3 +513,10 @@ */ | ||
| document.addEventListener('click', this); | ||
| document.addEventListener('click', this); // Observe children for changes and run this.handleEvent() | ||
| // - jsx in particular relies on onScrollChange triggering to update button states | ||
| if (!this._childListObserver && window.MutationObserver) this._childListObserver = new window.MutationObserver(onDOMchange.bind(this)); | ||
| if (this._childListObserver) this._childListObserver.observe(this, { | ||
| childList: true, | ||
| subtree: true | ||
| }); | ||
| setTimeout(function () { | ||
@@ -440,3 +529,4 @@ return _this.handleEvent(); | ||
| value: function disconnectedCallback() { | ||
| this._throttledEvent = null; // Garbage collection | ||
| if (this._childListObserver) this._childListObserver.disconnect(); | ||
| this._childListObserver = this._throttledEvent = null; // Garbage collection | ||
@@ -468,14 +558,6 @@ this.removeEventListener('mousedown', this); | ||
| } else { | ||
| // We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| var scroll = { | ||
| up: Math.floor(this.scrollTop), | ||
| right: Math.floor(this.scrollRight), | ||
| down: Math.floor(this.scrollBottom), | ||
| left: Math.floor(this.scrollLeft) | ||
| }; | ||
| var cursor = scroll.left || scroll.right || scroll.up || scroll.down ? 'grab' : ''; | ||
| queryAll(this.id && "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scroll[el.value]; | ||
| }); | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| var cursor = scrollStatus.left || scrollStatus.right || scrollStatus.up || scrollStatus.down ? 'grab' : ''; | ||
@@ -662,6 +744,77 @@ if (!event.type) { | ||
| } | ||
| /** | ||
| * scroll.DOMChange | ||
| * | ||
| * fired when MutationObserver in CoreScroll detects a change in child nodes | ||
| * | ||
| * @event scroll.DOMChange | ||
| * @type {object} | ||
| * @param {NodeList} addedNodes | ||
| * @param {NodeList} removedNodes | ||
| */ | ||
| var version = "4.3.1"; | ||
| /** | ||
| * Handle DOM changes in childlist observed with MutationObserver in CoreScroll | ||
| * | ||
| * @this {CoreScroll} CoreScroll HTMLElement | ||
| * @param {MutationRecord[]} mutationList | ||
| * @fires scroll.DOMChange when a MutationRecord has type childList | ||
| */ | ||
| function onDOMchange(mutationList) { | ||
| if (!this.parentNode) return; // Abort if removed from DOM | ||
| var _iterator = _createForOfIteratorHelper(mutationList), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var mutation = _step.value; | ||
| /* One or more children have been added to and/or removed from the tree. */ | ||
| if (mutation.type === 'childList') { | ||
| var scrollStatus = getScrollStatus(this); | ||
| updateButtons(this, scrollStatus); | ||
| dispatchEvent(this, 'scroll.change'); | ||
| } | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } | ||
| /** | ||
| * getScrollStatus | ||
| * We floor all values to handle potential decimal leftovers if browser is zoomed in or out | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @returns {scrollStatus} Object with values for distance to bounding element in cardinal directions | ||
| */ | ||
| function getScrollStatus(self) { | ||
| return { | ||
| up: Math.floor(self.scrollTop), | ||
| right: Math.floor(self.scrollRight), | ||
| down: Math.floor(self.scrollBottom), | ||
| left: Math.floor(self.scrollLeft) | ||
| }; | ||
| } | ||
| /** | ||
| * Updates disabled attribute on all connected buttons with value set as a scrollDirection | ||
| * @param {CoreScroll} self CoreScroll HTMLElement | ||
| * @param {scrollStatus} scrollStatus | ||
| */ | ||
| function updateButtons(self, scrollStatus) { | ||
| queryAll(self.id && "[for=\"".concat(self.id, "\"],[data-for=\"").concat(self.id, "\"]")).forEach(function (el) { | ||
| return el.disabled = !scrollStatus[el.value]; | ||
| }); | ||
| } | ||
| var version = "4.4.0"; | ||
| /** | ||
| * closest | ||
@@ -668,0 +821,0 @@ * @param {Element} el Element to traverse up from |
@@ -5,3 +5,3 @@ { | ||
| "author": "NRK <opensource@nrk.no> (https://www.nrk.no/)", | ||
| "version": "4.3.1", | ||
| "version": "4.4.0", | ||
| "license": "MIT", | ||
@@ -8,0 +8,0 @@ "main": "core-scroll.cjs.js", |
@@ -6,3 +6,2 @@ # Core Scroll | ||
| <!-- <script src="https://unpkg.com/preact"></script> | ||
@@ -79,3 +78,3 @@ <script src="https://unpkg.com/preact-compat"></script> | ||
| <div id="jsx-scroll"></div> | ||
| <script type="text/jsx"> | ||
| <script type="text/JavaScript"> | ||
| class MyScroll extends React.Component { | ||
@@ -117,3 +116,3 @@ constructor (props) { | ||
| ``` | ||
| ```html | ||
| <core-scroll items="li"> | ||
@@ -143,2 +142,40 @@ <ul> | ||
| ### Example: changes in DOM | ||
| Core scroll uses a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to monitor changes to childnodes. | ||
| Connected buttons are updated (disabled or not) if their viability changes as a result of the DOM-change | ||
| ```html | ||
| <!--demo--> | ||
| <div id="jsx-dynamic-content"></div> | ||
| <script type="text/JavaScript"> | ||
| const Dynamic = () => { | ||
| const [elements, setElements] = React.useState([...Array(10).keys()]) | ||
| const content = elements.map(item => <div> Element {item + 1}</div>); | ||
| return ( | ||
| <> | ||
| <button type="button" onClick={() => setElements([...elements, elements.length])}> | ||
| Add extra child | ||
| </button> | ||
| <button type="button" onClick={() => setElements([...Array(10).keys()])}> | ||
| Set to ten children | ||
| </button> | ||
| <button type="button" onClick={() => setElements([])}> | ||
| Remove all children | ||
| </button> | ||
| <br /> | ||
| <button type="button" data-for="scroll-dynamic-content" value="left" aria-label="Rull til venstre">←</button> | ||
| <button type="button" data-for="scroll-dynamic-content" value="right" aria-label="Rull til høyre">→</button> | ||
| <div className="my-wrap"> | ||
| <CoreScroll id="scroll-dynamic-content" className="my-scroll"> | ||
| {content} | ||
| </CoreScroll> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
| ReactDOM.render(<Dynamic />, document.getElementById('jsx-dynamic-content')) | ||
| </script> | ||
| ``` | ||
| ## Installation | ||
@@ -161,7 +198,8 @@ | ||
| ## Usage | ||
| Buttons can control a `core-scroll` by targeting its ID and specifying a direction. The `disabled` attribute is automatically added/removed to controller buttons when there is no more pixels to scroll in specified direction. Important: `core-scroll` manipulates styling to hide scrollbars, [see how to work with margin and height →](#styling) | ||
| Buttons should be connected to a `core-scroll` element to control scrolling for keyboard-users. Just add the `data-for` attribute with the id of `core-scroll` and assign a directional value. The `disabled` attribute is then automatically toggled when there is or isn't space to scroll in the assigned direction. | ||
| _Note: `core-scroll` adds styling to hide scrollbars, [see how to work with margin and height →](#styling)._ | ||
| ```html | ||
@@ -210,7 +248,8 @@ <button | ||
| <CoreScroll friction={Number} // Optional. Default 0.8. Controls scroll speed | ||
| ref={(comp) => {}} // Optional. Get reference to React component | ||
| forwardRef={(el) => {}} // Optional. Get reference to underlying DOM custom element | ||
| onScrollChange={Function} // Optional. Scroll change event handler | ||
| onScrollClick={Function}> // Optional. Scroll click event handler | ||
| <CoreScroll friction={Number} // Optional. Default 0.8. Controls scroll speed | ||
| ref={(comp) => {}} // Optional. Get reference to React component | ||
| forwardRef={(el) => {}} // Optional. Get reference to underlying DOM custom element | ||
| onScrollChange={Function} // Optional. Scroll change event handler | ||
| onScrollClick={Function} // Optional. Scroll click event handler | ||
| > | ||
| {/* elements */} | ||
@@ -223,3 +262,3 @@ </CoreScroll> | ||
| *Note: Starting a `core-scroll` mousemove inside a iframe, and releasing the mouse outside, will fail to end movement. This is due to `mouseup` not bubbling though iframes. Please avoid iframes.* | ||
| _Note: Starting a `core-scroll` mousemove inside a iframe, and releasing the mouse outside, will result in an incomplete action and fail to end movement. This is due to `mouseup` not bubbling though iframes. Please avoid iframes._ | ||
@@ -230,3 +269,2 @@ ### scroll.change | ||
| ```js | ||
@@ -238,3 +276,2 @@ document.addEventListener('scroll.change', (event) => { | ||
| ### scroll.click | ||
@@ -244,3 +281,2 @@ | ||
| ```js | ||
@@ -268,4 +304,2 @@ document.addEventListener('scroll.click', (event) => { | ||
| ## Styling | ||
@@ -303,2 +337,3 @@ | ||
| ### NB: iOS 12.2+ bug | ||
| `core-scroll` automatically adds `-webkit-overflow-scrolling: touch` as this is required by iOS to enable momentum scrolling. An unfortunate side effect (introduced in iOS 12.2) is that the scrollable area is rendered on the GPU, which breaks `position: fixed` on child elements. Please place elements with `position: fixed` (i.e. a `<core-dialog>`) outside the markup of `<core-scroll>`. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by12.36%
263968
- Lines of code
- increased by15.89%
3808
- Number of lines in readme file
- increased by11.95%
328
No dependency changes