Merge pull request #14 from xprojects-de/development

Adding check for reduce-motion of OS in respect of user settings
xprojects-de · Dec 10, 2020 · 5fc88a3 · 5fc88a3
2 parents 66ce54d + b685dd4
commit 5fc88a3
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 15 deletions.
diff --git a/src/Listener/HooksListener.php b/src/Listener/HooksListener.php
@@ -67,7 +67,7 @@ private function getMeta($path) {
     }
   }
 
-  private function appendAnimationEffect(array $dataItem) {
+  private function appendAnimationEffect(array $dataItem, $ignoreReducedAnimationMotion) {
 
     if ($dataItem['animation_image'] === '') {
       return null;
@@ -86,6 +86,7 @@ private function appendAnimationEffect(array $dataItem) {
     $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']);
@@ -138,7 +139,7 @@ public function onCompileArticle(FrontendTemplate &$objTemplate, array $arrData)
       $animationItems = StringUtil::deserialize($arrData['animationeffects']);
       if (\is_array($animationItems) && \count($animationItems) > 0) {
         foreach ($animationItems as $animationItem) {
-          $effect = $this->appendAnimationEffect($animationItem);
+          $effect = $this->appendAnimationEffect($animationItem, $arrData['ignoreReducedAnimationMotion']);
           if ($effect !== null) {
             array_unshift($elements, $effect->parse());
           }

diff --git a/src/Resources/contao/dca/tl_article.php b/src/Resources/contao/dca/tl_article.php
@@ -22,7 +22,7 @@
 $GLOBALS['TL_DCA']['tl_article']['subpalettes']['hasParallaxBackgroundImage'] = 'singleSRC,size,sizemodus,hAlign,vAlign,vParallax,isParallax';
 
 $GLOBALS['TL_DCA']['tl_article']['palettes']['__selector__'][] = 'hasAnimationeffects';
-$GLOBALS['TL_DCA']['tl_article']['subpalettes']['hasAnimationeffects'] = 'animationeffects';
+$GLOBALS['TL_DCA']['tl_article']['subpalettes']['hasAnimationeffects'] = 'ignoreReducedAnimationMotion,animationeffects';
 
 $GLOBALS['TL_DCA']['tl_article']['fields']['hasParallaxBackgroundImage'] = array
     (
@@ -133,6 +133,14 @@
     'sql' => "char(1) NOT NULL default ''"
 );
 
+$GLOBALS['TL_DCA']['tl_article']['fields']['ignoreReducedAnimationMotion'] = array
+    (
+    'label' => &$GLOBALS['TL_LANG']['tl_article']['ignoreReducedAnimationMotion'],
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'sql' => "char(1) NOT NULL default ''"
+);
+
 $GLOBALS['TL_DCA']['tl_article']['fields']['animationeffects'] = array(
     'label' => &$GLOBALS['TL_LANG']['tl_article']['animationeffects'],
     'exclude' => true,

diff --git a/src/Resources/contao/languages/de/tl_article.php b/src/Resources/contao/languages/de/tl_article.php
@@ -31,6 +31,7 @@
 );
 
 $GLOBALS['TL_LANG']['tl_article']['hasAnimationeffects'] = array('Animations-Effekte aktvieren', '');
+$GLOBALS['TL_LANG']['tl_article']['ignoreReducedAnimationMotion'] = array('Elemente trotz reduzierte Bewegungen des OS anzeigen', 'Die Animation wird aber dennoch nicht ausgeführ. Das Element wird nur plaziert.');
 $GLOBALS['TL_LANG']['tl_article']['animationeffects'] = array('Animations-Effekte', '');
 $GLOBALS['TL_LANG']['tl_article']['animation_image'] = array('Bild', 'Bitte wählen sie ein Bild aus');
 $GLOBALS['TL_LANG']['tl_article']['animation_hide_before_viewport'] = array('Unsichtbar vor Viewport', 'Element unsichtbar bevor es den Viewport erreicht');

diff --git a/src/Resources/contao/languages/en/tl_article.php b/src/Resources/contao/languages/en/tl_article.php
@@ -31,6 +31,7 @@
 );
 
 $GLOBALS['TL_LANG']['tl_article']['hasAnimationeffects'] = array('activate Animations-Effekte', '');
+$GLOBALS['TL_LANG']['tl_article']['ignoreReducedAnimationMotion'] = array('Show elements in spite of OS reduced movements', 'The animation will still not procceded. the element is just placed.');
 $GLOBALS['TL_LANG']['tl_article']['animationeffects'] = array('Animations-Effects', '');
 $GLOBALS['TL_LANG']['tl_article']['animation_image'] = array('Image', 'Please select an image');
 $GLOBALS['TL_LANG']['tl_article']['animation_hide_before_viewport'] = array('Hide before viewport', 'Hide Element before come to viewport');

diff --git a/src/Resources/contao/templates/animation_container.html5 b/src/Resources/contao/templates/animation_container.html5
@@ -1,9 +1,10 @@
-<div class="animation-effect<?= ($this->hide == true ? ' animation-effect-hide' : '') ?><?= ($this->foreground == true ? ' animation-effect-foreground': '')?>" 
+<div class="animation-effect<?= ($this->hide == true ? ' animation-effect-hide' : '') ?><?= ($this->foreground == true ? ' animation-effect-foreground': '')?><?= ($this->ignoreReducedAnimationMotion == true ? '': ' animation-effect-reducedmotion')?>" 
      data-startposition="<?= $this->startposition ?>"
      data-effect="<?= $this->effect ?>"
      data-speed="<?= $this->speed ?>"
      data-animationcss="<?= $this->animationCss ?>"
      data-hide="<?= ($this->hide == true ? 1 : 0) ?>"
+     data-ignoremotionreduce="<?= ($this->ignoreReducedAnimationMotion == true ? 1 : 0) ?>"
      data-viewport="<?= $this->viewport ?>">
        <?php if ($this->metaLink !== ''): ?>
     <a href="<?= $this->metaLink ?>" title="<?= $this->metaTitle ?>">

diff --git a/src/Resources/public/css/alpdeskanimationeffects.css b/src/Resources/public/css/alpdeskanimationeffects.css
@@ -17,4 +17,10 @@
 
 .has-animationeffects .animation-effect-hide {
   display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .has-animationeffects .animation-effect-reducedmotion {
+    display: none;
+  }
 }
diff --git a/src/Resources/public/js/alpdeskanimationeffects.js b/src/Resources/public/js/alpdeskanimationeffects.js
@@ -329,6 +329,7 @@ $(document).ready(function () {
             var speed = node.data('speed');
             var viewport = node.data('viewport');
             var hide = node.data('hide');
+            var ignoremotionreduce = node.data('ignoremotionreduce');
             var animateCss = node.data('animationcss');
             var animateCssOptions = [];
             if (animateCss !== '') {
@@ -341,29 +342,45 @@ $(document).ready(function () {
 
             prepareEffect(node, startposition);
 
-            animationElements.push({
-              node: node[0],
-              effect: effect,
-              fade: fade,
-              startposition: startposition,
-              speed: speed,
-              viewport: viewport,
-              animateCssOptions: animateCssOptions
-            });
+            var push = true;
 
-            processAnimation();
+            if (ignoremotionreduce !== 1) {
+              const mediaQueryMotionReduce = window.matchMedia('(prefers-reduced-motion: reduce)');
+              if (!mediaQueryMotionReduce || mediaQueryMotionReduce.matches === true) {
+                push = false;
+                $(node).hide();
+              }
+            }
+
+            if (push === true) {
+              animationElements.push({
+                node: node[0],
+                effect: effect,
+                fade: fade,
+                startposition: startposition,
+                speed: speed,
+                viewport: viewport,
+                animateCssOptions: animateCssOptions
+              });
+            }
 
           }
 
         });
 
       });
+
+      if (animationElements.length > 0) {
+        processAnimation();
+      }
+
     }
 
     init();
 
-    if (!animationElements.length)
+    if (!animationElements.length) {
       return;
+    }
 
     $(window).on('scroll', processAnimation);
     $(window).on('resize', init);