Skip to content

Commit

Permalink
Version 1.0.9
Browse files Browse the repository at this point in the history 
This version fixes a bug, and has some code optimisations.
  • Loading branch information
Martino committed May 31, 2020
1 parent 79eb698 commit 14bd772
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 173 deletions.
78 changes: 78 additions & 0 deletions css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@charset "UTF-8";
.slides {
opacity: 0;
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease; }

.reveal.ready .slides {
opacity: 1; }

ul, ol {
font-size: 90%; }

li + li {
margin-top: 0.3em; }

.fsbutton {
display: inline-block;
text-decoration: none;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out; }

.slides .fsbutton {
border: none;
padding: 1em;
margin: 1em;
background: #ffffff;
color: #000000;
font-size: .5em; }

.reveal > .fsbutton {
border: 1.1px solid white;
border-radius: 0.2em;
width: 1.25em;
height: 1.25em;
margin: 0;
padding: 0;
background: none;
color: white;
font-size: 75%;
line-height: 0.75em;
opacity: 0.6;
-webkit-transition: opacity 0.15s ease-in-out;
-o-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out; }

.reveal > .fsbutton:hover {
opacity: 1; }

.hide {
opacity: 0; }

.icon-fs:after {
content: '+';
line-height: 1;
font-size: 1.5em; }

.reveal > .icon-fs:after {
font-size: 1em; }

.icon-fsexit:after {
content: '–'; }

.backgrounds {
background: #1a1626;
-webkit-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out; }

.reveal.fullscreen .backgrounds {
color: green;
background: DarkSlateGray;
background-color: DarkSlateGray; }
197 changes: 64 additions & 133 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>

<head>
<meta charset="utf-8">
<title>FsFx.js for Reveal.js</title>
<title>FsFx for Reveal.js</title>
<meta name="description" content="">
<meta name="author" content="Martinomagnifico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<style>
.slides {
opacity: 0;
transition: opacity .5s ease;
}
.reveal.ready .slides {
opacity: 1;
}
</style>
<style>
ul, ol {
font-size: 90%;
}
li + li {
margin-top: 0.3em;
}
.fsbutton {
display: inline-block;
text-decoration: none;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
transition: opacity .5s ease-in-out;
}
.slides .fsbutton {
border: none;
padding: 1em;
margin: 1em;
background: #ffffff;
color: #000000;
font-size: .5em;
}
.reveal > .fsbutton {
border: 1.1px solid white;
border-radius: 0.2em;
width: 1.25em;
height: 1.25em;
margin: 0;
padding: 0;
background: none;
color: white;
font-size: 75%;
line-height: 0.75em;
opacity: 0.6;
transition: opacity 0.15s ease-in-out;
}
.reveal > .fsbutton:hover {
opacity: 1;
}
.hide {
opacity: 0
}
.icon-fs:after {
content: '+';
line-height: 1;
font-size: 1.5em;
}
.reveal > .icon-fs:after {
font-size: 1em;
}
.icon-fsexit:after {
content: '–'
}
.backgrounds {
background: #1a1626;
transition: background-color .5s ease-in-out;
}
.reveal.fullscreen .backgrounds {
color: green;
background: DarkSlateGray;
background-color: DarkSlateGray;
}


</style>
</head>
<body>
<link rel="stylesheet" href="css/demo.css">
</head>

