path: root/plugins/utilities/journal-calendar-widget.tid

title: $:/plugins/local/journal-calendar/widget.js
type: application/javascript
module-type: widget

/*\
title: $:/plugins/local/journal-calendar/widget.js
type: application/javascript
module-type: widget

Renders journal tiddlers as monthly calendars.
\*/
(function() {
"use strict";

var Widget = require("$:/core/modules/widgets/widget.js").widget,
	VIEW_STATE_TITLE = "$:/state/journal-calendar/view",
	MONTH_STATE_TITLE = "$:/state/journal-calendar/month";

var JournalCalendarWidget = function(parseTreeNode,options) {
	this.initialise(parseTreeNode,options);
};

JournalCalendarWidget.prototype = new Widget();
JournalCalendarWidget.prototype.constructor = JournalCalendarWidget;

function pad(value) {
	return value < 10 ? "0" + value : "" + value;
}

function dateKey(year,month,day) {
	return year + "-" + pad(month) + "-" + pad(day);
}

function monthKey(year,month) {
	return year + "-" + pad(month);
}

function isValidMonth(value) {
	var match = /^(\d{4})-(\d{2})$/.exec(value || "");
	return !!match && Number(match[2]) >= 1 && Number(match[2]) <= 12;
}

function parseMonth(value) {
	var parts = value.split("-");
	return {
		year: Number(parts[0]),
		month: Number(parts[1])
	};
}

function formatMonth(value) {
	var month = parseMonth(value);
	return month.year + "年" + month.month + "月";
}

JournalCalendarWidget.prototype.render = function(parent,nextSibling) {
	this.parentDomNode = parent;
	this.computeAttributes();
	this.execute();

	var container = this.document.createElement("div");
	container.className = "tc-journal-calendar";
	parent.insertBefore(container,nextSibling);
	this.domNodes.push(container);
	this.containerNode = container;

	this.renderCalendar();
};

JournalCalendarWidget.prototype.execute = function() {
	this.tag = this.getAttribute("tag","日志");
	this.view = this.getAttribute("view","switchable");
	this.month = this.getAttribute("month","");
};

JournalCalendarWidget.prototype.getJournalDate = function(tiddler) {
	var titleMatch = /^(\d{4})年(\d{2})月(\d{2})日$/.exec(tiddler.fields.title),
		date;

	if(titleMatch) {
		date = new Date(Number(titleMatch[1]),Number(titleMatch[2]) - 1,Number(titleMatch[3]));
		if(date.getFullYear() === Number(titleMatch[1]) && date.getMonth() === Number(titleMatch[2]) - 1 && date.getDate() === Number(titleMatch[3])) {
			return date;
		}
	}
	return null;
};

JournalCalendarWidget.prototype.getJournalData = function() {
	var titles = this.wiki.getTiddlersWithTag(this.tag),
		byDate = Object.create(null),
		months = Object.create(null),
		self = this;

	titles.forEach(function(title) {
		var tiddler = self.wiki.getTiddler(title);
		if(!tiddler || tiddler.fields["draft.of"]) {
			return;
		}

		var date = self.getJournalDate(tiddler);
		if(!date) {
			return;
		}

		var day = dateKey(date.getFullYear(),date.getMonth() + 1,date.getDate()),
			month = day.substring(0,7);
		byDate[day] = {
			title: title,
			tags: (tiddler.fields.tags || []).filter(function(tag) {
				return tag !== self.tag;
			})
		};
		months[month] = true;
	});

	return {
		byDate: byDate,
		months: Object.keys(months).sort().reverse()
	};
};

JournalCalendarWidget.prototype.getCurrentMonth = function() {
	if(isValidMonth(this.month)) {
		return this.month;
	}

	var stateMonth = this.wiki.getTiddlerText(MONTH_STATE_TITLE,"");
	if(isValidMonth(stateMonth)) {
		return stateMonth;
	}

	var now = new Date();
	return monthKey(now.getFullYear(),now.getMonth() + 1);
};

JournalCalendarWidget.prototype.getCurrentView = function() {
	if(this.view === "month" || this.view === "all") {
		return this.view;
	}
	return this.wiki.getTiddlerText(VIEW_STATE_TITLE,"month") === "all" ? "all" : "month";
};

JournalCalendarWidget.prototype.setState = function(title,value) {
	this.wiki.addTiddler({
		title: title,
		text: value
	});
};

JournalCalendarWidget.prototype.getMonthJournals = function(value,byDate) {
	return Object.keys(byDate).filter(function(date) {
		return date.substring(0,7) === value;
	}).sort().map(function(date) {
		return {
			date: date,
			title: byDate[date].title,
			tags: byDate[date].tags
		};
	});
};

JournalCalendarWidget.prototype.createButton = function(label,className,handler) {
	var button = this.document.createElement("button");
	button.setAttribute("type","button");
	button.className = className;
	button.textContent = label;
	button.addEventListener("click",handler);
	return button;
};

JournalCalendarWidget.prototype.renderOpenMonthButton = function(value,journals) {
	if(!journals.length) {
		return null;
	}

	var self = this,
		button = this.createButton("展开本月日志（" + journals.length + "）","tc-btn-invisible tc-journal-calendar-expand",function(event) {
			self.openMonthJournals(journals,event.currentTarget,event);
		});
	button.title = "打开" + formatMonth(value) + "的全部日志";
	button.setAttribute("aria-label","打开" + formatMonth(value) + "的全部日志，共" + journals.length + "篇");
	return button;
};

JournalCalendarWidget.prototype.renderViewSwitcher = function(currentView) {
	if(this.view !== "switchable") {
		return null;
	}

	var self = this,
		controls = this.document.createElement("div");
	controls.className = "tc-journal-calendar-view-switcher";

	controls.appendChild(this.createButton("单月视图","tc-btn-invisible tc-journal-calendar-switch" + (currentView === "month" ? " tc-selected" : ""),function() {
		self.setState(VIEW_STATE_TITLE,"month");
	}));
	controls.appendChild(this.createButton("全部月份","tc-btn-invisible tc-journal-calendar-switch" + (currentView === "all" ? " tc-selected" : ""),function() {
		self.setState(VIEW_STATE_TITLE,"all");
	}));
	return controls;
};

JournalCalendarWidget.prototype.renderMonthControls = function(selectedMonth) {
	if(isValidMonth(this.month)) {
		return null;
	}

	var self = this,
		selected = parseMonth(selectedMonth),
		controls = this.document.createElement("div");
	controls.className = "tc-journal-calendar-month-controls";

	function setOffset(offset) {
		var date = new Date(selected.year,selected.month - 1 + offset,1);
		self.setState(MONTH_STATE_TITLE,monthKey(date.getFullYear(),date.getMonth() + 1));
	}

	controls.appendChild(this.createButton("上个月","tc-btn-invisible tc-journal-calendar-nav",function() {
		setOffset(-1);
	}));
	controls.appendChild(this.createButton("本月","tc-btn-invisible tc-journal-calendar-nav",function() {
		var now = new Date();
		self.setState(MONTH_STATE_TITLE,monthKey(now.getFullYear(),now.getMonth() + 1));
	}));
	controls.appendChild(this.createButton("下个月","tc-btn-invisible tc-journal-calendar-nav",function() {
		setOffset(1);
	}));
	return controls;
};

JournalCalendarWidget.prototype.renderToolbar = function(currentView,selectedMonth,byDate) {
	var toolbar = this.document.createElement("div"),
		monthSummary = this.document.createElement("div"),
		monthTitle = this.document.createElement("h2"),
		monthControls,
		expandButton,
		viewSwitcher;

	toolbar.className = "tc-journal-calendar-toolbar";
	monthSummary.className = "tc-journal-calendar-month-summary";
	monthTitle.className = "tc-journal-calendar-current-month";
	monthTitle.textContent = currentView === "all" ? "全部月份" : formatMonth(selectedMonth);
	monthSummary.appendChild(monthTitle);

	if(currentView === "month") {
		monthControls = this.renderMonthControls(selectedMonth);
		if(monthControls) {
			monthSummary.appendChild(monthControls);
		}
		expandButton = this.renderOpenMonthButton(selectedMonth,this.getMonthJournals(selectedMonth,byDate));
		if(expandButton) {
			monthSummary.appendChild(expandButton);
		}
	}
	toolbar.appendChild(monthSummary);

	viewSwitcher = this.renderViewSwitcher(currentView);
	if(viewSwitcher) {
		toolbar.appendChild(viewSwitcher);
	}
	this.containerNode.appendChild(toolbar);
};

JournalCalendarWidget.prototype.navigateTo = function(title,node,event) {
	var bounds = node.getBoundingClientRect();
	this.dispatchEvent({
		type: "tm-navigate",
		navigateTo: title,
		navigateFromTitle: this.getVariable("storyTiddler"),
		navigateFromNode: this,
		navigateFromClientRect: {
			top: bounds.top,
			left: bounds.left,
			width: bounds.width,
			right: bounds.right,
			bottom: bounds.bottom,
			height: bounds.height
		},
		navigateSuppressNavigation: event.metaKey || event.ctrlKey || event.button === 1
	});
};

JournalCalendarWidget.prototype.openMonthJournals = function(journals,node,event) {
	var self = this;
	journals.forEach(function(journal) {
		self.navigateTo(journal.title,node,event);
	});
};

JournalCalendarWidget.prototype.renderMonth = function(value,byDate,showHeading) {
	var self = this,
		selected = parseMonth(value),
		section = this.document.createElement("section"),
		monthHeader = this.document.createElement("div"),
		heading,
		expandButton,
		viewport = this.document.createElement("div"),
		grid = this.document.createElement("div"),
		journals = this.getMonthJournals(value,byDate),
		weekdays = ["一","二","三","四","五","六","日"],
		firstWeekday = (new Date(selected.year,selected.month - 1,1).getDay() + 6) % 7,
		daysInMonth = new Date(selected.year,selected.month,0).getDate(),
		today = new Date(),
		index;

	section.className = "tc-journal-calendar-month";
	monthHeader.className = "tc-journal-calendar-month-header";
	if(showHeading) {
		heading = this.document.createElement("h2");
		heading.className = "tc-journal-calendar-month-title";
		heading.textContent = formatMonth(value);
		monthHeader.appendChild(heading);
		expandButton = this.renderOpenMonthButton(value,journals);
		if(expandButton) {
			monthHeader.appendChild(expandButton);
		}
		section.appendChild(monthHeader);
	}
	viewport.className = "tc-journal-calendar-viewport";
	grid.className = "tc-journal-calendar-grid";

	weekdays.forEach(function(weekday) {
		var weekdayNode = self.document.createElement("div");
		weekdayNode.className = "tc-journal-calendar-weekday";
		weekdayNode.textContent = weekday;
		grid.appendChild(weekdayNode);
	});

	for(index = 0; index < firstWeekday; index++) {
		var blank = this.document.createElement("div");
		blank.className = "tc-journal-calendar-day tc-journal-calendar-day-empty";
		grid.appendChild(blank);
	}

	for(var day = 1; day <= daysInMonth; day++) {
		var key = dateKey(selected.year,selected.month,day),
			journal = byDate[key],
			dayNode = this.document.createElement("div"),
			numberNode;

		dayNode.className = "tc-journal-calendar-day" + (journal ? " tc-journal-calendar-day-has-journal" : "");
		if(selected.year === today.getFullYear() && selected.month === today.getMonth() + 1 && day === today.getDate()) {
			dayNode.className += " tc-journal-calendar-day-today";
		}

		if(journal) {
			numberNode = this.createButton(day,"tc-btn-invisible tc-journal-calendar-day-number tc-journal-calendar-day-link",function(title) {
				return function(event) {
					self.navigateTo(title,event.currentTarget,event);
				};
			}(journal.title));
			numberNode.title = "打开日志：" + journal.title;
			numberNode.setAttribute("aria-label","打开日志：" + journal.title);
		} else {
			numberNode = this.document.createElement("div");
			numberNode.className = "tc-journal-calendar-day-number";
			numberNode.textContent = day;
		}
		dayNode.appendChild(numberNode);

		if(journal) {
			journal.tags.forEach(function(tag) {
				var tagButton = self.createButton(tag,"tc-btn-invisible tc-tag-label tc-journal-calendar-tag",function(event) {
					self.navigateTo(tag,event.currentTarget,event);
				});
				tagButton.title = "打开标签：" + tag;
				tagButton.setAttribute("aria-label","打开标签：" + tag);
				dayNode.appendChild(tagButton);
			});
		}
		grid.appendChild(dayNode);
	}

	viewport.appendChild(grid);
	section.appendChild(viewport);
	this.containerNode.appendChild(section);
};

JournalCalendarWidget.prototype.renderCalendar = function() {
	var data = this.getJournalData(),
		currentView = this.getCurrentView(),
		selectedMonth = this.getCurrentMonth();

	this.renderToolbar(currentView,selectedMonth,data.byDate);

	if(currentView === "all") {
		if(!data.months.length) {
			var empty = this.document.createElement("div");
			empty.className = "tc-journal-calendar-empty";
			empty.textContent = "目前没有日志。";
			this.containerNode.appendChild(empty);
			return;
		}
		data.months.forEach(function(month) {
			this.renderMonth(month,data.byDate,true);
		},this);
		return;
	}

	this.renderMonth(selectedMonth,data.byDate,false);
};

JournalCalendarWidget.prototype.refresh = function(changedTiddlers) {
	var changedAttributes = this.computeAttributes();
	if(Object.keys(changedAttributes).length || Object.keys(changedTiddlers).length) {
		this.refreshSelf();
		return true;
	}
	return false;
};

exports["journal-calendar"] = JournalCalendarWidget;

})();