archive/phabricator
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Translating day view into javascript, actually.

Browse Source 
Summary: Ref T8300, Translating day view into javascript, actually

Test Plan: should be no user facing changes. should look the same as it did before.

Reviewers: #blessed_reviewers, epriestley

Reviewed By: #blessed_reviewers, epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8300

Differential Revision: https://secure.phabricator.com/D12985
This commit is contained in:
lkassianik
2015-05-22 17:50:23 -07:00
parent 07a2bb7f3b
commit 6481884d26
2 changed files with 79 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/view/phui/calendar/PHUICalendarDayView.php
View File

@@ -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();

83
webroot/rsrc/js/application/calendar/behavior-day-view.js
View File

@@ -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]);
});