Unreviewed, add a demo page for an input events blog post
authorwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Jan 2017 04:22:29 +0000 (04:22 +0000)
committerwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Jan 2017 04:22:29 +0000 (04:22 +0000)
* demos/input-events/index.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@211251 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/input-events/index.html [new file with mode: 0644]

index 5159477..12b1558 100644 (file)
@@ -1,3 +1,9 @@
+2017-01-26  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Unreviewed, add a demo page for an input events blog post
+
+        * demos/input-events/index.html: Added.
+
 2017-01-20  Antoine Quint  <graouts@apple.com>
 
         Web Animations should be off by default and enabled as an experimental feature
diff --git a/Websites/webkit.org/demos/input-events/index.html b/Websites/webkit.org/demos/input-events/index.html
new file mode 100644 (file)
index 0000000..2cd9c38
--- /dev/null
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <style>
+        .quote {
+            padding-top: 5px;
+            padding-right: 5px;
+            padding-bottom: 5px;
+            padding-left: 12px;
+            border-left: 5px lightblue solid;
+            color: gray;
+            background-color: #EFFEFE;
+        }
+
+        #editor {
+            width: 480px;
+            height: 320px;
+            border: 1px solid #DFDFDF;
+            border-radius: 4px;
+            padding: 10px;
+            outline: none;
+            overflow: scroll;
+            font-family: -apple-system;
+        }
+
+        #editor > p:first-child {
+            margin-top: 0;
+        }
+
+        #editor > p:last-child {
+            margin-bottom: 0;
+        }
+
+        #editor > p,
+        .quote > p {
+            margin: 8px auto;
+        }
+    </style>
+    <script>
+        function setup() {
+            editor.addEventListener("beforeinput", event => {
+                if (event.inputType.match(/^format/))
+                    return;
+
+                for (let staticRange of event.getTargetRanges()) {
+                    if (nodeIsInsideQuote(staticRange.startContainer)
+                        || nodeIsInsideQuote(staticRange.endContainer)) {
+                        event.preventDefault();
+                        return;
+                    }
+                }
+            });
+
+            function nodeIsInsideQuote(node) {
+                let currentElement = node.nodeType == Node.ELEMENT_NODE ? node : node.parentElement;
+                while (currentElement) {
+                    if (currentElement.classList.contains("quote"))
+                        return true;
+                    currentElement = currentElement.parentElement;
+                }
+                return false;
+            }
+        }
+    </script>
+</head>
+<body onload="setup()">
+    <div id="editor" contenteditable>
+        <p>This is some regular content.</p>
+        <p>This text is fully editable.</p>
+        <div class="quote">
+            <p>This is some quoted content.</p>
+            <p>You can only change the format of this text.</p>
+        </div>
+        <p>This is some more regular content.</p>
+        <p>This text is also fully editable.</p>
+    </div>
+</body>
+</html>