From 925413af4bf71e20fe8f6b7cb2b2c55d939ef484 Mon Sep 17 00:00:00 2001
From: crunk <dvanderkleij@gmail.com>
Date: Fri, 4 Mar 2022 23:12:47 +0100
Subject: [PATCH] better placeholders for css editor

---
 verse/start.py                       | 10 ++++++++++
 verse/static/js/editorupdate.js      |  5 +++++
 verse/templates/editor.html          |  4 +++-
 verse/themes/editor/placeholder.css  | 30 ++++++++++++++++++++++++++++
 verse/themes/editor/placeholder.html | 15 ++++++++++++++
 5 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 verse/themes/editor/placeholder.css
 create mode 100644 verse/themes/editor/placeholder.html

diff --git a/verse/start.py b/verse/start.py
index 6c5e62f..1430bf6 100644
--- a/verse/start.py
+++ b/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
 
diff --git a/verse/static/js/editorupdate.js b/verse/static/js/editorupdate.js
index 5573d72..a6cdca1 100644
--- a/verse/static/js/editorupdate.js
+++ b/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();
diff --git a/verse/templates/editor.html b/verse/templates/editor.html
index 4346feb..c41da2d 100644
--- a/verse/templates/editor.html
+++ b/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 }}
diff --git a/verse/themes/editor/placeholder.css b/verse/themes/editor/placeholder.css
new file mode 100644
index 0000000..c689288
--- /dev/null
+++ b/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;
+}
diff --git a/verse/themes/editor/placeholder.html b/verse/themes/editor/placeholder.html
new file mode 100644
index 0000000..744b4a4
--- /dev/null
+++ b/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>