diff --git a/src/view/phui/calendar/PHUICalendarDayView.php b/src/view/phui/calendar/PHUICalendarDayView.php index 7d32866cea..30d35e93fd 100644 --- a/src/view/phui/calendar/PHUICalendarDayView.php +++ b/src/view/phui/calendar/PHUICalendarDayView.php @@ -9,7 +9,6 @@ final class PHUICalendarDayView extends AphrontView { private $year; private $browseURI; private $events = array(); - private $todayEvents = array(); private $jsTodayEvents = array(); private $allDayEvents = array(); @@ -55,13 +54,12 @@ final class PHUICalendarDayView extends AphrontView { ); } - $js_hourly_events = array(); - $hourly_events = array(); - $first_event_hour = null; + $js_hourly_events = array(); + $js_today_all_day_events = array(); + $all_day_events = $this->getAllDayEvents(); - $today_all_day_events = array(); $day_start = $this->getDateTime(); $day_end = id(clone $day_start)->modify('+1 day'); @@ -74,7 +72,12 @@ final class PHUICalendarDayView extends AphrontView { $all_day_end = $all_day_event->getEpochEnd(); if ($all_day_start < $day_end_epoch && $all_day_end > $day_start_epoch) { - $today_all_day_events[] = $all_day_event; + $js_today_all_day_events[] = array( + 'name' => $all_day_event->getName(), + 'id' => $all_day_event->getEventID(), + 'viewerIsInvited' => $all_day_event->getViewerIsInvited(), + 'uri' => $all_day_event->getURI(), + ); } } @@ -93,7 +96,6 @@ final class PHUICalendarDayView extends AphrontView { ($event->getEpochStart() >= $hour_start && $event->getEpochStart() < $hour_end)) { $current_hour_events[] = $event; - $this->todayEvents[] = $event; $this->jsTodayEvents[] = array( 'eventStartEpoch' => $event->getEpochStart(), 'eventEndEpoch' => $event->getEpochEnd(), @@ -134,94 +136,36 @@ final class PHUICalendarDayView extends AphrontView { 'top' => $top.'%', 'height' => $height.'%', ); - - $hourly_events[$event->getEventID()] = array( - 'hour' => $hour, - 'event' => $event, - 'offset' => '0', - 'width' => '100%', - 'top' => $top.'%', - 'height' => $height.'%', - ); } } - $clusters = $this->findTodayClusters(); - foreach ($clusters as $cluster) { - $hourly_events = $this->updateEventsFromCluster( - $cluster, - $hourly_events); - } - - $rows = array(); - - foreach ($hours as $hour) { - $early_hours = array(8); - if ($first_event_hour) { - $early_hours[] = $first_event_hour->format('G'); - } - if ($hour->format('G') < min($early_hours)) { - continue; - } - - $drawn_hourly_events = array(); - $cell_time = phutil_tag( - 'td', - array('class' => 'phui-calendar-day-hour'), - $hour->format('g A')); - - foreach ($hourly_events as $hourly_event) { - if ($hourly_event['hour'] == $hour) { - - $drawn_hourly_events[] = $this->drawEvent( - $hourly_event['event'], - $hourly_event['offset'], - $hourly_event['width'], - $hourly_event['top'], - $hourly_event['height']); - } - } - $cell_event = phutil_tag( - 'td', - array('class' => 'phui-calendar-day-events'), - $drawn_hourly_events); - - $row = phutil_tag( - 'tr', - array(), - array($cell_time, $cell_event)); - - $rows[] = $row; - } - - $table = phutil_tag( - 'table', - array('class' => 'phui-calendar-day-view'), - $rows); - - $all_day_event_box = new PHUIBoxView(); - foreach ($today_all_day_events as $all_day_event) { - $all_day_event_box->appendChild( - $this->drawAllDayEvent($all_day_event)); - } - $header = $this->renderDayViewHeader(); $sidebar = $this->renderSidebar(); $warnings = $this->getQueryRangeWarning(); + $table_id = celerity_generate_unique_node_id(); + + $table_wrapper = phutil_tag( + 'div', + array( + 'id' => $table_id, + ), + ''); + Javelin::initBehavior( 'day-view', array( + 'allDayEvents' => $js_today_all_day_events, 'todayEvents' => $this->jsTodayEvents, 'hourlyEvents' => $js_hourly_events, 'hours' => $js_hours, 'firstEventHour' => $first_event_hour->format('G'), + 'tableID' => $table_id, )); $table_box = id(new PHUIObjectBoxView()) ->setHeader($header) - ->appendChild($all_day_event_box) - ->appendChild($table) + ->appendChild($table_wrapper) ->setFormErrors($warnings) ->setFlush(true); @@ -433,75 +377,6 @@ final class PHUICalendarDayView extends AphrontView { return $hourly_events; } - private function drawAllDayEvent(AphrontCalendarEventView $event) { - $class = 'day-view-all-day'; - if ($event->getViewerIsInvited()) { - $class = $class.' viewer-invited-day-event'; - } - - $name = phutil_tag( - 'a', - array( - 'class' => $class, - 'href' => $event->getURI(), - ), - $event->getName()); - - $all_day_label = phutil_tag( - 'span', - array( - 'class' => 'phui-calendar-all-day-label', - ), - pht('All Day')); - - $div = phutil_tag( - 'div', - array( - 'class' => 'phui-calendar-day-event', - ), - array( - $all_day_label, - $name, - )); - - return $div; - } - - private function drawEvent( - AphrontCalendarEventView $event, - $offset, - $width, - $top, - $height) { - - $class = 'phui-calendar-day-event-link'; - if ($event->getViewerIsInvited()) { - $class = $class.' viewer-invited-day-event'; - } - - $name = phutil_tag( - 'a', - array( - 'class' => $class, - 'href' => $event->getURI(), - ), - $event->getName()); - - $div = phutil_tag( - 'div', - array( - 'class' => 'phui-calendar-day-event', - 'style' => 'left: '.$offset - .'; width: '.$width - .'; top: '.$top - .'; height: '.$height - .';', - ), - $name); - - return $div; - } - // returns DateTime of each hour in the day private function getHoursOfDay() { $included_datetimes = array(); diff --git a/webroot/rsrc/js/application/calendar/behavior-day-view.js b/webroot/rsrc/js/application/calendar/behavior-day-view.js index f37714c04f..9c42b7f719 100644 --- a/webroot/rsrc/js/application/calendar/behavior-day-view.js +++ b/webroot/rsrc/js/application/calendar/behavior-day-view.js @@ -8,6 +8,8 @@ JX.behavior('day-view', function(config) { var first_event_hour = config.firstEventHour; var hourly_events = config.hourlyEvents; var today_events = config.todayEvents; + var today_all_day_events = config.allDayEvents; + var table_wrapper = JX.$(config.tableID); function findTodayClusters() { @@ -80,19 +82,17 @@ JX.behavior('day-view', function(config) { return hourly_events; } - function drawEvent( - start, - end, - name, - viewerIsInvited, - uri, - id, - offset, - width, - top, - height) { + function drawEvent(hourly_event) { + var name = hourly_event['eventName']; + var viewerIsInvited = hourly_event['viewerIsInvited']; + var offset = hourly_event['offset']; + var width = hourly_event['width']; + var top = hourly_event['top']; + var height = hourly_event['height']; + var uri = hourly_events['uri']; var link_class = 'phui-calendar-day-event-link'; + if (viewerIsInvited) { link_class = link_class + ' viewer-invited-day-event'; } @@ -121,6 +121,36 @@ JX.behavior('day-view', function(config) { return div; } + function drawAllDayEvent( + viewerIsInvited, + uri, + name) { + var class_name = 'day-view-all-day'; + if (viewerIsInvited) { + class_name = class_name + ' viewer-invited-day-event'; + } + + name = JX.$N( + 'a', + { + className: class_name, + href: uri + }, + name); + + 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_label, name]); + + return div_all_day; + } + function drawRows() { var rows = []; var early_hours = [8]; @@ -142,20 +172,7 @@ JX.behavior('day-view', function(config) { for (var j=0; j < hourly_events.length; j++) { if (hourly_events[j]['hour'] == hours[i]['hour']) { - drawn_hourly_events.push( - drawEvent( - hourly_events[j]['eventStartEpoch'], - hourly_events[j]['eventEndEpoch'], - hourly_events[j]['eventName'], - hourly_events[j]['eventID'], - hourly_events[j]['viewerIsInvited'], - hourly_events[j]['hour'], - hourly_events[j]['offset'], - hourly_events[j]['width'], - hourly_events[j]['top'], - hourly_events[j]['height'] - ) - ); + drawn_hourly_events.push(drawEvent(hourly_events[j])); } } @@ -179,4 +196,20 @@ JX.behavior('day-view', function(config) { hourly_events = updateEventsFromCluster(today_clusters[i], hourly_events); } 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['viewerIsInvited'], + all_day_event['uri'], + all_day_event['name'])); + } + + var table = JX.$N( + 'table', + {className: 'phui-calendar-day-view'}, + rows); + + JX.DOM.setContent(table_wrapper, [all_day_events, table]); });