Changes for page Nice Display

Summary

• Page properties (3 modified, 0 added, 0 removed)
• Attachments (0 modified, 0 added, 1 removed)
  • people_in_erum_final.mp4
• Objects (1 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]

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

...	...	@@ -1,22 +1,17 @@
1		-(% class="box infomessage" %)
2		-(((
3		-[[{{icon name="question-circle"}}{{/icon}}>>attach:people_in_erum_final.mp4]] With this collection we want to provide an overview of of various research groups and people in ErUM (data).
	1	+{{locationSearch width="100%;clear:both;" className="Research Groups.Code.Research GroupsClass" description="Search, including in excerpts."/}}
4	4
5		-==== The list thrives on being filled. If you want to be subscribed or unsubscribed from this list please contact [[judith.steinfeld@erumdatahub.de>>mailto:judith.steinfeld@erumdatahub.de]].
6		- ====
7		-
8		-==== **Feel free to add or modify your workinggroup yourself. For help, see this [[video>>attach:people_in_erum_final.mp4]].** ====
9		-)))
10		-
11		-{{locationSearch width="100%" className="Research Groups.Code.Research GroupsClass" description="Search, including in excerpts."/}}
12		-
13	13	{{velocity}}
	4	+#if ( $ntrg_tagCols == $null )
	5	+#set( $ntrg_tagCols = [["Tags", true]] )
	6	+#end
	7	+#set ($discard = $xwiki.jsx.use('Research Groups.Nice Display.WebHome'))
	8	+
14	14	#set ($columnsProperties = {
15	15	'affiliation': {"filterable":true, "sortable":true, "html":true},
16	16	'URL': {"type": "hidden"},
17	17	"content": {"type": "hidden"},
18	18	"coop": {},
19		- "tags": {"sortable": false, "filterable": false, "html": true, "headerClass": "tagsCol"},
	14	+ "tags": {"sortable": false, "filterable": false, "html": true, "headerClass": "tagsCol", "aux": $ntrg_tagCols},
20	20	"doc.date": {"filterable": false, "displayName": "Last Updated"},
21	21	'_actions': {"actions":["view","edit"]}
22	22	})
...	...	@@ -23,7 +23,7 @@
23	23	#set ($options = {
24	24	'className': 'Research Groups.Code.Research GroupsClass',
25	25	'translationPrefix': 'research groups.livetable.',
26		- 'extraParams': '&location=Industry%20meets%20ErUM-Data',
	21	+ 'extraParams': "&location=${escapetool.url($doc.getSpace())}",
27	27	'tagCloud': true,
28	28	'rowCount': 25,
29	29	'maxPages': 10,
...	...	@@ -30,6 +30,32 @@
30	30	'selectedColumn': 'doc.date',
31	31	'defaultOrder': 'desc'
32	32	})
33		-#set ($columns = ['affiliation', 'URL', "content", "tags", "coop", "doc.date", '_actions'])
34		-#livetable('research_groups' $columns $columnsProperties $options)
	28	+#set ($columns = ['affiliation', 'URL', "content", "coop", "doc.date", '_actions'])
	29	+#foreach ($ntrg_tagCol in $ntrg_tagCols)
	30	+#set ($discard = $columns.add(3, "tags"))
	31	+#end
	32	+#livetable("research_groups" $columns $columnsProperties $options)
35	35	{{/velocity}}
	34	+
	35	+(% id="howto" %)
	36	+== How-To Add/Update Entries ==
	37	+
	38	+You need to be logged in to perform any modifications.
	39	+
	40	+=== Add entry ===
	41	+
	42	+1. click {{html}}<button class="btn"><i class="fa fa-plus"/>Create</button>{{/html}} (top right)
	43	+1. fill in the Title in the top left (must be unique)
	44	+1. click {{html}}<button class="btn btn-primary">Create</button>{{/html}} (bottom left)
	45	+1. fill out the form
	46	+1. click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
	47	+1. add tags (bottom left): click on the [+] behind: "Tags:"
	48	+
	49	+=== Modfiy entry ===
	50	+
	51	+1. click on {{icon name="pencil"/}} Edit
	52	+1. update the form
	53	+1. click {{html}}<button class="btn btn-primary">Save & View</button>{{/html}} (bottom left)
	54	+1. update the Tags (bottom left)
	55	+
	56	+=== Demo Video - Coming Soon ===

people_in_erum_final.mp4

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.fischer

Size

...	...	@@ -1,1 +1,0 @@
1		-1.8 MB

