From e227bd5d50efd781fcc3afc36f339839df9d856a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 1 May 2018 18:49:33 +0200
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

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 225a1f1d..da3d4cf5 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -477,4 +477,46 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 </table>
 </section>
 
+<section>
+ <title>Carrousels</title>
+
+ <p>
+  Une cellule menu prendra la forme « carrousel » si elle est définie avec
+  « carrousel » comme slug.
+ </p>
+
+<table shade="rows">
+ <tr>
+  <td><p><code>$carrousel-height</code></p></td>
+  <td><p>Hauteur du carrousel</p></td>
+  <td><p><var>20rem</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-text-position</code></p></td>
+  <td><p>Position du texte des différentes pages; les valeurs possibles sont
+  middle (milieu de page) et bottom-left (en bas à gauche).</p></td>
+  <td><p><var>middle</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-navigation</code></p></td>
+  <td><p>Détermine si la navigation permettant de passer d'un élément à
+  l'autre est affichée. (visible ou none)</p></td>
+  <td><p><var>visible</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-navigation-bullet-color</code></p></td>
+  <td><p>Couleur du disque de navigation.</p></td>
+  <td><p><var>$button-color</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$carrousel-arrows</code></p></td>
+  <td><p>Détermine si les flèches (gauche/droite) permettant de passer d'un
+  élément à l'autre sont affichées. (visible ou none)</p></td>
+  <td><p><var>visible</var></p></td>
+ </tr>
+ <tr>
+</table>
+
+</section>
+
 </page>
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
new file mode 100644
index 00000000..6b86ede3
--- /dev/null
+++ b/static/includes/_carrousel.scss
@@ -0,0 +1,158 @@
+/* $carrousel-height: height of carrousel image */
+$carrousel-height: 20rem !default;
+
+/* $carrousel-text-position: position of text (middle, bottom-left) */
+$carrousel-text-position: middle !default;
+
+/* $carrousel-navigation: visible or none */
+$carrousel-navigation: visible !default;
+
+/* $carrousel-navigation-bullet-color: color of active slide bullet */
+$carrousel-navigation-bullet-color: $button-color !default;
+
+/* $carrousel-arrows: visible or none */
+$carrousel-arrows: visible !default;
+
+div.carrousel-content {
+	position: relative;
+	height: $carrousel-height;
+	overflow: hidden;
+	input {
+		visibility: hidden;
+	}
+	input + div {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity ease 0.5s;
+		div.carrousel-item {
+			display: table;
+			position: relative;
+			background-position: center center;
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			padding: 10px;
+			&::after {
+				content: "";
+				display: block;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				background: black;
+				opacity: 0.3;
+			}
+			div.carrousel-item-content {
+				> a {
+					display: block;
+					color: inherit;
+					box-sizing: border-box;
+				}
+				position: relative;
+				@if $carrousel-text-position == "middle" {
+					> a {
+						padding: 1rem;
+						margin-left: 6rem;
+						margin-right: 6rem;
+					}
+					display: table-cell;
+					vertical-align: middle;
+					p {
+						margin-left: auto;
+						margin-right: auto;
+					}
+				} @else if $carrousel-text-position == "bottom-left" {
+					text-align: left;
+					position: absolute;
+					bottom: 1rem;
+				}
+				z-index: 100;
+				line-height: 110%;
+				p {
+					max-width: 40ex;
+				}
+			}
+			color: white;
+			font-size: 120%;
+			text-align: center;
+		}
+	}
+
+	input:checked + div {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	div.carrousel-nav {
+		position: absolute;
+		@if $carrousel-navigation == "visible" {
+			display: block;
+		} @else {
+			display: none;
+		}
+		bottom: 10px;
+		text-align: center;
+		width: 100%;
+		height: 20px;
+		z-index: 100;
+		label {
+			display: inline-block;
+			margin: 0 10px;
+			width: 10px;
+			height: 10px;
+			border: 1px solid #fff;
+			border-radius: 50%;
+			cursor: pointer;
+			transition: background-color 0.25s;
+		}
+	}
+	a.carrousel-previous,
+	a.carrousel-next {
+		@if $carrousel-arrows == visible {
+			display: block;
+		} @else {
+			display: none;
+		}
+		position: absolute;
+		top: calc(50% - 3rem);
+		color: white;
+		height: 6rem;
+		line-height: 6rem;
+		width: 6rem;
+		cursor: pointer;
+		z-index: 1000;
+		text-align: center;
+		&::after {
+			font-family: FontAwesome;
+			font-size: 24px;
+		}
+		&.carrousel-previous {
+			left: 1ex;
+			&::after {
+				content: "\f053";  // chevron-left;
+			}
+		}
+		&.carrousel-next {
+			right: 1ex;
+			&::after {
+				content: "\f054";  // chevron-right;
+			}
+		}
+		@media screen and (max-width: $nav-mobile-limit) {
+			display: none;
+		}
+	}
+
+	@for $i from 1 through 10 {
+		.carrousel-radio-#{$i}:checked ~ .carrousel-nav label.carrousel-label-#{$i} {
+			background-color: $carrousel-navigation-bullet-color;
+		}
+	}
+}
diff --git a/static/includes/_publik.scss b/static/includes/_publik.scss
index 90135489..7431873a 100644
--- a/static/includes/_publik.scss
+++ b/static/includes/_publik.scss
@@ -10,4 +10,5 @@
 @import 'wcs';
 @import 'misc';
 @import 'a11y';
