From 673cf29a082c3a355be868a8cb1f4a1463570c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sun, 29 Dec 2019 15:02:07 +0100
Subject: [PATCH] Enable ajax loading of social media feeds

---
 config/sites/ep-reisen/config.yaml            |  1 +
 .../Extensions/PxaSocialFeed.typoscript       |  1 +
 .../Resources/Private/Assets/js/_app.js       | 87 ++++++++++++-------
 .../SocialMedia/Frontend/FeedsItems.html      | 38 ++++++++
 .../Templates/FluidStyledContent/List.html    |  6 +-
 .../Templates/SocialMedia/Feeds/List.html     | 28 +-----
 .../Templates/SocialMedia/Feeds/ListAjax.html | 20 +++++
 .../SocialMedia/Feeds/LoadFeedAjax.html       |  9 ++
 8 files changed, 126 insertions(+), 64 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Frontend/FeedsItems.html
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/ListAjax.html
 create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/LoadFeedAjax.html

diff --git a/config/sites/ep-reisen/config.yaml b/config/sites/ep-reisen/config.yaml
index 91285d0b..8444105a 100644
--- a/config/sites/ep-reisen/config.yaml
+++ b/config/sites/ep-reisen/config.yaml
@@ -239,3 +239,4 @@ routeEnhancers:
       '.ical': 1710
       'sitemap.xml': 1533906435
       'yoast-snippetpreview.json': 1480321830
+      '/pxa': 7378121
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
index 64043e3a..0edc942e 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
@@ -6,6 +6,7 @@ plugin.tx_pxasocialfeed {
         templateRootPaths.100 = EXT:ep_theme/Resources/Private/Templates/SocialMedia/
         partialRootPaths.100 = EXT:ep_theme/Resources/Private/Partials/SocialMedia/
     }
