Migrate to Typescript (#350)

* Migrate to Typescript

* Add types and adjust reame

Co-authored-by: alpanayotov <[email protected]>

Author: scriptex

.eslintrc

@@ -0,0 +1,15 @@
+{
+	"env": {
+		"node": true,
+		"browser": true
+	},
+	"extends": ["prettier", "plugin:@typescript-eslint/recommended"],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"project": "tsconfig.json",
+		"sourceType": "module"
+	},
+	"plugins": ["@typescript-eslint"],
+	"ignorePatterns": ["*.js", "*.mjs"],
+	"rules": {}
+}

.github/workflows/build.yml

@@ -1,21 +1,14 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
-on:
-    push:
-        branches: [master]
-    pull_request:
-        branches: [master]
+on: [push, pull_request]
 
 jobs:
     build:
         runs-on: ubuntu-latest
 
         strategy:
             matrix:
-                node-version: [12.x, 14.x, 16.x]
+                node-version: [18.x]
 
         steps:
             - uses: actions/checkout@v3
@@ -24,4 +17,5 @@ jobs:
               with:
                   node-version: ${{ matrix.node-version }}
             - run: yarn
+            - run: yarn lint
             - run: yarn build

.gitignore

@@ -16,3 +16,5 @@ node_modules/
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+dist

.npmignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # Dependency directory
-node_modules/
+node_modules
 
 # Misc
 .DS_Store
@@ -17,27 +17,27 @@ node_modules/
 ehthumbs.db
 Thumbs.db
 
-# EditorConfig
+# Config folders and files
+.github
+_config.yml
+_.config.yml
+.codebeatsettings
 .editorconfig
-
-# Git
-.gitignore
+.eslintrc
 .gitattributes
-
-# CI
-.travis.yml
-
-# lock files
-yarn.lock
-
-# Prettier
-.prettierrc
+.gitignore
+.nvmrc
 .prettierignore
-
-# Config
-.babelrc
-.github
+.prettierrc
+.stylelintignore
+.stylelintrc
+.travis.yml
 .whitesource
 renovate.json
-rollup.config.js
-webpack.config.js
+tsconfig.json
+tslint.json
+yarn.lock
+
+!dist
+demo
+rollup.config.mjs

.travis.yml

@@ -5,4 +5,5 @@ node_js:
 install:
     - yarn
 script:
+    - yarn lint
     - yarn build

.whitesource

@@ -1,8 +1,8 @@
 {
-  "checkRunSettings": {
-    "vulnerableCheckRunConclusionLevel": "success"
-  },
-  "issueSettings": {
-    "minSeverityLevel": "LOW"
-  }
+	"generalSettings": {
+		"shouldScanRepo": true
+	},
+	"checkRunSettings": {
+		"vulnerableCheckRunConclusionLevel": "success"
+	}
 }

README.md