+@import 'carrousel';
 @import 'library';
diff --git a/templates/combo/cells/carrousel/menu-cell.html b/templates/combo/cells/carrousel/menu-cell.html
new file mode 100644
index 00000000..916dd892
--- /dev/null
+++ b/templates/combo/cells/carrousel/menu-cell.html
@@ -0,0 +1,81 @@
+{% load assets %}
+<div class="carrousel-content">
+ {% for menuitem in menuitems %}
+  <input type="radio" name="carrousel-{{cell.id}}"
+     class="carrousel-radio-{{forloop.counter}}"
+     id="carrousel-{{cell.id}}-{{forloop.counter}}"
+     {% if forloop.first %}checked{% endif %}>
+  <div class="slide">
+     {% block carrousel-item %}
+     <div class="carrousel-item"
+          style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
+      <div class="carrousel-item-content">
+       {% block carrousel-item-content %}
+       <a href="{{menuitem.page.get_online_url}}">
+       <strong>{{ menuitem.page.title }}</strong>
+       {% if menuitem.page.description %}<p>{{ menuitem.page.description }}</p>{% endif %}
+       </a>
+       {% endblock %}
+      </div>
+     </div>
+     {% endblock %}
+  </div>
+ {% endfor %}
+ <a class="carrousel-previous"></a>
+ {% block carrousel-navigation %}
+ <div class="carrousel-nav">
+ {% for menuitem in menuitems %}
+ <label class="carrousel-label-{{forloop.counter}}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label>
+ {% endfor %}
+ </div>
+ {% endblock %}
+ <a class="carrousel-next"></a>
+</div>
+<script>
+$(function() {
+  function next() {
+    if ($('.carrousel-content input:checked ~ input').length) {
+      $('.carrousel-content input:checked ~ input').first().click();
+    } else {
+      $('.carrousel-content input').first().click();
+    }
+  }
+  function previous() {
+    if ($('.carrousel-content input ~ input:checked').length) {
+      $('.carrousel-content input:checked').prev().prev().click();
+    } else {
+      $('.carrousel-content input').last().click();
+    }
+  }
+  var timeout_id = setInterval(next, 5000);
+  $('.carrousel-content label').on('click', function() {
+    clearInterval(timeout_id);
+  });
+  $('a.carrousel-previous').on('click', function() {
+    clearInterval(timeout_id);
+    previous();
+  });
+  $('a.carrousel-next').on('click', function() {
+    clearInterval(timeout_id);
+    next();
+  });
+
+  var touch_start = null;
+  $('.carrousel-item').on('touchstart', function(ev) {
+    touch_start = ev.originalEvent.touches[0].pageX;
+  });
+  $('.carrousel-item').on('touchend', function(ev) {
+    var touch_end = ev.originalEvent.changedTouches[0].pageX;
+    var diff = touch_start - touch_end;
+    touch_start = null;
+    clearInterval(timeout_id);
+    var width = $('body').width();
+    if (diff*2 > width) {
+      previous();
+    }
+    if (diff*2 < -width) {
+      next();
+    }
+  });
+});
+</script>
-- 
2.20.0.rc2