Project

General

Profile

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

Frédéric Péters, 05 Dec 2018 01:45 PM

Download (8.58 KB)

View differences:

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      |  80 +++++++++
 4 files changed, 281 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-#{$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
-