← All changes | modules/theme-tools/content-options/customizer.js +108 -177 13.7.2 → 16.3-a.1 View file →

		@@ -7,211 +7,142 @@
7	7	*
8	8	* Contains handlers to make Theme Customizer preview reload changes asynchronously.
9	9	*/
10	10
11		-( function ( $ ) {
12		- // Blog Display
13		- wp.customize( 'jetpack_content_blog_display', function ( value ) {
14		- if ( 'content' === blogDisplay.display ) {
15		- $( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
	11	+/**
	12	+ * Function to apply styles to elements based on the display type
	13	+ * @param {object} selectors - HTML selectors which styles will apply to.
	14	+ * @param {object} styles - Styles to be applied to selectors.
	15	+ */
	16	+function applyStyles( selectors, styles ) {
	17	+ document.querySelectorAll( selectors ).forEach( el => {
	18	+ for ( const [ key, value ] of Object.entries( styles ) ) {
	19	+ el.style[ key ] = value;
	20	+ }
	21	+ } );
	22	+}
	23	+
	24	+// Blog Display
	25	+wp.customize( 'jetpack_content_blog_display', function ( value ) {
	26	+ /**
	27	+ * Updates the blog display based on the selected option.
	28	+ * @param {string} to - Content display option.
	29	+ */
	30	+ function updateBlogDisplay( to ) {
	31	+ const contentSelectors = '.jetpack-blog-display.jetpack-the-content';
	32	+ const excerptSelectors = '.jetpack-blog-display.jetpack-the-excerpt';
	33	+ const featuredContentSelectors = '.featured-content .jetpack-blog-display';
	34	+
	35	+ if ( to === 'content' ) {
	36	+ applyStyles( `${ excerptSelectors }, ${ featuredContentSelectors }.jetpack-the-excerpt`, {
16	37	clip: 'rect(1px, 1px, 1px, 1px)',
17	38	position: 'absolute',
18	39	} );
19		- $( '.jetpack-blog-display.jetpack-the-content' ).css( {
	40	+ applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
20	41	clip: 'auto',
21	42	position: 'relative',
22	43	} );
23		- } else if ( 'excerpt' === blogDisplay.display ) {
24		- $( '.jetpack-blog-display.jetpack-the-content' ).css( {
	44	+ } else if ( to === 'excerpt' ) {
	45	+ applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
25	46	clip: 'rect(1px, 1px, 1px, 1px)',
26	47	position: 'absolute',
27	48	} );
28		- $( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
	49	+ applyStyles( `${ excerptSelectors }, ${ featuredContentSelectors }.jetpack-the-excerpt`, {
29	50	clip: 'auto',
30	51	position: 'relative',
31	52	} );
32		- } else if ( 'mixed' === blogDisplay.display ) {
33		- $( '.jetpack-blog-display.jetpack-the-content.output-the-content' ).css( {
34		- clip: 'auto',
35		- position: 'relative',
36		- } );
37		- $( '.jetpack-blog-display.jetpack-the-excerpt.output-the-content' ).css( {
38		- clip: 'rect(1px, 1px, 1px, 1px)',
39		- position: 'absolute',
40		- } );
41		- $( '.jetpack-blog-display.jetpack-the-content.output-the-excerpt' ).css( {
42		- clip: 'rect(1px, 1px, 1px, 1px)',
43		- position: 'absolute',
44		- } );
45		- $( '.jetpack-blog-display.jetpack-the-excerpt.output-the-excerpt' ).css( {
46		- clip: 'auto',
47		- position: 'relative',
48		- } );
49		- }
50		- value.bind( function ( to ) {
51		- if ( 'content' === to ) {
52		- $( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
53		- clip: 'rect(1px, 1px, 1px, 1px)',
54		- position: 'absolute',
55		- } );
56		- $( '.jetpack-blog-display.jetpack-the-content' ).css( {
	53	+ } else if ( to === 'mixed' ) {
	54	+ applyStyles(
	55	+ `${ contentSelectors }.output-the-content, ${ featuredContentSelectors }.jetpack-the-content.output-the-content`,
	56	+ {
57	57	clip: 'auto',
58	58	position: 'relative',
59		- } );
60		- } else if ( 'excerpt' === to ) {
61		- $( '.jetpack-blog-display.jetpack-the-content' ).css( {
	59	+ }
	60	+ );
	61	+ applyStyles(
	62	+ `${ excerptSelectors }.output-the-content, ${ contentSelectors }.output-the-excerpt, ${ featuredContentSelectors }.jetpack-the-excerpt.output-the-content, ${ featuredContentSelectors }.jetpack-the-content.output-the-excerpt`,
	63	+ {
62	64	clip: 'rect(1px, 1px, 1px, 1px)',
63	65	position: 'absolute',
64		- } );
65		- $( '.jetpack-blog-display.jetpack-the-excerpt' ).css( {
	66	+ }
	67	+ );
	68	+ applyStyles(
	69	+ `${ excerptSelectors }.output-the-excerpt, ${ featuredContentSelectors }.jetpack-the-excerpt.output-the-excerpt`,
	70	+ {
66	71	clip: 'auto',
67	72	position: 'relative',
68		- } );
69		- } else if ( 'mixed' === to ) {
70		- $( '.jetpack-blog-display.jetpack-the-content.output-the-content' ).css( {
71		- clip: 'auto',
72		- position: 'relative',
73		- } );
74		- $( '.jetpack-blog-display.jetpack-the-excerpt.output-the-content' ).css( {
75		- clip: 'rect(1px, 1px, 1px, 1px)',
76		- position: 'absolute',
77		- } );
78		- $( '.jetpack-blog-display.jetpack-the-content.output-the-excerpt' ).css( {
79		- clip: 'rect(1px, 1px, 1px, 1px)',
80		- position: 'absolute',
81		- } );
82		- $( '.jetpack-blog-display.jetpack-the-excerpt.output-the-excerpt' ).css( {
83		- clip: 'auto',
84		- position: 'relative',
85		- } );
	73	+ }
	74	+ );
	75	+ }
	76	+
	77	+ if ( blogDisplay.masonry ) {
	78	+ const masonryElement = document.querySelector( blogDisplay.masonry );
	79	+ if ( masonryElement ) {
	80	+ masonryElement.masonry();
86	81	}
87		- if ( blogDisplay.masonry ) {
88		- $( blogDisplay.masonry ).masonry();
89		- }
90		- } );
	82	+ }
	83	+ }
	84	+
	85	+ updateBlogDisplay( blogDisplay.display );
	86	+ value.bind( updateBlogDisplay );
	87	+} );
	88	+
	89	+/**
	90	+ * Function to update post details visibility
	91	+ * @param {object} selectors - HTML selectors which styles will apply to.
	92	+ * @param {string} to - Content display option.
	93	+ * @param {string} hiddenClass - Class to be added to the body when the post details are hidden.
	94	+ */
	95	+function updatePostDetails( selectors, to, hiddenClass ) {
	96	+ document.querySelectorAll( selectors ).forEach( element => {
	97	+ if ( to === false ) {
	98	+ element.style.clip = 'rect(1px, 1px, 1px, 1px)';
	99	+ element.style.height = '1px';
	100	+ element.style.overflow = 'hidden';
	101	+ element.style.position = 'absolute';
	102	+ element.style.width = '1px';
	103	+ document.body.classList.add( hiddenClass );
	104	+ } else {
	105	+ element.style.clip = 'auto';
	106	+ element.style.height = 'auto';
	107	+ element.style.overflow = 'auto';
	108	+ element.style.position = 'relative';
	109	+ element.style.width = 'auto';
	110	+ document.body.classList.remove( hiddenClass );
	111	+ }
91	112	} );
	113	+}
92	114
93		- // Post Details: Date.
94		- wp.customize( 'jetpack_content_post_details_date', function ( value ) {
95		- value.bind( function ( to ) {
96		- if ( false === to ) {
97		- $( postDetails.date ).css( {
98		- clip: 'rect(1px, 1px, 1px, 1px)',
99		- height: '1px',
100		- overflow: 'hidden',
101		- position: 'absolute',
102		- width: '1px',
103		- } );
104		- $( 'body' ).addClass( 'date-hidden' );
105		- } else {
106		- $( postDetails.date ).css( {
107		- clip: 'auto',
108		- height: 'auto',
109		- overflow: 'auto',
110		- position: 'relative',
111		- width: 'auto',
112		- } );
113		- $( 'body' ).removeClass( 'date-hidden' );
114		- }
115		- } );
	115	+// Post Details: Date
	116	+wp.customize( 'jetpack_content_post_details_date', function ( value ) {
	117	+ value.bind( function ( to ) {
	118	+ updatePostDetails( postDetails.date, to, 'date-hidden' );
116	119	} );
	120	+} );
117	121
118		- // Post Details: Categories.
119		- wp.customize( 'jetpack_content_post_details_categories', function ( value ) {
120		- value.bind( function ( to ) {
121		- if ( false === to ) {
122		- $( postDetails.categories ).css( {
123		- clip: 'rect(1px, 1px, 1px, 1px)',
124		- height: '1px',
125		- overflow: 'hidden',
126		- position: 'absolute',
127		- width: '1px',
128		- } );
129		- $( 'body' ).addClass( 'categories-hidden' );
130		- } else {
131		- $( postDetails.categories ).css( {
132		- clip: 'auto',
133		- height: 'auto',
134		- overflow: 'auto',
135		- position: 'relative',
136		- width: 'auto',
137		- } );
138		- $( 'body' ).removeClass( 'categories-hidden' );
139		- }
140		- } );
	122	+// Post Details: Categories
	123	+wp.customize( 'jetpack_content_post_details_categories', function ( value ) {
	124	+ value.bind( function ( to ) {
	125	+ updatePostDetails( postDetails.categories, to, 'categories-hidden' );
141	126	} );
	127	+} );
142	128
143		- // Post Details: Tags.
144		- wp.customize( 'jetpack_content_post_details_tags', function ( value ) {
145		- value.bind( function ( to ) {
146		- if ( false === to ) {
147		- $( postDetails.tags ).css( {
148		- clip: 'rect(1px, 1px, 1px, 1px)',
149		- height: '1px',
150		- overflow: 'hidden',
151		- position: 'absolute',
152		- width: '1px',
153		- } );
154		- $( 'body' ).addClass( 'tags-hidden' );
155		- } else {
156		- $( postDetails.tags ).css( {
157		- clip: 'auto',
158		- height: 'auto',
159		- overflow: 'auto',
160		- position: 'relative',
161		- width: 'auto',
162		- } );
163		- $( 'body' ).removeClass( 'tags-hidden' );
164		- }
165		- } );
	129	+// Post Details: Tags
	130	+wp.customize( 'jetpack_content_post_details_tags', function ( value ) {
	131	+ value.bind( function ( to ) {
	132	+ updatePostDetails( postDetails.tags, to, 'tags-hidden' );
166	133	} );
	134	+} );
167	135
168		- // Post Details: Author.
169		- wp.customize( 'jetpack_content_post_details_author', function ( value ) {
170		- value.bind( function ( to ) {
171		- if ( false === to ) {
172		- $( postDetails.author ).css( {
173		- clip: 'rect(1px, 1px, 1px, 1px)',
174		- height: '1px',
175		- overflow: 'hidden',
176		- position: 'absolute',
177		- width: '1px',
178		- } );
179		- $( 'body' ).addClass( 'author-hidden' );
180		- } else {
181		- $( postDetails.author ).css( {
182		- clip: 'auto',
183		- height: 'auto',
184		- overflow: 'auto',
185		- position: 'relative',
186		- width: 'auto',
187		- } );
188		- $( 'body' ).removeClass( 'author-hidden' );
189		- }
190		- } );
	136	+// Post Details: Author
	137	+wp.customize( 'jetpack_content_post_details_author', function ( value ) {
	138	+ value.bind( function ( to ) {
	139	+ updatePostDetails( postDetails.author, to, 'author-hidden' );
191	140	} );
	141	+} );
192	142
193		- // Post Details: Comment link.
194		- wp.customize( 'jetpack_content_post_details_comment', function ( value ) {
195		- value.bind( function ( to ) {
196		- if ( false === to ) {
197		- $( postDetails.comment ).css( {
198		- clip: 'rect(1px, 1px, 1px, 1px)',
199		- height: '1px',
200		- overflow: 'hidden',
201		- position: 'absolute',
202		- width: '1px',
203		- } );
204		- $( 'body' ).addClass( 'comment-hidden' );
205		- } else {
206		- $( postDetails.comment ).css( {
207		- clip: 'auto',
208		- height: 'auto',
209		- overflow: 'auto',
210		- position: 'relative',
211		- width: 'auto',
212		- } );
213		- $( 'body' ).removeClass( 'comment-hidden' );
214		- }
215		- } );
	143	+// Post Details: Comment link
	144	+wp.customize( 'jetpack_content_post_details_comment', function ( value ) {
	145	+ value.bind( function ( to ) {
	146	+ updatePostDetails( postDetails.comment, to, 'comment-hidden' );
216	147	} );
217		-} )( jQuery );
	148	+} );