← All changes | includes/Assets.php +141 -5 1.9.6 → 2.0.0 View file →

		@@ -1,5 +1,10 @@
1	1	<?php
	2	+/**
	3	+ * Registers and enqueues admin/frontend scripts and styles.
	4	+ *
	5	+ * @package SpringDevs\Subscription
	6	+ */
2	7
3	8	namespace SpringDevs\Subscription;
4	9
5	10	/**
		@@ -12,11 +17,18 @@
12	17	*/
13	18	public function __construct() {
14	19	if ( is_admin() ) {
15	20	add_action( 'admin_enqueue_scripts', array( $this, 'register' ), 5 );
	21	+ add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_components' ), 6 );
16	22	} else {
17	23	add_action( 'wp_enqueue_scripts', array( $this, 'register' ), 5 );
18	24	}
	25	+
	26	+ // Development only: see version_asset_src().
	27	+ if ( false !== strpos( SUBSCRPT_VERSION, '#WPSUBS' ) ) {
	28	+ add_filter( 'script_loader_src', array( $this, 'version_asset_src' ) );
	29	+ add_filter( 'style_loader_src', array( $this, 'version_asset_src' ) );
	30	+ }
19	31	}
20	32
21	33	/**
22	34	* Register our app scripts and styles
		@@ -28,8 +40,44 @@
28	40	$this->register_styles( $this->get_styles() );
29	41	}
30	42
31	43	/**
	44	+ * Give this plugin's assets a version that actually changes in development.
	45	+ *
	46	+ * `SUBSCRPT_VERSION` is a build-time placeholder in a git checkout —
	47	+ * release.sh substitutes the real number when packaging — so every asset is
	48	+ * served under the same, never-changing version string and the browser
	49	+ * keeps its cached copy through edit after edit. That has cost real
	50	+ * debugging time: a fix already on disk and already being served, appearing
	51	+ * not to work.
	52	+ *
	53	+ * Filtering the loader rather than each registration catches the enqueues
	54	+ * that call wp_enqueue_script() directly with a version of their own, which
	55	+ * is most of the admin screens. On a release build the placeholder is gone
	56	+ * and this returns the src untouched.
	57	+ *
	58	+ * @param string $src Asset URL, with or without a `ver` argument.
	59	+ * @return string
	60	+ */
	61	+ public function version_asset_src( $src ) {
	62	+ if ( false === strpos( SUBSCRPT_VERSION, '#WPSUBS' ) ) {
	63	+ return $src;
	64	+ }
	65	+
	66	+ if ( ! is_string( $src ) || 0 !== strpos( $src, SUBSCRPT_ASSETS ) ) {
	67	+ return $src;
	68	+ }
	69	+
	70	+ $path = SUBSCRPT_PATH . '/assets' . strtok( substr( $src, strlen( SUBSCRPT_ASSETS ) ), '?' );
	71	+
	72	+ if ( ! file_exists( $path ) ) {
	73	+ return $src;
	74	+ }
	75	+
	76	+ return add_query_arg( 'ver', (string) filemtime( $path ), $src );
	77	+ }
	78	+
	79	+ /**
32	80	* Register scripts
33	81	*
34	82	* @param array $scripts scripts.
35	83	*
		@@ -80,8 +128,22 @@
80	128	'dependencies' => false,
81	129	'version' => SUBSCRPT_VERSION,
82	130	);
83	131
	132	+ // Admin UI components, one file each for readability (assets/js/admin-components/).
	133	+ // Each attaches its API to `window` and auto-inits; they are registered as
	134	+ // individual scripts and bundled behind the `subscrpt_admin_components` handle.
	135	+ $components = array();
	136	+ $component_files = array( 'adv-select', 'tag-select', 'editlist', 'modal', 'tabs', 'accordion', 'pagination', 'toast', 'save' );
	137	+ foreach ( $component_files as $component_file ) {
	138	+ $handle = 'subscrpt_component_' . str_replace( '-', '_', $component_file );
	139	+ $components[ $handle ] = array(
	140	+ 'src' => $plugin_js_assets_path . 'admin-components/' . $component_file . '.js',
	141	+ 'deps' => array(),
	142	+ 'in_footer' => true,
	143	+ );
	144	+ }
	145	+
84	146	$scripts = array(
85	147	'sdevs_subscription_admin' => array(
86	148	'src' => $plugin_js_assets_path . 'admin.js',
87	149	'deps' => array( 'jquery' ),
		@@ -86,8 +148,20 @@
86	148	'src' => $plugin_js_assets_path . 'admin.js',
87	149	'deps' => array( 'jquery' ),
88	150	'in_footer' => true,
89	151	),
	152	+ 'subscrpt_admin_components' => array(
	153	+ 'src' => false,
	154	+ 'deps' => array_keys( $components ),
	155	+ 'in_footer' => true,
	156	+ ),
	157	+ 'subscrpt_plan_forms_js' => array(
	158	+ // Shared plan-group + selling-plan modal logic, used by both the
	159	+ // Plans admin screen and the product-editor Subscription tab.
	160	+ 'src' => $plugin_js_assets_path . 'admin/plan-forms.js',
	161	+ 'deps' => array( 'subscrpt_admin_components' ),
	162	+ 'in_footer' => true,
	163	+ ),
90	164	'sdevs_installer' => array(
91	165	'src' => $plugin_js_assets_path . 'installer.js',
92	166	'deps' => array( 'jquery' ),
93	167	'in_footer' => true,
		@@ -99,9 +173,9 @@
99	173	'in_footer' => true,
100	174	),
101	175	);
102	176
103		- return $scripts;
	177	+ return array_merge( $components, $scripts );
104	178	}
105	179
106	180	/**
107	181	* Get registered styles
		@@ -110,19 +184,81 @@
110	184	*/
111	185	public function get_styles() {
112	186	$plugin_css_assets_path = SUBSCRPT_ASSETS . '/css/';
113	187
	188	+ // Admin UI component styles, split by section for readability
	189	+ // (assets/css/admin-components/). Loaded in this order behind the
	190	+ // `subscrpt_admin_components` handle; `tokens` must stay first.
	191	+ $component_styles = array();
	192	+ $component_files = array(
	193	+ 'tokens',
	194	+ 'layout',
	195	+ 'page-header',
	196	+ 'forms',
	197	+ 'buttons',
	198	+ 'select',
	199	+ 'table',
	200	+ 'badges',
	201	+ 'dropdown',
	202	+ 'pagination',
	203	+ 'empty',
	204	+ 'toggle',
	205	+ 'settings',
	206	+ 'tag-select',
	207	+ 'modal',
	208	+ 'editlist',
	209	+ 'tabs',
	210	+ 'vnav',
	211	+ 'accordion',
	212	+ 'tooltip',
	213	+ 'toast',
	214	+ );
	215	+ foreach ( $component_files as $component_file ) {
	216	+ $handle = 'subscrpt_style_' . str_replace( '-', '_', $component_file );
	217	+ $component_styles[ $handle ] = array(
	218	+ 'src' => $plugin_css_assets_path . 'admin-components/' . $component_file . '.css',
	219	+ );
	220	+ }
	221	+
114	222	$styles = array(
115		- 'subscrpt_admin_css' => array(
	223	+ 'subscrpt_admin_css' => array(
116	224	'src' => $plugin_css_assets_path . 'admin.css',
117	225	),
118		- 'subscrpt_status_css' => array(
	226	+ 'subscrpt_admin_components' => array(
	227	+ 'src' => false,
	228	+ 'deps' => array_keys( $component_styles ),
	229	+ ),
	230	+ 'subscrpt_status_css' => array(
119	231	'src' => $plugin_css_assets_path . 'status.css',
120	232	),
121		- 'sdevs_installer' => array(
	233	+ 'sdevs_installer' => array(
122	234	'src' => $plugin_css_assets_path . 'installer.css',
123	235	),
124	236	);
125	237
126		- return $styles;
	238	+ return array_merge( $component_styles, $styles );
	239	+ }
	240	+
	241	+ /**
	242	+ * Enqueue admin component styles on all WPSubscription admin pages.
	243	+ *
	244	+ * @param string $hook The current admin page hook.
	245	+ */
	246	+ public function enqueue_admin_components( $hook ) {
	247	+ $is_main_page = 'toplevel_page_wp-subscription' === $hook;
	248	+ $is_subs_page = str_starts_with( $hook, 'wpsubscription_page' ) || str_starts_with( $hook, 'wp-subscription_page' );
	249	+
	250	+ if ( $is_main_page || $is_subs_page ) {
	251	+ wp_enqueue_style( 'subscrpt_admin_components' );
	252	+ wp_enqueue_script( 'subscrpt_admin_components' );
	253	+ }
	254	+ }
	255	+
	256	+ /**
	257	+ * Enqueue chart.js where this method is called.
	258	+ *
	259	+ * Source: https://cdn.jsdelivr.net/npm/chart.js
	260	+ */
	261	+ public static function enqueue_chart_js() {
	262	+ wp_enqueue_script( 'subscrpt-ext-lib-chartjs', SUBSCRPT_ASSETS . '/js/chart.js', [], SUBSCRPT_VERSION, true );
127	263	}
128	264	}