Toolbar: Api

app.html

<template>
  <div id="example">
    <div class="demo-section k-content wide">
      <ak-toolbar k-widget.bind="toolbar">
        <ak-toolbar-item k-type="buttonGroup" k-id="playerControls" k-text="Button">
          <ak-toolbar-item-button k-id="play" k-text="play" k-togglable.bind="true" k-group="player"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-id="pause" k-text="pause" k-togglable.bind="true" k-group="player" k-selected.bind="true"></ak-toolbar-item-button>
          <ak-toolbar-item-button k-id="stop" k-text="stop" k-togglable.bind="true" k-group="player"></ak-toolbar-item-button>
        </ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-togglable.bind="true" k-id="repeat" k-text="repeat"></ak-toolbar-item>
        <ak-toolbar-item k-type="splitButton" k-id="save" k-text="save" k-menu-buttons.bind="[
          { id: 'favourites', text: 'add to favourites' },
          { id: 'later', text: 'listen later' },
          { id: 'download', text: 'download' }
        ]">
        </ak-toolbar-item>
        <ak-toolbar-item k-type="button" k-id="delete" k-text="delete"></ak-toolbar-item>
      </ak-toolbar>

      <div class="box wide">
        <div class="box-col">
          <h4>Get selected action</h4>
          <ul class="options">
            <li>
              <button ak-button click.delegate="getSelected()">Get selected action</button>
            </li>
            <li>
              Selected: <span ref="selectedFromGroup"></span>
            </li>
            <li>
              <button ak-button click.delegate="togglePlayerControls($event)">Hide player controls</button>
            </li>
          </ul>
        </div>

        <div class="box-col">
          <h4>Enable / Disable</h4>
          <ul class="options">
            <li>
              <button ak-button click.delegate="enableDisabledRepeat()">Enable/Disable Repeat</button>
            </li>
            <li>
              <button ak-button click.delegate="hideRepeat($event)">Hide Repeat</button>
            </li>
          </ul>
        </div>
        <div class="box-col">
          <h4>Add / Remove</h4>
          <ul class="options">
            <li>
              <button ak-button click.delegate="removeById()">Remove by ID</button>
              <input type="text" value.bind="deleteId" class="k-textbox"/>
            </li>
            <li>
              <button ak-button click.delegate="addButton()">Add new button</button>
              <label>Text: <input type="text" value.bind="buttonText" class="k-textbox"/></label>
              <label>ID: <input type="text" value.bind="buttonID" class="k-textbox"/></label>
              <label>Togglable: <input type="checkbox" checked.bind="buttonToggable"/></label>
            </li>
            <li>
              <button ak-button click.delegate="addSplitButton()">Add new SplitButton</button>
            </li>
            <li>
              <button ak-button click.delegate="addButtonGroup()">Add new ButtonGroup</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

app.js

export class Api {

  deleteId = '#delete';

  getSelected() {
    $(this.selectedFromGroup).text(this.toolbar.getSelectedFromGroup('player').text());
  }

  togglePlayerControls(e) {
    let buttonGroup = $('#playerControls');
    let isVisible = buttonGroup.is(':visible');

    if (isVisible) {
      this.toolbar.hide(buttonGroup);
      $(e.target).text('Show player controls');
    } else {
      this.toolbar.show(buttonGroup);
      $(e.target).text('Hide player controls');
    }
  }

  enableDisabledRepeat() {
    let repeat = $('#repeat');
    let isDisabled = repeat.hasClass('k-state-disabled');

    this.toolbar.enable(repeat, isDisabled);
  }

  hideRepeat(e) {
    let repeatButton = $('#repeat');
    let isVisible = repeatButton.is(':visible');

    if (isVisible) {
      this.toolbar.hide(repeatButton);
      $(e.target).text('Show Repeat');
    } else {
      this.toolbar.show(repeatButton);
      $(e.target).text('Hide Repeat');
    }
  }

  removeById() {
    this.toolbar.remove(this.deleteId);
  }

  addButton() {
    this.toolbar.add({ type: 'button', text: this.buttonText, id: this.buttonID, togglable: this.buttonToggable});
  }

  addSplitButton() {
    this.toolbar.add({
      type: 'splitButton',
      text: 'New SplitButton',
      menuButtons: [
        { text: 'Option 1' },
        { text: 'Option 2' }
      ]
    });
  }

  addButtonGroup() {
    this.toolbar.add({
      type: 'buttonGroup',
      buttons: [
        { text: 'Left' },
        { text: 'Middle' },
        { text: 'Right' }
      ]
    });
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}