diff --git a/.gitignore b/.gitignore index f53fb92..5eee11d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,6 @@ /nbproject/private/ +/.idea/ +/public/ +/.run/ +/vendor/ +/composer.lock diff --git a/composer.json b/composer.json index f4eee55..f09b118 100644 --- a/composer.json +++ b/composer.json @@ -1,7 +1,11 @@ { "name": "alpdesk/alpdesk-parallax", "description": "Parallax for Contao 4", - "keywords": ["contao", "alpdesk", "Parallax"], + "keywords": [ + "contao", + "alpdesk", + "Parallax" + ], "type": "contao-bundle", "homepage": "https://github.com/xprojects-de/alpdesk-parallax", "license": "LGPL-3.0-or-later", @@ -24,7 +28,9 @@ "contao/manager-plugin": "<2.0 || >=3.0" }, "require-dev": { - "contao/manager-plugin": "^2.0" + "contao/manager-plugin": "^2.0", + "vimeo/psalm": "^4.6", + "phpstan/phpstan": "^0.12.82" }, "autoload": { "psr-4": { @@ -38,4 +44,4 @@ "config": { "contao-component-dir": "public" } -} \ No newline at end of file +} diff --git a/nbproject/project.properties b/nbproject/project.properties deleted file mode 100644 index 21a513e..0000000 --- a/nbproject/project.properties +++ /dev/null @@ -1,10 +0,0 @@ -file.reference.contao-devsources-Contao49=../contao-devsources/Contao49 -include.path=\ - ${php.global.include.path}:\ - ${file.reference.contao-devsources-Contao49} -php.version=PHP_72 -source.encoding=UTF-8 -src.dir=. -tags.asp=false -tags.short=false -web.root=. diff --git a/nbproject/project.xml b/nbproject/project.xml deleted file mode 100644 index 71e4f77..0000000 --- a/nbproject/project.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - org.netbeans.modules.php.project - - - alpdesk-parallax - - - diff --git a/psaml.xml b/psaml.xml new file mode 100644 index 0000000..9a302d2 --- /dev/null +++ b/psaml.xml @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/src/AlpdeskParallaxBundle.php b/src/AlpdeskParallaxBundle.php index 8f3545e..ef25d7e 100644 --- a/src/AlpdeskParallaxBundle.php +++ b/src/AlpdeskParallaxBundle.php @@ -6,6 +6,7 @@ use Symfony\Component\HttpKernel\Bundle\Bundle; -class AlpdeskParallaxBundle extends Bundle { - +class AlpdeskParallaxBundle extends Bundle +{ + } diff --git a/src/ContaoManager/Plugin.php b/src/ContaoManager/Plugin.php index 80e4788..cb7498c 100644 --- a/src/ContaoManager/Plugin.php +++ b/src/ContaoManager/Plugin.php @@ -10,10 +10,11 @@ use Contao\ManagerPlugin\Bundle\BundlePluginInterface; use Contao\ManagerPlugin\Bundle\Parser\ParserInterface; -class Plugin implements BundlePluginInterface { - - public function getBundles(ParserInterface $parser) { - return [BundleConfig::create(AlpdeskParallaxBundle::class)->setLoadAfter([ContaoCoreBundle::class])]; - } +class Plugin implements BundlePluginInterface +{ + public function getBundles(ParserInterface $parser) + { + return [BundleConfig::create(AlpdeskParallaxBundle::class)->setLoadAfter([ContaoCoreBundle::class])]; + } } diff --git a/src/DependencyInjection/AlpdeskParallaxExtension.php b/src/DependencyInjection/AlpdeskParallaxExtension.php index b439908..63704e0 100644 --- a/src/DependencyInjection/AlpdeskParallaxExtension.php +++ b/src/DependencyInjection/AlpdeskParallaxExtension.php @@ -9,11 +9,17 @@ use Symfony\Component\HttpKernel\DependencyInjection\Extension; use Symfony\Component\DependencyInjection\Loader\YamlFileLoader; -class AlpdeskParallaxExtension extends Extension { - - public function load(array $mergedConfig, ContainerBuilder $container) { - $loader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../Resources/config')); - $loader->load('services.yml'); - } +class AlpdeskParallaxExtension extends Extension +{ + /** + * @param array $configs + * @param ContainerBuilder $container + * @throws \Exception + */ + public function load(array $configs, ContainerBuilder $container) + { + $loader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../Resources/config')); + $loader->load('services.yml'); + } } diff --git a/src/Listener/HooksListener.php b/src/Listener/HooksListener.php index 4fd217b..31c856f 100644 --- a/src/Listener/HooksListener.php +++ b/src/Listener/HooksListener.php @@ -20,197 +20,237 @@ use Contao\ContentModel; use Alpdesk\AlpdeskParallax\Model\AlpdeskanimationsModel; -class HooksListener { +class HooksListener +{ + public function onGetPageLayout(PageModel $objPage, LayoutModel $objLayout, PageRegular $objPageRegular): void + { + $jqueryAdded = false; - public function onGetPageLayout(PageModel $objPage, LayoutModel $objLayout, PageRegular $objPageRegular): void { + $objArticleParallax = ArticleModel::findBy(array('tl_article.pid=?', 'tl_article.published=?', 'tl_article.hasParallaxBackgroundImage=?'), array($objPage->id, 1, 1)); - $jqueryAdded = false; + if ($objArticleParallax !== null) { - $objArticleParallax = ArticleModel::findBy(array('pid=?', 'published=?', 'hasParallaxBackgroundImage=?'), array($objPage->id, 1, 1)); - if ($objArticleParallax !== null) { - if (!$objLayout->addJQuery) { - $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/js/jquery.js|static'; - $jqueryAdded = true; - } - $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/alpdeskparallax/js/alpdeskparallax.js|async'; - $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/alpdeskparallax.css'; - } + if (!$objLayout->addJQuery) { + $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/js/jquery.js|static'; + $jqueryAdded = true; + } - $objArticleAnimations = ArticleModel::findBy(array('pid=?', 'published=?', 'hasAnimationeffects=?'), array($objPage->id, 1, 1)); - if ($objArticleAnimations !== null) { - if (!$objLayout->addJQuery && $jqueryAdded == false) { - $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/js/jquery.js|static'; - } - $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/alpdeskparallax/js/alpdeskanimationeffects.js|async'; - $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/alpdeskanimationeffects.css'; - $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/animate.min.css'; - } - } - - private function getImage($path, $size = '') { - try { - $objImageModel = (Validator::isUuid($path)) ? FilesModel::findByUuid($path) : FilesModel::findByPath($path); - $rootDir = System::getContainer()->getParameter('kernel.project_dir'); - $imageFactory = System::getContainer()->get('contao.image.image_factory'); - return $imageFactory->create($rootDir . '/' . $objImageModel->path, StringUtil::deserialize($size))->getUrl($rootDir); - } catch (\Exception $ex) { - return null; - } - } + $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/alpdeskparallax/js/alpdeskparallax.js|async'; + $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/alpdeskparallax.css'; + } - private function appendAnimationEffect(int $animationItemId) { + $objArticleAnimations = ArticleModel::findBy(array('tl_article.pid=?', 'tl_article.published=?', 'tl_article.hasAnimationeffects=?'), array($objPage->id, 1, 1)); - if ($animationItemId <= 0) { - return null; - } + if ($objArticleAnimations !== null) { - $animationModel = AlpdeskanimationsModel::findBy(array('id=?', 'published=?'), array($animationItemId, 1)); - if ($animationModel == null) { - return null; - } + if (!$objLayout->addJQuery && $jqueryAdded == false) { + $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery/js/jquery.js|static'; + } - $contentModel = ContentModel::findBy(array('pid=?', 'ptable=?', 'invisible!=?'), array($animationModel->id, 'tl_alpdeskanimations', 1)); - if ($contentModel == null) { - return null; + $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/alpdeskparallax/js/alpdeskanimationeffects.js|async'; + $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/alpdeskanimationeffects.css'; + $GLOBALS['TL_CSS'][] = 'bundles/alpdeskparallax/css/animate.min.css'; + } } - $animationContentElements = []; - foreach ($contentModel as $element) { - array_push($animationContentElements, $element->id); - } + private function getImage($path, $size = '') + { + try { - $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 = $animationModel->animation_animatecssoptions; - if ($animationCss !== null && $animationCss != '') { - $templateAnimation->animationCss = $animationCss; + $objImageModel = (Validator::isUuid($path)) ? FilesModel::findByUuid($path) : FilesModel::findByPath($path); + $rootDir = System::getContainer()->getParameter('kernel.project_dir'); + $imageFactory = System::getContainer()->get('contao.image.image_factory'); + + return $imageFactory->create($rootDir . '/' . $objImageModel->path, StringUtil::deserialize($size))->getUrl($rootDir); + + } catch (\Exception $ex) { + return null; + } } - return $templateAnimation; - } - - public function onCompileArticle(FrontendTemplate $objTemplate, array $arrData, Module $module): void { - - if (TL_MODE == 'FE' && $arrData['hasParallaxBackgroundImage'] == 1) { - $tmp = $this->getImage($arrData['singleSRC'], $arrData['size']); - if ($tmp !== null && $tmp !== '') { - $templateBackgroundImage = new FrontendTemplate('parallax_container'); - $srcImage = new File($tmp); - $templateBackgroundImage->isParallax = ($arrData['isParallax'] == '1' ? 1 : 0); - $templateBackgroundImage->src = Environment::get('base') . $srcImage->path; - $templateBackgroundImage->srcHeight = $srcImage->height; - $templateBackgroundImage->srcWidth = $srcImage->width; - $templateBackgroundImage->hAlign = ($arrData['hAlign'] != '') ? $arrData['hAlign'] : 'center'; - $templateBackgroundImage->vAlign = ($arrData['vAlign'] != '') ? $arrData['vAlign'] : 'center'; - $templateBackgroundImage->sizemodus = ($arrData['sizemodus'] != '') ? $arrData['sizemodus'] : 'auto'; - $templateBackgroundImage->vParallax = ($arrData['vParallax'] != '') ? $arrData['vParallax'] : '0'; - $elements = $objTemplate->elements; - array_unshift($elements, $templateBackgroundImage->parse()); - $objTemplate->elements = $elements; - } + private function appendAnimationEffect(int $animationItemId) + { + if ($animationItemId <= 0) { + return null; + } + + $animationModel = AlpdeskanimationsModel::findBy(array('id=?', 'published=?'), array($animationItemId, 1)); + if ($animationModel == null) { + return null; + } + + $contentModel = ContentModel::findBy(array('tl_content.pid=?', 'tl_content.ptable=?', 'tl_content.invisible!=?'), array($animationModel->id, 'tl_alpdeskanimations', 1)); + if ($contentModel == null) { + return null; + } + + $animationContentElements = []; + foreach ($contentModel as $element) { + array_push($animationContentElements, $element->id); + } + + $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); + $templateAnimation->foreground = ($animationModel->animation_zindex == 1); + $templateAnimation->ignoreReducedAnimationMotion = ($animationModel->ignoreReducedAnimationMotion == 1); + $templateAnimation->animationContentElements = $animationContentElements; + $templateAnimation->animationCss = ''; + + $animationCss = $animationModel->animation_animatecssoptions; + if ($animationCss !== null && $animationCss != '') { + $templateAnimation->animationCss = $animationCss; + } + + return $templateAnimation; } - if (TL_MODE == 'FE' && $arrData['hasAnimationeffects'] == 1) { - $elements = $objTemplate->elements; - 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()); + /** + * @param FrontendTemplate $objTemplate + * @param array $arrData + * @param Module $module + * @throws \Exception + */ + public function onCompileArticle(FrontendTemplate $objTemplate, array $arrData, Module $module): void + { + if (TL_MODE == 'FE' && $arrData['hasParallaxBackgroundImage'] == 1) { + + $tmp = $this->getImage($arrData['singleSRC'], $arrData['size']); + if ($tmp !== null && $tmp !== '') { + + $templateBackgroundImage = new FrontendTemplate('parallax_container'); + + $srcImage = new File($tmp); + + $templateBackgroundImage->isParallax = ($arrData['isParallax'] == '1' ? 1 : 0); + $templateBackgroundImage->src = Environment::get('base') . $srcImage->path; + $templateBackgroundImage->srcHeight = $srcImage->height; + $templateBackgroundImage->srcWidth = $srcImage->width; + $templateBackgroundImage->hAlign = ($arrData['hAlign'] != '') ? $arrData['hAlign'] : 'center'; + $templateBackgroundImage->vAlign = ($arrData['vAlign'] != '') ? $arrData['vAlign'] : 'center'; + $templateBackgroundImage->sizemodus = ($arrData['sizemodus'] != '') ? $arrData['sizemodus'] : 'auto'; + $templateBackgroundImage->vParallax = ($arrData['vParallax'] != '') ? $arrData['vParallax'] : '0'; + $elements = $objTemplate->elements; + + array_unshift($elements, $templateBackgroundImage->parse()); + + $objTemplate->elements = $elements; } - } } - } - $objTemplate->elements = $elements; - } - } - public function onParseTemplate(Template $objTemplate) { + if (TL_MODE == 'FE' && $arrData['hasAnimationeffects'] == 1) { - if (TL_MODE == 'FE' && $objTemplate->type == 'article' && $objTemplate->hasParallaxBackgroundImage == 1) { - $arrClasses = array('has-responsive-background-image'); - if ($objTemplate->isParallax == 1) { - $arrClasses[] = 'parallax'; - } - $objTemplate->class .= ' ' . implode(' ', $arrClasses); - } + $elements = $objTemplate->elements; + if (\array_key_exists('alpdeskanimation', $arrData) && $arrData['alpdeskanimation'] != '') { - if (TL_MODE == 'FE' && $objTemplate->type == 'article' && $objTemplate->hasAnimationeffects == 1) { - $arrClasses = array('has-animationeffects'); - $objTemplate->class .= ' ' . implode(' ', $arrClasses); + $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()); + } + } + } + } + + $objTemplate->elements = $elements; + } } - } - - public function onGetContentElement(ContentModel $element, string $buffer, $el): 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 = $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' => $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); - } + + public function onParseTemplate(Template $objTemplate) + { + if (TL_MODE == 'FE' && $objTemplate->type == 'article' && $objTemplate->hasParallaxBackgroundImage == 1) { + + $arrClasses = array('has-responsive-background-image'); + + if ($objTemplate->isParallax == 1) { + $arrClasses[] = 'parallax'; + } + + $objTemplate->class .= ' ' . implode(' ', $arrClasses); + } + + if (TL_MODE == 'FE' && $objTemplate->type == 'article' && $objTemplate->hasAnimationeffects == 1) { + + $arrClasses = array('has-animationeffects'); + $objTemplate->class .= ' ' . implode(' ', $arrClasses); + + } } - return $buffer; - } + public function onGetContentElement(ContentModel $element, string $buffer, $el): string + { + if (TL_MODE == 'FE' && $element->hasAnimationeffects == 1) { + + $matchesJs = []; + if (isset($GLOBALS['TL_JAVASCRIPT'])) { + $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 = []; + if (isset($GLOBALS['TL_CSS'])) { + $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 = $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' => $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 index 92af468..01bb12e 100644 --- a/src/Model/AlpdeskanimationsModel.php +++ b/src/Model/AlpdeskanimationsModel.php @@ -6,8 +6,7 @@ use Contao\Model; -class AlpdeskanimationsModel extends Model { - - protected static $strTable = 'tl_alpdeskanimations'; - +class AlpdeskanimationsModel extends Model +{ + protected static $strTable = 'tl_alpdeskanimations'; } diff --git a/src/Resources/config/services.yml b/src/Resources/config/services.yml index d3e9ac0..1af90f3 100644 --- a/src/Resources/config/services.yml +++ b/src/Resources/config/services.yml @@ -1,7 +1,7 @@ services: - Alpdesk\AlpdeskParallax\Listener\HooksListener: - tags: - - { 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 } + Alpdesk\AlpdeskParallax\Listener\HooksListener: + tags: + - { 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 } diff --git a/src/Resources/contao/config/config.php b/src/Resources/contao/config/config.php index 754924b..4f85bc4 100644 --- a/src/Resources/contao/config/config.php +++ b/src/Resources/contao/config/config.php @@ -6,5 +6,4 @@ $GLOBALS['BE_MOD']['content']['alpdeskanimations'] = [ 'tables' => ['tl_alpdeskanimations', 'tl_content'] -]; - +]; \ No newline at end of file diff --git a/src/Resources/contao/dca/tl_article.php b/src/Resources/contao/dca/tl_article.php index a2ec5fc..a4a4002 100644 --- a/src/Resources/contao/dca/tl_article.php +++ b/src/Resources/contao/dca/tl_article.php @@ -4,14 +4,14 @@ use Contao\System; PaletteManipulator::create() - ->addLegend('backgroundparallaximage_legend', 'syndication_legend', PaletteManipulator::POSITION_BEFORE, true) - ->addField('hasParallaxBackgroundImage', 'backgroundparallaximage_legend', PaletteManipulator::POSITION_APPEND) - ->applyToPalette('default', 'tl_article'); + ->addLegend('backgroundparallaximage_legend', 'syndication_legend', PaletteManipulator::POSITION_BEFORE, true) + ->addField('hasParallaxBackgroundImage', 'backgroundparallaximage_legend', PaletteManipulator::POSITION_APPEND) + ->applyToPalette('default', 'tl_article'); PaletteManipulator::create() - ->addLegend('animationeffect_legend', 'syndication_legend', PaletteManipulator::POSITION_BEFORE, true) - ->addField('hasAnimationeffects', 'animationeffect_legend', PaletteManipulator::POSITION_APPEND) - ->applyToPalette('default', 'tl_article'); + ->addLegend('animationeffect_legend', 'syndication_legend', PaletteManipulator::POSITION_BEFORE, true) + ->addField('hasAnimationeffects', 'animationeffect_legend', PaletteManipulator::POSITION_APPEND) + ->applyToPalette('default', 'tl_article'); $GLOBALS['TL_DCA']['tl_article']['palettes']['__selector__'][] = 'hasParallaxBackgroundImage'; $GLOBALS['TL_DCA']['tl_article']['subpalettes']['hasParallaxBackgroundImage'] = 'singleSRC,size,sizemodus,hAlign,vAlign,vParallax,isParallax'; @@ -52,7 +52,7 @@ 'tl_class' => 'clr w50', ], 'options_callback' => function () { - return System::getContainer()->get('contao.image.image_sizes')->getOptionsForUser(BackendUser::getInstance()); + return System::getContainer()->get('contao.image.image_sizes')->getOptionsForUser(BackendUser::getInstance()); }, 'sql' => "varchar(64) NOT NULL default ''" ]; diff --git a/src/Resources/contao/dca/tl_content.php b/src/Resources/contao/dca/tl_content.php index 48eb3d3..fc84843 100644 --- a/src/Resources/contao/dca/tl_content.php +++ b/src/Resources/contao/dca/tl_content.php @@ -7,20 +7,20 @@ use Alpdesk\AlpdeskParallax\Utils\AlpdeskParallaxUtils; if (Input::get('do') == 'alpdeskanimations') { - $GLOBALS['TL_DCA']['tl_content']['config']['ptable'] = 'tl_alpdeskanimations'; + $GLOBALS['TL_DCA']['tl_content']['config']['ptable'] = 'tl_alpdeskanimations'; } Controller::loadLanguageFile('tl_alpdeskanimations'); $GLOBALS['TL_DCA']['tl_content']['config']['onload_callback'][] = function (DataContainer $dc): void { - foreach ($GLOBALS['TL_DCA'][$dc->table]['palettes'] as $key => $palette) { - if (\is_string($palette)) { - PaletteManipulator::create() - ->addLegend('animationeffect_legend', 'expert_legend', PaletteManipulator::POSITION_AFTER, true) - ->addField('hasAnimationeffects', 'animationeffect_legend', PaletteManipulator::POSITION_APPEND) - ->applyToPalette($key, $dc->table); + foreach ($GLOBALS['TL_DCA'][$dc->table]['palettes'] as $key => $palette) { + if (\is_string($palette)) { + PaletteManipulator::create() + ->addLegend('animationeffect_legend', 'expert_legend', PaletteManipulator::POSITION_AFTER, true) + ->addField('hasAnimationeffects', 'animationeffect_legend', PaletteManipulator::POSITION_APPEND) + ->applyToPalette($key, $dc->table); + } } - } }; $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'hasAnimationeffects'; diff --git a/src/Resources/public/css/alpdeskanimationeffects.css b/src/Resources/public/css/alpdeskanimationeffects.css index 87981e9..1398ba3 100644 --- a/src/Resources/public/css/alpdeskanimationeffects.css +++ b/src/Resources/public/css/alpdeskanimationeffects.css @@ -1,26 +1,26 @@ .has-animationeffects { - position: relative; + position: relative; } .has-animationeffects .animation-effect { - position: absolute; - z-index: -199; - top: 0; - left: 0; - animation-duration: 5s; + position: absolute; + z-index: -199; + top: 0; + left: 0; + animation-duration: 5s; } .has-animationeffects .animation-effect-foreground { - z-index: 1; + z-index: 1; } .has-animationeffects .animation-effect-hide { - display: none; + display: none; } @media (prefers-reduced-motion: reduce) { - .has-animationeffects .animation-effect-reducedmotion { - display: none; - } + .has-animationeffects .animation-effect-reducedmotion { + display: none; + } } \ No newline at end of file diff --git a/src/Resources/public/css/alpdeskparallax.css b/src/Resources/public/css/alpdeskparallax.css index 254c9cb..6a0982c 100644 --- a/src/Resources/public/css/alpdeskparallax.css +++ b/src/Resources/public/css/alpdeskparallax.css @@ -1,23 +1,23 @@ .has-responsive-background-image { - position: relative; + position: relative; } .has-responsive-background-image.parallax { - background: transparent; - overflow: hidden; - margin: 0; + background: transparent; + overflow: hidden; + margin: 0; } .has-responsive-background-image .parallax-bgimage { - background-size: auto; - position: absolute; - z-index: -200; - top:0; - left:0; - width:100%; - height: 100%; - background-position-x: left; - background-position-y: top; - background-repeat: no-repeat; + background-size: auto; + position: absolute; + z-index: -200; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position-x: left; + background-position-y: top; + background-repeat: no-repeat; } \ No newline at end of file diff --git a/src/Resources/public/js/alpdeskanimationeffects.js b/src/Resources/public/js/alpdeskanimationeffects.js index 55fc277..4a69994 100644 --- a/src/Resources/public/js/alpdeskanimationeffects.js +++ b/src/Resources/public/js/alpdeskanimationeffects.js @@ -1,421 +1,400 @@ $(document).ready(function () { - (function () { - - if (!('requestAnimationFrame' in window)) { - return; - } - - $.fn.isInAnimationViewport = function (offsetPercent = 0) { - var elementTop = $(this).offset().top; - if (offsetPercent !== 0 && elementTop !== 0) { - var hPercent = ($(window).height() / 100) * offsetPercent; - elementTop = elementTop + hPercent; - } - var elementBottom = elementTop + $(this).outerHeight(); - var viewportTop = $(window).scrollTop(); - var viewportBottom = viewportTop + $(window).height(); - return elementBottom > viewportTop && elementTop < viewportBottom; - }; - - $.fn.getAnimationXOffset = function (position = 'left') { - var o = 0; - if (position === 'right') { - o = ($(this).parent().width() - $(this).outerWidth()); - } else if (position === 'center') { - o = (($(this).parent().width() / 2) - ($(this).outerWidth() / 2)); - } - return o; - }; - - $.fn.getAnimationYOffset = function (position = 'top') { - var o = 0; - if (position === 'bottom') { - o = ($(this).parent().height() - $(this).outerHeight()); - } else if (position === 'center') { - o = (($(this).parent().height() / 2) - ($(this).outerHeight() / 2)); - } - return o; - }; - - var animationElements = []; - var visibleAnimationElements = []; - var processAnimationsScheduled; - - var POSITION_S1 = 's1'; - var POSITION_S2 = 's2'; - var POSITION_S3 = 's3'; - var POSITION_S4 = 's4'; - var POSITION_S5 = 's5'; - var POSITION_S6 = 's6'; - var POSITION_S7 = 's7'; - var POSITION_S8 = 's8'; - var POSITION_S9 = 's9'; - - var EFFECT_E1 = 'e1'; - var EFFECT_E2 = 'e2'; - var EFFECT_E3 = 'e3'; - var EFFECT_E4 = 'e4'; - var EFFECT_E5 = 'e5'; - var EFFECT_E6 = 'e6'; - var EFFECT_E7 = 'e7'; - var EFFECT_E8 = 'e8'; - var EFFECT_E9 = 'e9'; - - var EFFECT_SPEED_SLOW = 'slow'; - var EFFECT_SPEED_SLOW_VALUE = 4000; - var EFFECT_SPEED_MIDDLE = 'middle'; - var EFFECT_SPEED_MIDDLE_VALUE = 2500; - var EFFECT_SPEED_FAST = 'fast'; - var EFFECT_SPEED_FAST_VALUE = 1000; - - var TYPE_ARTICLE = 1; - var TYPE_CEELEMENT = 2; - - function getSpeed(speed) { - var s = EFFECT_SPEED_MIDDLE_VALUE; - switch (speed) { - case EFFECT_SPEED_SLOW: - { - s = EFFECT_SPEED_SLOW_VALUE; - break; - } - case EFFECT_SPEED_MIDDLE: - { - s = EFFECT_SPEED_MIDDLE_VALUE; - break; - } - case EFFECT_SPEED_FAST: - { - s = EFFECT_SPEED_FAST_VALUE; - break; - } - default: - break; - } - return s; - } - - function processAnimation() { - for (var i = 0; i < animationElements.length; i++) { - var parent = animationElements[i].node.parentNode; - if ($(parent).isInAnimationViewport(animationElements[i].viewport) && !checkVisibleExists(animationElements[i].node)) { - visibleAnimationElements.push({ - node: animationElements[i].node, - effect: animationElements[i].effect, - startposition: animationElements[i].startposition, - speed: animationElements[i].speed, - viewport: animationElements[i].viewport, - animateCssOptions: animationElements[i].animateCssOptions, - type: animationElements[i].type, - triggered: false - }); - } - } - - cancelAnimationFrame(processAnimationsScheduled); - if (animationElements.length) { - processAnimationsScheduled = requestAnimationFrame(updateVisibleElements); - } - } - - function checkVisibleExists(element) { - for (var i = 0; i < visibleAnimationElements.length; i++) { - if (visibleAnimationElements[i].node === element) { - return true; - } - } - return false; - } - - function updateVisibleElements() { - for (var i = 0; i < visibleAnimationElements.length; i++) { - runEffect(visibleAnimationElements[i]); - } - } - - function runEffect(element) { - if (element.triggered === false) { - - var speed = getSpeed(element.speed); - - $(element.node).show(); - if (element.type === TYPE_CEELEMENT) { - $(element.node).css({ - opacity: 1 - }); - } + (function () { - if (element.animateCssOptions !== '') { - $(element.node).css({ - animationDuration: speed + 'ms' - }); - $(element.node).addClass('animate__animated'); - $(element.node).addClass('animate__' + element.animateCssOptions); + if (!('requestAnimationFrame' in window)) { + return; } - switch (element.effect) { - case EFFECT_E1: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('top') + 'px', - left: $(element.node).getAnimationXOffset('left') + 'px' - }, speed); - break; - } - case EFFECT_E2: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('top') + 'px', - left: $(element.node).getAnimationXOffset('center') + 'px' - }, speed); - break; - } - case EFFECT_E3: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('top') + 'px', - left: $(element.node).getAnimationXOffset('right') + 'px' - }, speed); - break; - } - case EFFECT_E4: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('bottom') + 'px', - left: $(element.node).getAnimationXOffset('left') + 'px' - }, speed); - break; - } - case EFFECT_E5: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('bottom') + 'px', - left: $(element.node).getAnimationXOffset('center') + 'px' - }, speed); - break; - } - case EFFECT_E6: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('bottom') + 'px', - left: $(element.node).getAnimationXOffset('right') + 'px' - }, speed); - break; - } - case EFFECT_E7: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('center') + 'px', - left: $(element.node).getAnimationXOffset('left') + 'px' - }, speed); - break; - } - case EFFECT_E8: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('center') + 'px', - left: $(element.node).getAnimationXOffset('center') + 'px' - }, speed); - break; - } - case EFFECT_E9: - { - $(element.node).stop().animate({ - top: $(element.node).getAnimationYOffset('center') + 'px', - left: $(element.node).getAnimationXOffset('right') + 'px' - }, speed); - break; - } - default: - break; - } - element.triggered = true; - } - - } - - function prepareEffect(node, startposition) { - switch (startposition) { - case POSITION_S1: - { - node.css({ - top: $(node).getAnimationYOffset('top') + 'px', - left: $(node).getAnimationXOffset('left') + 'px' - }); - break; - } - case POSITION_S2: - { - node.css({ - top: $(node).getAnimationYOffset('top') + 'px', - left: $(node).getAnimationXOffset('center') + 'px' - }); - break; - } - case POSITION_S3: - { - node.css({ - top: $(node).getAnimationYOffset('top') + 'px', - left: $(node).getAnimationXOffset('right') + 'px' - }); - break; - } - case POSITION_S4: - { - node.css({ - top: $(node).getAnimationYOffset('bottom') + 'px', - left: $(node).getAnimationXOffset('left') + 'px' - }); - break; + $.fn.isInAnimationViewport = function (offsetPercent = 0) { + var elementTop = $(this).offset().top; + if (offsetPercent !== 0 && elementTop !== 0) { + var hPercent = ($(window).height() / 100) * offsetPercent; + elementTop = elementTop + hPercent; + } + var elementBottom = elementTop + $(this).outerHeight(); + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + return elementBottom > viewportTop && elementTop < viewportBottom; + }; + + $.fn.getAnimationXOffset = function (position = 'left') { + var o = 0; + if (position === 'right') { + o = ($(this).parent().width() - $(this).outerWidth()); + } else if (position === 'center') { + o = (($(this).parent().width() / 2) - ($(this).outerWidth() / 2)); + } + return o; + }; + + $.fn.getAnimationYOffset = function (position = 'top') { + var o = 0; + if (position === 'bottom') { + o = ($(this).parent().height() - $(this).outerHeight()); + } else if (position === 'center') { + o = (($(this).parent().height() / 2) - ($(this).outerHeight() / 2)); + } + return o; + }; + + var animationElements = []; + var visibleAnimationElements = []; + var processAnimationsScheduled; + + var POSITION_S1 = 's1'; + var POSITION_S2 = 's2'; + var POSITION_S3 = 's3'; + var POSITION_S4 = 's4'; + var POSITION_S5 = 's5'; + var POSITION_S6 = 's6'; + var POSITION_S7 = 's7'; + var POSITION_S8 = 's8'; + var POSITION_S9 = 's9'; + + var EFFECT_E1 = 'e1'; + var EFFECT_E2 = 'e2'; + var EFFECT_E3 = 'e3'; + var EFFECT_E4 = 'e4'; + var EFFECT_E5 = 'e5'; + var EFFECT_E6 = 'e6'; + var EFFECT_E7 = 'e7'; + var EFFECT_E8 = 'e8'; + var EFFECT_E9 = 'e9'; + + var EFFECT_SPEED_SLOW = 'slow'; + var EFFECT_SPEED_SLOW_VALUE = 4000; + var EFFECT_SPEED_MIDDLE = 'middle'; + var EFFECT_SPEED_MIDDLE_VALUE = 2500; + var EFFECT_SPEED_FAST = 'fast'; + var EFFECT_SPEED_FAST_VALUE = 1000; + + var TYPE_ARTICLE = 1; + var TYPE_CEELEMENT = 2; + + function getSpeed(speed) { + var s = EFFECT_SPEED_MIDDLE_VALUE; + switch (speed) { + case EFFECT_SPEED_SLOW: { + s = EFFECT_SPEED_SLOW_VALUE; + break; + } + case EFFECT_SPEED_MIDDLE: { + s = EFFECT_SPEED_MIDDLE_VALUE; + break; + } + case EFFECT_SPEED_FAST: { + s = EFFECT_SPEED_FAST_VALUE; + break; + } + default: + break; + } + return s; } - case POSITION_S5: - { - node.css({ - top: $(node).getAnimationYOffset('bottom') + 'px', - left: $(node).getAnimationXOffset('center') + 'px' - }); - break; + + function processAnimation() { + for (var i = 0; i < animationElements.length; i++) { + var parent = animationElements[i].node.parentNode; + if ($(parent).isInAnimationViewport(animationElements[i].viewport) && !checkVisibleExists(animationElements[i].node)) { + visibleAnimationElements.push({ + node: animationElements[i].node, + effect: animationElements[i].effect, + startposition: animationElements[i].startposition, + speed: animationElements[i].speed, + viewport: animationElements[i].viewport, + animateCssOptions: animationElements[i].animateCssOptions, + type: animationElements[i].type, + triggered: false + }); + } + } + + cancelAnimationFrame(processAnimationsScheduled); + if (animationElements.length) { + processAnimationsScheduled = requestAnimationFrame(updateVisibleElements); + } } - case POSITION_S6: - { - node.css({ - top: $(node).getAnimationYOffset('bottom') + 'px', - left: $(node).getAnimationXOffset('right') + 'px' - }); - break; + + function checkVisibleExists(element) { + for (var i = 0; i < visibleAnimationElements.length; i++) { + if (visibleAnimationElements[i].node === element) { + return true; + } + } + return false; } - case POSITION_S7: - { - node.css({ - top: $(node).getAnimationYOffset('center') + 'px', - left: $(node).getAnimationXOffset('left') + 'px' - }); - break; + + function updateVisibleElements() { + for (var i = 0; i < visibleAnimationElements.length; i++) { + runEffect(visibleAnimationElements[i]); + } } - case POSITION_S8: - { - node.css({ - top: $(node).getAnimationYOffset('center') + 'px', - left: $(node).getAnimationXOffset('center') + 'px' - }); - break; + + function runEffect(element) { + if (element.triggered === false) { + + var speed = getSpeed(element.speed); + + $(element.node).show(); + if (element.type === TYPE_CEELEMENT) { + $(element.node).css({ + opacity: 1 + }); + } + + if (element.animateCssOptions !== '') { + $(element.node).css({ + animationDuration: speed + 'ms' + }); + $(element.node).addClass('animate__animated'); + $(element.node).addClass('animate__' + element.animateCssOptions); + } + + switch (element.effect) { + case EFFECT_E1: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('top') + 'px', + left: $(element.node).getAnimationXOffset('left') + 'px' + }, speed); + break; + } + case EFFECT_E2: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('top') + 'px', + left: $(element.node).getAnimationXOffset('center') + 'px' + }, speed); + break; + } + case EFFECT_E3: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('top') + 'px', + left: $(element.node).getAnimationXOffset('right') + 'px' + }, speed); + break; + } + case EFFECT_E4: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('bottom') + 'px', + left: $(element.node).getAnimationXOffset('left') + 'px' + }, speed); + break; + } + case EFFECT_E5: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('bottom') + 'px', + left: $(element.node).getAnimationXOffset('center') + 'px' + }, speed); + break; + } + case EFFECT_E6: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('bottom') + 'px', + left: $(element.node).getAnimationXOffset('right') + 'px' + }, speed); + break; + } + case EFFECT_E7: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('center') + 'px', + left: $(element.node).getAnimationXOffset('left') + 'px' + }, speed); + break; + } + case EFFECT_E8: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('center') + 'px', + left: $(element.node).getAnimationXOffset('center') + 'px' + }, speed); + break; + } + case EFFECT_E9: { + $(element.node).stop().animate({ + top: $(element.node).getAnimationYOffset('center') + 'px', + left: $(element.node).getAnimationXOffset('right') + 'px' + }, speed); + break; + } + default: + break; + } + element.triggered = true; + } + } - case POSITION_S9: - { - node.css({ - top: $(node).getAnimationYOffset('center') + 'px', - left: $(node).getAnimationXOffset('right') + 'px' - }); - break; + + function prepareEffect(node, startposition) { + switch (startposition) { + case POSITION_S1: { + node.css({ + top: $(node).getAnimationYOffset('top') + 'px', + left: $(node).getAnimationXOffset('left') + 'px' + }); + break; + } + case POSITION_S2: { + node.css({ + top: $(node).getAnimationYOffset('top') + 'px', + left: $(node).getAnimationXOffset('center') + 'px' + }); + break; + } + case POSITION_S3: { + node.css({ + top: $(node).getAnimationYOffset('top') + 'px', + left: $(node).getAnimationXOffset('right') + 'px' + }); + break; + } + case POSITION_S4: { + node.css({ + top: $(node).getAnimationYOffset('bottom') + 'px', + left: $(node).getAnimationXOffset('left') + 'px' + }); + break; + } + case POSITION_S5: { + node.css({ + top: $(node).getAnimationYOffset('bottom') + 'px', + left: $(node).getAnimationXOffset('center') + 'px' + }); + break; + } + case POSITION_S6: { + node.css({ + top: $(node).getAnimationYOffset('bottom') + 'px', + left: $(node).getAnimationXOffset('right') + 'px' + }); + break; + } + case POSITION_S7: { + node.css({ + top: $(node).getAnimationYOffset('center') + 'px', + left: $(node).getAnimationXOffset('left') + 'px' + }); + break; + } + case POSITION_S8: { + node.css({ + top: $(node).getAnimationYOffset('center') + 'px', + left: $(node).getAnimationXOffset('center') + 'px' + }); + break; + } + case POSITION_S9: { + node.css({ + top: $(node).getAnimationYOffset('center') + 'px', + left: $(node).getAnimationXOffset('right') + 'px' + }); + break; + } + default: + break; + } } - default: - break; - } - } - function init() { + function init() { - visibleAnimationElements = []; - animationElements = []; + visibleAnimationElements = []; + animationElements = []; - $('.has-animationeffects').each(function () { + $('.has-animationeffects').each(function () { - var el = $(this); + var el = $(this); - el.find('div.animation-effect').each(function () { + el.find('div.animation-effect').each(function () { - var node = $(this); + var node = $(this); - if (node !== null) { + if (node !== null) { - var effect = node.data('effect'); - var startposition = node.data('startposition'); - var speed = node.data('speed'); - var viewport = node.data('viewport'); - var hide = node.data('hide'); - var ignoremotionreduce = node.data('ignoremotionreduce'); - var animateCssOptions = node.data('animationcss'); + var effect = node.data('effect'); + var startposition = node.data('startposition'); + var speed = node.data('speed'); + var viewport = node.data('viewport'); + var hide = node.data('hide'); + var ignoremotionreduce = node.data('ignoremotionreduce'); + var animateCssOptions = node.data('animationcss'); - if (hide === 1) { - $(node).hide(); - } + if (hide === 1) { + $(node).hide(); + } - prepareEffect(node, startposition); + prepareEffect(node, startposition); - var push = true; + var push = true; - if (ignoremotionreduce !== 1) { - const mediaQueryMotionReduce = window.matchMedia('(prefers-reduced-motion: reduce)'); - if (!mediaQueryMotionReduce || mediaQueryMotionReduce.matches === true) { - push = false; - $(node).hide(); - } - } + 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, - startposition: startposition, - speed: speed, - viewport: viewport, - animateCssOptions: animateCssOptions, - type: TYPE_ARTICLE - }); - } + if (push === true) { + animationElements.push({ + node: node[0], + effect: effect, + startposition: startposition, + speed: speed, + viewport: viewport, + animateCssOptions: animateCssOptions, + type: TYPE_ARTICLE + }); + } - } + } - }); + }); - }); + }); - $('.animation-effect-ce').each(function () { + $('.animation-effect-ce').each(function () { - var node = $(this); + var node = $(this); - if (node !== null) { + if (node !== null) { - var speed = node.data('speed'); - var viewport = node.data('viewport'); - var hide = node.data('hide'); - var animateCssOptions = node.data('animationcss'); + var speed = node.data('speed'); + var viewport = node.data('viewport'); + var hide = node.data('hide'); + var animateCssOptions = node.data('animationcss'); - if (hide === 1) { - $(node).css({ - opacity: 0 - }); - } - - animationElements.push({ - node: node[0], - effect: '', - startposition: '', - speed: speed, - viewport: viewport, - animateCssOptions: animateCssOptions, - type: TYPE_CEELEMENT - }); + if (hide === 1) { + $(node).css({ + opacity: 0 + }); + } - } + animationElements.push({ + node: node[0], + effect: '', + startposition: '', + speed: speed, + viewport: viewport, + animateCssOptions: animateCssOptions, + type: TYPE_CEELEMENT + }); - }); + } - if (animationElements.length > 0) { - processAnimation(); - } + }); - } + if (animationElements.length > 0) { + processAnimation(); + } + + } - init(); + init(); - if (!animationElements.length) { - return; - } + if (!animationElements.length) { + return; + } - $(window).on('scroll', processAnimation); - $(window).on('resize', init); + $(window).on('scroll', processAnimation); + $(window).on('resize', init); - })(); + })(); }); \ No newline at end of file diff --git a/src/Resources/public/js/alpdeskparallax.js b/src/Resources/public/js/alpdeskparallax.js index 5dbe0c6..483c2bc 100644 --- a/src/Resources/public/js/alpdeskparallax.js +++ b/src/Resources/public/js/alpdeskparallax.js @@ -1,192 +1,192 @@ $(document).ready(function () { - (function () { - - if (!('requestAnimationFrame' in window)) { - return; - } - - $.fn.isInParallaxViewport = function () { - var elementTop = $(this).offset().top; - var elementBottom = elementTop + $(this).outerHeight(); - var viewportTop = $(window).scrollTop(); - var viewportBottom = viewportTop + $(window).height(); - return elementBottom > viewportTop && elementTop < viewportBottom; - }; - - $.fn.getParallaxScrollOffset = function () { - var diff = ($(this).offset().top - $(window).height()); - if (diff < 0) { - diff = 0; - } - return diff; - }; - - var parallaxElements = []; - var visibleElements = []; - var processParallaxScheduled; - var factor = 0.25; - - function prepareBackgroundvAlign(nodeHeight, srcHeight, vAlign, sizeModus) { - var yPos = 0; // top - if (sizeModus === 'cover') { - return yPos; - } - if (vAlign === 'center') { - yPos = Math.floor((nodeHeight / 2) - (srcHeight / 2)); - } else if (vAlign === 'bottom') { - yPos = Math.floor(nodeHeight - (srcHeight)); - } - return yPos; - } - - function scrollParallax() { - for (var i = 0; i < parallaxElements.length; i++) { - var parent = parallaxElements[i].node.parentNode; - if ($(parent).hasClass('parallax')) { - if ($(parent).isInParallaxViewport() && !checkVisibleExists(parallaxElements[i].node)) { - visibleElements.push({ - node: parallaxElements[i].node, - parent: parent, - vAlign: parallaxElements[i].vAlign, - hAlign: parallaxElements[i].hAlign, - sizeModus: parallaxElements[i].sizeModus, - coverH: parallaxElements[i].coverH, - elementH: parallaxElements[i].elementH - }); - } + (function () { + + if (!('requestAnimationFrame' in window)) { + return; } - } - cancelAnimationFrame(processParallaxScheduled); - if (visibleElements.length) { - processParallaxScheduled = requestAnimationFrame(updateVisibleElements); - } + $.fn.isInParallaxViewport = function () { + var elementTop = $(this).offset().top; + var elementBottom = elementTop + $(this).outerHeight(); + var viewportTop = $(window).scrollTop(); + var viewportBottom = viewportTop + $(window).height(); + return elementBottom > viewportTop && elementTop < viewportBottom; + }; + + $.fn.getParallaxScrollOffset = function () { + var diff = ($(this).offset().top - $(window).height()); + if (diff < 0) { + diff = 0; + } + return diff; + }; + + var parallaxElements = []; + var visibleElements = []; + var processParallaxScheduled; + var factor = 0.25; + + function prepareBackgroundvAlign(nodeHeight, srcHeight, vAlign, sizeModus) { + var yPos = 0; // top + if (sizeModus === 'cover') { + return yPos; + } + if (vAlign === 'center') { + yPos = Math.floor((nodeHeight / 2) - (srcHeight / 2)); + } else if (vAlign === 'bottom') { + yPos = Math.floor(nodeHeight - (srcHeight)); + } + return yPos; + } + + function scrollParallax() { + for (var i = 0; i < parallaxElements.length; i++) { + var parent = parallaxElements[i].node.parentNode; + if ($(parent).hasClass('parallax')) { + if ($(parent).isInParallaxViewport() && !checkVisibleExists(parallaxElements[i].node)) { + visibleElements.push({ + node: parallaxElements[i].node, + parent: parent, + vAlign: parallaxElements[i].vAlign, + hAlign: parallaxElements[i].hAlign, + sizeModus: parallaxElements[i].sizeModus, + coverH: parallaxElements[i].coverH, + elementH: parallaxElements[i].elementH + }); + } + } + } + + cancelAnimationFrame(processParallaxScheduled); + if (visibleElements.length) { + processParallaxScheduled = requestAnimationFrame(updateVisibleElements); + } + + } - } + function checkVisibleExists(element) { + for (var i = 0; i < visibleElements.length; i++) { + if (visibleElements[i].node === element) { + return true; + } + } + return false; + } - function checkVisibleExists(element) { - for (var i = 0; i < visibleElements.length; i++) { - if (visibleElements[i].node === element) { - return true; + function updateVisibleElements() { + for (var i = 0; i < visibleElements.length; i++) { + setPosition(visibleElements[i]); + } } - } - return false; - } - function updateVisibleElements() { - for (var i = 0; i < visibleElements.length; i++) { - setPosition(visibleElements[i]); - } - } + function setPosition(element) { - function setPosition(element) { + if (element.parent.getBoundingClientRect().top > $(window).height()) { + return; + } - if (element.parent.getBoundingClientRect().top > $(window).height()) { - return; - } + var vAlign = parseInt($(element.node).attr('data-parallax-valign')); + var hAlign = $(element.node).attr('data-parallax-halign'); + var vParallax = $(element.node).attr('data-vparallax'); - var vAlign = parseInt($(element.node).attr('data-parallax-valign')); - var hAlign = $(element.node).attr('data-parallax-halign'); - var vParallax = $(element.node).attr('data-vparallax'); + var scrollOffset = $(window).scrollTop() - $(element.parent).getParallaxScrollOffset(); + var motion = (vAlign + (factor * scrollOffset)); - var scrollOffset = $(window).scrollTop() - $(element.parent).getParallaxScrollOffset(); - var motion = (vAlign + (factor * scrollOffset)); + if (element.vAlign === 'bottom' && element.sizeModus !== 'cover') { + motion = (vAlign + (-factor * scrollOffset)); + } - if (element.vAlign === 'bottom' && element.sizeModus !== 'cover') { - motion = (vAlign + (-factor * scrollOffset)); - } + $(element.node).css({ + backgroundPositionY: motion + 'px' + }); - $(element.node).css({ - backgroundPositionY: motion + 'px' - }); + var motion_h = hAlign; + if (vParallax === 'left' && element.hAlign !== 'center') { + motion_h = (-motion) + 'px'; + } else if (vParallax === 'right' && element.hAlign !== 'center') { + motion_h = ($(window).width() - motion) + 'px'; + } - var motion_h = hAlign; - if (vParallax === 'left' && element.hAlign !== 'center') { - motion_h = (-motion) + 'px'; - } else if (vParallax === 'right' && element.hAlign !== 'center') { - motion_h = ($(window).width() - motion) + 'px'; - } + $(element.node).css({ + backgroundPositionX: motion_h + }); - $(element.node).css({ - backgroundPositionX: motion_h - }); + } - } + function initParallax() { - function initParallax() { + parallaxElements = []; + visibleElements = []; - parallaxElements = []; - visibleElements = []; + $('.has-responsive-background-image').each(function () { - $('.has-responsive-background-image').each(function () { + var el = $(this); + var node = el.find('div.parallax-bgimage'); + if (node !== null) { - var el = $(this); - var node = el.find('div.parallax-bgimage'); - if (node !== null) { + var parallaxActive = node.data('isparallax'); + var sizeModus = node.data('sizemodus'); + var hAlign = node.data('halign'); + var vAlign = node.data('valign'); + var src = node.data('src'); + var srcHeight = node.data('srcheight'); - var parallaxActive = node.data('isparallax'); - var sizeModus = node.data('sizemodus'); - var hAlign = node.data('halign'); - var vAlign = node.data('valign'); - var src = node.data('src'); - var srcHeight = node.data('srcheight'); + node.css({ + backgroundImage: 'url(' + src + ')', + backgroundSize: sizeModus + }); - node.css({ - backgroundImage: 'url(' + src + ')', - backgroundSize: sizeModus - }); + if (parallaxActive === 1) { - if (parallaxActive === 1) { + var coverH = 0; + var elementH = $(this).outerHeight(); - var coverH = 0; - var elementH = $(this).outerHeight(); + if (sizeModus === 'cover') { + var coverH = elementH + (elementH * factor) + (factor * $(window).height()); + var coverTop = -(coverH - elementH); + node.height(coverH); + node.css({ + top: coverTop, + backgroundPositionY: '0%' + }); + } - if (sizeModus === 'cover') { - var coverH = elementH + (elementH * factor) + (factor * $(window).height()); - var coverTop = -(coverH - elementH); - node.height(coverH); - node.css({ - top: coverTop, - backgroundPositionY: '0%' - }); - } + node.attr('data-parallax-valign', prepareBackgroundvAlign(node.height(), srcHeight, vAlign, sizeModus)); + node.attr('data-parallax-halign', hAlign); - node.attr('data-parallax-valign', prepareBackgroundvAlign(node.height(), srcHeight, vAlign, sizeModus)); - node.attr('data-parallax-halign', hAlign); + parallaxElements.push({ + node: node[0], + vAlign: vAlign, + hAlign: hAlign, + sizeModus: sizeModus, + coverH: coverH, + elementH: elementH + }); - parallaxElements.push({ - node: node[0], - vAlign: vAlign, - hAlign: hAlign, - sizeModus: sizeModus, - coverH: coverH, - elementH: elementH - }); + scrollParallax(); - scrollParallax(); + } else { - } else { + node.css({ + backgroundPositionX: hAlign, + backgroundPositionY: vAlign + }); - node.css({ - backgroundPositionX: hAlign, - backgroundPositionY: vAlign - }); + } - } + } + }); } - }); - } - - initParallax(); + initParallax(); - if (!parallaxElements.length) - return; + if (!parallaxElements.length) + return; - $(window).on('scroll', scrollParallax); - $(window).on('resize', initParallax); + $(window).on('scroll', scrollParallax); + $(window).on('resize', initParallax); - })(); + })(); }); \ No newline at end of file diff --git a/src/Utils/AlpdeskParallaxUtils.php b/src/Utils/AlpdeskParallaxUtils.php index 97ccf2f..f3c2197 100644 --- a/src/Utils/AlpdeskParallaxUtils.php +++ b/src/Utils/AlpdeskParallaxUtils.php @@ -8,152 +8,153 @@ use Contao\Image; use Contao\Input; use Contao\Database; +use Contao\StringUtil; -class AlpdeskParallaxUtils extends Backend { +class AlpdeskParallaxUtils extends Backend +{ + public static $animationCssOptions = [ + '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', + ], + ]; - public static $animationCssOptions = [ - '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', - ], - ]; + public function toggleIcon($row, $href, $label, $title, $icon, $attributes): string + { + if (Input::get('tid') !== null && strlen(Input::get('tid'))) { + Database::getInstance()->prepare("UPDATE tl_" . Input::get('do') . " SET tstamp=" . time() . ", published='" . (Input::get('state') ? 1 : '') . "' WHERE id=?")->execute(Input::get('tid')); + $this->redirect($this->getReferer()); + } - public function toggleIcon($row, $href, $label, $title, $icon, $attributes) { - if (Input::get('tid') !== null && strlen(Input::get('tid'))) { - Database::getInstance()->prepare("UPDATE tl_" . Input::get('do') . " SET tstamp=" . time() . ", published='" . (Input::get('state') ? 1 : '') . "' WHERE id=?")->execute(Input::get('tid')); - $this->redirect($this->getReferer()); - } + $href .= '&tid=' . $row['id'] . '&state=' . ($row['published'] ? '' : 1); + if (!$row['published']) { + $icon = 'invisible.gif'; + } - $href .= '&tid=' . $row['id'] . '&state=' . ($row['published'] ? '' : 1); - if (!$row['published']) { - $icon = 'invisible.gif'; + return '' . Image::getHtml($icon, $label) . ' '; } - - return '' . Image::getHtml($icon, $label) . ' '; - } - }