TouchUI Sidebar Hack


#1

Some plugin developers have seen that the TouchUI plugin completely wipes out your sidebar when it loads. This hack should allow you to implement TouchUI compatibility. You may still need to adjust your css to be responsive, but it is working for me well with the OctoPrint-BedLevelingWizard plugin. Your mileage may vary.

It basically moves your sidebar panel into the tab-content area and appends the necessary links to the navbar and TouchUI drop-down menu after the knockout binding is complete.

self.onAfterBinding = function () {
	// touchui hack
	if($('html[id="touch"]').length > 0){
		$('#touchui_dropdown_link').before('<li id="sidebar_plugin_<put your plugin id here>_wrapper_link" class=""><a href="#sidebar_plugin_<put your plugin id here>" data-toggle="tab"></a></li>');
		$('#tabs_content').append($('#sidebar_plugin_<put your plugin id here>').addClass('tab-pane'));
		
		var $elm = $('#sidebar_plugin_<put your plugin id here>_wrapper_link')			
		$elm
			.clone()
			.attr("id", $elm.attr("id")+"2")
			.prependTo("#all_touchui_settings > .dropdown-menu")
			.find("a")
			.text('<Put link text to show in side menu here>')
			.off("click")
			.on("click", function(e) {
				$elm.find('a').click();
				$("#all_touchui_settings").addClass("item_active");
				e.preventDefault();
				return false;
			});
		$elm.addClass('hidden_touch');
		$(window).trigger('resize');
	}
}


#2

It has been brought to my attention that this breaks the TouchUI Autostart scripts for some reason. Doesn't seem to effect mobile devices or touch screen laptops.