Last active
August 18, 2021 12:20
-
-
Save superbiche/5aefedd5a35140d297f77e70283ae99f to your computer and use it in GitHub Desktop.
Drupal block_breakpoint I'm working on
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/.gitignore b/.gitignore | |
new file mode 100644 | |
index 0000000..9f11b75 | |
--- /dev/null | |
+++ b/.gitignore | |
@@ -0,0 +1 @@ | |
+.idea/ | |
diff --git a/config/schema/block_breakpoint.schema.yml b/config/schema/block_breakpoint.schema.yml | |
index 9e94a14..8bf3b08 100644 | |
--- a/config/schema/block_breakpoint.schema.yml | |
+++ b/config/schema/block_breakpoint.schema.yml | |
@@ -18,3 +18,6 @@ block.block.*.third_party.block_breakpoint: | |
breakpoint_id: | |
type: string | |
label: 'Breakpoint ID' | |
+ hide: | |
+ type: boolean | |
+ label: 'Hide the element instead of removing it' | |
diff --git a/js/block-breakpoint.js b/js/block-breakpoint.js | |
index d3c7dd2..7f795be 100644 | |
--- a/js/block-breakpoint.js | |
+++ b/js/block-breakpoint.js | |
@@ -19,18 +19,18 @@ var blockBreakpointGetClosestParent = function (element, selector) { | |
// Element.matches() polyfill | |
if (!Element.prototype.matches) { | |
Element.prototype.matches = | |
- Element.prototype.matchesSelector || | |
- Element.prototype.mozMatchesSelector || | |
- Element.prototype.msMatchesSelector || | |
- Element.prototype.oMatchesSelector || | |
- Element.prototype.webkitMatchesSelector || | |
- function (s) { | |
- var matches = (this.document || this.ownerDocument).querySelectorAll(s), | |
- i = matches.length; | |
- while (--i >= 0 && matches.item(i) !== this) { | |
- } | |
- return i > -1; | |
- }; | |
+ Element.prototype.matchesSelector || | |
+ Element.prototype.mozMatchesSelector || | |
+ Element.prototype.msMatchesSelector || | |
+ Element.prototype.oMatchesSelector || | |
+ Element.prototype.webkitMatchesSelector || | |
+ function (s) { | |
+ var matches = (this.document || this.ownerDocument).querySelectorAll(s), | |
+ i = matches.length; | |
+ while (--i >= 0 && matches.item(i) !== this) { | |
+ } | |
+ return i > -1; | |
+ }; | |
} | |
// Get the closest matching element | |
@@ -50,38 +50,67 @@ var blockBreakpointGetClosestParent = function (element, selector) { | |
*/ | |
var blockBreakpointMatchElement = function(element) { | |
if (!element.classList.contains('layout-builder-block')) { | |
- var match_media_query; | |
- if (match_media_query = element.getAttribute('data-block-breakpoint-media-query')) { | |
+ var match_media_query = element.getAttribute('data-block-breakpoint-media-query'); | |
+ if (match_media_query) { | |
// Check if the given media query is matched. Otherwise remove the block | |
// before it is getting further processed in the DOM. | |
- if (!window.matchMedia(match_media_query).matches) { | |
+ if (window.matchMedia(match_media_query).matches && element.getAttribute('data-block-breakpoint-hidden')) { | |
+ element.setAttribute('data-block-breakpoint-hidden', 0) | |
+ element.removeAttribute('data-block-breakpoint-prev-display') | |
+ element.style.display = element.getAttribute('data-block-breakpoint-prev-display') | |
+ } else { | |
// Internet Explorer 11 does not support removing HtmlElement, | |
// therefore using the old fashion way. | |
- element.parentNode.removeChild(element); | |
+ element.setAttribute('data-block-breakpoint-hidden', 1) | |
+ element.setAttribute('data-block-breakpoint-prev-display', element.style.display) | |
+ element.style.display = 'none' | |
} | |
} | |
} | |
} | |
-/** | |
- * React the initial DOM. | |
- */ | |
-document.addEventListener('DOMContentLoaded', function() { | |
+function throttle(callback, limit) { | |
+ var waiting = false | |
+ return function() { | |
+ if (!waiting) { | |
+ // eslint-disable-next-line | |
+ callback.apply(this, arguments) | |
+ waiting = true | |
+ setTimeout(function() { | |
+ waiting = false | |
+ }, limit) | |
+ } | |
+ } | |
+} | |
+ | |
+function checkBlockBreakpoints() { | |
var blocks = document.body.querySelectorAll('.block-breakpoint'); | |
for (var i = 0; i < blocks.length; i++) { | |
blockBreakpointMatchElement(blocks[i]); | |
} | |
-}); | |
+} | |
/** | |
* React on DOM changes using the MutationObserver. | |
*/ | |
if (window.MutationObserver) { | |
+ // Observe the creation of blocks with block_breakpoint feature anbled. | |
new MutationObserver(function () { | |
- // Observe the creation of blocks with block_breakpoint feature anbled. | |
- var blocks = document.body.querySelectorAll('.block-breakpoint'); | |
- for (var i = 0; i < blocks.length; i++) { | |
- blockBreakpointMatchElement(blocks[i]); | |
- } | |
+ checkBlockBreakpoints() | |
}).observe(document.documentElement, {childList: true, subtree: false}); | |
} | |
+ | |
+/** | |
+ * React the initial DOM. | |
+ */ | |
+document.addEventListener('DOMContentLoaded', function() { | |
+ checkBlockBreakpoints() | |
+}); | |
+ | |
+window.addEventListener('resize', throttle(() => { | |
+ checkBlockBreakpoints() | |
+}, 50)) | |
+ | |
+window.addEventListener('orientationchange', throttle(() => { | |
+ checkBlockBreakpoints() | |
+}, 50)) | |
diff --git a/src/BlockBreakpointManager.php b/src/BlockBreakpointManager.php | |
index 9395fcb..2326aa6 100644 | |
--- a/src/BlockBreakpointManager.php | |
+++ b/src/BlockBreakpointManager.php | |
@@ -147,6 +147,14 @@ class BlockBreakpointManager { | |
], | |
], | |
]; | |
+ | |
+ // Add enabled checkbox. | |
+ $form['block_breakpoint']['hide'] = [ | |
+ '#type' => 'checkbox', | |
+ '#title' => t('Do not remove block'), | |
+ '#description' => t('Hide the block with CSS display:none instead of removing it from the DOM.'), | |
+ '#default_value' => $object->getThirdPartySetting('block_breakpoint', 'hide'), | |
+ ]; | |
} | |
/** | |
@@ -227,6 +235,7 @@ class BlockBreakpointManager { | |
$object->unsetThirdPartySetting('block_breakpoint', 'enabled'); | |
$object->unsetThirdPartySetting('block_breakpoint', 'breakpoint_group'); | |
$object->unsetThirdPartySetting('block_breakpoint', 'breakpoint'); | |
+ $object->unsetThirdPartySetting('block_breakpoint', 'hide'); | |
} | |
else { | |
$object->setThirdPartySetting('block_breakpoint', 'enabled', TRUE); | |
@@ -239,6 +248,7 @@ class BlockBreakpointManager { | |
$breakpoints[] = ['breakpoint_id' => $breakpoint_id]; | |
} | |
$object->setThirdPartySetting('block_breakpoint', 'breakpoints', $breakpoints); | |
+ $object->setThirdPartySetting('block_breakpoint', 'hide', $values['hide']); | |
} | |
} | |
@@ -261,6 +271,7 @@ class BlockBreakpointManager { | |
$group = $block->getThirdPartySetting('block_breakpoint', 'breakpoint_group'); | |
$breakpoints = $block->getThirdPartySetting('block_breakpoint', 'breakpoints'); | |
$variables['attributes']['data-block-breakpoint-media-query'] = $this->buildMediaQueryFromBreakpoints($breakpoints, $group); | |
+ $variables['attributes']['data-block-breakpoint-hide'] = $block->getThirdPartySetting('block_breakpoint', 'hide'); | |
// Add inline script to remove blocks while they are processed in the | |
// browser. | |
$variables['content'] = [$variables['content']]; | |
@@ -286,6 +297,8 @@ class BlockBreakpointManager { | |
$group = $component['#block_breakpoint']['breakpoint_group']; | |
$breakpoints = $component['#block_breakpoint']['breakpoints']; | |
$component['#attributes']['data-block-breakpoint-media-query'] = $this->buildMediaQueryFromBreakpoints($breakpoints, $group); | |
+ // In Layout Builder, we don't remove the component to avoid potential issues. | |
+ $component['#attributes']['data-block-breakpoint-hide'] = TRUE; | |
// Add inline script to remove blocks while they are processed in the | |
// browser. | |
$component['content'] = [$component['content']]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment