Initialer Commit

output/html/plugin/customcontrols/plugin.js

@@ -0,0 +1,73 @@
+/*****************************************************************
+** Author: Asvin Goel, goel@telematique.eu
+**
+** A plugin replacing the default controls by custom controls.
+**
+** Version: 2.0.1
+** 
+** License: MIT license (see LICENSE.md)
+**
+******************************************************************/
+window.RevealCustomControls = window.RevealCustomControls || {
+    id: 'RevealCustomControls',
+    init: function(deck) {
+        initCustomControls(deck);
+    }
+};
+
+const initCustomControls = function(Reveal){
+	var config = Reveal.getConfig().customcontrols || {};
+
+	if (Reveal.isSpeakerNotes() && new URLSearchParams(location.search).get('controls') == 'false') return;
+	if (!config?.controls?.length) return this;
+
+	var collapseIcon = config.collapseIcon || '<i class="fa fa-chevron-down"></i>';
+	var expandIcon = config.expandIcon || '<i class="fa fa-chevron-up"></i>';
+	var tooltip = config.tooltip || 'Show/hide controls';
+
+	var div = document.createElement( 'div' );
+	div.id = 'customcontrols';
+
+	var toggleButton = document.createElement( 'button' );
+	toggleButton.title = tooltip;
+	toggleButton.innerHTML = '<span id="collapse-customcontrols">' + collapseIcon + '</span>' + '<span id="expand-customcontrols">' + expandIcon + '</span>';
+
+	toggleButton.addEventListener('click', function( event ) {
+		var div = document.querySelector("div#customcontrols");
+		if ( div.classList.contains('collapsed') ) {
+			div.classList.remove('collapsed');
+		}
+		else {
+			div.classList.add('collapsed');
+		}
+		toggleButton.blur(); // unfocus button
+	});
+
+	div.appendChild(toggleButton);
+
+	var controls = document.createElement( 'ul' );
+	for (var i = 0; i < config.controls.length; i++ ) {
+		var control = document.createElement( 'li' );
+		if ( config.controls[i].id ) {
+			control.id = config.controls[i].id;
+		}
+		control.innerHTML = '<button ' + ( config.controls[i].title ? 'title="' + config.controls[i].title + '" ': '' ) + 'onclick="' + config.controls[i].action + '">' + config.controls[i].icon + '</button>';
+		controls.appendChild( control );
+	}
+	div.appendChild( controls );
+
+
+	document.querySelector(".reveal").appendChild( div );
+
+	document.addEventListener( 'resize', function( event ) {
+		// expand controls to make sure they are visible
+		var div = document.querySelector("div#customcontrols.collapsed");
+		if ( div ) {
+			div.classList.remove('collapsed');
+		}
+	} );
+
+	return this;
+
+};
+

output/html/plugin/customcontrols/style.css

@@ -0,0 +1,70 @@
+#customcontrols {
+	z-index: 40;
+	position: fixed; 
+	left: 70px; 
+	bottom: 30px;
+	text-align: center;
+	font-size: 24px;
+}
+
+#customcontrols button {
+	background: none;
+	color: var(--r-link-color);
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+	z-index: 40;
+}
+
+#customcontrols button:hover {
+	color: var(--r-link-color-hover);
+}
+
+#customcontrols > ul {
+	position: fixed; 
+	left: 54px; 
+	bottom: 64px;
+	list-style-type: none;
+	overflow: hidden;
+	margin: 0;
+	border: 1px solid var(--r-link-color);
+	border-radius: 5px;
+	padding: 10px;
+	background-color: var(--r-background-color)
+}
+
+#customcontrols ul > li {
+	margin: 0px 5px;
+	padding: 0px 5px;
+	float: left;
+}
+
+#customcontrols.collapsed  #collapse-customcontrols, #customcontrols.collapsed > ul  {
+	display: none;
+} 
+
+#customcontrols:not(.collapsed) #expand-customcontrols {
+	display: none;
+} 
+
+@media only screen and (min-width: 500px) {
+	#customcontrols > button {
+		display: none;
+	}
+	#customcontrols > ul {
+		padding-top: 0px;
+		padding-bottom: 0px;
+		bottom: 30px;
+		border: none;
+		background: none;
+	}
+}
+
+@media print {
+	#customcontrols {
+		display: none!important; 
+	}
+}
+