← All changes | resources/backend/js/modal.js +142 -108 2.2.7 → 3.4.3 View file →

		@@ -2,137 +2,175 @@
2	2	* Handles the Insert and Cancel events on TinyMCE and QuickTag Modals
3	3	*
4	4	* @since 1.9.6
5	5	*
6		- * @package ConvertKit
7	6	* @author ConvertKit
8	7	*/
9	8
10		-jQuery( document ).ready(
11		- function( $ ) {
	9	+document.addEventListener('DOMContentLoaded', function () {
	10	+ // Cancel.
	11	+ document.body.addEventListener('click', function (e) {
	12	+ // Check if a cancel button was clicked.
	13	+ if (
	14	+ e.target.matches(
	15	+ '#convertkit-modal-body div.mce-cancel button, #convertkit-modal-body div.mce-cancel button *, #convertkit-quicktags-modal .media-toolbar .media-toolbar-secondary button.cancel'
	16	+ )
	17	+ ) {
	18	+ // TinyMCE.
	19	+ if (
	20	+ typeof tinyMCE !== 'undefined' &&
	21	+ tinyMCE.activeEditor &&
	22	+ !tinyMCE.activeEditor.isHidden()
	23	+ ) {
	24	+ tinymce.activeEditor.windowManager.close();
	25	+ return;
	26	+ }
12	27
13		- // Cancel.
14		- $( 'body' ).on(
15		- 'click',
16		- '#convertkit-modal-body div.mce-cancel button, #convertkit-quicktags-modal .media-toolbar .media-toolbar-secondary button.cancel',
17		- function( e ) {
	28	+ // Text Editor.
	29	+ // Close the QuickTags modal.
	30	+ convertKitQuickTagsModal.close();
	31	+ }
	32	+ });
18	33
19		- // TinyMCE.
20		- if ( typeof tinyMCE !== 'undefined' && tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {
21		- tinymce.activeEditor.windowManager.close();
22		- return;
23		- }
	34	+ // Insert.
	35	+ document.body.addEventListener('click', function (e) {
	36	+ // Check if an insert button was clicked.
	37	+ if (
	38	+ e.target.matches(
	39	+ '#convertkit-modal-body div.mce-insert button, #convertkit-modal-body div.mce-insert button *, #convertkit-quicktags-modal .media-toolbar .media-toolbar-primary button.button-primary'
	40	+ ) ||
	41	+ e.target.matches(
	42	+ 'button.wp-convertkit-refresh-resources, span.dashicons-update'
	43	+ )
	44	+ ) {
	45	+ // Prevent default action.
	46	+ e.preventDefault();
24	47
25		- // Text Editor.
26		- // Close the QuickTags modal.
27		- convertKitQuickTagsModal.close();
28		-
	48	+ // Don't close the modal if the refresh button was clicked.
	49	+ if (
	50	+ e.target.matches(
	51	+ 'button.wp-convertkit-refresh-resources, span.dashicons-update'
	52	+ )
	53	+ ) {
	54	+ return;
29	55	}
30		- );
31	56
32		- // Insert.
33		- $( 'body' ).on(
34		- 'click',
35		- '#convertkit-modal-body div.mce-insert button, #convertkit-quicktags-modal .media-toolbar .media-toolbar-primary button.button-primary',
36		- function( e ) {
	57	+ // Get containing form.
	58	+ const form = document.querySelector(
	59	+ 'form.convertkit-tinymce-popup'
	60	+ );
37	61
38		- // Prevent default action.
39		- e.preventDefault();
	62	+ // Build Shortcode.
	63	+ let shortcode =
	64	+ '[' + form.querySelector('input[name="shortcode"]').value;
	65	+ const shortcodeClose =
	66	+ form.querySelector('input[name="close_shortcode"]').value ===
	67	+ '1';
40	68
41		- // Get containing form.
42		- let form = $( 'form.convertkit-tinymce-popup' );
	69	+ // Iterate through form fields.
	70	+ form.querySelectorAll('input, select').forEach(function (element) {
	71	+ // Skip if no data-shortcode attribute.
	72	+ if (!element.dataset.shortcode) {
	73	+ return;
	74	+ }
43	75
44		- // Build Shortcode.
45		- let shortcode = '[' + $( 'input[name="shortcode"]', $( form ) ).val(),
46		- shortcodeClose = ( $( 'input[name="close_shortcode"]', $( form ) ).val() === '1' ? true : false );
	76	+ let val = '';
47	77
48		- $( 'input, select', $( form ) ).each(
49		- function( i ) {
50		- // Skip if no data-shortcode attribute.
51		- if ( typeof $( this ).data( 'shortcode' ) === 'undefined' ) {
52		- return true;
53		- }
	78	+ // If this is a color picker, #000000 will be submitted by the browser as the value
	79	+ // even if no value / color was selected.
	80	+ // Check the data-value attribute instead.
	81	+ switch (element.type) {
	82	+ case 'color':
	83	+ val = element.dataset.value;
	84	+ break;
	85	+ default:
	86	+ val = element.value;
	87	+ break;
	88	+ }
54	89
55		- // Skip if the value is empty.
56		- if ( ! $( this ).val() ) {
57		- return true;
58		- }
59		- if ( $( this ).val().length === 0 ) {
60		- return true;
61		- }
	90	+ // Skip if the value is empty.
	91	+ if (!val) {
	92	+ return;
	93	+ }
	94	+ if (val.length === 0) {
	95	+ return;
	96	+ }
62	97
63		- // Get shortcode attribute.
64		- let key = $( this ).data( 'shortcode' ),
65		- trim = ( $( this ).data( 'trim' ) === '0' ? false : true ),
66		- val = $( this ).val();
	98	+ // Get shortcode attribute.
	99	+ const key = element.dataset.shortcode;
	100	+ const trim = element.dataset.trim !== '0';
67	101
68		- // Skip if the shortcode is empty.
69		- if ( ! key.length ) {
70		- return true;
71		- }
	102	+ // Skip if the shortcode is empty.
	103	+ if (!key.length) {
	104	+ return;
	105	+ }
72	106
73		- // Trim the value, unless the shortcode attribute disables string trimming.
74		- if ( trim ) {
75		- val = val.trim();
76		- }
	107	+ // Trim the value, unless the shortcode attribute disables string trimming.
	108	+ if (trim) {
	109	+ val = val.trim();
	110	+ }
77	111
78		- // Append attribute and value to shortcode string.
79		- shortcode += ' ' + key.trim() + '="' + val + '"';
80		- }
81		- );
	112	+ // Append attribute and value to shortcode string.
	113	+ shortcode += ' ' + key.trim() + '="' + val + '"';
	114	+ });
82	115
83		- // Close Shortcode.
84		- shortcode += ']';
	116	+ // Close Shortcode.
	117	+ shortcode += ']';
85	118
86		- // If the shortcode includes a closing element, append it now.
87		- if ( shortcodeClose ) {
88		- shortcode += '[/' + $( 'input[name="shortcode"]', $( form ) ).val() + ']';
89		- }
	119	+ // If the shortcode includes a closing element, append it now.
	120	+ if (shortcodeClose) {
	121	+ shortcode +=
	122	+ '[/' +
	123	+ form.querySelector('input[name="shortcode"]').value +
	124	+ ']';
	125	+ }
90	126
91		- // Depending on the editor type, insert the shortcode.
92		- switch ( $( 'input[name="editor_type"]', $( form ) ).val() ) {
93		- case 'tinymce':
94		- // Sanity check that a Visual editor exists and is active.
95		- if ( typeof tinyMCE !== 'undefined' && tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {
96		- // Insert into editor.
97		- tinyMCE.activeEditor.execCommand( 'mceReplaceContent', false, shortcode );
98		-
99		- // Close modal.
100		- tinyMCE.activeEditor.windowManager.close();
101		- }
102		- break;
103		-
104		- case 'quicktags':
	127	+ // Depending on the editor type, insert the shortcode.
	128	+ switch (form.querySelector('input[name="editor_type"]').value) {
	129	+ case 'tinymce':
	130	+ // Sanity check that a Visual editor exists and is active.
	131	+ if (
	132	+ typeof tinyMCE !== 'undefined' &&
	133	+ tinyMCE.activeEditor &&
	134	+ !tinyMCE.activeEditor.isHidden()
	135	+ ) {
105	136	// Insert into editor.
106		- QTags.insertContent( shortcode );
	137	+ tinyMCE.activeEditor.execCommand(
	138	+ 'mceReplaceContent',
	139	+ false,
	140	+ shortcode
	141	+ );
107	142
108	143	// Close modal.
109		- convertKitQuickTagsModal.close();
110		- break;
111		- }
112		- }
113		- );
	144	+ tinyMCE.activeEditor.windowManager.close();
	145	+ }
	146	+ break;
114	147
115		- }
116		-);
	148	+ case 'quicktags':
	149	+ // Insert into editor.
	150	+ QTags.insertContent(shortcode);
117	151
	152	+ // Close modal.
	153	+ convertKitQuickTagsModal.close();
	154	+ break;
	155	+ }
	156	+ }
	157	+ });
	158	+});
118	159
119	160	// QuickTags: Setup Backbone Modal and Template.
120		-if ( typeof wp !== 'undefined' && typeof wp.media !== 'undefined' ) {
121		-
	161	+if (typeof wp !== 'undefined' && typeof wp.media !== 'undefined') {
122	162	// Declared globally, as used in this file and quicktags.js.
123		- var convertKitQuickTagsModal = new wp.media.view.Modal(
124		- {
125		- controller: { trigger: function() {} },
126		- className: 'convertkit-quicktags-modal'
127		- }
128		- );
129		- const convertKitQuickTagsModalContent = wp.Backbone.View.extend(
130		- {
131		- template: wp.template( 'convertkit-quicktags-modal' )
132		- }
133		- );
134		- convertKitQuickTagsModal.content( new convertKitQuickTagsModalContent() );
	163	+ // Setting this as const or let causes a JS error stating that `convertKitQuickTagsModal` is not defined globally.
	164	+ // eslint-disable-next-line no-var
	165	+ var convertKitQuickTagsModal = new wp.media.view.Modal({
	166	+ controller: { trigger() {} },
	167	+ className: 'convertkit-quicktags-modal',
	168	+ });
	169	+ const convertKitQuickTagsModalContent = wp.Backbone.View.extend({
	170	+ template: wp.template('convertkit-quicktags-modal'),
	171	+ });
	172	+ convertKitQuickTagsModal.content(new convertKitQuickTagsModalContent());
135	173
136	174	/**
137	175	* Resets the content of the convertKitQuickTagsModal when closing.
138	176	*
		@@ -139,12 +177,8 @@
139	177	* If this isn't performed, switching from Text to Visual Editor for the same shortcode results
140	178	* code picking up data from the QuickTags modal, not the TinyMCE one, due to this 'stale'
141	179	* modal remaining in the DOM, resulting in e.g. the tabbed UI not loading correctly.
142	180	*/
143		- convertKitQuickTagsModal.on(
144		- 'close',
145		- function( e ) {
146		- this.content( new convertKitQuickTagsModalContent() );
147		- }
148		- );
149		-
	181	+ convertKitQuickTagsModal.on('close', function () {
	182	+ this.content(new convertKitQuickTagsModalContent());
	183	+ });
150	184	}