Merge pull request #17 from xprojects-de/development

Bugfix AnimateCSS because just one can be selected
xprojects-de · Dec 11, 2020 · 6247724 · 6247724
2 parents 1dfd839 + 78d12c3
commit 6247724
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 33 deletions.
diff --git a/src/Listener/HooksListener.php b/src/Listener/HooksListener.php
@@ -97,9 +97,9 @@ private function appendAnimationEffect(int $animationItemId) {
     $templateAnimation->ignoreReducedAnimationMotion = ($animationModel->ignoreReducedAnimationMotion == 1 ? true : false);
     $templateAnimation->animationContentElements = $animationContentElements;
     $templateAnimation->animationCss = '';
-    $animationCss = StringUtil::deserialize($animationModel->animation_animatecss);
-    if ($animationCss !== null && \is_array($animationCss) && \count($animationCss) > 0) {
-      $templateAnimation->animationCss = implode(';', $animationCss);
+    $animationCss = $animationModel->animation_animatecssoptions;
+    if ($animationCss !== null && $animationCss != '') {
+      $templateAnimation->animationCss = $animationCss;
     }
 
     return $templateAnimation;
@@ -178,13 +178,13 @@ public function onGetContentElement(ContentModel $element, string $buffer): stri
         $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/animate.min.css';
       }
 
-      $animationCss = StringUtil::deserialize($element->animation_animatecss);
-      if ($animationCss !== null && \is_array($animationCss) && \count($animationCss) > 0) {
+      $animationCss = $element->animation_animatecssoptions;
+      if ($animationCss !== null && $animationCss != '') {
 
         $classes = 'animation-effect-ce' . ($element->animation_hide_before_viewport == 1 ? ' animation-effect-hide' : '');
 
         $dataAttributes = \array_filter([
-            'data-animationcss' => implode(';', $animationCss),
+            'data-animationcss' => $animationCss,
             'data-hide' => ($element->animation_hide_before_viewport == 1 ? 1 : 0),
             'data-viewport' => $element->animation_viewport,
             'data-speed' => $element->animation_speed], function ($v) {

diff --git a/src/Resources/contao/dca/tl_alpdeskanimations.php b/src/Resources/contao/dca/tl_alpdeskanimations.php
@@ -65,7 +65,7 @@
         ]
     ],
     'palettes' => [
-        'default' => 'title,published;ignoreReducedAnimationMotion;animation_viewport;animation_hide_before_viewport,animation_zindex;animation_startposition,animation_speed,animation_effect,animation_animatecss;cssID'
+        'default' => 'title,published;ignoreReducedAnimationMotion;animation_viewport;animation_hide_before_viewport,animation_zindex;animation_startposition,animation_speed,animation_effect,animation_animatecssoptions;cssID'
     ],
     'fields' => [
         'id' => [
@@ -143,13 +143,13 @@
             'eval' => ['includeBlankOption' => true, 'tl_class' => 'w50'],
             'sql' => "varchar(20) NOT NULL default ''"
         ],
-        'animation_animatecss' => [
-            'label' => &$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecss'],
+        'animation_animatecssoptions' => [
+            'label' => &$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecssoptions'],
             'exclude' => true,
-            'inputType' => 'checkbox',
+            'inputType' => 'select',
             'options' => AlpdeskParallaxUtils::$animationCssOptions,
-            'eval' => ['includeBlankOption' => true, 'multiple' => true, 'tl_class' => 'clr'],
-            'sql' => "mediumtext NULL"
+            'eval' => ['includeBlankOption' => true, 'multiple' => false, 'tl_class' => 'clr'],
+            'sql' => "varchar(50) NOT NULL default ''"
         ],
         'cssID' => [
             'exclude' => true,

diff --git a/src/Resources/contao/dca/tl_content.php b/src/Resources/contao/dca/tl_content.php
@@ -24,7 +24,7 @@
 };
 
 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'hasAnimationeffects';
-$GLOBALS['TL_DCA']['tl_content']['subpalettes']['hasAnimationeffects'] = 'animation_hide_before_viewport,animation_viewport,animation_speed,animation_animatecss';
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['hasAnimationeffects'] = 'animation_hide_before_viewport,animation_viewport,animation_speed,animation_animatecssoptions';
 
 $GLOBALS['TL_DCA']['tl_content']['fields']['hasAnimationeffects'] = [
     'label' => &$GLOBALS['TL_LANG']['tl_content']['hasAnimationeffects'],
@@ -60,11 +60,11 @@
     'sql' => "varchar(20) NOT NULL default ''"
 ];
 
-$GLOBALS['TL_DCA']['tl_content']['fields']['animation_animatecss'] = [
-    'label' => &$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecss'],
+$GLOBALS['TL_DCA']['tl_content']['fields']['animation_animatecssoptions'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecssoptions'],
     'exclude' => true,
-    'inputType' => 'checkbox',
+    'inputType' => 'select',
     'options' => AlpdeskParallaxUtils::$animationCssOptions,
-    'eval' => ['includeBlankOption' => true, 'multiple' => true, 'tl_class' => 'clr'],
-    'sql' => "mediumtext NULL"
+    'eval' => ['includeBlankOption' => true, 'multiple' => false, 'tl_class' => 'clr'],
+    'sql' => "varchar(50) NOT NULL default ''"
 ];
diff --git a/src/Resources/contao/languages/de/tl_alpdeskanimations.php b/src/Resources/contao/languages/de/tl_alpdeskanimations.php
@@ -45,7 +45,7 @@
     'e8' => 'mitte/mitte',
     'e9' => 'mitte/rechts',
 ];
-$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecss'] = ['AnimateCss-Effekte', 'Bitte wählen sie einen Effect aus'];
+$GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_animatecssoptions'] = ['AnimateCss-Effekte', 'Bitte wählen sie einen Effect aus'];
 $GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_speed'] = ['Effekt-Geschwindigkeit', 'Bitte wählen sie eine Geschwindigkeit aus'];
 $GLOBALS['TL_LANG']['tl_alpdeskanimations']['animation_speed_options'] = [
     'slow' => 'langsam',

diff --git a/src/Resources/public/js/alpdeskanimationeffects.js b/src/Resources/public/js/alpdeskanimationeffects.js
@@ -146,14 +146,12 @@ $(document).ready(function () {
           });
         }
 
-        if (element.animateCssOptions.length > 0) {
+        if (element.animateCssOptions !== '') {
           $(element.node).css({
             animationDuration: speed + 'ms'
           });
           $(element.node).addClass('animate__animated');
-          for (var i = 0; i < element.animateCssOptions.length; i++) {
-            $(element.node).addClass('animate__' + element.animateCssOptions[i]);
-          }
+          $(element.node).addClass('animate__' + element.animateCssOptions);
         }
 
         switch (element.effect) {
@@ -337,11 +335,7 @@ $(document).ready(function () {
             var viewport = node.data('viewport');
             var hide = node.data('hide');
             var ignoremotionreduce = node.data('ignoremotionreduce');
-            var animateCss = node.data('animationcss');
-            var animateCssOptions = [];
-            if (animateCss !== '') {
-              animateCssOptions = animateCss.split(';');
-            }
+            var animateCssOptions = node.data('animationcss');
 
             if (hide === 1) {
               $(node).hide();
@@ -386,11 +380,7 @@ $(document).ready(function () {
           var speed = node.data('speed');
           var viewport = node.data('viewport');
           var hide = node.data('hide');
-          var animateCss = node.data('animationcss');
-          var animateCssOptions = [];
-          if (animateCss !== '') {
-            animateCssOptions = animateCss.split(';');
-          }
+          var animateCssOptions = node.data('animationcss');
 
           if (hide === 1) {
             $(node).css({