Skip to content

Commit 5f12fad

Browse files
mcanouilmcanouil
committed
first commit
0 parents  commit 5f12fad

File tree

10 files changed

+222
-0
lines changed

10 files changed

+222
-0
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/.DS_Store
2+
example_files/
3+
example.html
4+
/ding.mp3

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Mickaël Canouil
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Elevator.js Extension for Quarto
2+
3+
This extension provides support and shortcode to [Elevator.js](https://github.com/tholman/elevator.js).
4+
Animations are only available for HTML-based documents.
5+
6+
## Installing
7+
8+
```sh
9+
quarto install extension mcanouil/quarto-elevator
10+
```
11+
12+
This will install the extension under the `_extensions` subdirectory.
13+
If you're using version control, you will want to check in this directory.
14+
15+
## Using
16+
17+
To add an elevator button, use the `{{< elevator >}}` shortcode. For example:
18+
19+
- Mandatory:
20+
``` markdown
21+
{{< elevator >}}
22+
```
23+
24+
- Optional `<text-button>`, `<anchor-target>`, and `<audio=audio.mp3>`:
25+
``` markdown
26+
{{< elevator <text-button> <anchor-target> <audio=audio.mp3> >}}
27+
```
28+
29+
## Example
30+
31+
Here is the source code for a minimal example: [example.qmd](example.qmd).
32+
33+
This is the output of `example.qmd` for [HTML](https://m.canouil.fr/quarto-elevator/).
34+
35+
---
36+
37+
[BossaBossa](_extensions/elevator/BossaBossa.mp3) by Kevin MacLeod | <https://incompetech.com/>.
38+
Music promoted by <https://www.chosic.com/free-music/all/>.
39+
Creative Commons Creative Commons: By Attribution 3.0 License (<http://creativecommons.org/licenses/by/3.0/>).

‎_extensions/elevator/BossaBossa.mp3‎

5.11 MB
Binary file not shown.

‎_extensions/elevator/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Mickaël Canouil
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎_extensions/elevator/_extension.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
title: Elevator.js
2+
author: Mickaël Canouil
3+
version: 0.1.0
4+
contributes:
5+
shortcodes:
6+
- elevator.lua

‎_extensions/elevator/ding.mp3‎

72.2 KB
Binary file not shown.

‎_extensions/elevator/elevator.lua‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
local function ensureHtmlDeps()
2+
quarto.doc.addHtmlDependency({
3+
name = 'elevatorjs',
4+
version = '1.0.0',
5+
scripts = {"elevator.min.js"}
6+
})
7+
end
8+
9+
local function isEmpty(s)
10+
return s == '' or s == nil
11+
end
12+
13+
return {
14+
["elevator"] = function(args, kwargs)
15+
if quarto.doc.isFormat("html:js") then
16+
ensureHtmlDeps()
17+
18+
local textButton = 'Return to the top!'
19+
local targetAnchor = ''
20+
if #args > 0 then
21+
textButton = pandoc.utils.stringify(args[1])
22+
if #args > 1 then
23+
targetAnchor = 'targetElement: document.querySelector("#' .. pandoc.utils.stringify(args[2]) .. '"), '
24+
end
25+
end
26+
27+
mainAudio = pandoc.utils.stringify(kwargs["audio"])
28+
if isEmpty(mainAudio) then
29+
mainAudio = ''
30+
end
31+
32+
endAudio = pandoc.utils.stringify(kwargs["end"])
33+
if isEmpty(endAudio) then
34+
endAudio = "ding.mp3"
35+
quarto.doc.addFormatResource(endAudio)
36+
end
37+
38+
return pandoc.RawInline(
39+
'html',
40+
'<script>' ..
41+
'window.onload = function() { ' ..
42+
'var elevator = new Elevator({ ' ..
43+
'element: document.querySelector(".elevator-button")' ..
44+
', ' ..
45+
targetAnchor ..
46+
' mainAudio: "' .. mainAudio .. '",' ..
47+
' endAudio: "' .. endAudio .. '"' ..
48+
' });' ..
49+
' }' ..
50+
'</script>' ..
51+
'<button class="btn btn-outline-primary elevator-button" type="submit">' .. textButton .. '</button>'
52+
)
53+
else
54+
return pandoc.Null()
55+
end
56+
end
57+
}

‎_extensions/elevator/elevator.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example.qmd‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Elevator.js Quarto Extension
3+
format: html
4+
---
5+
6+
This extension allows you to use [Elevator.js](https://github.com/tholman/elevator.js) in your Quarto HTML documents.
7+
It provides an `{{{< elevator >}}}` shortcode:
8+
9+
- Mandatory:
10+
``` markdown
11+
{{{< elevator >}}}
12+
```
13+
14+
- Optional `<text-button>`, `<anchor-target>`, and `<audio=audio.mp3>`:
15+
``` markdown
16+
{{{< elevator <text-button> <anchor-target> <audio=audio.mp3> >}}}
17+
```
18+
19+
:::{style='text-align: center;'}
20+
21+
```{=html}
22+
<style>
23+
.down-arrow {
24+
font-size: 120px;
25+
margin-top: 120px;
26+
margin-bottom: 120px;
27+
text-shadow: 0px -20px #0C1F31, 0px 0px #C33329;
28+
color: rgba(0,0,0,0);
29+
-webkit-transform: scaleY(0.8);
30+
-moz-transform: scaleY(0.8);
31+
transform: scaleY(0.8);
32+
}
33+
</style>
34+
```
35+
36+
Elevator.js fixes those awkward "scroll to top" moments the old fashioned way.
37+
38+
<div class="down-arrow">&#9660;</div>
39+
First we need to get to the bottom of the page.
40+
<div class="down-arrow">&#9660;</div>
41+
Because you're already at the top.
42+
<div class="down-arrow">&#9660;</div>
43+
So a "back to top" button wouldn't make sense.
44+
<div class="down-arrow">&#9660;</div>
45+
Down down down.
46+
<div class="down-arrow">&#9660;</div>
47+
## Wow, all this scrolling
48+
<div class="down-arrow">&#9660;</div>
49+
This had better be worth it.
50+
<div class="down-arrow">&#9660;</div>
51+
It's going to take ages to get back to the top.
52+
<div class="down-arrow">&#9660;</div>
53+
If only we had an easy way to get back...
54+
<div class="down-arrow">&#9660;</div>
55+
...that is both functional and fun.
56+
<div class="down-arrow">&#9660;</div>
57+
I call "back to top" buttons elevators...
58+
<div class="down-arrow">&#9660;</div>
59+
...they should really behave more like them.
60+
<div class="down-arrow">&#9660;</div>
61+
Ok, here we are... click that elevator!
62+
63+
{{< elevator audio=_extensions/elevator/BossaBossa.mp3 >}}
64+
65+
Or `{{{< elevator "Return to 'Wow, all this scrolling.'" wow-all-this-scrolling audio=_extensions/elevator/BossaBossa.mp3 >}}}` to scroll up to `## Wow, all this scrolling`.
66+
67+
:::
68+
69+
---
70+
71+
BossaBossa by Kevin MacLeod | <https://incompetech.com/>.
72+
Music promoted by <https://www.chosic.com/free-music/all/>.
73+
Creative Commons Creative Commons: By Attribution 3.0 License (<http://creativecommons.org/licenses/by/3.0/>).

0 commit comments

Comments
 (0)