Saved states for mixed (horizontal + vertical) splits

[victoriastuart]

Can we save the split states when a mix of a horizontal split and a vertical split is added to one of the horizontal splits?

        |
        |   R-upper
 L      | __________
        |
        |   R-lower
        |

[victoriastuart]

I managed to solve this. I'll leave the console.log() statements in place, to aid others in following this code.

JAVASCRIPT

  <script type="text/javascript">

    <!-- ------------------------------------------------------------------ -->
    <!-- SPLIT AND SAVE SPLIT STATES: -->

    <!-- ---------------------------------------- -->
    <!-- HORIZONTAL SPLITS: -->

    var hsizes = localStorage.getItem('hsizes')
    console.log('*  hsizes:', hsizes)

    if (hsizes) {
        console.log('** hsizes:', hsizes)
        hsizes = JSON.parse(hsizes)
    } else {
        hsizes = [20, 80] // default sizes
    }

    var split = Split(['.left', '.right'], {
       sizes: hsizes
      ,gutterSize: 4
      ,onDragEnd: function (sizes) {
          localStorage.setItem('hsizes', JSON.stringify(sizes))
          console.log('hsizes:', sizes)
      },
    })

    <!-- ---------------------------------------- -->
    <!-- VERTICAL SPLITS: -->

    var vsizes = localStorage.getItem('vsizes')
    console.log('*  vsizes:', vsizes)

    if (vsizes) {
        console.log('** vsizes:', vsizes)
        vsizes = JSON.parse(vsizes)
    } else {
        vsizes = [20, 80] // default sizes
    }

    var split2 = Split(['.right-upper', '.right-lower'], {
       direction: 'vertical'
      ,sizes: vsizes
      ,gutterSize: 4
      ,onDragEnd: function (sizes) {
        localStorage.setItem('vsizes', JSON.stringify(sizes))
        console.log('vsizes:', sizes)
      },
    })

    <!-- ------------------------------------------------------------------ -->
  </script>

CSS

  <style>
      .split {
          /* height: 600px; */
          height: 90vh;
      }

      .split > div {
          float: left;
          height: 100%;
      }

      .gutter {
          background-color: lightgrey;
          background-repeat: no-repeat;
          background-position: 50%;
      }

      .gutter.gutter-horizontal {
          cursor: col-resize;
      }
      .gutter.gutter-vertical {
          cursor: row-resize;
      }
  </style>

HTML

  <div class="split">

    <div class="left">
      <h3>Left</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div> <!-- left -->

    <div class="right">

      <h3>Right</h3>
      <p>Suspendisse efficitur pulvinar elementum.</p>

      <div class="right-upper">
        <p>apple</p>
      </div>

      <div class="right-lower">
        <p>banana</p>
      </div>

    </div> <!-- right -->
  </div> <!-- split -->

---

[dragontheory]

Thank you for this.