bifurqué depuis cliss21/pfm-site
1
0
Bifurcation 0

feat(assets): installe turbo et fabrique un player persistant

player-test
Antoine 2021-11-25 20:25:01 +01:00
Parent 838b563fbd
révision 14db951d4d
8 fichiers modifiés avec 32 ajouts et 1 suppressions

5
assets/js/turbo.js Normal file
Voir le fichier

@ -0,0 +1,5 @@
/* Turbo must be loaded separately in <head> section. See:
https://turbo.hotwired.dev/handbook/building#loading-your-application%E2%80%99s-javascript-bundle
So, I bundle it in a separate script.
*/
import * as Turbo from '@hotwired/turbo'

Voir le fichier

@ -0,0 +1,7 @@
.player {
position: fixed;
bottom: 0;
width: 100%;
background-color: $black;
color: $white;
}

Voir le fichier

@ -17,6 +17,7 @@
@import 'layout/body';
@import 'layout/menu';
@import 'layout/footer';
@import 'layout/player';
// Components
@import 'components/buttons';

11
package-lock.json générée
Voir le fichier

@ -10,6 +10,7 @@
"license": "AGPL-3.0+",
"dependencies": {
"@fontsource/open-sans": "^4.5.1",
"@hotwired/turbo": "^7.1.0",
"@popperjs/core": "^2.10.1",
"bootstrap": "~5.1.0",
"core-js": "~3.17.2",
@ -1648,6 +1649,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.1.tgz",
"integrity": "sha512-Zvse9PG3XU+gfa44i4ENXvZi28X0RTtuc/b1v4AaqrSpSf2OALN2QrBf91BOC5gXU1Y6xW/S0To5wz8EraLPlQ=="
},
"node_modules/@hotwired/turbo": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-7.1.0.tgz",
"integrity": "sha512-Q8kGjqwPqER+CtpQudbH+3Zgs2X4zb6pBAlr6NsKTXadg45pAOvxI9i4QpuHbwSzR2+x87HUm+rot9F/Pe8rxA=="
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -11777,6 +11783,11 @@
"resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.1.tgz",
"integrity": "sha512-Zvse9PG3XU+gfa44i4ENXvZi28X0RTtuc/b1v4AaqrSpSf2OALN2QrBf91BOC5gXU1Y6xW/S0To5wz8EraLPlQ=="
},
"@hotwired/turbo": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-7.1.0.tgz",
"integrity": "sha512-Q8kGjqwPqER+CtpQudbH+3Zgs2X4zb6pBAlr6NsKTXadg45pAOvxI9i4QpuHbwSzR2+x87HUm+rot9F/Pe8rxA=="
},
"@humanwhocodes/config-array": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",

Voir le fichier

@ -14,6 +14,7 @@
},
"dependencies": {
"@fontsource/open-sans": "^4.5.1",
"@hotwired/turbo": "^7.1.0",
"@popperjs/core": "^2.10.1",
"bootstrap": "~5.1.0",
"core-js": "~3.17.2",

Voir le fichier

@ -19,7 +19,7 @@
<script>
window.STATIC_URL = '{% get_static_prefix %}';
</script>
<script src="{% static "turbo.js"%}" defer></script>
{% block extra_head %}{% endblock %}
</head>
<body>
@ -62,6 +62,8 @@
{% include "./footer.html" with settings=settings.core.footersettings %}
{% include "./player.html" %}
{% block javascript %}
<script src="{% static "main.js" %}"></script>
{% endblock %}

Voir le fichier

@ -0,0 +1,3 @@
<div class="player" id="main-player" data-turbo-permanent>
<audio controls src="https://diff.radiopfm.com/flux.mp3"></audio>
</div>

Voir le fichier

@ -17,6 +17,7 @@ const CONFIG = {
// Paths to entries which will be bundled
ENTRIES: {
main: ['./assets/js/main.js', './assets/scss/main.scss'],
turbo: ['./assets/js/turbo.js'],
},
// Folders to create aliases for in JavaScript and SCSS