Gantt: events

app.html

<template>
  <require from="./logger.js"></require>
  <div id="example">
    <ak-gantt k-data-source.bind="tasksDataSource"
             k-dependencies.bind="dependenciesDataSource"
             k-views.bind="['day', {type:'week', selected: true}, 'month']"
             k-height.bind="700"
             k-show-work-hours.bind="false"
             k-show-work-days.bind="false"
             k-snap.bind="false"
             k-on-data-binding.delegate="onDataBinding($event.detail)"
             k-on-data-bound.delegate="onDataBound($event.detail)"
             k-on-add.delegate="onAdd($event.detail)"
             k-on-edit.delegate="onEdit($event.detail)"
             k-on-cancel.delegate="onCancel($event.detail)"
             k-on-change.delegate="onChange($event.detail)"
             k-on-remove.delegate="onRemove($event.detail)"
             k-on-save.delegate="onSave($event.detail)"
             k-on-navigate.delegate="onNavigate($event.detail)"
             k-on-move-start.delegate="onMoveStart($event.detail)"
             k-on-move.delegate="onMove($event.detail)"
             k-on-move-end.delegate="onMoveEnd($event.detail)"
             k-on-resize-start.delegate="onResizeStart($event.detail)"
             k-on-resize.delegate="onResize($event.detail)"
             k-on-resize-end.delegate="onResizeEnd($event.detail)">
      <ak-gantt-col k-field="id" k-title="ID" k-width.bind="60"></ak-gantt-col>
      <ak-gantt-col k-field="title" k-title="Title" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
      <ak-gantt-col k-field="start" k-title="Start Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
      <ak-gantt-col k-field="end" k-title="End Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
    </ak-gantt>

    <div class="box">
        <h4>Console log</h4>
        <logger view-model.ref="logger"></logger>
    </div>
  </div>
</template>

app.js

export class BasicUse {
  tasksDataSource = new kendo.data.GanttDataSource({
    transport: {
      read: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks',
        dataType: 'jsonp'
      },
      update: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Update',
        dataType: 'jsonp'
      },
      destroy: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Destroy',
        dataType: 'jsonp'
      },
      create: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Create',
        dataType: 'jsonp'
      },
      parameterMap: function(options, operation) {
        if (operation !== 'read') {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: 'id',
        fields: {
          id: { from: 'ID', type: 'number' },
          orderId: { from: 'OrderID', type: 'number', validation: { required: true } },
          parentId: { from: 'ParentID', type: 'number', defaultValue: null, validation: { required: true } },
          start: { from: 'Start', type: 'date' },
          end: { from: 'End', type: 'date' },
          title: { from: 'Title', defaultValue: '', type: 'string' },
          percentComplete: { from: 'PercentComplete', type: 'number' },
          summary: { from: 'Summary', type: 'boolean' },
          expanded: { from: 'Expanded', type: 'boolean', defaultValue: true }
        }
      }
    }
  });

  dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
    transport: {
      read: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies',
        dataType: 'jsonp'
      },
      update: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Update',
        dataType: 'jsonp'
      },
      destroy: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Destroy',
        dataType: 'jsonp'
      },
      create: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Create',
        dataType: 'jsonp'
      },
      parameterMap: function(options, operation) {
        if (operation !== 'read') {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: 'id',
        fields: {
          id: { from: 'ID', type: 'number' },
          predecessorId: { from: 'PredecessorID', type: 'number' },
          successorId: { from: 'SuccessorID', type: 'number' },
          type: { from: 'Type', type: 'number' }
        }
      }
    }
  });

  onChange(e) {
    let gantt = e.sender;
    let selection = gantt.select();

    if (selection.length) {
      let dataItem = gantt.dataItem(selection);
      this.logger.log('Gantt selection change :: ' + dataItem.title);
    }
  }

  onAdd(e) {
    this.logger.log('Task added');
  }

  onEdit(e) {
    this.logger.log('Task about to be edited :: ' + e.task.title);
  }

  onCancel(e) {
    this.logger.log('Cancel task edit :: ' + e.task.title);
  }

  onRemove(e) {
    this.logger.log('Task removed :: ' + e.task.title);
  }

  onSave(e) {
    this.logger.log('Task saved :: ' + e.task.title);
  }

  onDataBound() {
    this.logger.log('Gantt data bound');
  }

  onDataBinding() {
    this.logger.log('Gantt data binding');
  }

  onNavigate(e) {
    this.logger.log(kendo.format('navigate:: view:{0};', e.view));
  }

  onMoveStart(e) {
    this.logger.log('moveStart');
  }

  onMove(e) {
    this.logger.log('move');
  }

  onMoveEnd(e) {
    this.logger.log('moveEnd');
  }

  onResizeStart(e) {
    this.logger.log('resizeStart');
  }

  onResize(e) {
    this.logger.log('resize');
  }

  onResizeEnd(e) {
    this.logger.log('resizeEnd');
  }
}

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>

logger.html

<template>
  <div class="console">
  </div>
</template>

logger.js

export class Logger {
  attached() {
    this.overrideStyles();
  }


  log(message, isError, container) {
    let lastContainer = $('.console div:first', container);
    let counter = lastContainer.find('.count').detach();
    let lastMessage = lastContainer.text();
    let count = 1 * (counter.text() || 1);

    lastContainer.append(counter);

    if (!lastContainer.length || message !== lastMessage) {
      $('<div' + (isError ? ' class=\'error\'' : '') + '/>')
      .css({
        marginTop: -24,
        backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
      })
      .html(message)
      .prependTo($('.console', container))
      .animate({ marginTop: 0 }, 300)
      .animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
    } else {
      count++;

      if (counter.length) {
        counter.html(count);
      } else {
        lastContainer.html(lastMessage)
        .append('<span class=\'count\'>' + count + '</span>');
      }
    }
  }

  error(message) {
    this.log(message, true);
  }

  overrideStyles() {
    jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
      jQuery.fx.step[attr] = function(fx) {
        if (!fx.state || typeof fx.end === typeof '') {
          fx.start = getColor(fx.elem, attr);
          fx.end = getRGB(fx.end);
        }

        fx.elem.style[attr] = ['rgb(', [
          Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
        ].join(','), ')'].join('');
      };
    });
  }
}


// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
  let result;

  // Check if we're already dealing with an array of colors
  if (color && color.constructor === Array && color.length === 3) {
    return color;
  }

  // Look for rgb(num,num,num)
  result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
  if (result) {
    return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
  }

  // Look for #a0b1c2
  result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
  if (result) {
    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
  }

  // Otherwise, we're most likely dealing with a named color
  return jQuery.trim(color).toLowerCase();
}

function getColor(elem, attr) {
  let color;

  do {
    color = jQuery.css(elem, attr);

    // Keep going until we find an element that has color, or we hit the body
    if (color && color !== 'transparent' || jQuery.nodeName(elem, 'body')) {
      break;
    }

    attr = 'backgroundColor';

    elem = elem.parentNode;
  } while (elem);

  return getRGB(color);
}

main.js

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

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