Confluence Cloud Show / Hide Sidebar

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

Hi @AndrewTyson,

this error could occur if the sidebar was not initialized correctly. Check if the page has a .aui-sidebar element at the time of initialization and a sidebar variable after

var sidebar = AJS.sidebar('.aui-sidebar');

has $body attribute.

Hope this helps,
Oleksandr