Refactor, and add example for CSS filter

Will Bamberg · Will Bamberg · commit d7808e515b27 · 2017-01-18T15:51:42.000-08:00
diff --git a/editable-samples/border-top-color/index.html b/editable-samples/border-top-color/index.html
diff --git a/editable-samples/css/editable.css b/editable-samples/css/editable.css
@@ -0,0 +1,24 @@
+body {
+  background-color: #EAEFF2;
+  padding: 0;
+  margin: 0;
+}
+
+#input {
+  width: 100%;
+  background-color: white;
+  padding: 1em 1em 0 1em;
+  box-sizing: border-box;
+}
+
+#buttons {
+  margin: 0.5em;
+}
+
+#output {
+  width: 100%;
+  height: 200px;
+  background-color: white;
+  padding: 1em;
+  box-sizing: border-box;
+}
diff --git a/editable-samples/js/editable.js b/editable-samples/js/editable.js
@@ -0,0 +1,36 @@
+var element = document.getElementById("example-element");
+var input = document.getElementById("input");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = input.value;
+
+function applyCode() {
+  element.style.cssText = input.value;
+}
+
+reset.addEventListener("click", function() {
+  input.value = code;
+  applyCode();
+});
+
+function setSelection() {
+  var start = input.value.indexOf(":") + 1;
+  if ((input.value.length > start) && (input.value[start] === " ")) {
+    start++;
+  }
+
+  var end = input.value.length - 1;
+  if ((input.value.length > 0) && (input.value[end-1] === ";")) {
+    end--;
+  }
+
+  input.setSelectionRange(start, end);
+}
+
+edit.addEventListener("click", function() {
+  input.focus();
+  setSelection();
+});
+
+input.addEventListener("input", applyCode);
+window.addEventListener("load", applyCode);
diff --git a/editable-samples/pages/border-top-color/css/element.css b/editable-samples/pages/border-top-color/css/element.css
@@ -0,0 +1,3 @@
+#example-element {
+  border: solid 0.3em gold;
+}
diff --git a/editable-samples/pages/border-top-color/index.html b/editable-samples/pages/border-top-color/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="../../css/editable.css" rel="stylesheet"></link>
+    <link href="css/element.css" rel="stylesheet"></link>
+  </head>
+
+  <body>
+    <div id="output">
+      <div id="example-element">
+          <p>This is a box with a border around it.
+             Note which side of the box is
+             red.</p>
+      </div>
+    </div>
+
+    <div id="buttons">
+      <input id="edit" type="button" value="Edit CSS" />
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  
+    <textarea id="input" rows="2">border-top-color: red;</textarea>
+
+    <script type="text/javascript" src="../../js/editable.js"></script>
+
+</body>
+
+</html>
diff --git a/editable-samples/pages/filter/css/element.css b/editable-samples/pages/filter/css/element.css
@@ -0,0 +1,6 @@
+#example-element {
+  max-width: 80%;
+  max-height: 80%;
+  display: block;
+  margin: 1em auto 0 auto;
+}
diff --git a/editable-samples/pages/filter/img/firefox.png b/editable-samples/pages/filter/img/firefox.png
diff --git a/editable-samples/pages/filter/index.html b/editable-samples/pages/filter/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link href="../../css/editable.css" rel="stylesheet"></link>
+    <link href="css/element.css" rel="stylesheet"></link>
+  </head>
+
+  <body>
+    <div id="output">
+      <img id="example-element" src="img/firefox.png"/>
+    </div>
+
+    <div id="buttons">
+      <input id="edit" type="button" value="Edit CSS" />
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  
+    <textarea id="input" rows="2">filter: hue-rotate(180deg);</textarea>
+
+    <script type="text/javascript" src="../../js/editable.js"></script>
+
+</body>
+
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+#example-element {`
	`2`	`+ border: solid 0.3em gold;`
	`3`	`+}`