Add `preventPointerEvents` API

[DLillard0]

Resizing will fail when there is an object element or iframe element inside the component, because the element hijacks mouse events and the document‘s mouse events will not work.

<splitpanes style="height: 400px">
  <pane>
    <object type="application/pdf"
      data="/test.pdf"
      width="100%"
      height="100%">
    </object>
  </pane>
  <pane>5</pane>
</splitpanes>

Enabling the preventPointerEvents attribute can add pointer-events: none; style to object element and iframe element to prevent this.

[antoniandre]

Hi @DLillard0 Thanks for your PR, it's clean and documented :+1:

In the case that you embed some objects or iframes within a pane and this media listens to the cursor events, what I would simply do is to add this pointer-events: none on the panes inside a dragging splitpanes. This class is available for you for this kind of purpose: .splitpanes--dragging

Here is an example: https://codepen.io/antoniandre/pen/NWzPjjM

.splitpanes--dragging .splitpanes__pane {
    pointer-events: none;
}

Let me know if this helps.

[DLillard0]

Hi @DLillard0 Thanks for your PR, it's clean and documented 👍

In the case that you embed some objects or iframes within a pane and this media listens to the cursor events, what I would simply do is to add this pointer-events: none on the panes inside a dragging splitpanes. This class is available for you for this kind of purpose: .splitpanes--dragging

Here is an example: https://codepen.io/antoniandre/pen/NWzPjjM

.splitpanes--dragging .splitpanes__pane {
    pointer-events: none;
}

Let me know if this helps.

Thank You! It's helpful. I think I complicated it. Thank you again!