← All changes | modules/theme-tools/content-options/customizer.js +148 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,148 @@
	1	+/* global blogDisplay, postDetails */
	2	+
	3	+/**
	4	+ * customizer.js
	5	+ *
	6	+ * Theme Customizer enhancements for a better user experience.
	7	+ *
	8	+ * Contains handlers to make Theme Customizer preview reload changes asynchronously.
	9	+ */
	10	+
	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`, {
	37	+ clip: 'rect(1px, 1px, 1px, 1px)',
	38	+ position: 'absolute',
	39	+ } );
	40	+ applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
	41	+ clip: 'auto',
	42	+ position: 'relative',
	43	+ } );
	44	+ } else if ( to === 'excerpt' ) {
	45	+ applyStyles( `${ contentSelectors }, ${ featuredContentSelectors }.jetpack-the-content`, {
	46	+ clip: 'rect(1px, 1px, 1px, 1px)',
	47	+ position: 'absolute',
	48	+ } );
	49	+ applyStyles( `${ excerptSelectors }, ${ featuredContentSelectors }.jetpack-the-excerpt`, {
	50	+ clip: 'auto',
	51	+ position: 'relative',
	52	+ } );
	53	+ } else if ( to === 'mixed' ) {
	54	+ applyStyles(
	55	+ `${ contentSelectors }.output-the-content, ${ featuredContentSelectors }.jetpack-the-content.output-the-content`,
	56	+ {
	57	+ clip: 'auto',
	58	+ position: 'relative',
	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	+ {
	64	+ clip: 'rect(1px, 1px, 1px, 1px)',
	65	+ position: 'absolute',
	66	+ }
	67	+ );
	68	+ applyStyles(
	69	+ `${ excerptSelectors }.output-the-excerpt, ${ featuredContentSelectors }.jetpack-the-excerpt.output-the-excerpt`,
	70	+ {
	71	+ clip: 'auto',
	72	+ position: 'relative',
	73	+ }
	74	+ );
	75	+ }
	76	+
	77	+ if ( blogDisplay.masonry ) {
	78	+ const masonryElement = document.querySelector( blogDisplay.masonry );
	79	+ if ( masonryElement ) {
	80	+ masonryElement.masonry();
	81	+ }
	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	+ }
	112	+ } );
	113	+}
	114	+
	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' );
	119	+ } );
	120	+} );
	121	+
	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' );
	126	+ } );
	127	+} );
	128	+
	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' );
	133	+ } );
	134	+} );
	135	+
	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' );
	140	+ } );
	141	+} );
	142	+
	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' );
	147	+ } );
	148	+} );