Title: [211251] trunk/Websites/webkit.org
- Revision
- 211251
- Author
- wenson_hs...@apple.com
- Date
- 2017-01-26 20:22:29 -0800 (Thu, 26 Jan 2017)
Log Message
Unreviewed, add a demo page for an input events blog post
* demos/input-events/index.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (211250 => 211251)
--- trunk/Websites/webkit.org/ChangeLog 2017-01-27 02:52:50 UTC (rev 211250)
+++ trunk/Websites/webkit.org/ChangeLog 2017-01-27 04:22:29 UTC (rev 211251)
@@ -1,3 +1,9 @@
+2017-01-26 Wenson Hsieh <wenson_hs...@apple.com>
+
+ Unreviewed, add a demo page for an input events blog post
+
+ * demos/input-events/index.html: Added.
+
2017-01-20 Antoine Quint <grao...@apple.com>
Web Animations should be off by default and enabled as an experimental feature
Added: trunk/Websites/webkit.org/demos/input-events/index.html (0 => 211251)
--- trunk/Websites/webkit.org/demos/input-events/index.html (rev 0)
+++ trunk/Websites/webkit.org/demos/input-events/index.html 2017-01-27 04:22:29 UTC (rev 211251)
@@ -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>
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
