@nrk/core-scroll - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

core-scroll.js

@@ -68,3 +68,2 @@ import {name, version} from './package.json'
 function onMousemove (event) {
-  DRAG.preventLink = true // Prevent links when we know there has been movement
   DRAG.diffX = DRAG.pageX - (DRAG.pageX = event.pageX)
@@ -74,2 +73,3 @@ DRAG.diffY = DRAG.pageY - (DRAG.pageY = event.pageY)
   DRAG.target.scrollTop = DRAG.scrollY += DRAG.diffY
+  DRAG.target.style.pointerEvents = 'none' // Prevent links when we know there has been movement
 }
@@ -84,6 +84,9 @@
 
-  if(isMomentum) scrollTo(DRAG.target, {
-    x: DRAG.scrollX + DRAG.diffX * VELOCITY,
-    y: DRAG.scrollY + DRAG.diffY * VELOCITY
-  })
+  if (isMomentum) {
+    scrollTo(DRAG.target, {
+      x: DRAG.scrollX + DRAG.diffX * VELOCITY,
+      y: DRAG.scrollY + DRAG.diffY * VELOCITY
+    })
+  }
+  DRAG.target.style.pointerEvents = '' // Allow events again
   DRAG.target = null // Prevent memory leak
@@ -116,3 +119,2 @@ }
 function onClick (event) {
-  if (DRAG.preventLink) DRAG.preventLink = event.preventDefault()
   for (let el = event.target; el; el = el.parentElement) {
@@ -126,3 +128,3 @@ const id = el.getAttribute(ATTR)
   // Giving the animation an ID to workaround IE timeout issues
-  const friction = Math.min(0.99, target.getAttribute(UUID)) || FRICTION // Avoid friction 1 (infinite)
+  const friction = Math.min(0.99, target.getAttribute(UUID)) || FRICTION // Avoid friction 1 (infinite)
   const uuid = DRAG.animate = Math.floor(Date.now() * Math.random()).toString(16)
@@ -129,0 +131,0 @@ const endX = Math.max(0, Math.min(x, target.scrollWidth - target.clientWidth))

core-scroll.jsx

@@ -5,5 +5,4 @@ import React from 'react'
 
-const DEFAULTS = {onChange: null, friction: null}
-
 export default class Scroll extends React.Component {
+  static get defaultProps () { return {onChange: null, friction: null} }
   constructor (props) {
@@ -35,5 +34,5 @@ super(props)
   render () {
-    const props = exclude(this.props, DEFAULTS, {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)
   }
 }

core-scroll.md

@@ -0,9 +1,19 @@
+# Core Scroll
+
+## `@nrk/core-scroll` enhances any tag with content to be scrollable with mouse interaction on non-touch-devices. `core-scroll` also automatically disables animation for users who prefers [reduced motion](https://css-tricks.com/introduction-reduced-motion-media-query/).
+
 ---
-name: Scroll
-category: Components
----
 
-> `@nrk/core-scroll` enhances any tag with content to be scrollable with mouse interaction on non-touch-devices.
+<script src="core-scroll/core-scroll.min.js"></script>
+<script src="core-scroll/jsx/index.js"></script>
+<style>
+  #my-scroll-js { height: 200px }
+  .my-wrap { overflow: hidden; white-space: nowrap; border: 1px solid; height: 100% }
+  .my-scroll > * { box-sizing: border-box; display: inline-block; vertical-align: top; width: 30%; height: 90px; padding: 10px; border: 1px solid; margin: 10px; transition: 1s }
+</style>
 
-```scroll.html
+## Demo
+
+```html
+<!--demo-->
 <button data-core-scroll="my-scroll-js" value="up" aria-label="Rull opp">&uarr;</button>
@@ -47,32 +57,110 @@ <button data-core-scroll="my-scroll-js" value="down" aria-label="Rull ned">&darr;</button>
 </div>
+<script>
+  coreScroll('.my-scroll');
+</script>
 ```
-```scroll.js
-coreScroll('.my-scroll');
-```
-```scroll.jsx
-class MyScroll extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {}
-  }
-  render () {
-    return <div>
-      <button disabled={!this.state.scrollLeft} onClick={this.state.scrollLeft}>Left JSX</button>
-      <button disabled={!this.state.scrollRight} onClick={this.state.scrollRight}>Right JSX</button>
-      <div className="my-wrap">
-        <Scroll className="my-scroll" onChange={(state) => this.setState(state)}>
-          <div>1</div><div>2</div><div>3</div><div>4</div><a href="#">5</a>
-          <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
-          <div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
-        </Scroll>
+
+```html
+<!--demo-->
+<div id="jsx-scroll"></div>
+<script type="text/jsx">
+  class MyScroll extends React.Component {
+    constructor (props) {
+      super(props)
+      this.state = {}
+    }
+    render () {
+      return <div>
+        <button disabled={!this.state.scrollLeft} onClick={this.state.scrollLeft}>Left JSX</button>
+        <button disabled={!this.state.scrollRight} onClick={this.state.scrollRight}>Right JSX</button>
+        <div className="my-wrap">
+          <CoreScroll className="my-scroll" onChange={(state) => this.setState(state)}>
+            <div>1</div><div>2</div><div>3</div><div>4</div><a href="#">5</a>
+            <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
+            <div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
+          </CoreScroll>
+        </div>
       </div>
-    </div>
+    }
   }
+  ReactDOM.render(<MyScroll />, document.getElementById('jsx-scroll'))
+</script>
+```
+
+---
+
+## Usage
+
+Scroll speed is controlled by `friction` rather than `duration` (a short scroll distance will have a shorter duration and vice versa) for a more natural feeling of motion. Buttons can control a `core-scroll` by targeting its ID and specifying a direction; `left|right|up|down`. The `disabled` is automatically added/removed to controller buttons when there is no more pixels to scroll in specified direction.
+
+### HTML / JavaScript
+```html
+<button data-core-scroll="my-scroll-js" value="up" aria-label="Rull opp">&uarr;</button>
+<div id="my-scroll-js">
+  <!-- Direct children is used to calculate natural stop points for scroll -->
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+```
+```js
+import coreScroll from '@nrk/core-scroll'
+
+coreScroll(String|Element|Elements)  // Accepts a selector string, NodeList, Element or array of Elements,
+coreScroll(String|Element|Elements, 'right'|'left'|'up'|'down') // Optionally pass a second argument to cause scroll
+coreScroll(String|Element|Elements, {                           // Or pass a object
+  move: 'right'|'left'|'up'|'down',    // Optional. Scroll a direction
+  x: Number,                           // Optional. The scrollLeft
+  y: Number,                           // Optional. The scrollTop
+  friction: 0.8,                       // Optional. Changes scroll speed. Defaults to 0.8
+})
+```
+
+### React / Preact
+```jsx
+import CoreScroll from '@nrk/core-scroll/jsx'
+
+<CoreScroll onChange={(state) => {}}>
+  {/* elements */}
+</CoreScroll>
+
+
+// state parameter in the onChange event has the following structure:
+state = {
+  scrollUp: Function|null,
+  scrollDown: Function|null,
+  scrollLeft: Function|null,
+  scrollRight: Function|null
 }
-<MyScroll />
+// These properties are functions that the user can access in order to provide
+// buttons that scroll up/down/left/right. When the prop is set to null, it indicates
+// that it is not possible to scroll further in that given direction.
+
 ```
-```scroll.css
-#my-scroll-js { height: 200px }
-.my-wrap { overflow: hidden; white-space: nowrap; border: 1px solid; height: 100% }
-.my-scroll > * { box-sizing: border-box; display: inline-block; vertical-align: top; width: 30%; height: 90px; padding: 10px; border: 1px solid; margin: 10px; transition: 1s }
+
+---
+
+## Events
+`'scroll.change'` is fired regularly during a scroll. The event is [throttled](https://css-tricks.com/the-difference-between-throttling-and-debouncing/) to achieve better performance. The event bubbles, and can therefore be detected both from button element itself, or any parent element (read event delegation):
+
+
+```js
+document.addEventListener('scroll.change', (event) => {
+  event.target        // The core-scroll element triggering scroll.change event
+  event.detail.left   // Amount of pixels remaining in scroll direction left
+  event.detail.right  // Amount of pixels remaining in scroll direction right
+  event.detail.up     // Amount of pixels remaining in scroll direction up
+  event.detail.down   // Amount of pixels remaining in scroll direction down
+})
 ```
+
+---
+
+## Styling
+All styling in documentation is example only. The `<button>` elements receive `disabled `attributes reflecting the current scroll state:
+
+```css
+.my-scroll-button {}                  /* Target button in any state */
+.my-scroll-button:disabled {}         /* Target button in disabled state */
+.my-scroll-button:not(:disabled) {}   /* Target button in enabled state */
+```

core-scroll.min.js

@@ -1,2 +0,2 @@
-!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,t=(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 o(e,o,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[e=e+"-"+o])||(t||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===o||"load"===o?window:document).addEventListener(window[e]=o,n,r))}var n="prevent_recursive_dispatch_maximum_callstack";function r(e,t){var o,n;return function(){for(var r=[],i=arguments.length;i--;)r[i]=arguments[i];var l=this,a=Date.now();o&&a<o+t?(clearTimeout(n),n=setTimeout(function(){o=a,e.apply(l,r)},t)):(o=a,e.apply(l,r))}}function i(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 l={},a="data-core-scroll",c="data-@nrk/core-scroll-1.1.5".replace(/\W+/g,"-"),u={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},d=.8,s=20,f=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,m=!e||window.requestAnimationFrame||window.setTimeout;function p(e,t){void 0===t&&(t="");var o="object"==typeof t?t:{move:t},n="x"in o||"y"in o||o.move;return i(e).map(function(e){if(!e.hasAttribute(c)){e.setAttribute(c,o.friction||""),e.style.overflow="scroll",e.style.willChange="scroll-position",e.style.webkitOverflowScrolling="touch";var t=e.offsetWidth-e.clientWidth+1,r=e.offsetHeight-e.clientHeight+1;e.style.maxHeight="calc(100% + "+r+"px)",e.style.marginRight="-"+t+"px",e.style.marginBottom="-"+r+"px",h(e)}return n&&y(e,function(e,t){var o=t.x,n=t.y,r=t.move,l={x:o,y:n,move:u[r]};"number"!=typeof l.x&&(l.x=e.scrollLeft);"number"!=typeof l.y&&(l.y=e.scrollTop);if(l.move){var a=l.move.x?"x":"y",c=l.move.x?"left":"top",d=e.getBoundingClientRect(),s=d[c]-e[l.move.x?"scrollLeft":"scrollTop"],f=d[c]+d[l.move.x?"width":"height"]*l.move[a];i(e.children).every(function(e){var t=e.getBoundingClientRect(),o=e.ownerDocument.defaultView.getComputedStyle(e)["margin-"+c];return l[a]=t[c]-parseInt(o,10)-s,t[l.move.prop||r]<f})}return l}(e,o)),e})}function v(e){l.preventLink=!0,l.diffX=l.pageX-(l.pageX=e.pageX),l.diffY=l.pageY-(l.pageY=e.pageY),l.target.scrollLeft=l.scrollX+=l.diffX,l.target.scrollTop=l.scrollY+=l.diffY}function g(e){var t=l.diffX||l.diffY;document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",g),document.body.style.cursor="",h(l.target),t&&y(l.target,{x:l.scrollX+l.diffX*s,y:l.scrollY+l.diffY*s}),l.target=null}function h(e){var t=e.target||e;if("resize"===e.type||"load"===e.type)return i("["+c+"]").forEach(h);if(t.hasAttribute&&t.hasAttribute(c)){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 r=o.left||o.right||o.up||o.down?"grab":"";!function(e,t,o){void 0===o&&(o={});var r,i=""+n+t;if(e[i])return!0;e[i]=!0,"function"==typeof window.CustomEvent?r=new window.CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o}):(r=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o);var l=e.dispatchEvent(r);e[i]=null}(t,"scroll.change",o),e.type||(t.style.cursor="-webkit-"+r,t.style.cursor=r),t.id&&i("["+a+"]").forEach(function(e){e.getAttribute(a)===t.id&&(e.disabled=!o[e.value])})}}function y(e,t){var o=t.x,n=t.y,r=Math.min(.99,e.getAttribute(c))||d,i=l.animate=Math.floor(Date.now()*Math.random()).toString(16),a=Math.max(0,Math.min(o,e.scrollWidth-e.clientWidth)),u=Math.max(0,Math.min(n,e.scrollHeight-e.clientHeight)),s=f?1:a-e.scrollLeft,p=f?1:u-e.scrollTop,v=function(){l.animate===i&&(Math.round(s)||Math.round(p))&&(e.scrollLeft=a-Math.round(s*=r),e.scrollTop=u-Math.round(p*=r),m(v))};v()}return o(c,"mousedown",function(e){for(var t=e.target;t;t=t.parentElement)!e.defaultPrevented&&t.hasAttribute(c)&&(e.preventDefault(),l.pageX=e.pageX,l.pageY=e.pageY,l.scrollX=t.scrollLeft,l.scrollY=t.scrollTop,l.animate=l.diffX=l.diffY=0,l.target=t,document.body.style.cursor=t.style.cursor="-webkit-grabbing",document.body.style.cursor=t.style.cursor="grabbing",document.addEventListener("mousemove",v),document.addEventListener("mouseup",g))}),o(c,"resize",r(h,500)),o(c,"scroll",r(h,500),!0),o(c,"wheel",function(){return l.animate=!1},{passive:!0}),o(c,"load",h),o(c,"click",function(e){l.preventLink&&(l.preventLink=e.preventDefault());for(var t=e.target;t;t=t.parentElement){var o=t.getAttribute(a);if(o)return p(document.getElementById(o),t.value)}}),p});
+!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 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 d(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 f={},i="data-core-scroll",m="data-@nrk/core-scroll-1.1.6".replace(/\W+/g,"-"),p={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},v=.8,n=20,g=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,h=!e||window.requestAnimationFrame||window.setTimeout;function a(e,t){void 0===t&&(t="");var n="object"==typeof t?t:{move:t},r="x"in n||"y"in n||n.move;return d(e).map(function(e){if(!e.hasAttribute(m)){e.setAttribute(m,n.friction||""),e.style.overflow="scroll",e.style.willChange="scroll-position",e.style.webkitOverflowScrolling="touch";var t=e.offsetWidth-e.clientWidth+1,o=e.offsetHeight-e.clientHeight+1;e.style.maxHeight="calc(100% + "+o+"px)",e.style.marginRight="-"+t+"px",e.style.marginBottom="-"+o+"px",s(e)}return r&&y(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"],s=c[a]+c[i.move.x?"width":"height"]*i.move[l];d(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]<s})}return i}(e,n)),e})}function c(e){f.diffX=f.pageX-(f.pageX=e.pageX),f.diffY=f.pageY-(f.pageY=e.pageY),f.target.scrollLeft=f.scrollX+=f.diffX,f.target.scrollTop=f.scrollY+=f.diffY,f.target.style.pointerEvents="none"}function u(e){var t=f.diffX||f.diffY;document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",u),document.body.style.cursor="",s(f.target),t&&y(f.target,{x:f.scrollX+f.diffX*n,y:f.scrollY+f.diffY*n}),f.target.style.pointerEvents="",f.target=null}function s(e){var t=e.target||e;if("resize"===e.type||"load"===e.type)return d("["+m+"]").forEach(s);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":"";!function(e,t,o){void 0===o&&(o={});var n,r=""+l+t;if(e[r])return;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);e[r]=null}(t,"scroll.change",o),e.type||(t.style.cursor="-webkit-"+n,t.style.cursor=n),t.id&&d("["+i+"]").forEach(function(e){e.getAttribute(i)===t.id&&(e.disabled=!o[e.value])})}}function y(e,t){var o=t.x,n=t.y,r=Math.min(.99,e.getAttribute(m))||v,i=f.animate=Math.floor(Date.now()*Math.random()).toString(16),l=Math.max(0,Math.min(o,e.scrollWidth-e.clientWidth)),a=Math.max(0,Math.min(n,e.scrollHeight-e.clientHeight)),c=g?1:l-e.scrollLeft,u=g?1:a-e.scrollTop,s=function(){f.animate===i&&(Math.round(c)||Math.round(u))&&(e.scrollLeft=l-Math.round(c*=r),e.scrollTop=a-Math.round(u*=r),h(s))};s()}return t(m,"mousedown",function(e){for(var t=e.target;t;t=t.parentElement)!e.defaultPrevented&&t.hasAttribute(m)&&(e.preventDefault(),f.pageX=e.pageX,f.pageY=e.pageY,f.scrollX=t.scrollLeft,f.scrollY=t.scrollTop,f.animate=f.diffX=f.diffY=0,f.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))}),t(m,"resize",o(s,500)),t(m,"scroll",o(s,500),!0),t(m,"wheel",function(){return f.animate=!1},{passive:!0}),t(m,"load",s),t(m,"click",function(e){for(var t=e.target;t;t=t.parentElement){var o=t.getAttribute(i);if(o)return a(document.getElementById(o),t.value)}}),a});
 //# sourceMappingURL=core-scroll.min.js.map

jsx/index.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreScroll=e(t.React)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e="undefined"!=typeof window,o=(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 n(t,e,n,r){(void 0===r&&(r=!1),"undefined"==typeof window||window[t=t+"-"+e])||(o||"object"!=typeof r||(r=Boolean(r.capture)),("resize"===e||"load"===e?window:document).addEventListener(window[t]=e,n,r))}var r="prevent_recursive_dispatch_maximum_callstack";function i(t,e){var o,n;return function(){for(var r=[],i=arguments.length;i--;)r[i]=arguments[i];var l=this,c=Date.now();o&&c<o+e?(clearTimeout(n),n=setTimeout(function(){o=c,t.apply(l,r)},e)):(o=c,t.apply(l,r))}}function l(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 c={},a="data-core-scroll",s="data-@nrk/core-scroll-1.1.5".replace(/\W+/g,"-"),u={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},f=.8,d=20,p=e&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,h=!e||window.requestAnimationFrame||window.setTimeout;function m(t,e){void 0===e&&(e="");var o="object"==typeof e?e:{move:e},n="x"in o||"y"in o||o.move;return l(t).map(function(t){if(!t.hasAttribute(s)){t.setAttribute(s,o.friction||""),t.style.overflow="scroll",t.style.willChange="scroll-position",t.style.webkitOverflowScrolling="touch";var e=t.offsetWidth-t.clientWidth+1,r=t.offsetHeight-t.clientHeight+1;t.style.maxHeight="calc(100% + "+r+"px)",t.style.marginRight="-"+e+"px",t.style.marginBottom="-"+r+"px",y(t)}return n&&w(t,function(t,e){var o=e.x,n=e.y,r=e.move,i={x:o,y:n,move:u[r]};"number"!=typeof i.x&&(i.x=t.scrollLeft);"number"!=typeof i.y&&(i.y=t.scrollTop);if(i.move){var c=i.move.x?"x":"y",a=i.move.x?"left":"top",s=t.getBoundingClientRect(),f=s[a]-t[i.move.x?"scrollLeft":"scrollTop"],d=s[a]+s[i.move.x?"width":"height"]*i.move[c];l(t.children).every(function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-"+a];return i[c]=e[a]-parseInt(o,10)-f,e[i.move.prop||r]<d})}return i}(t,o)),t})}function v(t){c.preventLink=!0,c.diffX=c.pageX-(c.pageX=t.pageX),c.diffY=c.pageY-(c.pageY=t.pageY),c.target.scrollLeft=c.scrollX+=c.diffX,c.target.scrollTop=c.scrollY+=c.diffY}function g(t){var e=c.diffX||c.diffY;document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",g),document.body.style.cursor="",y(c.target),e&&w(c.target,{x:c.scrollX+c.diffX*d,y:c.scrollY+c.diffY*d}),c.target=null}function y(t){var e=t.target||t;if("resize"===t.type||"load"===t.type)return l("["+s+"]").forEach(y);if(e.hasAttribute&&e.hasAttribute(s)){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":"";!function(t,e,o){void 0===o&&(o={});var n,i=""+r+e;if(t[i])return!0;t[i]=!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 l=t.dispatchEvent(n);t[i]=null}(e,"scroll.change",o),t.type||(e.style.cursor="-webkit-"+n,e.style.cursor=n),e.id&&l("["+a+"]").forEach(function(t){t.getAttribute(a)===e.id&&(t.disabled=!o[t.value])})}}function w(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(s))||f,i=c.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)),u=p?1:l-t.scrollLeft,d=p?1:a-t.scrollTop,m=function(){c.animate===i&&(Math.round(u)||Math.round(d))&&(t.scrollLeft=l-Math.round(u*=r),t.scrollTop=a-Math.round(d*=r),h(m))};m()}n(s,"mousedown",function(t){for(var e=t.target;e;e=e.parentElement)!t.defaultPrevented&&e.hasAttribute(s)&&(t.preventDefault(),c.pageX=t.pageX,c.pageY=t.pageY,c.scrollX=e.scrollLeft,c.scrollY=e.scrollTop,c.animate=c.diffX=c.diffY=0,c.target=e,document.body.style.cursor=e.style.cursor="-webkit-grabbing",document.body.style.cursor=e.style.cursor="grabbing",document.addEventListener("mousemove",v),document.addEventListener("mouseup",g))}),n(s,"resize",i(y,500)),n(s,"scroll",i(y,500),!0),n(s,"wheel",function(){return c.animate=!1},{passive:!0}),n(s,"load",y),n(s,"click",function(t){c.preventLink&&(c.preventLink=t.preventDefault());for(var e=t.target;e;e=e.parentElement){var o=e.getAttribute(a);if(o)return m(document.getElementById(o),e.value)}});var b={onChange:null,friction:null};return function(e){function o(t){var o=this;e.call(this,t),this.onScroll=this.onScroll.bind(this),this.scrollTo=function(t){return m(o.el,t)},this.scrollUp=function(){return m(o.el,"up")},this.scrollDown=function(){return m(o.el,"down")},this.scrollLeft=function(){return m(o.el,"left")},this.scrollRight=function(){return m(o.el,"right")}}return e&&(o.__proto__=e),o.prototype=Object.create(e&&e.prototype),o.prototype.constructor=o,o.prototype.componentDidMount=function(){this.el.addEventListener("scroll.change",this.onScroll),m(this.el,{friction:this.props.friction})},o.prototype.componentDidUpdate=function(){m(this.el)},o.prototype.componentWillUnmount=function(){this.el.removeEventListener("scroll.change",this.onScroll)},o.prototype.onScroll=function(t){var e=t.detail;this.props.onChange&&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})},o.prototype.render=function(){var e=this,o=function(t,e,o){return void 0===o&&(o={}),Object.keys(t).reduce(function(o,n){return e.hasOwnProperty(n)||(o[n]=t[n]),o},o)}(this.props,b,{ref:function(t){return e.el=t}});return t.createElement("div",o,this.props.children)},o}(t.Component)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.CoreScroll=e(t.React)}(this,function(l){"use strict";l=l&&l.hasOwnProperty("default")?l.default:l;var t="undefined"!=typeof window,r=(t&&/(android)/i.test(navigator.userAgent),t&&/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 e(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 o(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 f(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={},i="data-core-scroll",p="data-@nrk/core-scroll-1.1.6".replace(/\W+/g,"-"),h={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},m=.8,n=20,v=t&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,g=!t||window.requestAnimationFrame||window.setTimeout;function s(t,e){void 0===e&&(e="");var n="object"==typeof e?e:{move:e},r="x"in n||"y"in n||n.move;return f(t).map(function(t){if(!t.hasAttribute(p)){t.setAttribute(p,n.friction||""),t.style.overflow="scroll",t.style.willChange="scroll-position",t.style.webkitOverflowScrolling="touch";var e=t.offsetWidth-t.clientWidth+1,o=t.offsetHeight-t.clientHeight+1;t.style.maxHeight="calc(100% + "+o+"px)",t.style.marginRight="-"+e+"px",t.style.marginBottom="-"+o+"px",y(t)}return r&&w(t,function(t,e){var o=e.x,n=e.y,r=e.move,i={x:o,y:n,move:h[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",s=t.getBoundingClientRect(),a=s[c]-t[i.move.x?"scrollLeft":"scrollTop"],u=s[c]+s[i.move.x?"width":"height"]*i.move[l];f(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)-a,e[i.move.prop||r]<u})}return i}(t,n)),t})}function a(t){d.diffX=d.pageX-(d.pageX=t.pageX),d.diffY=d.pageY-(d.pageY=t.pageY),d.target.scrollLeft=d.scrollX+=d.diffX,d.target.scrollTop=d.scrollY+=d.diffY,d.target.style.pointerEvents="none"}function u(t){var e=d.diffX||d.diffY;document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",u),document.body.style.cursor="",y(d.target),e&&w(d.target,{x:d.scrollX+d.diffX*n,y:d.scrollY+d.diffY*n}),d.target.style.pointerEvents="",d.target=null}function y(t){var e=t.target||t;if("resize"===t.type||"load"===t.type)return f("["+p+"]").forEach(y);if(e.hasAttribute&&e.hasAttribute(p)){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":"";!function(t,e,o){void 0===o&&(o={});var n,r=""+c+e;if(t[r])return;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);t[r]=null}(e,"scroll.change",o),t.type||(e.style.cursor="-webkit-"+n,e.style.cursor=n),e.id&&f("["+i+"]").forEach(function(t){t.getAttribute(i)===e.id&&(t.disabled=!o[t.value])})}}function w(t,e){var o=e.x,n=e.y,r=Math.min(.99,t.getAttribute(p))||m,i=d.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)),s=v?1:l-t.scrollLeft,a=v?1:c-t.scrollTop,u=function(){d.animate===i&&(Math.round(s)||Math.round(a))&&(t.scrollLeft=l-Math.round(s*=r),t.scrollTop=c-Math.round(a*=r),g(u))};u()}return e(p,"mousedown",function(t){for(var e=t.target;e;e=e.parentElement)!t.defaultPrevented&&e.hasAttribute(p)&&(t.preventDefault(),d.pageX=t.pageX,d.pageY=t.pageY,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",a),document.addEventListener("mouseup",u))}),e(p,"resize",o(y,500)),e(p,"scroll",o(y,500),!0),e(p,"wheel",function(){return d.animate=!1},{passive:!0}),e(p,"load",y),e(p,"click",function(t){for(var e=t.target;e;e=e.parentElement){var o=e.getAttribute(i);if(o)return s(document.getElementById(o),e.value)}}),function(o){function i(t){var e=this;o.call(this,t),this.onScroll=this.onScroll.bind(this),this.scrollTo=function(t){return s(e.el,t)},this.scrollUp=function(){return s(e.el,"up")},this.scrollDown=function(){return s(e.el,"down")},this.scrollLeft=function(){return s(e.el,"left")},this.scrollRight=function(){return s(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(){this.el.addEventListener("scroll.change",this.onScroll),s(this.el,{friction:this.props.friction})},i.prototype.componentDidUpdate=function(){s(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.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)});
 //# sourceMappingURL=index.js.map

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-scroll.min.js",

New alerts

License Policy Violation

License

This 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

License

This 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

66122

increased by6.54%

Lines of code

218

increased by0.93%

No dependency changes