newsletter-builder.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. // add delete buttons
  2. jQuery.fn.add_delete = function () {
  3. this.append('<div class="tnpc-row-delete" title="Delete"><img src="' + TNP_PLUGIN_URL + '/emails/tnp-composer/_assets/delete.png" width="32"></div>');
  4. this.find('.tnpc-row-delete').perform_delete();
  5. };
  6. // delete row
  7. jQuery.fn.perform_delete = function () {
  8. this.click(function () {
  9. // hide block edit form
  10. jQuery("#tnpc-block-options").hide();
  11. // remove block
  12. jQuery(this).parent().remove();
  13. tnpc_mobile_preview();
  14. });
  15. }
  16. // add edit button
  17. jQuery.fn.add_block_edit = function () {
  18. this.append('<div class="tnpc-row-edit-block" title="Edit"><img src="' + TNP_PLUGIN_URL + '/emails/tnp-composer/_assets/edit.png" width="32"></div>');
  19. this.find('.tnpc-row-edit-block').perform_block_edit();
  20. }
  21. // add clone button
  22. jQuery.fn.add_block_clone = function () {
  23. this.append('<div class="tnpc-row-clone" title="Clone"><img src="' + TNP_PLUGIN_URL + '/emails/tnp-composer/_assets/copy.png" width="32"></div>');
  24. this.find('.tnpc-row-clone').perform_clone();
  25. }
  26. let start_options = null;
  27. let container = null;
  28. jQuery.fn.perform_block_edit = function () {
  29. jQuery(".tnpc-row-edit-block").click(function (e) {
  30. e.preventDefault()
  31. });
  32. this.click(function (e) {
  33. e.preventDefault();
  34. target = jQuery(this).parent().find('.edit-block');
  35. jQuery("#tnpc-edit-block .bgcolor").val(target.css("background-color"));
  36. jQuery("#tnpc-edit-block .font").val(target.css("font-family"));
  37. jQuery('.bgcolor').wpColorPicker().iris('color', target.css("background-color"));
  38. // The row container which is a global variable and used later after the options save
  39. container = jQuery(this).closest("table");
  40. if (container.hasClass('tnpc-row-block')) {
  41. jQuery("#tnpc-block-options").fadeIn(500);
  42. var options = container.find(".tnpc-block-content").attr("data-json");
  43. // Compatibility
  44. if (!options) {
  45. options = target.attr("data-options");
  46. }
  47. //debugger;
  48. jQuery("#tnpc-block-options-form").load(ajaxurl, {
  49. action: "tnpc_options",
  50. id: container.data("id"),
  51. context_type: tnp_context_type,
  52. options: options
  53. }, function () {
  54. start_options = jQuery("#tnpc-block-options-form").serialize();
  55. });
  56. } else {
  57. alert("This is deprecated block version and cannot be edited. Please replace it with a new one.");
  58. }
  59. });
  60. };
  61. jQuery.fn.perform_clone = function () {
  62. jQuery(".tnpc-row-clone").click(function (e) {
  63. e.preventDefault()
  64. });
  65. this.click(function (e) {
  66. e.preventDefault();
  67. // hide block edit form
  68. jQuery("#tnpc-block-options").hide();
  69. // find the row
  70. let row = jQuery(this).closest('.tnpc-row');
  71. // clone the block
  72. let new_row = row.clone();
  73. new_row.find(".tnpc-row-delete").remove();
  74. new_row.find(".tnpc-row-edit-block").remove();
  75. new_row.find(".tnpc-row-clone").remove();
  76. new_row.add_delete();
  77. new_row.add_block_edit();
  78. new_row.add_block_clone();
  79. // if (new_row.hasClass('tnpc-row-block')) {
  80. // new_row.find(".tnpc-row-edit-block i").click();
  81. // }
  82. new_row.insertAfter(row);
  83. tnpc_mobile_preview();
  84. });
  85. };
  86. jQuery(function () {
  87. // collapse wp menu
  88. jQuery('body').addClass('folded');
  89. // open blocks tab
  90. document.getElementById("defaultOpen").click();
  91. // preload content from a body named input
  92. var preloadedContent = jQuery('input[name="body"]').val();
  93. if (!preloadedContent) {
  94. preloadedContent = jQuery('input[name="options[body]"]').val();
  95. }
  96. // console.log(preloadedContent);
  97. if (!preloadedContent) {
  98. tnpc_show_presets();
  99. } else {
  100. // Extract the body part
  101. //var x = preloadedContent.indexOf("<body");
  102. //var y = preloadedContent.indexOf("</body>");
  103. //preloadedContent = preloadedContent.substring(x, y);
  104. jQuery('#newsletter-builder-area-center-frame-content').html(preloadedContent);
  105. start_composer();
  106. }
  107. // subject management
  108. jQuery('#options-title').val(jQuery('#tnpc-form input[name="options[subject]"]').val());
  109. });
  110. function start_composer() {
  111. //Drag & Drop
  112. jQuery("#newsletter-builder-area-center-frame-content").sortable({
  113. revert: false,
  114. placeholder: "placeholder",
  115. forcePlaceholderSize: true,
  116. opacity: 0.6,
  117. tolerance: "pointer",
  118. helper: function (e) {
  119. var helper = jQuery(document.getElementById("sortable-helper")).clone();
  120. return helper;
  121. },
  122. update: function (event, ui) {
  123. //console.log(event);
  124. //console.log(ui.item.data("id"));
  125. // debugger;
  126. if (ui.item.attr("id") == "draggable-helper") {
  127. loading_row = jQuery('<div style="text-align: center; padding: 20px; background-color: #d4d5d6; color: #52BE7F;"><i class="fa fa-cog fa-2x fa-spin" /></div>');
  128. ui.item.before(loading_row);
  129. ui.item.remove();
  130. var data = {
  131. 'action': 'tnpc_render',
  132. 'b': ui.item.data("id"),
  133. 'full': 1
  134. };
  135. jQuery.post(ajaxurl, data, function (response) {
  136. new_row = jQuery(response);
  137. // ui.item.before(new_row);
  138. // ui.item.remove();
  139. loading_row.before(new_row);
  140. loading_row.remove();
  141. new_row.add_delete();
  142. new_row.add_block_edit();
  143. new_row.add_block_clone();
  144. // new_row.find(".tnpc-row-edit").hover_edit();
  145. if (new_row.hasClass('tnpc-row-block')) {
  146. new_row.find(".tnpc-row-edit-block").click();
  147. }
  148. tnpc_mobile_preview();
  149. }).fail(function () {
  150. alert("Block rendering failed.");
  151. loading_row.remove();
  152. });
  153. } else {
  154. tnpc_mobile_preview();
  155. }
  156. }
  157. });
  158. jQuery(".newsletter-sidebar-buttons-content-tab").draggable({
  159. connectToSortable: "#newsletter-builder-area-center-frame-content",
  160. // Build the helper for dragging
  161. helper: function (e) {
  162. var helper = jQuery(document.getElementById("draggable-helper")).clone();
  163. // Do not uset .data() with jQuery
  164. helper.attr("data-id", e.currentTarget.dataset.id);
  165. helper.html(e.currentTarget.dataset.name);
  166. return helper;
  167. },
  168. revert: false,
  169. start: function () {
  170. if (jQuery('.tnpc-row').length) {
  171. } else {
  172. jQuery('#newsletter-builder-area-center-frame-content').append('<div class="tnpc-drop-here">Drag&Drop blocks here!</div>');
  173. }
  174. },
  175. stop: function (event, ui) {
  176. jQuery('.tnpc-drop-here').remove();
  177. }
  178. });
  179. // Closes the block options layer (without saving)
  180. jQuery("#tnpc-block-options-cancel").click(function () {
  181. jQuery(this).parent().parent().fadeOut(500);
  182. jQuery.post(ajaxurl, start_options, function (response) {
  183. target.html(response);
  184. jQuery("#tnpc-block-options-form").html("");
  185. });
  186. });
  187. // Fires the save event for block options
  188. jQuery("#tnpc-block-options-save").click(function (e) {
  189. e.preventDefault();
  190. // fix for Codemirror
  191. if (typeof templateEditor !== 'undefined') {
  192. templateEditor.save();
  193. }
  194. if (window.tinymce)
  195. window.tinymce.triggerSave();
  196. jQuery("#tnpc-block-options").fadeOut(500);
  197. var data = jQuery("#tnpc-block-options-form").serialize();
  198. jQuery.post(ajaxurl, data, function (response) {
  199. target.html(response);
  200. tnpc_mobile_preview();
  201. //target.attr("data-options", options);
  202. //target.find(".tnpc-row-edit").hover_edit();
  203. jQuery("#tnpc-block-options-form").html("");
  204. });
  205. });
  206. // live preview from block options *** EXPERIMENTAL ***
  207. jQuery('#tnpc-block-options-form').change(function () {
  208. var data = jQuery("#tnpc-block-options-form").serialize();
  209. jQuery.post(ajaxurl, data, function (response) {
  210. target.html(response);
  211. }).fail(function () {
  212. alert("Block rendering failed");
  213. });
  214. });
  215. jQuery(".tnpc-row").add_delete();
  216. jQuery(".tnpc-row").add_block_edit();
  217. jQuery(".tnpc-row").add_block_clone();
  218. tnpc_mobile_preview();
  219. }
  220. function tnpc_mobile_preview() {
  221. var d = document.getElementById("tnpc-mobile-preview").contentWindow.document;
  222. d.open();
  223. d.write("<!DOCTYPE html>\n<html>\n<head>\n");
  224. d.write("<link rel='stylesheet' href='" + TNP_HOME_URL + "?na=emails-composer-css&ver=" + Math.random() + "' type='text/css'>");
  225. d.write("<style type='text/css'>.tnpc-row-delete, .tnpc-row-edit-block, .tnpc-row-clone { display: none; }</style>");
  226. d.write("</head>\n<body style='margin: 0; padding: 0;'><div style='width: 320px!important'>");
  227. d.write(jQuery("#newsletter-builder-area-center-frame-content").html());
  228. d.write("</div>\n</body>\n</html>");
  229. d.close();
  230. }
  231. function tnpc_save(form) {
  232. jQuery("#newsletter-preloaded-export").html(jQuery("#newsletter-builder-area-center-frame-content").html());
  233. jQuery("#newsletter-preloaded-export .tnpc-row-delete").remove();
  234. jQuery("#newsletter-preloaded-export .tnpc-row-edit-block").remove();
  235. jQuery("#newsletter-preloaded-export .tnpc-row-clone").remove();
  236. jQuery("#newsletter-preloaded-export .tnpc-row").removeClass("ui-draggable");
  237. let preload_export_html = jQuery("#newsletter-preloaded-export").html();
  238. preload_export_html = jQuery.trim(preload_export_html);
  239. let css = jQuery.trim(form.elements["options[css]"].value);
  240. let export_content = '<!DOCTYPE html>\n<html>\n<head>\n<title>{subject}</title>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<meta http-equiv="X-UA-Compatible" content="IE=edge">\n';
  241. export_content += '<style type="text/css">' + css + '</style>';
  242. export_content += '</head>\n<body style="margin: 0; padding: 0;">\n';
  243. export_content += preload_export_html;
  244. export_content += '\n</body>\n</html>';
  245. form.elements["options[body]"].value = export_content;
  246. form.elements["options[subject]"].value = jQuery('#options-title').val();
  247. jQuery("#newsletter-preloaded-export").html(' ');
  248. }
  249. function tnpc_test() {
  250. let form = document.getElementById("tnpc-form");
  251. tnpc_save(form);
  252. form.act.value = "test";
  253. form.submit();
  254. }
  255. function openTab(evt, tabName) {
  256. evt.preventDefault();
  257. // Declare all variables
  258. var i, tabcontent, tablinks;
  259. // Get all elements with class="tabcontent" and hide them
  260. tabcontent = document.getElementsByClassName("tabcontent");
  261. for (i = 0; i < tabcontent.length; i++) {
  262. tabcontent[i].style.display = "none";
  263. }
  264. // Get all elements with class="tablinks" and remove the class "active"
  265. tablinks = document.getElementsByClassName("tablinks");
  266. for (i = 0; i < tablinks.length; i++) {
  267. tablinks[i].className = tablinks[i].className.replace(" active", "");
  268. }
  269. // Show the current tab, and add an "active" class to the button that opened the tab
  270. document.getElementById(tabName).style.display = "block";
  271. evt.currentTarget.className += " active";
  272. }
  273. function tnpc_show_presets() {
  274. jQuery('.tnpc-controls input').attr('disabled', true);
  275. jQuery('#newsletter-builder-area-center-frame-content').load(ajaxurl, {
  276. action: "tnpc_presets",
  277. });
  278. }
  279. function tnpc_load_preset(id) {
  280. jQuery('#newsletter-builder-area-center-frame-content').load(ajaxurl, {
  281. action: "tnpc_presets",
  282. id: id
  283. }, function () {
  284. start_composer();
  285. jQuery('.tnpc-controls input').attr('disabled', false);
  286. });
  287. }
  288. function tnpc_scratch() {
  289. jQuery('#newsletter-builder-area-center-frame-content').html(" ");
  290. start_composer();
  291. }
  292. function tnpc_reload_options(e) {
  293. e.preventDefault();
  294. let options = jQuery("#tnpc-block-options-form").serializeArray();
  295. for (let i=0; i<options.length; i++) {
  296. if (options[i].name == 'action') {
  297. options[i].value = 'tnpc_options';
  298. }
  299. }
  300. //console.log(options);
  301. //debugger;
  302. options["action"] = "tnpc_options";
  303. options["id"] = container.data("id");
  304. jQuery("#tnpc-block-options-form").load(ajaxurl, options);
  305. }