Change buttons behavior

Author: Will Bamberg

editable-samples/css/editable.css

@@ -27,16 +27,12 @@ body {
 #editor>input {
   position: absolute;
   z-index: 10;
-}
-
-#edit {
   top: 10px;
-  right: 80px;
+  right: 10px;
 }
 
-#reset {
-  top: 10px;
-  right: 10px;
+#editor>input.hidden {
+  display: none;
 }
 
 #output {

editable-samples/js/editable.js

@@ -33,6 +33,8 @@ function applyCode() {
 reset.addEventListener("click", function() {
   cmEditor.doc.setValue(cmInitContent);
   applyCode();
+  reset.classList.add("hidden");
+  edit.classList.remove("hidden");
 });
 
 function selectValue() {
@@ -55,6 +57,8 @@ function selectValue() {
 edit.addEventListener("click", function() {
   cmEditor.focus();
   selectValue();
+  edit.classList.add("hidden");
+  reset.classList.remove("hidden");
 });
 
 cmEditor.on("change", applyCode);

editable-samples/pages/border-top-color/index.html

@@ -15,7 +15,7 @@
 
     <div id="editor">
       <input id="edit" type="button" value="Edit" />
-      <input id="reset" type="button" value="Reset" />
+      <input id="reset" class="hidden" type="button" value="Reset" />
     </div>
 
     <div id="output">

editable-samples/pages/filter/index.html

@@ -15,7 +15,7 @@
 
     <div id="editor">
       <input id="edit" type="button" value="Edit" />
-      <input id="reset" type="button" value="Reset" />
+      <input id="reset" class="hidden" type="button" value="Reset" />
     </div>
 
     <div id="output">

editable-samples/pages/font/index.html

@@ -16,7 +16,7 @@
 
     <div id="editor">
       <input id="edit" type="button" value="Edit" />
-      <input id="reset" type="button" value="Reset" />
+      <input id="reset" class="hidden" type="button" value="Reset" />
     </div>
 
     <div id="output">

editable-samples/pages/transform/index.html

@@ -15,7 +15,7 @@
 
     <div id="editor">
       <input id="edit" type="button" value="Edit" />
-      <input id="reset" type="button" value="Reset" />
+      <input id="reset" class="hidden" type="button" value="Reset" />
     </div>
 
     <div id="output">