templates/areas/apk-wysiwyg/view.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  2. <div class="uk-container apk-container-1400 uk-margin-medium">
  3.     <h2 class="uk-h2">Section wysiwyg + text + button</h2>
  4.     <ul uk-tab>
  5.         <li><a href="#">Configurations</a></li>
  6.         <li class="uk-active"><a href="#">Content Edit</a></li>
  7.     </ul>
  8.     <ul class="uk-switcher uk-margin">
  9.         <li>
  10.             <div>Type de heading pour le titre ?</div>
  11.             {{ pimcore_select("content-heading", {
  12.                 "store" : [
  13.                     ['span', 'span'],
  14.                     ['h1', 'Heading 1'],
  15.                     ['h2', 'Heading 2'],
  16.                     ['h3', 'Heading 3'],
  17.                     ['h4', 'Heading 4'],
  18.                     ['h5', 'Heading 5'],
  19.                     ['h6', 'Heading 6']
  20.                 ],
  21.                 "defaultValue" : "h2"
  22.             }) }}
  23.             <div><strong>Style</strong> du heading pour le titre ?</div>
  24.             {{ pimcore_select("content-heading-style", {
  25.                 "store" : [
  26.                     ['h1', 'Heading 1'],
  27.                     ['h2', 'Heading 2'],
  28.                     ['h3', 'Heading 3'],
  29.                     ['h4', 'Heading 4'],
  30.                     ['h5', 'Heading 5'],
  31.                     ['h6', 'Heading 6']
  32.                 ],
  33.                 "defaultValue" : "h2"
  34.             }) }}
  35.             
  36.             <div><strong>Alignement</strong> des textes</div>
  37.             {{ pimcore_select("text-align", {
  38.                 "store" : [
  39.                     ['uk-text-center', 'Centré'],
  40.                     ['uk-text-left', 'Gauche'],
  41.                     ['uk-text-right', 'Droite']
  42.                 ],
  43.                 "defaultValue" : "uk-text-center"
  44.             }) }}
  45.             <div>Taille du container</div>
  46.             {{ pimcore_select("container-width", {
  47.                 "store" : [
  48.                     ['apk-container-1400', '1400px (default)'],
  49.                     ['apk-container-1300', '1300px'],
  50.                     ['apk-container-1200', '1200px'],
  51.                     ['apk-container-1100', '1100px'],
  52.                     ['apk-container-1000', '1000px'],
  53.                     ['apk-container-900', '900px'],
  54.                     ['apk-container-800', '800px'],
  55.                 ],
  56.                 "defaultValue" : "apk-container-1400"
  57.             }) }}
  58.             <div><strong>Couleur</strong> du background</div>
  59.             {{ pimcore_select("bg-color", {
  60.                 "store" : [
  61.                     ['uk-light', 'Noir'],
  62.                     ['uk-dark', 'Blanc']
  63.                 ],
  64.                 "defaultValue" : "uk-light"
  65.             }) }}
  66.             
  67.             <div>Couleur du bouton</div>
  68.             {{ pimcore_select("button-color", {
  69.                 "store" : [
  70.                     ['uk-button-black', 'Noir'],
  71.                     ['uk-button-white', 'Blanc'],
  72.                     ['', 'Orange']
  73.                 ],
  74.                 "defaultValue" : "uk-button-black"
  75.             }) }}
  76.             
  77.             <div>Espacement en haut du block</div>
  78.             {{ pimcore_select("margin-top", {
  79.                 "store" : [
  80.                     ['', 'Aucun'],
  81.                     ['uk-margin-small-top', 'Petit'],
  82.                     ['uk-margin-medium-top', 'Moyen'],
  83.                     ['uk-margin-large-top', 'Grand'],
  84.                     ['uk-margin-xlarge-top', 'Très grand'],
  85.                 ],
  86.                 "defaultValue" : ""
  87.             }) }}
  88.             <div>Espacement en bas du block</div>
  89.             {{ pimcore_select("margin-bottom", {
  90.                 "store" : [
  91.                     ['', 'Aucun'],
  92.                     ['uk-margin-small-bottom', 'Petit'],
  93.                     ['uk-margin-medium-bottom', 'Moyen'],
  94.                     ['uk-margin-large-bottom', 'Grand'],
  95.                     ['uk-margin-xlarge-bottom', 'Très grand'],
  96.                 ],
  97.                 "defaultValue" : ""
  98.             }) }}
  99.             
  100.         </li>
  101.     
  102.         <li class="uk-active">
  103.             <div class="uk-margin-large-bottom">
  104.                 <div class="apk-content">
  105.                     <h2 class="uk-h2">
  106.                         {{ pimcore_textarea("content-title",{
  107.                             "nl2br" : true
  108.                         }) }}
  109.                     </h2>
  110.                     {{ pimcore_wysiwyg("content") }}
  111.                     
  112.                     <div class="actions uk-margin-top">
  113.                         <span class="uk-h4">Lien (optionnel)</span>
  114.                         {{ pimcore_link("content-btn", {
  115.                             "class" : "uk-button"
  116.                         }) }}
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.         </li>
  121.     </ul>
  122. </div>
  123. {% endif %}
  124. {% set buttonColor = pimcore_select("button-color").data %}
  125. {% if not editmode %}
  126. <div class="apk-areabrick-container {{ pimcore_select("bg-color").data }} {{ pimcore_select("margin-top") }} {{ pimcore_select("margin-bottom") }}">
  127.     <div class="uk-container {{ pimcore_select("container-width") }}">
  128.         <div class="{{ pimcore_select("text-align") }}">
  129.             {% if not pimcore_textarea("content-title").isEmpty %}
  130.                 {% if pimcore_select("content-heading").getData() == 'span' %}
  131.                     <span class="uk-h2">
  132.                         {{ pimcore_textarea("content-title", {
  133.                         "nl2br" : true})|raw }}
  134.                     </span>
  135.                 {% else %}
  136.                     {% set content_heading = pimcore_select("content-heading").getData() %}
  137.                     <{{ content_heading }} class="uk-{{ pimcore_select("content-heading-style").getData() }}">
  138.                         {{ pimcore_textarea("content-title", {
  139.                         "nl2br" : true})|raw }}
  140.                     </{{ content_heading }}>
  141.                 {% endif %}
  142.             {% endif %}
  143.             <div class="apk-content">
  144.                 {{ pimcore_wysiwyg("content") }}
  145.             </div>
  146.             {% if not pimcore_link("content-btn").isEmpty() %}
  147.                 <div class="actions">
  148.                     {{ pimcore_link("content-btn", {
  149.                         "class" : "uk-button uk-button-large " ~ buttonColor
  150.                     }) }}
  151.                 </div>
  152.             {% endif %}
  153.         </div>
  154.     </div>
  155.     
  156. </div>
  157. {% endif %}