← All changes | resources/backend/js/editor.js +94 -114 3.3.2 → 2.8.6 View file →

		@@ -2,12 +2,12 @@
2	2	* Handles registration of TinyMCE buttons.
3	3	*
4	4	* @since 1.9.6
5	5	*
	6	+ * @package ConvertKit
6	7	* @author ConvertKit
7	8	*/
8	9
9		-/* eslint-disable no-unused-vars */
10	10	/**
11	11	* Registers the given block as a TinyMCE Plugin, with a button in
12	12	* the Visual Editor toolbar.
13	13	*
		@@ -12,95 +12,110 @@
12	12	* the Visual Editor toolbar.
13	13	*
14	14	* @since 1.9.6
15	15	*
16		- * @param {Object} block Block
	16	+ * @param object block Block
17	17	*/
18		-function convertKitTinyMCERegisterPlugin(block) {
	18	+function convertKitTinyMCERegisterPlugin( block ) {
	19	+
19	20	tinymce.PluginManager.add(
20	21	'convertkit_' + block.name,
21		- function (editor, url) {
	22	+ function ( editor, url ) {
	23	+
22	24	// Add Button to Visual Editor Toolbar.
23		- editor.addButton('convertkit_' + block.name, {
24		- title: block.title,
25		- image: url + '../../../../' + block.icon,
26		- cmd: 'convertkit_' + block.name,
27		- });
	25	+ editor.addButton(
	26	+ 'convertkit_' + block.name,
	27	+ {
	28	+ title: block.title,
	29	+ image: url + '../../../../' + block.icon,
	30	+ cmd: 'convertkit_' + block.name,
	31	+ }
	32	+ );
28	33
29	34	// Load View when button clicked.
30		- editor.addCommand('convertkit_' + block.name, function () {
31		- // Close any existing QuickTags modal.
32		- convertKitQuickTagsModal.close();
	35	+ editor.addCommand(
	36	+ 'convertkit_' + block.name,
	37	+ function () {
33	38
34		- // Open the TinyMCE Modal.
35		- editor.windowManager.open({
36		- id: 'convertkit-modal-body',
37		- title: block.title,
38		- width: block.modal.width,
	39	+ // Close any existing QuickTags modal.
	40	+ convertKitQuickTagsModal.close();
39	41
40		- // Set modal height up to a maximum of 580px.
41		- // Content will overflow-y to show a scrollbar where necessary.
42		- height: block.modal.height < 580 ? block.modal.height : 580,
43		- inline: 1,
44		- buttons: [
	42	+ // Open the TinyMCE Modal.
	43	+ editor.windowManager.open(
45	44	{
46		- text: 'Cancel',
47		- classes: 'cancel',
48		- },
	45	+ id: 'convertkit-modal-body',
	46	+ title: block.title,
	47	+ width: block.modal.width,
	48	+
	49	+ // Set modal height up to a maximum of 580px.
	50	+ // Content will overflow-y to show a scrollbar where necessary.
	51	+ height: ( block.modal.height < 580 ? block.modal.height : 580 ),
	52	+ inline: 1,
	53	+ buttons: [
	54	+ {
	55	+ text: 'Cancel',
	56	+ classes: 'cancel'
	57	+ },
	58	+ {
	59	+ text: 'Insert',
	60	+ subtype: 'primary',
	61	+ classes: 'insert'
	62	+ }
	63	+ ]
	64	+ }
	65	+ );
	66	+
	67	+ // Perform an AJAX call to load the modal's view.
	68	+ fetch(
	69	+ ajaxurl,
49	70	{
50		- text: 'Insert',
51		- subtype: 'primary',
52		- classes: 'insert',
53		- },
54		- ],
55		- });
	71	+ method: 'POST',
	72	+ headers: {
	73	+ 'Content-Type': 'application/x-www-form-urlencoded',
	74	+ },
	75	+ body: new URLSearchParams(
	76	+ {
	77	+ 'action': 'convertkit_admin_tinymce_output_modal',
	78	+ 'nonce': convertkit_admin_tinymce.nonce,
	79	+ 'editor_type': 'tinymce',
	80	+ 'shortcode': block.name
	81	+ }
	82	+ ),
	83	+ }
	84	+ )
	85	+ .then(
	86	+ function ( response ) {
	87	+ return response.text();
	88	+ }
	89	+ )
	90	+ .then(
	91	+ function ( result ) {
	92	+ // Inject HTML into modal.
	93	+ document.querySelector( '#convertkit-modal-body-body' ).innerHTML = result;
56	94
57		- // Perform an AJAX call to load the modal's view.
58		- fetch(
59		- convertkit_admin_tinymce.ajaxurl +
60		- '/' +
61		- block.name +
62		- '/' +
63		- 'tinymce',
64		- {
65		- method: 'GET',
66		- headers: {
67		- 'X-WP-Nonce': convertkit_admin_tinymce.nonce,
68		- },
69		- }
70		- )
71		- .then(function (response) {
72		- return response.json();
73		- })
74		- .then(function (result) {
75		- // Inject HTML into modal.
76		- document.querySelector(
77		- '#convertkit-modal-body-body'
78		- ).innerHTML = result;
	95	+ // Initialize tabbed interface.
	96	+ convertKitTabsInit();
79	97
80		- // Initialize tabbed interface.
81		- convertKitTabsInit();
	98	+ // Listen for color input changes.
	99	+ convertKitColorInputInit();
82	100
83		- // Listen for color input changes.
84		- convertKitColorInputInit();
	101	+ // Bind refresh resource event listeners.
	102	+ convertKitRefreshResourcesInitEventListeners();
	103	+ }
	104	+ )
	105	+ .catch(
	106	+ function ( error ) {
	107	+ console.error( error );
	108	+ }
	109	+ );
85	110
86		- // Initialize conditional fields.
87		- convertKitConditionallyDisplayTinyMCEModalFields();
	111	+ }
	112	+ );
88	113
89		- // Listen for field changes.
90		- convertKitConditionalFieldsInit();
91		-
92		- // Bind refresh resource event listeners.
93		- convertKitRefreshResourcesInitEventListeners();
94		- })
95		- .catch(function (error) {
96		- console.error(error);
97		- });
98		- });
99	114	}
100	115	);
	116	+
101	117	}
102		-/* eslint-enable no-unused-vars */
103	118
104	119	/**
105	120	* Listens for changes to input[type=color] inputs within a TinyMCE or QuickTags modal,
106	121	* assigning the value to the input's data-value attribute.
		@@ -110,52 +125,17 @@
110	125	*
111	126	* @since 2.4.3
112	127	*/
113	128	function convertKitColorInputInit() {
114		- document
115		- .querySelectorAll('.convertkit-option input[type=color]')
116		- .forEach(function (colorPicker) {
117		- colorPicker.addEventListener('change', function (event) {
118		- event.target.dataset.value = event.target.value;
119		- });
120		- });
121		-}
122	129
123		-/**
124		- * Initializes the conditional fields functionality.
125		- *
126		- * @since 3.0.6
127		- */
128		-function convertKitConditionalFieldsInit() {
129		- document
130		- .querySelectorAll(
131		- 'form.convertkit-tinymce-popup select, form.convertkit-tinymce-popup input'
132		- )
133		- .forEach(function (field) {
134		- field.addEventListener('change', function () {
135		- convertKitConditionallyDisplayTinyMCEModalFields();
136		- });
137		- });
138		-}
139		-
140		-/**
141		- * Conditionally display the TinyMCE modal fields.
142		- *
143		- * @since 3.0.6
144		- */
145		-function convertKitConditionallyDisplayTinyMCEModalFields() {
146		- document
147		- .querySelectorAll('form.convertkit-tinymce-popup [data-display-if]')
148		- .forEach(function (field) {
149		- // Get field that controls whether this field should be displayed.
150		- const controllingField = document.querySelector(
151		- `form.convertkit-tinymce-popup select[name="${field.dataset.displayIf}"]`
	130	+ document.querySelectorAll( '.convertkit-option input[type=color]' ).forEach(
	131	+ function ( colorPicker ) {
	132	+ colorPicker.addEventListener(
	133	+ 'change',
	134	+ function ( event ) {
	135	+ event.target.dataset.value = event.target.value;
	136	+ }
152	137	);
	138	+ }
	139	+ );
153	140
154		- // If the value of the field that should be displayed is the same as the value of the controlling field, show/hide the containing div.
155		- const container = field.closest('.convertkit-option');
156		- container.style.display =
157		- field.dataset.displayIfValue === controllingField.value
158		- ? 'grid'
159		- : 'none';
160		- });
161	141	}