src/Trinity/FormsBundle/Resources/views/elements/row.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'forms' %}
  2. {% set editableFields = (Question.getType in ['upload', 'email', 'email_check', 'date', 'text', 'textarea', 'dropzone']) %}
  4. {% if loadForm is not defined %}
  5.     <div class="fields-parent">
  6.         <div class="field-child">
  7.         {% endif %}
  9.         <div id="q-{{Question.id ? Question.id : random}}" data-id="{{Question.id ? Question.id : random}}" class="{% if loop is defined and loop.index0 % 2 %}two-last {% endif %} {% if Question.hidden %}qhidden{% endif %} {% if Question.required and Question.hidden == false %}required{% endif %} form-block child-sortable form-group card type-{{Question.getType}}">
  10.             {% if edit is defined %}
  11.                 <input type="hidden" name="pos[{{Question.id ? Question.id : random}}]" class="row-pos" value="{{Question.position ?? 0}}" />
  12.                 <input type="hidden" name="width[{{Question.id ? Question.id : random}}]" class="row-width" value="{{Question.width ?? 100}}" />
  13.             {% endif %}
  14.             {% if Question.getType in ['checkbox', 'radio', 'select', 'upload', 'email', 'email_check', 'date', 'text', 'textarea', 'canvas'] %}
  15.                 {% if Question.getTitle is not empty %}
  16.                      {% if edit is not defined and not Question.hiddenLabel %}
  17.                         <div class="field-label"{% if edit is defined %} contenteditable="true" {% endif %}data-type="title" style="outline:none;margin-left: 20px;line-height: 28px;min-width: 100px;display: inline-block;">
  18.                           {{Question.getTitle|raw}}
  19.                           {% if edit is not defined and Question.required and Question.hidden == false %}<span class="req">*</span>{% endif %}
  20.                         </div>
  21.                     {% endif %}
  22.                      {% if edit is defined %}
  23.                         <div class="field-control"{% if edit is defined %} contenteditable="true"{% endif %}>
  24.                             <input {% if edit is defined %}title="{{'Titel is verplicht'|trans}}"{% endif %} placeholder="{{'Titel'|trans}}" type="text" class="validate" data-type="title" value="{{Question.title|raw}}" {% if edit is defined %}required="required"{% endif %} />
  25.                             {% if edit is not defined and Question.required and Question.hidden == false %}<span class="req">*</span>{% endif %}
  26.                         </div>
  27.                     {% endif %}
  28.                 {% else %}
  29.                     <div class="field-label" {% if edit is defined %}contenteditable="true"{% endif %} data-type="title" style="outline:none;margin-left: 20px;line-height: 28px;min-width: 100px;display: inline-block;"></div>
  30.                 {% endif %}
  31.                 {% if edit is defined %}
  32.                     <div class="info">
  33.                         <span class="qid">({{Question.getTypeLabel}}, ID: {{Question.id}}<span class="req">, {{ 'VERPLICHT' |trans }}</span>)</span>
  34.                     </div>
  35.                 {% endif %}
  36.                 {# {% if edit is defined %}
  37.                         <span class="hid"><i class="material-icons">add</i></span>
  38.                 {% endif %} #}
  39.             {% elseif Question.getType in ['dropzone'] %}
  40.                 {% if Question.getTitle is not empty %}
  41.                     <div class="field-label" data-type="title" style="outline:none;margin-left: 20px;line-height: 28px;min-width: 100px;display: inline-block;"><span style="color:gray;">Dropzone</span>{% if edit is not defined and Question.required and Question.hidden == false %}<span class="req">*</span>{% endif %}</div>
  42.                 {% endif %}
  43.                 {% if edit is defined %}
  44.                     <div class="info">
  45.                         <span class="qid">({{Question.getTypeLabel}}, ID: {{Question.id}}<span class="req">, {{ 'VERPLICHT' |trans }}</span>)</span>
  46.                     </div>
  47.                 {% endif %}
  48.             {% elseif Question.getType in ['newsletter'] %}
  49.                 {% if edit is defined %}
  50.                     <div class="info">
  51.                         <span class="qid">({{Question.getTypeLabel}}, ID: {{Question.id}}<span class="req">, {{ 'VERPLICHT' |trans }}</span>)</span>
  52.                     </div>
  53.                 {% endif %}
  54.             {% endif %}
  55.             {# <div class="field"> #}
  56.                 {% if edit is defined %}
  57.                     <div class="edit" style="right:auto;left: 16px;top: 24px;">
  58.                         <span class="drag"><i class="material-icons" style="font-size: 20px;">drag_handle</i></span>
  59.                     </div>
  60.                 {% endif %}
  62.                 {% block field %}{% endblock %}
  63.                 {% if Question.getType in ['select', 'upload', 'email', 'email_check', 'email_check', 'text', 'date', 'textarea'] %}
  64.                     {% if Question.getSubTitle|trim|striptags != ('Toelichting' | trans) and edit is not defined %}<div class="sublabel form-text text-muted" data-type="subtitle" style="outline:none;">{{Question.getSubTitle|raw}}</div>{% endif %}
  66.                     {# {% if Question.getType in ['upload', 'email', 'email_check', 'date', 'text', 'textarea'] %}
  67.                             {% if edit is defined %}<div class="placeholder form-text text-muted" contenteditable="true" data-type="placeholder" style="outline:none;">{{Question.placeholder}}</div>{% endif %}
  68.                     {% endif %} #}
  69.                 {% endif %}
  70.                 {# Editor #}
  71.                 {% if edit is defined %}
  72.                     {# <div class="properties" style="display:none;">
  73.                             {% if Question.getType in ['select', 'checkbox', 'radio'] %}
  74.                                     {% include '@TrinityForms/elements/valueEditor.html.twig' %}
  75.                             {% endif %}
  76.                     </div> #}
  77.                     {# Technical #}
  78.                     <input type="hidden" class="id" name="id[]" value="{{Question.id ? Question.id : random}}" />
  79.                     <input type="hidden" class="type" name="type[]" value="{{Question.type}}" />
  80.                     <input type="hidden" class="title" name="title[]" value="{{Question.title}}" />
  81.                     {# <input type="hidden" class="subtitle" name="subtitle[{{Question.id ? Question.id : random}}]" value="{{Question.subtitle}}" /> #}
  82.                     <input type="hidden" class="classes" name="classes[{{Question.id ? Question.id : random}}]" value="{{Question.classes}}" />
  83.                     {# <div class="row"> #}
  84.                     {# {% if Question.getType in ['upload', 'email', 'email_check', 'date', 'text', 'textarea'] %} #}
  85.                     <div id="additional{{Question.id ? Question.id : random}}" class="modal">
  86.                         <div class="modal-dialog">
  87.                             <div class="modal-content">
  88.                                 <div class="modal-body">
  89.                                     <div style="display:{{editableFields ? 'block' : 'none'}};">
  90.                                         <p>
  91.                                             <label class="form-label" for="placeholder_{{Question.id ? Question.id : random}}">{{ 'Placeholder' | trans }}</label>
  92.                                             <input class="form-control" onkeyup="$('#frm-lbl-{{Question.id ? Question.id : random}}').prop('placeholder', this.value);" style="margin:0;" id="placeholder_{{Question.id ? Question.id : random}}" type="text" name="placeholder[]" value="{{Question.placeholder ? (Question.placeholder|raw) : ''}}">
  93.                                         </p>
  94.                                     </div>
  95.                                     <div>
  96.                                         <p>
  97.                                             <label class="form-label" for="subtitle_{{Question.id ? Question.id : random}}">{{ 'Toelichting' | trans }}</label>
  98.                                             <input class="form-control" style="margin:0;" id="subtitle_{{Question.id ? Question.id : random}}" type="text" name="subtitle[]" value="{{Question.subtitle|trim|striptags != ('Toelichting' | trans) ? (Question.subtitle|raw) : ''}}">
  99.                                         </p>
  100.                                     </div>
  101.                                 </div>
  102.                                 <div class="modal-footer">
  103.                                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Sluiten' | trans }}</button>
  104.                                 </div>
  105.                             </div>
  106.                         </div>
  107.                     </div>
  108.                     {# {% endif %} #}
  109.                     <input style="display:none;" type="checkbox" {{Question.required and Question.hidden == false ? 'checked="checked"' : ''}} name="required[]" id="require_{{Question.id ? Question.id : random}}" value="{{Question.id ? Question.id : random}}" />
  110.                     <input style="display:none;" type="checkbox" {{Question.hidden ? 'checked="checked"' : ''}} name="hidden[]" id="hidden_{{Question.id ? Question.id : random}}" value="{{Question.id ? Question.id : random}}" />
  111.                     <input style="display:none;" type="checkbox" {{Question.hiddenLabel ? 'checked="checked"' : ''}} name="hidden_label[]" id="hidden_label_{{Question.id ? Question.id : random}}" value="{{Question.id ? Question.id : random}}" />
  112.                     {# </div> #}
  113.                     <div class="edit" style="top: 20px;right: 17px;">
  114.                         <a class="more" style="font-size: 20px;" data-horizontal-offset="-380" data-vertical-offset="-200" data-jq-dropdown="#jq-dropdown-{{Question.id ? Question.id : random}}" href="#"><i style="color:black;" class="material-icons">more_horiz</i></a>
  115.                     </div>
  116.                     {% if Question.getType in ['select', 'checkbox', 'radio'] %}
  117.                         <div id="options{{Question.id ? Question.id : random}}" class="modal modal-fixed-footer">
  118.                             <div class="modal-dialog">
  119.                                 <div class="modal-content">
  120.                                     <div class="modal-body">
  121.                                         <h4>{{ 'Keuze opties' | trans({}) }}</h4>
  122.                                         {% include '@TrinityForms/elements/valueEditor.html.twig' with {Question: Question} %}
  123.                                     </div>
  124.                                     <div class="modal-footer">
  125.                                         <a href="#!" class="add-child-value btn btn-flat"><i class="fa fa-plus"></i> {{ 'Optie toevoegen' |trans }}</a>
  126.                                         <button type="button" class="btn btn-green" data-bs-dismiss="modal"><i class="fa fa-check"></i> {{ 'Opslaan' | trans }}</button>
  127.                                     </div>
  128.                                 </div>
  129.                             </div>
  130.                         </div>
  131.                     {% endif %}
  133.                 {% endif %}
  134.             {# </div> #}
  135.             {# <div class="options">
  136.             <a href="#" class="pull center-align"><i class="material-icons">arrow_drop_down</i></a>
  137.             </div> #}
  138.         </div>
  139.         {% if edit is defined %}
  140.             <div id="jq-dropdown-{{Question.id ? Question.id : random}}" class="jq-dropdown jq-dropdown-tip jq-dropdown-anchor-right">
  141.                 <ul class="jq-dropdown-menu">
  142.                     {% if Question.getType in ['select', 'checkbox', 'radio'] %}
  143.                         <li><a href="#" onclick="$('#options{{Question.id ? Question.id : random}}').modal('show');return false;"><i style="font-size:15px;line-height: 17px;" class="material-icons left">edit</i>{{ 'Keuze opties bewerken' |trans }}</a></li>
  144.                     {% endif %}
  145.                     {% if Question.getType in ['select', 'upload', 'email', 'email_check', 'text', 'date', 'textarea', 'checkbox', 'radio', 'canvas', 'dropzone'] %}
  146.                         <li>
  147.                             <a href="#" data-toggle="true" onclick="if ($(this).find('i').html() == 'check_box') {
  148.                                 $(this).find('i').html('check_box_outline_blank');
  149.                                 $('#q-{{Question.id ? Question.id : random}}').removeClass('required');
  150.                                 $('#require_{{Question.id ? Question.id : random}}').prop('checked', false);
  151.                             } else {
  152.                                 $(this).find('i').html('check_box');
  153.                                 $('#q-{{Question.id ? Question.id : random}}').addClass('required');
  154.                                 $('#require_{{Question.id ? Question.id : random}}').prop('checked', true);
  155.                             }
  156.                             ;
  157.                             return false;"><i style="font-size:15px;line-height: 17px;" class="material-icons left">{{Question.required and Question.hidden == false ? 'check_box' : 'check_box_outline_blank'}}</i>{{ 'Verplichte invoer' | trans }}</a></li>
  158.                         <li><a href="#" data-toggle="true" onclick="if ($(this).find('i').html() == 'check_box') {
  159.                                     $(this).find('i').html('check_box_outline_blank');
  160.                                     $('#q-{{Question.id ? Question.id : random}}').removeClass('qhidden');$('#hidden_{{Question.id ? Question.id : random}}').prop('checked', false);} else {
  161.                                     $(this).find('i').html('check_box');
  162.                                     $('#q-{{Question.id ? Question.id : random}}').addClass('qhidden');
  163.                                     $('#hidden_{{Question.id ? Question.id : random}}').prop('checked', true);
  164.                                 }
  165.                                 ;
  166.                                 return false;"><i style="font-size:15px;line-height: 17px;" class="material-icons left">{{Question.hiddenLabel ? 'check_box' : 'check_box_outline_blank'}}</i>{{ 'Verborgen' | trans }}</a></li>
  167.                         <li><a href="#" data-toggle="true" onclick="if ($(this).find('i').html() == 'check_box') {
  168.                                 $(this).find('i').html('check_box_outline_blank');
  169.                                 $('#q-{{Question.id ? Question.id : random}} .field-control').removeClass('qhidden');
  170.                                 $('#hidden_label_{{Question.id ? Question.id : random}}').prop('checked', false);
  171.                                 } else {
  172.                                 $(this).find('i').html('check_box');
  173.                                 $('#q-{{Question.id ? Question.id : random}} .field-control').addClass('qhidden');
  174.                                 $('#hidden_label_{{Question.id ? Question.id : random}}').prop('checked', true);
  175.                             };
  176.                             return false;"><i style="font-size:15px;line-height: 17px;" class="material-icons left">{{Question.hiddenLabel ? 'check_box' : 'check_box_outline_blank'}}</i>{{ 'Verberg label' | trans }}</a></li>
  177.                         <li class="jq-dropdown-divider"></li>
  178.                         {# {% if loop is defined and loop.index == 1 %}
  179.                         <li><a data-disabled="true" class="grey-text"><i style="font-size:15px;line-height: 17px;" class="material-icons left">attachment</i>{{ 'Inhoud koppelen' | trans }}</a></li>
  180.         {% else %}
  181.                 <li><a><i style="font-size:15px;line-height: 17px;" class="material-icons left">attachment</i>{{ 'Inhoud koppelen' | trans }}</a></li>
  182.                         {% endif %} #}
  183.                         {# {% else %}
  184.                                 <li><a href="#" class="grey-text" data-disabled="true"><i style="font-size:15px;line-height: 17px;" class="material-icons left">check_box_outline_blank</i>{{ 'Verplichte invoer' | trans }}</a></li> #}
  185.                     {% endif %}
  186.                     {# {% if Question.getType in ['upload', 'email', 'email_check', 'date', 'text', 'textarea'] %} #}
  187.                     <li><a href="#" onclick="$('#additional{{Question.id ? Question.id : random}}').modal('show'); return false;"><i style="font-size:15px;line-height: 17px;" class="material-icons left">settings</i>{{ 'Opties' |trans }}</a></li>
  188.                     {# {% endif %} #}
  189.                     <li class="jq-dropdown-divider"></li>
  190.                     <li><a href="#5" onclick="deleteQuestion({{Question.id ? Question.id : random}});" class="red-text delete"><i style="font-size:15px;line-height: 17px;" class="material-icons left">clear</i>{{ 'Vraag verwijderen' | trans }}</a></li>
  191.                     <li><a data-disabled="true" class="grey-text"><i style="font-size:15px;line-height: 17px;" class="material-icons left">info_outline</i>{{ 'Vraag ID:' | trans ~ ' ' ~ Question.id}}</a></li>
  192.                 </ul>
  193.             </div>
  194.         {% endif %}
  195.         {% if loadForm is not defined %}
  196.         </div>
  197.     </div>
  198. {% endif %}
  199. {% if edit is defined %}
  200.     <script>
  201.         $('#jq-dropdown-{{Question.id ? Question.id : random}}').on('show', function (event, dropdownData) {
  202.             $('body').addClass('jq-dd');
  203.         }).on('hide', function (event, dropdownData) {
  204.             $('body').removeClass('jq-dd');
  205.         });
  207.         CKEDITOR.disableAutoInline = true;
  208.     </script>
  209. {% endif %}