Merge pull request #34 from pixelant/separateItemsAndCss

Presentation and appearance of items.
pixelant · Oct 11, 2018 · c890f5f · c890f5f
2 parents 834d2d4 + 3ae0571
commit c890f5f
Show file tree

Hide file tree

Showing 18 changed files with 766 additions and 390 deletions.
diff --git a/Classes/Controller/FeedsController.php b/Classes/Controller/FeedsController.php
@@ -55,26 +55,27 @@ public function listAction()
      */
     public function listAjaxAction()
     {
-        $this->view->assignMultiple([
-            'configurations' => $this->settings['configuration'],
-            'feedsLimit' => $this->settings['feedsLimit'] ? intval($this->settings['feedsLimit']) : 10
-        ]);
     }
 
     /**
      * Load feed with ajax
      *
-     * @param string $configurations
-     * @param int $limit
+     * @param array $settings
      * @return void
      */
-    public function loadFeedAjaxAction($configurations, $limit = 0)
+    public function loadFeedAjaxAction($settings)
     {
-        $limit = $limit ? $limit : 10;
+        $limit = $settings['feedsLimit'] ? $settings['feedsLimit'] : 10;
 
-        $feeds = $this->feedRepository->findFeedsByConfig($configurations, $limit);
+        $feeds = $this->feedRepository->findFeedsByConfig(
+            $settings['configuration'],
+            (int)$limit
+        );
 
-        $this->view->assign('feeds', $feeds);
+        $this->view->assignMultiple([
+            'feeds' => $feeds,
+            'settings' => $settings
+        ]);
 
         header('Content-Type: application/json');
 

diff --git a/Classes/Hooks/PageLayoutView.php b/Classes/Hooks/PageLayoutView.php
@@ -56,7 +56,6 @@ public function getExtensionInformation($params)
             $flexformData = GeneralUtility::xml2array($params['row']['pi_flexform']);
 
             $settings = [];
-
             if (is_array($flexformData['data']['sDEF']['lDEF'])) {
                 $rawSettings = $flexformData['data']['sDEF']['lDEF'];
                 foreach ($rawSettings as $field => $rawSetting) {
@@ -66,9 +65,34 @@ public function getExtensionInformation($params)
 
             // get settings array
             if ($settings['settings']) {
-                $settings = $settings['settings'];
+                $settings = \TYPO3\CMS\Extbase\Utility\ArrayUtility::arrayMergeRecursiveOverrule(
+                    $settings,
+                    $settings['settings']
+                );
+                unset($settings['settings']);
             }
 
+            // load type info
+            $additionalInfo .= sprintf(
+                '<b>%s</b>: %s<br>',
+                $this->getLanguageService()->sL(self::LLPATH . 'loadType', true),
+                $settings['switchableControllerActions']
+            );
+
+            // presentation info
+            $additionalInfo .= sprintf(
+                '<b>%s</b>: %s<br>',
+                $this->getLanguageService()->sL(self::LLPATH . 'presentation', true),
+                $settings['presentation']
+            );
+
+            // appearance of feed items info
+            $additionalInfo .= sprintf(
+                '<b>%s</b>: %s<br>',
+                $this->getLanguageService()->sL(self::LLPATH . 'appearanceFeedItem', true),
+                $settings['partial']
+            );
+
             // limit info
             $additionalInfo .= sprintf(
                 '<b>%s</b>: %s<br>',
@@ -131,6 +155,7 @@ protected function getLanguageService()
      */
     protected function flexFormToArray($field, $value, &$settings)
     {
+
         $fieldNameParts = GeneralUtility::trimExplode('.', $field);
         if (count($fieldNameParts) > 1) {
             $name = $fieldNameParts[0];

diff --git a/Classes/Utility/Task/ImportTaskUtility.php b/Classes/Utility/Task/ImportTaskUtility.php
@@ -424,9 +424,9 @@ private function saveInstagramFeed($data, Configuration $configuration)
                 }
 
                 if (isset($rawData['location']['name']) && !empty($rawData['location']['name'])) {
-                    $instagram->setMessage($this->encodeMessage($rawData['location']['name']));
+                    $instagram->setMessage($rawData['location']['name']);
                 } elseif (isset($rawData['caption']['text']) && !empty($rawData['caption']['text'])) {
-                    $instagram->setMessage($this->encodeMessage($rawData['caption']['text']));
+                    $instagram->setMessage($rawData['caption']['text']);
                 }
 
                 $instagram->setPostUrl($rawData['link']);

diff --git a/Configuration/FlexForm/SocialFeed.xml b/Configuration/FlexForm/SocialFeed.xml
@@ -29,6 +29,44 @@
                         </TCEforms>
                     </switchableControllerActions>
 
+                    <settings.presentation>
+                        <TCEforms>
+                            <label>LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.presentation</label>
+                            <config>
+                                <type>select</type>
+                                <items>
+                                    <numIndex index="0">
+                                        <numIndex index="0">Owl Carousel</numIndex>
+                                        <numIndex index="1">owl-carousel</numIndex>
+                                    </numIndex>
+                                    <numIndex index="1">
+                                        <numIndex index="0">Masonry grid layout</numIndex>
+                                        <numIndex index="1">masonry</numIndex>
+                                    </numIndex>
+                                </items>
+                            </config>
+                        </TCEforms>
+                    </settings.presentation>
+
+                    <settings.partial>
+                        <TCEforms>
+                            <label>LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.partial</label>
+                            <config>
+                                <type>select</type>
+                                <items>
+                                    <numIndex index="0">
+                                        <numIndex index="0">LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.partial.0</numIndex>
+                                        <numIndex index="1">FeedItemCard</numIndex>
+                                    </numIndex>
+                                    <numIndex index="1">
+                                        <numIndex index="0">LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.partial.1</numIndex>
+                                        <numIndex index="1">FeedItemDynamic</numIndex>
+                                    </numIndex>
+                                </items>
+                            </config>
+                        </TCEforms>
+                    </settings.partial>
+
                     <settings.feedsLimit>
                         <TCEforms>
                             <label>LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.amount_feeds</label>
@@ -53,7 +91,7 @@
                         <TCEforms>
                             <label>LLL:EXT:pxa_social_feed/Resources/Private/Language/locallang_db.xlf:tx_pxasocialfeed_plugin.flexform.config</label>
                             <config>
-                                <type>select</type>                                
+                                <type>select</type>
                                 <size>10</size>
                                 <minitems>1</minitems>
                                 <maxitems>999</maxitems>
@@ -62,7 +100,7 @@
                             </config>
                         </TCEforms>
                     </settings.configuration>
-                    
+
                 </el>
             </ROOT>
         </sDEF>

diff --git a/Configuration/TypoScript/setup.txt b/Configuration/TypoScript/setup.txt
@@ -25,7 +25,9 @@ page.includeCSS {
 page.includeJSFooter {
     pxa_social_feed_1 = EXT:pxa_social_feed/Resources/Public/JavaScript/jquery.dotdotdot.min.js
     pxa_social_feed_2 = EXT:pxa_social_feed/Resources/Public/JavaScript/owl.carousel.min.js
-    pxa_social_feed_3 = EXT:pxa_social_feed/Resources/Public/JavaScript/socialFeed.js
+    pxa_social_feed_3 = EXT:pxa_social_feed/Resources/Public/JavaScript/masonry.pkgd.min.js
+    pxa_social_feed_4 = EXT:pxa_social_feed/Resources/Public/JavaScript/imagesloaded.pkgd.min.js
+    pxa_social_feed_5 = EXT:pxa_social_feed/Resources/Public/JavaScript/socialFeed.js
 }
 
 [globalVar = GP:type=7378121]
@@ -52,4 +54,4 @@ page.includeJSFooter {
             settings =< plugin.tx_pxasocialfeed.settings
         }
     }
-[end]
+[end]
diff --git a/Resources/Private/Language/locallang_be.xlf b/Resources/Private/Language/locallang_be.xlf
@@ -35,6 +35,15 @@
             </trans-unit>
             <trans-unit id="setStoragePid">
                 <source>Specify Storage Pid, if you need it.</source>
+            </trans-unit>
+            <trans-unit id="presentation">
+                <source>Presentation</source>
+            </trans-unit>
+            <trans-unit id="appearanceFeedItem">
+                <source>Appearance of feed items</source>
+            </trans-unit>
+            <trans-unit id="loadType">
+                <source>Load feed (directly or AJAX)</source>
             </trans-unit>
 		</body>
 	</file>

diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf
@@ -139,6 +139,18 @@
             <trans-unit id="tx_pxasocialfeed_plugin.flexform.load_type">
                 <source>Load type</source>
             </trans-unit>
+            <trans-unit id="tx_pxasocialfeed_plugin.flexform.presentation">
+                <source>Presentation</source>
+            </trans-unit>
+            <trans-unit id="tx_pxasocialfeed_plugin.flexform.partial">
+                <source>Appearance of feed items</source>
+            </trans-unit>
+            <trans-unit id="tx_pxasocialfeed_plugin.flexform.partial.0">
+                <source>Card</source>
+            </trans-unit>
+            <trans-unit id="tx_pxasocialfeed_plugin.flexform.partial.1">
+                <source>Dynamic</source>
+            </trans-unit>
 
             <trans-unit id="scheduler.configs">
                 <source>Available configurations</source>

diff --git a/Resources/Private/Layouts/Empty.html b/Resources/Private/Layouts/Empty.html
@@ -0,0 +1 @@
+<f:render section="main" />
diff --git a/Resources/Private/Partials/Frontend/FeedItemCard.html b/Resources/Private/Partials/Frontend/FeedItemCard.html
@@ -0,0 +1,25 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:pxa="http://typo3.org/ns/Pixelant/PxaSocialFeed/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+    <li class="social-feed-item social-feed-{feed.configuration.token.socialType}" data-posturl="{feed.postUrl}">
+        <f:if condition="{feed.title}">
+            <h3 class="social-feed-title">{feed.title}</h3>
+        </f:if>
+        <div class="social-feed-image-container{f:if(else: ' no-image', then: '', condition: feed.image)}" style="{f:if(else: '', then: 'background-image:url({feed.image});', condition: feed.image)}">
+            <div class="social-feed-information">
+                <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/type-{feed.configuration.token.socialType}-icon.svg" class="social-feed-icon" alt="social icon" />
+                <span class="social-feed-date">{feed.postDate -> f:format.date(format: settings.dateFormat)}</span>
+            </div>
+            <f:if condition="{settings.loadLikesCount}">
+                <span class="social-feed-like-count">
+                    <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/like.svg" class="like-icon" alt="like" />
+                    <span class="social-feed-like-like-count-element">{feed.likes}</span>
+                </span>
+            </f:if>
+        </div>
+        <p class="social-feed-message">
+            <f:format.raw>{feed.message -> pxa:parseMessage(type: feed.configuration.token.socialType) -> f:format.nl2br()}</f:format.raw>
+        </p>
+    </li>
+</html>
diff --git a/Resources/Private/Partials/Frontend/FeedItemDynamic.html b/Resources/Private/Partials/Frontend/FeedItemDynamic.html
@@ -0,0 +1,28 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:pxa="http://typo3.org/ns/Pixelant/PxaSocialFeed/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+    <li class="social-feed-item social-feed-{feed.configuration.token.socialType}" data-posturl="{feed.postUrl}">
+        <f:if condition="{feed.title}">
+            <h3 class="social-feed-title">{feed.title}</h3>
+        </f:if>
+        <div class="social-feed-image-container{f:if(else: ' no-image', then: '', condition: feed.image)}">
+            <f:if condition="{feed.image">
+                <img src="{feed.image}" alt=""/>
+            </f:if>
+        </div>
+        <span class="social-feed-information">
+            <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/type-{feed.configuration.token.socialType}-icon.svg" class="social-feed-icon" alt="social icon" />
+            <span class="social-feed-date">{feed.postDate -> f:format.date(format: settings.dateFormat)}</span>
+            <f:if condition="{settings.loadLikesCount}">
+                <span class="social-feed-like-count">
+                    <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/like.svg" class="like-icon" alt="like" />
+                    <span class="social-feed-like-like-count-element">{feed.likes}</span>
+                </span>
+            </f:if>
+        </span>
+        <p class="social-feed-message">
+            <f:format.raw>{feed.message -> pxa:parseMessage(type: feed.configuration.token.socialType) -> f:format.nl2br()}</f:format.raw>
+        </p>
+    </li>
+</html>
diff --git a/Resources/Private/Partials/Frontend/FeedsItems.html b/Resources/Private/Partials/Frontend/FeedsItems.html
@@ -1,31 +1,20 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
       xmlns:pxa="http://typo3.org/ns/Pixelant/PxaSocialFeed/ViewHelpers"
       data-namespace-typo3-fluid="true">
-<ul class="social-feed-container owl-carousel">
-    <f:for each="{feeds}" as="feed">
-        <li class="social-feed-{feed.configuration.token.socialType}">
-            <a href="{feed.postUrl}" target="_blank">
-                <f:if condition="{feed.title}">
-                    <h3 class="social-feed-title">{feed.title}</h3>
-                </f:if>
 
-                <div class="social-feed-image-container{f:if(else: ' no-image', then: '', condition: feed.image)}" style="{f:if(else: '', then: 'background-image:url({feed.image});', condition: feed.image)}">
-                    <div class="social-feed-information">
-                        <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/type-{feed.configuration.token.socialType}-icon.svg" class="social-feed-icon" width="17"/>
-                        <span class="social-feed-date">{feed.postDate -> f:format.date(format: settings.dateFormat)}</span>
-                    </div>
-                    <f:if condition="{settings.loadLikesCount}">
-                        <span class="social-feed-like-count">
-                            <f:image src="EXT:pxa_social_feed/Resources/Public/Icons/like.svg" class="like-icon" alt="like" width="17"/>
-                            <span class="social-feed-like-like-count-element">{feed.likes}</span>
-                        </span>
-                    </f:if>
-                </div>
-                <p class="social-feed-message">
-                    <f:format.raw>{feed.message -> pxa:parseMessage(type: feed.configuration.token.socialType) -> f:format.nl2br()}</f:format.raw>
-                </p>
-            </a>
-        </li>
+<f:variable name="presentation">owl-carousel</f:variable>
+<f:if condition="{settings.presentation}">
+	<f:variable name="presentation">{settings.presentation}</f:variable>
+</f:if>
+<f:variable name="partial">FeedItemCard</f:variable>
+<f:if condition="{settings.partial}">
+	<f:variable name="partial">{settings.partial}</f:variable>
+</f:if>
+
+<ul class="social-feed-container social-feed-{partial->f:format.case(mode: 'lower')} {presentation}">
+    <f:for each="{feeds}" as="feed">
+        <f:render partial="Frontend/{partial}" arguments="{feed: feed, settings: settings}"/>
     </f:for>
 </ul>
+
 </html>
diff --git a/Resources/Private/Templates/Feeds/ListAjax.html b/Resources/Private/Templates/Feeds/ListAjax.html
@@ -6,7 +6,7 @@
     <f:section name="main">
         <div class="load-ajax-feed-wrapper"
              data-identifier="pxa-load-ajax-feed"
-             data-uri="{f:uri.action(pageType: '7378121', absolute: '1', action: 'loadFeedAjax', arguments: '{configurations: \'{configurations}\', limit: \'{feedsLimit}\'}')}">
+             data-uri="{f:uri.action(pageType: '7378121', absolute: '1', action: 'loadFeedAjax', arguments: '{settings: \'{settings}\'}')}">
 
             <div class="feed-loading-overlay">
                 <div class="animated-loader">

diff --git a/Resources/Private/Templates/Feeds/LoadFeedAjax.html b/Resources/Private/Templates/Feeds/LoadFeedAjax.html
@@ -1,11 +1,11 @@
 <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
 
-    <f:layout name="Default"/>
+    <f:layout name="Empty"/>
 
     <f:section name="main">
         <f:render partial="Frontend/FeedsItems" arguments="{feeds: feeds}"/>
 
         <f:render partial="Frontend/DateAlert" arguments="{feeds: feeds}"/>
     </f:section>
-</div>
+</div>