Initial code

Author: d6u

.gitignore

@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+# TypeScript generated code
+lib

.nvmrc

@@ -0,0 +1 @@
+6.9

README.md

@@ -1,2 +1,3 @@
 # resize-observer-lite
-A ResizeObserver polyfill that only works for elements that can contain child elements.
+
+A ResizeObserver polyfill that has limited functionality of ResizeObserver.

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "resize-observer-lite",
+  "version": "0.0.0",
+  "description": "A ResizeObserver polyfill that has limited functionality of ResizeObserver.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/d6u/resize-observer-lite.git"
+  },
+  "keywords": [],
+  "author": "Daiwei Lu <[email protected]> (http://daiwei.lu/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/d6u/resize-observer-lite/issues"
+  },
+  "homepage": "https://github.com/d6u/resize-observer-lite#readme",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "element-resize-detector": "1.1.9"
+  },
+  "devDependencies": {
+    "typescript": "2.0.3"
+  },
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "tsc",
+    "pretest": "npm run clean && npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "preversion": "npm run clean && npm run build"
+  }
+}

src/index.ts

@@ -0,0 +1,84 @@
+import elementResizeDetectorMaker = require('element-resize-detector');
+
+export default class ResizeObserverLite {
+  private hasResizeObserver: boolean;
+  private erd?: elementResizeDetectorMaker.ElementResizeDetectorInstance;
+  private listenedElements: HTMLElement[] = [];
+  private rz?: ResizeObserver;
+
+  constructor(private handler: ResizeObserverLiteEntriesHandler) {
+    this.hasResizeObserver = typeof (<any> window).ResizeObserver !== 'undefined';
+    if (!this.hasResizeObserver) {
+      this.erd = elementResizeDetectorMaker({strategy: 'scroll'});
+    } else {
+      this.rz = new ResizeObserver((entries) => {
+        this.handler(getSize(entries[0].target));
+      });
+    }
+  }
+
+  observe(element: HTMLElement) {
+    if (!this.hasResizeObserver) {
+      this.erd!.listenTo(element, (element) => {
+        this.handler(getSize(element));
+      });
+      this.listenedElements.push(element);
+    } else {
+      this.rz!.observe(element);
+    }
+  }
+
+  disconnect() {
+    if (!this.hasResizeObserver) {
+      for (const element of this.listenedElements) {
+        this.erd!.uninstall(element);
+      }
+      this.listenedElements = [];
+    } else {
+      this.rz!.disconnect();
+    }
+  }
+}
+
+function getSize(element: HTMLElement): ResizeObserverSize {
+  return {
+    width: getNumber(window.getComputedStyle(element)['width']!),
+    height: getNumber(window.getComputedStyle(element)['height']!)
+  };
+}
+
+function getNumber(str: string): number {
+  const m = /^([0-9\.]+)px$/.exec(str);
+  return m ? parseFloat(m[1]) : 0;
+}
+
+export interface ResizeObserverLiteEntriesHandler {
+  (size: ResizeObserverSize): void;
+}
+
+export interface ResizeObserverSize {
+  width: number;
+  height: number;
+}
+
+declare class ResizeObserver {
+  constructor(handler: ResizeObserverEntriesHandler);
+  observe(element: HTMLElement): void;
+  disconnect(): void;
+}
+
+interface ResizeObserverEntriesHandler {
+  (entries: ResizeObserverEntry[]): void;
+}
+
+interface ResizeObserverEntry {
+  contentRect: {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+  };
+  target: HTMLElement;
+}

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compileOnSave": false,
+  "enableAutoDiscovery": false,
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "lib",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noResolve": true,
+    "outDir": "lib",
+    "pretty": true,
+    "sourceMap": true,
+    "target": "es5",
+    "moduleResolution": "node",
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowUnreachableCode": false,
+    "forceConsistentCasingInFileNames": true,
+    "strictNullChecks": true
+  },
+  "include": [
+    "typings-custom/*.d.ts",
+    "src/*.ts"
+  ]
+}

typings-custom/element-resize-detector.d.ts

@@ -0,0 +1,24 @@
+declare module 'element-resize-detector' {
+  namespace elementResizeDetectorMaker {
+    interface ElementResizeDetectorMaker {
+      (opts: ElementResizeDetectorMakerOptions): ElementResizeDetectorInstance;
+    }
+
+    interface ElementResizeDetectorMakerOptions {
+      strategy: 'scroll';
+    }
+
+    interface ElementResizeDetectorInstance {
+      listenTo(element: HTMLElement, handler: ElementResizeDetectorEventHandler): void;
+      uninstall(element: HTMLElement): void;
+    }
+
+    interface ElementResizeDetectorEventHandler {
+      (element: HTMLElement): void;
+    }
+  }
+
+  const elementResizeDetectorMaker: elementResizeDetectorMaker.ElementResizeDetectorMaker;
+
+  export = elementResizeDetectorMaker;
+}