Content

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -1,87 +1,89 @@
1		-const tabName = "research_groups";
2		-const tagCols = [
3		- ["Tags", true],
4		-]
	1	+(()=>{
	2	+ const tagCols = [
	3	+ ["Community", "KAT", "KET", "KfB", "KFN", "KFS", "KFSI", "KHuK", "RDS", "beyond ErUM"],
	4	+ ["Experiment", "CMS", "ATLAS", "Belle2", "CTA", "Pierre Auger Observatory", "SKA", "IceCube", "KATRIN", "KASCADE", "GREGOR", "STELLA", "LOFAR", "LHCb", "LHC", "PETRA III", "PETRA IV", "PANDA", "Gaia", "Euclid", "BESSY II", "ANTARES", "H.E.S.S.", "KM3NeT", "FLASH", "Einstein Telescope"],
	5	+ ["Tags", true],
	6	+ ];
	7	+ const tabName = "research_groups";
5	5
6		-document.observe('xwiki:livetable:loading', () => {
7		- const mats = document.getElementById(tabName);
	9	+ document.observe('xwiki:livetable:loading', () => {
	10	+ const mats = document.getElementById(tabName);
	11	+ 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);
	13	+ // coulmn data sources
	14	+ const conf = JSON.parse(mats.dataset.settings);
	15	+ tagCols.forEach(([name], i) => {
	16	+ const cn = `tags-${i}`;
	17	+ conf.columns.splice(conf.columns.indexOf("tags"), 1, cn);
	18	+ conf.columnDescriptors[cn] = {
	19	+ displayName: name,
	20	+ headerClass: "tagsCol",
	21	+ html: true,
	22	+ sortable: false,
	23	+ };
	24	+ });
	25	+ 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		- );
	27	+ // column headers
	28	+ mats.querySelectorAll(".xwiki-livetable-display-header .tagsCol").forEach(
	29	+ (v, i) => v.textContent = tagCols[i][0]
	30	+ );
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		-});
	32	+ // handle clicks for tags
	33	+ document.getElementById(`${tabName}-display`).addEventListener("click", ev => {
	34	+ if (ev.button) return; // only left click
	35	+ if (ev.target.nodeName !== "SPAN") return;
	36	+ if (!ev.target.classList.contains("ltTag")) return;
	37	+ const tag = ev.target.textContent;
	38	+ ev.preventDefault();
	39	+ const lt = mats.__liveTable;
	40	+ const st = lt.tagCloud.selectedTags;
	41	+ if (tag in st) delete st[tag];
	42	+ else st[tag] = {};
	43	+ lt.tags = Object.keys(st);
	44	+ lt.clearCache();
	45	+ lt.showRows(1, lt.limit);
	46	+ })
	47	+ });
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		- }
	49	+ document.observe(`xwiki:livetable:${tabName}:receivedEntries`, ({memo: {data}}) => {
	50	+ for (const row of data.rows) {
	51	+ const a = new Element("a", { href: row.URL });
	52	+ a.innerHTML = row.affiliation_value.split("\n").map((a, i) => i ? a : `<b class="wikiexternallink">${a}</b>`).join("<br/>");
	53	+ a.title = row.doc_title;
	54	+ if (row.content !== "-") {
	55	+ a.dataset.content = row.content;
	56	+ a.dataset.toggle = "popover";
	57	+ }
54	54
55		- row.affiliation = a.outerHTML;
	59	+ row.affiliation = a.outerHTML;
56	56
57		- row.doc_date = row.doc_date.split(" ")[0].split("/").slice(0, 2).join("/");
	61	+ 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		-});
	63	+ // tags
	64	+ const tags = new Set(row.tags_value.slice(1, -1).split(", "));
	65	+ tagCols.forEach(([name, ...want], i) =>
	66	+ row[`tags-${i}`] = (
	67	+ want[0] === true
	68	+ ? Array.from(tags)
	69	+ : want.filter(tag => tags.delete(tag))
	70	+ ).sort().map(tag => `<span class="ltTag" style="cursor:pointer;">${tag}</span>`).join(", ")
	71	+ );
	72	+ }
	73	+ });
70	70
71		-require(['jquery', 'bootstrap'], function($) {
72		- document.styleSheets[0].insertRule(`#mainContentArea .popover {max-width: 50%;}`)
	75	+ require(['jquery', 'bootstrap'], function($) {
	76	+ 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		- };
	78	+ const ttApply = () => {
	79	+ $(`#${tabName} [data-toggle="popover"]`).popover({
	80	+ html: true,
	81	+ container: `#mainContentArea`,
	82	+ trigger: "hover",
	83	+ });
	84	+ };
81	81
82		- document.observe(`xwiki:livetable:${tabName}:displayComplete`, ttApply);
83		- ttApply();
84		-});
85		-
86		-
87		-
	86	+ document.observe(`xwiki:livetable:${tabName}:displayComplete`, ttApply);
	87	+ ttApply();
	88	+ });
	89	+})();

Name

...	...	@@ -1,1 +1,1 @@
1		-Live Table - Research Groups
	1	+Nice Table - Research Groups

Use this extension

...	...	@@ -1,1 +1,1 @@
1		-currentPage
	1	+onDemand