form-builder.html.twig 11 KB
Newer Older
1
2
3
4
<input type="hidden" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}"/>
{# container where the form bulder will be rendered #}
<div id="form-builder-container"></div>

Sebastian Castro's avatar
Sebastian Castro committed
5
<script src="{{ asset('js/form-builder.min.js') }}" type="text/javascript"></script>
6

Sebastian Castro's avatar
Sebastian Castro committed
7
{% include 'admin/core_custom/custom-fields/icon-picker.html.twig' with { 'preventInput': true } %}
8

9
{% set formData = form.vars.sonata_admin.admin.subject.elementFormFieldsJson|default('[]') %}
10
<script>
11

12
13
14
15
16
17
  if (!formBuilderInitialized) {
    formBuilderInitialized = true;
    jQuery(function($) {
      var fbEditor = document.getElementById('form-builder-container');

      var fields = [
Sebastian Castro's avatar
Sebastian Castro committed
18
        { label: 'Titre de la fiche (obligatoire)', name: "title", attrs: { type: 'title' }, icon: '*' },
19
20
        { label: 'Catégories (obligatoire)', name: "taxonomy", attrs: { type: 'taxonomy' }, icon: '*' },
        { label: 'Adresse (obligatoire)', name: "address", attrs: { type: 'address' }, icon: '*' },
21
22
        { label: 'Horaires d\'ouvertures', name: "openhours", attrs: { type: 'openhours' }, icon: '' },
        { label: 'Séparateur de section', name: "separator", attrs: { type: 'separator' }, icon: '' },
23
24
25
        { label: 'Case à cocher', name: "checkbox", attrs: { type: 'checkbox' }, icon: '' },
        { label: 'Email principal', name: "email", attrs: { type: 'email' }, icon: '@' },
        { label: 'Images (upload)', name: "images", attrs: { type: 'images' }, icon: '' },
Sebastian Castro's avatar
Sebastian Castro committed
26
        { label: 'Fichiers (upload)', name: "files", attrs: { type: 'files' }, icon: '' },
27
28
      ];
      var templates = {
Sebastian Castro's avatar
Sebastian Castro committed
29
30
31
        title: function(fieldData) { return { field: '<input id="' + fieldData.name + '"><span class="mandatory"> Ce champ est indispensable</span>' }; },
        address: function(fieldData) { return { field: '<input id="' + fieldData.name + '"><span class="mandatory"> Ce champ est indispensable</span>' }; },
        taxonomy: function(fieldData) { return { field: '<select id="' + fieldData.name + '"><option>Choisissez une catégorie principale</option></select><span class="mandatory"> Ce champ est indispensable</span>' }; },
32
        openhours: function(fieldData) { return { field: 'Bloc contenant un selecteur d\'horaires' }; },
Sebastian Castro's avatar
Sebastian Castro committed
33
        separator: function(fieldData) { return { field: '<hr>' }; },
34
        checkbox: function(fieldData) { return { field: '<input id="' + fieldData.name + '"' + (fieldData.defaultvalue == "yes" ? 'checked="checked"' : '') + ' type="checkbox"/>' }; },
Sebastian Castro's avatar
Sebastian Castro committed
35
        email: function(fieldData) { return { field: '<input id="' + fieldData.name + '"' + ' type="email"/><span class="mandatory"> Ce champ est conseillé</span>' }; },
Sebastian Castro's avatar
Sebastian Castro committed
36
37
        images: function(fieldData) { return { field: '<input id="' + fieldData.name + '"' + ' type="file" accept="images/*"/>' }; },
        files: function(fieldData) { return { field: '<input id="' + fieldData.name + '"' + ' type="file" accept="'+fieldData.accept+'"/>' }; },
Sebastian Castro's avatar
Sebastian Castro committed
38
        image: function(fieldData) { return { field: '<input id="' + fieldData.name + '"' + ' type="text"/>' }; },
Sebastian Castro's avatar
Sebastian Castro committed
39
40
      };

41
      var iconAttr = { label: 'Icone', placeholder: 'Choisissez une icone'  }
42
      var errorMsgAttrs = { label: "Msg. Erreur", placeholder: "Oups ce texte est un peu long ! // Veuillez renseigner une adresse email valide // ..." }
Sebastian Castro's avatar
Sebastian Castro committed
43
      var typeUserAttrs = {
44
45
        text: {
          icon: iconAttr,
46
          separator: { label: '' }, // separate important attrs from others
Sebastian Castro's avatar
Sebastian Castro committed
47
48
          subtype: { label: 'Type', options: {
              'text': 'Texte',
49
              'tel': 'Téléphone',
Sebastian Castro's avatar
Sebastian Castro committed
50
51
52
              'email': 'Courriel',
              'url': 'Url'
            },
53
          },
54
55
          errorMsg: errorMsgAttrs
        },
56
        textarea: {
57
58
59
          icon: iconAttr,
          errorMsg: errorMsgAttrs,
          separator: { label: '' }, // separate important attrs from others
Sebastian Castro's avatar
Sebastian Castro committed
60
        },
Sebastian Castro's avatar
Sebastian Castro committed
61
        select: { icon: iconAttr, errorMsg: errorMsgAttrs },
62
        number: { icon: iconAttr, errorMsg: errorMsgAttrs },
63
64
65
        title: {
          maxlength: { label: "Longueur Max."},
          icon: iconAttr,
66
67
          errorMsg: errorMsgAttrs,
          separator: { label: '' }, // separate important attrs from others
Sebastian Castro's avatar
Sebastian Castro committed
68
        },
69
        address: { icon: iconAttr },
70
        'checkbox-group': {
71
          style: { label: 'Style des cases', options: {
72
73
            'normal': 'Normal',
            'filled': 'Plein',
74
          }, errorMsg: errorMsgAttrs }
75
76
        },
        checkbox: {
77
          defaultvalue: { label: 'Valeur initiale', options: {
78
79
            'no': 'Non cochée',
            'yes': 'Cochée',
80
          }, errorMsg: errorMsgAttrs }
Sebastian Castro's avatar
Sebastian Castro committed
81
82
        },
        email: {
83
          icon: iconAttr,
Sebastian Castro's avatar
Sebastian Castro committed
84
85
          errorMsg: errorMsgAttrs,
          separator: { label: '' }, // separate important attrs from others
Sebastian Castro's avatar
Sebastian Castro committed
86
87
        },
        image: {
88
          icon: iconAttr,
Sebastian Castro's avatar
Sebastian Castro committed
89
90
          errorMsg: errorMsgAttrs,
          separator: { label: '' }, // separate important attrs from others
91
92
93
94
        },
        images: {
          icon: iconAttr,
          separator: { label: '' }, // separate important attrs from others
Sebastian Castro's avatar
Sebastian Castro committed
95
96
97
        },
        files: {
          icon: iconAttr,
98
          accept: { label: "Fichier acceptés", placeholder: ".pdf audio/* .mp3 (séparés par des espaces)"},
Sebastian Castro's avatar
Sebastian Castro committed
99
          separator: { label: '' }, // separate important attrs from others
100
        }
101
102
103
104
105
106
107
      };

      var formBuilder = $(fbEditor).formBuilder({
        showActionButtons: false,
        dataType: "json",
        fields: fields,
        templates: templates,
108
109
110
111
        // i18n: {
        //   locale: 'fr-FR',
        //   location: '{{ asset("assets/js/") }}'
        // },
Sebastian Castro's avatar
Sebastian Castro committed
112
113
        disableFields: ['hidden', 'file', 'button', 'autocomplete', 'title', 'taxonomy', 'address', 'image'],
        controlOrder: ['text', 'email', 'images', 'textarea', 'checkbox', 'checkbox-group', 'radio-group', 'select', 'date', 'number', 'files'],
114
        disabledAttrs: ['className', 'inline', 'toggle', 'description', 'other', 'multiple'],
115
        formData: {{ formData|json_encode|raw }},
Sebastian Castro's avatar
Sebastian Castro committed
116
117
        roles: { 1: "Administrateur" },
        typeUserAttrs: typeUserAttrs
118
119
      });

120
121
      $(document).ready(function() {
        setTimeout(function() { $('.form-field:not(.paragraph-field) .fld-label').each(function() { $(this).text($(this).html()) }); }, 0);
122
      });
123

124
      setInterval(function() {
Sebastian Castro's avatar
Sebastian Castro committed
125
        // prevent adding two of those fields
126
        $('.input-control[data-type=email]').toggle($('.email-field').length == 0);
127
        $('.input-control[data-type=images]').toggle($('.images-field').length == 0);
Sebastian Castro's avatar
Sebastian Castro committed
128
        $('.input-control[data-type=files]').toggle($('.files-field').length == 0);
129

130
        // $('.name-wrap input[name=name]').val('email');
131
132
        // get all input names (used after for uniqueness)
        var allNames = [];
133
        $('.fld-name').each(function() {
134
          // Slugify
135
136
137
138
          var newValue = $(this).val().replace(/[^a-z^A-Z^_^0-9]/g, '_').toLowerCase();
          $(this).val(newValue);
          // collect names
          allNames.push($(this).val());
139
140
        });

141
        $('.fld-name:visible').each(function() {
142
          // Check names are unique
143
144
          var count = 0, currValue = $(this).val();
          for(var i = 0; i < allNames.length; ++i) if (allNames[i] == currValue) count++;
145
          if (count > 1) $(this).val(currValue + "_bis");
146
        });
147

148
        $('#{{ form.vars.id }}').val(JSON.stringify(formBuilder.actions.getData()));
149
150

        // Changes icons and icones helpers
Sebastian Castro's avatar
Sebastian Castro committed
151
        $('a[type=remove].icon-cancel').removeClass('icon-cancel').addClass('fa fa-trash-alt');
152
153
        $('a[type=copy].icon-copy').attr('title', 'Dupliquer');
        $('a[type=edit].icon-pencil').attr('title', 'Editer/Masquer');
154
155

        $('.email-field input[name=name]').val('email');
156
        $('.images-field input[name=name]').val('images');
Sebastian Castro's avatar
Sebastian Castro committed
157
        $('.files-field input[name=name]').val('files');
158
159
160
161
162
163

        $('.iconpicker-popover button').click(function(e) {
          e.stopPropagation();
          e.stopImmediatePropagation();
          e.preventDefault();
        })
164
      }, 300);
Sebastian Castro's avatar
Sebastian Castro committed
165
166
167

      $('input[name="access"]').change(function() {
        $(this).find('input[name="roles[]"]').prop('checked', $(this).is(':checked'));
168
      });
169
    });
170
171
  }

172

Sebastian Castro's avatar
Sebastian Castro committed
173
174
</script>

175
<style>
Sebastian Castro's avatar
Sebastian Castro committed
176
177
178
179
  /* disable actions for particular fields */
  .taxonomy-field .field-actions .del-button, .taxonomy-field .field-actions .copy-button,
  .address-field .field-actions .del-button, .address-field .field-actions .copy-button,
  .title-field .field-actions .del-button, .title-field .field-actions .copy-button,
Sebastian Castro's avatar
Sebastian Castro committed
180
  .openhours-field .field-actions .copy-button, .email-field .copy-button, .images-field .copy-button, .image-field .copy-button, .files-field .copy-button
Sebastian Castro's avatar
Sebastian Castro committed
181
182
183
184
185
186
187
  { display: none !important; }
  .separator-field label, .separator-field .copy-button, .separator-field .toggle-form { display: none !important; }

  /* disable attributes for particular fields */
  .openhours-field .frm-holder .form-group { display:none !important; }
  .openhours-field .frm-holder .required-wrap, .openhours-field .frm-holder .access-wrap { display:block !important; }
  .address-field .name-wrap, .address-field .access-wrap, .address-field .required-wrap,
188
189
190
  .taxonomy-field .name-wrap, .taxonomy-field .access-wrap, .taxonomy-field .required-wrap, .taxonomy-field .placeholder-wrap, .taxonomy-field .value-wrap,
  .title-field .name-wrap, .title-field .access-wrap, .title-field .required-wrap,
  .textarea-field .subtype-wrap, .checkbox-field .field-options, .checkbox-field .required-wrap,
Sebastian Castro's avatar
Sebastian Castro committed
191
  .paragraph-field .subtype-wrap, .header-field .subtype-wrap,
Sebastian Castro's avatar
Sebastian Castro committed
192
  .email-field .name-wrap, .image-field .name-wrap, .images-field .name-wrap, .images-field .placeholder-wrap, .images-field .value-wrap, .images-field .required-wrap, .files-field .name-wrap, .files-field .placeholder-wrap, .files-field .value-wrap, .files-field .required-wrap
193
194
  { display: none !important; }

Sebastian Castro's avatar
Sebastian Castro committed
195
196
197
198
199
200
201
202
203
204
205
206
207
  /* specific fields styling */
  .title-field .required-asterisk, .address-field .required-asterisk, .taxonomy-field .required-asterisk
  { display: inline !important; }
  .separator-wrap label, .separator-wrap .input-wrap { display: none !important; }
  .available-roles { display: none !important; }

  /* Order of the field attributes */
  .form-wrap.form-builder .frmb .form-elements { display: flex; flex-direction: column; }
  .form-wrap.form-builder .frmb .form-field .form-group { order: 100; }
  .required-wrap { order: 0 !important; }
  .name-wrap { order: 1 !important; }
  .label-wrap { order: 2 !important; }
  .subtype-wrap { order: 3 !important; }
208
209
  .separator-wrap {
    order: 50 !important;
Sebastian Castro's avatar
Sebastian Castro committed
210
211
212
213
    margin-top: 10px;
    border-top: 1px dashed grey;
    padding-top: 10px;
  }
214
  .access-wrap { order: 110 !important; }
Sebastian Castro's avatar
Sebastian Castro committed
215
216

  /* Styling */
217
  .address-field, .taxonomy-field, .title-field, .email-field {  background-color: whitesmoke !important; }
Sebastian Castro's avatar
Sebastian Castro committed
218
219
220
  #form-builder-container .checkbox label, #form-builder-container .radio label { padding-left: 30px !important; }
  .mandatory { color: #693232; font-style: italic; float: right; }
  #form-builder-container { padding-top: 20px; }
221
  .checkbox-field input[type="checkbox"] { float: left; margin-right: 10px; }
222
223
224
225

  .iconpicker .iconpicker-item {
    width: 36px;
    height: 36px;
226
227
  }

228
  .iconpicker-popover.popover.right { right: -200px; left: initial !important;}
Sebastian Castro's avatar
Sebastian Castro committed
229
</style>