I had the idea of trying out GPT for programming an XWiki macro.
Here is my first attempt with a surprisingly good, because working result:
My instruction was:
Write a macro for XWiki, after which the chapters of a document can be opened and closed with a click. Apart from the macro call itself, the document should not have to be customised. The colour and background of the heading should be changed when the document is collapsed. The mouse cursor should be “s-size” when the chapter is collapsed and “n-size” otherwise.
I got the following result and moved it into a working macro: (The layout is just from copy/paste unchanged!):
To create a macro for XWiki that makes the chapters of a document collapsible by clicking on them, changes the color and background of the heading when collapsed, and changes the mouse cursor to “s-size” when collapsed and “n-size” otherwise, follow these steps:
1. Create the Macro
Go to Wiki Administration > Content > Macros and create a new macro named CollapsibleChapters.
Macro Definition (CollapsibleChaptersMacro.xml)
<macro>
<id>collapsibleChapters</id>
<name>Collapsible Chapters</name>
<description>Makes chapters collapsible by clicking on them, changes the header color and background when collapsed, and changes the mouse cursor.</description>
<parameters>
<!-- No parameters needed for this macro -->
</parameters>
<content type="text/html">
<![CDATA[
{{velocity}}
#set ($discard = $xwiki.ssx.use('collapse.css'))
#set ($discard = $xwiki.jsx.use('collapse.js'))
{{/velocity}}
{{html clean="false"}}
<script>
document.addEventListener("DOMContentLoaded", function() {
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
headers.forEach(function(header) {
var content = header.nextElementSibling;
while (content && !content.tagName.match(/^H[1-6]$/i)) {
if (content.style) {
content.classList.add("collapsible-content");
}
content = content.nextElementSibling;
}
header.classList.add("collapsible-header");
header.addEventListener("click", function() {
var next = this.nextElementSibling;
var isCollapsed = false;
while (next && !next.tagName.match(/^H[1-6]$/i)) {
if (next.style) {
if (next.style.display === "none" || next.style.display === "") {
next.style.display = "block";
isCollapsed = false;
} else {
next.style.display = "none";
isCollapsed = true;
}
}
next = next.nextElementSibling;
}
if (isCollapsed) {
this.style.color = "white"; // Change to desired color when collapsed
this.style.backgroundColor = "black"; // Change to desired background color when collapsed
this.style.cursor = "s-resize"; // Change cursor to s-resize when collapsed
} else {
this.style.color = ""; // Reset to default color when expanded
this.style.backgroundColor = ""; // Reset to default background color when expanded
this.style.cursor = "n-resize"; // Change cursor to n-resize when expanded
}
});
});
});
</script>
{{/html}}
]]>
</content>
</macro>
2. Create the JavaScript and CSS Files
Upload the following files to your XWiki:
collapse.js
document.addEventListener("DOMContentLoaded", function() {
var headers = document.querySelectorAll(".collapsible-header");
headers.forEach(function(header) {
header.addEventListener("click", function() {
var content = this.nextElementSibling;
var isCollapsed = false;
while (content && !content.tagName.match(/^H[1-6]$/i)) {
if (content.style) {
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block";
isCollapsed = false;
} else {
content.style.display = "none";
isCollapsed = true;
}
}
content = content.nextElementSibling;
}
if (isCollapsed) {
this.style.color = "white"; // Change to desired color when collapsed
this.style.backgroundColor = "black"; // Change to desired background color when collapsed
this.style.cursor = "s-resize"; // Change cursor to s-resize when collapsed
} else {
this.style.color = ""; // Reset to default color when expanded
this.style.backgroundColor = ""; // Reset to default background color when expanded
this.style.cursor = "n-resize"; // Change cursor to n-resize when expanded
}
});
});
});
collapse.css
.collapsible-content {
display: none;
padding: 10px;
border: 1px solid #ccc;
margin-top: 5px;
}
.collapsible-header {
cursor: n-resize;
padding: 10px;
background-color: #f1f1f1;
border: 1px solid #ccc;
margin-top: 5px;
}
3. Use the Macro in Your Document
Insert the macro into your XWiki document:
{{collapsibleChapters/}}
Summary
By following these steps, you have created a macro that makes chapters in an XWiki document collapsible by clicking on them, changes the color and background of the heading when collapsed, and changes the mouse cursor to “s-resize” when collapsed and “n-resize” otherwise. The macro automatically includes the necessary JavaScript and CSS files and marks the chapters accordingly.
I am impressed.
Norbert