Fix lint issues resulting from switching to airbnb (#94)

* Fix lint issues resulting from switching to airbnb.

* Case sensitivity change

* Fix lint script to actually lint tsx files

src/components/Output/custom-els/TwoUp/index.ts

@@ -0,0 +1,111 @@
+import * as styles from './styles.css';
+import { PointerTracker, Pointer } from '../../../../lib/PointerTracker';
+
+const legacyClipCompat = 'legacy-clip-compat';
+
+/**
+ * A split view that the user can adjust. The first child becomes
+ * the left-hand side, and the second child becomes the right-hand side.
+ */
+export default class TwoUp extends HTMLElement {
+  static get observedAttributes () { return [legacyClipCompat]; }
+
+  private readonly _handle = document.createElement('div');
+  /**
+   * The position of the split in pixels.
+   */
+  private _position = 0;
+  /**
+   * The value of _position when the pointer went down.
+   */
+  private _positionOnPointerStart = 0;
+  /**
+   * Has connectedCallback been called yet?
+   */
+  private _everConnected = false;
+
+  constructor () {
+    super();
+    this._handle.className = styles.twoUpHandle;
+
+    // Watch for children changes.
+    // Note this won't fire for initial contents,
+    // so _childrenChange is also called in connectedCallback.
+    new MutationObserver(() => this._childrenChange())
+      .observe(this, { childList: true });
+
+    // Watch for pointers on the handle.
+    const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
+      start: (_, event) => {
+        // We only want to track 1 pointer.
+        if (pointerTracker.currentPointers.length === 1) return false;
+        event.preventDefault();
+        this._positionOnPointerStart = this._position;
+        return true;
+      },
+      move: () => {
+        this._pointerChange(
+          pointerTracker.startPointers[0],
+          pointerTracker.currentPointers[0],
+        );
+      },
+    });
+  }
+
+  connectedCallback () {
+    this._childrenChange();
+    if (!this._everConnected) {
+      // Set the initial position of the handle.
+      requestAnimationFrame(() => {
+        const bounds = this.getBoundingClientRect();
+        this._position = bounds.width / 2;
+        this._setPosition();
+      });
+      this._everConnected = true;
+    }
+  }
+
+  /**
+   * If true, this element works in browsers that don't support clip-path (Edge).
+   * However, this means you'll have to set the height of this element manually.
+   */
+  get noClipPathCompat () {
+    return this.hasAttribute(legacyClipCompat);
+  }
+
+  set noClipPathCompat (val: boolean) {
+    if (val) {
+      this.setAttribute(legacyClipCompat, '');
+    } else {
+      this.removeAttribute(legacyClipCompat);
+    }
+  }
+
+  /**
+   * Called when element's child list changes
+   */
+  private _childrenChange () {
+    // Ensure the handle is the last child.
+    // The CSS depends on this.
+    if (this.lastElementChild !== this._handle) {
+      this.appendChild(this._handle);
+    }
+  }
+
+  /**
+   * Called when a pointer moves.
+   */
+  private _pointerChange (startPoint: Pointer, currentPoint: Pointer) {
+    const bounds = this.getBoundingClientRect();
+    this._position = this._positionOnPointerStart + (currentPoint.clientX - startPoint.clientX);
+    // Clamp position to element bounds.
+    this._position = Math.max(0, Math.min(this._position, bounds.width));
+    this._setPosition();
+  }
+
+  private _setPosition () {
+    this.style.setProperty('--split-point', `${this._position}px`);
+  }
+}
+
+customElements.define('two-up', TwoUp);