WordPress.org
Get WordPress

Making WordPress.org

Changeset 13742


Ignore:
Timestamp:
05/22/2024 03:35:22 PM ( 4 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:
4 edited

Legend:

Unmodified
Added
Removed

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

    r12419 r13742  
    one   <? php return array('dependencies' => array(), 'version' => ' 9ace78423de40a3ac234 ');
      one <? php return array('dependencies' => array(), 'version' => ' aa9e2db9fae69794501a ');

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

    r12419 r13742  
    one   (()=>{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))}))})( );
      one window.addEventListener("load",(()=>{var e=document.getElementById("wporg-pattern-preview");e&&(e=>{let t=e;for(; t.parentElement;)t.parentElement.style.display="block",t.parentElement.style.padding="0",t.parentElement.style.margin="0",t=t.parentElement})(e)}) );

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

    r12349 r13742  
    one   * {
    two       visibility: hidden;
      one /* Hide everything outside of the pattern container */
      two :not(#wporg-pattern-preview *) {
      three     display: none;
    three four }
    four five

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

    r12419 r13742  
    one   /**
    two    * Loops through children of container and set visiblity to 'visible'.
    three    */
    four   const makeVisible = ( children ) => {
    five       for ( var i = 0; i < children.length; i++ ){
    six           var child = children[i];
    seven           child.style.visibility = 'visible';
    eight  
    nine           if( child.children.length > 0 ) {
    ten               makeVisible( child.children );
    eleven           }
    twelve       }
    thirteen   }
    fourteen  
    fifteen   /**
    sixteen    * Move the pattern to the top of the page.
    seventeen    */
    eighteen   const adjustOffset = ( element ) => {
    nineteen       const { top, height } = element.getBoundingClientRect();
    twenty       element.style.transform = `translate(0, -${ top }px)`;
    twenty-one  
    twenty-two       // If the element is smaller than the window width, we'll center it
    twenty-three       if( height < window.innerHeight ) {
    twenty-four           element.style.height = '100vh';
    twenty-five       }
    twenty-six   }
    twenty-seven  
    twenty-eight one /**
    twenty-nine two  * Since we are using a theme template, but hiding everything but 'wporg-pattern-preview',
    thirty three  * we should erase layouts that could stop our element from displaying full width.
    thirty-one four  * If we don't, we get previews that only take up half of the viewport.
    thirty-two    *
      five  * Reset all the container padding so that there is no extra whitespace around the pattern.
    thirty-three six  */
    thirty-four seven const setParentDisplay = ( element ) => {
    … …  
    thirty-seven ten     while( currElement.parentElement ){
    thirty-eight eleven         currElement.parentElement.style.display = 'block';
      twelve         currElement.parentElement.style.padding = '0';
      thirteen         currElement.parentElement.style.margin = '0';
    thirty-nine fourteen
    forty fifteen         currElement = currElement.parentElement;
    … …  
    forty-three eighteen
    forty-four nineteen /**
    forty-five    * We set all elements to visibility: hidden in CSS and then turn visibility on for our pattern container.
    forty-six    * This allows us to preview the page without any distractions, like header, footer, etc...
      twenty  * All elements outside of the preview container are hidden (with CSS, display: none),
      twenty-one  * to display just the pattern, so only the parent elements of the container
      twenty-two  * need to be unhidden.
    forty-seven twenty-three  */
    forty-eight twenty-four const init = () => {
    forty-nine twenty-five     var container = document.getElementById( 'wporg-pattern-preview' );
    fifty twenty-six
    fifty-one       if ( ! container ) {
      twenty-seven     if   ( ! container ) {
    fifty-two twenty-eight         return;
    fifty-three twenty-nine     }
    fifty-four thirty
    fifty-five       makeVisible( container.children );
    fifty-six thirty-one     setParentDisplay( container );
    fifty-seven       adjustOffset( container );
    fifty-eight thirty-two }   
    fifty-nine thirty-three
Note: See TracChangeset for help on using the changeset viewer.