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-radio-#{$i}:checked ~ .carrousel-nav label.carrousel-label-#{$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 |
class="carrousel-radio-{{forloop.counter}}" |
|
6 |
id="carrousel-{{cell.id}}-{{forloop.counter}}" |
|
7 |
{% if forloop.first %}checked{% endif %}> |
|
8 |
<div class="slide"> |
|
9 |
{% block carrousel-item %} |
|
10 |
<div class="carrousel-item" |
|
11 |
style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})"> |
|
12 |
<div class="carrousel-item-content"> |
|
13 |
{% block carrousel-item-content %} |
|
14 |
<a href="{{menuitem.page.get_online_url}}"> |
|
15 |
<strong>{{ menuitem.page.title }}</strong> |
|
16 |
{% if menuitem.page.description %}<p>{{ menuitem.page.description }}</p>{% endif %} |
|
17 |
</a> |
|
18 |
{% endblock %} |
|
19 |
</div> |
|
20 |
</div> |
|
21 |
{% endblock %} |
|
22 |
</div> |
|
23 |
{% endfor %} |
|
24 |
<a class="carrousel-previous"></a> |
|
25 |
{% block carrousel-navigation %} |
|
26 |
<div class="carrousel-nav"> |
|
27 |
{% for menuitem in menuitems %} |
|
28 |
<label class="carrousel-label-{{forloop.counter}}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label> |
|
29 |
{% endfor %} |
|
30 |
</div> |
|
31 |
{% endblock %} |
|
32 |
<a class="carrousel-next"></a> |
|
33 |
</div> |
|
34 |
<script> |
|
35 |
$(function() { |
|
36 |
function next() { |
|
37 |
if ($('.carrousel-content input:checked ~ input').length) { |
|
38 |
$('.carrousel-content input:checked ~ input').first().click(); |
|
39 |
} else { |
|
40 |
$('.carrousel-content input').first().click(); |
|
41 |
} |
|
42 |
} |
|
43 |
function previous() { |
|
44 |
if ($('.carrousel-content input ~ input:checked').length) { |
|
45 |
$('.carrousel-content input:checked').prev().prev().click(); |
|
46 |
} else { |
|
47 |
$('.carrousel-content input').last().click(); |
|
48 |
} |
|
49 |
} |
|
50 |
var timeout_id = setInterval(next, 5000); |
|
51 |
$('.carrousel-content label').on('click', function() { |
|
52 |
clearInterval(timeout_id); |
|
53 |
}); |
|
54 |
$('a.carrousel-previous').on('click', function() { |
|
55 |
clearInterval(timeout_id); |
|
56 |
previous(); |
|
57 |
}); |
|
58 |
$('a.carrousel-next').on('click', function() { |
|
59 |
clearInterval(timeout_id); |
|
60 |
next(); |
|
61 |
}); |
|
62 | ||
63 |
var touch_start = null; |
|
64 |
$('.carrousel-item').on('touchstart', function(ev) { |
|
65 |
touch_start = ev.originalEvent.touches[0].pageX; |
|
66 |
}); |
|
67 |
$('.carrousel-item').on('touchend', function(ev) { |
|
68 |
var touch_end = ev.originalEvent.changedTouches[0].pageX; |
|
69 |
var diff = touch_start - touch_end; |
|
70 |
touch_start = null; |
|
71 |
clearInterval(timeout_id); |
|
72 |
var width = $('body').width(); |
|
73 |
if (diff*2 > width) { |
|
74 |
previous(); |
|
75 |
} |
|
76 |
if (diff*2 < -width) { |
|
77 |
next(); |
|
78 |
} |
|
79 |
}); |
|
80 |
}); |
|
81 |
</script> |
|
0 |
- |