Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nrk/core-scroll

Package Overview
Dependencies
Maintainers
98
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nrk/core-scroll - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

53

core-scroll.cjs.js
'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

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc