From de68c2ba185861311afc4900912065249f0eecf0 Mon Sep 17 00:00:00 2001 From: Sascha Weidner Date: Tue, 22 May 2018 09:35:28 +0200 Subject: [PATCH] Dynamic modal content --- README.md | 7 +- composer.json | 4 +- src/Forms/FormDsgvo.php | 13 ++ src/Resources/contao/config/config.php | 2 + src/Resources/contao/dca/tl_form_field.php | 34 ++++- .../contao/languages/de/tl_form_field.xlf | 42 +++++ .../templates/form_checkbox_dsgvo.html5 | 18 ++- src/Resources/public/js/dsgvo.confirm.js | 143 ++++++++++++++++++ src/Resources/public/js/loadDsgvo.js | 5 + 9 files changed, 260 insertions(+), 8 deletions(-) create mode 100644 src/Resources/public/js/dsgvo.confirm.js create mode 100644 src/Resources/public/js/loadDsgvo.js diff --git a/README.md b/README.md index aabfaa1..4ec4643 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/composer.json b/composer.json index 12c11f1..e9ce520 100644 --- a/composer.json +++ b/composer.json @@ -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", diff --git a/src/Forms/FormDsgvo.php b/src/Forms/FormDsgvo.php index d518a52..4490089 100644 --- a/src/Forms/FormDsgvo.php +++ b/src/Forms/FormDsgvo.php @@ -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; + } } \ No newline at end of file diff --git a/src/Resources/contao/config/config.php b/src/Resources/contao/config/config.php index 84e976d..1bfc1ac 100644 --- a/src/Resources/contao/config/config.php +++ b/src/Resources/contao/config/config.php @@ -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'; \ No newline at end of file diff --git a/src/Resources/contao/dca/tl_form_field.php b/src/Resources/contao/dca/tl_form_field.php index fc2bee4..eed5e5d 100644 --- a/src/Resources/contao/dca/tl_form_field.php +++ b/src/Resources/contao/dca/tl_form_field.php @@ -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 { diff --git a/src/Resources/contao/languages/de/tl_form_field.xlf b/src/Resources/contao/languages/de/tl_form_field.xlf index 34e1e12..a04486d 100644 --- a/src/Resources/contao/languages/de/tl_form_field.xlf +++ b/src/Resources/contao/languages/de/tl_form_field.xlf @@ -9,6 +9,48 @@ ... ... + + + DSGVO-Overlay + DSGVO-Overlay + + + + Modal Title + Modal Titel + + + Dieser Eintrag wird im Modal als Überschrift dargestellt. + Dieser Eintrag wird im Modal als Überschrift dargestellt. + + + + Modal Content + Modal Inhalt + + + Dieser Eintrag wird im Modal als Inhalt dargestellt. Hier kann auch ein ganzer Artikel oder ein Inhaltselement, mittels Inserttag eingetragen werden. + Dieser Eintrag wird im Modal als Inhalt dargestellt. Hier kann auch ein ganzer Artikel oder ein Inhaltselement, mittels Inserttag eingetragen werden. + + + + Senden Button + Senden Button + + + Dieser Text wird für den Senden-Button im Modal verwendet. + Dieser Text wird für den Senden-Button im Modal verwendet. + + + + Abbrechen Button + Abbrechen Button + + + Dieser Text wird für den Abbrechen-Button im Modal verwendet. + Dieser Text wird für den Abbrechen-Button im Modal verwendet. + + \ No newline at end of file diff --git a/src/Resources/contao/templates/form_checkbox_dsgvo.html5 b/src/Resources/contao/templates/form_checkbox_dsgvo.html5 index b1ab2d5..f1fc2db 100644 --- a/src/Resources/contao/templates/form_checkbox_dsgvo.html5 +++ b/src/Resources/contao/templates/form_checkbox_dsgvo.html5 @@ -2,6 +2,23 @@ block('field'); ?>
+ + + label): ?> @@ -33,6 +50,5 @@
- endblock(); ?> diff --git a/src/Resources/public/js/dsgvo.confirm.js b/src/Resources/public/js/dsgvo.confirm.js new file mode 100644 index 0000000..2b3efc7 --- /dev/null +++ b/src/Resources/public/js/dsgvo.confirm.js @@ -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); \ No newline at end of file diff --git a/src/Resources/public/js/loadDsgvo.js b/src/Resources/public/js/loadDsgvo.js new file mode 100644 index 0000000..68297fd --- /dev/null +++ b/src/Resources/public/js/loadDsgvo.js @@ -0,0 +1,5 @@ +if(window.loadDscvo !== undefined && window.loadDscvo.length) { + for(var key in window.loadDscvo) { + window.loadDscvo[key](jQuery); + } +} \ No newline at end of file