Merge pull request #16 from xprojects-de/development

Development
xprojects-de · Dec 11, 2020 · 1dfd839 · 1dfd839
2 parents 5fc88a3 + afba1d6
commit 1dfd839
Show file tree

Hide file tree

Showing 22 changed files with 800 additions and 500 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,12 @@
 # alpdesk-parallax
 
-Dieses Bundle enthält folgenden Funktionalitäten welche über die Artikel-Einstellungen im Backend konfiguriert werden.
+NEU: ab V 1.0.0 (Breaking Change)
+1. Die Animationen werden in einem eigenen BackendModul erstellt und dann beim Artikel angewählt.
+Desweiteren können nun alle Inhaltselemente in der Konfiguration ausgewählt werden. Die Animation kann mit einer ID/Klasse versehen werden und dann passend gestyled werden.
+2. Ebenso können Inhaltselemente selber eigens mit einer Animation versehen werden. Dies wird direkt im Contentelement konfiguriert.
+3. "In Respect" der Betriebssystemeinstellungen "Reduced-Motion" werden die Animationen dementsprechend passend konfiguriert. Wenn beispielsweise im iOS "Bewegungen reduzieren" eingestellt ist, werden die Animate.css Animationen nicht ausgeführt.
+
+Dieses Bundle enthält folgenden Funktionalitäten welche über die Artikel-Einstellungen, ContentElement-Einstellungen und dem Backendmodul "Alpdesk-Animationen" konfiguriert werden.
 (Das Bundle setzt jQuery als JavascriptLib voraus welche über das Seitenlayout eingebunden werden muss)
 
 ### Artikel-Hintergrundbild mit optionalem Parallax-Effekt (Legend: Parallax-Hintergrundbild)
@@ -19,27 +25,23 @@ Folgende Optionen/Auswahl sind verfügbar:
 Bei aktiviertem Parallax animiert/bewegt das Bundle das Bild dann automatisch in Abhänigkeit von der Scroll-Position und der Bild-Position.
 
 
-### Animations-Effekte (Legend: Animations-Effekte)
-
-Neben der Hintergrund-Parallax-Funktionalität stehen noch weitere Bild-Animations-Effekte zur Verfügung.
+### Animations-Effekte
 
