[split-layout] Add JS API for setting splitter position

[Haprog]

Description

There is no trivial way to set the splitter position programmatically via JS. The Java API has setSplitterPosition() but that is implemented in Java.

The Java API does direct DOM manipulation to reset flex and set either width or height (depending on orientation) on both of the child elements. Also the Java API currently only supports setting the position as a percentage (see vaadin/vaadin-split-layout#148).

setSplitterPosition() method (or maybe a splitterPosition property) should be implemented in the web component so that the same thing can be easily accomplished in JS/TS and not only in Java. Once this is done, the Java implementation can be simplified to use the new web component API.

Would be great if the API would support setting the position in pixels too (additionally to percentage), but that might need extra API design and could be left outside the scope of this issue (would there be an option to specify is it pixels from the left/top or right/bottom?)

Expected outcome

I want to be able to programmatically set the splitter position like:

splitLayout.setSplitterPosition('30%');

Actual outcome

Now instead I need to do something like this:

splitLayout.children[0].style.flex = '';
splitLayout.children[1].style.flex = '';
splitLayout.children[0].style.width = '30%';
splitLayout.children[1].style.width = '70%';

And this is a naive implementation where I know the orientation is horizontal and the width of the second element is also precalculated.

In TypeScript I'd have something like:

setSplitterPosition(sidebarWidthPercentage: number) {
  if (!this.splitLayout) throw 'splitLayout not ready';
  const sidebar = this.splitLayout.children[0] as HTMLElement;
  const contentArea = this.splitLayout.children[1] as HTMLElement;
  sidebar.style.flex = '';
  contentArea.style.flex = '';
  sidebar.style.width = sidebarWidthPercentage + '%';
  contentArea.style.width = 100 - sidebarWidthPercentage + '%';
}

But this also only works with horizontal orientation due to using width only.

[Haprog]

Property would probably be nicer than a method so you could set the splitter position via a LitElement property binding.

[Haprog]

Actually it turns out in a LitElement template you can bind the splitter position as simply as:

@internalProperty()
private sidebarWidthPercentage = 40;

render() {
  return html`
    <vaadin-split-layout>
      <div style="width: ${this.sidebarWidthPercentage}%">First</div>
      <div style="width: ${100 - this.sidebarWidthPercentage}%">Second</div>
    </vaadin-split-layout>
  `;
}

But since we need to reset the flex property (in case user has dragged the splitter manually) it's not very intuitive how this works but it just happens to work because binding to style attribute will automatically remove all inline styles that have been set imperatively outside the template when it gets rendered.

And it would be nicer if you could do this instead (less code and easier to discover how to do it):

@internalProperty()
private sidebarWidthPercentage = 40;

render() {
  return html`
    <vaadin-split-layout .splitterPosition="${this.sidebarWidthPercentage}">
      <div>First</div>
      <div>Second</div>
    </vaadin-split-layout>
  `;
}