refactoring to ts

Author: jscottsmith

.eslintrc

@@ -14,205 +14,5 @@
         }
     },
     "parser": "babel-eslint",
-    "plugins": ["babel", "react", "jest"],
-    "rules": {
-        /* Possible Errors */
-        "comma-dangle": [1, "always-multiline"],
-        "no-cond-assign": [1, "except-parens"],
-        "no-console": 0,
-        "no-constant-condition": 1,
-        "no-control-regex": 1,
-        "no-debugger": 1,
-        "no-dupe-args": 1,
-        "no-dupe-keys": 1,
-        "no-duplicate-case": 0,
-        "no-empty-character-class": 1,
-        "no-empty": 0,
-        "no-ex-assign": 1,
-        "no-extra-boolean-cast": 1,
-        "no-extra-parens": 0,
-        "no-extra-semi": 1,
-        "no-func-assign": 1,
-        "no-inner-declarations": [1, "functions"],
-        "no-invalid-regexp": 1,
-        "no-irregular-whitespace": 1,
-        "no-negated-in-lhs": 1,
-        "no-obj-calls": 1,
-        "no-regex-spaces": 1,
-        "no-reserved-keys": 0,
-        "no-sparse-arrays": 1,
-        "no-unexpected-multiline": 1,
-        "no-unreachable": 1,
-        "use-isnan": 1,
-        "valid-jsdoc": 0,
-        "valid-typeof": 1,
-
-        /* Best Practices */
-        "accessor-pairs": 0,
-        "block-scoped-var": 0, // see Babel section
-        "complexity": 0,
-        "consistent-return": 1,
-        "curly": 0,
-        "default-case": 0,
-        "dot-notation": [1, { "allowKeywords": true, "allowPattern": "" }],
-        "dot-location": [1, "property"],
-        "eqeqeq": 1,
-        "guard-for-in": 0,
-        "no-alert": 1,
-        "no-caller": 1,
-        "no-div-regex": 1,
-        "no-else-return": 1,
-        "no-eq-null": 0,
-        "no-eval": 1,
-        "no-extend-native": 0,
-        "no-extra-bind": 1,
-        "no-fallthrough": 0,
-        "no-floating-decimal": 1,
-        "no-implied-eval": 1,
-        "no-iterator": 1,
-        "no-labels": 1,
-        "no-lone-blocks": 1,
-        "no-loop-func": 1,
-        "no-multi-spaces": 0,
-        "no-multi-str": 1,
-        "no-native-reassign": 1,
-        "no-new-func": 1,
-        "no-new-wrappers": 1,
-        "no-new": 1,
-        "no-octal-escape": 1,
-        "no-octal": 1,
-        "no-param-reassign": 0,
-        "no-process-env": 0,
-        "no-proto": 0,
-        "no-redeclare": 1,
-        "no-return-assign": 1,
-        "no-script-url": 1,
-        "no-self-compare": 1,
-        "no-sequences": 1,
-        "no-throw-literal": 1,
-        "no-unused-expressions": 0,
-        "no-void": 0,
-        "no-warning-comments": 0,
-        "no-with": 1,
-        "radix": 1,
-        "vars-on-top": 1,
-        "wrap-iife": [1, "inside"],
-        "yoda": [1, "never"],
-
-        /* Strict Mode */
-        "strict": [1, "never"],
-
-        /* Variables */
-        "no-catch-shadow": 0,
-        "no-delete-var": 1,
-        "no-label-var": 1,
-        "no-shadow-restricted-names": 1,
-        "no-shadow": 1,
-        "no-undef-init": 1,
-        "no-undef": 2,
-        "no-undefined": 0,
-        "no-unused-vars": 2,
-        "no-use-before-define": 0,
-
-        /* Node.js */
-        "handle-callback-err": 1,
-        "no-mixed-requires": 1,
-        "no-new-require": 1,
-        "no-path-concat": 1,
-        "no-process-exit": 1,
-        "no-restricted-modules": [1, ""], // add any unwanted Node.js core modules
-        "no-sync": 1,
-
-        /* Stylistic Issues */
-        "array-bracket-spacing": [1, "never"],
-        "brace-style": [2, "1tbs"],
-        "camelcase": [1, { "properties": "always" }],
-        "comma-spacing": [1, { "before": false, "after": true }],
-        "comma-style": [1, "last"],
-        "computed-property-spacing": 0,
-        "consistent-this": 0,
-        "eol-last": 1,
-        "func-names": 0,
-        "func-style": 0,
-        "indent": 0,
-        "key-spacing": [1, { "beforeColon": false, "afterColon": true }],
-        "linebreak-style": 0,
-        "max-nested-callbacks": [0, 3],
-        "new-cap": 0, // see Babel section
-        "new-parens": 1,
-        "newline-after-var": 0,
-        "no-array-constructor": 1,
-        "no-continue": 1,
-        "no-inline-comments": 0,
-        "no-lonely-if": 1,
-        "no-mixed-spaces-and-tabs": 1,
-        "no-multiple-empty-lines": [1, { "max": 1 }],
-        "no-nested-ternary": 0,
-        "no-new-object": 1,
-        "no-spaced-func": 1,
-        "no-ternary": 0,
-        "no-trailing-spaces": 1,
-        "no-underscore-dangle": 0,
-        "no-unneeded-ternary": 1,
-        "object-curly-spacing": 0, // see Babel section
-        "one-var": [1, "never"],
-        "operator-assignment": [1, "never"],
-        "padded-blocks": [0, "never"],
-        "quote-props": [0, "as-needed"],
-        "quotes": 0,
-        "semi-spacing": [1, { "before": false, "after": true }],
-        "semi": [1, "always"],
-        "sort-vars": 0,
-        "space-after-keywords": 0,
-        "space-before-blocks": [1, "always"],
-        "space-before-function-paren": [1, "never"],
-        "space-in-parens": [1, "never"],
-        "space-infix-ops": 1,
-        "space-unary-ops": 0,
-        "spaced-comment": [1, "always"],
-        "wrap-regex": 1,
-
-        /* ECMAScript 6 */
-        "constructor-super": 1,
-        "generator-star-spacing": 1,
-        "no-this-before-super": 1,
-        "no-var": 1,
-        "object-shorthand": 1,
-        "prefer-const": 1,
-
-        /* Legacy */
-        "max-depth": [0, 3],
-        "max-len": [0, 121, 2],
-        "max-params": 0,
-        "max-statements": 0,
-        "no-bitwise": 1,
-        "no-plusplus": 0,
-
-        /* Babel */
-        "babel/new-cap": 1,
-        "babel/object-curly-spacing": [1, "always"],
-
-        /* React */
-        "jsx-quotes": [1, "prefer-double"],
-        "react/display-name": 1,
-        "react/jsx-boolean-value": 1,
-        "react/jsx-indent": [1, 4],
-        "react/jsx-indent-props": [1, 4],
-        "react/jsx-no-duplicate-props": 1,
-        "react/jsx-no-undef": 1,
-        "react/jsx-sort-props": 0,
-        "react/jsx-uses-react": 1,
-        "react/jsx-uses-vars": 1,
-        "react/no-danger": 1,
-        "react/no-did-mount-set-state": 1,
-        "react/no-did-update-set-state": 1,
-        "react/no-multi-comp": 0,
-        "react/no-unknown-property": 1,
-        "react/prop-types": 1,
-        "react/react-in-jsx-scope": 1,
-        "react/self-closing-comp": 1,
-        "react/sort-comp": 1,
-        "react/sort-prop-types": 1,
-        "react/wrap-multilines": 0
-    }
+    "plugins": ["babel", "react", "jest"]
 }

