Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add an inline skeleton sizing script (https://github.com/woocommerce/woocommerce-blocks/pull/2420) 

* Add an inline skeleton sizing script

* const/let
This commit is contained in:
Mike Jolley 2020-05-07 10:53:07 +01:00 committed by GitHub
parent e970e4e86f
commit 3c55918e62
3 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php
View File

@ -143,4 +143,37 @@ abstract class AbstractBlock {
protected function enqueue_scripts( array $attributes = [] ) {
// noop. Child classes should override this if needed.
}
/**
* Script to append the correct sizing class to a block skeleton.
*
* @return string
*/
protected function get_skeleton_inline_script() {
return "<script>
const containers = document.querySelectorAll( 'div.wc-block-skeleton' );
if ( containers.length ) {
Array.prototype.forEach.call( containers, function( el, i ) {
const w = el.offsetWidth;
let classname = '';
if ( w > 700 )
classname = 'is-large';
else if ( w > 520 )
classname = 'is-medium';
else if ( w > 400 )
classname = 'is-small';
else
classname = 'is-mobile';
if ( ! el.classList.contains( classname ) ) {
el.classList.add( classname );
}
el.classList.remove( 'hidden' );
} );
}
</script>";
}
}

4
plugins/woocommerce-blocks/src/BlockTypes/Cart.php
View File

@ -130,7 +130,7 @@ class Cart extends AbstractBlock {
*/
protected function get_skeleton() {
return '
<div class="wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton is-large" aria-hidden="true">
<div class="wc-block-skeleton wc-block-sidebar-layout wc-block-cart wc-block-cart--is-loading wc-block-cart--skeleton hidden" aria-hidden="true">
<div class="wc-block-main wc-block-cart__main">
<h2><span></span></h2>
<table class="wc-block-cart-items">
@ -207,6 +207,6 @@ class Cart extends AbstractBlock {
<div class="components-card"></div>
</div>
</div>
';
' . $this->get_skeleton_inline_script();
}
}

4
plugins/woocommerce-blocks/src/BlockTypes/Checkout.php
View File

@ -170,7 +170,7 @@ class Checkout extends AbstractBlock {
*/
protected function get_skeleton() {
return '
<div class="wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton is-large" aria-hidden="true">
<div class="wc-block-skeleton wc-block-sidebar-layout wc-block-checkout wc-block-checkout--is-loading wc-block-checkout--skeleton hidden" aria-hidden="true">
<div class="wc-block-main wc-block-checkout__main">
<div class="wc-block-component-express-checkout"></div>
<div class="wc-block-component-express-checkout-continue-rule"><span></span></div>
@ -198,7 +198,7 @@ class Checkout extends AbstractBlock {
</div>
</div>
</div>
';
' . $this->get_skeleton_inline_script();
}
/**