DSGVO Button für Einwilligung gesondert vom Textfeld?

Hallo,

mir ist es bei der Nutzung recht umständlich, das ich den Datenschutzhinweis gesondert als Textelement anlegen muss, da (soweit ich die Woche getestet habe) aktuell ja das komplette Textfeld als "Button" fungiert.


Schöner wäre meines Erachtens, es gibt ein einzeiliges Textfeld für den Text des Buttons "Ok" , "Google Maps laden" und der Inhalt des Textfelds wird ganz normal mit allen Funktionen angezeigt und ermöglicht so dann auch einen gesonderten Link auf Inhalte, wie den Datenschutzhinweis.


LG

Hallo Diakon,

du meinst das Textfeld zum Angeben des Datenschutzhinweises?

Da kannst du doch alles auch mit Links versehen sowie dann das Feld mit CSS anpassen?

Zitat:

---

Zitat von planepix

Hallo Diakon,

du meinst das Textfeld zum Angeben des Datenschutzhinweises?

Da kannst du doch alles auch mit Links versehen sowie dann das Feld mit CSS anpassen?

---

Hallo planepix,

ja das stimmt aber bei meinen Tests war es immer so, das egal wie oder was man im "Textfeld" (also dessen Ausgabe) anklickt die Map geladen wird.

Das erwartet der User und ich ja nicht, wenn ich im Textfeld z.B. einen Hinweis auf die Datenschutzrichtlinien von der Seite hinterlege. Respektive kann ich die ja dann gar nicht anklicken.

LG

Mir gefällt das so auch nicht. Daher habe ich es bei allen Projekten so gelöst:

1) Neues Template angelegt
2) Das mit dem onclick gelöscht
3) die ID aus der Function gmap_allow entfernt, so dass ich immer gmap_allow() aufrufen kann als Link. Musst Du aber nicht. Kannst ja auch jede Karte separat aktivieren lassen. Muss dann halt immer die korrekte ID mit einbauen. Halte ich aber für überflüssig
4) in system/config/tinymce.php diese Zeile eingefügt (damit der TinyMCE ein JS Aufruf akzeptiert):

Code:

---

allow_script_urls: true,

---

5) Im Inhaltselement von Google Map einen Text eingebaut sowie zwei Links (Karte aktivieren :: Mehr Informationen).
6) Link zu Karte aktivieren gesetzt auf

Code:

---

javascript:gmap_allow()

---

Zitat:

---

Zitat von lomex

Mir gefällt das so auch nicht. Daher habe ich es bei allen Projekten so gelöst:

1) Neues Template angelegt
2) Das mit dem onclick gelöscht
3) die ID aus der Function gmap_allow entfernt, so dass ich immer gmap_allow() aufrufen kann als Link. Musst Du aber nicht. Kannst ja auch jede Karte separat aktivieren lassen. Muss dann halt immer die korrekte ID mit einbauen. Halte ich aber für überflüssig
4) in system/config/tinymce.php diese Zeile eingefügt (damit der TinyMCE ein JS Aufruf akzeptiert):

Code:

---

allow_script_urls: true,

---

5) Im Inhaltselement von Google Map einen Text eingebaut sowie zwei Links (Karte aktivieren :: Mehr Informationen).
6) Link zu Karte aktivieren gesetzt auf

Code:

---

javascript:gmap_allow()

---

---

Hi,

ohne jetzt drüber geguckt zu haben aber der Punkt 3. macht diese Variante nicht Upload kompatible oder wird das alles im Template geregelt.

Aber das soll nicht negativ gedeutet werden schon einmal vielen Danke für den guten Hinweis werde mir das nachher mal ansehen.

LG

Das wird alles im Template geregelt und ist natürlich Update kompatibel.
Einzig die Anpassung der TinyMCE wird beim Update überschrieben. Aber hier kannst Du ja Deine eigene TinyMCE einsetzen per dcaconfig oder sonst wie.
Und wenn man den Text nicht ändert, geht auch der Link nicht verloren. Daher ist das mit dem TinyMCE nicht soooo dramatisch.

Zitat:

---

Zitat von lomex

Das wird alles im Template geregelt und ist natürlich Update kompatibel.
Einzig die Anpassung der TinyMCE wird beim Update überschrieben. Aber hier kannst Du ja Deine eigene TinyMCE einsetzen per dcaconfig oder sonst wie.
Und wenn man den Text nicht ändert, geht auch der Link nicht verloren. Daher ist das mit dem TinyMCE nicht soooo dramatisch.

---

Sehr vielen dank!

Zitat:

---

Zitat von Diakon

Sehr vielen dank!

---

Ich habe nun einfach das JavaScript entfernt und direkt nach dem DS - Text einen festen Link eingebaut.

<a href="javascript..." >Karte anzeigen</a>


Klappt super.

@lomex: Könntest du uns das Tempalte zur Verfügung stellen?

Viele Grüße,
operatorone

1. Anlage tinyCustom.php => in system/config packen
Verändert ist nur die Zeile 48 mit allow_script_urls: true
Notwendig, damit im Datenschutzhinweis eine JS Function aufrufen werden kann (Beispieltext siehe unten)

