70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
|
/*****************************************************************
|
||
|
|
** Author: Asvin Goel, goel@telematique.eu
|
||
|
|
**
|
||
|
|
** A plugin replacing the default controls by custom controls.
|
||
|
|
**
|
||
|
|
** Version: 2.0.0
|
||
|
|
**
|
||
|
|
** 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 || {};
|
||
|
|
|
||
|
|
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');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
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;
|
||
|
|
|
||
|
|
};
|
||
|
|
|