+    settings.defaultAjaxUid = {$plugin.tx_eptheme.settings.defaultAjaxUid}
 }
 
 page.includeCSS {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index addd73e5..9e6fe920 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -5,7 +5,8 @@ import Vue from 'vue'
 import $ from 'jquery'
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
-import fancybox from '@fancyapps/fancybox'
+import '@fancyapps/fancybox'
+import axios from 'axios'
 
 global.$ = global.jQuery = $;
 
@@ -144,39 +145,9 @@ new Vue({
         },
         initCarousels () {
             let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
+            let initCallback = this.initTeaserSlider;
             $.each($carouselItemWrappers, function () {
-                let maxNumberOfSlides = $(this).parent('.slider').hasClass('in-column') ? 3 : 4;
-                $(this).slick({
-                    accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
-                    mobileFirst: true,
-                    infinite: false,
-                    slidesToShow: 1.25,
-                    slidesToScroll: 1,
-                    arrows: false,
-                    responsive: [
-                        {
-                            breakpoint: 1200,
-                            settings: {
-                                slidesToShow: maxNumberOfSlides,
-                                arrows: true,
-                                prevArrow: sliderPrevArrow,
-                                nextArrow: sliderNextArrow
-                            }
-                        },
-                        {
-                            breakpoint: 992,
-                            settings: {
-                                slidesToShow: maxNumberOfSlides - 0.5,
-                            }
-                        },
-                        {
-                            breakpoint: 768,
-                            settings: {
-                                slidesToShow: 2.25,
-                            }
-                        }
-                    ]
-                });
+                initCallback($(this));
             });
             $carouselItemWrappers = $('.slider--thirds > .slider__items').not('.slick-initialized');
             $.each($carouselItemWrappers, function () {
@@ -215,6 +186,40 @@ new Vue({
                 });
             });
         },
+        initTeaserSlider ($element) {
+            let maxNumberOfSlides = $element.parent('.slider').hasClass('in-column') ? 3 : 4;
+            $element.slick({
+                accessibility: false, // This is a hack to avoid a slick carousel bug. see: https://github.com/kenwheeler/slick/issues/1407#issuecomment-325228683
+                mobileFirst: true,
+                infinite: false,
+                slidesToShow: 1.25,
+                slidesToScroll: 1,
+                arrows: false,
+                responsive: [
+                    {
+                        breakpoint: 1200,
+                        settings: {
+                            slidesToShow: maxNumberOfSlides,
+                            arrows: true,
+                            prevArrow: sliderPrevArrow,
+                            nextArrow: sliderNextArrow
+                        }
+                    },
+                    {
+                        breakpoint: 992,
+                        settings: {
+                            slidesToShow: maxNumberOfSlides - 0.5,
+                        }
+                    },
+                    {
+                        breakpoint: 768,
+                        settings: {
+                            slidesToShow: 2.25,
+                        }
+                    }
+                ]
+            });
+        },
         initContentsliders () {
             $('.slider--content > .slider__items, .slider--product > .slider__items').not('.slick-initialized').slick({
                 dots: true,
@@ -352,6 +357,21 @@ new Vue({
                 url += separator + 'agenturcode=' + paCode;
                 $(this).attr('href', url);
             });
+        },
+        loadSocialFeed () {
+            const $feedWrapper = $('[data-social-feed]');
+            if ($feedWrapper.length) {
+                const uri = $feedWrapper.data('uri');
+                axios.get(uri)
+                    .then(response => {
+                        $feedWrapper.html(response.data.html);
+                        const $slider = $feedWrapper.find('.slider__items');
+                        this.initTeaserSlider($slider);
+                    })
+                    .catch(error => {
+                        $feedWrapper.html('<p>Social feed konnte nicht geladen werden.</p>')
+                    })
+            }
         }
     },
     created () {
@@ -389,6 +409,7 @@ new Vue({
             this.initPartnerIdSelect();
             this.initFaqFilter();
             this.appendPaCode();
+            this.loadSocialFeed();
         });
     }
 });
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Frontend/FeedsItems.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Frontend/FeedsItems.html
new file mode 100644
index 00000000..7331e7ca
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Frontend/FeedsItems.html
@@ -0,0 +1,38 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:pxa="http://typo3.org/ns/Pixelant/PxaSocialFeed/ViewHelpers"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+<ep:container data="{data}" cssClasses="slider slider--teasers">
+    <div class="row slider__items">
+        <f:for each="{feeds}" as="feed">
+            <f:if condition="{feed.image} and {feed.message}">
+                <div class="col-md-3">
+                    <f:link.typolink class="teaserbox teaserbox--social" parameter="{feed.postUrl}" target="_blank" title="{feed.title}">
+                        <div class="teaserbox__image teaserbox__image--social-media" style="background-image: url({feed.image})">
+                            <f:switch expression="{feed.configuration.token.socialType}">
+                                <f:case value="1">
+                                    <div class="teaserbox__icon">
+                                        <i class="fa fa-facebook"></i>
+                                    </div>
+                                </f:case>
+                                <f:case value="2">
+                                    <div class="teaserbox__icon">
+                                        <i class="fa fa-instagram"></i>
+                                    </div>
+                                </f:case>
+                            </f:switch>
+                        </div>
+                        <div class="teaserbox__main teaserbox__main--fixed-height">
+                            <p>{feed.postDate -> f:format.date(format: 'd.m.Y')} @{feed.configuration.name}</p>
+                            <f:format.raw>{feed.decodedMessage -> f:format.crop(maxCharacters: '120') -> pxa:parseMessage(type: feed.configuration.token.type) -> f:format.nl2br()}</f:format.raw>
+                        </div>
+                        <button class="button button--full teaserbox__button">{f:translate(key: 'tx_eptheme.label.teaserbutton.to_post', extensionName: 'ep_theme')}</button>
+                    </f:link.typolink>
+                </div>
+            </f:if>
+        </f:for>
+    </div>
+</ep:container>
+
+</html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/List.html
index b9693c96..e91799b6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/List.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/List.html
@@ -87,10 +87,8 @@
             <f:case value="pxasocialfeed_showfeed">
                 <f:render section="Header" arguments="{_all}"/>
                 <div>
-                    <ep:container data="{data}" cssClasses="slider slider--teasers">
-                        <div class="row slider__items">
-                            <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
-                        </div>
+                    <ep:container data="{data}">
+                        <f:cObject typoscriptObjectPath="tt_content.list.20.{data.list_type}" data="{data}"/>
                     </ep:container>
                 </div>
             </f:case>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/List.html
index b36b5828..409aacdf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/List.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/List.html
@@ -5,32 +5,6 @@
     <f:layout name="Default"/>
     
     <f:section name="main">
-        <f:for each="{feeds}" as="feed">
-            <f:if condition="{feed.image} and {feed.message}">
-                <div class="col-md-3">
-                    <f:link.typolink class="teaserbox teaserbox--social" parameter="{feed.postUrl}" target="_blank" title="{feed.title}">
-                        <div class="teaserbox__image teaserbox__image--social-media" style="background-image: url({feed.image})">
-                            <f:switch expression="{feed.configuration.token.socialType}">
-                                <f:case value="1">
-                                    <div class="teaserbox__icon">
-                                        <i class="fa fa-facebook"></i>
-                                    </div>
-                                </f:case>
-                                <f:case value="2">
-                                    <div class="teaserbox__icon">
-                                        <i class="fa fa-instagram"></i>
-                                    </div>
-                                </f:case>
-                            </f:switch>
-                        </div>
-                        <div class="teaserbox__main teaserbox__main--fixed-height">
-                            <p>{feed.postDate -> f:format.date(format: 'd.m.Y')} @{feed.configuration.name}</p>
-                            <f:format.raw>{feed.decodedMessage -> f:format.crop(maxCharacters: '120') -> pxa:parseMessage(type: feed.configuration.token.type) -> f:format.nl2br()}</f:format.raw>
-                        </div>
-                        <button class="button button--full teaserbox__button">{f:translate(key: 'tx_eptheme.label.teaserbutton.to_post', extensionName: 'ep_theme')}</button>
-                    </f:link.typolink>
-                </div>
-            </f:if>
-        </f:for>
+        <f:render partial="Frontend/FeedsItems" arguments="{_all}"/>
     </f:section>
 </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/ListAjax.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/ListAjax.html
new file mode 100644
index 00000000..79c55c13
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/ListAjax.html
@@ -0,0 +1,20 @@
+<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
+     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
+
+<f:layout name="Default"/>
+
+<f:section name="main">
+		<div data-social-feed data-uri="{f:render(section: 'uri') -> f:spaceless()}">
+            <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading..." />
+        </div>
+</f:section>
+
+<f:section name="uri">
+	<f:uri.action action="loadFeedAjax"
+                  pageType="7378121"
+                  absolute="1"
+                  pageUid="{settings.defaultAjaxUid}"
+                  arguments="{configuration: settings.configuration, feedsLimit: settings.feedsLimit, partial: settings.partial, presentation: settings.presentation}"
+    />
+</f:section>
+</div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/LoadFeedAjax.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/LoadFeedAjax.html
new file mode 100644
index 00000000..722926a9
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/SocialMedia/Feeds/LoadFeedAjax.html
@@ -0,0 +1,9 @@
+<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
+     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
+
+    <f:layout name="Empty"/>
+
+    <f:section name="main">
+        <f:render partial="Frontend/FeedsItems" arguments="{feeds: feeds}" />
+    </f:section>
+</div>