0001-general-add-possibility-to-turn-menu-cells-in-carrou.patch
| help/fr/misc-scss.page | ||
|---|---|---|
| 477 | 477 |
</table> |
| 478 | 478 |
</section> |
| 479 | 479 | |
| 480 |
<section> |
|
| 481 |
<title>Carrousels</title> |
|
| 482 | ||
| 483 |
<p> |
|
| 484 |
Une cellule menu prendra la forme « carrousel » si elle est définie avec |
|
| 485 |
« carrousel » comme slug. |
|
| 486 |
</p> |
|
| 487 | ||
| 488 |
<table shade="rows"> |
|
| 489 |
<tr> |
|
| 490 |
<td><p><code>$carrousel-height</code></p></td> |
|
| 491 |
<td><p>Hauteur du carrousel</p></td> |
|
| 492 |
<td><p><var>20rem</var></p></td> |
|
| 493 |
</tr> |
|
| 494 |
<tr> |
|
| 495 |
<td><p><code>$carrousel-text-position</code></p></td> |
|
| 496 |
<td><p>Position du texte des différentes pages; les valeurs possibles sont |
|
| 497 |
middle (milieu de page) et bottom-left (en bas à gauche).</p></td> |
|
| 498 |
<td><p><var>middle</var></p></td> |
|
| 499 |
</tr> |
|
| 500 |
<tr> |
|
| 501 |
<td><p><code>$carrousel-navigation</code></p></td> |
|
| 502 |
<td><p>Détermine si la navigation permettant de passer d'un élément à |
|
| 503 |
l'autre est affichée. (visible ou none)</p></td> |
|
| 504 |
<td><p><var>visible</var></p></td> |
|
| 505 |
</tr> |
|
| 506 |
<tr> |
|
| 507 |
<td><p><code>$carrousel-navigation-bullet-color</code></p></td> |
|
| 508 |
<td><p>Couleur du disque de navigation.</p></td> |
|
| 509 |
<td><p><var>$button-color</var></p></td> |
|
| 510 |
</tr> |
|
| 511 |
<tr> |
|
| 512 |
<td><p><code>$carrousel-arrows</code></p></td> |
|
| 513 |
<td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un |
|
| 514 |
élément à l'autre sont affichées. (visible ou none)</p></td> |
|
| 515 |
<td><p><var>visible</var></p></td> |
|
| 516 |
</tr> |
|
| 517 |
<tr> |
|
| 518 |
</table> |
|
| 519 | ||
| 520 |
</section> |
|
| 521 | ||
| 480 | 522 |
</page> |
| static/includes/_carrousel.scss | ||
|---|---|---|
| 1 |
/* $carrousel-height: height of carrousel image */ |
|
| 2 |
$carrousel-height: 20rem !default; |
|
| 3 | ||
| 4 |
/* $carrousel-text-position: position of text (middle, bottom-left) */ |
|
| 5 |
$carrousel-text-position: middle !default; |
|
| 6 | ||
| 7 |
/* $carrousel-navigation: visible or none */ |
|
| 8 |
$carrousel-navigation: visible !default; |
|
| 9 | ||
| 10 |
/* $carrousel-navigation-bullet-color: color of active slide bullet */ |
|
| 11 |
$carrousel-navigation-bullet-color: $button-color !default; |
|
| 12 | ||
| 13 |
/* $carrousel-arrows: visible or none */ |
|
| 14 |
$carrousel-arrows: visible !default; |
|
| 15 | ||
| 16 |
div.carrousel-content {
|
|
| 17 |
position: relative; |
|
| 18 |
height: $carrousel-height; |
|
| 19 |
overflow: hidden; |
|
| 20 |
input {
|
|
| 21 |
visibility: hidden; |
|
| 22 |
} |
|
| 23 |
input + div {
|
|
| 24 |
position: absolute; |
|
| 25 |
top: 0; |
|
| 26 |
left: 0; |
|
| 27 |
width: 100%; |
|
| 28 |
height: 100%; |
|
| 29 |
opacity: 0; |
|
| 30 |
pointer-events: none; |
|
| 31 |
transition: opacity ease 0.5s; |
|
| 32 |
div.carrousel-item {
|
|
| 33 |
display: table; |
|
| 34 |
position: relative; |
|
| 35 |
background-position: center center; |
|
| 36 |
box-sizing: border-box; |
|
| 37 |
width: 100%; |
|
| 38 |
height: 100%; |
|
| 39 |
background-size: cover; |
|
| 40 |
padding: 10px; |
|
| 41 |
&::after {
|
|
| 42 |
content: ""; |
|
| 43 |
display: block; |
|
| 44 |
left: 0; |
|
| 45 |
top: 0; |
|
| 46 |
width: 100%; |
|
| 47 |
height: 100%; |
|
| 48 |
position: absolute; |
|
| 49 |
background: black; |
|
| 50 |
opacity: 0.3; |
|
| 51 |
} |
|
| 52 |
div.carrousel-item-content {
|
|
| 53 |
> a {
|
|
| 54 |
display: block; |
|
| 55 |
color: inherit; |
|
| 56 |
box-sizing: border-box; |
|
| 57 |
} |
|
| 58 |
position: relative; |
|
| 59 |
@if $carrousel-text-position == "middle" {
|
|
| 60 |
> a {
|
|
| 61 |
padding: 1rem; |
|
| 62 |
margin-left: 6rem; |
|
| 63 |
margin-right: 6rem; |
|
| 64 |
} |
|
| 65 |
display: table-cell; |
|
| 66 |
vertical-align: middle; |
|
| 67 |
p {
|
|
| 68 |
margin-left: auto; |
|
| 69 |
margin-right: auto; |
|
| 70 |
} |
|
| 71 |
} @else if $carrousel-text-position == "bottom-left" {
|
|
| 72 |
text-align: left; |
|
| 73 |
position: absolute; |
|
| 74 |
bottom: 1rem; |
|
| 75 |
} |
|
| 76 |
z-index: 100; |
|
| 77 |
line-height: 110%; |
|
| 78 |
p {
|
|
| 79 |
max-width: 40ex; |
|
| 80 |
} |
|
| 81 |
} |
|
| 82 |
color: white; |
|
| 83 |
font-size: 120%; |
|
| 84 |
text-align: center; |
|
| 85 |
} |
|
| 86 |
} |
|
| 87 | ||
| 88 |
input:checked + div {
|
|
| 89 |
opacity: 1; |
|
| 90 |
pointer-events: auto; |
|
| 91 |
} |
|
| 92 | ||
| 93 |
div.carrousel-nav {
|
|
| 94 |
position: absolute; |
|
| 95 |
@if $carrousel-navigation == "visible" {
|
|
| 96 |
display: block; |
|
| 97 |
} @else {
|
|
| 98 |
display: none; |
|
| 99 |
} |
|
| 100 |
bottom: 10px; |
|
| 101 |
text-align: center; |
|
| 102 |
width: 100%; |
|
| 103 |
height: 20px; |
|
| 104 |
z-index: 100; |
|
| 105 |
label {
|
|
| 106 |
display: inline-block; |
|
| 107 |
margin: 0 10px; |
|
| 108 |
width: 10px; |
|
| 109 |
height: 10px; |
|
| 110 |
border: 1px solid #fff; |
|
| 111 |
border-radius: 50%; |
|
| 112 |
cursor: pointer; |
|
| 113 |
transition: background-color 0.25s; |
|
| 114 |
} |
|
| 115 |
} |
|
| 116 |
a.carrousel-previous, |
|
| 117 |
a.carrousel-next {
|
|
| 118 |
@if $carrousel-arrows == visible {
|
|
| 119 |
display: block; |
|
| 120 |
} @else {
|
|
| 121 |
display: none; |
|
| 122 |
} |
|
| 123 |
position: absolute; |
|
| 124 |
top: calc(50% - 3rem); |
|
| 125 |
color: white; |
|
| 126 |
height: 6rem; |
|
| 127 |
line-height: 6rem; |
|
| 128 |
width: 6rem; |
|
| 129 |
cursor: pointer; |
|
| 130 |
z-index: 1000; |
|
| 131 |
text-align: center; |
|
| 132 |
&::after {
|
|
| 133 |
font-family: FontAwesome; |
|
| 134 |
font-size: 24px; |
|
| 135 |
} |
|
| 136 |
&.carrousel-previous {
|
|
| 137 |
left: 1ex; |
|
| 138 |
&::after {
|
|
| 139 |
content: "\f053"; // chevron-left; |
|
| 140 |
} |
|
| 141 |
} |
|
| 142 |
&.carrousel-next {
|
|
| 143 |
right: 1ex; |
|
| 144 |
&::after {
|
|
| 145 |
content: "\f054"; // chevron-right; |
|
| 146 |
} |
|
| 147 |
} |
|
| 148 |
@media screen and (max-width: $nav-mobile-limit) {
|
|
| 149 |
display: none; |
|
| 150 |
} |
|
| 151 |
} |
|
| 152 | ||
| 153 |
@for $i from 1 through 10 {
|
|
| 154 |
#carrousel-#{$i}:checked ~ .carrousel-nav label[for="carrousel-#{$i}"] {
|
|
| 155 |
background-color: $carrousel-navigation-bullet-color; |
|
| 156 |
} |
|
| 157 |
} |
|
| 158 |
} |
|
| static/includes/_publik.scss | ||
|---|---|---|
| 10 | 10 |
@import 'wcs'; |
| 11 | 11 |
@import 'misc'; |
| 12 | 12 |
@import 'a11y'; |
| 13 |
@import 'carrousel'; |
|
| 13 | 14 |
@import 'library'; |
| templates/combo/cells/carrousel/menu-cell.html | ||
|---|---|---|
| 1 |
{% load assets %}
|
|
| 2 |
<div class="carrousel-content"> |
|
| 3 |
{% for menuitem in menuitems %}
|
|
| 4 |
<input type="radio" name="carrousel-{{cell.id}}"
|
|
| 5 |
id="carrousel-{{forloop.counter}}"
|
|
| 6 |
{% if forloop.first %}checked{% endif %}>
|
|
| 7 |
<div class="slide"> |
|
| 8 |
{% block carrousel-item %}
|
|
| 9 |
<div class="carrousel-item" |
|
| 10 |
style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
|
|
| 11 |
<div class="carrousel-item-content"> |
|
| 12 |
{% block carrousel-item-content %}
|
|
| 13 |
<a href="{{menuitem.page.get_online_url}}">
|
|
| 14 |
<strong>{{ menuitem.page.title }}</strong>
|
|
| 15 |
{% if menuitem.page.description %}<p>{{ menuitem.page.description }}</p>{% endif %}
|
|
| 16 |
</a> |
|
| 17 |
{% endblock %}
|
|
| 18 |
</div> |
|
| 19 |
</div> |
|
| 20 |
{% endblock %}
|
|
| 21 |
</div> |
|
| 22 |
{% endfor %}
|
|
| 23 |
<a class="carrousel-previous"></a> |
|
| 24 |
{% block carrousel-navigation %}
|
|
| 25 |
<div class="carrousel-nav"> |
|
| 26 |
{% for menuitem in menuitems %}
|
|
| 27 |
<label for="carrousel-{{forloop.counter}}"></label>
|
|
| 28 |
{% endfor %}
|
|
| 29 |
</div> |
|
| 30 |
{% endblock %}
|
|
| 31 |
<a class="carrousel-next"></a> |
|
| 32 |
</div> |
|
| 33 |
<script> |
|
| 34 |
$(function() {
|
|
| 35 |
function next() {
|
|
| 36 |
if ($('.carrousel-content input:checked ~ input').length) {
|
|
| 37 |
$('.carrousel-content input:checked ~ input').first().click();
|
|
| 38 |
} else {
|
|
| 39 |
$('.carrousel-content input').first().click();
|
|
| 40 |
} |
|
| 41 |
} |
|
| 42 |
function previous() {
|
|
| 43 |
if ($('.carrousel-content input ~ input:checked').length) {
|
|
| 44 |
$('.carrousel-content input:checked').prev().prev().click();
|
|
| 45 |
} else {
|
|
| 46 |
$('.carrousel-content input').last().click();
|
|
| 47 |
} |
|
| 48 |
} |
|
| 49 |
var timeout_id = setInterval(next, 5000); |
|
| 50 |
$('.carrousel-content label').on('click', function() {
|
|
| 51 |
clearInterval(timeout_id); |
|
| 52 |
}); |
|
| 53 |
$('a.carrousel-previous').on('click', function() {
|
|
| 54 |
clearInterval(timeout_id); |
|
| 55 |
previous(); |
|
| 56 |
}); |
|
| 57 |
$('a.carrousel-next').on('click', function() {
|
|
| 58 |
clearInterval(timeout_id); |
|
| 59 |
next(); |
|
| 60 |
}); |
|
| 61 | ||
| 62 |
var touch_start = null; |
|
| 63 |
$('.carrousel-item').on('touchstart', function(ev) {
|
|
| 64 |
touch_start = ev.originalEvent.touches[0].pageX; |
|
| 65 |
}); |
|
| 66 |
$('.carrousel-item').on('touchend', function(ev) {
|
|
| 67 |
var touch_end = ev.originalEvent.changedTouches[0].pageX; |
|
| 68 |
var diff = touch_start - touch_end; |
|
| 69 |
touch_start = null; |
|
| 70 |
clearInterval(timeout_id); |
|
| 71 |
var width = $('body').width();
|
|
| 72 |
if (diff*2 > width) {
|
|
| 73 |
previous(); |
|
| 74 |
} |
|
| 75 |
if (diff*2 < -width) {
|
|
| 76 |
next(); |
|
| 77 |
} |
|
| 78 |
}); |
|
| 79 |
}); |
|
| 80 |
</script> |
|
| 0 |
- |
|