Merge pull request #19779 from kenchris/master

Add definitions for W3C Screen Orientation API

types/w3c-screen-orientation/index.d.ts

@@ -0,0 +1,19 @@
+// Type definitions for W3C Screen Orientation API 1.0
+// Project: https://www.w3.org/TR/screen-orientation/
+// Definitions by: Kenneth Rohde Christiansen <https://github.com/kenchris>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+type OrientationType = "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";
+type OrientationLockType = "any" | "natural" | "landscape" | "portrait" | "portrait-primary" | "portrait-secondary" | "landscape-primary" | "landscape-secondary";
+
+interface ScreenOrientation extends EventTarget {
+    lock(orientation: OrientationLockType): Promise<void>;
+    unlock(): void;
+    readonly type: OrientationType;
+    readonly angle: number;
+    addEventListener(type: "change", listener: (this: this, ev: Event) => any, useCapture?: boolean): void;
+}
+
+interface Screen {
+    readonly orientation: ScreenOrientation;
+}

types/w3c-screen-orientation/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": false,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "w3c-screen-orientation-tests.ts"
+    ]
+}

types/w3c-screen-orientation/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/w3c-screen-orientation/w3c-screen-orientation-tests.ts

@@ -0,0 +1,36 @@
+// Example 1 (from the spec):
+const show = () => {
+    console.log("Orientation type is " + screen.orientation.type);
+    console.log("Orientation angle is " + screen.orientation.angle);
+};
+
+screen.orientation.addEventListener("change", show);
+window.onload = show;
+
+// Example 2 (from the spec):
+const start = () => {
+    document.onfullscreenchange = () => {
+        screen.orientation.lock('natural').then(startInternal);
+    };
+    document.documentElement.requestFullscreen();
+};
+
+// Example 3 (from the spec):
+const startInternal = () => {};
+
+const start2 = () => {
+    screen.orientation.lock('landscape-primary').then(startInternal, () => {
+        alert('To start, rotate your screen to landscape.');
+
+        const orientationChangeHandler = () => {
+            if (!screen.orientation.type.startsWith('landscape')) {
+                return;
+            }
+            screen.orientation.removeEventListener('change', orientationChangeHandler);
+            startInternal();
+        };
+
+        screen.orientation.addEventListener('change', orientationChangeHandler);
+    });
+};
+window.onload = start2;