From c75de60a2ea066e45e6a19564fde424b58f070f9 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 27 Sep 2018 18:26:57 +0200
Subject: [PATCH] wip #2208 @5

---
 js/libs/fluidbook/fluidbook.menu.js           |  5 +++
 .../fluidbook/forms/fluidbook.form.avery.js   | 33 +++++++++++++--
 style/form/avery.less                         | 41 +++++++++++++++++++
 3 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 style/form/avery.less

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index b7eca1e4..8fd2b5f5 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -744,6 +744,11 @@ FluidbookMenu.prototype = {
                 });
                 break;
             default:
+                var maxWidth = 10000;
+                if (m.data('maxwidth') !== null) {
+                    maxWidth = parseInt(m.data('maxwidth'));
+                }
+                w = Math.min(w, maxWidth);
                 break;
         }
 
diff --git a/js/libs/fluidbook/forms/fluidbook.form.avery.js b/js/libs/fluidbook/forms/fluidbook.form.avery.js
index 4d443b3b..0efab23c 100644
--- a/js/libs/fluidbook/forms/fluidbook.form.avery.js
+++ b/js/libs/fluidbook/forms/fluidbook.form.avery.js
@@ -17,10 +17,11 @@ function FluidbookAveryForm(fluidbook) {
             receive: 'Do you want to receive our free monthly e-newsletter',
             yes: 'Yes',
             no: 'No',
-            consent: 'I have read and agree to the Avery Dennison Legal and Privacy Notices',
+            consent: 'I have read and agree to <a target="_blank" href="http://www.averydennison.com/en/home/legal-and-privacy-notices.html">the Avery Dennison Legal and Privacy Notices</a>',
             submit: 'Submit',
             nothanks: 'No, thanks',
             choose_country: 'Please choose a country',
+            choose_activity: 'Please an activity',
         },
         fr: {
             title: 'Discover what our full Avery Dennison portfolio can do for you',
@@ -67,6 +68,14 @@ FluidbookAveryForm.prototype = {
             return false;
         });
 
+        $(document).on('click', '.avery-form .submit', function () {
+            $this.formInstance = $(".avery-form").parsley();
+            if ($this.formInstance.validate()) {
+                $this.sendSuggestion();
+            }
+            return false;
+        });
+
     },
 
     openForm: function (p1, p2, callback) {
@@ -75,33 +84,49 @@ FluidbookAveryForm.prototype = {
         view += '<div class="content">';
         view += '<form class="avery-form" action="" method="post">';
         view += '<div>';
+        view += '<h3>' + this.locale.subtitle + '</h3>';
+        view += '<div class="line">';
         view += '<label>' + $this.locale.company;
         view += '<input type="text" required name="company">';
         view += '</label>';
+        view += '</div>';
+        view += '<div class="line">';
         view += '<label>' + $this.locale.country;
         view += '<select name="country"></select>';
         view += '</label>';
+        view += '</div>';
+        view += '<div class="line">';
         view += '<label>' + $this.locale.activity;
-        view += '<select name="activity"><option value="printer">' + $this.locale.printer + '</option>' +
+        view += '<select name="activity">' + '<option value=""> -- ' + this.locale.choose_activity + ' -- </option>' +
+            '<option value="printer">' + $this.locale.printer + '</option>' +
             '<option value="printer">' + $this.locale.installer + '</option>' +
             '<option value="designers / agency">' + $this.locale.designer + '</option>' +
             '<option value="brand owner">' + $this.locale.brandowner + '</option>' +
             '<option value="other">' + $this.locale.other + '</option></select>';
         view += '</label>';
+        view += '</div>';
+        view += '<div class="line">';
         view += '<label>' + $this.locale.email_address;
         view += '<input type="email" name="email" required>';
         view += '</label>';
+        view += '</div>';
         view += '<div class="line">';
         view += $this.locale.receive;
+        view += '<div class="radios">';
         view += '<label class="radio"><input type="radio" name="subscribe" value="0" required>' + $this.locale.yes + '</label>';
         view += '<label class="radio"><input type="radio" name="subscribe" value="1" required>' + $this.locale.no + '</label>';
         view += '</div>';
         view += '</div>';
-        view += '<div class="fonctions"><a href="#" class="close">' + $this.locale.nothanks + '</a><a href="#" class="submit">' + $this.locale.submit + '</a></div>';
+        view += '<div class="line">';
+        view += '<label><input type="checkbox" value="1" name="accept">' + this.locale.consent + '</label>';
+        view += '</div>';
+        view += '</div>';
+        view += '</div>';
+        view += '<div class="fonctions"><a href="#/closeview" class="button back">' + $this.locale.nothanks + '</a><a href="#" class="submit">' + $this.locale.submit + '</a></div>';
         view += '</form>';
         view += '</div>';
 
-        $("#view").append('<div class="mview" data-menu="form">' + view + '</div>');
+        $("#view").append('<div class="mview" data-menu="form" data-maxwidth="650">' + view + '</div>');
 
         var options = ['<option value=""> -- ' + this.locale.choose_country + ' -- </option>'];
         $.each(this.fluidbook.datas.countries, function (code, name) {
diff --git a/style/form/avery.less b/style/form/avery.less
new file mode 100644
index 00000000..76bfe665
--- /dev/null
+++ b/style/form/avery.less
@@ -0,0 +1,41 @@
+.avery-form {
+	h3 {
+		font-style: italic;
+		font-size: 1em;
+		margin-bottom: 20px;
+		font-weight: 400;
+	}
+
+	padding: 20px 30px;
+	text-align: left;
+
+	.line {
+		margin-bottom: 20px;
+	}
+
+	input[type="text"], input[type="email"], select {
+		display: block;
+		width: 100%;
+		border: 0;
+		padding: 10px;
+	}
+
+	label {
+		a {
+			text-decoration: underline;
+		}
+	}
+
+	input[type="checkbox"] {
+		margin-right: 20px;
+	}
+
+	.radios {
+		label {
+			margin-right: 30px;
+		}
+		input[type="radio"] {
+			margin-right: 20px;
+		}
+	}
+}
-- 
2.39.5