templates/module/Map/__google-map-betriebe.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Optional', 2: 'Content'} %}
  6.     {% set tab = 1 %}
  8.     <div id="content">        
  9.             {% if tabContentArray is defined and tab in tabContentArray|keys %}
  10.                 {{ admin_tabs(tab, tabContentArray) | raw }}
  11.             {% endif %} 
  12.             <section class="tabContent">
  14.                 <p class="hl">Optionale Einstellung:</p>
  15.                 {% set element = 'artikel' %}
  16.                 <div id="{{ element }} ">
  17.                     {{ pimcore_multiselect(element, {
  18.                             'width': 200,
  19.                             'height': 100,
  20.                             'store': [
  21.                                 ['abstand-top', 'Abstand nach oben'],
  22.                                 ['abstand-bottom', 'Abstand nach unten']
  23.                             ]
  24.                         }) }}
  25.                 </div>
  27.             </section>
  29.              {% if tabContentArray is defined and 2 in tabContentArray|keys %}
  30.                 {{ admin_tabs(2, tabContentArray) | raw }}
  32.                 <section class="tabContent">
  33.                     <div style="100%;height: 35px;">
  34.                     <div style="width: calc(100% - 20px);background-color:#f193f8; border:1px solid #cc21c1; padding:10px;">
  35.                         <strong>Die Zuweisung ist optional!</strong><br/><br/>Diese Zuweisung wird nur benötigt:<br/> - wenn die Seite als Theme
  36.                         'neutral' ist<br/>- oder Betriebe (unterschidlicher Kategorien) auf der Map gezeigt werden sollen
  37.                     </div>
  38.                 </div>
  40.                 <div style="width: 100%;padding-left:37px;margin-top:100px;"><p class="hl">Bitte aus dem Ordner
  41.                         "geo-location_oeffnungszeiten_kontakt"
  42.                         Kategorie-Ordner zuweisen:</p></div>
  43.                  <div class="dragdrop"><span class="parentbox">
  45.                     {{ pimcore_relations("objectGeolocationFolder", {
  46.                             "types": ["object"],
  47.                             "subtypes": {
  48.                                 "object": ["object"]
  49.                             },
  50.                             "classes": ["geolocation"],
  51.                             "width" : "750px",
  52.                             "disableInlineUpload" : true
  53.                         }) }}
  54.                 </span></div>
  57.                 <br/><br/><br/><br/>
  59.                 </section>
  60.             {% endif %}
  61.     </div>
  62.     {{ include('includes/backend-fuss.html.twig') }}
  65. {% else %}
  67.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  68.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  69.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  71.     <style media="screen">
  72.         .gmap {
  73.             height: 500px;
  74.         }
  76.         .gmap-filter {
  77.             padding-top: 1em;
  78.             padding-bottom: 0.5em;
  79.         }
  81.         .gmap-filter h5 {
  82.             margin-bottom: 0;
  83.         }
  85.         .gmap-iframe {
  86.             border: none;
  87.             width: 100%;
  88.             height: 100%;
  89.         }
  91.         #gmap-filter-rent:checked ~ [for="gmap-filter-rent"] span {
  92.             border: 1px solid #164194;
  93.             background-color: #164194;
  94.             color: #fff;
  95.         }
  97.         #gmap-filter-homes:checked ~ [for="gmap-filter-homes"] span {
  98.             border: 1px solid #bc9f60;
  99.             background-color: #bc9f60;
  100.             color: #000;
  101.         }
  103.         #gmap-filter-shops:checked ~ [for="gmap-filter-shops"] span {
  104.             border: 1px solid #f1f1f1;
  105.             background-color: #f1f1f1;
  106.             color: #e50000;
  107.         }
  108.     </style>
  110.     {% if document.getProperty('theme_doc') == 'neutral' %}
  111.         <div class="gmap-filter constrainer-maxsize edgepadding">
  113.             <h5> {{ 'map_filter'|trans }}</h5>
  115.             <div style="position:relative;">
  116.                 <input class="hide-checkbox" id="gmap-filter-rent" data-marker-group="rent" type="checkbox" checked="checked"/>
  117.                 <input class="hide-checkbox" id="gmap-filter-shops" data-marker-group="shops" type="checkbox" checked="checked"/>
  118.                 <input class="hide-checkbox" id="gmap-filter-homes" data-marker-group="homes" type="checkbox" checked="checked"/>
  120.                 <label class="gmap-filter-btn" for="gmap-filter-rent"><span>{{ text_rent }}</span></label>
  121.                 <label class="gmap-filter-btn" for="gmap-filter-homes"><span>{{ text_homes }}</span></label>
  122.                 <label class="gmap-filter-btn" for="gmap-filter-shops"><span>{{ text_shops }}</span></label>
  123.             </div>
  124.             <div>
  125.                 <small>{{ 'map_zeigen-oder-verbergen'|trans }}</small>
  126.             </div>
  127.         </div>
  128.     {% endif %}
  129.     <div class="gmap" data-url="">
  130.         <iframe src="" data-messenger="" class="gmap-iframe"></iframe>
  131.     </div>
  133.     <script>
  134.     document.addEventListener('DOMContentLoaded', function() {
  135.       var gmapElement = document.querySelector('.gmap');
  136.       if (gmapElement) {
  137.         gmapElement.dataset.url = window.location.href;
  138.       }
  139.     });
  140.         (function () {
  141.             var moduleName = 'gmap_module'; // naming convention XXX_module
  143.             if (typeof selt === 'undefined') {
  144.                 selt = {
  145.                     modules: {}
  146.                 };
  147.             } else if (!selt.modules) {
  148.                 selt.modules = {};
  149.             }
  151.             selt.modules[moduleName] = {
  153.                 name: moduleName,
  155.                 init: function () {
  156.                     // console.log('init', this.name);
  157.                     gmap_module();
  158.                 }
  160.             };
  162.             function updateLogoBar(logoBarUrl) {
  163.                 $.ajax({
  164.                     type: "GET",
  165.                     url: logoBarUrl
  166.                 }).done(function (result, success, obj) {
  167.                     if (obj.status === 200) {
  168.                         var logobar = $('[data-logobar]');
  169.                         if (logobar.length) {
  170.                             logobar.owlCarousel('destroy');
  171.                             logobar.html(result);
  172.                             selt.modules.logo_slider_module.init();
  173.                         }
  174.                     }
  175.                 });
  176.             };
  178.             function gmap_module() {
  179.                 var messenger = new selt.Messenger(),
  180.                     mapIframe = $('[data-messenger]')[0],
  181.                     mapFrameContent  = mapIframe.contentWindow;
  183.                 // init postMessage
  184.                 messenger.init(mapFrameContent);
  186.                 // add listener command
  187.                 messenger.command['gmap.ready'] = function () {
  188.                     var message = {
  189.                         name: "gmap.coordsToMarker",
  190.                         params: {{ mapArray| json_encode() | raw }}
  191.                     };
  192.                     messenger.sendMessage(message);
  193.                 };
  195.                 messenger.command['gmap.update_logobar'] = function (message) {
  196.                     logoBarUrl = '/marken?lg=de&id=' + message.params.id;
  197.                     updateLogoBar(logoBarUrl);
  198.                 };
  200.                 // show / hide marker groups
  201.                 document.querySelectorAll('[data-marker-group]').forEach(function (item) {
  204.                     item.addEventListener('click', function () {
  206.                         var message = {
  207.                             name: "gmap.toggleGroup",
  208.                             params: {type: this.getAttribute('data-marker-group'), checked: this.checked}
  209.                         };
  211.                         messenger.sendMessage(message);
  212.                     })
  213.                 })
  215.                 mapIframe.setAttribute('src', '/bundles/app/static/init/gmap/gmap.php');
  217.             }
  218.         }());//EOS
  221.     </script>
  223. {% endif %}