forked from crunk/distribusi-verse
crunk
3 years ago
9 changed files with 163 additions and 15 deletions
@ -0,0 +1,21 @@ |
|||||
|
"""Form to save your CSS editor work.""" |
||||
|
from wtforms import ( |
||||
|
StringField, |
||||
|
TextAreaField, |
||||
|
SubmitField, |
||||
|
) |
||||
|
|
||||
|
from wtforms import validators |
||||
|
from wtforms.validators import Length |
||||
|
from flask_wtf import FlaskForm |
||||
|
|
||||
|
|
||||
|
class EditorForm(FlaskForm): |
||||
|
"""Css editor form class.""" |
||||
|
|
||||
|
cssname = StringField( |
||||
|
"fill in a name for your css style:", |
||||
|
validators=[validators.InputRequired(), Length(5, 200)], |
||||
|
) |
||||
|
css = TextAreaField() |
||||
|
submit = SubmitField("Save") |
@ -0,0 +1,34 @@ |
|||||
|
.editareas { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
.editarea { |
||||
|
border: 1px solid #E0B0FF; |
||||
|
margin-right: 1em; |
||||
|
} |
||||
|
|
||||
|
.editor { |
||||
|
min-width: 40%; |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
min-height: 250px; |
||||
|
overflow: scroll; |
||||
|
background: #E0B0FF; |
||||
|
outline: none; |
||||
|
font-family: Courier, sans-serif; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
iframe { |
||||
|
bottom: 0; |
||||
|
position: relative; |
||||
|
margin-top: 1em; |
||||
|
width: 100%; |
||||
|
height: 30em; |
||||
|
} |
@ -0,0 +1,14 @@ |
|||||
|
function update() { |
||||
|
|
||||
|
var html = document.getElementById("html"); |
||||
|
var css = document.getElementById("css"); |
||||
|
var code = document.getElementById("code").contentWindow.document; |
||||
|
|
||||
|
document.body.onkeyup = function(){ |
||||
|
code.open(); |
||||
|
code.writeln(html.value+"<style>"+css.value+"</style>"); |
||||
|
code.close(); |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
update(); |
@ -0,0 +1,43 @@ |
|||||
|
{% extends "base.html" %} |
||||
|
{% block main %} |
||||
|
<form method="POST" enctype="multipart/form-data" action="{{ url_for('editor') }}"> |
||||
|
<div class="editareas"> |
||||
|
<div class="editarea editor"> |
||||
|
<fieldset class="required"> |
||||
|
<textarea id="html" placeholder="Write some test HTML here"></textarea> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
{{ editorform.csrf_token }} |
||||
|
<div class="editarea editor"> |
||||
|
<fieldset class="required"> |
||||
|
{{ editorform.css(placeholder="Try out your CSS here") }} |
||||
|
{% for message in editorform.css.errors %} |
||||
|
<div class="error">{{ message }}</div> |
||||
|
{% endfor %} |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div class="editarea"> |
||||
|
{% if files_uploaded %} |
||||
|
<fieldset class="required"> |
||||
|
{{ editorform.cssname.label }} |
||||
|
{{ editorform.cssname }} |
||||
|
{% for message in editorform.cssname.errors %} |
||||
|
<div class="error">{{ message }}</div> |
||||
|
{% endfor %} |
||||
|
</fieldset> |
||||
|
<fieldset class="button required"> |
||||
|
{{ editorform.submit }} |
||||
|
</fieldset> |
||||
|
{% else %} |
||||
|
<p> |
||||
|
You need to upload your files first before you can save a css file. |
||||
|
</p> |
||||
|
{% endif %} |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
|
<iframe id="code"></iframe> |
||||
|
|
||||
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/editor.css')}}"> |
||||
|
<script src="{{ url_for('static', filename='js/editorupdate.js')}}"></script> |
||||
|
{% endblock main %} |
Loading…
Reference in new issue