Skip to content

Commit

Permalink
Eoxia#21 [Blocks] add: sticky option mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@eoxia-amandine
eoxia-amandine committed Nov 28, 2024
1 parent 56f2879 commit dab74f8
Show file tree
Hide file tree
Showing 17 changed files with 455 additions and 170 deletions.
8 changes: 8 additions & 0 deletions blocks/build/eo-sticky/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
"verticalGapPercent": {
"type": "number",
"default": 0
},
"displayMobile": {
"type": "boolean",
"default": true
},
"styleMobile": {
"type": "string",
"default": "standard"
}
},
"supports": {
Expand Down
2 changes: 1 addition & 1 deletion blocks/build/eo-sticky/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '4a88043ba9ae301315f0');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '1ee234298f6e4a660bce');
26 changes: 24 additions & 2 deletions blocks/build/eo-sticky/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion blocks/build/eo-sticky/index.js.map
View file

Large diffs are not rendered by default.

25 changes: 14 additions & 11 deletions blocks/build/eo-sticky/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,21 @@
$verticalGapPercent = ! empty( $attributes['verticalGapPercent'] ) ? $attributes['verticalGapPercent'] : 0;
$verticalGapPercent = 'is-gap-vertical-' . str_replace( ' ', '-', $verticalGapPercent );

$blockClass = $contentPosition . ' ' . $horizontalGapPercent . ' ' . $verticalGapPercent;
$showInMobile = ! empty( $attributes['displayMobile'] ) ? 'is-display-mobile' : '';
if ( ! empty( $showInMobile ) ) :
$styleMobile = ! empty( $attributes['styleMobile'] ) ? $attributes['styleMobile'] : 'standard';
$showInMobile .= ' is-style-mobile-' . $styleMobile;
endif;

//$blockStyle = sprintf(
// 'transform: translateX(%s%%); transform: translateY(%s%%);',
// esc_attr( $horizontalGapPercent ),
// esc_attr( $verticalGapPercent )
//);
$blockClass = $contentPosition . ' ' . $horizontalGapPercent . ' ' . $verticalGapPercent . ' ' . $showInMobile;
?>

