Hi All,
I have a Confluence Marketplace App that deploys to Server and Cloud. I want to introduce a feature that allows the user to toggle the application between fullscreen. In order to achieve that I want to show / hide the sidebar.
On the server version of the app I have been able to achieve this, per screenshots.
However, for Confluence Cloud when the ‘Full screen on’ AUI button is clicked and calls the relevant Sidebar JS (Sidebar 6.1) I get an error per below:
sidebar.js:143 Uncaught TypeError: Cannot read property 'addClass' of undefined
at tl._collapse (sidebar.js:143)
at tl.collapse (sidebar.js:156)
at HTMLButtonElement.<anonymous> (model-gen?page=33017&space=98305&....)
at HTMLButtonElement.dispatch (jquery-3.5.1.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.5.1.min.js:2)
The HTML injected by the Confluence Cloud App can be seen below:
<html lang="en">
<head>
<style>
.fullscreen-vp4c-att236880150 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
min-height: 100vh;
background: white;
opacity: 1;
z-index: 1;
}
</style>
<script>
//
// Toggle the fullscreen on/off buttons
//
function toggleButtonVisibility(attachmentId){
var buttons = ["on","off"];
buttons.forEach(function(value, index, array){
$('#full-screen-' + value + '-' + attachmentId).toggle();
});
}
$(document).ready(function() {
var attachmentId = "att236880150";
var sidebar = AJS.sidebar('.aui-sidebar');
if (typeof(console) != 'undefined') {
$("iframe").each(function(index){
console.log("ATTACHMENT : " + index + " : " + $(this).attr('id') );
});
}
//
// Renders the Iframe in fullscreen when the "Show dialog" button is clicked
//
AJS.$('#full-screen-on-button-'+attachmentId).on('click', function(e) {
e.preventDefault();
//
// When the dialog is opened the iFrame should be set, and the dialog shown
//
toggleButtonVisibility(attachmentId);
$('#vp4c-iframe-'+attachmentId).addClass('fullscreen-vp4c-'+attachmentId);
//
// If the Confluence navbar is not collapsed, then collapse
// THIS IS WHERE THE ERROR OCCURS
//
if(!sidebar.isCollapsed()) {
sidebar.collapse();
}
});
// Event delegation for custom interactions.
sidebar.$el.on('click', '.clone', function (e) {
if (sidebar.isCollapsed()) {
e.preventDefault();
cloneDialog.show();
}
});
// Turn off fullscreen
AJS.$('#full-screen-off-button-'+attachmentId).on('click', function (e) {
e.preventDefault();
toggleButtonVisibility(attachmentId);
$('#vp4c-iframe-'+attachmentId).removeClass('fullscreen-vp4c-'+attachmentId);
//
// If the Confluence navbar is collapsed, then open
//
if(sidebar.isCollapsed()) {
sidebar.expand();
}
});
//
// Hide full screen off button by default, and expand the navbar if collapsed
//
$('#full-screen-off-'+attachmentId).hide();
});
</script>
<!-- End Initialise Handlers -->
</head>
<body>
<div>
<div id="vp4c-iframe-att236880150">
<div id="full-screen-on-att236880150">
<button id="full-screen-on-button-att236880150" class="aui-button aui-button-link aui-button-link-icon-text">
<span class="aui-icon aui-icon-small aui-iconfont-vid-full-screen-on">Full Screen On</span>
Full Screen On
</button>
</div>
<div id="full-screen-off-att236880150">
<button id="full-screen-off-button-att236880150" class="aui-button aui-button-link aui-button-link-icon-text">
<span class="aui-icon aui-icon-small aui-iconfont-vid-full-screen-off">Full Screen Off</span>
Full Screen Off
</button>
</div>
<iframe id="att236880150"
srcdoc="..."
scrolling="no"
width="100%"
height="775"
style="border:none;"/>
</div>
</div>
</body>
</html>
Any thoughts would be gratefully received.
Cheers,
Andrew