From 0a1b20dd4ecc13fa834579bbf64ea7b67bde6848 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Wed, 18 Sep 2019 19:34:56 +0200 Subject: [PATCH 1/6] Add `accepte_charte` field to `Participant` model --- .../0017_participant_accepte_charte.py | 18 ++++++++++++++++++ bda/models.py | 1 + 2 files changed, 19 insertions(+) create mode 100644 bda/migrations/0017_participant_accepte_charte.py diff --git a/bda/migrations/0017_participant_accepte_charte.py b/bda/migrations/0017_participant_accepte_charte.py new file mode 100644 index 00000000..6bd32d8f --- /dev/null +++ b/bda/migrations/0017_participant_accepte_charte.py @@ -0,0 +1,18 @@ +# Generated by Django 2.2 on 2019-09-18 16:34 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [("bda", "0016_delete_participant_paid")] + + operations = [ + migrations.AddField( + model_name="participant", + name="accepte_charte", + field=models.BooleanField( + default=False, verbose_name="A accepté la charte BdA" + ), + ) + ] diff --git a/bda/models.py b/bda/models.py index 1a072eb7..f4a0fac6 100644 --- a/bda/models.py +++ b/bda/models.py @@ -195,6 +195,7 @@ class Participant(models.Model): Spectacle, through="Attribution", related_name="attributed_to" ) tirage = models.ForeignKey(Tirage, on_delete=models.CASCADE) + accepte_charte = models.BooleanField("A accepté la charte BdA", default=False) choicesrevente = models.ManyToManyField( Spectacle, related_name="subscribed", blank=True ) From 5db7eef1d78e2d6d0e2f03837720b3d8e5b94187 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Wed, 18 Sep 2019 19:36:02 +0200 Subject: [PATCH 2/6] Add charte popup and functionality --- bda/templates/bda/inscription-tirage.html | 38 ++++++++++++++++++++++- bda/views.py | 3 ++ 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/bda/templates/bda/inscription-tirage.html b/bda/templates/bda/inscription-tirage.html index 9a39df6f..6c86e356 100644 --- a/bda/templates/bda/inscription-tirage.html +++ b/bda/templates/bda/inscription-tirage.html @@ -4,6 +4,8 @@ {% block extra_head %} + + {% endblock %} @@ -118,11 +120,45 @@ var django = { }); - +

1: cette liste de vœux est ordonnée (du plus important au moins important), pour ajuster la priorité vous pouvez déplacer chaque vœu.

