PHRAS-3164 #comment add bootstrap tag field on export > email

resources/gulp/components/common.js

@@ -49,6 +49,7 @@ gulp.task('build-common-js', function(){
         config.paths.src + 'common/js/components/dialog.js',
         config.paths.src + 'common/js/components/utils.js',
         config.paths.src + 'common/js/components/download.js',
+        config.paths.src + 'common/js/components/bootstrap-tagsinput.min.js',
     ];
     return utils.buildJsGroup(commonGroup, 'common', 'common/js', debugMode);
 });

resources/www/common/styles/main.scss

@@ -181,3 +181,65 @@ $mainMenuLinkBackgroundHoverColor: transparent;
   }
 }
 
+/*
+ * bootstrap-tagsinput v0.8.0
+ *
+ */
+
+.bootstrap-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  display: inline-block;
+  padding: 4px 6px;
+  color: #555;
+  vertical-align: middle;
+  border-radius: 4px;
+  max-width: 100%;
+  line-height: 22px;
+  cursor: text;
+  margin-bottom: 10px;
+}
+.bootstrap-tagsinput input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0 6px;
+  margin: 0;
+  width: auto;
+  max-width: inherit;
+}
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+  color: #777;
+  opacity: 1;
+}
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .tag {
+  margin-right: 2px;
+  color: white;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  margin-left: 8px;
+  cursor: pointer;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+  content: "x";
+  padding: 0px 2px;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+

templates/web/common/dialog_export.html.twig

@@ -178,7 +178,8 @@
                         <div>
                             <span style="min-width: 21px;display: inline-block; ">
                                 {{ 'export::mail: destinataire' | trans }}</span>
-                            <input type="text" value="" name="destmail" class="required span4">
+                            <input type="text" value="" class="span4 tagsinput" data-role="tagsinput" >
+                            <input type="hidden" value="" name="destmail" class="required span4 destmail" >
                             <div class="acceptDl-info" style="padding-top: 4px; margin-left: 25px;">
                             <span style="font-style: italic">{{ 'Entrez plusieurs adresses email en les separant par des points-virgules' | trans }}</span>
                             </div>
@@ -518,6 +519,11 @@
                 email: '{{app.getAuthenticatedUser().getEmail() | e('js')}}'
             }
         };
+
+        $(document).find(".tagsinput").tagsinput('items');
+        $(".tagsinput").on('change', function (event) {
+            $('.destmail').val($(this).val().replace(",", ";"));
+        })
     </script>
 {% endif %}
 

templates/web/common/index_bootstrap.html.twig

@@ -22,6 +22,9 @@
         <script type="text/javascript" src="/assets/common/js/common{% if not app.debug %}.min{% endif %}.js"></script>
         <script type="text/javascript" src="/assets/vendors/bootstrap/js/bootstrap{% if not app.debug %}.min{% endif %}.js"></script>
         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+
+        <script src="/assets/common/js/bootstrap-tagsinput.min.js"></script>
+
         <script type="text/javascript">
             google.charts.load('42', {packages: ['corechart']});
         </script>