@@ -1,15 +1,14 @@
 [![GitHub release](https://img.shields.io/github/release/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/releases/latest)
 [![GitHub issues](https://img.shields.io/github/issues/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/issues)
 [![GitHub last commit](https://img.shields.io/github/last-commit/three11/animate-top-offset.svg)](https://github.com/three11/animate-top-offset/commits/master)
-[![Github file size](https://img.shields.io/github/size/three11/animate-top-offset/dist/animate-top-offset.min.js.svg)](https://github.com/three11/animate-top-offset/)
 [![Build Status](https://travis-ci.org/three11/animate-top-offset.svg?branch=master)](https://travis-ci.org/three11/animate-top-offset)
 [![npm](https://img.shields.io/npm/dt/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset)
 [![npm](https://img.shields.io/npm/v/@three11/animate-top-offset.svg)](https://www.npmjs.com/package/@three11/animate-top-offset)
 [![Analytics](https://ga-beacon.appspot.com/UA-83446952-1/github.com/three11/animate-top-offset/README.md)](https://github.com/three11/animate-top-offset/)
 
 # Animate Top Offset
 
-Vanilla JS animated scroll to a given offset.
+> Scroll a container to a specific Y offset
 
 ## Install
 
@@ -23,35 +22,19 @@ or
 yarn add @three11/animate-top-offset
 ```
 
-or
-
-Just download this repository and link the files located in dist folder:
-
-```html
-<script src="path-to-animate-top-offset/dist/animate-top-offset.min.js"></script>
-```
-
-or
-
-Include it from Unpkg CDN
-
-```html
-<script src="//unpkg.com/@three11/animate-top-offset/dist/animate-top-offset.min.js"></script>
-```
-
 ## Usage
 
 First, `import` the module:
 
-```javascript
+```ts
 import animateTopOffset from '@three11/animate-top-offset';
 ```
 
 Then use the module:
 
-#### With one element
+### With one element
 
-```javascript
+```ts
 const button = document.getElementById('button');
 
 button.addEventListener('click', event => {
@@ -64,9 +47,9 @@ button.addEventListener('click', event => {
 });
 ```
 
-#### With many elements
+### With many elements
 
-```javascript
+```ts
 const buttons = document.querySelectorAll('.js-scroll-to');
 
 // Instead of Array.from you can spread the buttons: [...buttons]
@@ -77,14 +60,14 @@ Array.from(buttons).forEach(button => {
 		const href = event.target.getAttribute('href');
 		const offset = doc.querySelector(href).offsetTop;
 
-		animateTopOffset(offset);
+		animateTopOffset({ offset });
 	});
 });
 ```
 
 **The examples above assume that you have a modern ES6 setup installed and configured (Webpack, Babel, etc). If not you can always fallback to ES5:**
 
-```javascript
+```ts
 const buttons = document.querySelectorAll('.js-scroll-to');
 
 [].forEach.call(buttons, function (button) {
@@ -101,31 +84,44 @@ const buttons = document.querySelectorAll('.js-scroll-to');
 
 ## Arguments
 
-The function accepts four arguments:
+The function accepts the following options:
 
--   `offset`
--   `container`
--   `speed`
--   `easing`
+| Name        | Type                                                 | Required | Description                    | Default value |
+| ----------- | ---------------------------------------------------- | -------- | ------------------------------ | ------------- |
+| `offset`    | number                                               | false    | Offset to scroll to            | 0             |
+| `container` | `HTMLElement` \| `Window`                            | false    | The element to scroll          | window        |
+| `speed`     | number                                               | false    | Speed of the scroll animation  | 200           |
+| `easing`    | 'easeOutSine' \| 'easeInOutSine' \| 'easeInOutQuint' | false    | Easing of the scroll animation | 'easeOutSine' |
+| `easings`   | Record<string, (pos: number) => number>              | false    | List of easing equations       | See below     |
 
-```javascript
-animateTopOffset(0, window, 2000, 'easeOutSine');
+```ts
+animateTopOffset({ offset: 0, container: window, speed: 2000, easing: 'easeOutSine', easings: easingEquations });
 ```
 
-Default values are:
+**Calling the function with the default values (`animateTopOffset()`) will scroll the window back to top.**
+
+## Easings
 
--   `offset` = 0
--   `container` = `window`
--   `speed` = 2000
--   `easing` = `'easeOutSine'`
+`animateTopOffset` provides the ability to specify a custom list of easing functions.
+The default one contains three easings: 'easeOutSine', 'easeInOutSine' and 'easeInOutQuint'.
 
-**Calling the function with the default values (`animateTopOffset()`) will scroll the window back to top.**
+The shape of the list is the following:
 
-There are three built-in easing functions:
+```ts
+const easingEquations: Record<string, (pos: number) => number> = {
+	easeOutSine: (pos: number) => Math.sin(pos * (Math.PI / 2)),
+	easeInOutSine: (pos: number) => -0.5 * (Math.cos(Math.PI * pos) - 1),
+	easeInOutQuint: (pos: number) => {
+		if ((pos /= 0.5) < 1) {
+			return 0.5 * Math.pow(pos, 5);
+		}
+
+		return 0.5 * (Math.pow(pos - 2, 5) + 2);
+	}
+};
+```
 
--   `'easeOutSine'`
--   `'easeInOutSine'`
--   `'easeInOutQuint'`
+**The easing argument should match one of the keys of the `easings` argument.`**
 
 ## Demo
 

_.config.yml

@@ -0,0 +1,14 @@
+plugins:
+    - jekyll-relative-links
+relative_links:
+    enabled: true
+    collections: true
+include:
+    - CONTRIBUTING.md
+    - README.md
+    - LICENSE.md
+    - COPYING.md
+    - CODE_OF_CONDUCT.md
+    - CONTRIBUTING.md
+    - ISSUE_TEMPLATE.md
+    - PULL_REQUEST_TEMPLATE.md

_config.yml

@@ -1 +1 @@
-theme: jekyll-theme-slate
+theme: jekyll-theme-slate