better placeholders for css editor

verse/start.py

@@ -201,6 +201,15 @@ def editor():
     editorform = EditorForm()
     current_distribusi = CurrentDistribusi()
     files_uploaded = IsZipUploaded(current_distribusi)
+    cssplaceholder = "Try out your CSS here"
+    with open('themes/editor/placeholder.css') as f:
+        cssplaceholder = f.read()
+    editorform.css.data = cssplaceholder
+
+    htmlplaceholder = "Write some test HTML here"
+    with open('themes/editor/placeholder.html') as f:
+        htmlplaceholder = f.read()
+    print(htmlplaceholder)
     if editorform.validate_on_submit():
         userfolder = os.path.join("stash", current_distribusi)
         cssfilename = "{}.css".format(editorform.cssname.data)
@@ -212,6 +221,7 @@ def editor():
         "editor.html",
         files_uploaded=files_uploaded,
         editorform=editorform,
+        htmlplaceholder=htmlplaceholder,
     )
     return template
 

verse/static/js/editorupdate.js

@@ -9,6 +9,11 @@ document.body.onkeyup = function(){
 	code.writeln(html.value+"<style>"+css.value+"</style>");
 	code.close();
   };
+document.addEventListener("DOMContentLoaded", function(){
+  code.open();
+  code.writeln(html.value+"<style>"+css.value+"</style>");
+  code.close();
+});
 };
 
 update();

verse/templates/editor.html

@@ -4,7 +4,9 @@
     <div class="editareas">
       <div class="editarea editor">
         <fieldset class="required">
-          <textarea id="html" placeholder="Write some test HTML here"></textarea>
+          <textarea id="html" placeholder="Write some test HTML here">
+            {{htmlplaceholder}}
+          </textarea>
         </fieldset>
       </div>
       {{ editorform.csrf_token }}

verse/themes/editor/placeholder.css

@@ -0,0 +1,30 @@
+/* Try out your CSS here */
+body {
+  background-color: hotpink;
+}
+.image{
+  max-width: 100%;
+}
+.dir::before{
+  content:"📁 ";
+  font-size:18px;
+}
+.filename{
+  display:block;
+  font-family:mono;
+}
+.unkown-file::before{
+  content:"📄 ";
+  font-size:18px;
+}
+div{
+  max-width: 640px;
+  display:inline-block;
+  vertical-align:top;
+  margin:1em;
+  padding:1em;
+}
+video {
+  width:640px;
+  max-height:640px;
+}

verse/themes/editor/placeholder.html

@@ -0,0 +1,15 @@
+<pre>Write some test HTML here</pre>
+<div id="folder" class="dir"><a href='example'>example folder</a></div>
+<div id="willemdekooning-logo" class="png">
+  <figure>
+    <img class="image" src="https://www.wdka.nl/build/img/willemdekooning-logo.png">
+    <figcaption>logo.png</figcaption>
+  </figure>
+</div>
+<div id="example_video" class="mp4">
+  <video controls>
+    <source src="example_video.mp4">
+  </video>
+  <span class="filename">example_video.mp4</span>
+</div>
+<div id="unknown.file" class="plain unkown-file"><a href='unknown.file'>unknown.file</a></div>