@nrk/core-scroll
Advanced tools
@nrk/core-scroll - npm Package Compare versions
Comparing version 1.1.9 to 1.2.0
| 'use strict'; | ||
| var name = "@nrk/core-scroll"; | ||
| var version = "1.1.8"; | ||
| var version = "1.1.9"; | ||
@@ -64,2 +64,9 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
| /** | ||
| * requestAnimFrame (super simple polyfill) | ||
| */ | ||
| function requestAnimFrame (fn) { | ||
| (window.requestAnimationFrame || window.setTimeout)(fn); | ||
| } | ||
| /** | ||
| * throttle | ||
@@ -114,3 +121,2 @@ * @param {Function} callback The function to debounce | ||
| var requestJump = IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches; | ||
| var requestAnim = !IS_BROWSER || window.requestAnimationFrame || window.setTimeout; | ||
@@ -137,5 +143,5 @@ function scroll (elements, move) { | ||
| target.style.marginBottom = "-" + scrollbarHeight + "px"; | ||
| onChange(target); // Update state | ||
| } | ||
| if (isChange) { scrollTo(target, parsePoint(target, options)); } | ||
| else { onChange(target); } // Updates button states | ||
| return target | ||
@@ -213,2 +219,3 @@ }) | ||
| } | ||
| if (target.id) { | ||
@@ -222,5 +229,8 @@ queryAll(("[" + ATTR + "]")).forEach(function (el) { | ||
| function onClick (event) { | ||
| if (event.defaultPrevented) { return } | ||
| for (var el = event.target; el; el = el.parentElement) { | ||
| var id = el.getAttribute(ATTR); | ||
| if (id) { return scroll(document.getElementById(id), el.value) } | ||
| var target = document.getElementById(el.getAttribute(ATTR)); | ||
| if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
| return scroll(target, el.value) | ||
| } | ||
| } | ||
@@ -245,3 +255,3 @@ } | ||
| target.scrollTop = endY - Math.round(moveY *= friction); | ||
| requestAnim(move); | ||
| requestAnimFrame(move); | ||
| } | ||
@@ -258,2 +268,7 @@ }; | ||
| var point = {x: x, y: y, move: MOVE[move]}; | ||
| // { | ||
| // to: 'left|top|right|bottom|Element' | ||
| // x: 'left|top|right|bottom|px' | ||
| // y: 'left|top|right|bottom|px' | ||
| // } | ||
| if (typeof point.x !== 'number') { point.x = target.scrollLeft; } | ||
@@ -260,0 +275,0 @@ if (typeof point.y !== 'number') { point.y = target.scrollTop; } |
| import {name, version} from './package.json' | ||
| import {IS_BROWSER, addEvent, dispatchEvent, throttle, queryAll} from '../utils' | ||
| import {IS_BROWSER, addEvent, dispatchEvent, requestAnimFrame, throttle, queryAll} from '../utils' | ||
@@ -13,3 +13,2 @@ const DRAG = {} | ||
| const requestJump = IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches | ||
| const requestAnim = !IS_BROWSER || window.requestAnimationFrame || window.setTimeout | ||
@@ -34,5 +33,5 @@ export default function scroll (elements, move = '') { | ||
| target.style.marginBottom = `-${scrollbarHeight}px` | ||
| onChange(target) // Update state | ||
| } | ||
| if (isChange) scrollTo(target, parsePoint(target, options)) | ||
| else onChange(target) // Updates button states | ||
| return target | ||
@@ -110,2 +109,3 @@ }) | ||
| } | ||
| if (target.id) { | ||
@@ -119,5 +119,8 @@ queryAll(`[${ATTR}]`).forEach((el) => { | ||
| function onClick (event) { | ||
| if (event.defaultPrevented) return | ||
| for (let el = event.target; el; el = el.parentElement) { | ||
| const id = el.getAttribute(ATTR) | ||
| if (id) return scroll(document.getElementById(id), el.value) | ||
| const target = document.getElementById(el.getAttribute(ATTR)) | ||
| if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
| return scroll(target, el.value) | ||
| } | ||
| } | ||
@@ -139,3 +142,3 @@ } | ||
| target.scrollTop = endY - Math.round(moveY *= friction) | ||
| requestAnim(move) | ||
| requestAnimFrame(move) | ||
| } | ||
@@ -148,2 +151,7 @@ } | ||
| const point = {x, y, move: MOVE[move]} | ||
| // { | ||
| // to: 'left|top|right|bottom|Element' | ||
| // x: 'left|top|right|bottom|px' | ||
| // y: 'left|top|right|bottom|px' | ||
| // } | ||
| if (typeof point.x !== 'number') point.x = target.scrollLeft | ||
@@ -150,0 +158,0 @@ if (typeof point.y !== 'number') point.y = target.scrollTop |
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import coreScroll from './core-scroll' | ||
| import {exclude} from '../utils' | ||
| import {exclude, requestAnimFrame} from '../utils' | ||
@@ -19,8 +19,12 @@ export default class Scroll extends React.Component { | ||
| this.el.addEventListener('scroll.change', this.onScroll) | ||
| coreScroll(this.el, {friction: this.props.friction}) | ||
| requestAnimFrame(() => coreScroll(this.el, {friction: this.props.friction})) // Make sure DOM has rendered | ||
| } | ||
| componentDidUpdate () { coreScroll(this.el) } | ||
| componentDidUpdate (prevProps, prevState) { | ||
| if (this.skipUpdate) this.skipUpdate = false // Update is from scroll.change, so prevent infinite loop | ||
| else coreScroll(this.el) | ||
| } | ||
| componentWillUnmount () { this.el.removeEventListener('scroll.change', this.onScroll) } | ||
| onScroll ({detail}) { | ||
| if (this.props.onChange) { | ||
| this.skipUpdate = true | ||
| this.props.onChange({ | ||
@@ -27,0 +31,0 @@ scrollUp: detail.up ? this.scrollUp : null, |
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v1.1.8 - Copyright (c) 2017-2018 NRK */ | ||
| /*! @nrk/core-scroll v1.1.9 - Copyright (c) 2017-2018 NRK */ | ||
| (function (global, factory) { | ||
@@ -12,3 +12,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) : | ||
| var name = "@nrk/core-scroll"; | ||
| var version = "1.1.8"; | ||
| var version = "1.1.9"; | ||
@@ -88,2 +88,9 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
| /** | ||
| * requestAnimFrame (super simple polyfill) | ||
| */ | ||
| function requestAnimFrame (fn) { | ||
| (window.requestAnimationFrame || window.setTimeout)(fn); | ||
| } | ||
| /** | ||
| * throttle | ||
@@ -138,3 +145,2 @@ * @param {Function} callback The function to debounce | ||
| var requestJump = IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches; | ||
| var requestAnim = !IS_BROWSER || window.requestAnimationFrame || window.setTimeout; | ||
@@ -161,5 +167,5 @@ function scroll (elements, move) { | ||
| target.style.marginBottom = "-" + scrollbarHeight + "px"; | ||
| onChange(target); // Update state | ||
| } | ||
| if (isChange) { scrollTo(target, parsePoint(target, options)); } | ||
| else { onChange(target); } // Updates button states | ||
| return target | ||
@@ -237,2 +243,3 @@ }) | ||
| } | ||
| if (target.id) { | ||
@@ -246,5 +253,8 @@ queryAll(("[" + ATTR + "]")).forEach(function (el) { | ||
| function onClick (event) { | ||
| if (event.defaultPrevented) { return } | ||
| for (var el = event.target; el; el = el.parentElement) { | ||
| var id = el.getAttribute(ATTR); | ||
| if (id) { return scroll(document.getElementById(id), el.value) } | ||
| var target = document.getElementById(el.getAttribute(ATTR)); | ||
| if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
| return scroll(target, el.value) | ||
| } | ||
| } | ||
@@ -269,3 +279,3 @@ } | ||
| target.scrollTop = endY - Math.round(moveY *= friction); | ||
| requestAnim(move); | ||
| requestAnimFrame(move); | ||
| } | ||
@@ -282,2 +292,7 @@ }; | ||
| var point = {x: x, y: y, move: MOVE[move]}; | ||
| // { | ||
| // to: 'left|top|right|bottom|Element' | ||
| // x: 'left|top|right|bottom|px' | ||
| // y: 'left|top|right|bottom|px' | ||
| // } | ||
| if (typeof point.x !== 'number') { point.x = target.scrollLeft; } | ||
@@ -324,6 +339,11 @@ if (typeof point.y !== 'number') { point.y = target.scrollTop; } | ||
| Scroll.prototype.componentDidMount = function componentDidMount () { | ||
| var this$1 = this; | ||
| this.el.addEventListener('scroll.change', this.onScroll); | ||
| scroll(this.el, {friction: this.props.friction}); | ||
| requestAnimFrame(function () { return scroll(this$1.el, {friction: this$1.props.friction}); }); // Make sure DOM has rendered | ||
| }; | ||
| Scroll.prototype.componentDidUpdate = function componentDidUpdate () { scroll(this.el); }; | ||
| Scroll.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) { | ||
| if (this.skipUpdate) { this.skipUpdate = false; } // Update is from scroll.change, so prevent infinite loop | ||
| else { scroll(this.el); } | ||
| }; | ||
| Scroll.prototype.componentWillUnmount = function componentWillUnmount () { this.el.removeEventListener('scroll.change', this.onScroll); }; | ||
@@ -334,2 +354,3 @@ Scroll.prototype.onScroll = function onScroll (ref) { | ||
| if (this.props.onChange) { | ||
| this.skipUpdate = true; | ||
| this.props.onChange({ | ||
@@ -336,0 +357,0 @@ scrollUp: detail.up ? this.scrollUp : null, |
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-scroll v1.1.8 - Copyright (c) 2017-2018 NRK */ | ||
| /*! @nrk/core-scroll v1.1.9 - Copyright (c) 2017-2018 NRK */ | ||
| (function (global, factory) { | ||
@@ -9,3 +9,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| var name = "@nrk/core-scroll"; | ||
| var version = "1.1.8"; | ||
| var version = "1.1.9"; | ||
@@ -70,2 +70,9 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
| /** | ||
| * requestAnimFrame (super simple polyfill) | ||
| */ | ||
| function requestAnimFrame (fn) { | ||
| (window.requestAnimationFrame || window.setTimeout)(fn); | ||
| } | ||
| /** | ||
| * throttle | ||
@@ -120,3 +127,2 @@ * @param {Function} callback The function to debounce | ||
| var requestJump = IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches; | ||
| var requestAnim = !IS_BROWSER || window.requestAnimationFrame || window.setTimeout; | ||
@@ -143,5 +149,5 @@ function scroll (elements, move) { | ||
| target.style.marginBottom = "-" + scrollbarHeight + "px"; | ||
| onChange(target); // Update state | ||
| } | ||
| if (isChange) { scrollTo(target, parsePoint(target, options)); } | ||
| else { onChange(target); } // Updates button states | ||
| return target | ||
@@ -219,2 +225,3 @@ }) | ||
| } | ||
| if (target.id) { | ||
@@ -228,5 +235,8 @@ queryAll(("[" + ATTR + "]")).forEach(function (el) { | ||
| function onClick (event) { | ||
| if (event.defaultPrevented) { return } | ||
| for (var el = event.target; el; el = el.parentElement) { | ||
| var id = el.getAttribute(ATTR); | ||
| if (id) { return scroll(document.getElementById(id), el.value) } | ||
| var target = document.getElementById(el.getAttribute(ATTR)); | ||
| if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
| return scroll(target, el.value) | ||
| } | ||
| } | ||
@@ -251,3 +261,3 @@ } | ||
| target.scrollTop = endY - Math.round(moveY *= friction); | ||
| requestAnim(move); | ||
| requestAnimFrame(move); | ||
| } | ||
@@ -264,2 +274,7 @@ }; | ||
| var point = {x: x, y: y, move: MOVE[move]}; | ||
| // { | ||
| // to: 'left|top|right|bottom|Element' | ||
| // x: 'left|top|right|bottom|px' | ||
| // y: 'left|top|right|bottom|px' | ||
| // } | ||
| if (typeof point.x !== 'number') { point.x = target.scrollLeft; } | ||
@@ -266,0 +281,0 @@ if (typeof point.y !== 'number') { point.y = target.scrollTop; } |
37
jsx.js
@@ -9,3 +9,3 @@ 'use strict'; | ||
| var name = "@nrk/core-scroll"; | ||
| var version = "1.1.8"; | ||
| var version = "1.1.9"; | ||
@@ -85,2 +85,9 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
| /** | ||
| * requestAnimFrame (super simple polyfill) | ||
| */ | ||
| function requestAnimFrame (fn) { | ||
| (window.requestAnimationFrame || window.setTimeout)(fn); | ||
| } | ||
| /** | ||
| * throttle | ||
@@ -135,3 +142,2 @@ * @param {Function} callback The function to debounce | ||
| var requestJump = IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches; | ||
| var requestAnim = !IS_BROWSER || window.requestAnimationFrame || window.setTimeout; | ||
@@ -158,5 +164,5 @@ function scroll (elements, move) { | ||
| target.style.marginBottom = "-" + scrollbarHeight + "px"; | ||
| onChange(target); // Update state | ||
| } | ||
| if (isChange) { scrollTo(target, parsePoint(target, options)); } | ||
| else { onChange(target); } // Updates button states | ||
| return target | ||
@@ -234,2 +240,3 @@ }) | ||
| } | ||
| if (target.id) { | ||
@@ -243,5 +250,8 @@ queryAll(("[" + ATTR + "]")).forEach(function (el) { | ||
| function onClick (event) { | ||
| if (event.defaultPrevented) { return } | ||
| for (var el = event.target; el; el = el.parentElement) { | ||
| var id = el.getAttribute(ATTR); | ||
| if (id) { return scroll(document.getElementById(id), el.value) } | ||
| var target = document.getElementById(el.getAttribute(ATTR)); | ||
| if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
| return scroll(target, el.value) | ||
| } | ||
| } | ||
@@ -266,3 +276,3 @@ } | ||
| target.scrollTop = endY - Math.round(moveY *= friction); | ||
| requestAnim(move); | ||
| requestAnimFrame(move); | ||
| } | ||
@@ -279,2 +289,7 @@ }; | ||
| var point = {x: x, y: y, move: MOVE[move]}; | ||
| // { | ||
| // to: 'left|top|right|bottom|Element' | ||
| // x: 'left|top|right|bottom|px' | ||
| // y: 'left|top|right|bottom|px' | ||
| // } | ||
| if (typeof point.x !== 'number') { point.x = target.scrollLeft; } | ||
@@ -321,6 +336,11 @@ if (typeof point.y !== 'number') { point.y = target.scrollTop; } | ||
| Scroll.prototype.componentDidMount = function componentDidMount () { | ||
| var this$1 = this; | ||
| this.el.addEventListener('scroll.change', this.onScroll); | ||
| scroll(this.el, {friction: this.props.friction}); | ||
| requestAnimFrame(function () { return scroll(this$1.el, {friction: this$1.props.friction}); }); // Make sure DOM has rendered | ||
| }; | ||
| Scroll.prototype.componentDidUpdate = function componentDidUpdate () { scroll(this.el); }; | ||
| Scroll.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) { | ||
| if (this.skipUpdate) { this.skipUpdate = false; } // Update is from scroll.change, so prevent infinite loop | ||
| else { scroll(this.el); } | ||
| }; | ||
| Scroll.prototype.componentWillUnmount = function componentWillUnmount () { this.el.removeEventListener('scroll.change', this.onScroll); }; | ||
@@ -331,2 +351,3 @@ Scroll.prototype.onScroll = function onScroll (ref) { | ||
| if (this.props.onChange) { | ||
| this.skipUpdate = true; | ||
| this.props.onChange({ | ||
@@ -333,0 +354,0 @@ scrollUp: detail.up ? this.scrollUp : null, |
@@ -5,3 +5,3 @@ { | ||
| "author": "NRK <opensource@nrk.no> (https://www.nrk.no/)", | ||
| "version": "1.1.9", | ||
| "version": "1.2.0", | ||
| "license": "MIT", | ||
@@ -8,0 +8,0 @@ "main": "core-scroll.cjs.js", |
@@ -170,2 +170,12 @@ # Core Scroll | ||
| `'scroll.click'` is fired when clicking a button controlling `@nrk/core-scroll`. The event bubbles, and can therefore be detected both from button element itself, or any parent element (read event delegation): | ||
| ```js | ||
| document.addEventListener('scroll.click', (event) => { | ||
| event.target // The core-scroll element triggering scroll.change event | ||
| event.detail.move // Direction to move (left, right, up, down) | ||
| }) | ||
| ``` | ||
| --- | ||
@@ -172,0 +182,0 @@ |
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 by3.56%
115227
- Lines of code
- increased by5.9%
1310
- Number of lines in readme file
- increased by5.56%
190