Merge branch 'dev'

bricks.xml

@@ -672,6 +672,21 @@
                 <setting name="preventLoadMap" type="checkbox">
                     <locale group="quiqqer/bricks" var="brick.control.simplegooglemaps.settings.preventLoadMap"/>
                 </setting>
+
+                <setting name="template" type="select">
+                    <locale group="quiqqer/bricks"
+                            var="brick.control.simplegooglemaps.settings.template"/>
+
+                    <option value="standard">
+                        <locale group="quiqqer/bricks"
+                                var="brick.control.simplegooglemaps.settings.template.standard"/>
+                    </option>
+                    <option value="nextToEachOther">
+                        <locale group="quiqqer/bricks"
+                                var="brick.control.simplegooglemaps.settings.template.nextToEachOther"/>
+                    </option>
+                </setting>
+
                 <setting name="place">
                     <locale group="quiqqer/bricks" var="brick.control.simplegooglemaps.settings.place"/>
                 </setting>

locale.xml

@@ -1257,6 +1257,19 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
             <de><![CDATA[Das automatische Laden von Google Maps verhindern. Der Benutzer muss sie manuell aktivieren.]]></de>
             <en><![CDATA[Prevent auto-load Google Maps. User must activate it manually.]]></en>
         </locale>
+        <locale name="brick.control.simplegooglemaps.settings.template">
+            <de><![CDATA[Template]]></de>
+            <en><![CDATA[Template]]></en>
+        </locale>
+            <locale name="brick.control.simplegooglemaps.settings.template.standard">
+                <de><![CDATA[Standard (Inhalt über der Karte)]]></de>
+                <en><![CDATA[Template (content above the map)]]></en>
+            </locale>
+            <locale name="brick.control.simplegooglemaps.settings.template.nextToEachOther">
+                <de><![CDATA[Nebeneinander (Text neben der Karte)]]></de>
+                <en><![CDATA[Next to each other (content next to the map)]]></en>
+            </locale>
+
         <locale name="brick.control.simplegooglemaps.settings.place">
             <de><![CDATA[Google Place]]></de>
             <en><![CDATA[Google Place]]></en>

src/QUI/Bricks/Controls/SimpleGoogleMaps.NextToEachOther.css

+.simpleGoogleMap-nextToEachOther {
+    display: flex;
+}
+
+.simpleGoogleMap-nextToEachOther-mapContainer,
+.simpleGoogleMap-nextToEachOther-contentContainer {
+    width: 100%;
+}
+
+.simpleGoogleMap-nextToEachOther-contentContainer {
+    margin-left: 1em;
+}
+
+.simpleGoogleMap-nextToEachOther-contentContainer p:last-child {
+    margin-bottom: 0;
+}
+
+.simpleGoogleMap-wrapper {
+    background-position: center;
+    background-size: cover;
+    height: 100%;
+}
+
+.simpleGoogleMap {
+    align-items: stretch;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    min-height: 300px;
+    position: relative;
+}
+
+.simpleGoogleMap-iframe {
+    background: none;
+    border: none;
+    display: block;
+    height: auto;
+    position: relative;
+    width: 100%;
+}
+
+.btn-active-map {
+    align-self: center;
+    background: none;
+    border-color: #333;
+    color: #333;
+    font-size: 1.2rem;
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.btn-active-map:hover,
+.btn-active-map:active {
+    background: #33333311;
+    color: #333;
+}
+
+@media screen and (max-width: 767px) {
+    .simpleGoogleMap-nextToEachOther {
+        display: block;
+    }
+
+    .simpleGoogleMap-nextToEachOther-mapContainer {
+        margin-bottom: 1em;
+    }
+
+    .simpleGoogleMap-nextToEachOther-contentContainer {
+        margin-left: 0;
+    }
+}
\ No newline at end of file

src/QUI/Bricks/Controls/SimpleGoogleMaps.NextToEachOther.html

+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+<header class="control-header">
+    <h1>{$this->getAttribute('frontendTitle')}</h1>
+</header>
+{/if}
+
+<div class="simpleGoogleMap-nextToEachOther">
+    <div class="simpleGoogleMap-nextToEachOther-mapContainer">
+        <div class="simpleGoogleMap-wrapper">
+            <div class="simpleGoogleMap">
+                {if !$preventLoadMap}
+                <iframe class="simpleGoogleMap-iframe" src="{$url}"></iframe>
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    {if  $this->getAttribute('content') != ""}
+    <div class="simpleGoogleMap-nextToEachOther-contentContainer">
+        {$this->getAttribute('content')}
+    </div>
+    {/if}
+</div>
\ No newline at end of file

src/QUI/Bricks/Controls/SimpleGoogleMaps.php

@@ -25,14 +25,11 @@ class SimpleGoogleMaps extends QUI\Control
         // default options
         $this->setAttributes([
             'title'          => '',
-            'preventLoadMap' => false
+            'preventLoadMap' => false,
+            'template'       => 'standard'
         ]);
 
         parent::__construct($attributes);
-
-        $this->addCSSFile(
-            dirname(__FILE__) . '/SimpleGoogleMaps.css'
-        );
     }
 
     /**
@@ -59,8 +56,8 @@ class SimpleGoogleMaps extends QUI\Control
             'q'   => "{$brickPlace},{$brickZip},{$brickStreet},{$brickCity}"
         ]);
 
+        // prevent load map
         $url = 'https://www.google.com/maps/embed/v1/place?' . $query . "&zoom=" . $zoom;
-
         if ($preventLoadMap) {
             $imgUrl = URL_OPT_DIR . 'quiqqer/bricks/bin/images/SimpleGoogleMapsBackground1.png';
 
@@ -71,12 +68,26 @@ class SimpleGoogleMaps extends QUI\Control
             ]);
         }
 
+        // template
+        switch ($this->getAttribute('template')) {
+            case 'nextToEachOther':
+                $template = dirname(__FILE__) . '/SimpleGoogleMaps.NextToEachOther.html';
+                $css      = dirname(__FILE__) . '/SimpleGoogleMaps.NextToEachOther.css';
+                break;
+            case 'default':
+            default:
+                $template = dirname(__FILE__) . '/SimpleGoogleMaps.Standard.html';
+                $css      = dirname(__FILE__) . '/SimpleGoogleMaps.Standard.css';
+        }
+
         $Engine->assign([
             'this'           => $this,
             'url'            => $url,
             'preventLoadMap' => $preventLoadMap
         ]);
 
-        return $Engine->fetch(dirname(__FILE__) . '/SimpleGoogleMaps.html');
+        $this->addCSSFile($css);
+
+        return $Engine->fetch($template);
     }
 }