Hello,
I’m making a custom dialog to create/edit my Confluence macro, but I have to inject HTML code inside Javascript to display an AUI Dialog2.
My current JS code:
function getDialogHTML() {
return " \
<!-- Create a trigger which will be used by the JavaScript --> \
<button id='dialog-show-button' class='aui-button'>Show dialog</button> \
\
<section id='dg-macro-dialog' class='aui-dialog2 aui-dialog2-small aui-layer' role='dialog' aria-hidden='true'> \
<header class='aui-dialog2-header'> \
<h2 class='aui-dialog2-header-main'>Captain...</h2> \
<a class='aui-dialog2-header-close'> \
<span class='aui-icon aui-icon-small aui-iconfont-close-dialog'>Close</span> \
</a> \
</header> \
<div class='aui-dialog2-content'> \
<p>We've detected debris of some sort in a loose orbit.</p> \
<p>I suggest we beam a section aboard for analysis...</p> \
</div> \
<footer class='aui-dialog2-footer'> \
<div class='aui-dialog2-footer-actions'> \
<button id='dialog-submit-button' class='aui-button aui-button-primary'>Make it so</button> \
</div> \
</footer> \
</section>"
}
AJS.MacroBrowser.setMacroJsOverride("dg-macro", {
opener: function (macro) {
$("body").append(getDialogHTML());
AJS.dialog2("#dg-macro-dialog").show();
tinymce.confluence.MacroUtils.insertMacro({
contentId: Confluence.Editor.getContentId(),
macro: {
name: "dg-macro",
params: {
search: "abcd",
placeholder: "efgh"
},
defaultParameterValue: "",
body: undefined
}
}, macro);
}
});
I think you understand that I can’t keep getDialogHTML()
like this, it’s definitely not maintainable.
Anyone knows a better solution?
Thanks in advance,
Quentin Bazin