Projet

Général

Profil

0001-general-add-possibility-to-turn-menu-cells-in-carrou.patch

Frédéric Péters, 07 déc. 2018 11:53

Télécharger (8,7 ko)

Voir les différences:

Subject: [PATCH] general: add possibility to turn menu cells in carrousels
 (#23520)

 help/fr/misc-scss.page                        |  42 +++++
 static/includes/_carrousel.scss               | 158 ++++++++++++++++++
 static/includes/_publik.scss                  |   1 +
 .../combo/cells/carrousel/menu-cell.html      |  81 +++++++++
 4 files changed, 282 insertions(+)
 create mode 100644 static/includes/_carrousel.scss
 create mode 100644 templates/combo/cells/carrousel/menu-cell.html
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
-