Toggle Sitecore Experience Editor Ribbon

If you’re like me, you are usually trying to figure out how to get that darn fixed header to be editable in the Experience Editor since sitecore’s EE ribbon will cover it up.  Well i have the solution for you. I built a simple Nuget package that will take care of this problem by collapsing the EE ribbon by default and making it toggle-able. The Nuget package patches into the pipeline that sitecore uses to render the ribbon in the first place. This minimizes the effort needed by developers to integrate this into an existing site.

toggle

This is how the EE should be set up.  With more real estate to in context edit, it feels cleaner and more focused to the task at hand.

What drives it?

First we need a hook to be injected onto the page

<div id="scToggleUI"></div>

It’s injected right before sitecore’s node that renders the Ribbon shown below

this is sitecore's node, not mine.
<form id="scPageExtendersForm" onsubmit="return false;" action="">

Now that we have our hook we can make sitecore’s crossPiece disappear. That’s what sitecore uses to push your website down below the ribbon, doesn’t always work, does it?

	#scCrossPiece
	{
		display: block;
	}
	#scPageExtendersForm {
		display: block;
	}
	.sc-globalHeader-content
	{
		padding-left:40px;
	}
	#scToggleUI {
		position: fixed;
		top: 0;
		right: 50%;
		z-index:9999;
		background: url('/sitecore/shell/Themes/Standard/images/hamburgermenu_default.png');
		width: 63px;
		height: 31px;
	}

Finally we register some events in JavaScript. I’ve chosen to go with vanilla JavaScript to minimize dependencies here. We need to register a toggle event for our new button.

function toggle(){
		var sc = document.getElementById('scPageExtendersForm');
		if (!sc){
			sc = document.getElementById('scWebEditRibbon');
		}
		var btn = document.getElementById('scToggleUI');

		if (sc.style.display === 'block' || sc.style.display === ''){
			document.cookie = 'scRibbon=0';
			sc.style.display = 'none';
			setCrossPiece('none');
			btn.style.right = 0;
		}else{
			document.cookie = 'scRibbon=1';
			sc.style.display = 'block';
			setCrossPiece('block');
			btn.style.right = '50%';
		}
	}
	function setCrossPiece(display){
		var cross = document.getElementById('scCrossPiece');
		if(cross){
			cross.style.display = display;
		}else{
			setTimeout(function(){setCrossPiece(display)}, 5000);
		}
	}
	var btn = document.getElementById('scToggleUI')
	btn.onclick = toggle;
	var scRibbon = document.cookie.replace(/(?:(?:^|.*;\s*)scRibbon\s*\=\s*([^;]*).*$)|^.*$/, "$"+"1");
	if (scRibbon === '0'){
		initToggle();
	}
	function initToggle(){
		var sc = document.getElementById('scCrossPiece');
		if (sc == null)
			setTimeout(function(){initToggle();}, 10);
		else
			toggle();
	}