@nrk/core-scroll
Advanced tools
Comparing version 3.0.2 to 3.1.0
'use strict'; | ||
var name = "@nrk/core-scroll"; | ||
var version = "3.0.1"; | ||
var version = "3.0.2"; | ||
@@ -12,3 +12,3 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
try { window.addEventListener('test', null, {get passive () { has = true; }}); } catch (e) {} | ||
try { window.addEventListener('test', null, { get passive () { has = true; } }); } catch (e) {} | ||
return has | ||
@@ -51,3 +51,3 @@ })(); | ||
if (typeof window.CustomEvent === 'function') { | ||
event = new window.CustomEvent(name, {bubbles: true, cancelable: true, detail: detail}); | ||
event = new window.CustomEvent(name, { bubbles: true, cancelable: true, detail: detail }); | ||
} else { | ||
@@ -73,8 +73,8 @@ event = document.createEvent('CustomEvent'); | ||
/** | ||
* throttle | ||
* debounce | ||
* @param {Function} callback The function to debounce | ||
* @param {Number} ms The threshold of milliseconds between each callback | ||
* @return {Function} The new throttled function | ||
* @return {Function} The new debounced function | ||
*/ | ||
function throttle (callback, ms) { | ||
function debounce (callback, ms) { | ||
var last; | ||
@@ -99,2 +99,24 @@ var time; | ||
/** | ||
* throttle | ||
* @param {Function} callback The new throttled function | ||
* @param {Number} ms The threshold of milliseconds between each callback | ||
*/ | ||
function throttle (callback, ms) { | ||
var args; | ||
var timer; | ||
return function () { | ||
var argument = [], len = arguments.length; | ||
while ( len-- ) argument[ len ] = arguments[ len ]; | ||
args = argument; | ||
if (!timer) { | ||
timer = setTimeout(function () { | ||
callback.apply(this, args); | ||
timer = null; | ||
}, ms); | ||
} | ||
} | ||
} | ||
/** | ||
* queryAll | ||
@@ -118,3 +140,3 @@ * @param {String|NodeList|Array|Element} elements A CSS selector string, nodeList, element array, or single element | ||
var UUID = ("data-" + name + "-" + version).replace(/\W+/g, '-'); // Strip invalid attribute characters | ||
var MOVE = {up: {y: -1, prop: 'top'}, down: {y: 1, prop: 'bottom'}, left: {x: -1}, right: {x: 1}}; | ||
var MOVE = { up: { y: -1, prop: 'top' }, down: { y: 1, prop: 'bottom' }, left: { x: -1 }, right: { x: 1 } }; | ||
var SIGNIFICANT_DRAG_THRESHOLD = 10; | ||
@@ -127,6 +149,7 @@ var FRICTION = 0.8; | ||
function scroll (elements, move) { | ||
function scroll (elements, move, settings) { | ||
if ( move === void 0 ) move = ''; | ||
if ( settings === void 0 ) settings = {}; | ||
var options = typeof move === 'object' ? move : {move: move}; | ||
var options = typeof move === 'object' ? move : { move: move }; | ||
var isChange = 'x' in options || 'y' in options || options.move; | ||
@@ -137,2 +160,4 @@ | ||
target.setAttribute(UUID, options.friction || ''); | ||
addEvent(UUID, 'resize', debounce(onChange, settings.resizeMs || 500)); // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, settings.scrollMs || 500), true); // useCapture to catch event without bubbling | ||
hideScrollbars(target); | ||
@@ -147,5 +172,3 @@ } | ||
addEvent(UUID, 'mousedown', onMousedown); | ||
addEvent(UUID, 'resize', throttle(onChange, 500)); // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, 500), true); // useCapture to catch event without bubbling | ||
addEvent(UUID, 'wheel', function () { return (DRAG.animate = false); }, {passive: true}); // Stop animation on wheel scroll | ||
addEvent(UUID, 'wheel', function () { return (DRAG.animate = false); }, { passive: true }); // Stop animation on wheel scroll | ||
addEvent(UUID, 'load', onChange); // Update state when we are sure all CSS is loaded | ||
@@ -242,3 +265,3 @@ addEvent(UUID, 'click', onClick); | ||
if (target.hasAttribute && target.hasAttribute(UUID)) { // target can be document | ||
var detail = {left: target.scrollLeft, up: target.scrollTop}; | ||
var detail = { left: target.scrollLeft, up: target.scrollTop }; | ||
detail.right = target.scrollWidth - target.clientWidth - detail.left; | ||
@@ -267,3 +290,3 @@ detail.down = target.scrollHeight - target.clientHeight - detail.up; | ||
var target = document.getElementById(el.getAttribute(ATTR)); | ||
if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
if (target && dispatchEvent(target, 'scroll.click', { move: el.value })) { | ||
return scroll(target, el.value) | ||
@@ -301,3 +324,3 @@ } | ||
var point = {x: x, y: y, move: MOVE[move]}; | ||
var point = { x: x, y: y, move: MOVE[move] }; | ||
// { | ||
@@ -304,0 +327,0 @@ // to: 'left|top|right|bottom|Element' |
@@ -1,3 +0,3 @@ | ||
import {name, version} from './package.json' | ||
import {IS_BROWSER, addEvent, dispatchEvent, requestAnimFrame, throttle, queryAll} from '../utils' | ||
import { name, version } from './package.json' | ||
import { IS_BROWSER, addEvent, debounce, dispatchEvent, requestAnimFrame, throttle, queryAll } from '../utils' | ||
@@ -7,3 +7,3 @@ const DRAG = {} | ||
const UUID = `data-${name}-${version}`.replace(/\W+/g, '-') // Strip invalid attribute characters | ||
const MOVE = {up: {y: -1, prop: 'top'}, down: {y: 1, prop: 'bottom'}, left: {x: -1}, right: {x: 1}} | ||
const MOVE = { up: { y: -1, prop: 'top' }, down: { y: 1, prop: 'bottom' }, left: { x: -1 }, right: { x: 1 } } | ||
const SIGNIFICANT_DRAG_THRESHOLD = 10 | ||
@@ -16,4 +16,4 @@ const FRICTION = 0.8 | ||
export default function scroll (elements, move = '') { | ||
const options = typeof move === 'object' ? move : {move} | ||
export default function scroll (elements, move = '', settings = {}) { | ||
const options = typeof move === 'object' ? move : { move } | ||
const isChange = 'x' in options || 'y' in options || options.move | ||
@@ -24,2 +24,4 @@ | ||
target.setAttribute(UUID, options.friction || '') | ||
addEvent(UUID, 'resize', debounce(onChange, settings.resizeMs || 500)) // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, settings.scrollMs || 500), true) // useCapture to catch event without bubbling | ||
hideScrollbars(target) | ||
@@ -34,5 +36,3 @@ } | ||
addEvent(UUID, 'mousedown', onMousedown) | ||
addEvent(UUID, 'resize', throttle(onChange, 500)) // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, 500), true) // useCapture to catch event without bubbling | ||
addEvent(UUID, 'wheel', () => (DRAG.animate = false), {passive: true}) // Stop animation on wheel scroll | ||
addEvent(UUID, 'wheel', () => (DRAG.animate = false), { passive: true }) // Stop animation on wheel scroll | ||
addEvent(UUID, 'load', onChange) // Update state when we are sure all CSS is loaded | ||
@@ -129,3 +129,3 @@ addEvent(UUID, 'click', onClick) | ||
if (target.hasAttribute && target.hasAttribute(UUID)) { // target can be document | ||
const detail = {left: target.scrollLeft, up: target.scrollTop} | ||
const detail = { left: target.scrollLeft, up: target.scrollTop } | ||
detail.right = target.scrollWidth - target.clientWidth - detail.left | ||
@@ -154,3 +154,3 @@ detail.down = target.scrollHeight - target.clientHeight - detail.up | ||
const target = document.getElementById(el.getAttribute(ATTR)) | ||
if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
if (target && dispatchEvent(target, 'scroll.click', { move: el.value })) { | ||
return scroll(target, el.value) | ||
@@ -161,3 +161,3 @@ } | ||
function scrollTo (target, {x, y}) { | ||
function scrollTo (target, { x, y }) { | ||
// Giving the animation an ID to workaround IE timeout issues | ||
@@ -181,4 +181,4 @@ const friction = Math.min(0.99, target.getAttribute(UUID)) || FRICTION // Avoid friction 1 (infinite) | ||
function parsePoint (target, {x, y, move}) { | ||
const point = {x, y, move: MOVE[move]} | ||
function parsePoint (target, { x, y, move }) { | ||
const point = { x, y, move: MOVE[move] } | ||
// { | ||
@@ -185,0 +185,0 @@ // to: 'left|top|right|bottom|Element' |
import React from 'react' | ||
import PropTypes from 'prop-types' | ||
import coreScroll from './core-scroll' | ||
import {exclude, requestAnimFrame} from '../utils' | ||
import { exclude, requestAnimFrame } from '../utils' | ||
export default class Scroll extends React.Component { | ||
static get defaultProps () { return {onChange: null, friction: null} } | ||
static get defaultProps () { return { onChange: null, friction: null } } | ||
constructor (props) { | ||
@@ -19,3 +19,3 @@ super(props) | ||
this.el.addEventListener('scroll.change', this.onScroll) | ||
requestAnimFrame(() => coreScroll(this.el, {friction: this.props.friction})) // Make sure DOM has rendered | ||
requestAnimFrame(() => coreScroll(this.el, { friction: this.props.friction }, this.props.settings)) // Make sure DOM has rendered | ||
} | ||
@@ -27,3 +27,3 @@ componentDidUpdate (prevProps, prevState) { | ||
componentWillUnmount () { this.el.removeEventListener('scroll.change', this.onScroll) } | ||
onScroll ({detail}) { | ||
onScroll ({ detail }) { | ||
if (this.props.onChange) { | ||
@@ -40,3 +40,3 @@ this.skipUpdate = true | ||
render () { | ||
const props = exclude(this.props, Scroll.defaultProps, {ref: el => (this.el = el)}) | ||
const props = exclude(this.props, Scroll.defaultProps, { ref: el => (this.el = el) }) | ||
return React.createElement('div', props, this.props.children) | ||
@@ -43,0 +43,0 @@ } |
@@ -1,3 +0,3 @@ | ||
/*! @nrk/core-scroll v3.0.1 - Copyright (c) 2017-2018 NRK */ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.CoreScroll=e(t.React,t.PropTypes)}(this,function(l,t){"use strict";l=l&&l.hasOwnProperty("default")?l.default:l,t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,r=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function o(t,e,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[t=t+"-"+e])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,o,n))}var c="prevent_recursive_dispatch_maximum_callstack";function i(t,e,o){void 0===o&&(o={});var n,r=""+c+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 f(t){(window.requestAnimationFrame||window.setTimeout)(t)}function n(r,i){var l,c;return function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var o=this,n=Date.now();l&&n<l+i?(clearTimeout(c),c=setTimeout(function(){l=n,r.apply(o,t)},i)):(l=n,r.apply(o,t))}}function d(t,e){if(void 0===e&&(e=document),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 p={},a="data-core-scroll",h="data-@nrk/core-scroll-3.0.1".replace(/\W+/g,"-"),m={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},s=10,v=.8,u=20,g=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches;function y(t,e){void 0===e&&(e="");var o="object"==typeof e?e:{move:e},n="x"in o||"y"in o||o.move;return d(t).map(function(t){return t.hasAttribute(h)||(t.setAttribute(h,o.friction||""),function(t){document.getElementById(h)||document.head.insertAdjacentHTML("beforeend",'<style id="'+h+'">['+h+"]::-webkit-scrollbar{display:none}</style>");t.style.overflow="scroll",t.style.willChange="scroll-position",t.style.webkitOverflowScrolling="touch";var e=t.offsetWidth-t.clientWidth,o=t.offsetHeight-t.clientHeight;t.style.marginRight="-"+e+"px",t.style.marginBottom="-"+o+"px",t.style.maxHeight="calc(100% + "+o+"px)"}(t)),n?E(t,function(t,e){var o=e.x,n=e.y,r=e.move,i={x:o,y:n,move:m[r]};"number"!=typeof i.x&&(i.x=t.scrollLeft);"number"!=typeof i.y&&(i.y=t.scrollTop);if(i.move){var l=i.move.x?"x":"y",c=i.move.x?"left":"top",a=t.getBoundingClientRect(),s=a[c]-t[i.move.x?"scrollLeft":"scrollTop"],u=a[c]+a[i.move.x?"width":"height"]*i.move[l];d(t.children).every(function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-"+c];return i[l]=e[c]-parseInt(o,10)-s,e[i.move.prop||r]<u})}return i}(t,o)):x(t),t})}function w(t){p.diffX=p.pageX-(p.pageX=t.pageX),p.diffY=p.pageY-(p.pageY=t.pageY),p.diffSumX+=p.diffX,p.diffSumY+=p.diffY,p.target.scrollLeft=p.scrollX+=p.diffX,p.target.scrollTop=p.scrollY+=p.diffY,(Math.abs(p.diffSumX)>s||Math.abs(p.diffSumY)>s)&&(p.target.style.pointerEvents="none")}function b(t){var e=p.diffX||p.diffY;document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",b),document.body.style.cursor="",x(p.target),e&&E(p.target,{x:p.scrollX+p.diffX*u,y:p.scrollY+p.diffY*u}),p.target.style.pointerEvents="",p.target=null}function x(t){var e=t.target||t;if("resize"===t.type||"load"===t.type)return d("["+h+"]").forEach(x);if(e.hasAttribute&&e.hasAttribute(h)){var o={left:e.scrollLeft,up:e.scrollTop};o.right=e.scrollWidth-e.clientWidth-o.left,o.down=e.scrollHeight-e.clientHeight-o.up;var n=o.left||o.right||o.up||o.down?"grab":"";i(e,"scroll.change",o),t.type||(e.style.cursor="-webkit-"+n,e.style.cursor=n),e.id&&d("["+a+"]").forEach(function(t){t.getAttribute(a)===e.id&&(t.disabled=!o[t.value])})}}function E(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(h))||v,i=p.animate=Math.floor(Date.now()*Math.random()).toString(16),l=Math.max(0,Math.min(o,t.scrollWidth-t.clientWidth)),c=Math.max(0,Math.min(n,t.scrollHeight-t.clientHeight)),a=g?1:l-t.scrollLeft,s=g?1:c-t.scrollTop,u=function(){p.animate===i&&(Math.round(a)||Math.round(s))&&(t.scrollLeft=l-Math.round(a*=r),t.scrollTop=c-Math.round(s*=r),f(u))};u()}o(h,"mousedown",function(t){for(var e=t.target;e;e=e.parentElement)!t.defaultPrevented&&e.hasAttribute&&e.hasAttribute(h)&&(t.preventDefault(),p.pageX=t.pageX,p.pageY=t.pageY,p.diffSumX=0,p.diffSumY=0,p.scrollX=e.scrollLeft,p.scrollY=e.scrollTop,p.animate=p.diffX=p.diffY=0,p.target=e,document.body.style.cursor=e.style.cursor="-webkit-grabbing",document.body.style.cursor=e.style.cursor="grabbing",document.addEventListener("mousemove",w),document.addEventListener("mouseup",b))}),o(h,"resize",n(x,500)),o(h,"scroll",n(x,500),!0),o(h,"wheel",function(){return p.animate=!1},{passive:!0}),o(h,"load",x),o(h,"click",function(t){if(t.defaultPrevented)return;for(var e=t.target;e;e=e.parentElement){var o=document.getElementById(e.getAttribute(a));if(o&&i(o,"scroll.click",{move:e.value}))return y(o,e.value)}});var L=function(o){function i(t){var e=this;o.call(this,t),this.onScroll=this.onScroll.bind(this),this.scrollTo=function(t){return y(e.el,t)},this.scrollUp=function(){return y(e.el,"up")},this.scrollDown=function(){return y(e.el,"down")},this.scrollLeft=function(){return y(e.el,"left")},this.scrollRight=function(){return y(e.el,"right")}}o&&(i.__proto__=o),(i.prototype=Object.create(o&&o.prototype)).constructor=i;var t={defaultProps:{configurable:!0}};return t.defaultProps.get=function(){return{onChange:null,friction:null}},i.prototype.componentDidMount=function(){var t=this;this.el.addEventListener("scroll.change",this.onScroll),f(function(){return y(t.el,{friction:t.props.friction})})},i.prototype.componentDidUpdate=function(t,e){this.skipUpdate?this.skipUpdate=!1:y(this.el)},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("scroll.change",this.onScroll)},i.prototype.onScroll=function(t){var e=t.detail;this.props.onChange&&(this.skipUpdate=!0,this.props.onChange({scrollUp:e.up?this.scrollUp:null,scrollDown:e.down?this.scrollDown:null,scrollLeft:e.left?this.scrollLeft:null,scrollRight:e.right?this.scrollRight:null}))},i.prototype.render=function(){var o,n,t,e=this,r=(o=this.props,n=i.defaultProps,void 0===(t={ref:function(t){return e.el=t}})&&(t={}),Object.keys(o).reduce(function(t,e){return n.hasOwnProperty(e)||(t[e]=o[e]),t},t));return l.createElement("div",r,this.props.children)},Object.defineProperties(i,t),i}(l.Component);return L.propTypes={onChange:t.func,friction:t.number},L}); | ||
/*! @nrk/core-scroll v3.0.2 - Copyright (c) 2017-2018 NRK */ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.CoreScroll=e(t.React,t.PropTypes)}(this,function(l,t){"use strict";l=l&&l.hasOwnProperty("default")?l.default:l,t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,r=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(t){void 0===t&&(t=!1);try{window.addEventListener("test",null,{get passive(){t=!0}})}catch(t){}return t}());function p(t,e,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[t=t+"-"+e])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,o,n))}var s="prevent_recursive_dispatch_maximum_callstack";function i(t,e,o){void 0===o&&(o={});var n,r=""+s+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 f(t){(window.requestAnimationFrame||window.setTimeout)(t)}function h(t,e){if(void 0===e&&(e=document),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 d={},c="data-core-scroll",m="data-@nrk/core-scroll-3.0.2".replace(/\W+/g,"-"),v={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},o=10,g=.8,n=20,y=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches;function a(t,e,u){void 0===e&&(e=""),void 0===u&&(u={});var f="object"==typeof e?e:{move:e},d="x"in f||"y"in f||f.move;return h(t).map(function(t){var o,n,r,i,l,s,c,a;return t.hasAttribute(m)||(t.setAttribute(m,f.friction||""),p(m,"resize",(l=b,s=u.resizeMs||500,function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var o=this,n=Date.now();c&&n<c+s?(clearTimeout(a),a=setTimeout(function(){c=n,l.apply(o,t)},s)):(c=n,l.apply(o,t))})),p(m,"scroll",(o=b,n=u.scrollMs||500,function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];r=t,i||(i=setTimeout(function(){o.apply(this,r),i=null},n))}),!0),function(t){document.getElementById(m)||document.head.insertAdjacentHTML("beforeend",'<style id="'+m+'">['+m+"]::-webkit-scrollbar{display:none}</style>");t.style.overflow="scroll",t.style.willChange="scroll-position",t.style.webkitOverflowScrolling="touch";var e=t.offsetWidth-t.clientWidth,o=t.offsetHeight-t.clientHeight;t.style.marginRight="-"+e+"px",t.style.marginBottom="-"+o+"px",t.style.maxHeight="calc(100% + "+o+"px)"}(t)),d?x(t,function(t,e){var o=e.x,n=e.y,r=e.move,i={x:o,y:n,move:v[r]};"number"!=typeof i.x&&(i.x=t.scrollLeft);"number"!=typeof i.y&&(i.y=t.scrollTop);if(i.move){var l=i.move.x?"x":"y",s=i.move.x?"left":"top",c=t.getBoundingClientRect(),a=c[s]-t[i.move.x?"scrollLeft":"scrollTop"],u=c[s]+c[i.move.x?"width":"height"]*i.move[l];h(t.children).every(function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-"+s];return i[l]=e[s]-parseInt(o,10)-a,e[i.move.prop||r]<u})}return i}(t,f)):b(t),t})}function u(t){d.diffX=d.pageX-(d.pageX=t.pageX),d.diffY=d.pageY-(d.pageY=t.pageY),d.diffSumX+=d.diffX,d.diffSumY+=d.diffY,d.target.scrollLeft=d.scrollX+=d.diffX,d.target.scrollTop=d.scrollY+=d.diffY,(Math.abs(d.diffSumX)>o||Math.abs(d.diffSumY)>o)&&(d.target.style.pointerEvents="none")}function w(t){var e=d.diffX||d.diffY;document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",w),document.body.style.cursor="",b(d.target),e&&x(d.target,{x:d.scrollX+d.diffX*n,y:d.scrollY+d.diffY*n}),d.target.style.pointerEvents="",d.target=null}function b(t){var e=t.target||t;if("resize"===t.type||"load"===t.type)return h("["+m+"]").forEach(b);if(e.hasAttribute&&e.hasAttribute(m)){var o={left:e.scrollLeft,up:e.scrollTop};o.right=e.scrollWidth-e.clientWidth-o.left,o.down=e.scrollHeight-e.clientHeight-o.up;var n=o.left||o.right||o.up||o.down?"grab":"";i(e,"scroll.change",o),t.type||(e.style.cursor="-webkit-"+n,e.style.cursor=n),e.id&&h("["+c+"]").forEach(function(t){t.getAttribute(c)===e.id&&(t.disabled=!o[t.value])})}}function x(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(m))||g,i=d.animate=Math.floor(Date.now()*Math.random()).toString(16),l=Math.max(0,Math.min(o,t.scrollWidth-t.clientWidth)),s=Math.max(0,Math.min(n,t.scrollHeight-t.clientHeight)),c=y?1:l-t.scrollLeft,a=y?1:s-t.scrollTop,u=function(){d.animate===i&&(Math.round(c)||Math.round(a))&&(t.scrollLeft=l-Math.round(c*=r),t.scrollTop=s-Math.round(a*=r),f(u))};u()}p(m,"mousedown",function(t){for(var e=t.target;e;e=e.parentElement)!t.defaultPrevented&&e.hasAttribute&&e.hasAttribute(m)&&(t.preventDefault(),d.pageX=t.pageX,d.pageY=t.pageY,d.diffSumX=0,d.diffSumY=0,d.scrollX=e.scrollLeft,d.scrollY=e.scrollTop,d.animate=d.diffX=d.diffY=0,d.target=e,document.body.style.cursor=e.style.cursor="-webkit-grabbing",document.body.style.cursor=e.style.cursor="grabbing",document.addEventListener("mousemove",u),document.addEventListener("mouseup",w))}),p(m,"wheel",function(){return d.animate=!1},{passive:!0}),p(m,"load",b),p(m,"click",function(t){if(t.defaultPrevented)return;for(var e=t.target;e;e=e.parentElement){var o=document.getElementById(e.getAttribute(c));if(o&&i(o,"scroll.click",{move:e.value}))return a(o,e.value)}});var E=function(o){function i(t){var e=this;o.call(this,t),this.onScroll=this.onScroll.bind(this),this.scrollTo=function(t){return a(e.el,t)},this.scrollUp=function(){return a(e.el,"up")},this.scrollDown=function(){return a(e.el,"down")},this.scrollLeft=function(){return a(e.el,"left")},this.scrollRight=function(){return a(e.el,"right")}}o&&(i.__proto__=o),(i.prototype=Object.create(o&&o.prototype)).constructor=i;var t={defaultProps:{configurable:!0}};return t.defaultProps.get=function(){return{onChange:null,friction:null}},i.prototype.componentDidMount=function(){var t=this;this.el.addEventListener("scroll.change",this.onScroll),f(function(){return a(t.el,{friction:t.props.friction},t.props.settings)})},i.prototype.componentDidUpdate=function(t,e){this.skipUpdate?this.skipUpdate=!1:a(this.el)},i.prototype.componentWillUnmount=function(){this.el.removeEventListener("scroll.change",this.onScroll)},i.prototype.onScroll=function(t){var e=t.detail;this.props.onChange&&(this.skipUpdate=!0,this.props.onChange({scrollUp:e.up?this.scrollUp:null,scrollDown:e.down?this.scrollDown:null,scrollLeft:e.left?this.scrollLeft:null,scrollRight:e.right?this.scrollRight:null}))},i.prototype.render=function(){var o,n,t,e=this,r=(o=this.props,n=i.defaultProps,void 0===(t={ref:function(t){return e.el=t}})&&(t={}),Object.keys(o).reduce(function(t,e){return n.hasOwnProperty(e)||(t[e]=o[e]),t},t));return l.createElement("div",r,this.props.children)},Object.defineProperties(i,t),i}(l.Component);return E.propTypes={onChange:t.func,friction:t.number},E}); | ||
//# sourceMappingURL=core-scroll.jsx.js.map |
@@ -1,3 +0,3 @@ | ||
/*! @nrk/core-scroll v3.0.1 - Copyright (c) 2017-2018 NRK */ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.coreScroll=t()}(this,function(){"use strict";var e="undefined"!=typeof window,r=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}());function t(e,t,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,o,n))}var l="prevent_recursive_dispatch_maximum_callstack";function i(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var i=e.dispatchEvent(n);return e[r]=null,i}function o(r,i){var l,a;return function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];var o=this,n=Date.now();l&&n<l+i?(clearTimeout(a),a=setTimeout(function(){l=n,r.apply(o,e)},i)):(l=n,r.apply(o,e))}}function f(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var s={},a="data-core-scroll",m="data-@nrk/core-scroll-3.0.1".replace(/\W+/g,"-"),p={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},n=10,v=.8,c=20,g=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches;function u(e,t){void 0===t&&(t="");var o="object"==typeof t?t:{move:t},n="x"in o||"y"in o||o.move;return f(e).map(function(e){return e.hasAttribute(m)||(e.setAttribute(m,o.friction||""),function(e){document.getElementById(m)||document.head.insertAdjacentHTML("beforeend",'<style id="'+m+'">['+m+"]::-webkit-scrollbar{display:none}</style>");e.style.overflow="scroll",e.style.willChange="scroll-position",e.style.webkitOverflowScrolling="touch";var t=e.offsetWidth-e.clientWidth,o=e.offsetHeight-e.clientHeight;e.style.marginRight="-"+t+"px",e.style.marginBottom="-"+o+"px",e.style.maxHeight="calc(100% + "+o+"px)"}(e)),n?w(e,function(e,t){var o=t.x,n=t.y,r=t.move,i={x:o,y:n,move:p[r]};"number"!=typeof i.x&&(i.x=e.scrollLeft);"number"!=typeof i.y&&(i.y=e.scrollTop);if(i.move){var l=i.move.x?"x":"y",a=i.move.x?"left":"top",c=e.getBoundingClientRect(),u=c[a]-e[i.move.x?"scrollLeft":"scrollTop"],d=c[a]+c[i.move.x?"width":"height"]*i.move[l];f(e.children).every(function(e){var t=e.getBoundingClientRect(),o=e.ownerDocument.defaultView.getComputedStyle(e)["margin-"+a];return i[l]=t[a]-parseInt(o,10)-u,t[i.move.prop||r]<d})}return i}(e,o)):y(e),e})}function d(e){s.diffX=s.pageX-(s.pageX=e.pageX),s.diffY=s.pageY-(s.pageY=e.pageY),s.diffSumX+=s.diffX,s.diffSumY+=s.diffY,s.target.scrollLeft=s.scrollX+=s.diffX,s.target.scrollTop=s.scrollY+=s.diffY,(Math.abs(s.diffSumX)>n||Math.abs(s.diffSumY)>n)&&(s.target.style.pointerEvents="none")}function h(e){var t=s.diffX||s.diffY;document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",h),document.body.style.cursor="",y(s.target),t&&w(s.target,{x:s.scrollX+s.diffX*c,y:s.scrollY+s.diffY*c}),s.target.style.pointerEvents="",s.target=null}function y(e){var t=e.target||e;if("resize"===e.type||"load"===e.type)return f("["+m+"]").forEach(y);if(t.hasAttribute&&t.hasAttribute(m)){var o={left:t.scrollLeft,up:t.scrollTop};o.right=t.scrollWidth-t.clientWidth-o.left,o.down=t.scrollHeight-t.clientHeight-o.up;var n=o.left||o.right||o.up||o.down?"grab":"";i(t,"scroll.change",o),e.type||(t.style.cursor="-webkit-"+n,t.style.cursor=n),t.id&&f("["+a+"]").forEach(function(e){e.getAttribute(a)===t.id&&(e.disabled=!o[e.value])})}}function w(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(m))||v,i=s.animate=Math.floor(Date.now()*Math.random()).toString(16),l=Math.max(0,Math.min(o,t.scrollWidth-t.clientWidth)),a=Math.max(0,Math.min(n,t.scrollHeight-t.clientHeight)),c=g?1:l-t.scrollLeft,u=g?1:a-t.scrollTop,d=function(){var e;s.animate===i&&(Math.round(c)||Math.round(u))&&(t.scrollLeft=l-Math.round(c*=r),t.scrollTop=a-Math.round(u*=r),e=d,(window.requestAnimationFrame||window.setTimeout)(e))};d()}return t(m,"mousedown",function(e){for(var t=e.target;t;t=t.parentElement)!e.defaultPrevented&&t.hasAttribute&&t.hasAttribute(m)&&(e.preventDefault(),s.pageX=e.pageX,s.pageY=e.pageY,s.diffSumX=0,s.diffSumY=0,s.scrollX=t.scrollLeft,s.scrollY=t.scrollTop,s.animate=s.diffX=s.diffY=0,s.target=t,document.body.style.cursor=t.style.cursor="-webkit-grabbing",document.body.style.cursor=t.style.cursor="grabbing",document.addEventListener("mousemove",d),document.addEventListener("mouseup",h))}),t(m,"resize",o(y,500)),t(m,"scroll",o(y,500),!0),t(m,"wheel",function(){return s.animate=!1},{passive:!0}),t(m,"load",y),t(m,"click",function(e){if(e.defaultPrevented)return;for(var t=e.target;t;t=t.parentElement){var o=document.getElementById(t.getAttribute(a));if(o&&i(o,"scroll.click",{move:t.value}))return u(o,t.value)}}),u}); | ||
/*! @nrk/core-scroll v3.0.2 - Copyright (c) 2017-2018 NRK */ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.coreScroll=t()}(this,function(){"use strict";var e="undefined"!=typeof window,r=(e&&/(android)/i.test(navigator.userAgent),e&&/iPad|iPhone|iPod/.test(String(navigator.platform)),function(e){void 0===e&&(e=!1);try{window.addEventListener("test",null,{get passive(){e=!0}})}catch(e){}return e}());function m(e,t,o,n){(void 0===n&&(n=!1),"undefined"==typeof window||window[e=e+"-"+t])||(r||"object"!=typeof n||(n=Boolean(n.capture)),("resize"===t||"load"===t?window:document).addEventListener(window[e]=t,o,n))}var l="prevent_recursive_dispatch_maximum_callstack";function i(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return!0;e[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var i=e.dispatchEvent(n);return e[r]=null,i}function p(e,t){if(void 0===t&&(t=document),e){if(e.nodeType)return[e];if("string"==typeof e)return[].slice.call(t.querySelectorAll(e));if(e.length)return[].slice.call(e)}return[]}var s={},a="data-core-scroll",v="data-@nrk/core-scroll-3.0.2".replace(/\W+/g,"-"),g={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},t=10,f=.8,o=20,h=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches;function n(e,t,d){void 0===t&&(t=""),void 0===d&&(d={});var s="object"==typeof t?t:{move:t},f="x"in s||"y"in s||s.move;return p(e).map(function(e){var o,n,r,i,l,a,c,u;return e.hasAttribute(v)||(e.setAttribute(v,s.friction||""),m(v,"resize",(l=y,a=d.resizeMs||500,function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];var o=this,n=Date.now();c&&n<c+a?(clearTimeout(u),u=setTimeout(function(){c=n,l.apply(o,e)},a)):(c=n,l.apply(o,e))})),m(v,"scroll",(o=y,n=d.scrollMs||500,function(){for(var e=[],t=arguments.length;t--;)e[t]=arguments[t];r=e,i||(i=setTimeout(function(){o.apply(this,r),i=null},n))}),!0),function(e){document.getElementById(v)||document.head.insertAdjacentHTML("beforeend",'<style id="'+v+'">['+v+"]::-webkit-scrollbar{display:none}</style>");e.style.overflow="scroll",e.style.willChange="scroll-position",e.style.webkitOverflowScrolling="touch";var t=e.offsetWidth-e.clientWidth,o=e.offsetHeight-e.clientHeight;e.style.marginRight="-"+t+"px",e.style.marginBottom="-"+o+"px",e.style.maxHeight="calc(100% + "+o+"px)"}(e)),f?w(e,function(e,t){var o=t.x,n=t.y,r=t.move,i={x:o,y:n,move:g[r]};"number"!=typeof i.x&&(i.x=e.scrollLeft);"number"!=typeof i.y&&(i.y=e.scrollTop);if(i.move){var l=i.move.x?"x":"y",a=i.move.x?"left":"top",c=e.getBoundingClientRect(),u=c[a]-e[i.move.x?"scrollLeft":"scrollTop"],d=c[a]+c[i.move.x?"width":"height"]*i.move[l];p(e.children).every(function(e){var t=e.getBoundingClientRect(),o=e.ownerDocument.defaultView.getComputedStyle(e)["margin-"+a];return i[l]=t[a]-parseInt(o,10)-u,t[i.move.prop||r]<d})}return i}(e,s)):y(e),e})}function c(e){s.diffX=s.pageX-(s.pageX=e.pageX),s.diffY=s.pageY-(s.pageY=e.pageY),s.diffSumX+=s.diffX,s.diffSumY+=s.diffY,s.target.scrollLeft=s.scrollX+=s.diffX,s.target.scrollTop=s.scrollY+=s.diffY,(Math.abs(s.diffSumX)>t||Math.abs(s.diffSumY)>t)&&(s.target.style.pointerEvents="none")}function u(e){var t=s.diffX||s.diffY;document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",u),document.body.style.cursor="",y(s.target),t&&w(s.target,{x:s.scrollX+s.diffX*o,y:s.scrollY+s.diffY*o}),s.target.style.pointerEvents="",s.target=null}function y(e){var t=e.target||e;if("resize"===e.type||"load"===e.type)return p("["+v+"]").forEach(y);if(t.hasAttribute&&t.hasAttribute(v)){var o={left:t.scrollLeft,up:t.scrollTop};o.right=t.scrollWidth-t.clientWidth-o.left,o.down=t.scrollHeight-t.clientHeight-o.up;var n=o.left||o.right||o.up||o.down?"grab":"";i(t,"scroll.change",o),e.type||(t.style.cursor="-webkit-"+n,t.style.cursor=n),t.id&&p("["+a+"]").forEach(function(e){e.getAttribute(a)===t.id&&(e.disabled=!o[e.value])})}}function w(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(v))||f,i=s.animate=Math.floor(Date.now()*Math.random()).toString(16),l=Math.max(0,Math.min(o,t.scrollWidth-t.clientWidth)),a=Math.max(0,Math.min(n,t.scrollHeight-t.clientHeight)),c=h?1:l-t.scrollLeft,u=h?1:a-t.scrollTop,d=function(){var e;s.animate===i&&(Math.round(c)||Math.round(u))&&(t.scrollLeft=l-Math.round(c*=r),t.scrollTop=a-Math.round(u*=r),e=d,(window.requestAnimationFrame||window.setTimeout)(e))};d()}return m(v,"mousedown",function(e){for(var t=e.target;t;t=t.parentElement)!e.defaultPrevented&&t.hasAttribute&&t.hasAttribute(v)&&(e.preventDefault(),s.pageX=e.pageX,s.pageY=e.pageY,s.diffSumX=0,s.diffSumY=0,s.scrollX=t.scrollLeft,s.scrollY=t.scrollTop,s.animate=s.diffX=s.diffY=0,s.target=t,document.body.style.cursor=t.style.cursor="-webkit-grabbing",document.body.style.cursor=t.style.cursor="grabbing",document.addEventListener("mousemove",c),document.addEventListener("mouseup",u))}),m(v,"wheel",function(){return s.animate=!1},{passive:!0}),m(v,"load",y),m(v,"click",function(e){if(e.defaultPrevented)return;for(var t=e.target;t;t=t.parentElement){var o=document.getElementById(t.getAttribute(a));if(o&&i(o,"scroll.click",{move:t.value}))return n(o,t.value)}}),n}); | ||
//# sourceMappingURL=core-scroll.min.js.map |
59
jsx.js
@@ -9,3 +9,3 @@ 'use strict'; | ||
var name = "@nrk/core-scroll"; | ||
var version = "3.0.1"; | ||
var version = "3.0.2"; | ||
@@ -18,3 +18,3 @@ var IS_BROWSER = typeof window !== 'undefined'; | ||
try { window.addEventListener('test', null, {get passive () { has = true; }}); } catch (e) {} | ||
try { window.addEventListener('test', null, { get passive () { has = true; } }); } catch (e) {} | ||
return has | ||
@@ -72,3 +72,3 @@ })(); | ||
if (typeof window.CustomEvent === 'function') { | ||
event = new window.CustomEvent(name, {bubbles: true, cancelable: true, detail: detail}); | ||
event = new window.CustomEvent(name, { bubbles: true, cancelable: true, detail: detail }); | ||
} else { | ||
@@ -94,8 +94,8 @@ event = document.createEvent('CustomEvent'); | ||
/** | ||
* throttle | ||
* debounce | ||
* @param {Function} callback The function to debounce | ||
* @param {Number} ms The threshold of milliseconds between each callback | ||
* @return {Function} The new throttled function | ||
* @return {Function} The new debounced function | ||
*/ | ||
function throttle (callback, ms) { | ||
function debounce (callback, ms) { | ||
var last; | ||
@@ -120,2 +120,24 @@ var time; | ||
/** | ||
* throttle | ||
* @param {Function} callback The new throttled function | ||
* @param {Number} ms The threshold of milliseconds between each callback | ||
*/ | ||
function throttle (callback, ms) { | ||
var args; | ||
var timer; | ||
return function () { | ||
var argument = [], len = arguments.length; | ||
while ( len-- ) argument[ len ] = arguments[ len ]; | ||
args = argument; | ||
if (!timer) { | ||
timer = setTimeout(function () { | ||
callback.apply(this, args); | ||
timer = null; | ||
}, ms); | ||
} | ||
} | ||
} | ||
/** | ||
* queryAll | ||
@@ -139,3 +161,3 @@ * @param {String|NodeList|Array|Element} elements A CSS selector string, nodeList, element array, or single element | ||
var UUID = ("data-" + name + "-" + version).replace(/\W+/g, '-'); // Strip invalid attribute characters | ||
var MOVE = {up: {y: -1, prop: 'top'}, down: {y: 1, prop: 'bottom'}, left: {x: -1}, right: {x: 1}}; | ||
var MOVE = { up: { y: -1, prop: 'top' }, down: { y: 1, prop: 'bottom' }, left: { x: -1 }, right: { x: 1 } }; | ||
var SIGNIFICANT_DRAG_THRESHOLD = 10; | ||
@@ -148,6 +170,7 @@ var FRICTION = 0.8; | ||
function scroll (elements, move) { | ||
function scroll (elements, move, settings) { | ||
if ( move === void 0 ) move = ''; | ||
if ( settings === void 0 ) settings = {}; | ||
var options = typeof move === 'object' ? move : {move: move}; | ||
var options = typeof move === 'object' ? move : { move: move }; | ||
var isChange = 'x' in options || 'y' in options || options.move; | ||
@@ -158,2 +181,4 @@ | ||
target.setAttribute(UUID, options.friction || ''); | ||
addEvent(UUID, 'resize', debounce(onChange, settings.resizeMs || 500)); // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, settings.scrollMs || 500), true); // useCapture to catch event without bubbling | ||
hideScrollbars(target); | ||
@@ -168,5 +193,3 @@ } | ||
addEvent(UUID, 'mousedown', onMousedown); | ||
addEvent(UUID, 'resize', throttle(onChange, 500)); // Update button states on resize | ||
addEvent(UUID, 'scroll', throttle(onChange, 500), true); // useCapture to catch event without bubbling | ||
addEvent(UUID, 'wheel', function () { return (DRAG.animate = false); }, {passive: true}); // Stop animation on wheel scroll | ||
addEvent(UUID, 'wheel', function () { return (DRAG.animate = false); }, { passive: true }); // Stop animation on wheel scroll | ||
addEvent(UUID, 'load', onChange); // Update state when we are sure all CSS is loaded | ||
@@ -263,3 +286,3 @@ addEvent(UUID, 'click', onClick); | ||
if (target.hasAttribute && target.hasAttribute(UUID)) { // target can be document | ||
var detail = {left: target.scrollLeft, up: target.scrollTop}; | ||
var detail = { left: target.scrollLeft, up: target.scrollTop }; | ||
detail.right = target.scrollWidth - target.clientWidth - detail.left; | ||
@@ -288,3 +311,3 @@ detail.down = target.scrollHeight - target.clientHeight - detail.up; | ||
var target = document.getElementById(el.getAttribute(ATTR)); | ||
if (target && dispatchEvent(target, 'scroll.click', {move: el.value})) { | ||
if (target && dispatchEvent(target, 'scroll.click', { move: el.value })) { | ||
return scroll(target, el.value) | ||
@@ -322,3 +345,3 @@ } | ||
var point = {x: x, y: y, move: MOVE[move]}; | ||
var point = { x: x, y: y, move: MOVE[move] }; | ||
// { | ||
@@ -367,3 +390,3 @@ // to: 'left|top|right|bottom|Element' | ||
var staticAccessors = { defaultProps: { configurable: true } }; | ||
staticAccessors.defaultProps.get = function () { return {onChange: null, friction: null} }; | ||
staticAccessors.defaultProps.get = function () { return { onChange: null, friction: null } }; | ||
@@ -374,3 +397,3 @@ Scroll.prototype.componentDidMount = function componentDidMount () { | ||
this.el.addEventListener('scroll.change', this.onScroll); | ||
requestAnimFrame(function () { return scroll(this$1.el, {friction: this$1.props.friction}); }); // Make sure DOM has rendered | ||
requestAnimFrame(function () { return scroll(this$1.el, { friction: this$1.props.friction }, this$1.props.settings); }); // Make sure DOM has rendered | ||
}; | ||
@@ -398,3 +421,3 @@ Scroll.prototype.componentDidUpdate = function componentDidUpdate (prevProps, prevState) { | ||
var props = exclude(this.props, Scroll.defaultProps, {ref: function (el) { return (this$1.el = el); }}); | ||
var props = exclude(this.props, Scroll.defaultProps, { ref: function (el) { return (this$1.el = el); } }); | ||
return React.createElement('div', props, this.props.children) | ||
@@ -401,0 +424,0 @@ }; |
@@ -5,3 +5,3 @@ { | ||
"author": "NRK <opensource@nrk.no> (https://www.nrk.no/)", | ||
"version": "3.0.2", | ||
"version": "3.1.0", | ||
"license": "MIT", | ||
@@ -8,0 +8,0 @@ "main": "core-scroll.cjs.js", |
@@ -130,2 +130,6 @@ # Core Scroll | ||
}) | ||
coreScroll(String|Element|Elements, '', { | ||
resizeMs: 250, | ||
scrollMs: 100 | ||
}) // Optionally send in a third argument to customize the debounce rate of the resize event and the throttle rate of the scroll event | ||
``` | ||
@@ -137,3 +141,3 @@ | ||
<CoreScroll onChange={(state) => {}}> | ||
<CoreScroll onChange={(state) => {}} settings={{resizeMs: 250, scrollMs: 100}}> | ||
{/* elements */} | ||
@@ -211,1 +215,4 @@ </CoreScroll> | ||
``` | ||
### NB: Safari bug | ||
If you are creating a horizontal layout, you might experience unwanted vertical scrolling in Safari. This happens when children of <code>@nrk/core-scroll</code> have half-pixel height values (due to images/videos/elements with aspect-ratio sizing). Avoid the vertical scrolling by setting <code>padding-bottom: 1px</code> on the <code>@nrk/core-scroll</code> element. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
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
105479
948
216
1