Parent
7687c35f36
révision
b7a819c2d2
|
@ -1,5 +1,6 @@
|
|||
import './lib/carte-hdf';
|
||||
import './lib/leaflet';
|
||||
import './vendor/tns';
|
||||
import './vendor/bootstrap';
|
||||
import $ from 'jquery';
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
// Vendors
|
||||
@import "vendor/bootstrap";
|
||||
// see: https://github.com/ganlanyuan/tiny-slider
|
||||
@import "vendor/tiny-slider";
|
||||
|
||||
// Base styles
|
||||
@import "base/fonts";
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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']]
|
||||
|
||||
|
|
|
@ -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 %}
|
Chargement…
Référencer dans un nouveau ticket