wip #2208 @5

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index b7eca1e45a20e2a2ee09d162ecfcbc1cd403a457..8fd2b5f5fee1c7750919b5e371b4fee2644e5b8a 100644 (file)
--- 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 4d443b3bf924e400bbc49f9277421aff037045fc..0efab23c1a69b536bf471e69a5a5e933e397b93d 100644 (file)
--- 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 (file)
index 0000000..76bfe66
--- /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;
+               }
+       }
+}