feat: Additinal wrapper. So it is possible to add an extra half-trans…

…parent background if needed. refactor: Code styling.
QUIQQER · Jun 6, 2018 · 8ac7ae0 · 8ac7ae0
1 parent a8b4e14
commit 8ac7ae0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/bin/Controls/SimpleGoogleMaps.js b/bin/Controls/SimpleGoogleMaps.js
@@ -1,6 +1,6 @@
 /**
  * @module package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps
- * @author www.pcsg.de (Henning Leutz)
+ * @author www.pcsg.de (Michael Danielczok)
  */
 define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
 
@@ -26,6 +26,9 @@ define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
 
         initialize: function (options) {
             this.parent(options);
+
+            this.Wrapper = null;
+            this.MapContainer = null;
 
             this.addEvents({
                 onImport: this.$onImport
@@ -44,14 +47,16 @@ define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
             });
 
             this.$Elm = this.getElm();
-            this.MapWrapper = this.$Elm.getElement('.simpleGoogleMap');
+            this.Wrapper = this.$Elm.getElement('.simpleGoogleMap-wrapper');
+            this.MapContainer = this.$Elm.getElement('.simpleGoogleMap');
 
             this.$Elm.setStyle('opacity', 0);
-            this.MapWrapper.setStyle(
+
+            this.Wrapper.setStyle(
                 'backgroundImage', 'url(' + this.$Elm.getAttribute('data-qui-imgUrl') + ')'
             );
 
-            this.Loader.inject(this.MapWrapper);
+            this.Loader.inject(this.MapContainer);
 
             this.createElm().then(function () {
                 self.showMapWrapper();
@@ -79,7 +84,7 @@ define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
                     }
                 });
 
-                self.Button.inject(self.MapWrapper);
+                self.Button.inject(self.MapContainer);
 
                 resolve();
             });
@@ -111,21 +116,20 @@ define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
             this.Iframe = new Element('iframe', {
                 'class': 'simpleGoogleMap-iframe',
                 styles : {
-                    opacity : 0,
-                    position: 'absolute'
+                    opacity : 0
                 },
                 src    : this.$Elm.getAttribute('data-qui-url'),
                 events : {
                     load: self.onIframeLoad
                 }
             });
 
-            this.Iframe.inject(this.MapWrapper);
+            this.Iframe.inject(this.MapContainer);
 
         },
 
         /**
-         * Perform this when iframe with Google Maps has been loaded
+         * Perform this when iFrame with Google Maps has been loaded
          */
         onIframeLoad: function () {
             var self = this;
@@ -141,5 +145,4 @@ define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
         }
 
     });
-});
-
+});
diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.css b/src/QUI/Bricks/Controls/SimpleGoogleMaps.css
@@ -1,7 +1,10 @@
-.simpleGoogleMap {
-    align-items: stretch;
+.simpleGoogleMap-wrapper {
     background-position: center;
     background-size: cover;
+}
+
+.simpleGoogleMap {
+    align-items: stretch;
     display: flex;
     height: 100%;
     justify-content: center;

diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.html b/src/QUI/Bricks/Controls/SimpleGoogleMaps.html
@@ -9,9 +9,10 @@ <h1>{$this->getAttribute('frontendTitle')}</h1>
     {$this->getAttribute('content')}
 </div>
 {/if}
-
-<div class="simpleGoogleMap">
-    {if !$preventLoadMap}
-    <iframe class="simpleGoogleMap-iframe" src="{$url}"></iframe>
-    {/if}
+<div class="simpleGoogleMap-wrapper">
+    <div class="simpleGoogleMap">
+        {if !$preventLoadMap}
+        <iframe class="simpleGoogleMap-iframe" src="{$url}"></iframe>
+        {/if}
+    </div>
 </div>
diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.php b/src/QUI/Bricks/Controls/SimpleGoogleMaps.php
@@ -49,7 +49,6 @@ public function getBody()
         $brickCity      = $this->getAttribute('city');
         $zoom           = $this->getAttribute('zoom');
         $preventLoadMap = $this->getAttribute('preventLoadMap');
-        $imgUrl         = '';
 
         if (!$zoom) {
             $zoom = 15;
@@ -61,6 +60,7 @@ public function getBody()
         ]);
 
         $url = 'https://www.google.com/maps/embed/v1/place?' . $query . "&zoom=" . $zoom;
+
         if ($preventLoadMap) {
             $imgUrl = URL_OPT_DIR . 'quiqqer/bricks/bin/images/SimpleGoogleMapsBackground1.png';