Changeset 13742

Timestamp:

05/22/2024 03:35:22 PM (2 months ago)

Author:

ryelle

Message:

wp-themes.com: Fully hide all other page content when showing pattern previews.

See ​https://github.com/WordPress/wordpress.org/pull/279

Location:

sites/trunk/wp-themes.com/public_html/wp-content/plugins/pattern-page

Files:

• build/index.asset.php (modified) (1 diff)
• build/index.js (modified) (1 diff)
• css/style.css (modified) (1 diff)
• js/index.js (modified) (3 diffs)

sites/trunk/wp-themes.com/public_html/wp-content/plugins/pattern-page/build/index.asset.php

@@ -1 @@
-<?php return array('dependencies' => array(), 'version' => '9ace78423de40a3ac234');
+<?php return array('dependencies' => array(), 'version' => '');

sites/trunk/wp-themes.com/public_html/wp-content/plugins/pattern-page/build/index.js

@@ -1 @@
-(()=>{const e=t=>{for(var n=0;n<t.length;n++){var l=t[n];l.style.visibility="visible",l.children.length>0&&e(l.children)}};window.addEventListener("load",(()=>{var t=document.getElementById("wporg-pattern-preview");t&&(e(t.children),(e=>{let t=e;for(;t.parentElement;)t.parentElement.style.display="block",t=t.parentElement})(t),(e=>{const{top:t,height:n}=e.getBoundingClientRect();e.style.transform=`translate(0, -${t}px)`,n<window.innerHeight&&(e.style.height="100vh")})(t))}))})();
+);

sites/trunk/wp-themes.com/public_html/wp-content/plugins/pattern-page/css/style.css

@@ -1 @@
-* {
-    visibility: hidden;
+/* Hide everything outside of the pattern container */
+:not(#wporg-pattern-preview *) {
+    display: none;
 }
 

sites/trunk/wp-themes.com/public_html/wp-content/plugins/pattern-page/js/index.js

@@ -1 @@
-/**
- * Loops through children of container and set visiblity to 'visible'.
- */
-const makeVisible = ( children ) => {
-    for ( var i = 0; i < children.length; i++ ){
-        var child = children[i];
-        child.style.visibility = 'visible';
-
-        if( child.children.length > 0 ) {
-            makeVisible( child.children );
-        }
-    }
-}
-
-/**
- * Move the pattern to the top of the page.
- */
-const adjustOffset = ( element ) => {
-    const { top, height } = element.getBoundingClientRect();
-    element.style.transform = `translate(0, -${ top }px)`;
-
-    // If the element is smaller than the window width, we'll center it
-    if( height < window.innerHeight ) {
-        element.style.height = '100vh';
-    }
-}
-
 /**
  * Since we are using a theme template, but hiding everything but 'wporg-pattern-preview',
  * we should erase layouts that could stop our element from displaying full width.
  * If we don't, we get previews that only take up half of the viewport.
- * 
+ * 
  */
 const setParentDisplay = ( element ) => {
@@ -37 +10 @@
     while( currElement.parentElement ){
         currElement.parentElement.style.display = 'block';
+
+
 
         currElement = currElement.parentElement;
@@ -43 +18 @@
 
 /**
- * We set all elements to visibility: hidden in CSS and then turn visibility on for our pattern container.
- * This allows us to preview the page without any distractions, like header, footer, etc...
+ * All elements outside of the preview container are hidden (with CSS, display: none),
+ * to display just the pattern, so only the parent elements of the container
+ * need to be unhidden.
  */
 const init = () => {
     var container = document.getElementById( 'wporg-pattern-preview' );
 
-    if( ! container ) {
+    if( ! container ) {
         return;
     }
 
-    makeVisible( container.children );
     setParentDisplay( container );
-    adjustOffset( container );
 }