<div <?php echo wp_kses_data( get_block_wrapper_attributes( array(
'class' => esc_attr( $blockClass),
// 'style' => $blockStyle
) ) ); ?>>
<?php echo wp_kses_post( $content ); ?>
<div <?php echo wp_kses_data( get_block_wrapper_attributes( array( 'class' => esc_attr( $blockClass) ) ) ); ?>>
<div class="eo-sticky__menu">
<svg class="eo-sticky__menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
</div>
<div class="eo-sticky__container">
<svg class="eo-sticky__menu-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
<?php echo wp_kses_post( $content ); ?>
</div>
</div>
137 changes: 100 additions & 37 deletions blocks/build/eo-sticky/style-index-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,120 +12,183 @@
z-index: 100000;
margin-top: 0 !important;
}
.wp-block-eo-sticky.is-position-top-left {
.wp-block-eo-sticky:not(.is-active-mobile-menu) {
/** Vertical & Horizontal Gap */
}
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left {
top: 0;
right: 0;
}
.wp-block-eo-sticky.is-position-top-center {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-center {
top: 0;
right: 50%;
transform: translateX(50%);
}
.wp-block-eo-sticky.is-position-top-right {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right {
top: 0;
left: 0;
}
.wp-block-eo-sticky.is-position-center-left {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left {
top: 50%;
right: 0;
transform: translateY(-50%);
}
.wp-block-eo-sticky.is-position-center-center, .wp-block-eo-sticky .is-position-center {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-center, .wp-block-eo-sticky:not(.is-active-mobile-menu) .is-position-center {
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
.wp-block-eo-sticky.is-position-center-right {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.wp-block-eo-sticky.is-position-bottom-left {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left {
bottom: 0;
right: 0;
}
.wp-block-eo-sticky.is-position-bottom-center {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-center {
bottom: 0;
right: 50%;
transform: translateX(50%);
}
.wp-block-eo-sticky.is-position-bottom-right {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right {
bottom: 0;
left: 0;
}

/** Vertical & Horizontal Gap */
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-1 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-1 {
top: 1em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-2 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-2 {
top: 2em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-3 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-3 {
top: 3em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-4 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-4 {
top: 4em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-5 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-5 {
top: 5em;
}
[class^=is-position-top].wp-block-eo-sticky.is-gap-vertical-6 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-top].is-gap-vertical-6 {
top: 6em;
}

[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-1 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-1 {
bottom: 1em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-2 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-2 {
bottom: 2em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-3 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-3 {
bottom: 3em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-4 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-4 {
bottom: 4em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-5 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-5 {
bottom: 5em;
}
[class^=is-position-bottom].wp-block-eo-sticky.is-gap-vertical-6 {
.wp-block-eo-sticky:not(.is-active-mobile-menu)[class^=is-position-bottom].is-gap-vertical-6 {
bottom: 6em;
}

.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-1 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-1, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-1, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-1 {
right: 1em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-2 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-2, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-2, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-2 {
right: 2em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-3 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-3, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-3, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-3 {
right: 3em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-4 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-4, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-4, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-4 {
right: 4em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-5 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-5, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-5, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-5 {
right: 5em;
}
.wp-block-eo-sticky.is-position-top-left.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-center-left.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-bottom-left.is-gap-horizontal-6 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-left.is-gap-horizontal-6, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-left.is-gap-horizontal-6, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-left.is-gap-horizontal-6 {
right: 6em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-1, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-1 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-1, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-1, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-1 {
left: 1em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-2, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-2 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-2, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-2, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-2 {
left: 2em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-3, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-3 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-3, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-3, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-3 {
left: 3em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-4, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-4 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-4, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-4, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-4 {
left: 4em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-5, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-5 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-5, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-5, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-5 {
left: 5em;
}
.wp-block-eo-sticky.is-position-top-right.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-center-right.is-gap-horizontal-6, .wp-block-eo-sticky.is-position-bottom-right.is-gap-horizontal-6 {
.wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-top-right.is-gap-horizontal-6, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-center-right.is-gap-horizontal-6, .wp-block-eo-sticky:not(.is-active-mobile-menu).is-position-bottom-right.is-gap-horizontal-6 {
left: 6em;
}

/**
* Sticky version mobile
*/
.wp-block-eo-sticky .eo-sticky__menu {
display: none;
width: 50px;
height: 50px;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
border-radius: 8px;
transition: opacity 0.2s ease-out;
}
.wp-block-eo-sticky .eo-sticky__menu:hover {
cursor: pointer;
opacity: 0.6;
}
.wp-block-eo-sticky .eo-sticky__menu .eo-sticky__menu-icon {
width: 100%;
max-width: 20px;
margin: auto;
}
.wp-block-eo-sticky .eo-sticky__menu-close {
display: none;
position: absolute;
top: 2em;
left: 2em;
width: 100%;
max-width: 20px;
transition: opacity 0.2s ease-out;
}
.wp-block-eo-sticky .eo-sticky__menu-close:hover {
opacity: 0.5;
cursor: pointer;
}
@media (max-width: 599px) {
.wp-block-eo-sticky:not(.is-display-mobile) {
display: none;
}
}
@media (max-width: 599px) {
.wp-block-eo-sticky.is-display-mobile.is-style-mobile-menu .eo-sticky__menu {
display: flex;
}
.wp-block-eo-sticky.is-display-mobile.is-style-mobile-menu .eo-sticky__container {
display: none;
position: fixed;
z-index: 100001;
justify-content: center;
align-items: center;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #fff;
padding: 4em;
}
.wp-block-eo-sticky.is-display-mobile.is-style-mobile-menu.is-active-mobile-menu .eo-sticky__container {
display: flex;
}
.wp-block-eo-sticky.is-display-mobile.is-style-mobile-menu.is-active-mobile-menu .eo-sticky__menu-close {
display: block;
}
}
Loading

0 comments on commit dab74f8

Please sign in to comment.