Changes for page Home

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]

Details

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -3,88 +3,105 @@
3	3	const E = (tag, ...childs) => {
4	4	const attrs = childs[0]?.constructor === Object ? childs.shift() : {};
5	5	const ret = Element(tag, attrs);
6		- ret.append(...childs.flat());
	6	+ ret.append(...childs.flat().filter(e => e));
7	7	return ret;
8	8	};
	9	+ const range = num => Array(num).fill().map((_, i) => i);
9	9	FC.defineView('monthCols', {
10	10	class: FC.View.extend({
11	11	render() {
12		- const chf = this.opt("columnFormat") ?? "MMM";
13		- const start = this.start ?? FC.moment({year: FC.moment().year()});
14		- const months = Array(12).fill().map((_, month) => start.clone().add({month}));
	13	+ console.debug("render");
	14	+ },
	15	+ renderSkeleton() {
	16	+ console.debug("renderSkeleton");
	17	+ },
	18	+ renderEvents(events) {
	19	+ console.debug("renderEvents", events);
	20	+ debugger;
	21	+ try {
	22	+ this._renderFun(events);
	23	+ } catch (e) {
	24	+ console.exception(e);
	25	+ }
	26	+ },
	27	+ _renderFun(events) {
	28	+ const cf = this.opt("columnFormat") ?? "MMM";
	29	+ const rf = this.opt("rowFormat") ?? "D";
	30	+ const df = this.opt("cellFormat") ?? "dd";
	31	+ const wf = this.opt("weekFormat") ?? "w";
	32	+ const colspan = (df || wf) ? (1 + !!df + !!wf) : null;
15	15
	34	+ const ys = this.start;
	35	+ const ye = this.end;
	36	+ const yv = events.slice().sort((a,b) => a.start.diff(b.start) || a.end.diff(b.end));
	37	+
	38	+
	39	+ const cols = [];
	40	+ const head = [];
	41	+ const days = Array(31).fill().map(_ => []);
	42	+
	43	+ if (rf) {
	44	+ cols.push(E("col", {class: "fc-fitCol"}));
	45	+ head.push(E("th"));
	46	+ days.forEach((arr, day) => arr.push(E("th", {class: "fc-axis"}, ys.clone().add({day}).format(rf))));
	47	+ }
	48	+
	49	+ for (const month of range(12)) {
	50	+ const ms = ys.clone().add({month})
	51	+ const me = ms.clone().add({month: 1});
	52	+ const md = me.diff(ms, "days");
	53	+ const mv = yv.filter(t => ms.isBefore(t.end) && t.start.isBefore(me));
	54	+
	55	+ if (df) cols.push(E("col", {class: "fc-fitCol fc-fade fc-dayVal"}));
	56	+ cols.push(E("col"));
	57	+ if (wf) cols.push(E("col", {class: "fc-fitCol fc-fade fc-weekVal"}));
	58	+ head.push(E("th", {colspan}, ms.format(cf)));
	59	+
	60	+ const bgc = new Array(md);
	61	+
	62	+ for (const day of range(31)) {
	63	+ if (day < md) {
	64	+ const ds = ms.clone().add({day});
	65	+ const de = ds.clone().add({day: 1});
	66	+
	67	+ const oc = [];
	68	+ while(mv[0]?.start.isBefore(de)) {
	69	+ const v = mv.shift();
	70	+ const d = Math.ceil(v.end.max(me).diff(ds, "days", true));
	71	+ if (v.rendering == "background") {
	72	+ if (v.color)
	73	+ for (const i of range(d))
	74	+ bgc[day + i] = v.color;
	75	+ } else {
	76	+ const e = E("div", v.title);
	77	+ e.style.height = `${100 * d}%`;
	78	+ if (v.color) e.style.borderColor = e.style.backgroundColor = v.color;
	79	+ if (v.textColor) e.style.color = v.textColor;
	80	+ oc.push(e);
	81	+ // TODO: soft-columns
	82	+ }
	83	+ }
	84	+
	85	+ const da = {class: this.getDayClasses(ds).join(" ")};
	86	+ if (df) days[day].push(E("td", da, ds.format(df)));
	87	+ if (bgc[day]) da.style = `background-color: ${bgc[day]};`;
	88	+ days[day].push(E("td", da, oc));
	89	+ if (wf) days[day].push(E("td", da, ds.weekday() ? "" : ds.format(wf)));
	90	+ } else
	91	+ days[day].push(E("td", {colspan}));
	92	+ }
	93	+ }
	94	+
	95	+
16	16	this.el.addClass("fc-month-cols-view").html(
17	17	E(
18	18	"table",
19		- E("thead", {class: "fc-head"},
20		- E("tr", E("th"), months.map(m => E("th", m.format(chf))))),
21		- E("tbody", {class: "fc-body"},
22		- Array(31).fill().map((_, day) => E("tr",
23		- E("th", {class: "fc-axis"}, `${day + 1}`),
24		- months.map(m => m.clone().add({day})).map(d =>
25		- d.date() === day + 1
26		- ? E("td", {class: this.getDayClasses(d).join(" ")}, [d.format("dd")])
27		- : E("td")
28		- )))
29		- ),
	99	+ E("colgroup", cols),
	100	+ E("thead", {class: "fc-head"}, E("tr", head)),
	101	+ E("tbody", {class: "fc-body"}, days.map(d => E("tr", d))),
30	30	)
31	31	);
32		- },
33		- renderEvents(ev) {
34		- const todo = ev.slice().sort((a,b) => a.start.diff(b.start) || a.end.diff(b.end));
35		- const cols = [];
36		-
37		- for(
38		- let s = this.start.clone(), e = s.clone().add({day: 1}), col = [], occ = [], bgc, bgt, bgn = 0, sim;
39		- s.isBefore(this.end);
40		- s.add({day: 1}), e.add({day: 1}), bgn--, occ = occ.map(o => o--).filter(o => o > 0)
41		- ) {
42		- // calculate maximum number of simultaneous events
43		- if (s.date() == 1) {
44		- const e2 = s.clone().add({month: 1});
45		- sim = Math.max(0, ...todo
46		- .filter(t => s.isBefore(t.end) && t.start.isBefore(e2))
47		- .map((t, i, arr) => arr.slice(i).filter(o => o.start.isBefore(t.end)).length)
48		- );
49		- }
50		- const cells = [E("td", s.format("dd"))];
51		- // new events
52		- while (todo && todo[0].start.isBefore(e)) {
53		- const t = todo.shift();
54		- const d = Math.ceil(t.end.diff(t.start, "days", true));
55		- if (t.rendering == "background") {
56		- bgc = t.color;
57		- bgt = t.title;
58		- bgn = d;
59		- } else {
60		- const e = E("td", t.title);
61		- if (t.color) e.style.borderColor = e.style.backgroundColor = t.color;
62		- if (t.textColor) e.style.color = t.textColor;
63		- if (d > 1) e.rowspan = d;
64		- occ.push(d);
65		- }
66		- }
67		- // fill the rest
68		- const m = sim - occ.length;
69		- if (m) cells.push(E("td", {colspan: m}));
70		- cells.push(E("td", s.weekday() ? "" : s.weekYear()));
71		- // apply background color
72		- if (bgn && bgc) {
73		- for (const c of cells) {
74		- e.style.backgroundColor ||= bgc;
75		- if (bgr) e.title ||= bgt;
76		- }
77		- }
78		- // flush month
79		- if (s.month() != e.month()) {
80		- while(col.length < 31) col.push();
81		- cols.push(col);
82		- col = [];
83		- }
84		- }
85		-
86		- debugger;
87		- },
	104	+ }
88	88	}),
89	89	duration: { year: 1 },
90	90	});
...	...	@@ -99,6 +99,7 @@
99	99	},
100	100	monthCols: {
101	101	columnFormat: "MMM",
	119	+ weekFormat: "W",
102	102	titleFormat: "YYYY",
103	103	buttonText: "year",
104	104	},