summaryrefslogtreecommitdiffstats
path: root/templates/html_editor_scripts_css.html
diff options
context:
space:
mode:
authorMartin Green <martin.speleo@gmail.com>2022-06-26 14:16:42 +0100
committerMartin Green <martin.speleo@gmail.com>2022-06-26 14:16:42 +0100
commitf1fcef2a6f9c78ceaf7a831ee07ad355d728cf69 (patch)
treea0a1190441bbe86a6a6f73e54013cd2e1a9f0569 /templates/html_editor_scripts_css.html
parent8f0ea8ed8217a2dc4da318af59ecb49b238606ac (diff)
downloadtroggle-f1fcef2a6f9c78ceaf7a831ee07ad355d728cf69.tar.gz
troggle-f1fcef2a6f9c78ceaf7a831ee07ad355d728cf69.tar.bz2
troggle-f1fcef2a6f9c78ceaf7a831ee07ad355d728cf69.zip
Refactorising CodeMirror HTML editor, with an ultimate aim to make it reusable. However more work if required...
Diffstat (limited to 'templates/html_editor_scripts_css.html')
-rw-r--r--templates/html_editor_scripts_css.html166
1 files changed, 166 insertions, 0 deletions
diff --git a/templates/html_editor_scripts_css.html b/templates/html_editor_scripts_css.html
new file mode 100644
index 0000000..5bd56d4
--- /dev/null
+++ b/templates/html_editor_scripts_css.html
@@ -0,0 +1,166 @@
+<script src="{{ settings.MEDIA_URL }}admin/js/vendor/jquery/jquery.js" type="text/javascript"></script>
+
+ <script src={{ settings.MEDIA_URL }}codemirror/codemirror.js></script>
+ <script src={{ settings.MEDIA_URL }}codemirror/xml.js></script>
+ <script src={{ settings.MEDIA_URL }}codemirror/javascript.js></script>
+ <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>
+ .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;
+ width: 100%;
+ color: #666666;
+ text-align: center;
+ }
+
+ .popup-overlay {
+ /*Hides pop-up when there is no "active" class*/
+ visibility: hidden;
+ position: absolute;
+ background: #ffffff;
+ border: 3px solid #666666;
+ width: 90%;
+ height: 80%;
+ overflow: scroll;
+ left: 5%;
+ z-index: 20;
+ }
+
+ .popup-overlay.active {
+ /*displays pop-up when "active" class is present*/
+ visibility: visible;
+ text-align: center;
+ }
+
+ .popup-content {
+ /*Hides pop-up content when there is no "active" class */
+ visibility: hidden;
+ }
+
+ .popup-content.active {
+ /*Shows pop-up content when "active" class is present */
+ visibility: visible;
+ }
+
+
+ </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);
+ }
+ });
+ });
+ }
+ 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);
+ }
+ });
+
+ function updatePreview() {
+ var previewFrame = document.getElementById('preview');
+ var preview = previewFrame.contentDocument || previewFrame.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("</body></html>");
+ preview.close();
+ }
+ setTimeout(updatePreview, 300);
+
+ function addTag(tag, attr){
+ // For codemirror & center cursor
+ var from = editor.getCursor(true);
+ var to = editor.getCursor(false);
+ editor.replaceRange("</"+tag+">", to);
+ if (attr.length > 0) {attr = " " + attr;}
+ editor.replaceRange("<"+tag+attr+">", from);
+ editor.focus();
+ editor.setCursor({line: to.line , ch : to.ch + 2 + tag.length + attr.length });
+ }
+
+ function addStr(x){
+ var to = editor.getCursor(false);
+ editor.replaceRange(x, to);
+ editor.focus();
+ editor.setCursor({line: to.line , ch : to.ch + x.length });
+ }
+ </script>
+