react-scroll-box - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

package.json

 {
   "name": "react-scroll-box",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "author": "Savva Mikhalevski",
-  "description": "Powerful, cross-browser and cross-platform React ScrollBox component",
+  "description": "Charged cross-browser and cross-platform scrollable container implementation with no external dependencies but React 0.13+",
   "license": "MIT",
@@ -7,0 +7,0 @@ "repository": {

README.md

 # React Scroll Box
 
-[![npm version](https://img.shields.io/npm/v/react-scroll-box.svg?style=flat)](https://www.npmjs.com/package/react-scroll-box)
+[![npm version](https://badge.fury.io/js/react-scroll-box.svg)](https://www.npmjs.com/package/react-scroll-box)
 
@@ -13,4 +13,15 @@ Charged cross-browser and cross-platform scrollable container implementation with no external dependencies but React 0.13+.
 
-[**API and Live Demo**](http://smikhalevski.github.io/react-scroll-box/)
+[**API Playground and Live Demo**](http://smikhalevski.github.io/react-scroll-box/)
 
+## Contents
+
+1. [Motivation](#motivation)
+2. [`ScrollBox`](#scrollbox)
+  1. [Attributes](#attributes)
+3. [`GenericScrollBox`](#genericscrollbox)
+  1. [Layout](#layout)
+  2. [Properties](#properties)
+  3. [Methods](#methods)
+4. [License](#license)
+
 ## Motivation
@@ -34,8 +45,6 @@
 
-## Components
+## `ScrollBox`
 
-### `ScrollBox`
+In most cases you should use `ScrollBox` to create a scrollable area, but in cause you need more control over viewport use [`GenericScrollBox`](#genericscrollbox).
 
-In most cases you should use `ScrollBox` to create a scrollable area, but in cause you need more control over viewport use `GenericScrollBox`.
-
 By default, `ScrollBox` has no decoration and behaves as a regular `div` container. Specify height for scroll box in your styles, otherwise container would contract to zero height.
@@ -53,42 +62,76 @@
 
-#### Attributes
+### Attributes
 
-Name | Type | Default | Description
---- | --- | --- | --- 
-<a name="generic-scroll-box-native-scroll"></a>`nativeScroll` | boolean | | Use native scrollbars. By default, this flag is set to `true` on mobile platforms and `false` on desktops. Paltforms are distinguished by presence of `window.orientation`. If you are developing isomorphic application and want to render scroll box on server side then you shoud explicitly specify this property.
-<a name="generic-scroll-box-axes"></a>`axes` | [`ScrollAxes`](#scroll-axes) | [`ScrollAxes.XY`](#scroll-axes-xy) | Scroll axes which are managed by the scroll box. If scroll axis is not listed then corresponding scroll offset would be constantly equal to 0 and any scrolling requests via API or from UI for that axes would be ignored.
-`hoverProximity` | integer | 50 | Maximum distance in pixels between cursor and scroll track edge when track is considered to be hovered. Useful when you want to have thin scrollbars and increase theit thickness when cursor aproaches them so user don't have to aim precisely. Set to 0 to disable hover proximity detection.
-`disabled` | boolean | `false` | Disable scroll box.
-`outset` | boolean | `false` | Display scrollbars outside of scrollable area. Outset scrllbars don't require additional space and don't affect surrounding layout. On mobile devices when native scrollbars are used this property has no effect because scrollbars have zero width and thus don't crop any space from viewport.
-`scrollMinX`<br/>`scrollMinY` | integer | 2 | Minimum difference in pixels in content and viewport sizes to enable scrolling.
-`captureKeyboard` | boolean | `true` | Use keyboard for scrolling when scroll box viewport or its nested content is focused. Keyboard is not captured for `<input type="text"/>` and `<textarea/>` elements placed inside scroll box. <kbd>PgUp</kbd> <kbd>PgDown</kbd> <kbd>Home</kbd> <kbd>End</kbd> and arrow keys are captured. You can page-scroll alternate axis with <kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>PgUp</kbd> and <kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>PgDown</kbd> shortcuts.
-`keyboardStepX`<br/>`keyboardStepY` | integer | 30 | Distance in pixels to scroll by when arrow keys are pressed.
-`keyboardScrollDuration` | integer | 200 | Keyboard smooth scrolling animation duration in milliseconds. Set to 0 to disable smooth keyboard scrolling.
-`fastTrack` | [`FastTrack`](#fast-track) | [`FastTrack.GOTO`](#fast-track-goto) | Defines expected behavior when user clicks on scroll track. 
-`fastTrackDuration` | integer | 500 | Animation duration of fast track smooth scroll.
-`captureHandleDrag` | boolean | `true` | Allow user to drag scroll handles. If handle drag is disabled along with enabled fast track then clicking on a handle would cause fast tracking.
-`captureWheel` | boolean | `true` | Use mouse wheel for scrolling. You can scroll alternate axis with <kbd>Shift</kbd> key is pressed.
-`wheelStepX`<br/>`wheelStepY` | integer | 30 | Wheel scrolling distance in pixels. Scroll box heavily relies on native wheel implementation, so this speed can vary a bit depending on browser, platform and scrolling device (trackpad or mouse wheel).
-`propagateWheelScroll` | boolean | `false` | Propagate wheel scroll event to parent if scrolling reached maximum or minimum value.
-`swapWheelAxes` | boolean | `false` | Swap wheel scrolling axes.
-`wheelScrollDuration` | integer | 100 | Wheel smooth scrolling animation duration. Set to 0 to disable smooth wheel scrolling.
-`className` | string | | Style class name to use.
-`style` | object | | Style to apply to root element of scroll box.
-`defaultEasing` | function | | Easing to use when none is provided.
-`onViewportScroll` | function | | Scroll event callback.
+#### <code><i>boolean</i> <a name="genericscrollbox-nativescroll"></a> nativeScroll</code>
+Use native scrollbars. By default, this flag is set to `true` on mobile platforms and `false` on desktops. Paltforms are distinguished by presence of `window.orientation`.
 
-```javascript
-function defaultEasing(percent, elapsed, min, max, duration) {
-  return min + (max - min) * percent;
-}
-```
+#### <code><i>[ScrollAxes](#scroll-axes)</i> <a name="genericscrollbox-axes"></a> axes = [ScrollAxes.XY](#scroll-axes-xy)</code>
+Scroll axes which are managed by the scroll box. If scroll axis is not listed then corresponding scroll offset would be constantly equal to 0 and any scrolling requests via API or from UI for that axes would be ignored.
 
-```javascript
-function onViewportScroll(scrollBox) {
-  console.log(scrollBox.scrollX, scrollBox.scrollY);
-}
-```
+#### <code><i>integer</i> hoverProximity = 50</code>
+Maximum distance in pixels between cursor and scroll track edge when track is considered to be hovered. Useful when you want to have thin scrollbars and increase theit thickness when cursor aproaches them so user don't have to aim precisely. Set to 0 to disable hover proximity detection.
 
-### `GenericScrollBox`
+#### <code><i>boolean</i> disabled = false</code>
+Disable scroll box.
 
+#### <code><i>boolean</i> outset = false</code>
+Display scrollbars outside of scrollable area. Outset scrllbars don't require additional space and don't affect surrounding layout. On mobile devices when native scrollbars are used this property has no effect because scrollbars have zero width and thus don't crop any space from viewport.
+
+#### <code><i>integer</i> scrollMinX = 2</code> <code>scrollMinY = 2</code>
+Minimum difference in pixels in content and viewport sizes to enable scrolling.
+
+#### <code><i>boolean</i> captureKeyboard = true</code>
+Use keyboard for scrolling when scroll box viewport or its nested content is focused. Keyboard is not captured for `<input type="text"/>` and `<textarea/>` elements placed inside scroll box. <kbd>PgUp</kbd> <kbd>PgDown</kbd> <kbd>Home</kbd> <kbd>End</kbd> and arrow keys are captured. You can page-scroll alternate axis with <kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>PgUp</kbd> and <kbd>Shift</kbd>&nbsp;+&nbsp;<kbd>PgDown</kbd> shortcuts.
+
+#### <code><i>integer</i> keyboardStepX = 30</code> <code>keyboardStepY = 30</code>
+Distance in pixels to scroll by when arrow keys are pressed.
+
+#### <code><i>integer</i> keyboardScrollDuration = 200</code>
+Keyboard smooth scrolling animation duration in milliseconds. Set to 0 to disable smooth keyboard scrolling.
+
+#### <code><i>[FastTrack](#fast-track)</i> fastTrack = [FastTrack.GOTO](#fast-track-goto)</code>
+Defines expected behavior when user clicks on scroll track. 
+
+#### <code><i>integer</i> fastTrackDuration = 500</code>
+Animation duration of fast track smooth scroll.
+
+#### <code><i>boolean</i> captureHandleDrag = true</code>
+Allow user to drag scroll handles. If handle drag is disabled along with enabled fast track then clicking on a handle would cause fast tracking.
+
+#### <code><i>boolean</i> captureWheel = true</code>
+Use mouse wheel for scrolling. You can scroll alternate axis with <kbd>Shift</kbd> key is pressed.
+
+#### <code><i>integer</i> wheelStepX = 30</code> <code>wheelStepY = 30</code>
+Wheel scrolling distance in pixels. Scroll box heavily relies on native wheel implementation, so this speed can vary a bit depending on browser, platform and scrolling device (trackpad or mouse wheel).
+
+#### <code><i>boolean</i> propagateWheelScroll = false</code>
+Propagate wheel scroll event to parent if scrolling reached maximum or minimum value.
+
+#### <code><i>boolean</i> swapWheelAxes = false</code>
+Swap wheel scrolling axes.
+
+#### <code><i>integer</i> wheelScrollDuration = 100</code>
+Wheel smooth scrolling animation duration. Set to 0 to disable smooth wheel scrolling.
+
+#### <code><i>string</i> className = "scroll-box--wrapped"</code>
+Style class name to use.
+
+#### <code><i>object</i> style</code>
+Style to apply to root element of scroll box.
+
+#### <a name="defaulteasing"></a><code><i>function</i> defaultEasing (percent, elapsed, min, max, duration)</code>
+Easing to use when none is provided.
+
+- **<code><i>float</i> percent</code>** Scroll percentage in range [0, 1].
+- **<code><i>integer</i> elapsed</code>** Number of milliseconds passed since animation began.
+- **<code><i>integer</i> min</code> <code>max</code>** Output value range.
+- **<code><i>integer</i> duration</code>** Animation duration in milliseconds.
+
+#### <code><i>function</i> onViewportScroll (genericScrollBox)</code>
+Scroll event callback.
+
+- **<code><i>[GenericScrollBox](#genericscrollbox)</i> genericScrollBox</code>** Reference to [`GenericScrollBox`](#genericscrollbox) that is being scrolled.
+
+## `GenericScrollBox`
+
 Expects viewport element at its only child. Has all the same attributes as `ScrollBox`.
@@ -108,70 +151,89 @@
 
-Produced layout:
+### Layout
+
 ```jsx
-<div class="
-    scroll-box
-    scroll-box--disabled
-    scroll-box--native
-    scroll-box--outset
-    scroll-box--has-axis-x
-    scroll-box--has-axis-y
-    scroll-box--show-axis-x
-    scroll-box--show-axis-y">
-  <div class="
-      scroll-box__track
-      scroll-box__track--x
-      scroll-box__track--hover
-      scroll-box__track--dragged">
-    <div class="
-        scroll-box__handle
-        scroll-box__handle--x">
-    </div>
+<div class="scroll-box scroll-box--wrapped">
+  <div class="scroll-box__track scroll-box__track--x">
+    <div class="scroll-box__handle scroll-box__handle--x"></div>
   </div>
-  <div class="
-      scroll-box__track
-      scroll-box__track--y
-      scroll-box__track--hover
-      scroll-box__track--dragged">
-    <div class="
-        scroll-box__handle
-        scroll-box__handle--y">
-    </div>
+  <div class="scroll-box__track scroll-box__track--y">
+    <div class="scroll-box__handle scroll-box__handle--y"></div>
   </div>
-  <div class="scroll-box__viewport"></div>
+  <div class="scroll-box__viewport">
+    Place any content here.
+  </div>
 </div>
 ```
 
-#### Properties
+Class Name | Description
+--- | ---
+`scroll-box--wrapped` | Causes scroll box to look like an actual scroll box. If omitted, then scrollbox behaves like a simple `div` element.
+`scroll-box--disabled` | Scroll box is disabled. By default, hides scrollbars and prevents scrolling.
+`scroll-box--native` | Display native scroll bars.
+`scroll-box--outset` | Show scroll bars ouside of scrollable area.
+`scroll-box--has-axis-x` | Scroll box can be scrolled horizintally if content is wider than viewport.
+`scroll-box--has-axis-y` | Scroll box can be scrolled vertically if content is taller than viewport.
+`scroll-box--show-axis-x` | Content is wider than viewport.
+`scroll-box--show-axis-y` | Content is taller than viewport.
+`scroll-box__track--hover` | Tack is hovered.
+<code>scroll&#8209;box__track&#8209;&#8209;dragged</code> | Track handle is dragged.
 
-Name | Type | Description
---- | --- | --- 
-`handleX` `handleY` | `HTMLDivElement` | Handle elements. Both are always available, even if [`axes`](#generic-scroll-box-axes) exclude one or both of them.
-`trackX` `trackY` | `HTMLDivElement` | Track elements. Both are always available.
-`viewport` | `HTMLElement` | Viewport element provided to `GenericScrollBox`.
-`targetX` `targetY` | integer | Scroll position in pixels that was last requested.
-`previousX` `previousY` | integer | Previously requested scroll position.
-`scrollX` `scrollX` | integer | Actual scroll position that user observes. This changes repeatedly during scroll animation, when no animation is in proggress equals to `targetX` and `targetY` respectively.
-`scrollMaxX`&nbsp;`scrollMaxY` | integer | Maximum values for horizontal and vertical content scroll positions. See [MDN `window.scrollMaxX`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollMaxX) for more info.
-`trackMaxX` `trackMaxY` | integer | Maximum values for horizontal and vertical track scroll positions. When [`nativeScroll`](#generic-scroll-box-native-scroll) is set to `true` these are constanly equal to 0.
-`exposesX` `exposesY` | boolean | Does scroll box require actual presence of horizontal or vertical scroll bars. If set to `true`, then axis is permitted via `props.axes` and corresponding `scrollMax` is greater or equal to `scrollMin`.
+Modifier `.scroll-box--wrapped-on-large-screens` would conditionally wrap scroll box on screens larger than 360 px. Content would be scrolled along with page itself on smaller screens.
 
-#### Methods
+```less
+@media (min-width: 360px) {
+  .scroll-box--wrapped-on-large-screens {
+    .scroll-box-wrap();
+  }
+}
+```
 
-`scrollBy(dx = 0, dy = 0, duration = 0, easing = defaultEasing, silent = false)`
+### Properties
 
+#### <code><i>HTMLDivElement</i> handleX</code> <code>handleY</code>
+Handle elements. Both are always available, even if [`axes`](#genericscrollbox-axes) exclude one or both of them.
+
+#### <code><i>HTMLDivElement</i> trackX</code> <code>trackY</code>
+Track elements. Both are always available.
+
+#### <code><i>HTMLElement</i> viewport</code>
+Viewport element provided to `GenericScrollBox`.
+
+#### <code><i>integer</i> targetX</code> <code>targetY</code>
+Scroll position in pixels that was last requested.
+
+#### <code><i>integer</i> previousX</code> <code>previousY</code>
+Previously requested scroll position.
+
+#### <code><i>integer</i> scrollX</code> <code>scrollX</code>
+Actual scroll position that user observes. This changes repeatedly during scroll animation, when no animation is in proggress equals to `targetX` and `targetY` respectively.
+
+#### <code><i>integer</i> scrollMaxX</code> <code>scrollMaxY</code> 
+Maximum values for horizontal and vertical content scroll positions. See [MDN `window.scrollMaxX`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollMaxX) for more info.
+
+#### <code><i>integer</i> trackMaxX</code> <code>trackMaxY</code>
+Maximum values for horizontal and vertical track scroll positions. When [`nativeScroll`](#genericscrollbox-nativescroll) is set to `true` these are constanly equal to 0.
+
+#### <code><i>boolean</i> exposesX</code> <code>exposesY</code>
+Does scroll box require actual presence of horizontal or vertical scroll bars. If set to `true`, then axis is permitted via `props.axes` and corresponding `scrollMax` is greater or equal to `scrollMin`.
+
+### Methods
+
+#### <code><i>void</i> scrollBy(dx, dy, duration, easing, silent)</code>
+
 Scroll by the given amount of pixels.
 
-- **`dx` `dy`** Amount of pixels to scroll by. Positive coordinates will scroll to the right and down the content. Negative values will scroll to the left and up the content. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.
-- **`duration`** Duration of scrolling animation.
-- **`easing`** Scroll easing function.
-- **`silent`** Set to `true` to prevent invocation of onViewportScroll until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.
+- **<code><i>integer</i> dx = 0</code> <code>dy = 0</code>** Amount of pixels to scroll by. Positive coordinates will scroll to the right and down the content. Negative values will scroll to the left and up the content. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.
+- **<code><i>integer</i> duration = 0</code>** Duration of scrolling animation.
+- **<code><i>function</i> easing = <a href="#defaulteasing">defaultEasing</a></code>** Scroll easing function.
+- **<code><i>boolean</i> silent = false</code>** Set to `true` to prevent invocation of `onViewportScroll` until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.
 
-`scrollTo(x = undefined, y = undefined, duration = 0, easing = defaultEasing, silent = false)`
+#### <code><i>void</i> scrollTo(x, y, duration, easing, silent)</code>
 
 Scroll to arbitrary content position.
 
-- **`x` `y`** Position to scroll to. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.
-- **`duration`** Duration of scrolling animation.
-- **`easing`** Scroll easing function.
-- **`silent`** Set to `true` to prevent invocation of onViewportScroll until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.
+- **<code><i>integer</i> x = undefined</code> <code>y = undefined</code>** Position to scroll to. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.
+- **<code><i>integer</i> duration = 0</code>** Duration of scrolling animation.
+- **<code><i>function</i> easing = <a href="#defaulteasing">defaultEasing</a></code>** Scroll easing function.
+- **<code><i>boolean</i> silent = false</code>** Set to `true` to prevent invocation of `onViewportScroll` until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.
 
@@ -178,0 +240,0 @@ ## License

src/main/GenericScrollBox.js

@@ -21,3 +21,2 @@ import React from 'react';
   static defaultProps = {
-    nativeScroll: typeof window == 'undefined' || 'orientation' in window,
     className: 'scroll-box--wrapped',
@@ -251,5 +250,3 @@ axes: ScrollAxes.XY,
       }
-      // Viewport did not change its scroll parameters, so invocation of `onViewportScroll` and
-      // further altering geometry of handles and tracks is not required.
-      return;
+      // TODO Viewport did not change its scroll parameters, so invocation of `onViewportScroll` and further altering geometry of handles and tracks may not be required.
     }
@@ -554,3 +551,12 @@ this.scrollX = x;
     this.el = findDOMNode(this);
-    this.viewport = this.el.lastChild;
+    this.viewport = this.el.firstChild;
+
+    const {nativeScroll} = this.props;
+    if (nativeScroll == null) {
+      if (typeof window != 'undefined' && 'orientation' in window) {
+        this.el.classList.add('scroll-box--native');
+      }
+    } else {
+      this.el.classList.toggle('scroll-box--native', nativeScroll);
+    }
   }
@@ -588,3 +594,3 @@
   render() {
-    const {axes, trackXChildren, trackYChildren, handleXChildren, handleYChildren, disabled, nativeScroll, outset, className, children, style} = this.props;
+    const {axes, trackXChildren, trackYChildren, handleXChildren, handleYChildren, disabled, outset, className, children, style} = this.props;
     let classNames = ['scroll-box'];
@@ -597,5 +603,2 @@ if (className) {
     }
-    if (nativeScroll) {
-      classNames.push('scroll-box--native');
-    }
     if (outset) {
@@ -620,2 +623,3 @@ classNames.push('scroll-box--outset');
            tabIndex="-1">
+        {React.Children.only(children)}
         <div className="scroll-box__track scroll-box__track--x"
@@ -641,3 +645,2 @@ onMouseDown={this.onFastTrackX}
         </div>
-        {React.Children.only(children)}
       </div>
@@ -644,0 +647,0 @@ );

src/main/index.less

@@ -115,3 +115,2 @@ @scroll-box:                scroll-box; // Namespace class
     visibility: hidden;
-    z-index: 20;
     transition-property: background, width, height;
@@ -118,0 +117,0 @@ cursor: @scroll-cursor-track;

target/out/index.css

@@ -1,1 +0,1 @@
-.scroll-box{position:relative}.scroll-box:focus{outline:none}.scroll-box--disabled>.scroll-box__viewport{overflow:hidden!important}.scroll-box--disabled>.scroll-box__track{visibility:hidden!important}.scroll-box--wrapped>.scroll-box__viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;padding:inherit;border-radius:inherit}.scroll-box--wrapped>.scroll-box__track{display:block}.scroll-box--native.scroll-box--has-axis-y.scroll-box--show-axis-y>.scroll-box__viewport{overflow-y:auto}.scroll-box--native.scroll-box--has-axis-x.scroll-box--show-axis-x>.scroll-box__viewport{overflow-x:auto}.scroll-box--native>.scroll-box__viewport{-webkit-overflow-scrolling:touch}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x>.scroll-box__track--x,.scroll-box:not(.scroll-box--native).scroll-box--has-axis-y.scroll-box--show-axis-y>.scroll-box__track--y{visibility:visible}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x.scroll-box--has-axis-y.scroll-box--show-axis-y:not(.scroll-box--outset)>.scroll-box__track--y{margin-bottom:14px}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x.scroll-box--has-axis-y.scroll-box--show-axis-y:not(.scroll-box--outset)>.scroll-box__track--x{margin-right:14px}.scroll-box__handle,.scroll-box__track{position:absolute;border-radius:10.2px;transition:.2s ease-in-out}.scroll-box__handle{transition-property:background;cursor:default}.scroll-box__handle--y{width:100%;min-height:30px;max-height:100%;top:0}.scroll-box__handle--x{height:100%;min-width:30px;max-width:100%;left:0}.scroll-box__track{display:none;visibility:hidden;z-index:20;transition-property:background,width,height;cursor:default}.scroll-box__track--y{top:0;bottom:0;right:0;width:6px;margin:4px 4px 4px 0}.scroll-box__track--y.scroll-box__track--dragged,.scroll-box__track--y.scroll-box__track--hover{width:10.2px}.scroll-box--outset>.scroll-box__track--y{left:100%;margin-left:4px}.scroll-box__track--x{left:0;right:0;bottom:0;height:6px;margin:0 4px 4px}.scroll-box__track--x.scroll-box__track--dragged,.scroll-box__track--x.scroll-box__track--hover{height:10.2px}.scroll-box--outset>.scroll-box__track--x{top:100%;margin-top:4px}.scroll-box>.scroll-box__track{background:transparent}.scroll-box>.scroll-box__track>.scroll-box__handle{background:rgba(0,0,0,.4)}.scroll-box>.scroll-box__track--dragged,.scroll-box>.scroll-box__track--hover{background:rgba(0,0,0,.2)}.scroll-box>.scroll-box__track--dragged>.scroll-box__handle,.scroll-box>.scroll-box__track--hover>.scroll-box__handle{background:rgba(0,0,0,.6)}
+.scroll-box{position:relative}.scroll-box:focus{outline:none}.scroll-box--disabled>.scroll-box__viewport{overflow:hidden!important}.scroll-box--disabled>.scroll-box__track{visibility:hidden!important}.scroll-box--wrapped>.scroll-box__viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;padding:inherit;border-radius:inherit}.scroll-box--wrapped>.scroll-box__track{display:block}.scroll-box--native.scroll-box--has-axis-y.scroll-box--show-axis-y>.scroll-box__viewport{overflow-y:auto}.scroll-box--native.scroll-box--has-axis-x.scroll-box--show-axis-x>.scroll-box__viewport{overflow-x:auto}.scroll-box--native>.scroll-box__viewport{-webkit-overflow-scrolling:touch}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x>.scroll-box__track--x,.scroll-box:not(.scroll-box--native).scroll-box--has-axis-y.scroll-box--show-axis-y>.scroll-box__track--y{visibility:visible}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x.scroll-box--has-axis-y.scroll-box--show-axis-y:not(.scroll-box--outset)>.scroll-box__track--y{margin-bottom:14px}.scroll-box:not(.scroll-box--native).scroll-box--has-axis-x.scroll-box--show-axis-x.scroll-box--has-axis-y.scroll-box--show-axis-y:not(.scroll-box--outset)>.scroll-box__track--x{margin-right:14px}.scroll-box__handle,.scroll-box__track{position:absolute;border-radius:10.2px;transition:.2s ease-in-out}.scroll-box__handle{transition-property:background;cursor:default}.scroll-box__handle--y{width:100%;min-height:30px;max-height:100%;top:0}.scroll-box__handle--x{height:100%;min-width:30px;max-width:100%;left:0}.scroll-box__track{display:none;visibility:hidden;transition-property:background,width,height;cursor:default}.scroll-box__track--y{top:0;bottom:0;right:0;width:6px;margin:4px 4px 4px 0}.scroll-box__track--y.scroll-box__track--dragged,.scroll-box__track--y.scroll-box__track--hover{width:10.2px}.scroll-box--outset>.scroll-box__track--y{left:100%;margin-left:4px}.scroll-box__track--x{left:0;right:0;bottom:0;height:6px;margin:0 4px 4px}.scroll-box__track--x.scroll-box__track--dragged,.scroll-box__track--x.scroll-box__track--hover{height:10.2px}.scroll-box--outset>.scroll-box__track--x{top:100%;margin-top:4px}.scroll-box>.scroll-box__track{background:transparent}.scroll-box>.scroll-box__track>.scroll-box__handle{background:rgba(0,0,0,.4)}.scroll-box>.scroll-box__track--dragged,.scroll-box>.scroll-box__track--hover{background:rgba(0,0,0,.2)}.scroll-box>.scroll-box__track--dragged>.scroll-box__handle,.scroll-box>.scroll-box__track--hover>.scroll-box__handle{background:rgba(0,0,0,.6)}

target/out/index.js

@@ -1,1 +0,1 @@
-!function(e,t){for(var o in t)e[o]=t[o]}(exports,function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){o(4),e.exports=o(5)},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.GenericScrollBox=t.FastTrack=t.ScrollAxes=void 0;var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),i=o(2),c=r(i),u=o(6),h=c["default"].PropTypes,f=h.number,p=h.bool,d=h.func,v=h.oneOf,x=h.any,y=t.ScrollAxes={X:"x",Y:"y",XY:"xy"},g=t.FastTrack={PAGING:"paging",GOTO:"goto",OFF:null},b=t.GenericScrollBox=function(e){function t(){var e,o,r,s;n(this,t);for(var l=arguments.length,i=Array(l),c=0;l>c;c++)i[c]=arguments[c];return o=r=a(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),r.handleX=null,r.handleY=null,r.trackX=null,r.trackY=null,r.viewport=null,r.targetX=0,r.targetY=0,r.previousX=0,r.previousY=0,r.scrollX=0,r.scrollY=0,r.scrollMaxX=0,r.scrollMaxY=0,r.trackMaxX=0,r.trackMaxY=0,r.exposesX=!1,r.exposesY=!1,r._forceSyncId=0,r._easingBeginTimestamp=0,r._easingDuration=0,r._easing=null,r._silent=!1,r._touchOffsetX=0,r._touchOffsetY=0,r._touchStart=null,r._touchEnd=null,r.onTouchStart=function(e){if(!(r.props.nativeScroll||r.props.disabled||e.touches.length>1||e.isDefaultPrevented())&&(r.exposesX||r.exposesY)){e.stopPropagation();var t=e.touches[0],o=r.viewport.scrollLeft,n=r.viewport.scrollTop;r._touchOffsetX=o+t.screenX,r._touchOffsetY=n+t.screenY,r._touchStart={x:o,y:n}}},r.onTouchMove=function(e){if(r._touchStart){e.preventDefault();var t=e.touches[0],o=r._touchOffsetX-t.screenX,n=r._touchOffsetY-t.screenY;if(r._touchEnd){var a=r._touchStart;r._touchStart=r._touchEnd,r._touchEnd=a,a.x=o,a.y=n}else r._touchEnd={x:o,y:n};r.scrollTo(o,n,0)}},r.onTouchEnd=function(e){if(r._touchEnd){var t=r,o=t._touchStart,n=t._touchEnd,a=Date.now()-r._easingBeginTimestamp,s=o.x-n.x,l=o.y-n.y,i=Math.sqrt(s*s+l*l),c=i/a*100;r._touchStart=null,r._touchEnd=null,r.scrollTo(n.x-c*s/i,n.y-c*l/i,c)}},r.onWheel=function(e){var t=r.props,o=t.wheelStepX,n=t.wheelStepY,a=t.disabled,s=t.nativeScroll,l=t.captureWheel,i=t.propagateWheelScroll,c=t.swapWheelAxes,u=t.wheelScrollDuration,h=r,f=h.targetX,p=h.targetY,d=h.scrollMaxX,v=h.scrollMaxY,x=h.exposesX,y=h.exposesY,g=e.target;if(s&&!l&&e.preventDefault(),!(a||e.isDefaultPrevented()||!l||g!=r.viewport&&"textarea"==g.tagName.toLowerCase())){var b=e.deltaX*x,_=e.deltaY*y;if(e.deltaX&&!x||0>b&&!f||b>0&&f==d||e.deltaY&&!y||0>_&&!p||_>0&&p==v)return void(i||e.preventDefault());if(e.shiftKey&&!b&&(b=_,_=0),c){var k=[_,b];b=k[0],_=k[1]}if(e.preventDefault(),"undefined"!=typeof InstallTrigger){var X=30;b*=X,_*=X}b*=o/100,_*=n/100,Date.now()-r._easingBeginTimestamp>u?r.scrollTo(r.scrollX+b,r.scrollY+_,u):r.scrollTo(r.targetX+b,r.targetY+_,u)}},r.onKeyDown=function(e){var t=r.props,o=t.keyboardStepX,n=t.keyboardStepY,a=t.disabled,s=t.captureKeyboard,l=t.keyboardScrollDuration,i=e.target,c=i.tagName.toLowerCase();if(!a&&!e.isDefaultPrevented()&&s&&/3[3456789]|40/.test(String(e.keyCode))&&"textarea"!=c&&("input"!=c||"text"!=i.type))switch(e.preventDefault(),e.keyCode){case 36:r.scrollTo(0,0,l);break;case 35:r.scrollTo(r.scrollMaxX,r.scrollMaxY,l);break;case 33:case 34:var u=r.viewport.clientHeight,h=r.viewport.clientWidth;33==e.keyCode&&(u*=-1,h*=-1),e.shiftKey?r.scrollBy(h,0,l):r.scrollBy(0,u,l);break;case 38:r.scrollBy(0,-n,l);break;case 40:r.scrollBy(0,n,l);break;case 37:r.scrollBy(-o,0,l);break;case 39:r.scrollBy(o,0,l)}},r.onDragStartX=function(e){return r.onDragStart(e,y.X)},r.onDragStartY=function(e){return r.onDragStart(e,y.Y)},r.onFastTrackX=function(e){return r.onFastTrack(e,y.X)},r.onFastTrackY=function(e){return r.onFastTrack(e,y.Y)},r.onCursorApproachingTrack=function(e){var t=r.props,o=t.nativeScroll,n=t.disabled,a=t.captureHandleDrag,s=t.fastTrack;o||n||!a&&s==g.OFF||e.buttons>0||(r.exposesX&&r._updateTrackHoverStatus(e,r.trackX),r.exposesY&&r._updateTrackHoverStatus(e,r.trackY))},s=o,a(r,s)}return s(t,e),l(t,[{key:"scrollBy",value:function(e,t,o,r,n){this.scrollTo(this.targetX+e,this.targetY+t,o,r,n)}},{key:"scrollTo",value:function(e,t){var o=arguments.length<=2||void 0===arguments[2]?0:arguments[2],r=arguments.length<=3||void 0===arguments[3]?this.props.defaultEasing:arguments[3],n=arguments.length<=4||void 0===arguments[4]?!1:arguments[4];this._easingDuration=o,this._easingBeginTimestamp=Date.now(),this.previousX=this.scrollX,this.previousY=this.scrollY,isNaN(e)||(this.targetX=e),isNaN(t)||(this.targetY=t),this._easing=r,this._silent=Boolean(n),this._forceSync()}},{key:"_forceSync",value:function(){var e=this.handleX,t=this.handleY,o=this.viewport,r=this.scrollY,n=this.scrollX,a=this.previousX,s=this.previousY,l=this._silent,i=this._easingBeginTimestamp,c=this._easing,u=this._easingDuration,h=this.props,f=h.axes,p=h.nativeScroll,d=h.outset,v=h.onViewportScroll,x=h.scrollMinX,g=h.scrollMinY,b=o.clientWidth,_=o.clientHeight,k=o.offsetWidth,X=o.offsetHeight,Y=o.scrollWidth,m=o.scrollHeight,S=o.scrollTop,w=o.scrollLeft,T=Math.max(0,Y-b),M=Math.max(0,m-_);this.exposesX=f.indexOf(y.X)>-1&&T>=x,this.exposesY=f.indexOf(y.Y)>-1&&M>=g,this.el.classList.toggle("scroll-box--show-axis-x",this.exposesX),this.el.classList.toggle("scroll-box--show-axis-y",this.exposesY);var D="100%",O="100%";if(p&&d){var E=k-b,P=X-_;E&&(D="calc(100% + "+E+"px)"),P&&(O="calc(100% + "+P+"px)")}o.style.width=D,o.style.height=O;var C=Math.max(0,Math.min(Math.round(this.targetX),T))*this.exposesX,B=Math.max(0,Math.min(Math.round(this.targetY),M))*this.exposesY,W=C,F=B;if(r==S&&n==w){var j=Date.now()-i;if(u>j&&"function"==typeof c){var N=c(j/u,j,0,1,u);W=Math.round(a+N*(C-a)),F=Math.round(s+N*(B-s))}else this._easingDuration=0;o.scrollLeft=W,o.scrollTop=F}else this._easingDuration=0,W=C=w,F=B=S;return this.targetX=C,this.targetY=B,n==W&&r==F&&this.scrollMaxX==T&&this.scrollMaxY==M?void(this._easingDuration||(this._easing=null,this._silent=!1)):(this.scrollX=W,this.scrollY=F,this.scrollMaxX=T,this.scrollMaxY=M,this.trackMaxX=0,this.trackMaxY=0,p||(this.trackMaxX=this.trackX.clientWidth-e.offsetWidth,this.trackMaxY=this.trackY.clientHeight-t.offsetHeight,e.style.width=b/Y*100+"%",e.style.left=this.trackMaxX*W/T+"px",t.style.height=_/m*100+"%",t.style.top=this.trackMaxY*F/M+"px"),void(l||n==W&&r==F||v(this)))}},{key:"onDragStart",value:function(e,t){var o=this,r=this.props,n=r.disabled,a=r.captureHandleDrag;if(!n&&a&&0==e.button){e.preventDefault(),e.stopPropagation();var s=void 0;s=t==y.X?this.trackX:this.trackY;var l=e.clientX-this.handleX.offsetLeft,i=e.clientY-this.handleY.offsetTop,c=function(e){if(o._forceSyncId&&0==e.button||u(),t==y.X)var r=o.scrollMaxX*(e.clientX-l)/o.trackMaxX;else var n=o.scrollMaxY*(e.clientY-i)/o.trackMaxY;o.scrollTo(r,n,0)},u=function h(e){removeEventListener("mousemove",c),removeEventListener("mouseup",h),o._forceSyncId&&s.classList.remove("scroll-box__track--dragged")};addEventListener("mousemove",c),addEventListener("mouseup",u),s.classList.add("scroll-box__track--dragged")}}},{key:"onFastTrack",value:function(e,t){var o=this.props,r=o.disabled,n=o.fastTrack,a=o.fastTrackDuration;if(!r&&0==e.button){var s=void 0,l=void 0,i=this.viewport,c=i.clientWidth,u=i.clientHeight,h=i.scrollWidth,f=i.scrollHeight,p=e.clientX-this.trackX.getBoundingClientRect().left,d=e.clientY-this.trackY.getBoundingClientRect().top;switch(n){case g.PAGING:t==y.X?s=this.targetX+(1-2*(p<this.handleX.offsetLeft))*c:l=this.targetY+(1-2*(d<this.handleY.offsetTop))*u;break;case g.GOTO:t==y.X?s=p/this.trackX.clientWidth*h-c/2:l=d/this.trackY.clientHeight*f-u/2;break;default:return}this.scrollTo(s,l,a)}}},{key:"_updateTrackHoverStatus",value:function(e,t){var o=e.clientX,r=e.clientY,n=this.props.hoverProximity,a=t.getBoundingClientRect(),s=a.width,l=a.left,i=a.top,c=a.height;t.classList.toggle("scroll-box__track--hover",n>r-c-i&&n>i-r&&n>o-s-l&&n>l-o)}},{key:"_updateReferences",value:function(){var e=this.refs;for(var t in e)e.hasOwnProperty(t)&&(this[t]=(0,u.findDOMNode)(e[t]));this.el=(0,u.findDOMNode)(this),this.viewport=this.el.lastChild}},{key:"componentDidMount",value:function(){var e=this,t=function o(){window.cancelAnimationFrame?e._forceSyncId=requestAnimationFrame(o):e._forceSyncId=setTimeout(o,1e3/30),e._forceSync()};this._updateReferences(),t(),addEventListener("mousemove",this.onCursorApproachingTrack)}},{key:"componentDidUpdate",value:function(){this._updateReferences(),this._forceSync()}},{key:"componentWillUnmount",value:function(){window.cancelAnimationFrame?cancelAnimationFrame(this._forceSyncId):clearTimeout(this._forceSyncId),this._forceSyncId=0,removeEventListener("mousemove",this.onCursorApproachingTrack)}},{key:"render",value:function(){var e=this.props,t=e.axes,o=e.trackXChildren,r=e.trackYChildren,n=e.handleXChildren,a=e.handleYChildren,s=e.disabled,l=e.nativeScroll,i=e.outset,u=e.className,h=e.children,f=e.style,p=["scroll-box"];return u&&(p=p.concat(u)),s&&p.push("scroll-box--disabled"),l&&p.push("scroll-box--native"),i&&p.push("scroll-box--outset"),t.indexOf(y.X)>-1&&p.push("scroll-box--has-axis-x"),t.indexOf(y.Y)>-1&&p.push("scroll-box--has-axis-y"),c["default"].createElement("div",{style:f,className:p.join(" "),onWheel:this.onWheel,onKeyDown:this.onKeyDown,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd,onTouchCancel:this.onTouchEnd,tabIndex:"-1"},c["default"].createElement("div",{className:"scroll-box__track scroll-box__track--x",onMouseDown:this.onFastTrackX,ref:"trackX"},c["default"].createElement("div",{className:"scroll-box__handle scroll-box__handle--x",onMouseDown:this.onDragStartX,ref:"handleX"},n),o),c["default"].createElement("div",{className:"scroll-box__track scroll-box__track--y",onMouseDown:this.onFastTrackY,ref:"trackY"},c["default"].createElement("div",{className:"scroll-box__handle scroll-box__handle--y",onMouseDown:this.onDragStartY,ref:"handleY"},a),r),c["default"].Children.only(h))}}]),t}(c["default"].Component);b.defaultProps={nativeScroll:"undefined"==typeof window||"orientation"in window,className:"scroll-box--wrapped",axes:y.XY,hoverProximity:50,disabled:!1,outset:!1,scrollMinX:2,scrollMinY:2,defaultEasing:function(e,t,o,r,n){return r*Math.sqrt(1- --e*e)+o},captureHandleDrag:!0,onViewportScroll:function(e){},fastTrack:g.GOTO,fastTrackDuration:500,captureKeyboard:!0,keyboardStepX:30,keyboardStepY:30,keyboardScrollDuration:200,captureWheel:!0,wheelStepX:30,wheelStepY:30,propagateWheelScroll:!1,swapWheelAxes:!1,wheelScrollDuration:100},b.propTypes={nativeScroll:p,className:x,axes:v([y.X,y.Y,y.XY]),hoverProximity:f,disabled:p,outset:p,scrollMinX:f,scrollMinY:f,defaultEasing:d,captureHandleDrag:p,onViewportScroll:d,fastTrack:v([g.GOTO,g.PAGING,g.OFF]),fastTrackDuration:f,captureKeyboard:p,keyboardStepX:f,keyboardStepY:f,keyboardScrollDuration:f,captureWheel:p,wheelStepX:f,wheelStepY:f,propagateWheelScroll:p,swapWheelAxes:p,wheelScrollDuration:f,trackXChildren:x,trackYChildren:x,handleXChildren:x,handleYChildren:x}},function(e,t){e.exports=require("react")},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.ScrollBox=void 0;var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),i=o(2),c=r(i),u=o(1);t.ScrollBox=function(e){function t(){return n(this,t),a(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),l(t,[{key:"render",value:function(){return c["default"].createElement(u.GenericScrollBox,this.props,c["default"].createElement("div",{className:"scroll-box__viewport"},this.props.children))}}]),t}(c["default"].Component)},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=o(3);Object.defineProperty(t,"ScrollBox",{enumerable:!0,get:function(){return r.ScrollBox}});var n=o(1);Object.defineProperty(t,"GenericScrollBox",{enumerable:!0,get:function(){return n.GenericScrollBox}}),Object.defineProperty(t,"FastTrack",{enumerable:!0,get:function(){return n.FastTrack}}),Object.defineProperty(t,"ScrollAxes",{enumerable:!0,get:function(){return n.ScrollAxes}})},function(e,t){},function(e,t){e.exports=require("react-dom")}]));
+!function(e,t){for(var o in t)e[o]=t[o]}(exports,function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){o(4),e.exports=o(5)},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.GenericScrollBox=t.FastTrack=t.ScrollAxes=void 0;var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),i=o(2),c=r(i),u=o(6),h=c["default"].PropTypes,f=h.number,p=h.bool,d=h.func,v=h.oneOf,x=h.any,y=t.ScrollAxes={X:"x",Y:"y",XY:"xy"},g=t.FastTrack={PAGING:"paging",GOTO:"goto",OFF:null},b=t.GenericScrollBox=function(e){function t(){var e,o,r,s;n(this,t);for(var l=arguments.length,i=Array(l),c=0;l>c;c++)i[c]=arguments[c];return o=r=a(this,(e=Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),r.handleX=null,r.handleY=null,r.trackX=null,r.trackY=null,r.viewport=null,r.targetX=0,r.targetY=0,r.previousX=0,r.previousY=0,r.scrollX=0,r.scrollY=0,r.scrollMaxX=0,r.scrollMaxY=0,r.trackMaxX=0,r.trackMaxY=0,r.exposesX=!1,r.exposesY=!1,r._forceSyncId=0,r._easingBeginTimestamp=0,r._easingDuration=0,r._easing=null,r._silent=!1,r._touchOffsetX=0,r._touchOffsetY=0,r._touchStart=null,r._touchEnd=null,r.onTouchStart=function(e){if(!(r.props.nativeScroll||r.props.disabled||e.touches.length>1||e.isDefaultPrevented())&&(r.exposesX||r.exposesY)){e.stopPropagation();var t=e.touches[0],o=r.viewport.scrollLeft,n=r.viewport.scrollTop;r._touchOffsetX=o+t.screenX,r._touchOffsetY=n+t.screenY,r._touchStart={x:o,y:n}}},r.onTouchMove=function(e){if(r._touchStart){e.preventDefault();var t=e.touches[0],o=r._touchOffsetX-t.screenX,n=r._touchOffsetY-t.screenY;if(r._touchEnd){var a=r._touchStart;r._touchStart=r._touchEnd,r._touchEnd=a,a.x=o,a.y=n}else r._touchEnd={x:o,y:n};r.scrollTo(o,n,0)}},r.onTouchEnd=function(e){if(r._touchEnd){var t=r,o=t._touchStart,n=t._touchEnd,a=Date.now()-r._easingBeginTimestamp,s=o.x-n.x,l=o.y-n.y,i=Math.sqrt(s*s+l*l),c=i/a*100;r._touchStart=null,r._touchEnd=null,r.scrollTo(n.x-c*s/i,n.y-c*l/i,c)}},r.onWheel=function(e){var t=r.props,o=t.wheelStepX,n=t.wheelStepY,a=t.disabled,s=t.nativeScroll,l=t.captureWheel,i=t.propagateWheelScroll,c=t.swapWheelAxes,u=t.wheelScrollDuration,h=r,f=h.targetX,p=h.targetY,d=h.scrollMaxX,v=h.scrollMaxY,x=h.exposesX,y=h.exposesY,g=e.target;if(s&&!l&&e.preventDefault(),!(a||e.isDefaultPrevented()||!l||g!=r.viewport&&"textarea"==g.tagName.toLowerCase())){var b=e.deltaX*x,_=e.deltaY*y;if(e.deltaX&&!x||0>b&&!f||b>0&&f==d||e.deltaY&&!y||0>_&&!p||_>0&&p==v)return void(i||e.preventDefault());if(e.shiftKey&&!b&&(b=_,_=0),c){var k=[_,b];b=k[0],_=k[1]}if(e.preventDefault(),"undefined"!=typeof InstallTrigger){var X=30;b*=X,_*=X}b*=o/100,_*=n/100,Date.now()-r._easingBeginTimestamp>u?r.scrollTo(r.scrollX+b,r.scrollY+_,u):r.scrollTo(r.targetX+b,r.targetY+_,u)}},r.onKeyDown=function(e){var t=r.props,o=t.keyboardStepX,n=t.keyboardStepY,a=t.disabled,s=t.captureKeyboard,l=t.keyboardScrollDuration,i=e.target,c=i.tagName.toLowerCase();if(!a&&!e.isDefaultPrevented()&&s&&/3[3456789]|40/.test(String(e.keyCode))&&"textarea"!=c&&("input"!=c||"text"!=i.type))switch(e.preventDefault(),e.keyCode){case 36:r.scrollTo(0,0,l);break;case 35:r.scrollTo(r.scrollMaxX,r.scrollMaxY,l);break;case 33:case 34:var u=r.viewport.clientHeight,h=r.viewport.clientWidth;33==e.keyCode&&(u*=-1,h*=-1),e.shiftKey?r.scrollBy(h,0,l):r.scrollBy(0,u,l);break;case 38:r.scrollBy(0,-n,l);break;case 40:r.scrollBy(0,n,l);break;case 37:r.scrollBy(-o,0,l);break;case 39:r.scrollBy(o,0,l)}},r.onDragStartX=function(e){return r.onDragStart(e,y.X)},r.onDragStartY=function(e){return r.onDragStart(e,y.Y)},r.onFastTrackX=function(e){return r.onFastTrack(e,y.X)},r.onFastTrackY=function(e){return r.onFastTrack(e,y.Y)},r.onCursorApproachingTrack=function(e){var t=r.props,o=t.nativeScroll,n=t.disabled,a=t.captureHandleDrag,s=t.fastTrack;o||n||!a&&s==g.OFF||e.buttons>0||(r.exposesX&&r._updateTrackHoverStatus(e,r.trackX),r.exposesY&&r._updateTrackHoverStatus(e,r.trackY))},s=o,a(r,s)}return s(t,e),l(t,[{key:"scrollBy",value:function(e,t,o,r,n){this.scrollTo(this.targetX+e,this.targetY+t,o,r,n)}},{key:"scrollTo",value:function(e,t){var o=arguments.length<=2||void 0===arguments[2]?0:arguments[2],r=arguments.length<=3||void 0===arguments[3]?this.props.defaultEasing:arguments[3],n=arguments.length<=4||void 0===arguments[4]?!1:arguments[4];this._easingDuration=o,this._easingBeginTimestamp=Date.now(),this.previousX=this.scrollX,this.previousY=this.scrollY,isNaN(e)||(this.targetX=e),isNaN(t)||(this.targetY=t),this._easing=r,this._silent=Boolean(n),this._forceSync()}},{key:"_forceSync",value:function(){var e=this.handleX,t=this.handleY,o=this.viewport,r=this.scrollY,n=this.scrollX,a=this.previousX,s=this.previousY,l=this._silent,i=this._easingBeginTimestamp,c=this._easing,u=this._easingDuration,h=this.props,f=h.axes,p=h.nativeScroll,d=h.outset,v=h.onViewportScroll,x=h.scrollMinX,g=h.scrollMinY,b=o.clientWidth,_=o.clientHeight,k=o.offsetWidth,X=o.offsetHeight,Y=o.scrollWidth,m=o.scrollHeight,S=o.scrollTop,w=o.scrollLeft,T=Math.max(0,Y-b),M=Math.max(0,m-_);this.exposesX=f.indexOf(y.X)>-1&&T>=x,this.exposesY=f.indexOf(y.Y)>-1&&M>=g,this.el.classList.toggle("scroll-box--show-axis-x",this.exposesX),this.el.classList.toggle("scroll-box--show-axis-y",this.exposesY);var D="100%",O="100%";if(p&&d){var E=k-b,P=X-_;E&&(D="calc(100% + "+E+"px)"),P&&(O="calc(100% + "+P+"px)")}o.style.width=D,o.style.height=O;var C=Math.max(0,Math.min(Math.round(this.targetX),T))*this.exposesX,B=Math.max(0,Math.min(Math.round(this.targetY),M))*this.exposesY,W=C,F=B;if(r==S&&n==w){var j=Date.now()-i;if(u>j&&"function"==typeof c){var L=c(j/u,j,0,1,u);W=Math.round(a+L*(C-a)),F=Math.round(s+L*(B-s))}else this._easingDuration=0;o.scrollLeft=W,o.scrollTop=F}else this._easingDuration=0,W=C=w,F=B=S;this.targetX=C,this.targetY=B,n==W&&r==F&&this.scrollMaxX==T&&this.scrollMaxY==M&&(this._easingDuration||(this._easing=null,this._silent=!1)),this.scrollX=W,this.scrollY=F,this.scrollMaxX=T,this.scrollMaxY=M,this.trackMaxX=0,this.trackMaxY=0,p||(this.trackMaxX=this.trackX.clientWidth-e.offsetWidth,this.trackMaxY=this.trackY.clientHeight-t.offsetHeight,e.style.width=b/Y*100+"%",e.style.left=this.trackMaxX*W/T+"px",t.style.height=_/m*100+"%",t.style.top=this.trackMaxY*F/M+"px"),l||n==W&&r==F||v(this)}},{key:"onDragStart",value:function(e,t){var o=this,r=this.props,n=r.disabled,a=r.captureHandleDrag;if(!n&&a&&0==e.button){e.preventDefault(),e.stopPropagation();var s=void 0;s=t==y.X?this.trackX:this.trackY;var l=e.clientX-this.handleX.offsetLeft,i=e.clientY-this.handleY.offsetTop,c=function(e){if(o._forceSyncId&&0==e.button||u(),t==y.X)var r=o.scrollMaxX*(e.clientX-l)/o.trackMaxX;else var n=o.scrollMaxY*(e.clientY-i)/o.trackMaxY;o.scrollTo(r,n,0)},u=function h(e){removeEventListener("mousemove",c),removeEventListener("mouseup",h),o._forceSyncId&&s.classList.remove("scroll-box__track--dragged")};addEventListener("mousemove",c),addEventListener("mouseup",u),s.classList.add("scroll-box__track--dragged")}}},{key:"onFastTrack",value:function(e,t){var o=this.props,r=o.disabled,n=o.fastTrack,a=o.fastTrackDuration;if(!r&&0==e.button){var s=void 0,l=void 0,i=this.viewport,c=i.clientWidth,u=i.clientHeight,h=i.scrollWidth,f=i.scrollHeight,p=e.clientX-this.trackX.getBoundingClientRect().left,d=e.clientY-this.trackY.getBoundingClientRect().top;switch(n){case g.PAGING:t==y.X?s=this.targetX+(1-2*(p<this.handleX.offsetLeft))*c:l=this.targetY+(1-2*(d<this.handleY.offsetTop))*u;break;case g.GOTO:t==y.X?s=p/this.trackX.clientWidth*h-c/2:l=d/this.trackY.clientHeight*f-u/2;break;default:return}this.scrollTo(s,l,a)}}},{key:"_updateTrackHoverStatus",value:function(e,t){var o=e.clientX,r=e.clientY,n=this.props.hoverProximity,a=t.getBoundingClientRect(),s=a.width,l=a.left,i=a.top,c=a.height;t.classList.toggle("scroll-box__track--hover",n>r-c-i&&n>i-r&&n>o-s-l&&n>l-o)}},{key:"_updateReferences",value:function(){var e=this.refs;for(var t in e)e.hasOwnProperty(t)&&(this[t]=(0,u.findDOMNode)(e[t]));this.el=(0,u.findDOMNode)(this),this.viewport=this.el.firstChild;var o=this.props.nativeScroll;null==o?"undefined"!=typeof window&&"orientation"in window&&this.el.classList.add("scroll-box--native"):this.el.classList.toggle("scroll-box--native",o)}},{key:"componentDidMount",value:function(){var e=this,t=function o(){window.cancelAnimationFrame?e._forceSyncId=requestAnimationFrame(o):e._forceSyncId=setTimeout(o,1e3/30),e._forceSync()};this._updateReferences(),t(),addEventListener("mousemove",this.onCursorApproachingTrack)}},{key:"componentDidUpdate",value:function(){this._updateReferences(),this._forceSync()}},{key:"componentWillUnmount",value:function(){window.cancelAnimationFrame?cancelAnimationFrame(this._forceSyncId):clearTimeout(this._forceSyncId),this._forceSyncId=0,removeEventListener("mousemove",this.onCursorApproachingTrack)}},{key:"render",value:function(){var e=this.props,t=e.axes,o=e.trackXChildren,r=e.trackYChildren,n=e.handleXChildren,a=e.handleYChildren,s=e.disabled,l=e.outset,i=e.className,u=e.children,h=e.style,f=["scroll-box"];return i&&(f=f.concat(i)),s&&f.push("scroll-box--disabled"),l&&f.push("scroll-box--outset"),t.indexOf(y.X)>-1&&f.push("scroll-box--has-axis-x"),t.indexOf(y.Y)>-1&&f.push("scroll-box--has-axis-y"),c["default"].createElement("div",{style:h,className:f.join(" "),onWheel:this.onWheel,onKeyDown:this.onKeyDown,onTouchStart:this.onTouchStart,onTouchMove:this.onTouchMove,onTouchEnd:this.onTouchEnd,onTouchCancel:this.onTouchEnd,tabIndex:"-1"},c["default"].Children.only(u),c["default"].createElement("div",{className:"scroll-box__track scroll-box__track--x",onMouseDown:this.onFastTrackX,ref:"trackX"},c["default"].createElement("div",{className:"scroll-box__handle scroll-box__handle--x",onMouseDown:this.onDragStartX,ref:"handleX"},n),o),c["default"].createElement("div",{className:"scroll-box__track scroll-box__track--y",onMouseDown:this.onFastTrackY,ref:"trackY"},c["default"].createElement("div",{className:"scroll-box__handle scroll-box__handle--y",onMouseDown:this.onDragStartY,ref:"handleY"},a),r))}}]),t}(c["default"].Component);b.defaultProps={className:"scroll-box--wrapped",axes:y.XY,hoverProximity:50,disabled:!1,outset:!1,scrollMinX:2,scrollMinY:2,defaultEasing:function(e,t,o,r,n){return r*Math.sqrt(1- --e*e)+o},captureHandleDrag:!0,onViewportScroll:function(e){},fastTrack:g.GOTO,fastTrackDuration:500,captureKeyboard:!0,keyboardStepX:30,keyboardStepY:30,keyboardScrollDuration:200,captureWheel:!0,wheelStepX:30,wheelStepY:30,propagateWheelScroll:!1,swapWheelAxes:!1,wheelScrollDuration:100},b.propTypes={nativeScroll:p,className:x,axes:v([y.X,y.Y,y.XY]),hoverProximity:f,disabled:p,outset:p,scrollMinX:f,scrollMinY:f,defaultEasing:d,captureHandleDrag:p,onViewportScroll:d,fastTrack:v([g.GOTO,g.PAGING,g.OFF]),fastTrackDuration:f,captureKeyboard:p,keyboardStepX:f,keyboardStepY:f,keyboardScrollDuration:f,captureWheel:p,wheelStepX:f,wheelStepY:f,propagateWheelScroll:p,swapWheelAxes:p,wheelScrollDuration:f,trackXChildren:x,trackYChildren:x,handleXChildren:x,handleYChildren:x}},function(e,t){e.exports=require("react")},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.ScrollBox=void 0;var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),i=o(2),c=r(i),u=o(1);t.ScrollBox=function(e){function t(){return n(this,t),a(this,Object.getPrototypeOf(t).apply(this,arguments))}return s(t,e),l(t,[{key:"render",value:function(){return c["default"].createElement(u.GenericScrollBox,this.props,c["default"].createElement("div",{className:"scroll-box__viewport"},this.props.children))}}]),t}(c["default"].Component)},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=o(3);Object.defineProperty(t,"ScrollBox",{enumerable:!0,get:function(){return r.ScrollBox}});var n=o(1);Object.defineProperty(t,"GenericScrollBox",{enumerable:!0,get:function(){return n.GenericScrollBox}}),Object.defineProperty(t,"FastTrack",{enumerable:!0,get:function(){return n.FastTrack}}),Object.defineProperty(t,"ScrollAxes",{enumerable:!0,get:function(){return n.ScrollAxes}})},function(e,t){},function(e,t){e.exports=require("react-dom")}]));

No alert changes

Improved metrics

Total package byte prevSize

58798

4.35%

Lines of code

581

0.35%

Number of lines in readme file

239

35.03%

No dependency changes