@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Translating day view into javascript, actually.
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
+79
-171
+21
-146
src/view/phui/calendar/PHUICalendarDayView.php
+21
-146
src/view/phui/calendar/PHUICalendarDayView.php
···
9
9
private $year;
10
10
private $browseURI;
11
11
private $events = array();
12
-
private $todayEvents = array();
13
12
private $jsTodayEvents = array();
14
13
15
14
private $allDayEvents = array();
···
55
54
);
56
55
}
57
56
57
+
$first_event_hour = null;
58
+
58
59
$js_hourly_events = array();
59
-
$hourly_events = array();
60
-
61
-
$first_event_hour = null;
60
+
$js_today_all_day_events = array();
62
61
63
62
$all_day_events = $this->getAllDayEvents();
64
-
$today_all_day_events = array();
65
63
66
64
$day_start = $this->getDateTime();
67
65
$day_end = id(clone $day_start)->modify('+1 day');
···
74
72
$all_day_end = $all_day_event->getEpochEnd();
75
73
76
74
if ($all_day_start < $day_end_epoch && $all_day_end > $day_start_epoch) {
77
-
$today_all_day_events[] = $all_day_event;
75
+
$js_today_all_day_events[] = array(
76
+
'name' => $all_day_event->getName(),
77
+
'id' => $all_day_event->getEventID(),
78
+
'viewerIsInvited' => $all_day_event->getViewerIsInvited(),
79
+
'uri' => $all_day_event->getURI(),
80
+
);
78
81
}
79
82
}
80
83
···
93
96
($event->getEpochStart() >= $hour_start
94
97
&& $event->getEpochStart() < $hour_end)) {
95
98
$current_hour_events[] = $event;
96
-
$this->todayEvents[] = $event;
97
99
$this->jsTodayEvents[] = array(
98
100
'eventStartEpoch' => $event->getEpochStart(),
99
101
'eventEndEpoch' => $event->getEpochEnd(),
···
134
136
'top' => $top.'%',
135
137
'height' => $height.'%',
136
138
);
137
-
138
-
$hourly_events[$event->getEventID()] = array(
139
-
'hour' => $hour,
140
-
'event' => $event,
141
-
'offset' => '0',
142
-
'width' => '100%',
143
-
'top' => $top.'%',
144
-
'height' => $height.'%',
145
-
);
146
139
}
147
-
}
148
-
149
-
$clusters = $this->findTodayClusters();
150
-
foreach ($clusters as $cluster) {
151
-
$hourly_events = $this->updateEventsFromCluster(
152
-
$cluster,
153
-
$hourly_events);
154
-
}
155
-
156
-
$rows = array();
157
-
158
-
foreach ($hours as $hour) {
159
-
$early_hours = array(8);
160
-
if ($first_event_hour) {
161
-
$early_hours[] = $first_event_hour->format('G');
162
-
}
163
-
if ($hour->format('G') < min($early_hours)) {
164
-
continue;
165
-
}
166
-
167
-
$drawn_hourly_events = array();
168
-
$cell_time = phutil_tag(
169
-
'td',
170
-
array('class' => 'phui-calendar-day-hour'),
171
-
$hour->format('g A'));
172
-
173
-
foreach ($hourly_events as $hourly_event) {
174
-
if ($hourly_event['hour'] == $hour) {
175
-
176
-
$drawn_hourly_events[] = $this->drawEvent(
177
-
$hourly_event['event'],
178
-
$hourly_event['offset'],
179
-
$hourly_event['width'],
180
-
$hourly_event['top'],
181
-
$hourly_event['height']);
182
-
}
183
-
}
184
-
$cell_event = phutil_tag(
185
-
'td',
186
-
array('class' => 'phui-calendar-day-events'),
187
-
$drawn_hourly_events);
188
-
189
-
$row = phutil_tag(
190
-
'tr',
191
-
array(),
192
-
array($cell_time, $cell_event));
193
-
194
-
$rows[] = $row;
195
-
}
196
-
197
-
$table = phutil_tag(
198
-
'table',
199
-
array('class' => 'phui-calendar-day-view'),
200
-
$rows);
201
-
202
-
$all_day_event_box = new PHUIBoxView();
203
-
foreach ($today_all_day_events as $all_day_event) {
204
-
$all_day_event_box->appendChild(
205
-
$this->drawAllDayEvent($all_day_event));
206
140
}
207
141
208
142
$header = $this->renderDayViewHeader();
209
143
$sidebar = $this->renderSidebar();
210
144
$warnings = $this->getQueryRangeWarning();
211
145
146
+
$table_id = celerity_generate_unique_node_id();
147
+
148
+
$table_wrapper = phutil_tag(
149
+
'div',
150
+
array(
151
+
'id' => $table_id,
152
+
),
153
+
'');
154
+
212
155
Javelin::initBehavior(
213
156
'day-view',
214
157
array(
158
+
'allDayEvents' => $js_today_all_day_events,
215
159
'todayEvents' => $this->jsTodayEvents,
216
160
'hourlyEvents' => $js_hourly_events,
217
161
'hours' => $js_hours,
218
162
'firstEventHour' => $first_event_hour->format('G'),
163
+
'tableID' => $table_id,
219
164
));
220
165
221
166
$table_box = id(new PHUIObjectBoxView())
222
167
->setHeader($header)
223
-
->appendChild($all_day_event_box)
224
-
->appendChild($table)
168
+
->appendChild($table_wrapper)
225
169
->setFormErrors($warnings)
226
170
->setFlush(true);
227
171
···
431
375
}
432
376
433
377
return $hourly_events;
434
-
}
435
-
436
-
private function drawAllDayEvent(AphrontCalendarEventView $event) {
437
-
$class = 'day-view-all-day';
438
-
if ($event->getViewerIsInvited()) {
439
-
$class = $class.' viewer-invited-day-event';
440
-
}
441
-
442
-
$name = phutil_tag(
443
-
'a',
444
-
array(
445
-
'class' => $class,
446
-
'href' => $event->getURI(),
447
-
),
448
-
$event->getName());
449
-
450
-
$all_day_label = phutil_tag(
451
-
'span',
452
-
array(
453
-
'class' => 'phui-calendar-all-day-label',
454
-
),
455
-
pht('All Day'));
456
-
457
-
$div = phutil_tag(
458
-
'div',
459
-
array(
460
-
'class' => 'phui-calendar-day-event',
461
-
),
462
-
array(
463
-
$all_day_label,
464
-
$name,
465
-
));
466
-
467
-
return $div;
468
-
}
469
-
470
-
private function drawEvent(
471
-
AphrontCalendarEventView $event,
472
-
$offset,
473
-
$width,
474
-
$top,
475
-
$height) {
476
-
477
-
$class = 'phui-calendar-day-event-link';
478
-
if ($event->getViewerIsInvited()) {
479
-
$class = $class.' viewer-invited-day-event';
480
-
}
481
-
482
-
$name = phutil_tag(
483
-
'a',
484
-
array(
485
-
'class' => $class,
486
-
'href' => $event->getURI(),
487
-
),
488
-
$event->getName());
489
-
490
-
$div = phutil_tag(
491
-
'div',
492
-
array(
493
-
'class' => 'phui-calendar-day-event',
494
-
'style' => 'left: '.$offset
495
-
.'; width: '.$width
496
-
.'; top: '.$top
497
-
.'; height: '.$height
498
-
.';',
499
-
),
500
-
$name);
501
-
502
-
return $div;
503
378
}
504
379
505
380
// returns DateTime of each hour in the day
+58
-25
webroot/rsrc/js/application/calendar/behavior-day-view.js
+58
-25
webroot/rsrc/js/application/calendar/behavior-day-view.js
···
8
8
var first_event_hour = config.firstEventHour;
9
9
var hourly_events = config.hourlyEvents;
10
10
var today_events = config.todayEvents;
11
+
var today_all_day_events = config.allDayEvents;
12
+
var table_wrapper = JX.$(config.tableID);
11
13
12
14
13
15
function findTodayClusters() {
···
80
82
return hourly_events;
81
83
}
82
84
83
-
function drawEvent(
84
-
start,
85
-
end,
86
-
name,
87
-
viewerIsInvited,
88
-
uri,
89
-
id,
90
-
offset,
91
-
width,
92
-
top,
93
-
height) {
85
+
function drawEvent(hourly_event) {
86
+
var name = hourly_event['eventName'];
87
+
var viewerIsInvited = hourly_event['viewerIsInvited'];
88
+
var offset = hourly_event['offset'];
89
+
var width = hourly_event['width'];
90
+
var top = hourly_event['top'];
91
+
var height = hourly_event['height'];
92
+
var uri = hourly_events['uri'];
94
93
95
94
var link_class = 'phui-calendar-day-event-link';
95
+
96
96
if (viewerIsInvited) {
97
97
link_class = link_class + ' viewer-invited-day-event';
98
98
}
···
121
121
return div;
122
122
}
123
123
124
+
function drawAllDayEvent(
125
+
viewerIsInvited,
126
+
uri,
127
+
name) {
128
+
var class_name = 'day-view-all-day';
129
+
if (viewerIsInvited) {
130
+
class_name = class_name + ' viewer-invited-day-event';
131
+
}
132
+
133
+
name = JX.$N(
134
+
'a',
135
+
{
136
+
className: class_name,
137
+
href: uri
138
+
},
139
+
name);
140
+
141
+
var all_day_label = JX.$N(
142
+
'span',
143
+
{className: 'phui-calendar-all-day-label'},
144
+
'All Day');
145
+
146
+
var div_all_day = JX.$N(
147
+
'div',
148
+
{className: 'phui-calendar-day-event'},
149
+
[all_day_label, name]);
150
+
151
+
return div_all_day;
152
+
}
153
+
124
154
function drawRows() {
125
155
var rows = [];
126
156
var early_hours = [8];
···
142
172
143
173
for (var j=0; j < hourly_events.length; j++) {
144
174
if (hourly_events[j]['hour'] == hours[i]['hour']) {
145
-
drawn_hourly_events.push(
146
-
drawEvent(
147
-
hourly_events[j]['eventStartEpoch'],
148
-
hourly_events[j]['eventEndEpoch'],
149
-
hourly_events[j]['eventName'],
150
-
hourly_events[j]['eventID'],
151
-
hourly_events[j]['viewerIsInvited'],
152
-
hourly_events[j]['hour'],
153
-
hourly_events[j]['offset'],
154
-
hourly_events[j]['width'],
155
-
hourly_events[j]['top'],
156
-
hourly_events[j]['height']
157
-
)
158
-
);
175
+
drawn_hourly_events.push(drawEvent(hourly_events[j]));
159
176
}
160
177
}
161
178
···
179
196
hourly_events = updateEventsFromCluster(today_clusters[i], hourly_events);
180
197
}
181
198
var rows = drawRows();
199
+
200
+
var all_day_events = [];
201
+
for(i=0; i < today_all_day_events.length; i++) {
202
+
var all_day_event = today_all_day_events[i];
203
+
all_day_events.push(drawAllDayEvent(
204
+
all_day_event['viewerIsInvited'],
205
+
all_day_event['uri'],
206
+
all_day_event['name']));
207
+
}
208
+
209
+
var table = JX.$N(
210
+
'table',
211
+
{className: 'phui-calendar-day-view'},
212
+
rows);
213
+
214
+
JX.DOM.setContent(table_wrapper, [all_day_events, table]);
182
215
});