phorge-phorge/webroot/rsrc/js/application/calendar/behavior-day-view.js

/**
 * @provides javelin-behavior-day-view
 * @requires phuix-icon-view
 */
JX.behavior('day-view', function(config) {

  function findTodayClusters() {
    var events = today_events.sort(function(x, y){
      return (x.eventStartEpoch - y.eventStartEpoch);
    });

    var clusters = [];

    for (var i=0; i < events.length; i++) {
      var today_event = events[i];

      var destination_cluster_index = null;
      var event_start = today_event.eventStartEpoch - (60);
      var event_end = today_event.eventEndEpoch + (60);

      for (var j=0; j < clusters.length; j++) {
        var cluster = clusters[j];

        for(var k=0; k < cluster.length; k++) {
          var clustered_event = cluster[k];
          var compare_event_start = clustered_event.eventStartEpoch;
          var compare_event_end = clustered_event.eventEndEpoch;

          if (event_start < compare_event_end &&
            event_end > compare_event_start) {
            destination_cluster_index = j;
            break;
          }
        }

        if (destination_cluster_index !== null) {
          break;
        }
      }

      if (destination_cluster_index !== null) {
        clusters[destination_cluster_index].push(today_event);
        destination_cluster_index = null;
      } else {
        var next_cluster = [];
        next_cluster.push(today_event);
        clusters.push(next_cluster);
      }
    }

    return clusters;
  }

  function updateEventsFromCluster(cluster) {
    var cluster_size = cluster.length;
    var n = 0;
    for(var i=0; i < cluster.length; i++) {
      var cluster_member = cluster[i];

      var event_id = cluster_member.eventID;
      var offset = ((n / cluster_size) * 100) + '%';
      var width = ((1 / cluster_size) * 100) + '%';

      for (var j=0; j < today_events.length; j++) {
        if (today_events[j].eventID == event_id) {

          today_events[j]['offset'] = offset;
          today_events[j]['width'] = width;
        }
      }
      n++;
    }

    return today_events;
  }

  function drawEvent(e) {
    var name = e['eventName'];
    var eventID = e['eventID'];
    var viewerIsInvited = e['viewerIsInvited'];
    var offset = e['offset'];
    var width = e['width'];
    var top = e['top'];
    var height = e['height'];
    var uri = e['uri'];

    var sigil = 'phui-calendar-day-event';
    var link_class = 'phui-calendar-day-event-link';

    if (viewerIsInvited) {
      link_class = link_class + ' viewer-invited-day-event';
    }

    var icon = new JX.PHUIXIconView()
      .setIcon(e.displayIcon)
      .setColor(e.displayIconColor)
      .getNode();

    var content = [icon, ' ', name];

    var name_link = JX.$N(
      'a',
      {
        className : link_class,
        href: uri
      },
      content);

    var class_name = 'phui-calendar-day-event';
    if (e.canEdit) {
      class_name = class_name + ' can-drag';
    }

    var div = JX.$N(
      'div',
      {
        className: class_name,
        sigil: sigil,
        meta: {eventID: eventID, record: e, uri: uri},
        style: {
          left: offset,
          width: width,
          top: top,
          height: height
        }
      },
      name_link);

    return div;
  }

  function drawAllDayEvent(e) {
    var class_name = 'day-view-all-day';

    var icon = new JX.PHUIXIconView()
      .setIcon(e.displayIcon)
      .setColor(e.displayIconColor)
      .getNode();
    var content = [icon, ' ', e.name];

    var name = JX.$N(
      'a',
      {
        className: class_name,
        href: e.uri
      },
      content);

    var all_day_label = JX.$N(
      'span',
      {className: 'phui-calendar-all-day-label'},
      'All Day');

    var div_all_day = JX.$N(
      'div',
      {className: 'phui-calendar-day-event all-day'},
      [all_day_label, name]);

    return div_all_day;
  }

  function drawRows() {
    var rows = [];
    var early_hours = [8];
    if (first_event_hour) {
      early_hours.push(first_event_hour);
    }
    var min_early_hour = Math.min(early_hours[0], early_hours[1]);


    for(var i=0; i < hours.length; i++) {
      if (hours[i]['hour'] < min_early_hour) {
        continue;
      }
      var cell_time = JX.$N(
        'td',
        {className: 'phui-calendar-day-hour'},
        hours[i].displayTime);

      var cell_event = JX.$N(
        'td',
        {
          meta: {
            time: hours[i].displayTime
          },
          className: 'phui-calendar-day-events',
          sigil: 'phui-calendar-day-event-cell'
        });

      var row = JX.$N(
        'tr',
        {},
        [cell_time, cell_event]);
      rows.push(row);
    }
    return rows;
  }

  function clusterAndDrawEvents() {
    var today_clusters = findTodayClusters();
    for(var i=0; i < today_clusters.length; i++) {
      today_events = updateEventsFromCluster(today_clusters[i]);
    }
    var drawn_hourly_events = [];
    for (i=0; i < today_events.length; i++) {
      drawn_hourly_events.push(drawEvent(today_events[i]));
    }

    JX.DOM.setContent(hourly_events_wrapper, drawn_hourly_events);

  }

  var year = config.year;
  var month = config.month;
  var day = config.day;
  var query = config.query;

  var hours = config.hours;
  var first_event_hour = config.firstEventHour;
  var first_event_hour_epoch = parseInt(config.firstEventHourEpoch, 10);
  var today_events = config.todayEvents;
  var today_all_day_events = config.allDayEvents;
  var table_wrapper = JX.$(config.tableID);
  var rows = drawRows();

  var all_day_events = [];
  for(i=0; i < today_all_day_events.length; i++) {
    var all_day_event = today_all_day_events[i];
    all_day_events.push(drawAllDayEvent(all_day_event));
  }

  var table = JX.$N(
    'table',
    {className: 'phui-calendar-day-view'},
    rows);

  var dragging = false;
  var origin = null;

  var offset_top = null;
  var new_top = null;

  var click_time = null;

  JX.DOM.listen(
    table_wrapper,
    'mousedown',
    'phui-calendar-day-event',
    function(e){

    if (!e.isNormalMouseEvent()) {
      return;
    }
    var data = e.getNodeData('phui-calendar-day-event');
    if (!data.record.canEdit) {
      return;
    }
    e.kill();
    dragging = e.getNode('phui-calendar-day-event');
    JX.DOM.alterClass(dragging, 'phui-drag', true);

    click_time = new Date();

    origin = JX.$V(e);

    var outer = JX.Vector.getPos(table);
    var inner = JX.Vector.getPos(dragging);

    offset_top = inner.y - outer.y;
    new_top = offset_top;

    dragging.style.top = offset_top + 'px';
  });
  JX.Stratcom.listen('mousemove', null, function(e){
    if (!dragging) {
      return;
    }
    var cursor = JX.$V(e);

    new_top = cursor.y - origin.y + offset_top;
    new_top = Math.min(new_top, 1320);
    new_top = Math.max(new_top, 0);
    new_top = Math.floor(new_top/15) * 15;

    dragging.style.top = new_top + 'px';
  });
  JX.Stratcom.listen('mouseup', null, function(){
    if (!dragging) {
      return;
    }

    var data = JX.Stratcom.getData(dragging);
    var record = data.record;

    if (new_top == offset_top) {
      var now = new Date();
      if (now.getTime() - click_time.getTime() < 250) {
        JX.$U(record.uri).go();
      }

      JX.DOM.alterClass(dragging, 'phui-drag', false);
      dragging = false;
      return;
    }
    var new_time = first_event_hour_epoch + (new_top * 60);
    var id = data.eventID;
    var duration = record.eventEndEpoch - record.eventStartEpoch;
    record.eventStartEpoch = new_time;
    record.eventEndEpoch = new_time + duration;
    record.top = new_top + 'px';

    new JX.Workflow(
      '/calendar/event/drag/' + id + '/',
      {start: new_time})
      .start();

    JX.DOM.alterClass(dragging, 'phui-drag', false);
    dragging = false;

    clusterAndDrawEvents();
  });

  JX.DOM.listen(table_wrapper, 'click', 'phui-calendar-day-event', function(e){
    if (e.isNormalClick()) {
      e.kill();
    }
  });

  JX.DOM.listen(table, 'click', 'phui-calendar-day-event-cell', function(e){
    if (!e.isNormalClick()) {
      return;
    }
    var data = e.getNodeData('phui-calendar-day-event-cell');
    var time = data.time;

    new JX.Workflow(
      '/calendar/event/edit/',
      {
        start_d: year + '-' + month + '-' + day,
        start_t: time,
        end_d: year + '-' + month + '-' + day,
        end_t: time + ' +1 hour'
      })
      .start();
  });

  var hourly_events_wrapper = JX.$N(
    'div',
    {style: {
      position: 'absolute',
      left: '69px',
      right: 0
    }});

  clusterAndDrawEvents();

  var daily_wrapper = JX.$N(
    'div',
    {style: {position: 'relative'}},
    [hourly_events_wrapper, table]);

  JX.DOM.setContent(table_wrapper, [all_day_events, daily_wrapper]);

});