説明なし

admin-shortcode-ui.js 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. /*******************************************************************************
  2. * Copyright (c) 2019, Code Atlantic LLC
  3. ******************************************************************************/
  4. (function ($) {
  5. "use strict";
  6. if (window.pum_shortcode_ui_vars === undefined) {
  7. return;
  8. }
  9. var I10n = pum_shortcode_ui_vars.I10n || {
  10. error_loading_shortcode_preview: '',
  11. shortcode_ui_button_tooltip: '',
  12. insert: '',
  13. update: ''
  14. },
  15. shortcodes = pum_shortcode_ui_vars.shortcodes || {},
  16. base = {
  17. version: 1,
  18. shortcode_args: {},
  19. shortcode_data: {},
  20. initialize: function (options) {
  21. },
  22. /**
  23. * Returns cleaned attributes object.
  24. *
  25. * @param attrs
  26. * @returns {*}
  27. */
  28. cleanAttrs: function (attrs) {
  29. _.each(attrs, function (v, k) {
  30. if (null === v || '' === v) {
  31. delete attrs[k];
  32. }
  33. // Multicheck converts keys to array.
  34. if (typeof v === 'object') {
  35. attrs[k] = Object.keys(v);
  36. }
  37. });
  38. return attrs;
  39. },
  40. /**
  41. * Renders preview from template when available.
  42. *
  43. * @param attrs
  44. */
  45. template: function (attrs) {
  46. var template = 'pum-shortcode-view-' + this.type,
  47. _template,
  48. options = {
  49. evaluate: /<#([\s\S]+?)#>/g,
  50. interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
  51. escape: /\{\{([^\}]+?)\}\}(?!\})/g,
  52. variable: 'attrs'
  53. };
  54. if (this.version === 1) {
  55. options.variable = 'attr';
  56. }
  57. if (!$('#tmpl-' + template).length) {
  58. return this.text;
  59. }
  60. _template = _.template($('#tmpl-' + template).html(), options);
  61. if (attrs.class) {
  62. attrs.classes = attrs.class;
  63. delete attrs.class;
  64. }
  65. attrs = this.cleanAttrs(attrs);
  66. return _template(attrs);
  67. },
  68. /**
  69. * Get shortcode attr values.
  70. *
  71. * @returns {*}
  72. */
  73. getShortcodeValues: function () {
  74. if (typeof this.shortcode === 'undefined' || typeof this.shortcode.attrs === 'undefined') {
  75. return {};
  76. }
  77. var values = {};
  78. if (typeof this.shortcode.attrs.named !== 'undefined') {
  79. values = _.extend(values, this.shortcode.attrs.named || {});
  80. }
  81. if (typeof this.shortcode.attrs.numeric !== 'undefined') {
  82. for (var i = 0; i < this.shortcode.attrs.numeric.length; i++) {
  83. values[this.shortcode.attrs.numeric[i]] = true;
  84. }
  85. }
  86. return values;
  87. },
  88. /**
  89. * Get shortcode raw content.
  90. *
  91. * @returns {string}
  92. */
  93. getShortcodeContent: function () {
  94. if (typeof this.shortcode === 'undefined') {
  95. return '';
  96. }
  97. return this.shortcode.content || '';
  98. },
  99. /**
  100. * Return the preview HTML.
  101. * If empty, fetches data.
  102. *
  103. * @return string
  104. */
  105. getContent: function () {
  106. if (!this.content) {
  107. this.fetch();
  108. }
  109. return this.content;
  110. },
  111. /**
  112. * Format shortcode for text tab.
  113. *
  114. * @param values
  115. */
  116. formatShortcode: function (values) {
  117. var has_content = this.shortcode_args.has_content,
  118. content = this.getShortcodeContent();
  119. values = values || this.getShortcodeValues();
  120. if (has_content && typeof values._inner_content !== 'undefined') {
  121. content = values._inner_content;
  122. delete values._inner_content;
  123. }
  124. values = this.cleanAttrs(values);
  125. return PUM_Admin.templates.shortcode({
  126. tag: this.type,
  127. meta: values,
  128. has_content: has_content,
  129. content: content
  130. });
  131. },
  132. /**
  133. * Fetch preview.
  134. * Async. Sets this.content and calls this.render.
  135. *
  136. * @return undefined
  137. */
  138. fetch: function () {
  139. var self = this,
  140. values = self.getShortcodeValues(),
  141. data = {
  142. action: 'pum_do_shortcode',
  143. post_id: $('#post_ID').val(),
  144. tag: self.type,
  145. shortcode: self.formatShortcode(),
  146. nonce: pum_shortcode_ui_vars.nonce
  147. };
  148. if (!self.fetching) {
  149. self.fetching = true;
  150. /*
  151. * If shortcode has inner content, pass that to the renderer.
  152. */
  153. if (self.shortcode_args.has_content) {
  154. values._inner_content = self.getShortcodeContent();
  155. }
  156. /*
  157. * Render templates immediately when available.
  158. * Otherwise request rendering via ajax.
  159. */
  160. if (!self.shortcode_args.ajax_rendering) {
  161. self.content = self.template(values);
  162. delete self.fetching;
  163. self.render();
  164. } else {
  165. $.post(ajaxurl, data)
  166. .done(function (response) {
  167. self.content = response.data;
  168. })
  169. .fail(function () {
  170. self.content = '<span class="pum_shortcode_ui_vars_error">' + I10n.error_loading_shortcode_preview + '</span>';
  171. })
  172. .always(function () {
  173. delete self.fetching;
  174. self.render();
  175. });
  176. }
  177. }
  178. },
  179. edit: function (text, update) {
  180. var values = _.extend({}, this.getShortcodeValues());
  181. if (this.shortcode_args.has_content) {
  182. values._inner_content = this.getShortcodeContent();
  183. }
  184. this.renderForm(values, update);
  185. },
  186. /**
  187. * Renders loading placeholder.
  188. */
  189. setLoader: function () {
  190. this.setContent(
  191. '<div class="loading-placeholder">' +
  192. '<div class="dashicons dashicons-admin-generic"></div>' +
  193. '<div class="wpview-loading"><ins></ins></div>' +
  194. '</div>'
  195. );
  196. },
  197. /**
  198. * Render the shortcode edit form.
  199. *
  200. * @param values
  201. * @param callback
  202. */
  203. renderForm: function (values, callback) {
  204. var self = this,
  205. data = $.extend(true, {}, {
  206. tag: this.type,
  207. id: 'pum-shortcode-editor-' + this.type,
  208. label: '',
  209. tabs: {},
  210. sections: {},
  211. fields: {}
  212. }, self.shortcode_args);
  213. values = values || {};
  214. PUM_Admin.modals.reload('#' + data.id, PUM_Admin.templates.modal({
  215. id: data.id,
  216. title: data.label,
  217. description: data.description,
  218. classes: 'tabbed-content pum-shortcode-editor',
  219. save_button: undefined === values ? I10n.insert : I10n.update,
  220. content: PUM_Admin.forms.render({
  221. id: 'pum-shortcode-editor-' + this.type,
  222. tabs: data.tabs || {},
  223. sections: data.sections || {},
  224. fields: data.fields || {}
  225. }, values || {}),
  226. meta: {
  227. 'data-shortcode_tag': this.type
  228. }
  229. }));
  230. $('#' + data.id + ' form').on('submit', function (event) {
  231. event.preventDefault();
  232. var $form = $(this),
  233. raw_values = $form.pumSerializeObject(),
  234. values = PUM_Admin.forms.parseValues($form.pumSerializeObject().attrs, PUM_Admin.forms.flattenFields(data)),
  235. content;
  236. content = self.formatShortcode(values);
  237. if (typeof callback === 'function') {
  238. callback(content);
  239. }
  240. PUM_Admin.modals.closeAll();
  241. });
  242. }
  243. };
  244. $(document)
  245. .on('pumFormDependencyMet pumFormDependencyUnmet', '.pum-shortcode-editor .pum-field', function (event) {
  246. var $input = $(this).find(':input');
  247. if (event.type.toString() === 'pumFormDependencyUnmet') {
  248. $input.prop('disabled', true);
  249. } else {
  250. $input.prop('disabled', false);
  251. }
  252. });
  253. // Initiate when ready.
  254. $(function () {
  255. window.wp = window.wp || {};
  256. window.wp.mce = window.wp.mce || {};
  257. window.wp.mce.pum_shortcodes = window.wp.mce.pum_shortcodes || {};
  258. _.each(shortcodes, function (args, tag) {
  259. /**
  260. * Create and store a view object for each shortcode.
  261. *
  262. * @type Object
  263. */
  264. wp.mce.pum_shortcodes[tag] = _.extend({}, base, {
  265. version: args.version || 1,
  266. shortcode_args: args,
  267. /**
  268. * For compatibility with WP prior to v4.2:
  269. */
  270. View: { //
  271. type: tag,
  272. template: function (options) {
  273. return wp.mce.pum_shortcodes[this.type].template(options);
  274. },
  275. postID: $('#post_ID').val(),
  276. initialize: function (options) {
  277. this.shortcode = options.shortcode;
  278. wp.mce.pum_shortcodes[this.type].shortcode_data = this.shortcode;
  279. },
  280. getHtml: function () {
  281. var values = this.shortcode.attrs.named;
  282. if (this.shortcode_args.has_content) {
  283. values._inner_content = this.shortcode.content;
  284. }
  285. return this.template(values);
  286. }
  287. }
  288. });
  289. /**
  290. * Register each view with MCE.
  291. */
  292. if (typeof wp.mce.views !== 'undefined' && typeof wp.mce.views.register === 'function') {
  293. wp.mce.views.register(tag, wp.mce.pum_shortcodes[tag]);
  294. }
  295. });
  296. });
  297. }(jQuery));
  298. /*******************************************************************************
  299. * Copyright (c) 2019, Code Atlantic LLC
  300. ******************************************************************************/
  301. (function ($) {
  302. if (typeof window.pum_newsletter_initialized !== 'undefined') {
  303. return;
  304. }
  305. window.pum_newsletter_initialized = true;
  306. /**
  307. * Checks shortcode editor provider field and hides/shows the appropriate subtab for that provider.
  308. */
  309. function check_provider() {
  310. var $provider = $('#pum-shortcode-editor-pum_sub_form #provider'),
  311. provider = $provider.val() !== '' && $provider.val() !== 'none' ? $provider.val() : pum_admin_vars.default_provider,
  312. $provider_tabs = $('.pum-modal-content .tabs .tab a[href^="#pum-shortcode-editor-pum_sub_form_provider_"]'),
  313. $provider_contents = $('[id^="pum-shortcode-editor-pum_sub_form_provider_"]'),
  314. $selected_tab = $provider_tabs.filter('[href="#pum-shortcode-editor-pum_sub_form_provider_' + provider + '"]'),
  315. $selected_contents = $provider_contents.filter('[id="pum-shortcode-editor-pum_sub_form_provider_' + provider + '"]');
  316. $provider_tabs.each(function () {
  317. $(this).parent().hide();
  318. });
  319. $provider_contents.find(':input').attr('disable', true);
  320. if ($selected_tab.length) {
  321. $selected_tab.parent().show();
  322. $selected_contents.find(':input').attr('disable', false);
  323. }
  324. }
  325. $(document)
  326. .on('pum_init', '#pum-shortcode-editor-pum_sub_form', check_provider)
  327. .on('change', '#pum-shortcode-editor-pum_sub_form #provider', check_provider);
  328. /**
  329. * Here for compatibility with the MC extension prior to v1.3.0
  330. */
  331. function check_list() {
  332. var $list_id = $('#pum-shortcode-editor-pum_sub_form_provider_mailchimp #list_id'),
  333. list_id = $list_id.val(),
  334. $list_options = $('#pum-mci-list-' + list_id+',.pum-mci-list-' + list_id),
  335. $all_options = $('.pum-mci-list-options');
  336. $all_options.hide();
  337. $all_options.find('input[type="checkbox"]').attr('disabled', true);
  338. if ($list_options.length) {
  339. $list_options.show();
  340. $list_options.find('input[type="checkbox"]').attr('disabled', false);
  341. }
  342. }
  343. /**
  344. * Check API key when the "Check" button is clicked.
  345. */
  346. $(document)
  347. .on('pumInit pum_init', '#pum-shortcode-editor-pum_sub_form', check_list)
  348. .on('change', '#pum-shortcode-editor-pum_sub_form_provider_mailchimp #list_id', check_list);
  349. }(jQuery));