From c2716f35fa52cc1f30df33a29380cea0629a36b7 Mon Sep 17 00:00:00 2001 From: Mikkel Hastrup Date: Tue, 5 Jun 2018 12:27:29 +0200 Subject: [PATCH 01/16] [TASK] separate owl-carousel specific js and css from pxa-social-feed (to be able to introduce other ways to present the items) --- .../Private/Partials/Frontend/FeedsItems.html | 4 ++- Resources/Public/Css/socialFeed.css | 35 ++++++++++--------- Resources/Public/JavaScript/socialFeed.js | 4 +-- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/Resources/Private/Partials/Frontend/FeedsItems.html b/Resources/Private/Partials/Frontend/FeedsItems.html index d7670a7..2691a18 100644 --- a/Resources/Private/Partials/Frontend/FeedsItems.html +++ b/Resources/Private/Partials/Frontend/FeedsItems.html @@ -1,9 +1,10 @@ + + diff --git a/Resources/Public/Css/socialFeed.css b/Resources/Public/Css/socialFeed.css index a8b24b7..b331f4c 100644 --- a/Resources/Public/Css/socialFeed.css +++ b/Resources/Public/Css/socialFeed.css @@ -1,28 +1,31 @@ .tx-pxa-social-feed .social-feed-container { + list-style: none; + padding-left: 0; +} + +.tx-pxa-social-feed .social-feed-container.owl-carousel { position: relative; width: 100%; - padding-left: 0; - list-style: none; margin: 30px 0; display: none; -webkit-tap-highlight-color: transparent; z-index: 1; } -.tx-pxa-social-feed .social-feed-container.owl-loaded { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-loaded { display: block; } -.tx-pxa-social-feed .social-feed-container.owl-loading { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-loading { opacity: 0; display: block; } -.tx-pxa-social-feed .social-feed-container.owl-hidden { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-hidden { opacity: 0; } -.tx-pxa-social-feed .social-feed-container.owl-grab { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; @@ -30,16 +33,16 @@ cursor: grab; } -.tx-pxa-social-feed .social-feed-container.owl-rtl { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-rtl { direction: rtl; } -.tx-pxa-social-feed .social-feed-container .owl-stage { +.tx-pxa-social-feed .social-feed-container.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } -.tx-pxa-social-feed .social-feed-container .owl-stage:after { +.tx-pxa-social-feed .social-feed-container.owl-carousel .owl-stage:after { content: '.'; display: block; clear: both; @@ -48,7 +51,7 @@ height: 0; } -.tx-pxa-social-feed .social-feed-container .owl-stage-outer { +.tx-pxa-social-feed .social-feed-container.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); @@ -63,18 +66,18 @@ -webkit-touch-callout: none; } -.tx-pxa-social-feed .social-feed-container.owl-refresh .item { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-refresh .item { display: none; } -.tx-pxa-social-feed .social-feed-container.owl-drag .item { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-drag .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } -.tx-pxa-social-feed .social-feed-container.owl-rtl .item { +.tx-pxa-social-feed .social-feed-container.owl-carousel.owl-rtl .item { float: right; } @@ -607,10 +610,10 @@ } @media (min-width: 1200px) { - .tx-pxa-social-feed .social-feed-container { + .tx-pxa-social-feed .social-feed-container.owl-carousel { padding: 0 50px; } - .tx-pxa-social-feed .owl-stage-outer { + .tx-pxa-social-feed .social-feed-container.owl-carousel .owl-stage-outer { z-index: 1; } .tx-pxa-social-feed .nav { @@ -640,4 +643,4 @@ .tx-pxa-social-feed .nav .next { float: right; } -} \ No newline at end of file +} diff --git a/Resources/Public/JavaScript/socialFeed.js b/Resources/Public/JavaScript/socialFeed.js index e84048e..861a3bd 100644 --- a/Resources/Public/JavaScript/socialFeed.js +++ b/Resources/Public/JavaScript/socialFeed.js @@ -18,7 +18,7 @@ jQuery(function ($) { } }; - $('.social-feed-container').owlCarousel(defaultOwlOptions); + $('.social-feed-container.owl-carousel').owlCarousel(defaultOwlOptions); $('.social-feed-container .social-feed-title, .social-feed-container .social-feed-message').dotdotdot({ watch: true }); @@ -38,4 +38,4 @@ jQuery(function ($) { } }); }); -}); \ No newline at end of file +}); From 4c5fc5736f13c12107abe15f171746e4a9c032b5 Mon Sep 17 00:00:00 2001 From: Mikkel Hastrup Date: Tue, 5 Jun 2018 17:26:54 +0200 Subject: [PATCH 02/16] - Adding field in flexform for presentation mode. - Added masonry js. - Separated CSS into general styling, owl-carousel-specific styling and added masonry-styling. --- Configuration/FlexForm/SocialFeed.xml | 23 +- Configuration/TypoScript/setup.txt | 5 +- Resources/Private/Language/locallang_db.xlf | 3 + .../Private/Partials/Frontend/FeedsItems.html | 7 +- Resources/Public/Css/socialFeed.css | 217 +++++++++++------- .../Public/JavaScript/masonry.pkgd.min.js | 9 + Resources/Public/JavaScript/socialFeed.js | 10 +- 7 files changed, 190 insertions(+), 84 deletions(-) create mode 100644 Resources/Public/JavaScript/masonry.pkgd.min.js diff --git a/Configuration/FlexForm/SocialFeed.xml b/Configuration/FlexForm/SocialFeed.xml index 8478fa5..a171e5a 100644 --- a/Configuration/FlexForm/SocialFeed.xml +++ b/Configuration/FlexForm/SocialFeed.xml @@ -29,6 +29,25 @@ + + + + + select + + + Owl Carousel + owl-carousel + + + Masonry grid layout + masonry + + + + + + @@ -53,7 +72,7 @@ - select + select 10 1 999 @@ -62,7 +81,7 @@ - + diff --git a/Configuration/TypoScript/setup.txt b/Configuration/TypoScript/setup.txt index 789366b..beb201a 100644 --- a/Configuration/TypoScript/setup.txt +++ b/Configuration/TypoScript/setup.txt @@ -25,7 +25,8 @@ 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/socialFeed.js } [globalVar = GP:type=7378121] @@ -52,4 +53,4 @@ page.includeJSFooter { settings =< plugin.tx_pxasocialfeed.settings } } -[end] \ No newline at end of file +[end] diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf index d624c93..e368073 100644 --- a/Resources/Private/Language/locallang_db.xlf +++ b/Resources/Private/Language/locallang_db.xlf @@ -139,6 +139,9 @@ Load type + + Presentation + Available configurations diff --git a/Resources/Private/Partials/Frontend/FeedsItems.html b/Resources/Private/Partials/Frontend/FeedsItems.html index 2691a18..1ace3a2 100644 --- a/Resources/Private/Partials/Frontend/FeedsItems.html +++ b/Resources/Private/Partials/Frontend/FeedsItems.html @@ -2,7 +2,12 @@ xmlns:pxa="http://typo3.org/ns/Pixelant/PxaSocialFeed/ViewHelpers" data-namespace-typo3-fluid="true"> -