-So kann z.B. ein Bild quer über den Bildschirm fahren wenn der Viewport des Artikels erreicht ist.
-Ebenso ist der volle Umfang von Animate.css integriert und kann als Effekt ausgewählt werden.
+Neben der Hintergrund-Parallax-Funktionalität stehen diverse Bewegungseffekte und ebenso der volle Umfang von Animate.css (V4) zur Verfügung.
 (see https://animate.style/)
 
-Diese Animationen sind unabhängig vom Parallax-Effekt und werden immer nur einmalig getrigger.
-
-Es können mehrere Animations-Effekte pro Artikel angegeben werden (MultiColumnWizard).
+Diese Animationen sind unabhängig vom Parallax-Effekt und werden immer nur einmalig getrigger (auch beim Resize).
+Die Animationen werden je nach Bedarf über die Artikel-Einstellungen, ContentElement-Einstellungen order dem Backendmodul "Alpdesk-Animationen" konfiguriert.
 
 Folgende Optionen/Auswahl sind verfügbar:
 
-1. Bild
-2. Viewport-Offset (ab welchem Viewport der Effekt starten soll. z.B. Viewport + 50% => Wenn der Artikel in der Mitte des Fensters ist)
-3. Startposition des Bildes (background-position-x, background-position-y)
-4. Bewegungs-Effekt (z.B. Bewege Bild von Startposition nach oben/rechts)
-5. Fade-Effekt (fadeIn,FadeOut)
+1. Kompletter Umfang von animate.css
+2. Weitere Bewegungseffekte
+3. Viewport-Offset (ab welchem Viewport der Effekt starten soll. z.B. Viewport + 50% => Wenn der Artikel in der Mitte des Fensters ist)
+4. Startposition des Elementes (background-position-x, background-position-y)
+5. Bewegungs-Effekt (z.B. Bewege Bild von Startposition nach oben/rechts)
 6. Effekt-Geschwindigkeit (Animation-Duration)
 
-Somit ist es mit diesem Bundle möglich "Bild-Spielereien" und Bewegung auf die Seite zu bringen.
+Somit ist es mit diesem Bundle möglich "Bild-Spielereien" und Bewegung auf die Seite zu bringen. :-)
 
 
diff --git a/composer.json b/composer.json
@@ -18,8 +18,7 @@
   },
   "require": {
     "php": ">=7.2",
-    "contao/core-bundle": "^4.9",
-    "menatwork/contao-multicolumnwizard-bundle": "^3.4"
+    "contao/core-bundle": "^4.9"
   },
   "conflict": {
     "contao/manager-plugin": "<2.0 || >=3.0"

diff --git a/src/AlpdeskParallaxBundle.php b/src/AlpdeskParallaxBundle.php
@@ -7,136 +7,5 @@
 use Symfony\Component\HttpKernel\Bundle\Bundle;
 
 class AlpdeskParallaxBundle extends Bundle {
-
-  public static $animationOptions = [
-      'Attention Seekers' => [
-          'bounce',
-          'flash',
-          'pulse',
-          'rubberBand',
-          'shakeX',
-          'shakeY',
-          'headShake',
-          'swing',
-          'tada',
-          'wobble',
-          'jello',
-          'heartBeat',
-      ],
-      'Back entrances' => [
-          'backInDown',
-          'backInLeft',
-          'backInRight',
-          'backInUp',
-      ],
-      'Back exits' => [
-          'backOutDown',
-          'backOutLeft',
-          'backOutRight',
-          'backOutUp',
-      ],
-      'Bouncing entrances' => [
-          'bounceIn',
-          'bounceInDown',
-          'bounceInLeft',
-          'bounceInRight',
-          'bounceInUp',
-      ],
-      'Bouncing exits' => [
-          'bounceOut',
-          'bounceOutDown',
-          'bounceOutLeft',
-          'bounceOutRight',
-          'bounceOutUp',
-      ],
-      'Fading Entrances' => [
-          'fadeIn',
-          'fadeInDown',
-          'fadeInDownBig',
-          'fadeInLeft',
-          'fadeInLeftBig',
-          'fadeInRight',
-          'fadeInRightBig',
-          'fadeInUp',
-          'fadeInTopLeft',
-          'fadeInTopRight',
-          'fadeInBottomLeft',
-          'fadeInBottomRight',
-      ],
-      'Fading Exits' => [
-          'fadeOut',
-          'fadeOutDown',
-          'fadeOutDownBig',
-          'fadeOutLeft',
-          'fadeOutLeftBig',
-          'fadeOutRight',
-          'fadeOutRightBig',
-          'fadeOutUp',
-          'fadeOutUpBig',
-          'fadeOutTopLeft',
-          'fadeOutTopRight',
-          'fadeOutBottomRight',
-          'fadeOutBottomLeft',
-      ],
-      'Flippers' => [
-          'flip',
-          'flipInX',
-          'flipInY',
-          'flipOutX',
-          'flipOutY',
-      ],
-      'Lightspeed' => [
-          'lightSpeedInRight',
-          'lightSpeedInLeft',
-          'lightSpeedOutRight',
-          'lightSpeedOutLeft',
-      ],
-      'Rotating Entrances' => [
-          'rotateIn',
-          'rotateInDownLeft',
-          'rotateInDownRight',
-          'rotateInUpLeft',
-          'rotateInUpRight',
-      ],
-      'Rotating Exits' => [
-          'rotateOut',
-          'rotateOutDownLeft',
-          'rotateOutDownRight',
-          'rotateOutUpLeft',
-          'rotateOutUpRight',
-      ],
-      'Sliding Entrances' => [
-          'slideInUp',
-          'slideInDown',
-          'slideInLeft',
-          'slideInRight',
-      ],
-      'Sliding Exits' => [
-          'slideOutUp',
-          'slideOutDown',
-          'slideOutLeft',
-          'slideOutRight',
-      ],
-      'Zooming Entrances' => [
-          'zoomIn',
-          'zoomInDown',
-          'zoomInLeft',
-          'zoomInRight',
-          'zoomInUp',
-      ],
-      'Zooming Exits' => [
-          'zoomOut',
-          'zoomOutDown',
-          'zoomOutLeft',
-          'zoomOutRight',
-          'zoomOutUp',
-      ],
-      'Specials' => [
-          'hinge',
-          'jackInTheBox',
-          'rollIn',
-          'rollOut',
-      ],
-  ];
-
+
 }
diff --git a/src/Listener/HooksListener.php b/src/Listener/HooksListener.php
@@ -16,6 +16,8 @@
 use Contao\StringUtil;
 use Contao\Validator;
 use Contao\System;
+use Contao\ContentModel;
+use Alpdesk\AlpdeskParallax\Model\AlpdeskanimationsModel;
 
 class HooksListener {
 
@@ -55,59 +57,49 @@ private function getImage($path, $size = '') {
     }
   }
 
-  private function getMeta($path) {
-    try {
-      $objMetaModel = (Validator::isUuid($path)) ? FilesModel::findByUuid($path) : FilesModel::findByPath($path);
-      if ($objMetaModel !== null && $objMetaModel->meta !== null) {
-        return StringUtil::deserialize($objMetaModel->meta);
-      }
-      return null;
-    } catch (\Exception $ex) {
+  private function appendAnimationEffect(int $animationItemId) {
+
+    if ($animationItemId <= 0) {
       return null;
     }
-  }
-
-  private function appendAnimationEffect(array $dataItem, $ignoreReducedAnimationMotion) {
 
-    if ($dataItem['animation_image'] === '') {
+    $animationModel = AlpdeskanimationsModel::findBy(array('id=?', 'published=?'), array($animationItemId, 1));
+    if ($animationModel == null) {
       return null;
     }
 
-    $imageSrc = $this->getImage($dataItem['animation_image']);
-    if ($imageSrc === null || $imageSrc === '') {
+    $contentModel = ContentModel::findBy(array('pid=?', 'ptable=?', 'invisible!=?'), array($animationModel->id, 'tl_alpdeskanimations', 1));
+    if ($contentModel == null) {
       return null;
     }
 
-    $templateAnimation = new FrontendTemplate('animation_container');
-    $templateAnimation->src = Environment::get('base') . $imageSrc;
-    $templateAnimation->viewport = $dataItem['animation_viewport'];
-    $templateAnimation->startposition = $dataItem['animation_startposition'];
-    $templateAnimation->effect = $dataItem['animation_effect'];
-    $templateAnimation->speed = $dataItem['animation_speed'];
-    $templateAnimation->hide = ($dataItem['animation_hide_before_viewport'] == 1 ? true : false);
-    $templateAnimation->foreground = ($dataItem['animation_zindex'] == 1 ? true : false);
-    $templateAnimation->ignoreReducedAnimationMotion = ($ignoreReducedAnimationMotion == 1 ? true : false);
-    $templateAnimation->animationCss = '';
-    if (\array_key_exists('animation_animatecss', $dataItem) && \is_array($dataItem['animation_animatecss']) && \count($dataItem['animation_animatecss'] > 0)) {
-      $templateAnimation->animationCss = implode(';', $dataItem['animation_animatecss']);
+    $animationContentElements = [];
+    foreach ($contentModel as $element) {
+      array_push($animationContentElements, $element->id);
     }
 
-    $templateAnimation->metaTitle = '';
-    $templateAnimation->metaAlt = '';
-    $templateAnimation->metaLink = '';
-    $templateAnimation->metaCaption = '';
-    $meta = $this->getMeta($dataItem['animation_image']);
-    if ($meta !== null) {
-      $currentLang = str_replace('-', '_', $GLOBALS['TL_LANGUAGE'] ?? 'en');
-      foreach ($meta as $key => $value) {
-        if ($key === $currentLang) {
-          $templateAnimation->metaTitle = $value['title'];
-          $templateAnimation->metaAlt = $value['alt'];
-          $templateAnimation->metaLink = $value['link'];
-          $templateAnimation->metaCaption = $value['caption'];
-          break;
-        }
-      }
+    $templateAnimation = new FrontendTemplate('animation_container');
+    $cssID = '';
+    $cssClass = '';
+    $cssIDClass = StringUtil::deserialize($animationModel->cssID);
+    if ($cssIDClass !== null && \is_array($cssIDClass) && \count($cssIDClass) == 2) {
+      $cssID = $cssIDClass[0];
+      $cssClass = $cssIDClass[1];
+    }
+    $templateAnimation->cssID = $cssID;
+    $templateAnimation->cssClass = $cssClass;
+    $templateAnimation->viewport = $animationModel->animation_viewport;
+    $templateAnimation->startposition = $animationModel->animation_startposition;
+    $templateAnimation->effect = $animationModel->animation_effect;
+    $templateAnimation->speed = $animationModel->animation_speed;
+    $templateAnimation->hide = ($animationModel->animation_hide_before_viewport == 1 ? true : false);
+    $templateAnimation->foreground = ($animationModel->animation_zindex == 1 ? true : false);
+    $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);
     }
 
     return $templateAnimation;
@@ -136,12 +128,14 @@ public function onCompileArticle(FrontendTemplate &$objTemplate, array $arrData)
 
     if (TL_MODE == 'FE' && $arrData['hasAnimationeffects'] == 1) {
       $elements = $objTemplate->elements;
-      $animationItems = StringUtil::deserialize($arrData['animationeffects']);
-      if (\is_array($animationItems) && \count($animationItems) > 0) {
-        foreach ($animationItems as $animationItem) {
-          $effect = $this->appendAnimationEffect($animationItem, $arrData['ignoreReducedAnimationMotion']);
-          if ($effect !== null) {
-            array_unshift($elements, $effect->parse());
+      if (\array_key_exists('alpdeskanimation', $arrData) && $arrData['alpdeskanimation'] != '') {
+        $animationItems = StringUtil::deserialize($arrData['alpdeskanimation']);
+        if (\is_array($animationItems) && \count($animationItems) > 0) {
+          foreach ($animationItems as $animationItem) {
+            $effect = $this->appendAnimationEffect(\intval($animationItem));
+            if ($effect !== null) {
+              array_unshift($elements, $effect->parse());
+            }
           }
         }
       }
@@ -165,4 +159,57 @@ public function onParseTemplate(Template $objTemplate) {
     }
   }
 
+  public function onGetContentElement(ContentModel $element, string $buffer): string {
+
+    if (TL_MODE == 'FE' && $element->hasAnimationeffects == 1) {
+
+      $matchesJs = \array_filter($GLOBALS['TL_JAVASCRIPT'], function($v) {
+        return strpos($v, 'alpdeskanimationeffects.js');
+      });
+      if (count($matchesJs) == 0) {
+        $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/alpdeskparallax/js/alpdeskanimationeffects.js|async';
+      }
+
+      $matchesCss = \array_filter($GLOBALS['TL_CSS'], function($v) {
+        return strpos($v, 'alpdeskanimationeffects.css');
+      });
+      if (count($matchesCss) == 0) {
+        $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/alpdeskanimationeffects.css';
+        $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/animate.min.css';
+      }
+
+      $animationCss = StringUtil::deserialize($element->animation_animatecss);
+      if ($animationCss !== null && \is_array($animationCss) && \count($animationCss) > 0) {
+
+        $classes = 'animation-effect-ce' . ($element->animation_hide_before_viewport == 1 ? ' animation-effect-hide' : '');
+
+        $dataAttributes = \array_filter([
+            'data-animationcss' => implode(';', $animationCss),
+            'data-hide' => ($element->animation_hide_before_viewport == 1 ? 1 : 0),
+            'data-viewport' => $element->animation_viewport,
+            'data-speed' => $element->animation_speed], function ($v) {
+          return null !== $v;
+        });
+
+        $buffer = \preg_replace_callback('|<([a-zA-Z0-9]+)(\s[^>]*?)?(?<!/)>|', function ($matches) use ($classes, $dataAttributes) {
+          $tag = $matches[1];
+          $attributes = $matches[2];
+
+          $attributes = preg_replace('/class="([^"]+)"/', 'class="$1 ' . $classes . '"', $attributes, 1, $count);
+          if (0 === $count) {
+            $attributes .= ' class="' . $classes . '"';
+          }
+
+          foreach ($dataAttributes as $key => $value) {
+            $attributes .= ' ' . $key . '="' . $value . '"';
+          }
+
+          return "<{$tag}{$attributes}>";
+        }, $buffer, 1);
+      }
+    }
+
+    return $buffer;
+  }
+
 }
diff --git a/src/Model/AlpdeskanimationsModel.php b/src/Model/AlpdeskanimationsModel.php
@@ -0,0 +1,13 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Alpdesk\AlpdeskParallax\Model;
+
+use Contao\Model;
+
+class AlpdeskanimationsModel extends Model {
+
+  protected static $strTable = 'tl_alpdeskanimations';
+
+}
diff --git a/src/Resources/config/services.yml b/src/Resources/config/services.yml
@@ -4,3 +4,4 @@ services:
             - { name: contao.hook, hook: getPageLayout, method: onGetPageLayout, priority: 0 }
             - { name: contao.hook, hook: compileArticle, method: onCompileArticle, priority: 0 }
             - { name: contao.hook, hook: parseTemplate, method: onParseTemplate, priority: 0 }
+            - { name: contao.hook, hook: getContentElement, method: onGetContentElement, priority: 0 }