@adoratorio/hades - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/index.js

@@ -102,3 +102,3 @@ "use strict";
         // If boundires are autosetted use the container dimensions
-        if (this.options.autoBoundries) {
+        if (this.virtual && this.options.autoBoundries) {
             var containerRect = this.options.container.getBoundingClientRect();
@@ -105,0 +105,0 @@ var viewportRect = this.options.viewport.getBoundingClientRect();

package.json

 {
   "name": "@adoratorio/hades",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A smooth scrollbar based on Hermes, scroll down 'till hell",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,5 +0,5 @@
-### Hades
+# Hades
 A smooth scrollbar with optional native scroll or section implementation for performance boosting
 
-#### Installation and usage
+## Installation
 Hades is written in typescript and available as npm package with the alongside types definitions. So install as always
@@ -11,2 +11,3 @@
 
+## Usage
 Then it can be required or imported as module
@@ -20,64 +21,88 @@
 
+## Available options
 When instantiated the constructor take the following options
 
-**NOTE a lot of them are not working in native or fake mode, and only works in virtual mode**
+**NOTE all options are used only in virtual mode, except of course for the _mode_ one**
 
-**mode**: A string indicating the scroll mode you wish to use, it can be 'virtual', 'native' or 'fake' also 
-static enumerators are exposed to help: `Hades.MODE.VIRTUAL`, `Hades.MODE.NATIVE`, `Hades.MODE.FAKE`. *default to: `Hades.MODE.VIRTUAL`*
+|parameter|type|default|description|
+|:-------:|:--:|:-----:|:----------|
+|mode|`string`|`Hades.MODE.VIRTUAL`|A string indicating the scroll mode you wish to use, it can be 'virtual', 'native' or 'fake' also static enumerators are exposed to help:<br>• `Hades.MODE.VIRTUAL`<br>• `Hades.MODE.NATIVE`<br>• `Hades.MODE.FAKE`.|
+|viewport|`HTMLElement`|`document.querySelector('.hades-viewport')`|The node in the DOM used to identify the wrapper for the translated DOM node (usually a fixed height node) with `overflow: hidden` for the **VIRTUAL** mode. In case of the **NATIVE** or **FAKE** modes, is the scroll container used to detect scroll events.|
+|container|`HTMLElement`|`document.querySelector('.hades-container')`|The node translated when the user scrolls.|
+|easing|`Function`|`Hades.EASING.LINEAR`|A function used to bend the progress in time to match a curve and create more natural scrolling intertia the function is called with only one parameter being the time nomralized in relation with the total duration (currentTime / totalDuration) so the value is goint from 0 to a max of 1. Eg. for a linear time `function(t) { return t; }`. It's always a advised to use a linear-in eased-out timing function to avoid weird visual artifacts when the scroll starts. Some enumerators are exposed, just for having a bounch of useful functions out of the box: `Hades.EASING.LINEAR, Hades.EASING.QUAD, Hades.EASING.CUBIC, Hades.EASING.QUART, Hades.EASING.QUINT`. If you wish BezierEasing from [bezier-easing npm package](https://npmjs.com/package/bezier-easing) can be used as easing function.|
+|duration|`number`|`1000`|The total lasting duration of the scrolling inertia after the user has stopped scrolling. Expressed in *ms*.|
+|infiniteScroll|`boolean`|`false`|Whether or not the boundries are taken in account when checking the scroll amount, resulting in an infinite scrolling on all axis.|
+|emitGlobal|`boolean`|`false`|If you want the custom scroll generated internally also emitted on global scope (window).|
+|callback|`Function`|`() => {}`|The function called on each scroll event, the [HadesEvent]() is passed to this function.|
+|renderByPixel|`boolean`|`false`|Used if you want to apply integer rounded values to the css transition units. If not, the full value is used instead, resulting in a smoother animations, especially the slowest ones, avoiding that much stattering in particular in the end of the animation, but it's performance consuming.|
+|lockX|`boolean`|`true`|Lock the x axis when detecting scroll events.|
+|lockY|`boolean`|`false`|Lock the y axis when detecting scroll events.|
+|boundries|`{ min: { x: number, y:number }, max: { x:number, y:number } }`|`Hades.createBoundries(xMin, xMax, yMin, yMax)`|The scroll max and min amount in the x and y axis. An object containing these properties `{ min: { x: 0, y: 0 }, max: { x: 0, y: 0 } }`. A static utility function is exposed as helper to build the object: `Hades.createBoundries(xMin, xMax, yMin, yMax)`.|✔️|
+|sections|`boolean \| string`|`false`|Wheather to use sections tecnique. Pass the CSS to selector for the sections to activate, if active the translate properties are applied to the sections instead of the whole container, using the correct values to make the sections translating only when they should be in viewport and to make them feel as "normal". This is computationally more expensive due to loops, but will gain in gpu performance 'cause the translation is applied to a smaller "surface".|
+|aion|`Aion \| null`|`null`|The Aion instance to use within to perform animations and per-frame operations. If passed this instance will be used, instead a new one is created.|
+|autoplay|`boolean`|`true`|Autostart the rendering cycle or not.|
+|touchMultiplier|`number`|`1.5`|A multiplier used for touches delta and speed calculations, passed to Hermes. Reasonable values are between 0.8 and 3 but it's just a suggestion. Higher values will increase the feeling of slippery touch effect.|
+|smoothDirectionChange|`boolean`|`false`|If true when the scroll direction change the easing setted is kept to help the transition between one direction and the other to feel more interial. On realy smooth easings and high durations this can feel a bit awkward. If false an immediate direction change is applied.|
+|renderScroll|`boolean`|`false`|Wheather or not to apply the actual CSS transform property, if false the internal amount is kept and exposed for your personal use.|
 
-**viewport**: The node in the DOM used to identify the wrapper for the translated DOM node (usually a fixed height node)
-with `overflow: hidden` for the **VIRTUAL** mode. In case of the **NATIVE** or **FAKE** modes, is the scroll container used to detect scroll events. *default to: `document.querySelector('.hades-viewport')`*
+## APIs
+### Static Methods
+#### Hades.createBoundries(xMin, xMax, yMin, yMax)
+```typescript
+Hades.createBoundires(xMin: number, xMax: number, yMin: number, yMax: number): Boundries
+```
+Create an object suitable for scrollbar boundries.
 
-**container**: The node translated when the user scrolls. *default to: document.querySelector('.hades-container')* **_only in VIRTUAL mode_**
+### Instance Properties
+The Hades instance exposes two main properties:
 
-**easing**: A function used to bend the progress in time to match a curve and create more natural scrolling intertia the function is called with only one parameter being the time nomralized in relation with the total duration (currentTime / totalDuration) so the value is goint from 0 to a max of 1. Eg. for a linear time `function(t) { return t; }`. It's always a advised to use a linear-in eased-out timing function to avoid weird visual artifacts when the scroll starts. Some enumerators are exposed, just for having a bounch of useful functions out of the box: `Hades.EASING.LINEAR, Hades.EASING.QUAD, Hades.EASING.CUBIC, Hades.EASING.QUART, Hades.EASING.QUINT`. If you wish BezierEasing from [bezier-easing npm package](https://npmjs.com/package/bezier-easing) can be used as easing function. *default to: `Hades.EASING.LINEAR`* **_only in VIRTUAL mode_**
+#### amount 
+• Type: `interface Vec2 { x:number, y:number }`
+With x and y props exposes the current scroll amount, updated frame-by-frame.
 
-**duration**: The total lasting duration of the scrolling inertia after the user has stopped scrolling. Expressed in *ms*. *default to: `1000`* **_only in VIRTUAL mode_**
+#### velocity
+• Type: `interface Vec2 { x:number, y:number }`
+With x and y props exposes the current scroll speed, updated frame-by-frame.
 
-**infiniteScroll**: Whether or not the boundries are taken in account when checking the scroll amount, resulting in an infinite scrolling on all axis. *default to: `false`* **_only in VIRTUAL mode_**
+### Instance Getters
+#### direction
+• Type `number`
+Get the current direction of the scroll, page mouving up is 1 and page moving down is -1. Enumerators are also exposed with `Hades.DIRECTION.UP`, `Hades.DIRECTION.DOWN` and an inert enum is exposed `Hades.DIRECTION.INITIAL`.
+#### virtual
+• Type `boolean`
+Get true if mode is setted to virtual or false if not.
+#### native
+• Type `boolean`
+Get true if mode is setted to native or false if not.
+#### fake
+• Type `boolean`
+Get true if mode is setted to native or false if not.
 
-**emitGlobal**: If you want the custom scroll generated internally also emitted on global scope (window). *default to: `false`* **_only in VIRTUAL mode_**
+### Instance Setters
+#### easing
+• Type `Function`
+Set the easing function, use the constructor param for documentation reference.
 
-**callback**: The function called on each scroll event, the [HadesEvent]() is passed to this function. *default to: `() => {}`* **_only in VIRTUAL mode_**
+#### duration
+• Type `number`
+Set the duration, use the constructor param for documentation reference.
 
-**renderByPixel**: Used if you want to apply integer rounded values to the css transition units. If not, the full value is used instead, resulting in a smoother animations, especially the slowest ones, avoiding that much stattering in particular in the end of the animation, but it's performance consuming. *default to: `false`* **_only in VIRTUAL mode_**
+#### infiniteScroll
+• Type `boolean`
+Set if infinite scroll is used or not, use the constructor param for documentation reference.
 
-**lockX**: Lock the x axis when detecting scroll events. *default to: `true`* **_only in VIRTUAL mode_**
+#### emitGlobal
+• Type `boolean`
+Set if global events are emitted or not.
 
-**lockY**: Lock the y axis when detecting scroll events. *default to: `false`* **_only in VIRTUAL mode_**
+#### touchMultiplier
+• Type `number`
+Set the touch multiplier passed to Hermes instance.
 
-**boundries**: The scroll max and min amount in the x and y axis. An object containing these properties `{ min: { x: 0, y: 0 }, max: { x: 0, y: 0 } }`. A static utility function is exposed as helper to build the object: `Hades.createBoundries(xMin, xMax, yMin, yMax)`. *detault to: Hades.createBoundries(0, 0, 0, 0)* **_only in VIRTUAL mode_**
+#### smoothDirectionChange
+• Type `boolean`
+Set whether to use smooth direction change or not.
 
-**sections**: Wheather to use sections tecnique. Pass the CSS to selector for the sections to activate, if active the translate properties are applied to the sections instead of the whole container, using the correct values to make the sections translating only when they should be in viewport and to make them feel as "normal". This is computationally more expensive due to loops, but will gain in gpu performance 'cause the translation is applied to a smaller "surface". *default to: `false`* **_only in VIRTUAL mode_**
-
-**aion**: The Aion instance to use within to perform animations and per-frame operations. If passed this instance will be used, instead a new one is created. *default to: null* **_only in VIRTUAL mode_**
-
-**autoplay**: Autostart the rendering cycle or not. *deault to: true* **_only in VIRTUAL mode_**
-
-**touchMultiplier**: A multiplier used for touches delta and speed calculations, passed to Hermes. Reasonable values are between 0.8 and 3 but it's just a suggestion. Higher values will increase the feeling of slippery touch effect. *default to: `1.5`* **_only in VIRTUAL mode_**
-
-**smoothDirectionChange**: If true when the scroll direction change the easing setted is kept to help the transition between one direction and the other to feel more interial. On realy smooth easings and high durations this can feel a bit awkward. If false an immediate direction change is applied. *default to: `false`* **_only in VIRTUAL mode_**
-
-**renderScroll**: Wheather or not to apply the actual CSS transform property, if false the internal amount is kept and exposed for your personal use. *default to: `false`* **_only in VIRTUAL mode_**
-
-#### Public properties, getters and setters
-##### Properties
-The Hades instance exposes two main properties:
-
-**amount**: With x and y props exposes the current scroll amount, updated frame-by-frame.
-**velocity**: With x and y props exposes the current scroll speed, updated frame-by-frame.
-
-##### Getters
-**direction**: Get the current direction of the scroll, page mouving up is 1 and page moving down is -1. Enumerators are also exposed with `Hades.DIRECTION.UP`, `Hades.DIRECTION.DOWN` and an inert enum is exposed `Hades.DIRECTION.INITIAL`.
-**virtual**: Get true if mode is setted to virtual or false if not.
-**native**: Get true if mode is setted to native or false if not.
-**fake**: Get true if mode is setted to native or false if not.
-
-##### Setters
-**easing**: Set the easing function, use the constructor param for documentation reference.
-**duration**: Set the duration, use the constructor param for documentation reference.
-**infiniteScroll**: Set if infinite scroll is used or not, use the constructor param for documentation reference.
-**emitGlobal**: Set if global events are emitted or not.
-**touchMultiplier**: Set the touch multiplier passed to Hermes instance.
-**smoothDirectionChange**: Set whether to use smooth direction change or not.
-**renderScroll**: Set if to apply CSS transform or not.
+#### renderScroll
+• Type `boolean`
+Set if to apply CSS transform or not.

No alert changes

Improved metrics

Total package byte prevSize

25603

increased by0.69%

Number of lines in readme file

107

increased by30.49%

No dependency changes