diff --git a/!!!meta.json b/!!!meta.json
index c1aa68a..881d394 100644
--- a/!!!meta.json
+++ b/!!!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": [
diff --git a/Timeline Widget Import.zip b/Timeline Widget Import.zip
index c2240b8..f316bfd 100644
Binary files a/Timeline Widget Import.zip and b/Timeline Widget Import.zip differ
diff --git a/Timeline Widget/1_render.html/script.js b/Timeline Widget/1_render.html/script.js
index 3305713..5d8b440 100644
--- a/Timeline Widget/1_render.html/script.js
+++ b/Timeline Widget/1_render.html/script.js
@@ -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();
-}
diff --git a/Timeline Widget/EXAMPLES/This event is in a seperate gr.html b/Timeline Widget/EXAMPLES/This event is in a seperate gr.html
index e4b3a38..68ba5a4 100644
--- a/Timeline Widget/EXAMPLES/This event is in a seperate gr.html
+++ b/Timeline Widget/EXAMPLES/This event is in a seperate gr.html
@@ -10,6 +10,8 @@
This event is in a seperate group then inserted into "Third"
+ This event is in a seperate group then inserted into "Third"
+
This event has the “event_start” label attribute which is defined in the
widget as the tag marking events to be fetched.
This event has the “event_type” label of value “forcedInto”, sorting it
diff --git a/Timeline Widget/EXAMPLES/This is a background event the.html b/Timeline Widget/EXAMPLES/This is a background event the.html
index 849cbe1..370523e 100644
--- a/Timeline Widget/EXAMPLES/This is a background event the.html
+++ b/Timeline Widget/EXAMPLES/This is a background event the.html
@@ -10,6 +10,8 @@
This is a background event then inserted into "Second"
+ This is a background event then inserted into "Second"
+
This event has the “event_start” label attribute which is defined in the
widget as the tag marking events to be fetched.
This event has the “event_end” label attribute which, combined with “event_start”,
diff --git a/style.css b/style.css
index f3322ec..9bb2842 100644
--- a/style.css
+++ b/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;
}
}
+