Can we add a new function call collapse and expand panel on the left or on the right?

[Yim-Sekny]

imagin that we wanna use panel for show full screen map, so we need to collapse panel on the left when click on fullscreen

[kevinelliott]

This would be great!

[notchris]

@yimseknyCorarl @kevinelliott
You can achieve this by changing the percent value of the component within a method.
For example:

<template>
  <div id="app">
    <split-pane ref="example" :min-percent='20' :default-percent='50' split="vertical">
        <template slot="paneL">
            <div>Left</div>
        </template>
        <template slot="paneR">
            <div>
              <button @click="collapse" type="button">Toggle Collapse</button>
            </div>
        </template>
    </split-pane>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        isCollapsed: false
    }
  },
  methods: {
      collapse () {
          if (this.isCollapsed) {
              this.$refs.example.percent = 50;
              this.isCollapsed = false;
          } else {
              this.$refs.example.percent = 0;
              this.isCollapsed = true;
          }
      }
  }
}
</script>

[morph3us-net]

Is there any way I could achieve the same effect through clicking on
"splitter-pane-resizer vertical" or
"splitter-pane-resizer horizontal"
(the handle bars) directly?

It'd be awesome if I wouldn't need to add another button just for this. Thanks in advance!

[notchris]

@morph3us-net Without modifying the build itself you would have to add an event listener to the handles to invoke a vue function to modify the percent values. It would be less clean, but wouldn't require a new bundle. Though, it may be easier to pull the project and make an MR

[morph3us-net]

Thanks for the answer!
I had tried to add an event handler myself, but didnt get far. (If you are interested, I posted on stackoverflow)

Excuse me, but what is a MR?

[notchris]

@morph3us-net One way, is to add in your mounted() function, an event listener on the pane divider. I haven't tested this, but something like...

mounted () {
   document.querySelector('.splitter-pane-resizer.vertical').addEventListener('click', (event) => {
              this.$refs.example.percent = 50;
              this.isCollapsed = false;
   })
} 

[notchris]

And even better if you can remove the event listener when the component is destroyed 👯

[morph3us-net]

Unfortunately, this does not work at all. I tried to make it print out a console log, but nothing happens.
Thanks for the reply, though.