diff options
author | Martin Green <martin.speleo@gmail.com> | 2022-06-26 18:29:20 +0100 |
---|---|---|
committer | Martin Green <martin.speleo@gmail.com> | 2022-06-26 18:29:20 +0100 |
commit | 4e5d8d1d7612354204d4f1fbbc078482dcdae2b4 (patch) | |
tree | 98ea1d959c08e7ca2f484a3aa08704d1ac6fa529 | |
parent | f1fcef2a6f9c78ceaf7a831ee07ad355d728cf69 (diff) | |
download | troggle-4e5d8d1d7612354204d4f1fbbc078482dcdae2b4.tar.gz troggle-4e5d8d1d7612354204d4f1fbbc078482dcdae2b4.tar.bz2 troggle-4e5d8d1d7612354204d4f1fbbc078482dcdae2b4.zip |
Refactored code, with an aim of allowing more than one HTMLarea on a page
-rw-r--r-- | core/views/editor_helpers.py | 8 | ||||
-rw-r--r-- | core/views/expo.py | 3 | ||||
-rw-r--r-- | templates/editexpopage.html | 9 | ||||
-rw-r--r-- | templates/html_editor_pop_ups.html | 19 | ||||
-rw-r--r-- | templates/html_editor_scripts_css.html | 233 | ||||
-rw-r--r-- | templates/widgets/HTMLarea.html | 43 |
6 files changed, 186 insertions, 129 deletions
diff --git a/core/views/editor_helpers.py b/core/views/editor_helpers.py index f85d582..0051138 100644 --- a/core/views/editor_helpers.py +++ b/core/views/editor_helpers.py @@ -133,3 +133,11 @@ class NewWebImageForm(forms.Form): class HTMLarea(forms.Textarea): template_name = "widgets/HTMLarea.html" + def __init__(self, *args, **kwargs): + self.iframeattrs = kwargs.pop('iframeattrs') + 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} + return c + diff --git a/core/views/expo.py b/core/views/expo.py index d84aa5f..1d07d6b 100644 --- a/core/views/expo.py +++ b/core/views/expo.py @@ -382,5 +382,6 @@ 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(attrs={"cols":80, "rows":20, 'placeholder': "Enter page content (using HTML)"})) + html = forms.CharField(widget=HTMLarea(iframeattrs = {"height": "80%"}, + attrs={"height":"80%", "rows":20, 'placeholder': "Enter page content (using HTML)"})) change_message = forms.CharField(widget=forms.Textarea(attrs={"cols":80, "rows":3, 'placeholder': "Descibe the change made (for git)"})) diff --git a/templates/editexpopage.html b/templates/editexpopage.html index 22c9106..ae44333 100644 --- a/templates/editexpopage.html +++ b/templates/editexpopage.html @@ -1,15 +1,18 @@ {% extends "expobase.html" %} {% block title %}Edit {{ path }}{% endblock %} {% block extrahead %} - +{% include 'html_editor_scripts_css.html' %} {% endblock %} {% block body %} -<h1>Edit {{ path }}</h1> +<h1>Edit {{ path }}</h1> +{% include 'html_editor_pop_ups.html' %} <form action="" method="post">{% csrf_token %} {{ form.as_p }} <p><input type="submit" value="Submit" /></p> </form> {% include "menu.html" %} -{% include 'html_editor_scripts_css.html' %} + + {% endblock %} + diff --git a/templates/html_editor_pop_ups.html b/templates/html_editor_pop_ups.html new file mode 100644 index 0000000..dfdc66d --- /dev/null +++ b/templates/html_editor_pop_ups.html @@ -0,0 +1,19 @@ +<!--Creates the add image popup--> + +<div class="add-image-popup popup-overlay"> + <div class="add-image-popup popup-content"> + <h2>Select Image</h2> + <p id="image_popup_content"> Loading ...</p> + <button onclick="new_image_popup()">Upload Image</button> + <button class="close" onclick="$('.add-image-popup').removeClass('active');">Close</button> + </div> +</div> + +<!--Creates the new image popup--> +<div class="new-image-popup popup-overlay"> + <div class="new-image-popup popup-content"> + <h2>New Image</h2> + <p id="new_image_popup_content"> Loading ...</p> + <button class="close" onclick="$('.new-image-popup').removeClass('active');">Close</button> + </div> +</div> diff --git a/templates/html_editor_scripts_css.html b/templates/html_editor_scripts_css.html index 5bd56d4..78dad9f 100644 --- a/templates/html_editor_scripts_css.html +++ b/templates/html_editor_scripts_css.html @@ -1,3 +1,5 @@ + + <script src="{{ settings.MEDIA_URL }}admin/js/vendor/jquery/jquery.js" type="text/javascript"></script> <script src={{ settings.MEDIA_URL }}codemirror/codemirror.js></script> @@ -7,32 +9,7 @@ <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> - .CodeMirror { - float: left; - width: 50%; - border: 1px solid black; - height: 80%; - } - .CodeMirror-scroll{ - height: 99% - } - iframe { - width: 49%; - height: 80%; - float: left; - border: 1px solid black; - border-left: 0px; - } - body{max-width: none; - margin-left: 275px; - margin-right: 50px; - text-align: left; - } - #id_change_message{ - height: 5%; - } - </style> + <style type=text/css> html { font-family: "Helvetica Neue", sans-serif; @@ -44,10 +21,12 @@ .popup-overlay { /*Hides pop-up when there is no "active" class*/ visibility: hidden; - position: absolute; + position: fixed; + top: 10%; + left: 10%; background: #ffffff; border: 3px solid #666666; - width: 90%; + width: 80%; height: 80%; overflow: scroll; left: 5%; @@ -70,83 +49,96 @@ visibility: visible; } + button { + display: inline-block; + vertical-align: middle; + border-radius: 30px; + margin: .20rem; + font-size: 1rem; + color: #666666; + background: #ffffff; + border: 1px solid #666666; + } + button:hover { + border: 1px solid #666666; + background: #666666; + color: #ffffff; + } </style> + <style type=text/css> + .CodeMirror { + float: left; + width: 50%; + border: 1px solid black; + height: 80%; + } + .CodeMirror-scroll{ + height: 99% + } + iframe { + width: 49%; + height: 80%; + float: left; + border: 1px solid black; + border-left: 0px; + } + body{max-width: none; + margin-left: 275px; + margin-right: 50px; + text-align: left; + } + #id_change_message{ + height: 5%; + } + </style> <script> -function add_image_popup() { - $('.add-image-popup').addClass('active'); - $('#image_popup_content').load("{% url 'image_selector' path %}", function() { - $('.thumbnail').click(function(){ - $(".add-image-popup").removeClass("active"); - addStr($( this ).attr("data-html")) - }); - }) - } -function new_image_popup() { - $('.add-image-popup').removeClass('active'); - $('.new-image-popup').addClass('active'); - $.ajax({ - type : "GET", - dataType: "json", - url: "{% url 'new_image_form' path %}", - success: function(data){handle_new_image(data)} - }); - } - -function handle_new_image(data) { - if (data.hasOwnProperty('form')) { - $('#new_image_popup_content').html(data.form); - $('#new_image_form').on('submit', function(e){ - e.preventDefault(); - data = $('#new_image_form').serialize(); - - $.ajax({ - type : "POST", - dataType: "json", - url: "{% url 'new_image_form' path %}", - data: new FormData($('#new_image_form')[0]), - processData: false, - contentType: false, - success: function(data){ - handle_new_image(data); - } - }); + $(function() { + + $(".HTMLarea").each(function(){ + var HTMLarea = $(this).children("textarea") + HTMLarea.data("editor", + CodeMirror.fromTextArea(HTMLarea[0], { + mode: 'text/html', + tabMode: 'indent', + onChange: function() { + clearTimeout(HTMLarea.data("delay")); + HTMLarea.data("delay", setTimeout(updatePreview, 300, HTMLarea)); + } + }) + ); + HTMLarea.data("preview", $('#preview')); + updatePreview(HTMLarea); }); - } - else if (data.hasOwnProperty('html')) { - $('.new-image-popup').removeClass('active'); - addStr(data.html); - } - else { - alert(data.error); - } - } -</script> - <script> - var delay; - // Initialize CodeMirror editor with a nice html5 canvas demo. - var editor = CodeMirror.fromTextArea(document.getElementById('id_html'), { - mode: 'text/html', - tabMode: 'indent', - onChange: function() { - clearTimeout(delay); - delay = setTimeout(updatePreview, 300); - } - }); + $(".addTag").click(function(){ + addTag($(this).parents(".HTMLarea").children("textarea").data("editor"), + $(this).attr("data-tag"), + $(this).attr("data-attr") || "" + ); + }) - function updatePreview() { - var previewFrame = document.getElementById('preview'); - var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; + $(".addStr").click(function(){ + addStr($(this).parents(".HTMLarea").children("textarea").data("editor"), + $(this).attr("data-str") + ); + }) + + $(".addImage").click(function(){ + add_image_popup($(this).parents(".HTMLarea").children("textarea").data("editor")); + }) +}); + + + function updatePreview(HTMLarea) { + var preview = $('#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(editor.getValue()); + preview.write(HTMLarea.data("editor").getValue()); preview.write("</body></html>"); preview.close(); } - setTimeout(updatePreview, 300); - function addTag(tag, attr){ - // For codemirror & center cursor + function addTag(editor, tag, attr){ var from = editor.getCursor(true); var to = editor.getCursor(false); editor.replaceRange("</"+tag+">", to); @@ -156,11 +148,62 @@ function handle_new_image(data) { editor.setCursor({line: to.line , ch : to.ch + 2 + tag.length + attr.length }); } - function addStr(x){ + function addStr(editor, x){ var to = editor.getCursor(false); editor.replaceRange(x, to); editor.focus(); editor.setCursor({line: to.line , ch : to.ch + x.length }); } + + function add_image_popup(editor) { + $('.add-image-popup').addClass('active'); + window.current_editor = editor; + $('#image_popup_content').load("{% url 'image_selector' path %}", function() { + $('.thumbnail').click(function(){ + $(".add-image-popup").removeClass("active"); + addStr(window.current_editor, $( this ).attr("data-html")) + }); + }) + } + + function new_image_popup() { + $('.add-image-popup').removeClass('active'); + $('.new-image-popup').addClass('active'); + $.ajax({ + type : "GET", + dataType: "json", + url: "{% url 'new_image_form' path %}", + success: function(data){handle_new_image(data)} + }); + } + + function handle_new_image(data) { + if (data.hasOwnProperty('form')) { + $('#new_image_popup_content').html(data.form); + $('#new_image_form').on('submit', function(e){ + e.preventDefault(); + data = $('#new_image_form').serialize(); + + $.ajax({ + type : "POST", + dataType: "json", + url: "{% url 'new_image_form' path %}", + data: new FormData($('#new_image_form')[0]), + processData: false, + contentType: false, + success: function(data){ + handle_new_image(data); + } + }); + }); + } + else if (data.hasOwnProperty('html')) { + $('.new-image-popup').removeClass('active'); + addStr(window.current_editor, data.html); + } + else { + alert(data.error); + } + } </script> diff --git a/templates/widgets/HTMLarea.html b/templates/widgets/HTMLarea.html index 9837327..1f1c99a 100644 --- a/templates/widgets/HTMLarea.html +++ b/templates/widgets/HTMLarea.html @@ -1,32 +1,15 @@ -<!--Creates the add image popup--> -<div><div class="add-image-popup popup-overlay"> - <div class="add-image-popup popup-content"> - <h2>Select Image</h2> - <p id="image_popup_content"> Loading ...</p> - <button onclick="new_image_popup()">Upload Image</button> - <button class="close" onclick="$('.add-image-popup').removeClass('active');">Close</button> - </div> -</div> - -<!--Creates the new image popup--> -<div class="new-image-popup popup-overlay"> - <div class="new-image-popup popup-content"> - <h2>New Image</h2> - <p id="new_image_popup_content"> Loading ...</p> - <button class="close" onclick="$('.new-image-popup').removeClass('active');">Close</button> - </div> -</div> +<div class="HTMLarea"> {% include "django/forms/widgets/textarea.html" %} -<iframe id=preview></iframe> -<button type="button" onclick="addTag('i', '')">italic</button> -<button type="button" onclick="addTag('b', '')">bold</button> -<button type="button" onclick="addTag('h2', 'id="tophead"')">top heading</button> -<button type="button" onclick="addTag('h1', '')">heading 1</button> -<button type="button" onclick="addTag('h2', '')">heading 2</button> -<button type="button" onclick="addTag('h3', '')">heading 3</button> -<button type="button" onclick="addTag('h4', '')">heading 4</button> -<button type="button" onclick="addTag('a', 'href=""')">hyperlink</button> -<button type="button" onclick="addTag('p', '')">paragraph</button> -<button type="button" onclick="add_image_popup()">image</button> -<button type="button" onclick="addStr('<hr/>')">horizontal line</button> +<iframe id=preview class="HTMLpreview" {% include "django/forms/widgets/attrs.html" with widget=iframe %}></iframe> +<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="tophead"">top heading</button> +<button type="button" class="addTag" data-tag="h1">heading 1</button> +<button type="button" class="addTag" data-tag="h2">heading 2</button> +<button type="button" class="addTag" data-tag="h3">heading 3</button> +<button type="button" class="addTag" data-tag="h4">heading 4</button> +<button type="button" class="addTag" data-tag="a" data-attr='href=""'>hyperlink</button> +<button type="button" class="addTag" data-tag="p">paragraph</button> +<button type="button" class="addImage">image</button> +<button type="button" class="addStr" data-str="</hr>">horizontal line</button> </div> |