+ +{% if not charte %} + +{% endif %} {% endblock %} diff --git a/bda/views.py b/bda/views.py index 6a0e7ec7..0c4d7665 100644 --- a/bda/views.py +++ b/bda/views.py @@ -211,6 +211,8 @@ def inscription(request, tirage_id): if formset.is_valid(): formset.save() formset = BdaFormSet(instance=participant) + participant.accepte_charte = True + participant.save() messages.success( request, "Votre inscription a été mise à jour avec succès !" ) @@ -238,6 +240,7 @@ def inscription(request, tirage_id): "total_price": total_price, "dbstate": dbstate, "tirage": tirage, + "charte": participant.accepte_charte, }, ) From 411e66b13c842b6060fdb86637f8e0f95c88d222 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Wed, 18 Sep 2019 19:36:14 +0200 Subject: [PATCH 3/6] Style charte popup --- bda/static/css/bda.css | 73 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/bda/static/css/bda.css b/bda/static/css/bda.css index 4d6ecfbd..767bec4b 100644 --- a/bda/static/css/bda.css +++ b/bda/static/css/bda.css @@ -46,3 +46,76 @@ td { .spectacle-passe { opacity:0.5; } + +/** JQuery-Confirm box **/ + +.jconfirm .jconfirm-box { + padding:0; + border-radius:0 !important; + font-family:Roboto; +} + +.jconfirm .jconfirm-box .content-pane { + border-bottom:1px solid #ddd; + margin: 0px !important; +} + +.jconfirm .jconfirm-box .content { + padding: 5px; +} + +.jconfirm .jconfirm-box .content-pane { + border-bottom:1px solid #ddd; + margin: 0px !important; +} + +.jconfirm .jconfirm-box .content { + padding: 10px; +} + +.jconfirm .jconfirm-box .content a, +.jconfirm .jconfirm-box .content a:hover { + color: #D81138; + font-weight: bold; +} + +.jconfirm .jconfirm-box .buttons { + margin-top:-6px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */ + padding:0; + height:40px; +} + +.jconfirm .jconfirm-box .buttons button { + min-width:40px; + height:100%; + margin:0; + margin:0 !important; + border-radius: 0 !important; +} + +.jconfirm .jconfirm-box .buttons button:first-child:focus, +.jconfirm .jconfirm-box .buttons button:first-child:hover { + color:#FFF !important; + background:forestgreen !important; +} + +.jconfirm .jconfirm-box .buttons button:nth-child(2):focus, +.jconfirm .jconfirm-box .buttons button:nth-child(2):hover { + color:#FFF !important; + background:#D93A32 !important; +} + +.jconfirm .jconfirm-box div.title-c .title { + display: block; + + padding:0 15px; + height:40px; + line-height:40px; + + font-family:Dosis; + font-size:20px; + font-weight:bold; + + color:#FFF; + background-color:rgb(222, 130, 107); +} \ No newline at end of file From 07012132252fbf9db23e3d5727cc03abd6dc20bf Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Wed, 18 Sep 2019 20:39:58 +0200 Subject: [PATCH 4/6] Copy jconfirm to `shared` --- bda/templates/bda/inscription-tirage.html | 4 +- .../static/vendor/jquery/jquery-confirm.css | 519 +++++++++++++++ shared/static/vendor/jquery/jquery-confirm.js | 607 ++++++++++++++++++ 3 files changed, 1128 insertions(+), 2 deletions(-) create mode 100644 shared/static/vendor/jquery/jquery-confirm.css create mode 100644 shared/static/vendor/jquery/jquery-confirm.js diff --git a/bda/templates/bda/inscription-tirage.html b/bda/templates/bda/inscription-tirage.html index 6c86e356..6c5907f3 100644 --- a/bda/templates/bda/inscription-tirage.html +++ b/bda/templates/bda/inscription-tirage.html @@ -4,8 +4,8 @@ {% block extra_head %} - - + + {% endblock %} diff --git a/shared/static/vendor/jquery/jquery-confirm.css b/shared/static/vendor/jquery/jquery-confirm.css new file mode 100644 index 00000000..e11388ef --- /dev/null +++ b/shared/static/vendor/jquery/jquery-confirm.css @@ -0,0 +1,519 @@ +/*! + * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/) + * Author: boniface pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2016 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + */ +@-webkit-keyframes jconfirm-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes jconfirm-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +body.jconfirm-noscroll { + overflow: hidden !important; +} +.jconfirm { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999999; + font-family: inherit; + overflow: hidden; +} +.jconfirm .jconfirm-bg { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + -webkit-transition: all .4s; + transition: all .4s; +} +.jconfirm .jconfirm-bg.seen { + opacity: 1; +} +.jconfirm .jconfirm-scrollpane { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow-y: auto; + -webkit-perspective: 500px; + perspective: 500px; + -webkit-perspective-origin: center; + perspective-origin: center; +} +.jconfirm .jconfirm-box { + background: white; + border-radius: 4px; + position: relative; + outline: none; + padding: 15px 15px 0; +} +.jconfirm .jconfirm-box div.closeIcon { + height: 20px; + width: 20px; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: .6; + text-align: center; + -webkit-transition: opacity 0.1s ease-in; + transition: opacity 0.1s ease-in; + display: none; + font-size: 27px; + line-height: 14px; +} +.jconfirm .jconfirm-box div.closeIcon .fa { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon .glyphicon { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon .zmdi { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon:hover { + opacity: 1; +} +.jconfirm .jconfirm-box div.title-c { + display: block; + font-size: 22px; + line-height: 20px; +} +.jconfirm .jconfirm-box div.title-c .icon-c { + font-size: inherit; + padding-bottom: 15px; + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} +.jconfirm .jconfirm-box div.title-c .icon-c i { + vertical-align: middle; +} +.jconfirm .jconfirm-box div.title-c .icon-c:empty { + display: none; +} +.jconfirm .jconfirm-box div.title-c .title { + font-size: inherit; + font-family: inherit; + display: inline-block; + vertical-align: middle; + padding-bottom: 15px; +} +.jconfirm .jconfirm-box div.title-c .title:empty { + display: none; +} +.jconfirm .jconfirm-box div.content-pane { + margin-bottom: 15px; + height: auto; + -webkit-transition: height 0.4s ease-in; + transition: height 0.4s ease-in; + display: inline-block; + width: 100%; + position: relative; +} +.jconfirm .jconfirm-box div.content-pane .content { + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + right: 0; +} +.jconfirm .jconfirm-box div.content-pane .content img { + width: 100%; + height: auto; +} +.jconfirm .jconfirm-box div.content-pane .content:empty { + display: none; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading { + height: 40px; + position: relative; + opacity: 0.6; + display: block; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading:before { + content: ''; + height: 20px; + width: 20px; + border: solid 2px transparent; + position: absolute; + left: 50%; + margin-left: -10px; + border-radius: 50%; + -webkit-animation: jconfirm-rotate 1s infinite linear; + animation: jconfirm-rotate 1s infinite linear; + border-bottom-color: #aaa; + top: 50%; + margin-top: -10px; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading:after { + content: ''; + position: absolute; + left: 50%; + margin-left: -15px; +} +.jconfirm .jconfirm-box .buttons { + padding-bottom: 15px; +} +.jconfirm .jconfirm-box .buttons button + button { + margin-left: 5px; +} +.jconfirm .jquery-clear { + clear: both; +} +.jconfirm.rtl { + direction: rtl; +} +.jconfirm.rtl div.closeIcon { + left: 12px; + right: auto; +} +.jconfirm.jconfirm-white .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.2); +} +.jconfirm.jconfirm-white .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + border-radius: 5px; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons { + float: right; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button { + border: none; + background-image: none; + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + -webkit-transition: background .1s; + transition: background .1s; + color: white; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default { + box-shadow: none; + color: #333; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover { + background: #ddd; +} +.jconfirm.jconfirm-black .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.5); +} +.jconfirm.jconfirm-black .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + background: #444; + border-radius: 5px; + color: white; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons { + float: right; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button { + border: none; + background-image: none; + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + -webkit-transition: background .1s; + transition: background .1s; + color: white; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default { + box-shadow: none; + color: #fff; + background: none; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default:hover { + background: #666; +} +.jconfirm .jconfirm-box.hilight { + -webkit-animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@-webkit-keyframes hilight { + 10%, + 90% { + -webkit-transform: translate3d(-2px, 0, 0); + transform: translate3d(-2px, 0, 0); + } + 20%, + 80% { + -webkit-transform: translate3d(4px, 0, 0); + transform: translate3d(4px, 0, 0); + } + 30%, + 50%, + 70% { + -webkit-transform: translate3d(-8px, 0, 0); + transform: translate3d(-8px, 0, 0); + } + 40%, + 60% { + -webkit-transform: translate3d(8px, 0, 0); + transform: translate3d(8px, 0, 0); + } +} +@keyframes hilight { + 10%, + 90% { + -webkit-transform: translate3d(-2px, 0, 0); + transform: translate3d(-2px, 0, 0); + } + 20%, + 80% { + -webkit-transform: translate3d(4px, 0, 0); + transform: translate3d(4px, 0, 0); + } + 30%, + 50%, + 70% { + -webkit-transform: translate3d(-8px, 0, 0); + transform: translate3d(-8px, 0, 0); + } + 40%, + 60% { + -webkit-transform: translate3d(8px, 0, 0); + transform: translate3d(8px, 0, 0); + } +} +/*Transition rules*/ +.jconfirm { + -webkit-perspective: 400px; + perspective: 400px; +} +.jconfirm .jconfirm-box { + opacity: 1; + -webkit-transition-property: -webkit-transform, opacity, box-shadow; + transition-property: transform, opacity, box-shadow; +} +.jconfirm .jconfirm-box.anim-top, +.jconfirm .jconfirm-box.anim-left, +.jconfirm .jconfirm-box.anim-right, +.jconfirm .jconfirm-box.anim-bottom, +.jconfirm .jconfirm-box.anim-opacity, +.jconfirm .jconfirm-box.anim-zoom, +.jconfirm .jconfirm-box.anim-scale, +.jconfirm .jconfirm-box.anim-none, +.jconfirm .jconfirm-box.anim-rotate, +.jconfirm .jconfirm-box.anim-rotatex, +.jconfirm .jconfirm-box.anim-rotatey, +.jconfirm .jconfirm-box.anim-scaley, +.jconfirm .jconfirm-box.anim-scalex { + opacity: 0; +} +.jconfirm .jconfirm-box.anim-rotate { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.jconfirm .jconfirm-box.anim-rotatex { + -webkit-transform: rotateX(90deg); + transform: rotateX(90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotatexr { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotatey { + -webkit-transform: rotatey(90deg); + -ms-transform: rotatey(90deg); + transform: rotatey(90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotateyr { + -webkit-transform: rotatey(-90deg); + -ms-transform: rotatey(-90deg); + transform: rotatey(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-scaley { + -webkit-transform: scaley(1.5); + -ms-transform: scaley(1.5); + transform: scaley(1.5); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-scalex { + -webkit-transform: scalex(1.5); + -ms-transform: scalex(1.5); + transform: scalex(1.5); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-top { + -webkit-transform: translate(0px, -100px); + -ms-transform: translate(0px, -100px); + transform: translate(0px, -100px); +} +.jconfirm .jconfirm-box.anim-left { + -webkit-transform: translate(-100px, 0px); + -ms-transform: translate(-100px, 0px); + transform: translate(-100px, 0px); +} +.jconfirm .jconfirm-box.anim-right { + -webkit-transform: translate(100px, 0px); + -ms-transform: translate(100px, 0px); + transform: translate(100px, 0px); +} +.jconfirm .jconfirm-box.anim-bottom { + -webkit-transform: translate(0px, 100px); + -ms-transform: translate(0px, 100px); + transform: translate(0px, 100px); +} +.jconfirm .jconfirm-box.anim-zoom { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.jconfirm .jconfirm-box.anim-scale { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); +} +.jconfirm .jconfirm-box.anim-none { + display: none; +} +.jconfirm.jconfirm-supervan .jconfirm-bg { + background-color: rgba(54, 70, 93, 0.95); +} +.jconfirm.jconfirm-supervan .jconfirm-box { + background-color: transparent; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon { + color: white; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.title-c { + text-align: center; + color: white; + font-size: 28px; + font-weight: normal; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.title-c > * { + padding-bottom: 25px; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.content-pane { + margin-bottom: 25px; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.content { + text-align: center; + color: white; +} +.jconfirm.jconfirm-supervan .jconfirm-box .buttons { + text-align: center; +} +.jconfirm.jconfirm-supervan .jconfirm-box .buttons button { + font-size: 16px; + border-radius: 2px; + background: #303f53; + text-shadow: none; + border: none; + color: white; + padding: 10px; + min-width: 100px; +} +.jconfirm.jconfirm-material .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.67); +} +.jconfirm.jconfirm-material .jconfirm-box { + background-color: white; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); + padding: 30px 25px 10px 25px; +} +.jconfirm.jconfirm-material .jconfirm-box div.closeIcon { + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-material .jconfirm-box div.title-c { + color: rgba(0, 0, 0, 0.87); + font-size: 22px; + font-weight: bold; +} +.jconfirm.jconfirm-material .jconfirm-box div.content { + text-align: left; + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-material .jconfirm-box .buttons { + text-align: right; +} +.jconfirm.jconfirm-material .jconfirm-box .buttons button { + text-transform: uppercase; + font-weight: 500; +} +.jconfirm.jconfirm-bootstrap .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.21); +} +.jconfirm.jconfirm-bootstrap .jconfirm-box { + background-color: white; + box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2); + border: solid 1px rgba(0, 0, 0, 0.4); + padding: 15px 0 0; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.closeIcon { + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.title-c { + color: rgba(0, 0, 0, 0.87); + font-size: 22px; + font-weight: bold; + padding-left: 15px; + padding-right: 15px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.content { + text-align: left; + color: rgba(0, 0, 0, 0.87); + padding: 0px 15px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons { + text-align: right; + padding: 0px 0 0px; + margin: -5px 0 0px; + border-top: solid 1px #ddd; + overflow: hidden; + border-radius: 0 0 4px 4px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons button { + font-weight: 500; + border-radius: 0px; + margin: 0; + border-left: solid 1px #ddd; +} diff --git a/shared/static/vendor/jquery/jquery-confirm.js b/shared/static/vendor/jquery/jquery-confirm.js new file mode 100644 index 00000000..6f645ccd --- /dev/null +++ b/shared/static/vendor/jquery/jquery-confirm.js @@ -0,0 +1,607 @@ +/*! + * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/) + * Author: Boniface Pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2015 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + * + * Modifié par: Aurélien Delobelle + * Contact: aure.delo@gmail.com + * Contenu des modifications: + * Cas où il y a un input avec autofocus dans 'content' -> Fix + */ + +if (typeof jQuery === 'undefined') { + throw new Error('jquery-confirm requires jQuery'); +} + +var jconfirm, Jconfirm; +(function ($) { + "use strict"; + + $.fn.confirm = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + + }; + /* + * Alias of $.confirm to emulate native confirm() + */ + $(this).each(function () { + var $this = $(this); + $this.on('click', function (e) { + e.preventDefault(); + var jcOption = $.extend({}, options); + if ($this.attr('data-title')) + jcOption['title'] = $this.attr('data-title'); + if ($this.attr('data-content')) + jcOption['content'] = $this.attr('data-content'); + + jcOption['$target'] = $this; + if ($this.attr('href') && !options['confirm']) + jcOption['confirm'] = function () { + location.href = $this.attr('href'); + }; + $.confirm(jcOption); + }); + }); + return $(this); + }; + $.confirm = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + return jconfirm(options); + }; + $.alert = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + options.cancelButton = false; + return jconfirm(options); + }; + $.dialog = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + options.cancelButton = false; + options.confirmButton = false; + options.confirmKeys = [13]; + return jconfirm(options); + }; + jconfirm = function (options) { + if (typeof options === 'undefined') options = {}; + /* + * initial function for calling. + */ + if (jconfirm.defaults) { + /* + * Merge global defaults with plugin defaults + */ + $.extend(jconfirm.pluginDefaults, jconfirm.defaults); + } + /* + * merge options with plugin defaults. + */ + var options = $.extend({}, jconfirm.pluginDefaults, options); + return new Jconfirm(options); + }; + Jconfirm = function (options) { + /* + * constructor function Jconfirm, + * options = user options. + */ + $.extend(this, options); + this._init(); + }; + Jconfirm.prototype = { + _init: function () { + var that = this; + this._rand = Math.round(Math.random() * 99999); + this._buildHTML(); + this._bindEvents(); + setTimeout(function () { + that.open(); + that._watchContent(); + }, 0); + }, + _buildHTML: function () { + var that = this; + /* + * Prefixing animations. + */ + this.animation = 'anim-' + this.animation.toLowerCase(); + this.closeAnimation = 'anim-' + this.closeAnimation.toLowerCase(); + this.theme = 'jconfirm-' + this.theme.toLowerCase(); + if (this.animation == 'anim-none') + this.animationSpeed = 0; + + this._lastFocused = $('body').find(':focus'); + + /* + * Append html. + */ + this.$el = $(this.template).appendTo(this.container).addClass(this.theme); + this.$el.find('.jconfirm-box-container').addClass(this.columnClass); + this.$el.find('.jconfirm-bg').css(this._getCSS(this.animationSpeed, 1)); + this.$el.find('.jconfirm-bg').css('opacity', this.opacity); + this.$b = this.$el.find('.jconfirm-box').css(this._getCSS(this.animationSpeed, this.animationBounce)).addClass(this.animation); + this.$body = this.$b; // alias + + /* + * Add rtl class if rtl option has selected + */ + if (this.rtl) + this.$el.addClass("rtl"); + + this._contentReady = $.Deferred(); + this._modalReady = $.Deferred(); + + /* + * Setup title contents + */ + this.$title = this.$el.find('.title'); + this.contentDiv = this.$el.find('div.content'); + this.$content = this.contentDiv; // alias + this.$contentPane = this.$el.find('.content-pane'); + this.$icon = this.$el.find('.icon-c'); + this.$closeIcon = this.$el.find('.closeIcon'); + this.$contentPane.css(this._getCSS(this.animationSpeed, 1)); + this.setTitle(); + this.setIcon(); + this._setButtons(); + + if (this.closeIconClass) + this.$closeIcon.html(''); + + that._contentHash = this._hash(that.$content.html()); + $.when(this._contentReady, this._modalReady).then(function () { + that.setContent(); + that.setTitle(); + that.setIcon(); + }); + + this._getContent(); + this._imagesLoaded(); + + if (this.autoClose) + this._startCountDown(); + }, + _unwatchContent: function () { + clearInterval(this._timer); + }, + _hash: function () { + return btoa((encodeURIComponent(this.$content.html()))); + }, + _watchContent: function () { + var that = this; + this._timer = setInterval(function () { + var now = that._hash(that.$content.html()); + if (that._contentHash != now) { + that._contentHash = now; + that.setDialogCenter(); + that._imagesLoaded(); + } + }, this.watchInterval); + }, + _bindEvents: function () { + var that = this; + var boxClicked = false; + + this.$el.find('.jconfirm-scrollpane').click(function (e) { + // ignore propagated clicks + if (!boxClicked) { + // background clicked + if (that.backgroundDismiss) { + that.cancel(); + that.close(); + } else { + that.$b.addClass('hilight'); + setTimeout(function () { + that.$b.removeClass('hilight'); + }, 800); + } + } + boxClicked = false; + }); + + this.$el.find('.jconfirm-box').click(function (e) { + boxClicked = true; + }); + + if (this.$confirmButton) { + this.$confirmButton.click(function (e) { + e.preventDefault(); + var r = that.confirm(that.$b); + that._stopCountDown(); + that.onAction('confirm'); + if (typeof r === 'undefined' || r) + that.close(); + }); + } + if (this.$cancelButton) { + this.$cancelButton.click(function (e) { + e.preventDefault(); + var r = that.cancel(that.$b); + that._stopCountDown(); + that.onAction('cancel'); + + if (typeof r === 'undefined' || r) + that.close(); + }); + } + if (this.$closeButton) { + this.$closeButton.click(function (e) { + e.preventDefault(); + that._stopCountDown(); + that.cancel(); + that.onAction('close'); + that.close(); + }); + } + if (this.keyboardEnabled) { + setTimeout(function () { + $(window).on('keyup.' + this._rand, function (e) { + that.reactOnKey(e); + }); + }, 500); + } + + $(window).on('resize.' + this._rand, function () { + that.setDialogCenter(true); + }); + }, + _getCSS: function (speed, bounce) { + return { + '-webkit-transition-duration': speed / 1000 + 's', + 'transition-duration': speed / 1000 + 's', + '-webkit-transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')', + 'transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')' + }; + }, + _imagesLoaded: function () { + var that = this; + $.each(this.$content.find('img:not(.loaded)'), function (i, a) { + var interval = setInterval(function () { + var h = $(a).css('height'); + if (h !== '0px') { + $(a).addClass('loaded'); + that.setDialogCenter(); + clearInterval(interval); + } + }, 40); + }) + }, + _setButtons: function () { + /* + * Settings up buttons + */ + this.$btnc = this.$el.find('.buttons'); + if (this.confirmButton && $.trim(this.confirmButton) !== '') { + this.$confirmButton = $('').appendTo(this.$btnc).addClass(this.confirmButtonClass); + } + if (this.cancelButton && $.trim(this.cancelButton) !== '') { + this.$cancelButton = $('').appendTo(this.$btnc).addClass(this.cancelButtonClass); + } + if (!this.confirmButton && !this.cancelButton) { + this.$btnc.hide(); + } + if (!this.confirmButton && !this.cancelButton && this.closeIcon === null) { + this.$closeButton = this.$b.find('.closeIcon').show(); + } + if (this.closeIcon === true) { + this.$closeButton = this.$b.find('.closeIcon').show(); + } + }, + setTitle: function (string) { + this.title = (typeof string !== 'undefined') ? string : this.title; + this.$title.html(this.title || ''); + }, + setIcon: function (iconClass) { + this.title = (typeof string !== 'undefined') ? iconClass : this.title; + this.$icon.html(this.icon ? '' : ''); + }, + setContent: function (string) { + // only set the content on the modal. + var that = this; + this.content = (typeof string == 'undefined') ? this.content : string; + + if (this.content == '') { + this.$content.html(this.content); + this.$contentPane.hide(); + } else { + this.$content.html(this.content); + this.$contentPane.show(); + } + if (this.$content.hasClass('loading')) { + this.$content.removeClass('loading');// it was loading via ajax. + this.$btnc.find('button').prop('disabled', false); + } + }, + _getContent: function (string) { + // get content from remote & stuff. + var that = this; + string = (string) ? string : this.content; + this._isAjax = false; + /* + * Set content. + */ + if (!this.content) { // if the content is falsy + this.content = ''; + this.setContent(this.content); + this._contentReady.reject(); + } else if (typeof this.content === 'string') { + if (this.content.substr(0, 4).toLowerCase() === 'url:') { + this._isAjax = true; + this.$content.addClass('loading'); + this.$btnc.find('button').prop('disabled', true); + var url = this.content.substring(4, this.content.length); + $.get(url).done(function (html) { + that.content = html; + that._contentReady.resolve(); + }).always(function (data, status, xhr) { + if (typeof that.contentLoaded === 'function') + that.contentLoaded(data, status, xhr); + }); + } else { + this.setContent(this.content); + this._contentReady.reject(); + } + } else if (typeof this.content === 'function') { + this.$content.addClass('loading'); + this.$btnc.find('button').attr('disabled', 'disabled'); + var promise = this.content(this); + if (typeof promise !== 'object') { + console.error('The content function must return jquery promise.'); + } else if (typeof promise.always !== 'function') { + console.error('The object returned is not a jquery promise.'); + } else { + this._isAjax = true; + promise.always(function (data, status) { + that._contentReady.resolve(); + }); + } + } else { + console.error('Invalid option for property content, passed: ' + typeof this.content); + } + this.setDialogCenter(); + }, + _stopCountDown: function () { + clearInterval(this.timerInterval); + if (this.$cd) + this.$cd.remove(); + }, + _startCountDown: function () { + var opt = this.autoClose.split('|'); + if (/cancel/.test(opt[0]) && this.type === 'alert') { + return false; + } else if (/confirm|cancel/.test(opt[0])) { + this.$cd = $('').appendTo(this['$' + opt[0] + 'Button']); + var that = this; + that.$cd.parent().click(); + var time = opt[1] / 1000; + this.timerInterval = setInterval(function () { + that.$cd.html(' (' + (time -= 1) + ')'); + if (time === 0) { + that.$cd.html(''); + that.$cd.parent().trigger('click'); + clearInterval(that.timerInterval); + } + }, 1000); + } else { + console.error('Invalid option ' + opt[0] + ', must be confirm/cancel'); + } + }, + reactOnKey: function key(e) { + + /* + * prevent keyup event if the dialog is not last! + */ + var a = $('.jconfirm'); + if (a.eq(a.length - 1)[0] !== this.$el[0]) + return false; + + var key = e.which; + // Do not react if Enter/Space is pressed on input elements + if (this.contentDiv.find(':input').is(':focus') && /13|32/.test(key)) + return false; + + if ($.inArray(key, this.cancelKeys) !== -1) { + /* + * Cancel key pressed. + */ + if (this.$cancelButton) { + this.$cancelButton.click(); + } else { + this.close(); + } + }/* + if ($.inArray(key, this.confirmKeys) !== -1) { + */ + /* + * Confirm key pressed. + */ + /* + if (this.$confirmButton) { + this.$confirmButton.click(); + } + }*/ + }, + setDialogCenter: function () { + if (this.$contentPane.css('display') == 'none') { + var contentHeight = 0; + var paneHeight = 0; + } else { + var contentHeight = this.$content.outerHeight(); + var paneHeight = this.$contentPane.height(); + if (paneHeight == 0) + paneHeight = contentHeight; + } + var off = 100; + var w = this.$content.outerWidth(); + + //var s = '-clip-path: inset(0px 0px '+contentHeight+'px 0px);' + + // 'clip-path: inset(0px 0px '+contentHeight+'px 0px)'; + + this.$content.css({ + 'clip': 'rect(0px ' + (off + w) + 'px ' + contentHeight + 'px -' + off + 'px)' + }); + + this.$contentPane.css({ + 'height': contentHeight + }); + + var windowHeight = $(window).height(); + var boxHeight = this.$b.outerHeight() - paneHeight + contentHeight; + var topMargin = (windowHeight - boxHeight) / 2; + var minMargin = 100; + if (boxHeight > (windowHeight - minMargin)) { + var style = { + 'margin-top': minMargin / 2, + 'margin-bottom': minMargin / 2 + } + $('body').addClass('jconfirm-noscroll'); + } else { + var style = { + 'margin-top': topMargin + } + $('body').removeClass('jconfirm-noscroll'); + } + this.$b.css(style); + }, + close: function () { + var that = this; + + if (this.isClosed()) + return false; + + if (typeof this.onClose === 'function') + this.onClose(); + + this._unwatchContent(); + that._lastFocused.focus(); + + //this.observer.disconnect(); + /* + unbind the window resize & keyup event. + */ + $(window).unbind('resize.' + this._rand); + if (this.keyboardEnabled) + $(window).unbind('keyup.' + this._rand); + + that.$el.find('.jconfirm-bg').removeClass('seen'); + $('body').removeClass('jconfirm-noscroll'); + + this.$b.addClass(this.closeAnimation); + var closeTimer = (this.closeAnimation == 'anim-none') ? 0 : this.animationSpeed; + setTimeout(function () { + that.$el.remove(); + }, closeTimer * 25 / 100); + + jconfirm.record.closed += 1; + jconfirm.record.currentlyOpen -= 1; + + return true; + }, + open: function () { + var that = this; + if (this.isClosed()) + return false; + + that.$el.find('.jconfirm-bg').addClass('seen'); + this.$b.removeClass(this.animation); + jconfirm.record.opened += 1; + jconfirm.record.currentlyOpen += 1; + if (typeof this.onOpen === 'function') + this.onOpen(); + + var jcr = 'jconfirm-box' + this._rand; + this.$b.attr('aria-labelledby', jcr).attr('tabindex', -1).focus(); + this.$b.find('input[autofocus]:visible:first').focus(); + if (this.$title) + this.$title.attr('id', jcr); else if (this.$content) + this.$content.attr('id', jcr); + + setTimeout(function () { + that.$b.css({ + 'transition-property': that.$b.css('transition-property') + ', margin' + }); + that._modalReady.resolve(); + }, this.animationSpeed); + + return true; + }, + isClosed: function () { + return this.$el.css('display') === ''; + } + }; + + jconfirm.pluginDefaults = { + template: '
', + title: 'Hello', + content: 'Are you sure to continue?', + contentLoaded: function () { + }, + icon: '', + opacity: 0.2, + confirmButton: 'Okay', + cancelButton: 'Close', + confirmButtonClass: 'btn-default', + cancelButtonClass: 'btn-default', + theme: 'white', + animation: 'zoom', + closeAnimation: 'scale', + animationSpeed: 500, + animationBounce: 1.2, + keyboardEnabled: false, + rtl: false, + confirmKeys: [13], // ENTER key + cancelKeys: [27], // ESC key + container: 'body', + confirm: function () { + }, + cancel: function () { + }, + backgroundDismiss: false, + autoClose: false, + closeIcon: null, + closeIconClass: false, + watchInterval: 100, + columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1', + onOpen: function () { + }, + onClose: function () { + }, + onAction: function () { + } + }; + + jconfirm.record = { + opened: 0, + closed: 0, + currentlyOpen: 0 + }; +})(jQuery); From 6406b493a2d8a9c8b36faff9ef805271a6fb1667 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Thu, 26 Sep 2019 20:04:07 +0200 Subject: [PATCH 5/6] Add background opacity --- bda/static/css/bda.css | 4 ++++ bda/templates/bda/inscription-tirage.html | 1 + 2 files changed, 5 insertions(+) diff --git a/bda/static/css/bda.css b/bda/static/css/bda.css index 767bec4b..7f2c1d9a 100644 --- a/bda/static/css/bda.css +++ b/bda/static/css/bda.css @@ -49,6 +49,10 @@ td { /** JQuery-Confirm box **/ +.jconfirm .jconfirm-bg { + background-color: rgb(0,0,0,0.6) !important; +} + .jconfirm .jconfirm-box { padding:0; border-radius:0 !important; diff --git a/bda/templates/bda/inscription-tirage.html b/bda/templates/bda/inscription-tirage.html index 6c5907f3..09b74ee6 100644 --- a/bda/templates/bda/inscription-tirage.html +++ b/bda/templates/bda/inscription-tirage.html @@ -142,6 +142,7 @@ var django = { https://bda.ens.fr/lequipe/charte-bda/ `, backgroundDismiss: true, + opacity: 1, animation:'top', closeAnimation:'bottom', keyboardEnabled: true, From 966cf6ce1581bddb59a5cb35587630f974ab8803 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Thu, 26 Sep 2019 20:30:04 +0200 Subject: [PATCH 6/6] =?UTF-8?q?On=20hook=20le=20popup=20=C3=A0=20`form.sub?= =?UTF-8?q?mit()`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bda/templates/bda/inscription-tirage.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/bda/templates/bda/inscription-tirage.html b/bda/templates/bda/inscription-tirage.html index 09b74ee6..cf8bae89 100644 --- a/bda/templates/bda/inscription-tirage.html +++ b/bda/templates/bda/inscription-tirage.html @@ -131,6 +131,7 @@ var django = { {% if not charte %}