2. Die neue tinyCustom für Google Maps aktivieren, dazu die /system/config/dcaconfig.php ändern und folgende Zeile eintragen:

PHP-Code:

---

<?php
// system/config/dcaconfig.php
$GLOBALS['TL_DCA']['tl_content']['fields']['dlh_googlemap_privacy'] = 'tinyCustom';

---

3. Anlage ce_dlh_googlemaps_default.html5 in => /templates speichern
Das onclick Event auf das Textfeld entfernt und am Ende eine Javascript Function hinzugefügt

4. Mustertext im Inhaltselement Google Maps:

HTML-Code:

---

<p>Zur Nutzung der Funktionen von Google Maps ist es notwendig, Ihre IP Adresse zu speichern. Diese Informationen werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert. Der Anbieter dieser Seite hat keinen Einfluss auf diese Datenübertragung.</p>
<p><a href="javascript:gmap_allow();">Karte aktivieren</a> :: <a href="{{link_url::16}}">Mehr Informationen</a></p>

---

Datei ce_dlh_googlemaps_default.html

PHP-Code:

---

<?php
if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'):
$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];
$this->map['privacy'] == '';
endif;
?>

<!-- indexer::stop -->
<div class="<?= $this->class; ?> block"<?= $this->cssID; ?><?php if ($this->style): ?> style="<?= $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?= $this->hl; ?>><?= $this->headline; ?></<?= $this->hl; ?>>
<?php endif; ?>

<div class="dlh_googlemap block" id="dlh_googlemap_<?= $this->map['id']; ?>" style="<?= $this->map['mapSize']['position'].$this->map['mapSize']['width'].$this->map['mapSize']['height'].$this->map['mapSize']['padding']; ?>"><?php if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'): ?><noscript><p><?= ($this->map['staticMapNoscript'] ? $this->map['staticMap'] : $this->labels['noscript']); ?></p></noscript><?php else: ?><div id="confirm-googlemaps" <?php echo ($this->map['protected']=='1' && $this->map['privacy']=='') ? $this->labels['privacy'] : $this->map['privacy']; ?></div><?php endif; ?></div>

<script>

function gmap<?= $this->map['id']; ?>_allow() {
    document.cookie = 'dlh_googlemaps=ok; max-age=<?= $GLOBALS['TL_CONFIG']['dlh_googlemaps']['cookiedays']; ?> ; path=/';
   
    var mapsSrc = document.createElement('script');
    mapsSrc.type = 'text/javascript';
    mapsSrc.src = 'https://maps.googleapis.com/maps/api/js?key=<?= $this->map['key']; ?>&language=<?= $this->map['language']; ?>';
    document.getElementsByTagName('head')[0].appendChild(mapsSrc);
    window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
}

