Skip to content

Commit

Permalink
Dynamic modal content
Browse files Browse the repository at this point in the history
  • Loading branch information
Sascha Weidner committed May 22, 2018
1 parent 7c7eae1 commit de68c2b
Show file tree
Hide file tree
Showing 9 changed files with 260 additions and 8 deletions.
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Das Formular wird allerdings erst abgesendet, nachdem der Benutzer im Modal den
## Installation im Contao Manager

- Suche nach `sioweb/dsgvo`
- Füge im Seitenlayout das Template `j_dsgvo.html5` hinzu
- Lege das Eingabefeld `DSGVO Feld` an
- Testen
- Lege das Eingabefeld `DSGVO Feld` an
- Fülle die DSGVO-Einstellungen aus (Es sind inserttags erlaubt!)
- Testen (Es müssen alle Pflichtfelder aktiviert werden!)
- GGf. funktioniert die Validierung nicht mehr richtig
4 changes: 2 additions & 2 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "sioweb/dsgvo",
"type": "contao-bundle",
"description": "Adds an invisible checkbox and a nice layer to contact forms; contao +4",
"description": "Sioweb Media Dsgvo for contao +4",
"license": "LGPL-3.0+",
"version": "1.0.0",
"version": "1.1.0",
"authors": [
{
"name": "Sascha Weidner",
Expand Down
13 changes: 13 additions & 0 deletions src/Forms/FormDsgvo.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,17 @@ class FormDsgvo extends \FormCheckBox
protected $strTemplate = 'form_checkbox_dsgvo';

protected $strPrefix = 'widget widget-checkbox widget-accept-dsgvo';

protected function getModalTitle() {
return $this->dsgvo_title;
}
protected function getModalContent() {
return $this->dsgvo_content;
}
protected function getModalAccept() {
return $this->dsgvo_accept_button;
}
protected function getModalAbort() {
return $this->dsgvo_abort_button;
}
}
2 changes: 2 additions & 0 deletions src/Resources/contao/config/config.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,7 @@

$GLOBALS['TL_CSS'][] = 'web/bundles/siowebdsgvo/css/jquery.confirm.css|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'web/bundles/siowebdsgvo/js/jquery.confirm.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'web/bundles/siowebdsgvo/js/dsgvo.confirm.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = 'web/bundles/siowebdsgvo/js/loadDsgvo.js|static';

$GLOBALS['EFG']['storable_fields'][] = 'dsgvo';
34 changes: 32 additions & 2 deletions src/Resources/contao/dca/tl_form_field.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,44 @@
* @package sioweb.dsgvo
* @copyright Sioweb, Sascha Weidner
*/

$GLOBALS['TL_DCA']['tl_form_field']['config']['onload_callback'][] = array(
'dsgvo_form_field','setFieldName'
);
$GLOBALS['TL_DCA']['tl_form_field']['config']['onsubmit_callback'][] = array(
'dsgvo_form_field','adjustDcaByType'
);
$GLOBALS['TL_DCA']['tl_form_field']['palettes']['dsgvo'] = '{type_legend},type,name,label;{fconfig_legend},mandatory;{options_legend},options;{expert_legend:hide},class;{template_legend:hide},customTpl;{invisible_legend:hide},invisible';
$GLOBALS['TL_DCA']['tl_form_field']['palettes']['dsgvo'] = '{type_legend},type,name,label;{dsgvo_legend},dsgvo_title,dsgvo_content,dsgvo_accept_button,dsgvo_abort_button;{fconfig_legend},mandatory;{options_legend},options;{expert_legend:hide},class;{template_legend:hide},customTpl;{invisible_legend:hide},invisible';


$GLOBALS['TL_DCA']['tl_form_field']['fields']['dsgvo_title'] = array(
'label' => &$GLOBALS['TL_LANG']['tl_form_field']['dsgvo_title'],
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true, 'tl_class'=>'long clr'),
'sql' => "varchar(64) NOT NULL default ''"
);
$GLOBALS['TL_DCA']['tl_form_field']['fields']['dsgvo_content'] = array(
'label' => &$GLOBALS['TL_LANG']['tl_form_field']['dsgvo_content'],
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true, 'allowHtml'=>true, 'tl_class'=>'long clr'),
'sql' => "text NULL"
);
$GLOBALS['TL_DCA']['tl_form_field']['fields']['dsgvo_accept_button'] = array(
'label' => &$GLOBALS['TL_LANG']['tl_form_field']['dsgvo_accept_button'],
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true, 'tl_class'=>'long clr'),
'sql' => "varchar(64) NOT NULL default ''"
);
$GLOBALS['TL_DCA']['tl_form_field']['fields']['dsgvo_abort_button'] = array(
'label' => &$GLOBALS['TL_LANG']['tl_form_field']['dsgvo_abort_button'],
'exclude' => true,
'inputType' => 'text',
'eval' => array('mandatory'=>true, 'tl_class'=>'long clr'),
'sql' => "varchar(64) NOT NULL default ''"
);


