mirror of
https://gitlab.com/arnekeller/trilium-timeline.git
synced 2024-09-07 21:21:50 +00:00
Updated for 0.48.x, nothing was broken but I put everything in an async function to remove a warning.
Update !!!meta.json, Timeline Widget Import.zip, and 4 more files...
This commit is contained in:
Quentin Le Caignec
parent
c8a3807a9f
commit
3f5a562c5d
192
!!!meta.json
192
!!!meta.json
@ -1,17 +1,17 @@
|
||||
{
|
||||
"formatVersion": 1,
|
||||
"appVersion": "0.47.7",
|
||||
"appVersion": "0.48.3",
|
||||
"files": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "2sZ7j1WAYIEc",
|
||||
"noteId": "lwGnQ5Iexrw6",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc"
|
||||
"lwGnQ5Iexrw6"
|
||||
],
|
||||
"title": "Timeline Widget",
|
||||
"notePosition": 100,
|
||||
"notePosition": 90,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "render",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -22,13 +22,6 @@
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "renderNote",
|
||||
"value": "Pj8YRsJi8dTy",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
@ -175,21 +168,28 @@
|
||||
"value": "first",
|
||||
"isInheritable": false,
|
||||
"position": 230
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "renderNote",
|
||||
"value": "4SydRjaa28kb",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
],
|
||||
"dirFileName": "Timeline Widget",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "Pj8YRsJi8dTy",
|
||||
"noteId": "4SydRjaa28kb",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb"
|
||||
],
|
||||
"title": "render.html",
|
||||
"notePosition": 5,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": true,
|
||||
"type": "code",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -206,16 +206,16 @@
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "HPQBuorDTNkS",
|
||||
"noteId": "3JNjK3Mj9cbK",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK"
|
||||
],
|
||||
"title": "script.js",
|
||||
"notePosition": 153,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "code",
|
||||
"mime": "application/javascript;env=frontend",
|
||||
"attributes": [],
|
||||
@ -224,17 +224,17 @@
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "9v0I9nV5BLwz",
|
||||
"noteId": "4xkHYDkkVx4Y",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS",
|
||||
"9v0I9nV5BLwz"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK",
|
||||
"4xkHYDkkVx4Y"
|
||||
],
|
||||
"title": "moment.min.js",
|
||||
"notePosition": 123,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "file",
|
||||
"mime": "application/javascript",
|
||||
"attributes": [
|
||||
@ -250,17 +250,17 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "BLHMY7p9amHk",
|
||||
"noteId": "HuO9AqA6zKc7",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS",
|
||||
"BLHMY7p9amHk"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK",
|
||||
"HuO9AqA6zKc7"
|
||||
],
|
||||
"title": "vis.min.js",
|
||||
"notePosition": 133,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "file",
|
||||
"mime": "application/javascript",
|
||||
"attributes": [
|
||||
@ -276,17 +276,17 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "gcPseIMlkPRS",
|
||||
"noteId": "EmzNytW4VGal",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS",
|
||||
"gcPseIMlkPRS"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK",
|
||||
"EmzNytW4VGal"
|
||||
],
|
||||
"title": "vis-timeline-graph2d.min.js",
|
||||
"notePosition": 143,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "file",
|
||||
"mime": "application/javascript",
|
||||
"attributes": [
|
||||
@ -302,17 +302,17 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "m78T7NY9ObE1",
|
||||
"noteId": "TllSZh8VukbM",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS",
|
||||
"m78T7NY9ObE1"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK",
|
||||
"TllSZh8VukbM"
|
||||
],
|
||||
"title": "vis.min.css",
|
||||
"notePosition": 153,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "file",
|
||||
"mime": "text/css",
|
||||
"attributes": [
|
||||
@ -335,17 +335,17 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "JhvzMCV72opp",
|
||||
"noteId": "0roaKuiSkbtN",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"Pj8YRsJi8dTy",
|
||||
"HPQBuorDTNkS",
|
||||
"JhvzMCV72opp"
|
||||
"lwGnQ5Iexrw6",
|
||||
"4SydRjaa28kb",
|
||||
"3JNjK3Mj9cbK",
|
||||
"0roaKuiSkbtN"
|
||||
],
|
||||
"title": "vis-timeline-graph2d.min.css",
|
||||
"notePosition": 163,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "file",
|
||||
"mime": "text/css",
|
||||
"attributes": [
|
||||
@ -372,28 +372,28 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "d7gJEGqNGL9p",
|
||||
"noteId": "DO4mSxFMbfXb",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"d7gJEGqNGL9p"
|
||||
"lwGnQ5Iexrw6",
|
||||
"DO4mSxFMbfXb"
|
||||
],
|
||||
"title": "button.js",
|
||||
"notePosition": 15,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "code",
|
||||
"mime": "application/javascript;env=frontend",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "targetNote",
|
||||
"value": "2sZ7j1WAYIEc",
|
||||
"value": "lwGnQ5Iexrw6",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "run",
|
||||
"name": "disabled:run",
|
||||
"value": "frontendStartup",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
@ -410,15 +410,15 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "JlnkqhfQ8JR4",
|
||||
"noteId": "QjfHRpX49lxd",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd"
|
||||
],
|
||||
"title": "EXAMPLES",
|
||||
"notePosition": 25,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
@ -427,16 +427,16 @@
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "cDZAPX7ORCRa",
|
||||
"noteId": "irJeEjjPt7T4",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"cDZAPX7ORCRa"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"irJeEjjPt7T4"
|
||||
],
|
||||
"title": "This event is in First",
|
||||
"notePosition": 0,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -460,16 +460,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "skEcjQY0NgNy",
|
||||
"noteId": "c1PdUC1Ak7Nh",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"skEcjQY0NgNy"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"c1PdUC1Ak7Nh"
|
||||
],
|
||||
"title": "This event is in Second and this group is not visible by default",
|
||||
"notePosition": 1,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -493,16 +493,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "f5jq5D5cb4NX",
|
||||
"noteId": "HAaciZ3iN25V",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"f5jq5D5cb4NX"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"HAaciZ3iN25V"
|
||||
],
|
||||
"title": "This event is in Third and has an end date",
|
||||
"notePosition": 2,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -533,16 +533,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "bxl4R5CTPvvn",
|
||||
"noteId": "WQdcXc7QtPz3",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"bxl4R5CTPvvn"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"WQdcXc7QtPz3"
|
||||
],
|
||||
"title": "This event is in a seperate group then inserted into \"Third\"",
|
||||
"notePosition": 3,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -566,16 +566,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "JTjoGTswR2GA",
|
||||
"noteId": "tYrgBTjurENE",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"JTjoGTswR2GA"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"tYrgBTjurENE"
|
||||
],
|
||||
"title": "This event is in Third",
|
||||
"notePosition": 3,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -599,16 +599,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "K7Fjghj31lUs",
|
||||
"noteId": "C0VeJ0npwoEC",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"K7Fjghj31lUs"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"C0VeJ0npwoEC"
|
||||
],
|
||||
"title": "This is a background event then inserted into \"Second\"",
|
||||
"notePosition": 4,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
@ -639,16 +639,16 @@
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "aVUiO3d3lfmo",
|
||||
"noteId": "5KePb9QfyuQq",
|
||||
"notePath": [
|
||||
"2sZ7j1WAYIEc",
|
||||
"JlnkqhfQ8JR4",
|
||||
"aVUiO3d3lfmo"
|
||||
"lwGnQ5Iexrw6",
|
||||
"QjfHRpX49lxd",
|
||||
"5KePb9QfyuQq"
|
||||
],
|
||||
"title": "This is a person note generating birth/death events",
|
||||
"notePosition": 14,
|
||||
"prefix": null,
|
||||
"isExpanded": 0,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
|
||||
Binary file not shown.
@ -1,174 +1,176 @@
|
||||
/** Version 1.0 **/
|
||||
renderTimeline();
|
||||
|
||||
// Initialize libraries and context
|
||||
var vis = require('vis.min.js');
|
||||
var moment = require('moment.min.js');
|
||||
var container = document.getElementById("timeline");
|
||||
var menu = document.getElementById("menu");
|
||||
async function renderTimeline() {
|
||||
// Initialize libraries and context
|
||||
var vis = require('vis.min.js');
|
||||
//var moment = require('moment.min.js');
|
||||
var container = document.getElementById("timeline");
|
||||
var menu = document.getElementById("menu");
|
||||
|
||||
// Get widget attribute values and fetch notes from defined tags
|
||||
const events = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
// fetch what labels to look for from widget attributes
|
||||
// event notes (start/end)
|
||||
const event_note_label_start = parentNote.getLabelValue('event_label_start').toString();
|
||||
const event_note_label_end = parentNote.getLabelValue('event_label_end').toString();
|
||||
// agent notes (birth/death)
|
||||
const person_note_label_start = parentNote.getLabelValue('person_label_start').toString();
|
||||
const person_note_label_end = parentNote.getLabelValue('person_label_end').toString();
|
||||
// date types (categories)
|
||||
const event_label_type = parentNote.getLabelValue('event_label_type').toString();
|
||||
|
||||
// fetch notes with those labels
|
||||
const event_notes = api.getNotesWithLabel(event_note_label_start);
|
||||
const person_notes_birth = api.getNotesWithLabel(person_note_label_start);
|
||||
const person_notes_death = api.getNotesWithLabel(person_note_label_end);
|
||||
const events = [];
|
||||
for (const note of event_notes) {
|
||||
const id = note.noteId;
|
||||
const content = note.title;
|
||||
const start = note.getLabelValue(event_note_label_start);
|
||||
const end = note.getLabelValue(event_note_label_end);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (content && start) {
|
||||
events.push({ id, content, start, end, group });
|
||||
// Get widget attribute values and fetch notes from defined tags
|
||||
const events = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
// fetch what labels to look for from widget attributes
|
||||
// event notes (start/end)
|
||||
const event_note_label_start = parentNote.getLabelValue('event_label_start').toString();
|
||||
const event_note_label_end = parentNote.getLabelValue('event_label_end').toString();
|
||||
// agent notes (birth/death)
|
||||
const person_note_label_start = parentNote.getLabelValue('person_label_start').toString();
|
||||
const person_note_label_end = parentNote.getLabelValue('person_label_end').toString();
|
||||
// date types (categories)
|
||||
const event_label_type = parentNote.getLabelValue('event_label_type').toString();
|
||||
|
||||
// fetch notes with those labels
|
||||
const event_notes = api.getNotesWithLabel(event_note_label_start);
|
||||
const person_notes_birth = api.getNotesWithLabel(person_note_label_start);
|
||||
const person_notes_death = api.getNotesWithLabel(person_note_label_end);
|
||||
const events = [];
|
||||
for (const note of event_notes) {
|
||||
const id = note.noteId;
|
||||
const content = note.title;
|
||||
const start = note.getLabelValue(event_note_label_start);
|
||||
const end = note.getLabelValue(event_note_label_end);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (content && start) {
|
||||
events.push({ id, content, start, end, group });
|
||||
}
|
||||
}
|
||||
}
|
||||
// make a 'birth' event for each person note with start date
|
||||
for (const note of person_notes_birth) {
|
||||
const id = note.noteId;
|
||||
const start = note.getLabelValue(person_note_label_start);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (start) {
|
||||
const content = note.title + ' (Birth)';
|
||||
events.push({ id, content, start, group });
|
||||
// make a 'birth' event for each person note with start date
|
||||
for (const note of person_notes_birth) {
|
||||
const id = note.noteId;
|
||||
const start = note.getLabelValue(person_note_label_start);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (start) {
|
||||
const content = note.title + ' (Birth)';
|
||||
events.push({ id, content, start, group });
|
||||
}
|
||||
}
|
||||
}
|
||||
// make a 'death' event for each person note with end date
|
||||
for (const note of person_notes_death) {
|
||||
const id = note.noteId;
|
||||
const start = note.getLabelValue(person_note_label_end);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (start) {
|
||||
const content = note.title + ' (Death)';
|
||||
events.push({ id, content, start, group });
|
||||
// make a 'death' event for each person note with end date
|
||||
for (const note of person_notes_death) {
|
||||
const id = note.noteId;
|
||||
const start = note.getLabelValue(person_note_label_end);
|
||||
const group = note.getLabelValue(event_label_type) ? note.getLabelValue(event_label_type) : (
|
||||
parentNote.getLabelValue('event_type_default') ? parentNote.getLabelValue('event_type_default') : 'default');
|
||||
if (start) {
|
||||
const content = note.title + ' (Death)';
|
||||
events.push({ id, content, start, group });
|
||||
}
|
||||
}
|
||||
}
|
||||
return events;
|
||||
});
|
||||
|
||||
// Get event types, make groups
|
||||
const types = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
const event_type_list = parentNote.getLabelValue('event_type_list').toString().split(';');
|
||||
const types = [];
|
||||
var i = 1;
|
||||
for (const type of event_type_list) {
|
||||
// type format each type seperated by ;
|
||||
// id(string), order(int), label(string), color(string), visible(bool), type(string), forceGroup(int)
|
||||
types.push({
|
||||
id: type.split(',')[0].toString(),
|
||||
order: type.split(',')[1] ? (parseInt(type.split(',')[1],10)) : i,
|
||||
content: type.split(',')[2] ? (type.split(',')[2].toString()) : type.split(',')[0].toString(),
|
||||
color: type.split(',')[3] ? (type.split(',')[3].toString()) : null,
|
||||
visible: type.split(',')[4] ? (type.split(',')[4] === 'true') : true,
|
||||
type: type.split(',')[5] ? type.split(',')[5].toString() : null,
|
||||
forceGroup: type.split(',')[6] ? (type.split(',')[6].toString()) : null,
|
||||
});
|
||||
i++;
|
||||
}
|
||||
return types
|
||||
});
|
||||
|
||||
// merge the default group with attribute-added groups
|
||||
var groups = new vis.DataSet([
|
||||
{id:'default', order: 100, content:'', color:'white', visible:true, type:null, forceGroup:null},
|
||||
...types,
|
||||
]);
|
||||
|
||||
// Create a DataSet for all event items
|
||||
var items = new vis.DataSet();
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
// get date values and note link
|
||||
var note_id = events[i].id;
|
||||
var note_link = await api.createNoteLink(note_id);
|
||||
var event_content = events[i].content;
|
||||
note_link[0].firstChild.innerText = event_content;
|
||||
var event_start = vis.moment(events[i].start);
|
||||
var event_end = events[i].end ? vis.moment(events[i].end) : null;
|
||||
// set event group
|
||||
var event_group = events[i].group
|
||||
? (groups.get({filter: function (item) { return (item.id === events[i].group) }})[0]
|
||||
? groups.get({filter: function (item) { return (item.id === events[i].group) }})[0]
|
||||
: groups.get({filter: function (item) { return (item.id === 'default') }})[0])
|
||||
: groups.get({filter: function (item) { return (item.id === 'default') }})[0];
|
||||
// fill event data
|
||||
items.add({
|
||||
id: i,
|
||||
content: note_link[0].firstChild,
|
||||
start: event_start,
|
||||
end: event_end,
|
||||
group: event_group.forceGroup ? event_group.forceGroup : event_group.id,
|
||||
type: (event_group.type=='box' || event_group.type=='point' || event_group.type=='range' || event_group.type=='background') ? event_group.type : null,
|
||||
className: event_group.id,
|
||||
style: `background-color:${event_group.color};border-color:${event_group.color};`,
|
||||
return events;
|
||||
});
|
||||
}
|
||||
console.log(items);
|
||||
|
||||
// Timeline options
|
||||
const timeline_options = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
const timeline_start = parentNote.getLabelValue('timeline_start');
|
||||
const timeline_end = parentNote.getLabelValue('timeline_end');
|
||||
const timeline_present = parentNote.getLabelValue('timeline_present');
|
||||
return {timeline_start, timeline_end, timeline_present};
|
||||
});
|
||||
var options = {
|
||||
clickToUse: false,
|
||||
showCurrentTime: true,
|
||||
height: '95%',
|
||||
start: timeline_options.timeline_start,
|
||||
end: timeline_options.timeline_end,
|
||||
};
|
||||
// Get event types, make groups
|
||||
const types = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
const event_type_list = parentNote.getLabelValue('event_type_list').toString().split(';');
|
||||
const types = [];
|
||||
var i = 1;
|
||||
for (const type of event_type_list) {
|
||||
// type format each type seperated by ;
|
||||
// id(string), order(int), label(string), color(string), visible(bool), type(string), forceGroup(int)
|
||||
types.push({
|
||||
id: type.split(',')[0].toString(),
|
||||
order: type.split(',')[1] ? (parseInt(type.split(',')[1],10)) : i,
|
||||
content: type.split(',')[2] ? (type.split(',')[2].toString()) : type.split(',')[0].toString(),
|
||||
color: type.split(',')[3] ? (type.split(',')[3].toString()) : null,
|
||||
visible: type.split(',')[4] ? (type.split(',')[4] === 'true') : true,
|
||||
type: type.split(',')[5] ? type.split(',')[5].toString() : null,
|
||||
forceGroup: type.split(',')[6] ? (type.split(',')[6].toString()) : null
|
||||
});
|
||||
i++;
|
||||
}
|
||||
return types
|
||||
});
|
||||
|
||||
// Set timeline wrapper height
|
||||
container.parentNode.style.height = '100%';
|
||||
// Fix timeline display
|
||||
container.parentNode.parentNode.parentNode.parentNode.style.display = 'initial';
|
||||
// Create Timeline
|
||||
var timeline = new vis.Timeline(container, items, groups, options);
|
||||
// Add present time marker based on "timeline_present" label
|
||||
timeline.setCurrentTime(timeline_options.timeline_present);
|
||||
// merge the default group with attribute-added groups
|
||||
var groups = new vis.DataSet([
|
||||
{id:'default', order: 100, content:'', color:'white', visible:true, type:null, forceGroup:null},
|
||||
...types
|
||||
]);
|
||||
|
||||
// Create UI menu buttons from added groups (that are not forced into another group)
|
||||
menu.innerHTML = '';
|
||||
const toggle_groups = groups.get({filter:function(item){return(item.forceGroup===null && item.id!=='default')}});
|
||||
for (const group of toggle_groups) {
|
||||
var button = document.createElement('input');
|
||||
button.type = 'button';
|
||||
button.id = `toggle-${group.id}`;
|
||||
button.value = group.content;
|
||||
button.className = (group.visible===true) ? 'toggled' : '';
|
||||
menu.appendChild(button);
|
||||
}
|
||||
// Create a DataSet for all event items
|
||||
var items = new vis.DataSet();
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
// get date values and note link
|
||||
var note_id = events[i].id;
|
||||
var note_link = await api.createNoteLink(note_id);
|
||||
var event_content = events[i].content;
|
||||
note_link[0].firstChild.innerText = event_content;
|
||||
var event_start = vis.moment(events[i].start, 'YYYY-MM-DD-hh:mm:ss');
|
||||
var event_end = events[i].end ? vis.moment(events[i].end, 'YYYY-MM-DD-hh:mm:ss') : null;
|
||||
// set event group
|
||||
var event_group = events[i].group
|
||||
? (groups.get({filter: function (item) { return (item.id === events[i].group) }})[0]
|
||||
? groups.get({filter: function (item) { return (item.id === events[i].group) }})[0]
|
||||
: groups.get({filter: function (item) { return (item.id === 'default') }})[0])
|
||||
: groups.get({filter: function (item) { return (item.id === 'default') }})[0];
|
||||
// fill event data
|
||||
items.add({
|
||||
id: i,
|
||||
content: note_link[0].firstChild,
|
||||
start: event_start,
|
||||
end: event_end,
|
||||
group: event_group.forceGroup ? event_group.forceGroup : event_group.id,
|
||||
type: (event_group.type=='box' || event_group.type=='point' || event_group.type=='range' || event_group.type=='background') ? event_group.type : null,
|
||||
className: event_group.id,
|
||||
style: `background-color:${event_group.color};border-color:${event_group.color};`
|
||||
});
|
||||
}
|
||||
|
||||
// Bind toggle buttons
|
||||
for (const group of toggle_groups) {
|
||||
document.getElementById(`toggle-${group.id}`).onclick = function(){
|
||||
toggleGroupVisibility(group.id);
|
||||
// Timeline options
|
||||
const timeline_options = await api.runOnServer(() => {
|
||||
const parentNote = api.startNote.getParentNotes()[0];
|
||||
const timeline_start = parentNote.getLabelValue('timeline_start');
|
||||
const timeline_end = parentNote.getLabelValue('timeline_end');
|
||||
const timeline_present = parentNote.getLabelValue('timeline_present');
|
||||
return {timeline_start, timeline_end, timeline_present};
|
||||
});
|
||||
var options = {
|
||||
clickToUse: false,
|
||||
showCurrentTime: true,
|
||||
height: '95%',
|
||||
start: timeline_options.timeline_start,
|
||||
end: timeline_options.timeline_end
|
||||
};
|
||||
|
||||
// Set timeline wrapper height
|
||||
container.parentNode.style.height = '100%';
|
||||
// Fix timeline display
|
||||
container.parentNode.parentNode.parentNode.parentNode.style.display = 'initial';
|
||||
// Create Timeline
|
||||
var timeline = new vis.Timeline(container, items, groups, options);
|
||||
// Add present time marker based on "timeline_present" label
|
||||
timeline.setCurrentTime(timeline_options.timeline_present);
|
||||
|
||||
// Create UI menu buttons from added groups (that are not forced into another group)
|
||||
menu.innerHTML = '';
|
||||
const toggle_groups = groups.get({filter:function(item){return(item.forceGroup===null && item.id!=='default')}});
|
||||
for (const group of toggle_groups) {
|
||||
var button = document.createElement('input');
|
||||
button.type = 'button';
|
||||
button.id = `toggle-${group.id}`;
|
||||
button.value = group.content;
|
||||
button.className = (group.visible===true) ? 'toggled' : '';
|
||||
menu.appendChild(button);
|
||||
}
|
||||
|
||||
// Bind toggle buttons
|
||||
for (const group of toggle_groups) {
|
||||
document.getElementById(`toggle-${group.id}`).onclick = function(){
|
||||
toggleGroupVisibility(group.id);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to toggle group visibility
|
||||
function toggleGroupVisibility(group_id){
|
||||
var visibility = groups.get({filter:function(item){return(item.id==group_id)}})[0].visible;
|
||||
groups.update({id: group_id, visible: !visibility});
|
||||
console.log(document.getElementById(`toggle-${group_id}`));
|
||||
document.getElementById(`toggle-${group_id}`).className = (!visibility===true) ? 'toggled' : '';
|
||||
timeline.setGroups(groups);
|
||||
timeline.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
// Function to toggle group visibility
|
||||
function toggleGroupVisibility(group_id){
|
||||
var visibility = groups.get({filter:function(item){return(item.id==group_id)}})[0].visible;
|
||||
groups.update({id: group_id, visible: !visibility});
|
||||
console.log(document.getElementById(`toggle-${group_id}`));
|
||||
document.getElementById(`toggle-${group_id}`).className = (!visibility===true) ? 'toggled' : '';
|
||||
timeline.setGroups(groups);
|
||||
timeline.redraw();
|
||||
}
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
<body class="ck-content">
|
||||
<h1>This event is in a seperate group then inserted into "Third"</h1>
|
||||
|
||||
<h2>This event is in a seperate group then inserted into "Third"</h2>
|
||||
|
||||
<p>This event has the “event_start” label attribute which is defined in the
|
||||
widget as the tag marking events to be fetched.</p>
|
||||
<p>This event has the “event_type” label of value “forcedInto”, sorting it
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
<body class="ck-content">
|
||||
<h1>This is a background event then inserted into "Second"</h1>
|
||||
|
||||
<h2>This is a background event then inserted into "Second"</h2>
|
||||
|
||||
<p>This event has the “event_start” label attribute which is defined in the
|
||||
widget as the tag marking events to be fetched.</p>
|
||||
<p>This event has the “event_end” label attribute which, combined with “event_start”,
|
||||
|
||||
195
style.css
195
style.css
@ -4,15 +4,13 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* CKEditor 5 (v27.1.0) content styles.
|
||||
* Generated on Wed, 21 Apr 2021 07:00:21 GMT.
|
||||
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ck-color-image-caption-background: hsl(0, 0%, 97%);
|
||||
--ck-color-image-caption-text: hsl(0, 0%, 20%);
|
||||
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
|
||||
--ck-color-mention-text: hsl(341, 100%, 30%);
|
||||
--ck-color-table-caption-background: hsl(0, 0%, 97%);
|
||||
--ck-color-table-caption-text: hsl(0, 0%, 20%);
|
||||
--ck-highlight-marker-blue: hsl(201, 97%, 72%);
|
||||
--ck-highlight-marker-green: hsl(120, 93%, 68%);
|
||||
--ck-highlight-marker-pink: hsl(345, 96%, 73%);
|
||||
@ -20,6 +18,7 @@
|
||||
--ck-highlight-pen-green: hsl(112, 100%, 27%);
|
||||
--ck-highlight-pen-red: hsl(0, 85%, 49%);
|
||||
--ck-image-style-spacing: 1.5em;
|
||||
--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
|
||||
--ck-todo-list-checkmark-size: 16px;
|
||||
}
|
||||
|
||||
@ -66,6 +65,16 @@
|
||||
font-size: 1.8em;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-block-align-left,
|
||||
.ck-content .image-style-block-align-right {
|
||||
max-width: calc(100% - var(--ck-image-style-spacing));
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-align-left,
|
||||
.ck-content .image-style-align-right {
|
||||
clear: none;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-side {
|
||||
float: right;
|
||||
margin-left: var(--ck-image-style-spacing);
|
||||
@ -86,6 +95,98 @@
|
||||
float: right;
|
||||
margin-left: var(--ck-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-block-align-right {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-style-block-align-left {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content p + .image-style-align-left,
|
||||
.ck-content p + .image-style-align-right,
|
||||
.ck-content p + .image-style-side {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-inline.image-style-align-left,
|
||||
.ck-content .image-inline.image-style-align-right {
|
||||
margin-top: var(--ck-inline-image-style-spacing);
|
||||
margin-bottom: var(--ck-inline-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-inline.image-style-align-left {
|
||||
margin-right: var(--ck-inline-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagestyle.css */
|
||||
.ck-content .image-inline.image-style-align-right {
|
||||
margin-left: var(--ck-inline-image-style-spacing);
|
||||
}
|
||||
/* ckeditor5-image/theme/imagecaption.css */
|
||||
.ck-content .image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
word-break: break-word;
|
||||
color: var(--ck-color-image-caption-text);
|
||||
background-color: var(--ck-color-image-caption-background);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image {
|
||||
display: table;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 0.9em auto;
|
||||
min-width: 50px;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image-inline {
|
||||
/*
|
||||
* Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
|
||||
* Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
|
||||
* This strange behavior does not happen with inline-flex.
|
||||
*/
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image-inline picture {
|
||||
display: flex;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image-inline picture,
|
||||
.ck-content .image-inline img {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized img {
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized > figcaption {
|
||||
display: block;
|
||||
}
|
||||
/* ckeditor5-code-block/theme/codeblock.css */
|
||||
.ck-content pre {
|
||||
padding: 1em;
|
||||
@ -106,12 +207,6 @@
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* ckeditor5-html-embed/theme/htmlembed.css */
|
||||
.ck-content .raw-html-embed {
|
||||
margin: 1em auto;
|
||||
min-width: 15em;
|
||||
font-style: normal;
|
||||
}
|
||||
/* ckeditor5-horizontal-line/theme/horizontalline.css */
|
||||
.ck-content hr {
|
||||
margin: 15px 0;
|
||||
@ -119,55 +214,6 @@
|
||||
background: hsl(0, 0%, 87%);
|
||||
border: 0;
|
||||
}
|
||||
/* ckeditor5-image/theme/imagecaption.css */
|
||||
.ck-content .image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
word-break: break-word;
|
||||
color: hsl(0, 0%, 20%);
|
||||
background-color: hsl(0, 0%, 97%);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized img {
|
||||
width: 100%;
|
||||
}
|
||||
/* ckeditor5-image/theme/imageresize.css */
|
||||
.ck-content .image.image_resized > figcaption {
|
||||
display: block;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image {
|
||||
display: table;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
margin: 1em auto;
|
||||
}
|
||||
/* ckeditor5-image/theme/image.css */
|
||||
.ck-content .image img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
min-width: 50px;
|
||||
}
|
||||
/* ckeditor5-language/theme/language.css */
|
||||
.ck-content span[lang] {
|
||||
font-style: italic;
|
||||
}
|
||||
/* ckeditor5-basic-styles/theme/code.css */
|
||||
.ck-content code {
|
||||
background-color: hsla(0, 0%, 78%, 0.3);
|
||||
padding: .15em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* ckeditor5-block-quote/theme/blockquote.css */
|
||||
.ck-content blockquote {
|
||||
overflow: hidden;
|
||||
@ -183,9 +229,15 @@
|
||||
border-left: 0;
|
||||
border-right: solid 5px hsl(0, 0%, 80%);
|
||||
}
|
||||
/* ckeditor5-basic-styles/theme/code.css */
|
||||
.ck-content code {
|
||||
background-color: hsla(0, 0%, 78%, 0.3);
|
||||
padding: .15em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
.ck-content .table {
|
||||
margin: 1em auto;
|
||||
margin: 0.9em auto;
|
||||
display: table;
|
||||
}
|
||||
/* ckeditor5-table/theme/table.css */
|
||||
@ -216,6 +268,18 @@
|
||||
.ck-content[dir="ltr"] .table th {
|
||||
text-align: left;
|
||||
}
|
||||
/* ckeditor5-table/theme/tablecaption.css */
|
||||
.ck-content .table > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: top;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
color: var(--ck-color-table-caption-text);
|
||||
background-color: var(--ck-color-table-caption-background);
|
||||
padding: .6em;
|
||||
font-size: .75em;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
/* ckeditor5-page-break/theme/pagebreak.css */
|
||||
.ck-content .page-break {
|
||||
position: relative;
|
||||
@ -255,7 +319,7 @@
|
||||
/* ckeditor5-media-embed/theme/mediaembed.css */
|
||||
.ck-content .media {
|
||||
clear: both;
|
||||
margin: 1em 0;
|
||||
margin: 0.9em 0;
|
||||
display: block;
|
||||
min-width: 15em;
|
||||
}
|
||||
@ -326,6 +390,10 @@
|
||||
.ck-content .todo-list .todo-list__label .todo-list__label__description {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* ckeditor5-language/theme/language.css */
|
||||
.ck-content span[lang] {
|
||||
font-style: italic;
|
||||
}
|
||||
/* ckeditor5-mention/theme/mention.css */
|
||||
.ck-content .mention {
|
||||
background: var(--ck-color-mention-background);
|
||||
@ -341,3 +409,4 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user