Moved explainer from async-dom. Added sample-code

WICG · Jul 24, 2018 · 2f252c8 · 2f252c8
1 parent 1f1c607
commit 2f252c8
Show file tree

Hide file tree

Showing 7 changed files with 654 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -2,3 +2,8 @@
 
 This repo is a collection of documents, sample code, and discussions surrounding
 the Display Locking proposal.
+
+- [Display Locking
+explainer](https://github.com/chrishtr/display-locking/blob/master/explainer.md)
+- [Sample
+  code](https://github.com/chrishtr/display-locking/blob/master/sample-code)
diff --git a/explainer.md b/explainer.md
diff --git a/resources/spinner_jank.jpg b/resources/spinner_jank.jpg
diff --git a/resources/spinner_without_jank_1.jpg b/resources/spinner_without_jank_1.jpg
diff --git a/resources/spinner_without_jank_2.jpg b/resources/spinner_without_jank_2.jpg
diff --git a/resources/spinner_without_jank_3.jpg b/resources/spinner_without_jank_3.jpg
diff --git a/sample-code/basic_usage.html b/sample-code/basic_usage.html
@@ -0,0 +1,35 @@
+<!doctype HTML>
+
+<style>
+#lockable {
+  width: 200px;
+  height: 50px;
+  contain: paint;
+  background-color: lightblue;
+}
+</style>
+
+<div id="lockable"></div>
+
+<script>
+async function updateLockable() {
+  let element = document.getElementById("lockable");
+
+  // Get the lock if the user-agent supports getDisplayLock.
+  let lock = element.getDisplayLock ? element.getDisplayLock() : undefined;
+  // Await lock acquisition.
+  if (lock)
+    await lock.acquire();
+
+  // Update the contents of a locked element.
+  element.innerText = "Lorem ipsum.";
+
+  // Commit. We don't need to await the resolution, since we don't need to do
+  // anything when the promise resolves.
+  if (lock)
+    lock.commit();
+}
+
+window.onload = updateLockable;
+</script>
+