class dsgvo_form_field extends tl_form_field {

Expand Down
42 changes: 42 additions & 0 deletions src/Resources/contao/languages/de/tl_form_field.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,48 @@
<source>...</source>
<target>...</target>
</trans-unit>

<trans-unit id="tl_form_field.dsgvo_legend">
<source>DSGVO-Overlay</source>
<target>DSGVO-Overlay</target>
</trans-unit>

<trans-unit id="tl_form_field.dsgvo_title.0">
<source>Modal Title</source>
<target>Modal Titel</target>
</trans-unit>
<trans-unit id="tl_form_field.dsgvo_title.1">
<source>Dieser Eintrag wird im Modal als Überschrift dargestellt.</source>
<target>Dieser Eintrag wird im Modal als Überschrift dargestellt.</target>
</trans-unit>

<trans-unit id="tl_form_field.dsgvo_content.0">
<source>Modal Content</source>
<target>Modal Inhalt</target>
</trans-unit>
<trans-unit id="tl_form_field.dsgvo_content.1">
<source>Dieser Eintrag wird im Modal als Inhalt dargestellt. Hier kann auch ein ganzer Artikel oder ein Inhaltselement, mittels Inserttag eingetragen werden.</source>
<target>Dieser Eintrag wird im Modal als Inhalt dargestellt. Hier kann auch ein ganzer Artikel oder ein Inhaltselement, mittels Inserttag eingetragen werden.</target>
</trans-unit>

<trans-unit id="tl_form_field.dsgvo_accept_button.0">
<source>Senden Button</source>
<target>Senden Button</target>
</trans-unit>
<trans-unit id="tl_form_field.dsgvo_accept_button.1">
<source>Dieser Text wird für den Senden-Button im Modal verwendet.</source>
<target>Dieser Text wird für den Senden-Button im Modal verwendet.</target>
</trans-unit>

<trans-unit id="tl_form_field.dsgvo_abort_button.0">
<source>Abbrechen Button</source>
<target>Abbrechen Button</target>
</trans-unit>
<trans-unit id="tl_form_field.dsgvo_abort_button.1">
<source>Dieser Text wird für den Abbrechen-Button im Modal verwendet.</source>
<target>Dieser Text wird für den Abbrechen-Button im Modal verwendet.</target>
</trans-unit>

</body>
</file>
</xliff>
18 changes: 17 additions & 1 deletion src/Resources/contao/templates/form_checkbox_dsgvo.html5
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,23 @@

<?php $this->block('field'); ?>
<fieldset id="ctrl_<?= $this->id ?>" class="checkbox_container<?php if ($this->class) echo ' ' . $this->class; ?>">
<?php /**/?>
<script>
if(window.loadDscvo === undefined) {
window.loadDscvo = [];
}
window.loadDscvo.push((function($) {$(function(){
$('#ctrl_<?= $this->id ?>').hide();
$('#ctrl_<?= $this->id ?>').closest('form').find('[type="submit"]').dsgvoConfirm({
container: 'closest:.widget',
title: '<?= $this->getModalTitle()?>',
content: '<?= $this->getModalContent()?>',
button_accept: '<?= $this->getModalAccept()?>',
button_abort: '<?= $this->getModalAbort()?>'
})
});}));
</script>
<?php /**/?>

<?php if ($this->label): ?>
<legend>
Expand Down Expand Up @@ -33,6 +50,5 @@
</fieldset>
<?php endif; ?>
<?php endforeach; ?>

</fieldset>
<?php $this->endblock(); ?>
143 changes: 143 additions & 0 deletions src/Resources/public/js/dsgvo.confirm.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
(function($){

"use strict";

var pluginName = 'dsgvoConfirm',
PluginClass;


/* Enter PluginOptions */
$[pluginName+'Default'] = {
container: 'closest:.widget',
title: 'Kurz zum Datenschutz',
content: 'Mit dem Absenden des Formulares stimmst Du zu, dass Deine Angaben aus dem Kontaktformular zur Beantwortung Deiner Anfrage von Sioweb erhoben und verarbeitet werden. Die Daten werden nach abgeschlossener Bearbeitung Deiner Anfrage gelöscht.',
button_accept: 'Absenden',
button_abort: 'Abbrechen',
invalid: function(element,selfObj,confirmObj) {},
open: function(element,selfObj,confirmObj) {},
added: function(selfObj,confirmObj) {},
accept: function(selfObj,confirmObj) {},
abort: function(selfObj,confirmObj) {},
};


PluginClass = function() {

var selfObj = this;
this.item = false;
this.initOptions = new Object($[pluginName+'Default']);

this.init = function(elem) {
selfObj = this;

this.elem = elem;
this.item = $(this.elem);
this.isHTML = selfObj.elem.tagName.toLowerCase() === 'html';

this.loaded();
};

this.modalPosition = function(confirmObj) {
return {
width: confirmObj.item.width(),
height: confirmObj.item.height(),
bottom: ($(window).height() - (confirmObj.item.offset().top - $(window).scrollTop() + 50)),
left: confirmObj.item.offset().left - 20
};
};

this.loaded = function() {
selfObj.item.confirm({
container: selfObj.container,
title: selfObj.title,
content: selfObj.content,
button_accept: selfObj.button_accept,
button_abort: selfObj.button_abort,
abort: function(confirmObj) {
selfObj.abort(selfObj,confirmObj);
},
accept: function(confirmObj) {
$dsgvo.attr('checked', true);
selfObj.accept(selfObj,confirmObj);
confirmObj.item.closest('form')[0].submit();
},
added: function(confirmObj) {
selfObj.added(selfObj,confirmObj);
confirmObj.modal.css(selfObj.modalPosition(confirmObj));
},
open: function(confirmObj) {
var $required = confirmObj.item.closest('form').find('[required]'),
valid = true;

$required.each(function() {
if($(this).val() === '') {
valid = false;
selfObj.invalid(this,selfObj,confirmObj);
}
});

if(!valid) {
return false;
}

selfObj.open(this,selfObj,confirmObj);
confirmObj.modal.css(selfObj.modalPosition(confirmObj));
}
});
};
};

$[pluginName] = $.fn[pluginName] = function(settings) {
var element = typeof this === 'function'?$('html'):this,
newData = arguments[1]||{},
returnElement = [];

returnElement[0] = element.each(function(k,i) {
var pluginClass = $.data(this, pluginName);

if(!settings || typeof settings === 'object' || settings === 'init') {

if(!pluginClass) {
if(settings === 'init') {
settings = arguments[1] || {};
}
pluginClass = new PluginClass();

var newOptions = new Object(pluginClass.initOptions);

/* Space to reset some standart options */

/***/
if(settings) {
newOptions = $.extend(true,{},newOptions,settings);
}
pluginClass = $.extend(newOptions,pluginClass);
/** Initialisieren. */
this[pluginName] = pluginClass;
pluginClass.init(this);
if(element.prop('tagName').toLowerCase() !== 'html') {
$.data(this, pluginName, pluginClass);
}
} else {
pluginClass.init(this,1);
if(element.prop('tagName').toLowerCase() !== 'html') {
$.data(this, pluginName, pluginClass);
}
}
} else if(!pluginClass) {
return;
} else if(pluginClass[settings]) {
var method = settings;
returnElement[1] = pluginClass[method](newData);
} else {
return;
}
});

if(returnElement[1] !== undefined) {
return returnElement[1];
}

return returnElement[0];
};
})(jQuery);
5 changes: 5 additions & 0 deletions src/Resources/public/js/loadDsgvo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
if(window.loadDscvo !== undefined && window.loadDscvo.length) {
for(var key in window.loadDscvo) {
window.loadDscvo[key](jQuery);
}
}

0 comments on commit de68c2b

Please sign in to comment.