|
11 | 11 | $ = django.jQuery; |
12 | 12 | } |
13 | 13 | $.fn.martor = function() { |
14 | | - |
15 | | - var martor = $(this); |
16 | | - var mainMartor = $('.main-martor'); |
17 | | - |
18 | | - martor.trigger('martor.init'); |
| 14 | + $('.martor').trigger('martor.init'); |
19 | 15 |
|
20 | 16 | // CSRF code |
21 | 17 | var getCookie = function(name) { |
|
33 | 29 | } |
34 | 30 | } |
35 | 31 | return cookieValue; |
36 | | - } |
| 32 | + }; |
37 | 33 |
|
38 | 34 | // Each multiple editor fields |
39 | | - mainMartor.each(function(i, obj) { |
40 | | - var field_name = $(obj).data('field-name'); |
| 35 | + this.each(function(i, obj) { |
| 36 | + var mainMartor = $(obj); |
| 37 | + var field_name = mainMartor.data('field-name'); |
41 | 38 | var textareaId = $('#id_'+field_name); |
42 | 39 | var editorId = 'martor-'+field_name; |
43 | 40 | var editor = ace.edit(editorId); |
|
145 | 142 | // update the preview if this menu is clicked |
146 | 143 | var currentTab = $('.tab.segment[data-tab=preview-tab-'+field_name+']'); |
147 | 144 | var previewTabButton = $('.item[data-tab=preview-tab-'+field_name+']'); |
| 145 | + var needsRefresh = true; |
148 | 146 | var refreshPreview = function() { |
149 | | - var value = editor.getValue(); |
| 147 | + if (!needsRefresh) { |
| 148 | + return; |
| 149 | + } |
| 150 | + |
| 151 | + var value = textareaId.val(); |
150 | 152 | var form = new FormData(); |
151 | 153 | form.append('content', value); |
152 | 154 | form.append('csrfmiddlewaretoken', getCookie('csrftoken')); |
| 155 | + currentTab.addClass('martor-preview-stale'); |
153 | 156 |
|
154 | 157 | $.ajax({ |
155 | 158 | url: textareaId.data('markdownfy-url'), |
|
158 | 161 | processData: false, |
159 | 162 | contentType: false, |
160 | 163 | success: function(response) { |
161 | | - if(response){ |
162 | | - currentTab.html(response); |
163 | | - $('pre').each(function(i, block){ |
164 | | - hljs.highlightBlock(block); |
165 | | - }); |
166 | | - }else {currentTab.html('<p>Nothing to preview</p>');} |
| 164 | + if (response) { |
| 165 | + currentTab.html(response).removeClass('martor-preview-stale'); |
| 166 | + if (editorConfig.hljs == 'true') { |
| 167 | + $('pre').each(function (i, block) { |
| 168 | + hljs.highlightBlock(block); |
| 169 | + }); |
| 170 | + } |
| 171 | + needsRefresh = false; |
| 172 | + } else { |
| 173 | + currentTab.html('<p>Nothing to preview</p>'); |
| 174 | + } |
167 | 175 | }, |
168 | 176 | error: function(response) { |
169 | 177 | console.log("error", response); |
170 | 178 | } |
171 | 179 | }); |
172 | 180 | }; |
173 | 181 |
|
174 | | - if (editorConfig.living === 'true') { |
175 | | - editor.on('change', refreshPreview); |
176 | | - }else { |
| 182 | + // Refresh the preview unconditionally on first load. |
| 183 | + refreshPreview(); |
| 184 | + |
| 185 | + // Set if editor has changed. |
| 186 | + editor.on('change', function (evt) { |
| 187 | + var value = editor.getValue(); |
| 188 | + if (value !== textareaId.val()) { |
| 189 | + textareaId.val(value); |
| 190 | + needsRefresh = true; |
| 191 | + if (editorConfig.living === 'true') { |
| 192 | + refreshPreview(); |
| 193 | + } |
| 194 | + } |
| 195 | + }); |
| 196 | + |
| 197 | + if (editorConfig.living !== 'true') { |
177 | 198 | previewTabButton.click(function(){ |
178 | 199 | // hide the `.martor-toolbar` for this current editor if under preview. |
179 | 200 | $(this).closest('.tab-martor-menu').find('.martor-toolbar').hide(); |
|
760 | 781 | $('.modal-help-guide[data-field-name='+field_name+']').modal('show'); |
761 | 782 | }); |
762 | 783 |
|
| 784 | + // Handle tabs. |
| 785 | + mainMartor.find('.ui.martor-toolbar .ui.dropdown').dropdown(); |
| 786 | + mainMartor.find('.ui.tab-martor-menu .item').tab(); |
| 787 | + |
763 | 788 | // Toggle editor, preview, maximize |
764 | | - var mainMartor = $(obj); |
765 | 789 | var martorField = $('.martor-field-'+field_name); |
766 | 790 | var btnToggleMaximize = $('.markdown-toggle-maximize[data-field-name='+field_name+']'); |
767 | 791 |
|
|
837 | 861 | editor.setValue(textareaId.val(), -1); |
838 | 862 | } |
839 | 863 | });// end each `mainMartor` |
840 | | -}; |
841 | | -$(function() { |
842 | | - $('.martor').martor(); |
843 | | -}); |
| 864 | + }; |
| 865 | + |
| 866 | + $(function() { |
| 867 | + $('.main-martor').martor(); |
| 868 | + }); |
| 869 | + |
| 870 | + if ('django' in window && 'jQuery' in window.django) |
| 871 | + django.jQuery(document).on('formset:added', function (event, $row) { |
| 872 | + $row.find('.main-martor').each(function () { |
| 873 | + var id = $row.attr('id'); |
| 874 | + id = id.substr(id.lastIndexOf('-') + 1); |
| 875 | + // Notice here we are using our jQuery instead of Django's. |
| 876 | + // This is because plugins are only loaded for ours. |
| 877 | + var fixed = $(this.outerHTML.replace(/__prefix__/g, id)); |
| 878 | + $(this).replaceWith(fixed); |
| 879 | + fixed.martor(); |
| 880 | + }); |
| 881 | + }); |
844 | 882 | })(jQuery); |
845 | | - |
846 | | -$( document ).ready(function(){ |
847 | | - // Semantic UI |
848 | | - $('.ui.martor-toolbar .ui.dropdown').dropdown(); |
849 | | - $('.ui.tab-martor-menu .item').tab(); |
850 | | -}); |
|
0 commit comments