feat(coroussel): ajoute un carrousel repris du site de lens

pull/72/head v095
François Poulain 2019-09-23 18:12:31 +02:00 commité par François Poulain
Parent 7687c35f36
révision b7a819c2d2
8 fichiers modifiés avec 234 ajouts et 1 suppressions

Voir le fichier

@ -1,5 +1,6 @@
import './lib/carte-hdf';
import './lib/leaflet';
import './vendor/tns';
import './vendor/bootstrap';
import $ from 'jquery';

62
assets/js/vendor/tns.js externe Normal file
Voir le fichier

@ -0,0 +1,62 @@
// see: https://github.com/ganlanyuan/tiny-slider
import $ from 'jquery';
import {
tns
} from 'tiny-slider/src/tiny-slider';
const TnsDefault = {
items: 1,
gutter: 10,
speed: 1000,
prevButton: '.tns-control-prev',
nextButton: '.tns-control-next',
nav: false,
autoplay: true,
autoplayHoverPause: true,
autoplayButtonOutput: false
};
// Initialise un élément en carrousel avec tiny-slider.
function initSlider(element) {
const items = element.querySelector('.tns-slider-items');
if (!items) {
return;
}
const options = $.extend({}, TnsDefault, {
container: items
});
// cherche les boutons de navigation
const prevButton = element.querySelector('.tns-control-prev');
const nextButton = element.querySelector('.tns-control-next');
if (prevButton) {
options.prevButton = prevButton;
}
if (nextButton) {
options.nextButton = nextButton;
}
// tente de charger des options supplémentaires
const data = element.getAttribute('data-slider');
if (data && data.length > 2) { // eslint-disable-line no-magic-numbers
try {
$.extend(options, JSON.parse(data));
} catch (e) {
// eslint-disable-next-line no-console
console.error('Impossible de charger les options', element, e);
}
}
tns(options);
}
$(() => {
// initialise les sliders avec tiny-slider
$('[data-slider]').each(function () {
initSlider(this);
});
});

Voir le fichier

@ -6,6 +6,8 @@
// Vendors
@import "vendor/bootstrap";
// see: https://github.com/ganlanyuan/tiny-slider
@import "vendor/tiny-slider";
// Base styles
@import "base/fonts";

119
assets/scss/vendor/_tiny-slider.scss externe Normal file
Voir le fichier

@ -0,0 +1,119 @@
// ----------------------------------------------------------------------------
// Tiny slider
// ----------------------------------------------------------------------------
// see: https://github.com/ganlanyuan/tiny-slider
@import "tiny-slider/src/tiny-slider";
.tns-slider-container {
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: center;
margin-bottom: $spacer;
}
.tns-control,
.tns-outer {
flex: 0 0 auto;
}
.tns-control {
margin-bottom: ($spacer / 2);
text-align: center;
}
// Conteneurs des éléments
.tns-outer {
width: 100%;
overflow: hidden;
}
.tns-ovh {
padding: 3px;
}
.tns-item {
> :last-child {
margin-bottom: 0;
}
}
// Boutons de navigation
.tns-control-prev,
.tns-control-next {
display: inline-block;
width: 2rem;
height: 2rem;
font-size: 1.25rem;
color: $primary;
text-align: center;
cursor: pointer;
border: 2px solid $primary;
border-radius: 50%;
transition: background-color .2s, color .2s;
.fa {
position: relative;
top: -2px;
}
&:hover {
color: $white;
background-color: $primary;
outline: 0;
}
}
.tns-control-prev {
padding-right: .15rem;
margin-right: ($spacer / 2);
}
.tns-control-next {
padding-left: .15rem;
margin-left: ($spacer / 2);
}
@each $theme, $color in $theme-colors {
.tns-slider-container-#{$theme} {
.tns-control-prev,
.tns-control-next {
color: $color;
border-color: $color;
&:hover {
color: $white;
background-color: $color;
}
}
}
}
// Adapte sur bureau
//
// Les boutons de navigation sont sur les côtés.
@include media-breakpoint-up(sm) {
.tns-slider-container {
flex-flow: nowrap;
}
.tns-control,
.tns-outer {
width: auto;
}
.tns-control {
margin-bottom: 0;
& + & {
order: 3;
}
}
.tns-outer {
flex: 1 1 0px; // stylelint-disable-line length-zero-no-unit
}
}

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

@ -12056,6 +12056,11 @@
"next-tick": "1"
}
},
"tiny-slider": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/tiny-slider/-/tiny-slider-2.9.2.tgz",
"integrity": "sha512-2sgEJpVbpIbbgiYM/xGa0HMvvtUZSJvXeZJmLWBux6VgFqh/MQG8LXBR59ZLYpa/1OtwM0E6/ic55oLOJN9Mnw=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

Voir le fichier

@ -16,7 +16,8 @@
"jquery": ">=3.0.0",
"leaflet": ">=1.5.1",
"leaflet-providers": ">=1.9.0",
"popper.js": "^1.14.4"
"popper.js": "^1.14.4",
"tiny-slider": "^2.8.8"
},
"devDependencies": {
"@babel/core": "^7.3.4",

Voir le fichier

@ -304,6 +304,22 @@ class LienExterne(
url = blocks.URLBlock(help_text="Lien vers un site externe.")
@register_contenu()
class Caroussel(
mixins.SetThemeColor, mixins.SetTemplate, blocks.StructBlock
):
class Meta:
icon = 'image'
group = 'Contenu média'
label = "Carrousel d'images"
items = blocks.StreamBlock(
[('image', Image())],
min_num=1,
label="Éléments",
)
def contenus_medias():
return [(nom, bloc()) for nom, bloc in contenus['Contenu média']]

Voir le fichier

@ -0,0 +1,27 @@
{% extends "./_baseblock.html" %}
{% load wagtailcore_tags utils %}
{% block background %}{% endblock %}
{% block interieur %}
<div class="tns-slider-container tns-slider-container-{{ value.theme_color|default:page.specific.get_theme_color }}" data-slider='{"autoplayTimeout":3000,"responsive":{"480":{"items":2},"640":{"items":3},"1024":{"items":4}}}'>
<div class="tns-control">
<a class="tns-control-prev" role="button">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
</div>
<div class="tns-control">
<a class="tns-control-next" role="button">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>
<div class="tns-slider-items text-center">
{% for item in self.items %}
<div>{% include_block item %}</div>
{% endfor %}
</div>
</div>
{% endblock %}