Plugin for Collapse / Expand all blocks with preview: fields

Resources Plugins
1

Hi there,

I find the new-ish preview and wysiwyg feature for custom blocks exceedingly useful, but for larger layouts this can get quite overwhelming. Which is why I wrote this plugin; as I don’t know the first thing about vue I wrote this in the worst hacky way imaginable (see below) so maybe somebody is interested in making this into an actually decent plugin

edit: Some words of warning – what I did here definitely needs some work as it crashes a few things as I have noticed already :sweat_smile:

Thanks :wave:

2024-10-11

<template>
  <section class="k-section-collapseExpand" ref="originalSection">
    <k-button-group slot="right" ref="buttonGroup" class="expandCollapseButtons">
      <!-- Styled h2 to look like menu buttons -->
      <h2 class="k-link k-button k-panel-menu-button" style="cursor: default; pointer-events: none;">
        <span class="k-button-text">Blöcke</span>
      </h2>
      <k-button
        id="expand"
        class="k-link k-button k-panel-menu-button"
        text="Ausklappen"
        icon="expand"
        @click="expandAll"
      />
      <k-button
        id="collapse"
        class="k-link k-button k-panel-menu-button"
        text="Einklappen"
        icon="collapse"
        @click="collapseAll"
      />
    </k-button-group>
  </section>
</template>


<script>
export default {
  name: 'ExpandCollapseSection',
  mounted() {
    this.addButtonsToMenu();
  },
  methods: {
    collapseAll() {
      document.querySelectorAll('.k-block-title').forEach(element => {
        if (!element.closest('div[data-collapsed="true"]')) {
          element.click(); 
        }
      });
    },
    expandAll() {
      document.querySelectorAll('.k-block-title').forEach(element => {
        if (element.closest('div[data-collapsed="true"]')) {
          element.click();
        }
      });
    },
    addButtonsToMenu() {
      const menu = document.querySelector('.k-panel-menu-buttons');
      if (menu && this.$refs.buttonGroup) {
        const buttons = this.$refs.buttonGroup.$el.cloneNode(true);
        menu.appendChild(buttons);

        // Reattach event listeners to the cloned buttons
        const expandButton = menu.querySelector('#expand');
        const collapseButton = menu.querySelector('#collapse');
        if (expandButton && collapseButton) {
          expandButton.addEventListener('click', this.expandAll);
          collapseButton.addEventListener('click', this.collapseAll);
        }

        // Remove the original section containing the buttons
        this.$refs.originalSection.remove();

        console.log("Buttons added to menu and original section removed");
      } else {
        console.log("Menu or button group not found");
      }
    }  
  }
};
</script>

<style>
/* Style as needed */
.expandCollapseButtons {
  margin-top: 1.5rem;
  gap: 0rem!important;
  background: rgba(0,0,0,0.05);

}

.expandCollapseButtons h2{
  padding: 0.3rem;
  font-weight: bold;
}

</style>
3 Likes