diff --git a/.npmignore b/.npmignore
index 6664069..a2b50f7 100644
--- a/.npmignore
+++ b/.npmignore
@@ -16,3 +16,4 @@ webpack.config.js
.prettierignore
.prettierrc
tslint.json
+cypress
diff --git a/.travis.yml b/.travis.yml
index d9356f0..c1b064c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,8 +11,3 @@ after_success:
branches:
except:
- /^v\d+\.\d+\.\d+$/
-addons:
- browserstack:
- username: "davidperezalvare2"
- access_key:
- secure: "dpuVt4hlUw7lTHwbZ4KiLFP7DfEHtv8UsQg7YhBmkMXyNQlz5sX4M5+U3ZN9Y0x1LQBaVr1jeFnKsMKYsFkg2kr54Wy2udjcy8melsgu/9cJXthUiRf8WB2aXXtEayITjV/CnY4UCgRYIcCmBeyn9RNPeA3PJIm//TmgDanERPMBYQZ5ELubHxcaLsU/YaYZPPvwdIbZy4OFZdbA0M/SiSTGs3iN5EJaSOJHKWxsTGVLZht+XiXGuvRCQJyVMuvZ+SwXTh8OWggRwnarWvYl43ETQqWNSiOBYfDB8t4mQutkC7kbcG+j2Cc8hJXvAaje0Wq410lkyfL7f4i4tgm3SVhrTUmPlkXxONHEoD/izwtJOgoJ3mbawqhgWFSNkExYG7Czip231uxGEridobzuvL2XFv5LYy8UrOEVzrsAWsUOGomH5/BxBVH1ZlhY/2lwXPnoWciEdbXnfwjEBC0F5mk0JIbGO2X9okTX0r1ECkcKKJXNZaJq1YiibPjs3jkDqd7WXVM41Gn07kiyi3LCnqStWCQAhRhnrxms0FMIU3z31OhqssSdiuwxYvlXD9ax77A4446W5nm7Gzz7DXU9N9vBrhg469dRurooFW5/VOZSjGtJ7/UM8H6z8nQduVEoG63Zmmftmnz+qHcrAvLVVMmROyu9j7V6y0BEHE/9jUY="
diff --git a/README.md b/README.md
index 7c0ee58..3005fd1 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,8 @@
[![](https://data.jsdelivr.com/v1/package/npm/scroll-utility/badge)](https://www.jsdelivr.com/package/npm/scroll-utility)
[![Travis](https://travis-ci.org/LeDDGroup/scroll-utility.svg?branch=master)](https://travis-ci.org/LeDDGroup/scroll-utility)
[![Maintainability](https://api.codeclimate.com/v1/badges/0914e9eba77aee46d514/maintainability)](https://codeclimate.com/github/LeDDGroup/scroll-utility/maintainability)
-[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/LeddSoftware/scroll-utility) [![Greenkeeper badge](https://badges.greenkeeper.io/LeDDGroup/scroll-utility.svg)](https://greenkeeper.io/)
+[![Greenkeeper badge](https://badges.greenkeeper.io/LeDDGroup/scroll-utility.svg)](https://greenkeeper.io/)
+[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/LeddSoftware/scroll-utility)
@@ -12,41 +13,39 @@
- [Features:](#features)
- [Why?](#why)
-- [Basic Usage](#basic-usage)
-- [Quick Reference](#quick-reference)
- [Installation](#installation)
- [Usage](#usage)
- [Scroll Container](#scroll-container)
- [Default export:](#default-export)
- - [Settings](#settings)
- - [Scroll](#scroll)
- - [Center Element](#center-element)
- - [ScrollTo](#scrollto)
- - [ScrollBy](#scrollby)
- - [scrollType](#scrolltype)
- - [options](#options)
- - [examples](#examples)
- - [Detect onScroll](#detect-onscroll)
- - [onScroll](#onscroll)
- - [onExternalScroll](#onexternalscroll)
- - [onUtilityScroll](#onutilityscroll)
- - [Stop animations](#stop-animations)
- - [Change easing function](#change-easing-function)
+ - [scrollBy](#scrollby)
+ - [onScroll](#onscroll)
+ - [External scroll](#external-scroll)
+ - [element](#element)
+ - [size](#size)
+ - [scrollSize](#scrollsize)
+ - [position](#position)
+ - [offset](#offset)
+ - [stopAllAnimations](#stopallanimations)
+ - [easing](#easing)
+ - [misc](#misc)
+ - [getDistToElement](#getdisttoelement)
+ - [getPercentPosition](#getpercentposition)
+ - [scrollTo](#scrollto)
+ - [isElementInRange](#iselementinrange)
- [Stack animations and high precision](#stack-animations-and-high-precision)
-- [Cross-browser compatibility](#cross-browser-compatibility)
- [License](#license)
- [Support](#support)
+## This is v3 of scroll-utility, to see documentation for v2 click [here ](https://github.com/LeDDGroup/scroll-utility/tree/42e8d2d5141b176aa7fada79bb2ec94fec009ba3)
+
# Features:
- Smooth scroll inside any element in any direction
- Center elements
-- Scroll to and offset scroll position
-- Extremely precisely
+- Extremely precise
- Handle multiple scroll animation at the time
-- Cross-browser compatible (tests with [Browserstack](browserstack.com))
- Performance aware
- Detect onScroll events and differentiate between user and utility scroll
- Customize _easing_ function used to animate the scroll
@@ -59,55 +58,6 @@ There are a lot of packages about smooth scrolling, so, what's the difference?
Well, the main idea was to stack multiple scroll animations together, and precision. That is not an extra feature, that's what this package does, you can trigger multiple animations to several places, and it will be as precise as it can (bear in mind that browsers round the scroll position, so the margin error will be +- 0.5)
And to create a full-featured(yet simple) library to animate the position of the scroll.
-To see how precise it was, (and to test cross-browser compatibility) I made this [demo](https://leddgroup.com/scroll-utility)
-
-# Basic Usage
-
-```js
-import scrollManager from "scroll-utility"
-
-const element = document.getElementById("some-element")
-
-scrollManager.centerElement(element, 50)
-// scrollManager.scrollTo("percent", 50)
-// scrollManager.scrollBy("screen", 1)
-```
-
-That's it, the first case will center the element with id _some-element_ in the middle of the screen
-The 2nd will scroll to the half of the page
-And the 3rd will offset scroll position by 1 _screen_
-
-By default it will scroll vertically, and with 1 second of duration
-
-# Quick Reference
-
-```js
-import { Scroll } from "scroll-utility"
-
-const element = document.getElementById("some-element") || window
-const scrollManager = new Scroll(element, settings) // for scrolling inside element instead of window
-
-// start a scroll animation
-
-scrollManager.centerElement(someHTMLElement, value, options) // scroll to some element
-scrollManager.scrollTo(scrollType, value, options) // scroll to some position
-scrollManager.scrollBy(scrollType, value, options) // offset scroll position by some value
-
-const scrollType = "percent" || "value" || "screen"
-
-const options = {
- // default options
- duration: 1000,
- horizontal: false,
-}
-
-// stopping animations
-
-scrollManager.stopAllAnimations() // stop all animation in "scrollManager"
-const animation = scrollManager.scrollTo("value", 1000, { duration: 1000 }) // create and capture animation
-animation.stop() // stop animation
-```
-
# Installation
It can be installed from npm,
@@ -119,7 +69,7 @@ $ npm install --save scroll-utility
or from a cdn at [jsdelivr](https://www.jsdelivr.com/package/npm/scroll-utility)
```html
-
+
```
when downloading from a cdn the package will be globally exported as `ScrollUtility`
@@ -136,8 +86,8 @@ import { Scroll } from "scroll-utility"
const someHTMLElement = document.getElementById("some-element")
const windowScrollManager = new Scroll() // scroll the page
-// const windowScrollManager = new Scroll(window, settings) // same as above, with settings
-const elementScrollManager = new Scroll(someHTMLElement, settings) // scroll the element
+// const windowScrollManager = new Scroll(window) // same as above, with settings
+const elementScrollManager = new Scroll(someHTMLElement) // scroll the element
```
### Default export:
@@ -148,168 +98,229 @@ import windowScrollManager from "scroll-utility"
// same as: `windowScrollManager = new Scroll()`
```
-### Settings
+## scrollBy
-```js
-const defaultSettings = {
- // easing: defaultEasingFunction, // inOutCubic
- onScroll: null,
- onUtilityScroll: null,
- onExternalScroll: null,
- options: {
- duration: 1000,
- horizontal: false,
- },
-}
+After creating an instance of a scrollManager, you can scroll using a `scrollBy` method:
-const elementScrollManager = new Scroll(someHTMLElement, defaultSettings)
+```js
+import scrollManager from "scroll-utility" // default export (window scroll manager)
-// or you can set them later at any time
-scrollManager.updateSettings(settings)
+scrollManager.scrollBy(500) // 500px
+scrollManager.scrollBy(500, 1000) // 500px, 1000ms(1s)
+scrollManager.scrollBy(500, 1000, true) // 500px, 1000ms(1s), horizontal scroll
+// scrollManager.scrollBy(500, 1000, false, someEasingAnimation) // 500px, 1000ms(1s), vertical scroll, `someEasinganimation` instead of `inOutCubic` by default
```
-## Scroll
+As you can see from the comments, in the first case it will offset scroll position by 500 pixels
+In the 2nd case, it will offset by 500, but in 1 second, that's when you'll see the 'smooth' effect
+In the 3rd, it will do a "horizontal" scroll instead of a "vertical", which is the default behavior.
+And the 4th parameter, is used to override the defuault easing animation.
+
+Only the first paramater is required, by default `duration` is 0 and `horizontal` if false.
-### Center Element
+To determine where to scroll to, see [element](#element) and [misc](#misc) below.
+
+## onScroll
+
+You can specify `onScroll` on the constructor, or any other time you want:
```js
-// assuming scrollManager is declared
-scrollManager.centerElement(element, value, options)
+import { Scroll } from "scroll-utility"
+
+const windowScrollManager = new Scroll(window, () => {
+ console.log("scrolled")
+}) // constructor
+// const windowScrollManager = new Scroll(window, null) // by default
+
+windowScrollManager.onScroll = () => {
+ console.log("any time")
+} // any time you want
+// windowScrollManager.onScroll = null // if you don't want to capture 'onScroll' anymore
```
-### ScrollTo
+### External scroll
+
+the function `onScroll` accepts an paramater to differentiate if the scroll was originated from an external source:
```js
-scrollManager.scrollTo(scrollType, value, options)
+import scrollManager from "scroll-utility"
+
+scrollManager.onScroll = (external) => {
+ if (external) {
+ console.log("this 'scroll-utility' scrolled")
+ } else {
+ console.log("external scroll") // ussualy the user via the mouse or keyboard, or some other script running in the browser
+ }
```
-### ScrollBy
+## element
+
+There are several utilities to help you scroll to wherever you want, you can access them in the `element` field:
```js
-scrollManager.scrollBy(scrollType, value, options)
+import scrollManager from "scroll-utility"
+
+console.log(scrollManager.element.scrollPosition.y) // vertical position of the scroll
+console.log(scrollManager.element.scrollPosition.x) // horizontal position of the scroll
```
-### scrollType
+All of its fields have the 'x' and 'y' for each direction of the property
-For `scrollTo` and `scrollBy`, the first parameter (`scrollType`) is one of these:
+The objective of this element is to unify the properties of the `window` and of the `htmlElements`.
+
+### size
```js
-const scrollType = "value" | "percent" | "screen"
+scrollManager.size.x
+scrollManager.size.y
```
-### options
+This is the size of the container, may it be the `window`, or the (div)element used to instantiate the scrollManager
-The third parameter (`options`), is by default:
+### scrollSize
```js
-const options = {
- duration: 1000, // duration of the scroll in milliseconds
- horizontal: false, // direction of the scroll animation
-}
+scrollManager.scrollSize.x
+scrollManager.scrollSize.y
```
-### examples
+This is the scroll size of the container. It determines the amount of scroll that can be done
+
+### scrollPosition
```js
-const someElement = document.getElementById("some-element")
-scrollManager.centerElement(someElement, 50) // will center element in 50% of its container
+scrollManager.scrollPosition.x
+scrollManager.scrollPosition.y
+```
-scrollManager.scrollTo("value", 1000) // will scroll to 1000px
-scrollManager.scrollBy("value", 1000) // will offset current scroll position by 1000px
+This is the position of the scrollBar. Its minimum value it's 0, and its maximum is the `scrollSize` - the `size`
-scrollManager.scrollTo("percent", 50) // will scroll to 50 percent of the page
-scrollManager.scrollBy("percent", 50) // will offset current position by 50 percent of the page
+### offset
-scrollManager.scrollTo("screen", 1) // will scroll to the 2nd "screen"
-scrollManager.scrollBy("screen", 1) // will offset position by 2 "screens"
+```js
+scrollManager.offset.x
+scrollManager.offset.y
```
-## Detect onScroll
+This is less likely to be used. It indicates the offset of the _boundingClientRect_ of the container. So for the window as container, it will return 0 for both `x` and `y`. It's the equivalent for `getBoundingClientRect().left` and `top`
-```ts
-import { Scroll, ISettings } from "scroll-utility"
+## stopAllAnimations
-const settings: Partial = {
- onUtilityScroll: () => console.log("utility scroll"),
- onExternalScroll: () => console.log("external scroll"),
- onScroll: () => console.log("scroll"),
-}
-
-const scrollManager = new Scroll(window, settings)
+```js
+scrollManager.stopAllAnimations() // this will stop all animations in scrollManager
```
-### onScroll
+## easing
-if the _onScroll_ field is specified, it will be triggered any time a scroll event occurs in the container specified,
-also, _onExternalScroll_ or _onUtilityScroll_ will trigger too
+You can change the default easing function on the constructor, or any other time you want:
-### onExternalScroll
+```js
+import { Scroll } from "scroll-utility"
-usually when the user scroll, but can be triggered by other scripts running in the browser, or by other _scrollManager_ instance
+const scrollManager = new Scroll(window, null, some_easing_function) // the 3rd parameter is the easing function
-### onUtilityScroll
+scrollManager.easing = some_easing_function // change the default easing function any time you want
+```
+
+This [package](https://www.npmjs.com/package/easing-functions) provides easing functions. Or you can just create your own :)
-it's triggered when the _scrollManager_ instance is the one that effectuated the scroll
+The default easing function used is _inOutCubic_. It seemed like the best for me.
-## Stop animations
+## misc
```js
-scrollManager.stopAllAnimations() // this will stop all animations in scrollManager
+import scrollManager from "scroll-utility"
-// to stop specific animations:
-const animation = scrollManager.scrollBy("screen", 1)
-animation.stop()
+scrollManager.misc.someFunction()
```
-## Change easing function
+Even though they can be calculated using the properties of `element`, in `misc` are some functions to get the position to scroll, due that they are likely to be needed. Feel free to make a PR to add more, or open an issue to request to add some.
+
+### getDistToElement
```js
-const scrollManager = new Scroll(window, {
- easing: some_easing_function,
-})
+import scrollManager from "scroll-utility"
+
+const element = document.getElementById("some-element")
-// or just for one animation:
-const animation = scrollManager.scrollBy("screen", 1)
-animation.easing = some_easing_function
+const distToScroll = scrollManager.misc.getDistToElement(element, 50, false)
+
+scrollManager.scrollBy(distToScroll)
```
-This [package](https://www.npmjs.com/package/easing-functions) provides easing functions. Or you can create your own
+In this case, the element _some-element_ will be centered in the page.
+The 1st parameter is the element to scroll to.
+The 2nd is a percent, which indicates the degree to be centered, been 0 not centered, 50 in the middle, and 100 sticked to the bottom of the view.
+And the 3rd is _horizontal_, `false` means vertical (default), and `true` horizontal
-# Stack animations and high precision
+Here are some screenshots of how an element is centered using `getDistToElement` and some percent:
-The main idea of this module is to be able of doing several animation at the same time, and still get a desirable outcome.
-It is very difficult to archive precision when scrolling, due to the fact that browsers don't scroll well to floating numbers, they often round it up. So is even more difficult when there are several animations.
-That is the best thing of scroll-utility. It is design to work with multiple animations and keep track on where the scroll position should end.
+0%:
+![top](https://github.com/LeDDGroup/scroll-utility/blob/master/cypress/screenshots/misc.ts/top.png)
+50%:
+![centered](https://github.com/LeDDGroup/scroll-utility/blob/master/cypress/screenshots/misc.ts/centered.png)
+100%:
+![bottom](https://github.com/LeDDGroup/scroll-utility/blob/master/cypress/screenshots/misc.ts/bottom.png)
-For example:
+### getPercentPosition
```js
-scrollManager.scrollBy("value", 500)
-scrollManager.scrollBy("value", 34)
+import scrollManager from "scroll-utility"
+
+cosnt distToScroll = scrollManager.misc.getPercentPosition(50, true)
+
+scrollManager.scrollBy(distToScroll)
```
-1 second from it started to move, it will have been offset its position for 534px
+In this case, it will scroll to the middle of the page
+The 1st is a percent, been 0 the top, 50 in the middle, and 100 the bottom of the page.
+And the 2nd is the _horizontal_, same as above.
-Bear in mind that all animations always stack together, so generally when you use _toPercent_ _toPosition_ _toElement_, you would want to use _stopAllAnimation_, to ensure that there are not any other animation, otherwise they will stack together, which is generally not wanted
+### scrollTo
-for example, if you wish to stop all animations every time the user scroll you could do:
+```js
+import scrollManager from "scroll-utility"
+
+scrollManager.misc.scrollTo(500, 1000, true) // 500px, 1000ms(1s), horizontal scroll
+```
+
+This is the same as [scrollBy](#scrollby), but it doesn't offset the current position, instead it will scroll to the specified value.
+
+### isElementInRange
```js
-const scrollManager = new Scroll(window, {
- onUtilityScroll: () => scrollManager.stopAllAnimations(),
-})
+import scrollManager from "scroll-utility"
+
+const element = document.getElementById("some-element")
+
+scrollManager.onScroll = () => {
+ console.log(scrollManager.misc.isElementInRange(element, false)) // true or false
+}
```
-# Cross-browser compatibility
+`isElementInRange(element)` will return true if the element if visible in its container (ussualy window)
+The 2nd paramater is the direction, `true` _horizontal_, `false` _vertical_ (default)
-Compatibility guaranteed in Firefox, Chrome, Edge, Safari. I mean, I have automated tests for those browsers (with browserstack), in every browser _should_ work too, I looked all over in stackoverflow looking for crossbrowser solutions for accessing dom properties of elements.
-I have manually tested it in a lot of browsers, and it works without problems
+# Stack animations and high precision
-
+The main idea of this module is to be able of doing several animation at the same time, and still get a desirable outcome.
+It is very difficult to archive precision when scrolling, due to the fact that browsers don't scroll well to floating numbers, they often round it up. So is even more difficult when there are several animations.
+That is the best thing of scroll-utility. It is designed to work with multiple animations and keep track on where the scroll position should end.
-Test are made using automate testing with [Browserstack](https://www.browserstack.com) [for open source](https://www.browserstack.com/open-source?ref=pricing).
+For example:
-See tests results [here](https://www.browserstack.com/automate/public-build/QmJOaDZzS3BBOWUrem1PMWw1K29CZjByZjNBcTNyYlE0LzVYZEhFYVg1ST0tLXBOR05wTitscU1PM2FvQ0NrOUlHbHc9PQ==--70960e59e91fc8efc3dced4f2cebeff5665746ca)
+```js
+scrollManager.scrollBy(500, 1000)
+scrollManager.scrollBy(34, 500)
+```
+
+1 second after the scroll starts, it will have been offseted its position for 534px
+
+If you wish to stop all animations every time the user scrolls, you could do:
+
+```js
+scrollManager.onScroll = external => external && scrollManager.stopAllAnimations()
+```
# License
diff --git a/assets/BrowserStack-logo.png b/assets/BrowserStack-logo.png
deleted file mode 100644
index 973bbc5..0000000
Binary files a/assets/BrowserStack-logo.png and /dev/null differ
diff --git a/cypress.json b/cypress.json
new file mode 100644
index 0000000..e6c4ff0
--- /dev/null
+++ b/cypress.json
@@ -0,0 +1,9 @@
+{
+ "baseUrl": "http://localhost:8080",
+ "pluginsFile": "cypress/plugins.js",
+ "integrationFolder": "cypress/tests",
+ "trashAssetsBeforeRuns": true,
+ "video": false,
+ "viewportWidth": 480,
+ "viewportHeight": 320
+}
diff --git a/cypress/common.ts b/cypress/common.ts
new file mode 100644
index 0000000..6958d97
--- /dev/null
+++ b/cypress/common.ts
@@ -0,0 +1,21 @@
+import * as ScrollUtility from "../"
+
+function takeScreenShot(delay: number = 0) {
+ cy.wait(delay).then(() => cy.screenshot("basic", { capture: "viewport" }))
+}
+
+async function withWindow(
+ f: (window: Window & { ScrollUtility: typeof ScrollUtility }) => T,
+) {
+ return cy.window().then(wind => {
+ f(wind as Window & { ScrollUtility: typeof ScrollUtility })
+ })
+}
+
+async function withScrollManager(f: (scrollManager: ScrollUtility.Scroll) => T) {
+ return withWindow(window => {
+ f(window.ScrollUtility.default)
+ })
+}
+
+export { withWindow, takeScreenShot, withScrollManager }
diff --git a/cypress/plugins.js b/cypress/plugins.js
new file mode 100644
index 0000000..e2229c7
--- /dev/null
+++ b/cypress/plugins.js
@@ -0,0 +1,8 @@
+const wp = require("@cypress/webpack-preprocessor")
+
+module.exports = on => {
+ const options = {
+ webpackOptions: require("./webpack.config"),
+ }
+ on("file:preprocessor", wp(options))
+}
diff --git a/cypress/screenshots/misc.ts/bottom.png b/cypress/screenshots/misc.ts/bottom.png
new file mode 100644
index 0000000..a394128
Binary files /dev/null and b/cypress/screenshots/misc.ts/bottom.png differ
diff --git a/cypress/screenshots/misc.ts/centered.png b/cypress/screenshots/misc.ts/centered.png
new file mode 100644
index 0000000..dc5f894
Binary files /dev/null and b/cypress/screenshots/misc.ts/centered.png differ
diff --git a/cypress/screenshots/misc.ts/top.png b/cypress/screenshots/misc.ts/top.png
new file mode 100644
index 0000000..e75fa77
Binary files /dev/null and b/cypress/screenshots/misc.ts/top.png differ
diff --git a/cypress/tests/basic.ts b/cypress/tests/basic.ts
new file mode 100644
index 0000000..ac3490a
--- /dev/null
+++ b/cypress/tests/basic.ts
@@ -0,0 +1,8 @@
+context("ScrollUtility", () => {
+ before(() => {
+ cy.visit("http://localhost:8080")
+ })
+ it("should be defined", () => {
+ cy.window().should("have.property", "ScrollUtility")
+ })
+})
diff --git a/cypress/tests/misc.ts b/cypress/tests/misc.ts
new file mode 100644
index 0000000..bbf920c
--- /dev/null
+++ b/cypress/tests/misc.ts
@@ -0,0 +1,36 @@
+import { withScrollManager, withWindow } from "../common"
+import * as ScrollUtility from "../../"
+
+context("Misc", () => {
+ before(() => {
+ cy.visit("http://localhost:8080")
+ })
+ beforeEach(() => {
+ withScrollManager(scrollManager => {
+ scrollManager.misc.scrollTo(0, 0, false)
+ scrollManager.misc.scrollTo(0, 0, true)
+ })
+ })
+ describe("getDistToElement", () => {
+ it("should work", () => {
+ withWindow(window => {
+ centerElement(window, 0)
+ .screenshot("top", { capture: "viewport" })
+ .then(() => centerElement(window, 50))
+ .screenshot("centered", { capture: "viewport" })
+ .then(() => centerElement(window, 100))
+ .screenshot("bottom", { capture: "viewport" })
+ })
+ })
+ })
+})
+
+function centerElement(window: Window & { ScrollUtility: typeof ScrollUtility }, percent: number) {
+ const scrollManager = window.ScrollUtility.default
+ const element = window.document.getElementById("some-element")
+ const v = scrollManager.misc.getDistToElement(element, percent)
+ const h = scrollManager.misc.getDistToElement(element, 50, true)
+ scrollManager.scrollBy(v, 0)
+ scrollManager.scrollBy(h, 0, true)
+ return cy.wait(1)
+}
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
new file mode 100644
index 0000000..10e92c2
--- /dev/null
+++ b/cypress/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "module": "commonjs",
+ "esModuleInterop": true,
+ "baseUrl": "../node_modules",
+ "types": ["cypress"],
+ "skipLibCheck": true
+ },
+ "include": [
+ "**/*.ts"
+ ]
+ }
diff --git a/cypress/webpack.config.js b/cypress/webpack.config.js
new file mode 100644
index 0000000..6711036
--- /dev/null
+++ b/cypress/webpack.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ loader: "ts-loader",
+ options: {
+ configFile: "tsconfig.json",
+ },
+ },
+ ],
+ },
+ resolve: {
+ extensions: [".ts", ".tsx", ".js"],
+ },
+}
diff --git a/demo/.commitlintrc.json b/demo/.commitlintrc.json
deleted file mode 100644
index c30e5a9..0000000
--- a/demo/.commitlintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "extends": ["@commitlint/config-conventional"]
-}
diff --git a/demo/.npmignore b/demo/.npmignore
deleted file mode 100644
index bfe3b8d..0000000
--- a/demo/.npmignore
+++ /dev/null
@@ -1 +0,0 @@
-tsconfig.json
\ No newline at end of file
diff --git a/demo/.prettierrc b/demo/.prettierrc
deleted file mode 100644
index 8173d4e..0000000
--- a/demo/.prettierrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "tabWidth": 2,
- "printWidth": 100,
- "semi": false,
- "singleQuote": false,
- "trailingComma": "all"
-}
\ No newline at end of file
diff --git a/demo/colors.ts b/demo/colors.ts
deleted file mode 100644
index 776eb5a..0000000
--- a/demo/colors.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export enum Colors {
- primary = "dodgerblue",
- secondary = "#3f4c6b",
- tertiary = "#4f85bb",
- black = "#2B2D27",
- background = "#fcfff4",
- transparent = "rgba(252, 255, 244, 0.8)",
-}
-
-export default Colors
diff --git a/demo/components/App.tsx b/demo/components/App.tsx
deleted file mode 100644
index 4b3cd86..0000000
--- a/demo/components/App.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from "react"
-import { Grid } from "./Grid"
-import windowScrollManager from "./window-scroll-manager"
-import CenterElement from "./CenterElement"
-import Section from "./Section"
-import ScrollBy from "./ScrollBy"
-import ScrollTo from "./ScrollTo"
-import RightBar from "./RigthBar"
-
-interface IState {
- rulers: boolean
-}
-
-class GridSystem extends React.Component<
- {},
- { percentRulers?: boolean; positionRulers?: boolean }
-> {
- constructor(props) {
- super(props)
- this.state = {
- percentRulers: true,
- positionRulers: true,
- }
- }
- render() {
- const topbar = (
-