xle/troggle-unchained
2
0
Fork 0
forked from expo/troggle
Code Issues 4 Pull Requests Projects 1 Wiki Activity

Added help writing HTML in the cave editing form. Made the HTML previews optional

Browse Source
This commit is contained in:
Martin Green 2022-06-26 21:29:46 +01:00
parent 4e5d8d1d76
commit 47d1662033
6 changed files with 54 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
core/forms.py
View File

@ -11,6 +11,8 @@ from django.contrib.admin.widgets import AdminDateWidget
from troggle.core.models.troggle import Person, PersonExpedition, Expedition
from troggle.core.models.caves import Cave, LogbookEntry, QM, Entrance, CaveAndEntrance
from troggle.core.views.editor_helpers import HTMLarea
'''These are all the class-based Forms used by troggle.
There are other, simpler, upload forms in view/uploads.py
Some are not used and need renovating or destroying.
@ -24,15 +26,22 @@ class CaveForm(ModelForm):
the other fields are present on the form, but use the default presentation style
'''
official_name = forms.CharField(required = False, widget=forms.TextInput(attrs={'size': '45'}))
underground_description = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':9}))
explorers = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
equipment = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
survey = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
underground_description = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
explorers = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
equipment = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
survey = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
#survey = forms.CharField(required = False, widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))
kataster_status = forms.CharField(required = False)
underground_centre_line = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
notes = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':2}))
references = forms.CharField(required = False, widget=forms.Textarea(attrs={'rows':1}))
underground_centre_line = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
notes = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
references = forms.CharField(required = False, widget=HTMLarea(
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
description_file = forms.CharField(required = False, widget=forms.TextInput(attrs={'size': '45'}))
survex_file = forms.CharField(required = False, label="Survex file [caves-1623/000/000.svx]", widget=forms.TextInput(attrs={'size': '45'}))
url = forms.CharField(required = True, label="URL [1623/000/000]", widget=forms.TextInput(attrs={'size': '45'}))

4
core/views/editor_helpers.py
View File

@ -134,10 +134,10 @@ class NewWebImageForm(forms.Form):
class HTMLarea(forms.Textarea):
template_name = "widgets/HTMLarea.html"
def __init__(self, *args, **kwargs):
self.iframeattrs = kwargs.pop('iframeattrs')
self.preview = kwargs.pop('preview', False)
super(forms.Textarea, self).__init__(*args, **kwargs)
def get_context(self, name, value, attrs):
c = super(forms.Textarea, self).get_context(name, value, attrs)
c["iframe"] = {"attrs": self.iframeattrs}
c["preview"] = self.preview
return c

5
core/views/expo.py
View File

@ -382,6 +382,7 @@ class ExpoPageForm(forms.Form):
'''The form used by the editexpopage function
'''
title = forms.CharField(widget=forms.TextInput(attrs={'size':'60', 'placeholder': "Enter title (displayed in tab)"}))
html = forms.CharField(widget=HTMLarea(iframeattrs = {"height": "80%"},
attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"}))
html = forms.CharField(widget=HTMLarea(attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"},
preview = True
))
change_message = forms.CharField(widget=forms.Textarea(attrs={"cols":80, "rows":3, 'placeholder': "Descibe the change made (for git)"}))

4
templates/editcave.html
View File

@ -1,11 +1,11 @@
{% extends "cavebase.html" %}
{% block title %}Edit Cave - {{cave.official_name|safe}} - {{cave.kataster_number}}{% endblock %}
{% block extraheaders %}
<!--<script src="{{ settings.TINY_MCE_MEDIA_URL }}tiny_mce.js" type="text/javascript"></script>-->
{% include 'html_editor_scripts_css.html' %}
{% endblock %}
{% block content %}
<h1>Edit Cave - {{cave.official_name|safe}} - {{cave.kataster_number}}</h1>
{% include 'html_editor_pop_ups.html' %}
<h2>{{message}}</h2>
<form action="" method="post">{% csrf_token %}
<table>{{ form }}{{caveAndEntranceFormSet}}</table>

36
templates/html_editor_scripts_css.html
View File

@ -8,7 +8,6 @@
<script src={{ settings.MEDIA_URL }}codemirror/css.js></script>
<script src={{ settings.MEDIA_URL }}codemirror/htmlmixed.js></script>
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/codemirror.css>
<link rel=stylesheet href={{ settings.MEDIA_URL }}codemirror/docs.css>
<style type=text/css>
html {
@ -32,6 +31,8 @@
left: 5%;
z-index: 20;
}
.HTMLarea { width:1000px;}
.popup-overlay.active {
/*displays pop-up when "active" class is present*/
@ -71,14 +72,14 @@
float: left;
width: 50%;
border: 1px solid black;
height: 80%;
height: 70%;
}
.CodeMirror-scroll{
height: 99%
}
iframe {
width: 49%;
height: 80%;
height: 70%;
float: left;
border: 1px solid black;
border-left: 0px;
@ -97,8 +98,12 @@
$(".HTMLarea").each(function(){
var HTMLarea = $(this).children("textarea")
HTMLarea.data("editor",
var preview = $(this).children('.HTMLpreview')
if ( preview.length )
{
HTMLarea.data("editor",
CodeMirror.fromTextArea(HTMLarea[0], {
lineWrapping: true,
mode: 'text/html',
tabMode: 'indent',
onChange: function() {
@ -107,8 +112,18 @@
}
})
);
HTMLarea.data("preview", $('#preview'));
updatePreview(HTMLarea);
HTMLarea.data("preview", preview);
updatePreview(HTMLarea);
} else {
HTMLarea.data("editor",
CodeMirror.fromTextArea(HTMLarea[0], {
lineWrapping: true,
mode: 'text/html',
tabMode: 'indent'
})
);
}
});
$(".addTag").click(function(){
addTag($(this).parents(".HTMLarea").children("textarea").data("editor"),
@ -130,7 +145,7 @@
function updatePreview(HTMLarea) {
var preview = $('#preview')[0].contentDocument || $('#preview')[0].contentWindow.document;
var preview = HTMLarea.data("preview")[0].contentDocument || $('#preview')[0].contentWindow.document;
preview.open();
preview.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><link rel='stylesheet' type='text/css' href='/css/main2.css' /> <style type=text/css>body{max-width: none;margin-left: 15px;margin-right: 15px;}</style></head><body>");
preview.write(HTMLarea.data("editor").getValue());
@ -158,7 +173,12 @@
function add_image_popup(editor) {
$('.add-image-popup').addClass('active');
window.current_editor = editor;
$('#image_popup_content').load("{% url 'image_selector' path %}", function() {
{% if not path %}
var path = $("#id_url").val();
{% else %}
var path = "";
{% endif %}
$('#image_popup_content').load("{% url 'image_selector' path %}" + path, function() {
$('.thumbnail').click(function(){
$(".add-image-popup").removeClass("active");
addStr(window.current_editor, $( this ).attr("data-html"))

4
templates/widgets/HTMLarea.html
View File

@ -1,6 +1,8 @@
<div class="HTMLarea">
{% include "django/forms/widgets/textarea.html" %}
<iframe id=preview class="HTMLpreview" {% include "django/forms/widgets/attrs.html" with widget=iframe %}></iframe>
{% if preview %}
<iframe class="HTMLpreview"></iframe>
{% endif %}
<button type="button" class="addTag" data-tag="i">italic</button>
<button type="button" class="addTag" data-tag="b">bold</button>
<button type="button" class="addTag" data-tag="h2" data-attr="id=&quot;tophead&quot;">top heading</button>