function gmap<?= $this->map['id']; ?>_initialize() {

    if(!window.google){
        return false; 
    }

    var gmap<?= $this->map['id']; ?>_Options = {

        zoom: <?= $this->map['zoom']; ?>
        , center: new google.maps.LatLng(<?= $this->map['center']; ?>)
        , mapTypeId: google.maps.MapTypeId.<?= $this->map['mapTypeId']; ?>
        , draggable: <?= $this->map['draggable']; ?>
        , disableDoubleClickZoom: <?= $this->map['disableDoubleClickZoom']; ?>
        , scrollwheel: <?= $this->map['scrollwheel']; ?>


        <?php if ($this->map['useMapTypeControl']) : ?>
        , mapTypeControl: true
        , mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.<?= $this->map['mapTypeControlStyle']; ?>
            , position: google.maps.ControlPosition.<?= $this->map['mapTypeControlPos']; ?>
            <?php if (is_array($this->map['mapTypesAvailable'])) : ?>
            , mapTypeIds: [
                <?php foreach($this->map['mapTypesAvailable'] as $k=>$v) : ?>
                    <?php if($k>0) echo ','; ?>google.maps.MapTypeId.<?= $v; ?>
                <?php endforeach; ?>
                ]
            <?php endif; ?>
        }
        <?php else : ?>
        , mapTypeControl: false
        <?php endif; ?>


        <?php if ($this->map['useOverviewMapControl']) : ?>
        , overviewMapControl: true
        , overviewMapControlOptions: {
            opened: <?= ($this->map['overviewMapControlOpened'] ? 'true':'false'); ?>
        }
        <?php else : ?>
        , overviewMapControl: false
        <?php endif; ?>


        <?php if ($this->map['useStreetViewControl']) : ?>
        , streetViewControl: true
        , streetViewControlOptions: {
            position: google.maps.ControlPosition.<?= $this->map['streetViewControlPos']; ?>
        }
        <?php else : ?>
        , streetViewControl: false
        <?php endif; ?>


        <?php if ($this->map['useRotateControl']) : ?>
        , rotateControl: true
        , rotateControlOptions: {
            position: google.maps.ControlPosition.<?= $this->map['rotateControlPos']; ?>
        }
        <?php else : ?>
        , rotateControl: false
        <?php endif; ?>


        <?php if ($this->map['usePanControl']) : ?>
        , panControl: true
        , panControlOptions: {
            position: google.maps.ControlPosition.<?= $this->map['panControlPos']; ?>
        }
        <?php else : ?>
        , panControl: false
        <?php endif; ?>


        <?php if ($this->map['useZoomControl']) : ?>
        , zoomControl: true
        , zoomControlOptions: {
            style: google.maps.ZoomControlStyle.<?= $this->map['zoomControlStyle']; ?>,
            position: google.maps.ControlPosition.<?= $this->map['zoomControlPos']; ?>
        }
        <?php else : ?>
        , zoomControl: false
        <?php endif; ?>


        <?php if ($this->map['useScaleControl']) : ?>
        , scaleControl: true
        , scaleControlOptions: {
            position: google.maps.ControlPosition.<?= $this->map['scaleControlPos']; ?>
        }
        <?php else : ?>
        , scaleControl: false
        <?php endif; ?>


        <?php if ($this->map['parameter']) : ?>
        , <?= $this->map['parameter']; ?>
        <?php endif; ?>

    };

    google.maps.event.addDomListener(window, 'resize', function() {
        var center = gmap<?= $this->map['id'];?>.getCenter();

        google.maps.event.trigger(gmap<?= $this->map['id'];?>, 'resize');
        gmap<?= $this->map['id'];?>.setCenter(center);
    });

    var gmap<?= $this->map['id']; ?> = new google.maps.Map(document.getElementById("dlh_googlemap_<?= $this->map['id']; ?>"), gmap<?= $this->map['id']; ?>_Options);
    var gmap<?= $this->map['id']; ?>_markers = [];

    <?php if ($this->map['moreParameter']) : echo $this->map['moreParameter']; endif; ?>

    <?php
    // Auto-generated map elements
    foreach($this->map['elements'] AS $element) : echo $element['parsed']; endforeach; ?>

    if(window.gmap<?= $this->map['id']; ?>_dynmap){
        gmap<?= $this->map['id']; ?>_dynmap(gmap<?= $this->map['id']; ?>);
    }

    <?php if($this->map['useClusterer']): ?>
    var gmap<?= $this->map['id']; ?>_markerCluster = new MarkerClusterer(gmap<?= $this->map['id']; ?>, gmap<?= $this->map['id']; ?>_markers, {imagePath: '<?= $this->map[clusterImg]; ?>/m'});
    <?php endif; ?>

    <?php
    // tabcontrol
    echo $this->tabs ? $this->map['tabsCode'] : ''; ?>
}



if(window.addEvent) {
    window.addEvent('domready', function() {
        gmap<?= $this->map['id']; ?>_initialize();
    });
} else if(typeof jQuery == "function") {
    jQuery(document).ready(function(){
        gmap<?= $this->map['id']; ?>_initialize();
    });
} else {
    window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
}

</script>


<script type="text/javascript">
    function gmap_allow() {
      document.cookie = 'dlh_googlemaps=ok; max-age=31536000; path=/';
      location.reload();
    }
  </script>

</div>
<!-- indexer::continue -->

---

Datei tinyCustom.php

PHP-Code:

---

<?php

/**
 * Contao Open Source CMS
 *
 * Copyright (c) 2005-2016 Leo Feyer
 *
 * @license LGPL-3.0+
 */


/**
 * This is the tinyMCE (rich text editor) configuration file. Please visit
 * http://tinymce.moxiecode.com for more information.
 */
if ($GLOBALS['TL_CONFIG']['useRTE']):

?>
<script>window.tinymce || document.write('<script src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">\x3C/script>')</script>
<script>
setTimeout(function() {
  window.tinymce && tinymce.init({
    skin: 'contao',
    selector: '#<?php echo $selector; ?>',
    language: '<?php echo Backend::getTinyMceLanguage(); ?>',
    element_format: 'html',
    document_base_url: '<?php echo Environment::get('base'); ?>',
    entities: '160,nbsp,60,lt,62,gt,173,shy',
    setup: function(editor) {
      editor.getElement().removeAttribute('required');
    },
    init_instance_callback: function(editor) {
      if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
        editor.editorManager.get(editor.id).focus();
      }
      editor.on('focus', function() { Backend.getScrollOffset(); });
    },
    file_browser_callback: function(field_name, url, type, win) {
      Backend.openModalBrowser(field_name, url, type, win);
    },
    templates: [
      <?php echo Backend::getTinyTemplates(); ?>
    ],
    plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table template visualblocks',
    browser_spellcheck: true,
    tabfocus_elements: ':prev,:next',
    importcss_append: true,
    allow_script_urls: true,
    importcss_groups: [{title: '<?php echo Config::get('uploadPath'); ?>/tinymce.css'}],
    content_css: '<?php echo TL_PATH; ?>/system/themes/tinymce.css,<?php echo TL_PATH . '/' . Config::get('uploadPath'); ?>/tinymce.css',
    extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
    menubar: 'file edit insert view format table',
    toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code'
  });
}, 0);
</script>
<?php endif; ?>

---