<body>
<div class="reveal" data-fs-toggle="fullscreen">
<button class="fsbutton icon-fs" style="position: absolute; right: 20px; top: 20px; z-index: 2;" data-fs-toggle="icon-fsexit"></button>
<div class="slides">
<section class="center" data-transition="fade">
<h1>FsFx</h1>
<h3>for Reveal.js</h3>
<button class="fsbutton" data-fs-gonext="1500" data-fs-toggle="hide">Start the show!</button>
</section>
<section class="center" data-transition="zoom-in fade-out">
<h3>FsFx.js</h3><small>Can do a few things:</small><br><br>
<ol>
<li>Enter or exit fullscreen</li>
<li>Trigger 'next slide' after fullscreen</li>
<li>Toggle a class on any element if fullscreen</li>
</ol>
</section>
<section class="center">
<h4>1. Enter or exit fullscreen</h4>
<ul>
<li>Triggers if an element with a certain class is clicked</li>
<li>This baseclass is 'fsbutton' by default</li>
<li>The baseclass can easily be changed in the plugin options</li>
</ul>
</section>
<section class="center">
<h4>2. Trigger 'next slide' after fullscreen</h4><small>The start button on the first page of this deck does exacly that</small><br><br>
<ul>
<li>If wanted, a 'next slide' function can be called</li>
<li>It can be added with a <code>data-fs-gonext="*"</code> attribute</li>
<li>The wildcard is the time in milliseconds for a delay</li>
</ul>
</section>
<section class="center">
<h4>3. Toggle a class on any element if the presentation is fullscreen</h4>
<ul>
<li>A class toggle can be added with a <code>data-fs-toggle="*"</code> attribute</li>
<li>The wildcard is the class that is toggled in fullscreen</li>
<li>In this presentation, see the changes in fullscreen: The background and the button icons:</li>
</ul>
<button class="fsbutton icon-fs" data-fs-toggle="icon-fsexit">Toggle Fullscreen&nbsp;</button>
</section>
</div>
<button class="fsbutton icon-fs" style="position: absolute; right: 20px; top: 20px; z-index: 2;" data-fs-toggle="icon-fsexit"></button>
<div class="slides">
<section class="center" data-transition="fade">
<h1>FsFx</h1>
<h3>for Reveal.js</h3>
<button class="fsbutton" data-fs-gonext="1500" data-fs-toggle="hide">Start the show!</button>
</section>
<section class="center" data-transition="zoom-in fade-out">
<h3>FsFx.js</h3><small>Can do a few things:</small><br><br>
<ol>
<li>Enter or exit fullscreen</li>
<li>Trigger 'next slide' after fullscreen</li>
<li>Toggle a class on any element if fullscreen</li>
</ol>
</section>
<section class="center">
<h4>1. Enter or exit fullscreen</h4>
<ul>
<li>Triggers if an element with a certain class is clicked</li>
<li>This baseclass is 'fsbutton' by default</li>
<li>The baseclass can easily be changed in the plugin options</li>
</ul>
</section>
<section class="center">
<h4>2. Trigger 'next slide' after fullscreen</h4><small>The start button on the first page of this deck does exacly that</small><br><br>
<ul>
<li>If wanted, a 'next slide' function can be called</li>
<li>It can be added with a <code>data-fs-gonext="*"</code> attribute</li>
<li>The wildcard is the time in milliseconds for a delay</li>
</ul>
</section>
<section class="center">
<h4>3. Toggle a class on any element if the presentation is fullscreen</h4>
<ul>
<li>A class toggle can be added with a <code>data-fs-toggle="*"</code> attribute</li>
<li>The wildcard is the class that is toggled in fullscreen</li>
<li>In this presentation, see the changes in fullscreen: The background and the button icons:</li>
</ul>
<button class="fsbutton icon-fs" data-fs-toggle="icon-fsexit">Toggle Fullscreen&nbsp;</button>
</section>
</div>
</div>
<script type="text/javascript" src="dist/reveal.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/screenfull@5.0.2/dist/screenfull.min.js"></script>
<script type="text/javascript" src="plugin/fsfx/fsfx.js"></script>
<script src="https://cdn.jsdelivr.net/npm/screenfull@5.0.2/dist/screenfull.min.js"></script>
<script src="dist/reveal.js"></script>
<script src="plugin/fsfx/fsfx.js"></script>
<script>
Reveal.initialize({
transition: 'convex',
fsfx: {
baseclass: 'fsbutton',
hideifnofs: true
},
plugins: [ FsFx ]
});
Reveal.initialize({
transition: "convex",
history: true,
fsfx: {
baseclass: "fsbutton",
hideifnofs: true
},
plugins: [
FsFx
]
});
</script>
</body>
</body>

</html>
Loading

0 comments on commit 14bd772

Please sign in to comment.