diff options
author | Martin Green <martin.speleo@gmail.com> | 2022-06-26 14:16:42 +0100 |
---|---|---|
committer | Martin Green <martin.speleo@gmail.com> | 2022-06-26 14:16:42 +0100 |
commit | f1fcef2a6f9c78ceaf7a831ee07ad355d728cf69 (patch) | |
tree | a0a1190441bbe86a6a6f73e54013cd2e1a9f0569 /templates/html_editor_scripts_css.html | |
parent | 8f0ea8ed8217a2dc4da318af59ecb49b238606ac (diff) | |
download | troggle-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.html | 166 |
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> + |