Keyboard Shortcut and Button to hide sidebar on Teachable websites

teachable-toggle-sidebar.user.js

// ==UserScript==
// @name         Teachable Toggleable Sidebar
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Get more screen video realstate by toggling the course outline sidebar
// @author       ajorpheus
// @match        https://learn.cantrill.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=cantrill.io
// @require      http://code.jquery.com/jquery-3.1.1.slim.min.js
// @require      https://gist.githubusercontent.com/BrockA/2625891/raw/waitForKeyElements.js
// @require      https://raw.github.com/odyniec/MonkeyConfig/master/monkeyconfig.js
// @grant        GM_notification
// @grant        GM_registerMenuCommand
// @grant         GM_getValue
// @grant         GM_setValue
// @grant         GM_addStyle
// @run-at       document-end
// @downloadURL  https://gist.github.com/ajorpheus/6dfd1d9d551f07a2ad729992197e8d2c/raw/teachable-toggle-sidebar.user.js
// @updateURL    https://gist.github.com/ajorpheus/6dfd1d9d551f07a2ad729992197e8d2c/raw/teachable-toggle-sidebar.user.js
// ==/UserScript==

(function() {
	'use strict';

	var config = new MonkeyConfig({
		title: 'Configuration',
		menuCommand: true,
		params: {
			toggleShortcut: {
				type: 'text',
				default: 'PageDown',
				label: 'Keyboard shortcut to toggle the sidebar'
			},
			toggleButtonParentElementSelector: {
				type: 'text',
				default: 'div.lecture-nav',
				label: 'Selector of element which the "Toggle Sidebar" button is appended'
			},
			courseSideBarSelector: {
				type: 'text',
				default: '#courseSidebar',
				label: 'Selector of element that is toggled.'
			},
			toggleButtonCss: {
				type: 'text',
				default: 'nav-btn complete',
				label: 'CSS class(es) to apply to new button'
			},
			rememberLastState: {
				type: 'checkbox',
				default: true,
				label: 'Remember the state of the sidebar'
			}
		},
		onSave: function(values){
			for (var i in values) {
				if (i == 'toggleShortcut' && values[i] != toggleShortcut) {
					console.log(`Value of ${i} changed from ${toggleShortcut} to ${values[i]}`);
					toggleShortcut = values[i];
					//console.log(`************ ${values[i]}, ${values.toggleShortcut}, ${config.get('toggleShortcut')}`);
				}

				if (i == 'toggleButtonCss' && values[i] != toggleButtonCss) {
					console.log(`Value of ${i} changed from ${toggleButtonCss} to ${values[i]}`);
					toggleButtonCss = values[i];
					//console.log(`************ ${values[i]}, ${values.toggleShortcut}, ${config.get('toggleShortcut')}`);
					toggleButtonParentElement.find('#toggle-sidebar').each(function(){
                         $(this).attr('class', toggleButtonCss);
					});
				}

				if (i == 'toggleButtonParentElementSelector' && values[i] != toggleButtonParentElementSelector) {
					console.log(`************ Value of ${i} changed from ${toggleButtonParentElementSelector} to ${values[i]}`);

					// Update parent element
					toggleButtonParentElementSelector = values[i];
					createAndAppendButton();
				}

				if (i == 'rememberLastState' && values[i] != rememberLastState) {
					console.log(`************ Value of ${i} changed from ${rememberLastState} to ${values[i]}`);
					storeCurrentToggleState();
				}
			}
		}
	});

	var courseSideBarSelector = config.get('courseSideBarSelector');
	var toggleShortcut = config.get('toggleShortcut');
	var toggleButtonParentElementSelector = config.get('toggleButtonParentElementSelector');
	var toggleButtonCss = config.get('toggleButtonCss');     // These are the classes attached to the above anchor to make it look like a button. These should be the same as the existing nav button ('Previous Lecture' for example).
	var rememberLastState = config.get('rememberLastState');
	var lastToggleState = GM_getValue('lastToggleState');

	var toggleButtonParentElement;

	function toggleSidebar(e){
		e.preventDefault();
		//console.dir(e); console.log(JSON.stringify(e, null, 4));
		if (e.type === "click" || e.key === toggleShortcut)
			$(courseSideBarSelector).toggle();
		    storeCurrentToggleState();
	}

	function storeCurrentToggleState(){
		var currentToggleState = $(courseSideBarSelector).is(':visible')
		console.log(`storeCurrentToggleState************ Current state: ${currentToggleState}`);
		GM_setValue('lastToggleState', currentToggleState);
	}

	function restoreLastToggleState(){
	   console.log(`restoreLastToggleState************ rememberLastState: ${rememberLastState}`);
	   console.log(`restoreLastToggleState************  lastToggleState: ${lastToggleState}`);
       console.dir(lastToggleState);
       if (rememberLastState){
		   $(courseSideBarSelector).toggle(lastToggleState);
	   }
	}

	waitForKeyElements(toggleButtonParentElementSelector, initToggleSidebar, false);

    function createAndAppendButton(){
            if (toggleButtonParentElement){
				// Remove button from old parent
				toggleButtonParentElement.children('#toggle-sidebar').remove();
			}

		    toggleButtonParentElement = $(toggleButtonParentElementSelector);

			if ( toggleButtonParentElement.find('#toggle-sidebar').length === 0 ){ //Toggle sidebar href not already added
			$('<a/>', {
				type: 'href',
				id: "toggle-sidebar",
				text: 'Toggle Sidebar',
				class: 'nav-btn complete',
				href: '',
				click: function(e){ toggleSidebar(e); }
			}).appendTo(toggleButtonParentElement);
		}
	}

	function initToggleSidebar() {
		console.log(`initToggleSidebar************** Toggle Shortcut: ${toggleShortcut}`);
		window.addEventListener('keyup' , function(e){ toggleSidebar(e);} , false);
		createAndAppendButton();
		restoreLastToggleState();
	}

})();