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 2021-10-25 21:13:19 +02:00
parent c8a3807a9f
commit 3f5a562c5d
6 changed files with 395 additions and 320 deletions

View File

@ -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.

View File

@ -1,8 +1,10 @@
/** Version 1.0 **/
renderTimeline();
async function renderTimeline() {
// Initialize libraries and context
var vis = require('vis.min.js');
var moment = require('moment.min.js');
//var moment = require('moment.min.js');
var container = document.getElementById("timeline");
var menu = document.getElementById("menu");
@ -76,7 +78,7 @@ const types = await api.runOnServer(() => {
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,
forceGroup: type.split(',')[6] ? (type.split(',')[6].toString()) : null
});
i++;
}
@ -86,7 +88,7 @@ const types = await api.runOnServer(() => {
// 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,
...types
]);
// Create a DataSet for all event items
@ -97,8 +99,8 @@ for (var i = 0; i < events.length; i++) {
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;
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]
@ -114,10 +116,9 @@ for (var i = 0; i < events.length; i++) {
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};`,
style: `background-color:${event_group.color};border-color:${event_group.color};`
});
}
console.log(items);
// Timeline options
const timeline_options = await api.runOnServer(() => {
@ -132,7 +133,7 @@ var options = {
showCurrentTime: true,
height: '95%',
start: timeline_options.timeline_start,
end: timeline_options.timeline_end,
end: timeline_options.timeline_end
};
// Set timeline wrapper height
@ -172,3 +173,4 @@ function toggleGroupVisibility(group_id){
timeline.setGroups(groups);
timeline.redraw();
}
}

View File

@ -10,6 +10,8 @@
<body class="ck-content">
<h1>This event is in a seperate group then inserted into &quot;Third&quot;</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

View File

@ -10,6 +10,8 @@
<body class="ck-content">
<h1>This is a background event then inserted into &quot;Second&quot;</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
View File

@ -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;
}
}