vendor/store.shopware.com/c108hotspots/src/Resources/views/storefront/element/cms-element-hotspots.html.twig line 1

Open in your IDE?
  1. {% block element_hotspots %}
  2. {% set id = element.id %}
  3. {% set allMarkers = element.data.allMarkers %}
  4. {% set c108hdesign = element.config.c108hdesign.value %}
  5. {% set c108hnrhotspots = element.config.c108hnrhotspots.value %}
  6. {% set currMediaId = element.config.media.value %}
  7. {% set currMediaCollection = searchMedia([currMediaId], context.context) %}
  8. {% set currMediaObject = currMediaCollection.get(currMediaId) %}
  9. {% set currImgPath = currMediaObject.url %}
  10. {% set currImgAlt = currMediaObject.translated.alt %}
  11. {% set currImgTitle = currMediaObject.translated.title  %}
  12. {% set c108hhighlightcol = element.config.c108hhighlightcol.value %}
  13. {% set c108hmobileimagebool = element.config.c108hmobileimagebool.value|default(false) %}
  14. {% set c108htabletimagebool = element.config.c108htabletimagebool.value|default(false) %}
  15. {% set c108hmobileimageurl = element.config.c108hmobileimageurl.value|default('') %}
  16. {% set c108htabletimageurl = element.config.c108htabletimageurl.value|default('') %}
  17. {% set c108hlazyloadingattributebool = element.config.c108hlazyloadingattributebool.value|default(false) %}
  18. {% set c108huseeditorbool = element.config.c108huseeditorbool.value|default(false) %}
  19. {% set c108husemaxheightbool = element.config.c108husemaxheightbool.value|default(false) %}
  20. {% set c108hfrontendlabelsbool = element.config.c108hfrontendlabelsbool.value|default(false) %}
  21. {% set c108hindividualcolorsbool = element.config.c108hindividualcolorsbool.value|default(false) %}
  22. {% set c108hcloseonclickedoutsidebool = element.config.c108hcloseonclickedoutsidebool.value|default(false) %}
  24. {% if c108hfrontendlabelsbool %}
  25. <style>
  26. div[data-cms-element-id="{{ id }}"] .hfi-frontend-label {
  27.   background-color: rgba(255, 255, 355, 0.85);
  28.   width: 120px;
  29.   display: inline-block;
  30.   text-align: center;
  31.   font-size: 11px;
  32.   padding: 4px;
  33.   font-weight: 600;
  34.   box-shadow: 0 4px 4px rgb(0 0 0 / 30%);
  35.   pointer-events: none;
  36.   position: absolute;
  37.   left: -40px;
  38.   right: 0;
  39.   top: 50px;
  40.   word-break: break-all;
  41. }
  43. div[data-cms-element-id="{{ id }}"] .einfach .hfi-frontend-label {
  44.   left: -50px;
  45.   top: 30px;
  46. }
  48. @media screen and (max-width: 767px) {
  49.   div[data-cms-element-id="{{ id }}"] .hfi-frontend-label {
  50.     display:none;
  51.   }
  52. }
  53. </style>
  54. {% endif %}
  56. <div id="hfi-wrapper-{{ id }}" data-cms-element-id="{{ id }}" class="c108-hfi-wrapper {{ c108hdesign }}">
  57. <div class="c108-hfi-inner">
  59. {# image #}
  60. <picture>
  61. <source media="(min-width: 1280px)" srcset="{{ currImgPath }}">
  62. {% if c108htabletimagebool %}
  63. <source media="(min-width: 768px) and (max-width: 1279px)" srcset="{{ c108htabletimageurl }}">
  64. {% endif %}
  65. {% if c108hmobileimagebool %}
  66. <source media="(max-width: 767px)" srcset="{{ c108hmobileimageurl }}">
  67. {% endif %}
  68. <img class="c108-hfi-bgimg" src="{{ currImgPath }}" alt={% if currImgAlt %}"{{ currImgAlt }}"{% else %}"Animated markings image"{% endif %} {% if currImgTitle %}title="{{ currImgTitle }}"{% else %}title="Animated markings image"{% endif %}{% if c108hlazyloadingattributebool %} loading="lazy"{% endif %}>
  69. </picture>
  71. {# marker #}
  72. {% for marker in allMarkers %}
  73. <div id="{{ id }}-c108-hfi-element-{{ loop.index }}" style="top: {{ marker.ypos.value }}%; left: {{ marker.xpos.value }}%;" class="c108-hfi-element {{ marker.hoverpos.value }}">
  74. <div class="c108-hfi-element-inner" style="position:relative;">
  75. <div data-element-id="{{ id }}" data-explanation-state="closed" class="c108-hfi-marker c108-hfi-marker-{{ id }}" onmouseover="showExplanation('{{ id }}', '{{ loop.index }}')" {% if c108hindividualcolorsbool and marker.color.value %}style="background-color:{{ marker.color.value }}"{% else %}style="background-color:{{ c108hhighlightcol }}"{% endif %}>
  76. {% if c108hfrontendlabelsbool %}<span class="hfi-frontend-label" data-label-state="visible">{{ marker.title.value|u.truncate(50, '...') }}</span>{% endif %}
  77. <span class="hfi-num">{{ loop.index }}</span>
  78. <span class="hfi-plus">+</span>
  79. </div>
  81. {# desktop #}
  82. <div id="{{ id }}-explanation-{{ loop.index }}" class="c108-hfi-explanation c108-hfi-explanation-d-{{ id }} desktop{% if c108husemaxheightbool %} max-height-enabled{% endif %}">
  83. <span class="c108-hfi-explanation-close" onclick="closeExplanation()">×</span>
  84. {% if c108huseeditorbool %}
  85. <div>{% autoescape %}{{ marker.texteditorcontent.value|default('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')|raw }}{% endautoescape %}</div>
  86. {% else %}
  87. <span class="expl-title">{{ marker.title.value }}</span>
  88. <p>{{ marker.description.value }}</p>
  89. {% if marker.linkbool.value %}
  90. {% if marker.linkinternal.value == true %}
  91. <a style="color:{{ c108hhighlightcol }};" href="{{ marker.linkurl.value }}" title="{{ marker.linktitle.value }}">{{ marker.linktitle.value }}</a>
  92. {% else %}
  93. <a style="color:{{ c108hhighlightcol }};" href="{{ marker.linkurl.value }}" rel="noopener" target="_blank" title="{{ marker.linktitle.value }}">{{marker.linktitle.value }}</a>
  94. {% endif %}
  95. {% endif %}
  96. {% endif %}
  97. </div>
  98. </div>
  99. </div>
  100. {% endfor %}
  102. {# mobile explanation box #}
  103. <div class="hfi-mobile-explanation-box">
  104. {% for marker in allMarkers %}
  105. <div id="explanation-mobile-{{ loop.index }}-{{ id }}" class="c108-hfi-explanation c108-hfi-explanation-m-{{ id }} mobile{% if c108husemaxheightbool %} max-height-enabled{% endif %}">
  106. <span class="c108-hfi-explanation-close" onclick="closeExplanation()">×</span>
  107. {% if c108huseeditorbool %}
  108. <div>{% autoescape %}{{ marker.texteditorcontent.value|default('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')|raw }}{% endautoescape %}</div>
  109. {% else %}
  110. <span class="expl-title">{{ marker.title.value }}</span>
  111. <p>{{ marker.description.value }}</p>
  112. {% if marker.linkbool.value %}
  113. {% if marker.linkinternal.value == true %}
  114. <a style="color:{{ c108hhighlightcol }};" href="{{ marker.linkurl.value }}" title="{{ marker.linktitle.value }}">{{ marker.linktitle.value }}</a>
  115. {% else %}
  116. <a style="color:{{ c108hhighlightcol }};" href="{{ marker.linkurl.value }}" rel="noopener" target="_blank" title="{{ marker.linktitle.value }}">{{ marker.linktitle.value }}</a>
  117. {% endif %}
  118. {% endif %}
  119. {% endif %}
  120. </div>
  121. {% endfor %}
  122. </div>
  124. </div>
  125. </div>
  127. <script>
  128. function showExplanation(elementid, markernr){
  129.   var currentHotspotsElement = document.getElementById("hfi-wrapper-" + elementid);
  130.   var openExplanations = currentHotspotsElement.querySelectorAll(`[data-explanation-state="opened"]`);
  131.   var hiddenFrontendLabels = currentHotspotsElement.querySelectorAll(`[data-label-state="hidden"]`);
  133.   // hide opened explanations
  134.   for (var i = 0; i < openExplanations.length; i++) {
  135.     var currExplanation = openExplanations[i];
  136.     if (currExplanation !== '' && currExplanation){
  137.       currExplanation.setAttribute("data-explanation-state", "closed");
  138.       currExplanation.style.opacity = "0";
  139.       currExplanation.style.zIndex = "0";
  140.       currExplanation.style.pointerEvents = "none";
  141.       currExplanation.parentElement.style.zIndex = "1";
  142.       currExplanation.parentElement.parentElement.style.zIndex = "1";
  143.     }
  144.   }
  146.   // show hidden frontend labels
  147.   for (var k = 0; k < hiddenFrontendLabels.length; k++) {
  148.     var currLabel = hiddenFrontendLabels[k];
  149.     if (currLabel !== '' && currLabel){
  150.       currLabel.style.visibility = "visible";
  151.       currLabel.setAttribute("data-label-state", "visible");
  152.     }
  153.   }
  155.   // show explanation
  156.   var explanationDesktop = event.target.nextElementSibling;
  157.   var hotspotFrontendLabel = event.target.firstElementChild;
  159.   // hide label
  160.   if(hotspotFrontendLabel && hotspotFrontendLabel.classList.contains("hfi-frontend-label")){
  161.     hotspotFrontendLabel.style.visibility = "hidden";
  162.     hotspotFrontendLabel.setAttribute("data-label-state", "hidden");
  163.   }
  165.   explanationDesktop.setAttribute("data-explanation-state", "opened");
  166.   explanationDesktop.style.opacity = "1";
  167.   explanationDesktop.style.zIndex = "1000";
  168.   explanationDesktop.style.pointerEvents = "visible";
  169.   explanationDesktop.parentElement.style.zIndex = "1000";
  170.   explanationDesktop.parentElement.parentElement.style.zIndex = "1000";
  172.   var explanationMobile = currentHotspotsElement.querySelector("#explanation-mobile-" + markernr + "-" + elementid);
  173.   explanationMobile.setAttribute("data-explanation-state", "opened");
  174.   explanationMobile.style.opacity = "1";
  175.   explanationMobile.style.zIndex = "1000";
  176.   explanationMobile.style.pointerEvents = "visible";
  177.   explanationMobile.parentElement.style.zIndex = "1000";
  178. }
  180. function closeExplanation() {
  181.   var explanation = event.target.parentElement;
  182.   
  183.   if(event.target.parentElement.previousElementSibling && event.target.parentElement.previousElementSibling.firstElementChild){
  184.     var hotspotFrontendLabel = event.target.parentElement.previousElementSibling.firstElementChild;
  185.   }
  186.   
  187.   if(hotspotFrontendLabel && hotspotFrontendLabel.classList.contains("hfi-frontend-label")){
  188.     hotspotFrontendLabel.style.visibility = "visible";
  189.     hotspotFrontendLabel.setAttribute("data-label-state", "visible");
  190.   }
  192.   explanation.style.opacity = "0";
  193.   explanation.style.zIndex = "0";
  194.   explanation.style.pointerEvents = "none";
  195.   explanation.parentElement.style.zIndex = "1";
  196.   explanation.parentElement.parentElement.style.zIndex = "1";
  197.   explanation.setAttribute("data-explanation-state", "closed");
  198. }
  199. </script>
  201. {% if c108hcloseonclickedoutsidebool %}
  202. <script>
  203. document.addEventListener('click', function(event) {
  204.     var isClickInsideExplanation = event.target.closest('[data-explanation-state="opened"]');
  206.     if (!isClickInsideExplanation) {
  207.         var openedExplanations = document.querySelectorAll('[data-explanation-state="opened"]');
  208.         openedExplanations.forEach(function(openedExplanation) {
  209.             if (openedExplanation.previousElementSibling && openedExplanation.previousElementSibling.firstElementChild) {
  210.                 var hotspotFrontendLabel = openedExplanation.previousElementSibling.firstElementChild;
  212.                 if (hotspotFrontendLabel && hotspotFrontendLabel.classList.contains("hfi-frontend-label")) {
  213.                     hotspotFrontendLabel.style.visibility = "visible";
  214.                     hotspotFrontendLabel.setAttribute("data-label-state", "visible");
  215.                 }
  216.             }
  218.             openedExplanation.style.opacity = "0";
  219.             openedExplanation.style.zIndex = "0";
  220.             openedExplanation.style.pointerEvents = "none";
  221.             openedExplanation.parentElement.style.zIndex = "1";
  222.             openedExplanation.parentElement.parentElement.style.zIndex = "1";
  223.             openedExplanation.setAttribute("data-explanation-state", "closed");
  224.         });
  225.     }
  226. });
  227. </script>
  228. {% endif %}
  229. {% endblock %}