src/classes/Bounds.js renamed to src/classes/Bounds.ts

@@ -1,4 +1,11 @@
 class Bounds {
+    totalDistY: number;
+    totalDistX: number;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+
     constructor(rect, offsets, view) {
         const { y0, y1, x1, x0 } = offsets;
 

src/classes/Element.js renamed to src/classes/Element.ts

@@ -8,8 +8,24 @@ import {
 import { VERTICAL } from '../constants';
 import Bounds from './Bounds';
 import Rect from './Rect';
+import { ParallaxStartEndOffsets } from '../types';
 
 export class Element {
+    elInner: HTMLElement;
+    elOuter: HTMLElement;
+    // TODO
+    props: any;
+    scrollAxis: 'vertical' | 'horizontal';
+    id: number;
+    offsets: ParallaxStartEndOffsets;
+    isInView: boolean;
+    percent: number;
+
+    updatePosition: (view: any, scroll: any) => void;
+
+    rect: Rect;
+    bounds: Bounds;
+
     constructor(options) {
         this.elInner = options.elInner;
         this.elOuter = options.elOuter;

src/classes/ParallaxController.js renamed to src/classes/ParallaxController.ts

@@ -1,11 +1,24 @@
+import { View } from './View';
+import { Scroll } from './Scroll';
+
 class Rect {
-    constructor(el, view, scroll) {
+    height: number;
+    width: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    originTotalDistY: number;
+    originTotalDistX: number;
+
+    constructor(el: HTMLElement, view: View, scroll: Scroll) {
         let rect = el.getBoundingClientRect();
 
         // rect is based on viewport -- must adjust for relative scroll container
         if (view.scrollContainer) {
             const scrollRect = view.scrollContainer.getBoundingClientRect();
             rect = {
+                ...rect,
                 top: rect.top - scrollRect.top,
                 right: rect.right - scrollRect.left,
                 bottom: rect.bottom - scrollRect.top,

src/classes/Rect.js renamed to src/classes/Rect.ts

@@ -0,0 +1,14 @@
+export class Scroll {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.setScroll(x, y);
+    }
+
+    setScroll(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+        return this;
+    }
+}

src/classes/Scroll.js

@@ -0,0 +1,24 @@
+export class View {
+    scrollContainer: HTMLElement;
+    width: number;
+    height: number;
+
+    constructor({
+        width,
+        height,
+        scrollContainer,
+    }: {
+        width: number;
+        height: number;
+        scrollContainer: HTMLElement;
+    }) {
+        this.scrollContainer = scrollContainer;
+        this.setSize(width, height);
+    }
+
+    setSize(width: number, height: number) {
+        this.width = width;
+        this.height = height;
+        return this;
+    }
+}