vault backup: 2024-12-12 21:37:21
This commit is contained in:
72
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/README.md
vendored
Normal file
72
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/README.md
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
# Custom controls
|
||||
|
||||
This plugin allows to add responsive custom controls to reveal.js which allow arbitrary positioning, layout, and behaviour of the controls.
|
||||
|
||||
[Check out the live demo](https://rajgoel.github.io/reveal.js-demos/customcontrols-demo.html)
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Copy the files `plugin.js` and `style.css` into the plugin folder of your reveal.js presentation, i.e. ```plugin/customcontrols``` and load the plugin as shown below.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="plugin/customcontrols/style.css">
|
||||
<script src="plugin/customcontrols/plugin.js"></script>
|
||||
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
// ...
|
||||
plugins: [ RevealCustomControls ],
|
||||
// ...
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
Note, without configuration you need to add
|
||||
|
||||
```javascript
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
```
|
||||
|
||||
between ```<head>``` and ```</head>``` of your HTML file because the defaults use [Font Awesome](http://fontawesome.io/).
|
||||
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
The plugin can be configured by adding custom controls and changing the layout of the slide number, e.g., by:
|
||||
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// ...
|
||||
customcontrols: {
|
||||
controls: [
|
||||
{
|
||||
id: 'toggle-overview',
|
||||
title: 'Toggle overview (O)',
|
||||
icon: '<i class="fa fa-th"></i>',
|
||||
action: 'Reveal.toggleOverview();'
|
||||
},
|
||||
{ icon: '<i class="fa fa-pen-square"></i>',
|
||||
title: 'Toggle chalkboard (B)',
|
||||
action: 'RevealChalkboard.toggleChalkboard();'
|
||||
},
|
||||
{ icon: '<i class="fa fa-pen"></i>',
|
||||
title: 'Toggle notes canvas (C)',
|
||||
action: 'RevealChalkboard.toggleNotesCanvas();'
|
||||
}
|
||||
]
|
||||
},
|
||||
// ...
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
The `id` and `title` are optional. The configuration should be self explaining and any number of controls can be added. The style file can be altered to control the layout and responsiveness of the custom controls.
|
||||
|
||||
## License
|
||||
|
||||
MIT licensed
|
||||
|
||||
Copyright (C) 2020 Asvin Goel
|
||||
69
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/plugin.js
vendored
Normal file
69
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/plugin.js
vendored
Normal file
@ -0,0 +1,69 @@
|
||||
/*****************************************************************
|
||||
** 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;
|
||||
|
||||
};
|
||||
|
||||
62
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/style.css
vendored
Normal file
62
.obsidian/plugins/obsidian-advanced-slides/plugin/customcontrols/style.css
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
#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;
|
||||
padding: 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 {
|
||||
bottom: 20px;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user