Skip to content

Commit 6aec7ab

Browse files
authored
Merge pull request #6 from soderlind/refactor
Refactor
2 parents 20e7323 + 42b7718 commit 6aec7ab

3 files changed

+99
-89
lines changed

additional-javascript.php

+78-68
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
* Plugin URI: https://github.com/soderlind/additional-javascript
1313
* GitHub Plugin URI: https://github.com/soderlind/additional-javascript
1414
* Description: Add additional JavaScript using the WordPress Customizer.
15-
* Version: 1.0.1
15+
* Version: 1.1.0
1616
* Author: Per Soderlind
1717
* Author URI: https://soderlind.no
1818
* Text Domain: additional-javascript
@@ -31,20 +31,24 @@
3131
add_action( 'customize_preview_init', __NAMESPACE__ . '\customize_preview_additional_javascript' );
3232
add_action( 'customize_controls_enqueue_scripts', __NAMESPACE__ . '\on_customize_controls_enqueue_scripts' );
3333

34+
/**
35+
* Plugin version - used for cache-busting assets
36+
*/
37+
define( 'ADDITIONAL_JAVASCRIPT_VERSION', '1.1.0' );
38+
3439
/**
3540
* Add a default JavaScript code.
3641
*
3742
* @return string
3843
*/
39-
function default_js_template() : string {
44+
function default_js_template(): string {
4045
return <<<EOTEMPLATE
41-
(function( $ ) {
42-
43-
"use strict";
46+
// Run code when the DOM is ready
47+
document.addEventListener('DOMContentLoaded', function () {
4448
45-
// JavaScript code here.
49+
// JavaScript code here.
4650
47-
})(jQuery);
51+
});
4852
EOTEMPLATE;
4953
}
5054

@@ -57,8 +61,8 @@ function register_post_type_javascript() {
5761

5862
register_post_type(
5963
'custom_javascript',
60-
[
61-
'labels' => [
64+
[
65+
'labels' => [
6266
'name' => __( 'Custom JavaScript' ),
6367
'singular_name' => __( 'Custom JavaScript' ),
6468
],
@@ -70,7 +74,7 @@ function register_post_type_javascript() {
7074
'can_export' => true,
7175
// '_builtin' => true, /* internal use only. don't use this when registering your own post type. */
7276
'supports' => [ 'title', 'revisions' ],
73-
'capabilities' => [
77+
'capabilities' => [
7478
'delete_posts' => 'edit_theme_options',
7579
'delete_post' => 'edit_theme_options',
7680
'delete_published_posts' => 'edit_theme_options',
@@ -114,7 +118,7 @@ function soderlind_custom_javascript_cb() {
114118
function register_additional_javascript( \WP_Customize_Manager $wp_customize ) {
115119
$wp_customize->add_section(
116120
'custom_javascript',
117-
[
121+
[
118122
'title' => _x( 'Additional JavaScript', 'customizer menu', 'dss-wp' ),
119123
'priority' => 999,
120124
]
@@ -124,7 +128,7 @@ function register_additional_javascript( \WP_Customize_Manager $wp_customize ) {
124128
$custom_javascript_setting = new Soderlind_Customize_Custom_JavaScript_Setting(
125129
$wp_customize,
126130
sprintf( 'custom_javascript[%s]', get_stylesheet() ),
127-
[
131+
[
128132
'capability' => 'unfiltered_html',
129133
'default' => default_js_template(),
130134
]
@@ -134,7 +138,7 @@ function register_additional_javascript( \WP_Customize_Manager $wp_customize ) {
134138
$control = new \WP_Customize_Code_Editor_Control(
135139
$wp_customize,
136140
'custom_javascript',
137-
[
141+
[
138142
'label' => 'Custom Javascript',
139143
'code_type' => 'application/javascript',
140144
'settings' => [ 'default' => $custom_javascript_setting->id ],
@@ -157,7 +161,7 @@ function soderlind_get_custom_javascript_post( string $stylesheet = '' ) {
157161
$stylesheet = get_stylesheet();
158162
}
159163

160-
$custom_javascript_query_vars = [
164+
$custom_javascript_query_vars = [
161165
'post_type' => 'custom_javascript',
162166
'post_status' => get_post_stati(),
163167
'name' => sanitize_title( $stylesheet ),
@@ -182,9 +186,9 @@ function soderlind_get_custom_javascript_post( string $stylesheet = '' ) {
182186
$query = new \WP_Query( $custom_javascript_query_vars );
183187
$post = $query->post;
184188
/*
185-
* Cache the lookup. See soderlind_update_custom_javascript_post().
186-
* @todo This should get cleared if a custom_javascript post is added/removed.
187-
*/
189+
* Cache the lookup. See soderlind_update_custom_javascript_post().
190+
* @todo This should get cleared if a custom_javascript post is added/removed.
191+
*/
188192
set_theme_mod( 'custom_javascript_post_id', $post ? $post->ID : -1 );
189193
}
190194
} else {
@@ -247,71 +251,71 @@ function soderlind_get_custom_javascript( $stylesheet = '' ) {
247251
function soderlind_update_custom_javascript_post( $javascript, $args = [] ) {
248252
$args = wp_parse_args(
249253
$args,
250-
[
254+
[
251255
'preprocessed' => '',
252256
'stylesheet' => get_stylesheet(),
253257
]
254258
);
255259

256-
$data = [
260+
$data = [
257261
'javascript' => $javascript,
258-
'preprocessed' => $args['preprocessed'],
262+
'preprocessed' => $args[ 'preprocessed' ],
259263
];
260264

261265
/**
262-
* Filters the `javascript` (`post_content`) and `preprocessed` (`post_content_filtered`) args for a `custom_javascript` post being updated.
263-
*
264-
* This filter can be used by plugin that offer JavaScript pre-processors, to store the original
265-
* pre-processed JavaScript in `post_content_filtered` and then store processed JavaScript in `post_content`.
266-
* When used in this way, the `post_content_filtered` should be supplied as the setting value
267-
* instead of `post_content` via a the `customize_value_custom_javascript` filter, for example:
268-
*
269-
* <code>
270-
* add_filter( 'customize_value_custom_javascript', function( $value, $setting ) {
271-
* $post = soderlind_get_custom_javascript_post( $setting->stylesheet );
272-
* if ( $post && ! empty( $post->post_content_filtered ) ) {
273-
* $javascript = $post->post_content_filtered;
274-
* }
275-
* return $javascript;
276-
* }, 10, 2 );
277-
* </code>
278-
*
279-
* @since 4.7.0
280-
* @param array $data {
281-
* Custom JavaScript data.
282-
*
283-
* @type string $javascript JavaScript stored in `post_content`.
284-
* @type string $preprocessed Pre-processed JavaScript stored in `post_content_filtered`. Normally empty string.
285-
* }
286-
* @param array $args {
287-
* The args passed into `wp_update_custom_javascript_post()` merged with defaults.
288-
*
289-
* @type string $javascript The original JavaScript passed in to be updated.
290-
* @type string $preprocessed The original preprocessed JavaScript passed in to be updated.
291-
* @type string $stylesheet The stylesheet (theme) being updated.
292-
* }
293-
*/
266+
* Filters the `javascript` (`post_content`) and `preprocessed` (`post_content_filtered`) args for a `custom_javascript` post being updated.
267+
*
268+
* This filter can be used by plugin that offer JavaScript pre-processors, to store the original
269+
* pre-processed JavaScript in `post_content_filtered` and then store processed JavaScript in `post_content`.
270+
* When used in this way, the `post_content_filtered` should be supplied as the setting value
271+
* instead of `post_content` via a the `customize_value_custom_javascript` filter, for example:
272+
*
273+
* <code>
274+
* add_filter( 'customize_value_custom_javascript', function( $value, $setting ) {
275+
* $post = soderlind_get_custom_javascript_post( $setting->stylesheet );
276+
* if ( $post && ! empty( $post->post_content_filtered ) ) {
277+
* $javascript = $post->post_content_filtered;
278+
* }
279+
* return $javascript;
280+
* }, 10, 2 );
281+
* </code>
282+
*
283+
* @since 4.7.0
284+
* @param array $data {
285+
* Custom JavaScript data.
286+
*
287+
* @type string $javascript JavaScript stored in `post_content`.
288+
* @type string $preprocessed Pre-processed JavaScript stored in `post_content_filtered`. Normally empty string.
289+
* }
290+
* @param array $args {
291+
* The args passed into `wp_update_custom_javascript_post()` merged with defaults.
292+
*
293+
* @type string $javascript The original JavaScript passed in to be updated.
294+
* @type string $preprocessed The original preprocessed JavaScript passed in to be updated.
295+
* @type string $stylesheet The stylesheet (theme) being updated.
296+
* }
297+
*/
294298
$data = apply_filters( 'soderlind_update_custom_javascript_data', $data, array_merge( $args, compact( 'javascript' ) ) );
295299

296-
$post_data = [
297-
'post_title' => $args['stylesheet'],
298-
'post_name' => sanitize_title( $args['stylesheet'] ),
300+
$post_data = [
301+
'post_title' => $args[ 'stylesheet' ],
302+
'post_name' => sanitize_title( $args[ 'stylesheet' ] ),
299303
'post_type' => 'custom_javascript',
300304
'post_status' => 'publish',
301-
'post_content' => $data['javascript'],
302-
'post_content_filtered' => $data['preprocessed'],
305+
'post_content' => $data[ 'javascript' ],
306+
'post_content_filtered' => $data[ 'preprocessed' ],
303307
];
304308

305309
// Update post if it already exists, otherwise create a new one.
306-
$post = soderlind_get_custom_javascript_post( $args['stylesheet'] );
310+
$post = soderlind_get_custom_javascript_post( $args[ 'stylesheet' ] );
307311
if ( $post ) {
308-
$post_data['ID'] = $post->ID;
309-
$r = wp_update_post( wp_slash( $post_data ), true );
312+
$post_data[ 'ID' ] = $post->ID;
313+
$r = wp_update_post( wp_slash( $post_data ), true );
310314
} else {
311315
$r = wp_insert_post( wp_slash( $post_data ), true );
312316

313317
if ( ! is_wp_error( $r ) ) {
314-
if ( get_stylesheet() === $args['stylesheet'] ) {
318+
if ( get_stylesheet() === $args[ 'stylesheet' ] ) {
315319
set_theme_mod( 'custom_javascript_post_id', $r );
316320
}
317321

@@ -334,21 +338,27 @@ function soderlind_update_custom_javascript_post( $javascript, $args = [] ) {
334338
* @return void
335339
*/
336340
function customize_preview_additional_javascript() {
337-
$handle = 'customize-preview-additional-javascript';
341+
$handle = 'additional-javascript-preview';
338342
$src = plugins_url( '/js/additional-javascript-preview.js', __FILE__ );
339-
$deps = [ 'customize-preview', 'jquery' ];
340-
wp_enqueue_script( $handle, $src, $deps, rand(), true );
343+
$deps = [ 'customize-preview' ];
344+
345+
if ( file_exists( plugin_dir_path( __FILE__ ) . 'js/additional-javascript-preview.js' ) ) {
346+
wp_enqueue_script( $handle, $src, $deps, ADDITIONAL_JAVASCRIPT_VERSION, true );
347+
}
341348
}
342349

343350
/**
344-
* Load script for customizer control.
351+
* Load styles for customizer control.
345352
*
346353
* @return void
347354
*/
348355
function on_customize_controls_enqueue_scripts() {
349-
$suffix = function_exists( 'is_rtl' ) && is_rtl() ? '-rtl' : '';
350-
$handle = "custom-javascript${suffix}";
356+
$suffix = is_rtl() ? '-rtl' : '';
357+
$handle = 'additional-javascript-controls' . $suffix;
351358
$src = plugins_url( "/css/customize-controls-custom-javascript${suffix}.css", __FILE__ );
352359
$deps = [ 'customize-controls' ];
353-
wp_enqueue_style( $handle, $src, $deps );
360+
361+
if ( file_exists( plugin_dir_path( __FILE__ ) . "css/customize-controls-custom-javascript${suffix}.css" ) ) {
362+
wp_enqueue_style( $handle, $src, $deps, ADDITIONAL_JAVASCRIPT_VERSION );
363+
}
354364
}

class-custom-javascript-control.php

+14-14
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ final class Soderlind_Customize_Custom_JavaScript_Setting extends \WP_Customize_
3535
* @since 4.7.0
3636
* @var string
3737
*/
38-
public $capability = 'edit_css';
38+
public $capability = 'unfiltered_html';
3939

4040
/**
4141
* Stylesheet
@@ -46,26 +46,26 @@ final class Soderlind_Customize_Custom_JavaScript_Setting extends \WP_Customize_
4646
public $stylesheet = '';
4747

4848
/**
49-
* WP_Customize_Custom_JavaScript_Setting constructor.
49+
* Soderlind_Customize_Custom_JavaScript_Setting constructor.
5050
*
5151
* @since 4.7.0
5252
*
53-
* @throws Exception If the setting ID does not match the pattern `custom_javascript[$stylesheet]`.
53+
* @throws \Exception If the setting ID does not match the pattern `custom_javascript[$stylesheet]`.
5454
*
55-
* @param WP_Customize_Manager $manager The Customize Manager class.
56-
* @param string $id An specific ID of the setting. Can be a
57-
* theme mod or option name.
58-
* @param array $args Setting arguments.
55+
* @param \WP_Customize_Manager $manager The Customize Manager class.
56+
* @param string $id An specific ID of the setting. Can be a
57+
* theme mod or option name.
58+
* @param array $args Setting arguments.
5959
*/
6060
public function __construct( $manager, $id, $args = [] ) {
6161
parent::__construct( $manager, $id, $args );
62-
if ( 'custom_javascript' !== $this->id_data['base'] ) {
63-
throw new Exception( 'Expected custom_javascript id_base.' );
62+
if ( 'custom_javascript' !== $this->id_data[ 'base' ] ) {
63+
throw new \Exception( 'Setting ID must have custom_javascript as its base.' );
6464
}
65-
if ( 1 !== count( $this->id_data['keys'] ) || empty( $this->id_data['keys'][0] ) ) {
66-
throw new Exception( 'Expected single stylesheet key.' );
65+
if ( 1 !== count( $this->id_data[ 'keys' ] ) || empty( $this->id_data[ 'keys' ][ 0 ] ) ) {
66+
throw new \Exception( 'Setting ID must contain a single stylesheet key.' );
6767
}
68-
$this->stylesheet = $this->id_data['keys'][0];
68+
$this->stylesheet = $this->id_data[ 'keys' ][ 0 ];
6969
}
7070

7171
/**
@@ -121,7 +121,7 @@ public function value() {
121121
return $post_value;
122122
}
123123
}
124-
$id_base = $this->id_data['base'];
124+
$id_base = $this->id_data[ 'base' ];
125125
$value = '';
126126
$post = soderlind_get_custom_javascript_post( $this->stylesheet );
127127
if ( $post ) {
@@ -178,7 +178,7 @@ public function update( $javascript ) {
178178

179179
$r = soderlind_update_custom_javascript_post(
180180
$javascript,
181-
[
181+
[
182182
'stylesheet' => $this->stylesheet,
183183
]
184184
);

js/additional-javascript-preview.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
/*
22
* Script run inside a Customizer preview frame.
33
*/
4-
(function(exports, $) {
5-
var api = wp.customize;
4+
(function(exports) {
5+
const api = wp.customize;
66

77
api.settingPreviewHandlers = {
88
/**
9-
* Preview changes to custom css.
9+
* Preview changes to custom javascript.
1010
*
11-
* @param {string} value Custom CSS..
11+
* @param {string} value Custom JavaScript.
1212
* @returns {void}
1313
*/
1414
custom_javascript: function(value) {
15-
$("#soderlind-custom-javascript").text(value);
15+
document.getElementById('soderlind-custom-javascript').textContent = value;
1616
},
1717
};
1818

19-
$(function() {
19+
document.addEventListener('DOMContentLoaded', function() {
2020
api(
2121
`custom_javascript[${api.settings.theme.stylesheet}]`,
2222
function(setting) {
@@ -26,4 +26,4 @@
2626

2727
api.trigger("preview-ready");
2828
});
29-
})(wp, jQuery);
29+
})(wp);

0 commit comments

Comments
 (0)