← All changes | admin/js/codemirror.js +24 -31 1.12 → 3.4 View file →

		@@ -1,6 +1,6 @@
1	1	/**
2		- * JavaScript code for the CodeMirror handling on the "Options" screen
	2	+ * JavaScript code for the CodeMirror handling on the "Options" screen.
3	3	*
4	4	* @package TablePress
5	5	* @subpackage Views JavaScript
6	6	* @author Tobias Bäthge
		@@ -6,47 +6,39 @@
6	6	* @author Tobias Bäthge
7	7	* @since 1.9.0
8	8	*/
9	9
10		-/* global wp, tablepress_codemirror_settings */
	10	+/* globals tp, wp */
11	11
12		-jQuery( document ).ready( function( $ ) {
	12	+/* jshint strict: global */
	13	+'use strict'; // Necessary as this file does not use "import".
13	14
14		- 'use strict';
	15	+// Ensure the global `tp` object exists.
	16	+window.tp = window.tp || {};
15	17
	18	+document.addEventListener( 'DOMContentLoaded', () => {
	19	+
16	20	/**
17	21	* Invoke CodeMirror on the "Custom CSS" textarea.
18	22	*
19	23	* @since 1.9.0
20	24	*/
21		- var CM_custom_css = wp.codeEditor.initialize( document.getElementById( 'option-custom-css' ), tablepress_codemirror_settings );
	25	+ tp.CM_custom_css = wp.codeEditor.initialize( 'option-custom-css', {} ).codemirror;
	26	+ const $CM_wrapper = tp.CM_custom_css.getWrapperElement();
22	27
23	28	/**
24		- * Make the CodeMirror textarea vertically resizable.
	29	+ * Let CodeMirror textarea grow on first focus (with mouse click), if it is not disabled.
25	30	*
26		- * @since 1.7.0
27		- */
28		- $( CM_custom_css.codemirror.getWrapperElement() ).resizable( {
29		- handles: 's',
30		- resize: function() {
31		- var $this = $(this);
32		- CM_custom_css.codemirror.setSize( $this.width(), $this.height() );
33		- }
34		- } );
35		-
36		- /**
37		- * Let CodeMirror textarea grow on first focus, if it is not disabled.
38		- *
39	31	* @since 1.0.0
40	32	*/
41		- $( '#tablepress-page' ).find( '.CodeMirror' ).on( 'mousedown.codemirror', function() {
42		- var $this = $(this);
43		- if ( ! $this.hasClass( 'disabled' ) ) {
44		- $this.addClass( 'large' );
45		- CM_custom_css.codemirror.refresh();
46		- $this.off( 'mousedown.codemirror' );
	33	+ const CM_wrapper_mousedown_handler = function () {
	34	+ if ( ! this.classList.contains( 'disabled' ) ) {
	35	+ this.classList.add( 'large' );
	36	+ tp.CM_custom_css.refresh();
	37	+ this.removeEventListener( 'mousedown', CM_wrapper_mousedown_handler ); // No need to keep checking for clicks after the textarea height was increased.
47	38	}
48		- } );
	39	+ };
	40	+ $CM_wrapper.addEventListener( 'mousedown', CM_wrapper_mousedown_handler );
49	41
50	42	/**
51	43	* Enable/disable CodeMirror according to state of "Load Custom CSS" checkbox.
52	44	*
		@@ -51,11 +43,12 @@
51	43	* Enable/disable CodeMirror according to state of "Load Custom CSS" checkbox.
52	44	*
53	45	* @since 1.0.0
54	46	*/
55		- $( '#option-use-custom-css' ).on( 'change', function() {
56		- var use_custom_css = $(this).prop( 'checked' );
57		- CM_custom_css.codemirror.setOption( 'readOnly', ! use_custom_css );
58		- $( '#tablepress-page' ).find( '.CodeMirror' ).toggleClass( 'disabled', ! use_custom_css );
59		- } ).change();
	47	+ const $cb_use_custom_css = document.getElementById( 'option-use-custom-css' );
	48	+ $cb_use_custom_css.addEventListener( 'change', function () {
	49	+ tp.CM_custom_css.setOption( 'readOnly', ! this.checked );
	50	+ $CM_wrapper.classList.toggle( 'disabled', ! this.checked );
	51	+ } );
	52	+ $cb_use_custom_css.dispatchEvent( new Event( 'change' ) );
60	53
61	54	} );