src/Elements/Bundle/DemiFrontendBundle/Resources/views/Includes/elements/buttons/toggle-button.html.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * @var \Pimcore\Templating\PhpEngine this
  4.  * @var \Pimcore\Templating\PhpEngine view
  5.  * @var \Pimcore\Templating\GlobalVariables app
  6.  * #
  7.  * @var styleModifier string
  8.  * @var isBlock bool
  9.  * @var type string
  10.  * @var name string
  11.  * @var value string
  12.  * @var checked bool
  13.  * @var hasIcon bool
  14.  * @var additionalContent bool
  15.  * @var additionalText string
  16.  * @var additionalCount string
  17.  * @var text string
  18.  * @var icon string
  19.  * @var bubbles boolean
  20.  * @var bubblesId string
  21.  * @var isTruncate boolean
  22.  */ #}
  24. {% set classes = classes is defined ? classes : [] %}
  25. {% set additionalText = additionalText is defined ? additionalText : '' %}
  27. {% set hasIcon = hasIcon is defined ? hasIcon : false %}
  28. {% if hasIcon%}
  29.     {% set classes = classes|merge(['toggle-btn--has-icon']) %}
  30. {% endif %}
  32. {% if additionalContent is defined %}
  33.     {% set classes = classes|merge(['toggle-btn--aligned-left']) %}
  34. {% endif %}
  36. {% set isBlock = isBlock is defined ? isBlock : false %}
  37. {% if isBlock %}
  38.     {% set classes = classes|merge(['btn-block']) %}
  39. {% endif %}
  40. <label tabindex="0"
  41.        class="toggle-btn-wrapper {{ styleModifier }} {{ isBlock ? 'd-block': '' }}"{{ dataAttr is defined ? " #{dataAttr} " : '' }}>
  42.     <input class="sr-only"
  43.            tabindex="-1"
  44.            type="{{ type }}"
  45.            name="{{ name }}"
  46.            value="{{ value }}"
  47.            data-text="{{ text }}"
  48.         {% if checked is defined %}
  49.             checked
  50.         {% endif %}
  51.     >
  53.     {# If the toggle btn should show just "..." on mobile #}
  54.     {% set isTruncate = isTruncate is defined ? isTruncate : false %}
  56.     <span class="btn btn-default toggle-btn px-2 {{ isTruncate ? ' text-truncate' : 'toggle-btn--no-truncate' }} {{ classes | join (" ") }} ">
  57.         {% if additionalContent is defined %}
  58.     <span class="row">
  59.                 <span class="col text-left">
  60.                     {% if hasIcon %}
  61.                         <span class="demi-icon demi-icon-close-circle btn__icon toggle-btn__icon"></span>
  62.                     {% endif %}
  64.                     <span class="toggle-btn__content">
  65.                         {{ text }}
  66.                     </span>
  67.                 </span>
  68.                 <span class="col col-auto">
  69.                     {% if icon %}
  70.                         <span aria-hidden="true" class="demi-icon demi-icon-{{ icon }}"></span>
  71.                     {% elseif additionalText %}
  72.                         <span class="small" title="{{ additionalText }}"
  73.                               aria-label="{{ additionalText }}">({{ additionalCount }})</span>
  74.                     {% endif %}
  75.                 </span>
  76.             </span>
  77.    {% else %}
  78.         {% if hasIcon %}
  79.             <span class="demi-icon demi-icon-close-circle btn__icon toggle-btn__icon"></span>
  80.         {% endif %}
  82.     <span class="toggle-btn__content">
  83.                 {{ text }}
  84.         {% if bubbles is defined %}
  85.             <span class="small js-filter-form__count" data-id="{{ bubblesId is defined ? bubblesId : value }}" title="" aria-label=""></span>
  86.         {% endif %}
  87.             </span>
  88.     </span>
  89. </label>
  90. {% endif %}