Skip to Content

Changes for page Nice Display

Last modified by Benjamin Fischer on 2025/03/26 13:19
From version 43.1
edited by Benjamin Fischer
on 2025/03/24 15:42
Change comment: Deleted attachment "people_in_erum_final.mp4"
To version 44.8
edited by Benjamin Fischer
on 2025/03/25 17:43
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Industry meets ErUM-Data
1 +Nice Display
Parent
... ... @@ -1,1 +1,1 @@
1 -Main.WebHome
1 +Research Groups.WebHome
Content
... ... @@ -41,14 +41,17 @@
41 41  === Add entry ===
42 42  
43 43  1. click {{html}}<button class="btn"><i class="fa fa-plus"/>Create</button>{{/html}} (top right)
44 -1. fill in the Title in the top left (must be unique), then click {{html}}<button class="btn btn-primary">Create</button>{{/html}} (bottom left)
45 -1. fill out the form, then click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
46 -1. click on the [+] behind "Tags" too add tags.
44 +1. fill in the Title in the top left (must be unique)
45 +1. click {{html}}<button class="btn btn-primary">Create</button>{{/html}} (bottom left)
46 +1. fill out the form
47 +1. click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
48 +1. add tags (bottom left): click on the [+] behind: "Tags:"
47 47  
48 48  === Modfiy entry ===
49 49  
50 50  1. click on {{icon name="pencil"/}} Edit
51 -1. update the form, then click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
52 -1. update the Tags at the bottom, if necessary
53 +1. update the form
54 +1. click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
55 +1. update the Tags (bottom left)
53 53  
54 54  === Demo Video - Coming Soon ===
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,87 +1,88 @@
1 -const tabName = "research_groups";
2 -const tagCols = [
3 - ["Tags", true],
4 -]
1 +/*!
2 +#set( $ntrg_tabCols = [["Tags", true]] )
3 +#set( $ntrg_tabCols = "research_groups" )
4 +#[[*/
5 +((tabCols = [["Tags", true]], tabName = "research_groups") => {
5 5  
6 -document.observe('xwiki:livetable:loading', () => {
7 - const mats = document.getElementById(tabName);
7 + document.observe('xwiki:livetable:loading', () => {
8 + const mats = document.getElementById(tabName);
9 + if (!mats) return;
8 8  
9 - // coulmn data sources
10 - const conf = JSON.parse(mats.dataset.settings);
11 - tagCols.forEach(([name], i) => {
12 - const cn = `tags-${i}`;
13 - conf.columns.splice(conf.columns.indexOf("tags"), 1, cn);
14 - conf.columnDescriptors[cn] = {
15 - displayName: name,
16 - headerClass: "tagsCol",
17 - html: true,
18 - sortable: false,
19 - };
20 - });
21 - mats.dataset.settings = JSON.stringify(conf);
11 + // coulmn data sources
12 + const conf = JSON.parse(mats.dataset.settings);
13 + tagCols.forEach(([name], i) => {
14 + const cn = `tags-${i}`;
15 + conf.columns.splice(conf.columns.indexOf("tags"), 1, cn);
16 + conf.columnDescriptors[cn] = {
17 + displayName: name,
18 + headerClass: "tagsCol",
19 + html: true,
20 + sortable: false,
21 + };
22 + });
23 + mats.dataset.settings = JSON.stringify(conf);
22 22  
23 - // column headers
24 - mats.querySelectorAll(".xwiki-livetable-display-header .tagsCol").forEach(
25 - (v, i) => v.textContent = tagCols[i][0]
26 - );
25 + // column headers
26 + mats.querySelectorAll(".xwiki-livetable-display-header .tagsCol").forEach(
27 + (v, i) => v.textContent = tagCols[i][0]
28 + );
27 27  
28 - // handle clicks for tags
29 - document.getElementById(`${tabName}-display`).addEventListener("click", ev => {
30 - if (ev.button) return; // only left click
31 - if (ev.target.nodeName !== "SPAN") return;
32 - if (!ev.target.classList.contains("ltTag")) return;
33 - const tag = ev.target.textContent;
34 - ev.preventDefault();
35 - const lt = mats.__liveTable;
36 - const st = lt.tagCloud.selectedTags;
37 - if (tag in st) delete st[tag];
38 - else st[tag] = {};
39 - lt.tags = Object.keys(st);
40 - lt.clearCache();
41 - lt.showRows(1, lt.limit);
42 - })
43 -});
30 + // handle clicks for tags
31 + document.getElementById(`${tabName}-display`).addEventListener("click", ev => {
32 + if (ev.button) return; // only left click
33 + if (ev.target.nodeName !== "SPAN") return;
34 + if (!ev.target.classList.contains("ltTag")) return;
35 + const tag = ev.target.textContent;
36 + ev.preventDefault();
37 + const lt = mats.__liveTable;
38 + const st = lt.tagCloud.selectedTags;
39 + if (tag in st) delete st[tag];
40 + else st[tag] = {};
41 + lt.tags = Object.keys(st);
42 + lt.clearCache();
43 + lt.showRows(1, lt.limit);
44 + })
45 + });
44 44  
45 -document.observe(`xwiki:livetable:${tabName}:receivedEntries`, ({memo: {data}}) => {
46 - for (const row of data.rows) {
47 - const a = new Element("a", { href: row.URL });
48 - a.innerHTML = row.affiliation_value.split("\n").map((a, i) => i ? a : `<b class="wikiexternallink">${a}</b>`).join("<br/>");
49 - a.title = row.doc_title;
50 - if (row.content !== "-") {
51 - a.dataset.content = row.content;
52 - a.dataset.toggle = "popover";
53 - }
47 + document.observe(`xwiki:livetable:${tabName}:receivedEntries`, ({memo: {data}}) => {
48 + for (const row of data.rows) {
49 + const a = new Element("a", { href: row.URL });
50 + a.innerHTML = row.affiliation_value.split("\n").map((a, i) => i ? a : `<b class="wikiexternallink">${a}</b>`).join("<br/>");
51 + a.title = row.doc_title;
52 + if (row.content !== "-") {
53 + a.dataset.content = row.content;
54 + a.dataset.toggle = "popover";
55 + }
54 54  
55 - row.affiliation = a.outerHTML;
57 + row.affiliation = a.outerHTML;
56 56  
57 - row.doc_date = row.doc_date.split(" ")[0].split("/").slice(0, 2).join("/");
59 + row.doc_date = row.doc_date.split(" ")[0].split("/").slice(0, 2).join("/");
58 58  
59 - // tags
60 - const tags = new Set(row.tags_value.slice(1, -1).split(", "));
61 - tagCols.forEach(([name, ...want], i) =>
62 - row[`tags-${i}`] = (
63 - want[0] === true
64 - ? Array.from(tags)
65 - : want.filter(tag => tags.delete(tag))
66 - ).sort().map(tag => `<span class="ltTag" style="cursor:pointer;">${tag}</span>`).join(", ")
67 - );
68 - }
69 -});
61 + // tags
62 + const tags = new Set(row.tags_value.slice(1, -1).split(", "));
63 + tagCols.forEach(([name, ...want], i) =>
64 + row[`tags-${i}`] = (
65 + want[0] === true
66 + ? Array.from(tags)
67 + : want.filter(tag => tags.delete(tag))
68 + ).sort().map(tag => `<span class="ltTag" style="cursor:pointer;">${tag}</span>`).join(", ")
69 + );
70 + }
71 + });
70 70  
71 -require(['jquery', 'bootstrap'], function($) {
72 - document.styleSheets[0].insertRule(`#mainContentArea .popover {max-width: 50%;}`)
73 + require(['jquery', 'bootstrap'], function($) {
74 + document.styleSheets[0].insertRule(`#mainContentArea .popover {max-width: 50%;}`);
73 73  
74 - const ttApply = () => {
75 - $(`#${tabName} [data-toggle="popover"]`).popover({
76 - html: true,
77 - container: `#mainContentArea`,
78 - trigger: "hover",
79 - });
80 - };
76 + const ttApply = () => {
77 + $(`#${tabName} [data-toggle="popover"]`).popover({
78 + html: true,
79 + container: `#mainContentArea`,
80 + trigger: "hover",
81 + });
82 + };
81 81  
82 - document.observe(`xwiki:livetable:${tabName}:displayComplete`, ttApply);
83 - ttApply();
84 -});
85 -
86 -
87 -
84 + document.observe(`xwiki:livetable:${tabName}:displayComplete`, ttApply);
85 + ttApply();
86 + });
87 +/* ]]# */
88 +})($jsontool.serialize($ntrg_tabCols), $jsontool.serialize($ntrg_tabName));
Name
... ... @@ -1,1 +1,1 @@
1 -Live Table - Research Groups
1 +Nice Table - Research Groups
Parse content
... ... @@ -1,1 +1,1 @@
1 -No
1 +Yes