diff options
Diffstat (limited to 'templates/html_editor_scripts_css.html')
| -rw-r--r-- | templates/html_editor_scripts_css.html | 233 |
1 files changed, 138 insertions, 95 deletions
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> |