diff --git a/bin/Controls/SimpleGoogleMaps.js b/bin/Controls/SimpleGoogleMaps.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0145b4a534388b365290d18aed42fd4ddd2232a
--- /dev/null
+++ b/bin/Controls/SimpleGoogleMaps.js
@@ -0,0 +1,148 @@
+/**
+ * @module package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps
+ * @author www.pcsg.de (Michael Danielczok)
+ */
+define('package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps', [
+
+ 'qui/QUI',
+ 'qui/controls/Control',
+ 'qui/controls/buttons/Button',
+ 'qui/controls/loader/Loader',
+ 'Locale'
+
+], function (QUI, QUIControl, QUIButton, QUILoader, QUILocale) {
+ "use strict";
+
+ var lg = 'quiqqer/bricks';
+
+ return new Class({
+
+ Extends: QUIControl,
+ Type : 'package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps',
+
+ Binds: [
+ 'onIframeLoad'
+ ],
+
+ initialize: function (options) {
+ this.parent(options);
+
+ this.Wrapper = null;
+ this.MapContainer = null;
+
+ this.addEvents({
+ onImport: this.$onImport
+ });
+
+ },
+
+ /**
+ * event : on import
+ */
+ $onImport: function () {
+ var self = this;
+
+ this.Loader = new QUILoader({
+ 'type': 'ball-clip-rotate'
+ });
+
+ this.$Elm = this.getElm();
+ this.Wrapper = this.$Elm.getElement('.simpleGoogleMap-wrapper');
+ this.MapContainer = this.$Elm.getElement('.simpleGoogleMap');
+
+ this.$Elm.setStyle('opacity', 0);
+
+ this.Wrapper.setStyle(
+ 'backgroundImage', 'url(' + this.$Elm.getAttribute('data-qui-imgUrl') + ')'
+ );
+
+ this.Loader.inject(this.MapContainer);
+
+ this.createElm().then(function () {
+ self.showMapWrapper();
+ });
+ },
+
+ /**
+ * Create all needed elements
+ *
+ * @returns {Promise}
+ */
+ createElm: function () {
+ var self = this;
+ return new Promise(function (resolve) {
+ self.Button = new Element('button', {
+ 'class': 'btn btn-large btn-active-map',
+ html : QUILocale.get(lg, 'brick.control.simplegooglemaps.frontend.buttonShow'),
+ events : {
+ click: function () {
+ self.Loader.show();
+
+ self.Button.destroy();
+ self.activeMaps();
+ }
+ }
+ });
+
+ self.Button.inject(self.MapContainer);
+
+ resolve();
+ });
+ },
+
+ /**
+ * Show map wrapper (it concerns only wrapper)
+ *
+ * @returns {Promise}
+ */
+ showMapWrapper: function () {
+ var self = this;
+ return new Promise(function (resolve) {
+ moofx(self.$Elm).animate({
+ opacity: 1
+ }, {
+ duration: 500,
+ callback: resolve
+ });
+ });
+ },
+
+ /**
+ * Active Google Maps
+ */
+ activeMaps: function () {
+ var self = this;
+
+ this.Iframe = new Element('iframe', {
+ 'class': 'simpleGoogleMap-iframe',
+ styles : {
+ opacity : 0
+ },
+ src : this.$Elm.getAttribute('data-qui-url'),
+ events : {
+ load: self.onIframeLoad
+ }
+ });
+
+ this.Iframe.inject(this.MapContainer);
+
+ },
+
+ /**
+ * Perform this when iFrame with Google Maps has been loaded
+ */
+ onIframeLoad: function () {
+ var self = this;
+
+ moofx(this.Iframe).animate({
+ position: null,
+ opacity : 1
+ }, {
+ callback: function () {
+ self.Loader.hide();
+ }
+ });
+ }
+
+ });
+});
\ No newline at end of file
diff --git a/bin/images/SimpleGoogleMapsBackground.png b/bin/images/SimpleGoogleMapsBackground.png
new file mode 100644
index 0000000000000000000000000000000000000000..339c77a0164f414c6fcea88af84bea42a01daf2d
Binary files /dev/null and b/bin/images/SimpleGoogleMapsBackground.png differ
diff --git a/bin/images/SimpleGoogleMapsBackground1.png b/bin/images/SimpleGoogleMapsBackground1.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1e12ab657fc18f946d91c73be6fd7daaa7cf026
Binary files /dev/null and b/bin/images/SimpleGoogleMapsBackground1.png differ
diff --git a/bricks.xml b/bricks.xml
index e96d006b62e9f2a57f3fcdf801e608e4121ca8c1..e45836a093d3f0233072af720622ee98c48dff39 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -617,6 +617,9 @@
</description>
<settings>
+ <setting name="preventLoadMap" type="checkbox">
+ <locale group="quiqqer/bricks" var="brick.control.simplegooglemaps.settings.preventLoadMap"/>
+ </setting>
<setting name="place">
<locale group="quiqqer/bricks" var="brick.control.simplegooglemaps.settings.place"/>
</setting>
diff --git a/locale.xml b/locale.xml
index 3f469cb28fdfbdb7740df32f890a9fba6fa299d1..10c73e381428a4a482959629e837ec11cbfb9130 100644
--- a/locale.xml
+++ b/locale.xml
@@ -942,6 +942,10 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<pl><![CDATA[Ustawienia mapy]]></pl>
</locale>
+ <locale name="brick.control.simplegooglemaps.settings.preventLoadMap">
+ <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.place">
<de><![CDATA[Google Place]]></de>
<en><![CDATA[Google Place]]></en>
@@ -977,6 +981,10 @@ Möchten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<en><![CDATA[API Key]]></en>
<pl><![CDATA[Klucz API]]></pl>
</locale>
+ <locale name="brick.control.simplegooglemaps.frontend.buttonShow">
+ <de><![CDATA[Google Maps aktivieren]]></de>
+ <en><![CDATA[Enable Google Maps]]></en>
+ </locale>
<!-- Box Content -->
<locale name="bricks.BoxContent.title">
diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.css b/src/QUI/Bricks/Controls/SimpleGoogleMaps.css
index 0020072d0e17d2054bfe5f863fe87711081ffb30..7f3f2c5db289608a6db38512f5a6bc1fc1412293 100644
--- a/src/QUI/Bricks/Controls/SimpleGoogleMaps.css
+++ b/src/QUI/Bricks/Controls/SimpleGoogleMaps.css
@@ -1,14 +1,36 @@
+.simpleGoogleMap-wrapper {
+ background-position: center;
+ background-size: cover;
+}
+
.simpleGoogleMap {
- position: relative;
+ align-items: stretch;
+ display: flex;
height: 100%;
+ justify-content: center;
+ min-height: 300px;
+ position: relative;
}
.simpleGoogleMap-iframe {
background: none;
border: none;
display: block;
- height: 100%;
- min-height: 300px;
+ height: auto;
position: relative;
width: 100%;
-}
\ No newline at end of file
+}
+
+.btn-active-map {
+ align-self: center;
+ background: none;
+ border-color: #333;
+ color: #333;
+ font-size: 1.2rem;
+}
+
+.btn-active-map:hover,
+.btn-active-map:active{
+ background: #33333311;
+ color: #333;
+}
diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.html b/src/QUI/Bricks/Controls/SimpleGoogleMaps.html
index eb6ea808c246c6f77239b108766a81381cd0ebd4..4750a56e1ce58a042c2556d7199da7e2d5782e7d 100644
--- a/src/QUI/Bricks/Controls/SimpleGoogleMaps.html
+++ b/src/QUI/Bricks/Controls/SimpleGoogleMaps.html
@@ -9,7 +9,10 @@
{$this->getAttribute('content')}
</div>
{/if}
-
-<div class="simpleGoogleMap">
- <iframe class="simpleGoogleMap-iframe" src="{$url}"></iframe>
+<div class="simpleGoogleMap-wrapper">
+ <div class="simpleGoogleMap">
+ {if !$preventLoadMap}
+ <iframe class="simpleGoogleMap-iframe" src="{$url}"></iframe>
+ {/if}
+ </div>
</div>
\ No newline at end of file
diff --git a/src/QUI/Bricks/Controls/SimpleGoogleMaps.php b/src/QUI/Bricks/Controls/SimpleGoogleMaps.php
index a2c140fd4b67c58a04fe55ebd98e8df07641404a..979a2ff5884c0d6670abbc3e93aa116978041b67 100644
--- a/src/QUI/Bricks/Controls/SimpleGoogleMaps.php
+++ b/src/QUI/Bricks/Controls/SimpleGoogleMaps.php
@@ -20,20 +20,19 @@ class SimpleGoogleMaps extends QUI\Control
*
* @param array $attributes
*/
- public function __construct($attributes = array())
+ public function __construct($attributes = [])
{
// default options
- $this->setAttributes(array(
- 'title' => ''
- ));
+ $this->setAttributes([
+ 'title' => '',
+ 'preventLoadMap' => false
+ ]);
parent::__construct($attributes);
$this->addCSSFile(
dirname(__FILE__) . '/SimpleGoogleMaps.css'
);
-
-// $this->setAttribute('qui-class', "package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps");
}
/**
@@ -43,28 +42,40 @@ public function __construct($attributes = array())
*/
public function getBody()
{
- $Engine = QUI::getTemplateManager()->getEngine();
- $brickPlace = $this->getAttribute('place');
- $brickZip = $this->getAttribute('zip');
- $brickStreet = $this->getAttribute('street');
- $brickCity = $this->getAttribute('city');
- $zoom = $this->getAttribute('zoom');
+ $Engine = QUI::getTemplateManager()->getEngine();
+ $brickPlace = $this->getAttribute('place');
+ $brickZip = $this->getAttribute('zip');
+ $brickStreet = $this->getAttribute('street');
+ $brickCity = $this->getAttribute('city');
+ $zoom = $this->getAttribute('zoom');
+ $preventLoadMap = $this->getAttribute('preventLoadMap');
if (!$zoom) {
$zoom = 15;
}
- $query = http_build_query(array(
+ $query = http_build_query([
'key' => trim($this->getAttribute('api')),
'q' => "{$brickPlace},{$brickZip},{$brickStreet},{$brickCity}"
- ));
+ ]);
$url = 'https://www.google.com/maps/embed/v1/place?' . $query . "&zoom=" . $zoom;
- $Engine->assign(array(
- 'this' => $this,
- 'url' => $url
- ));
+ if ($preventLoadMap) {
+ $imgUrl = URL_OPT_DIR . 'quiqqer/bricks/bin/images/SimpleGoogleMapsBackground1.png';
+
+ $this->setAttributes([
+ 'qui-class' => "package/quiqqer/bricks/bin/Controls/SimpleGoogleMaps",
+ 'data-qui-url' => $url,
+ 'data-qui-imgUrl' => $imgUrl
+ ]);
+ }
+
+ $Engine->assign([
+ 'this' => $this,
+ 'url' => $url,
+ 'preventLoadMap' => $preventLoadMap
+ ]);
return $Engine->fetch(dirname(__FILE__) . '/SimpleGoogleMaps.html');
}