From 9d8b472b9ac19bbd7050a26e6f3e4a5eb8e4df5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Wed, 25 Apr 2018 17:31:19 +0200
Subject: [PATCH] Implement EXT:news for events site

---
 package.json                                  |  2 +-
 .../TypoScript/Extensions/News.ts             | 12 +++
 .../Configuration/TypoScript/constants.txt    |  1 +
 .../Configuration/TypoScript/setup.txt        |  1 +
 .../Resources/Private/Assets/scss/_news.scss  | 55 ++++++++++++
 .../Resources/Private/Assets/scss/main.scss   |  1 +
 .../Partials/News/Detail/MediaContainer.html  | 31 +++++++
 .../Private/Partials/News/List/Item.html      | 53 ++++++++++++
 .../Private/Templates/News/News/Detail.html   | 70 ++++++++++++++++
 .../Private/Templates/News/News/List.html     | 33 ++++++++
 .../ViewHelpers/Widget/Paginate/Index.html    | 84 +++++++++++++++++++
 11 files changed, 342 insertions(+), 1 deletion(-)
 create mode 100644 web/typo3conf/ext/ep_events/Configuration/TypoScript/Extensions/News.ts
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Partials/News/Detail/MediaContainer.html
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/Detail.html
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/List.html
 create mode 100644 web/typo3conf/ext/ep_events/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html

diff --git a/package.json b/package.json
index e21659ce..4220e75b 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "license": "WTFPL",
   "repository": "https://gitlab.com/dreipunktnull/ep_theme.git",
   "scripts": {
-    "dev": "./node_modules/.bin/encore dev",
+    "dev": "./node_modules/.bin/encore dev --watch",
     "build": "./node_modules/.bin/encore production"
   },
   "dependencies": {
diff --git a/web/typo3conf/ext/ep_events/Configuration/TypoScript/Extensions/News.ts b/web/typo3conf/ext/ep_events/Configuration/TypoScript/Extensions/News.ts
new file mode 100644
index 00000000..24f3b115
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Configuration/TypoScript/Extensions/News.ts
@@ -0,0 +1,12 @@
+<INCLUDE_TYPOSCRIPT: source="FILE:EXT:news/Configuration/TypoScript/setup.txt">
+
+plugin.tx_news {
+    view {
+        templateRootPaths.100 = EXT:ep_events/Resources/Private/Templates/News/
+        partialRootPaths.100 = EXT:ep_events/Resources/Private/Partials/News/
+        widget.GeorgRinger\News\ViewHelpers\Widget\PaginateViewHelper.templateRootPath = EXT:ep_events/Resources/Private/Templates/News/
+    }
+    settings {
+        link.skipControllerAndAction = 1
+    }
+}
diff --git a/web/typo3conf/ext/ep_events/Configuration/TypoScript/constants.txt b/web/typo3conf/ext/ep_events/Configuration/TypoScript/constants.txt
index 71fab704..fe0c69ff 100644
--- a/web/typo3conf/ext/ep_events/Configuration/TypoScript/constants.txt
+++ b/web/typo3conf/ext/ep_events/Configuration/TypoScript/constants.txt
@@ -55,3 +55,4 @@ plugin.tx_epevents {
 
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:fluid_styled_content/Configuration/TypoScript/Static/constants.txt">
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:form/Configuration/TypoScript/constants.txt">
+<INCLUDE_TYPOSCRIPT: source="FILE:EXT:news/Configuration/TypoScript/constants.txt">
diff --git a/web/typo3conf/ext/ep_events/Configuration/TypoScript/setup.txt b/web/typo3conf/ext/ep_events/Configuration/TypoScript/setup.txt
index aa72a8fc..f9ee5a4d 100644
--- a/web/typo3conf/ext/ep_events/Configuration/TypoScript/setup.txt
+++ b/web/typo3conf/ext/ep_events/Configuration/TypoScript/setup.txt
@@ -1,5 +1,6 @@
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ep_events/Configuration/TypoScript/Extensions/FluidStyledContent.ts">
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ep_events/Configuration/TypoScript/Extensions/Form.ts">
+<INCLUDE_TYPOSCRIPT: source="FILE:EXT:ep_events/Configuration/TypoScript/Extensions/News.ts">
 
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ep_events/Configuration/TypoScript/Library/DynamicContent.ts">
 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:ep_events/Configuration/TypoScript/Library/ParseFunc.ts">
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
new file mode 100644
index 00000000..c2f8ac96
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
@@ -0,0 +1,55 @@
+.news-entry {
+  width: 100%;
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}
+
+.news-entry__info {
+  margin: 0 0 20px;
+}
+
+.news-entry__inner {
+  display: flex;
+  flex-direction: column;
+
+  @include mq($from: tablet) {
+    flex-direction: row;
+  }
+}
+
+.news-entry__image {
+  width: 100%;
+  margin-bottom: 8px;
+
+  @include mq($from: tablet) {
+    width: percentage(1/3);
+  }
+}
+
+.news-entry__info {
+  font-style: italic;
+  font-size: 90%;
+}
+
+.news-entry__headline {
+  margin-top: 0;
+}
+
+.news-entry__teaser {
+  width: 100%;
+
+  @include mq($from: tablet) {
+    padding-left: 16px;
+    width: percentage(2/3);
+  }
+
+  p {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 8px;
+    }
+
+  }
+}
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
index 64fd90f5..f0470f8d 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss
@@ -39,3 +39,4 @@ $output-bourbon-deprecation-warnings: false;
 @import "cookieconsent";
 @import "search";
 @import "paginator";
+@import "news";
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/Detail/MediaContainer.html b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/Detail/MediaContainer.html
new file mode 100644
index 00000000..5556d7a4
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/Detail/MediaContainer.html
@@ -0,0 +1,31 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+    <v:variable.set name="images" value="{media -> v:iterator.filter(propertyName: 'showinpreview', filter: 0)}"/>
+    <f:if condition="{images}">
+        <div class="slider slider--content">
+            <div id="carousel-{id}" class="slider__items">
+                <f:for each="{images}" as="image" iteration="iteration">
+                    <f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
+                        <img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '770', height: '430c+100')}"
+                             class="slider__image" alt="{image.alternative}" title="{image.title}">
+                    </f:link.typolink>
+                </f:for>
+            </div>
+            <f:if condition="{images -> f:count()} > 1">
+                <div class="slider__thumbs hidden-sm hidden-xs">
+                    <f:for each="{images}" as="image" iteration="iteration">
+                        <f:if condition="{iteration.cycle} <= 5">
+                            <a href="#" class="slider__thumb" data-slide="{iteration.index}">
+                                <img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '150', height: '85c+100')}"
+                                     class="img-responsive" alt="{image.alternative}" title="{image.title}">
+                            </a>
+                        </f:if>
+                    </f:for>
+                </div>
+            </f:if>
+        </div>
+    </f:if>
+
+</html>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
new file mode 100644
index 00000000..261743ea
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
@@ -0,0 +1,53 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+	  xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
+	  data-namespace-typo3-fluid="true">
+
+    <div class="news-entry" itemscope="itemscope" itemtype="http://schema.org/Article">
+        <n:excludeDisplayedNews newsItem="{newsItem}"/>
+        <div class="news-entry__inner">
+            <div class="news-entry__image">
+                <f:if condition="{newsItem.mediaPreviews}">
+                    <f:then>
+                        <f:if condition="{newsItem.mediaPreviews.0}">
+                            <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
+                                <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
+                                         crop="{mediaElement.crop}"
+                                         width="640" height="360c+50"
+                                         alt="{mediaElement.originalResource.alternative}" class="scale"/>
+                            </f:alias>
+                        </f:if>
+                    </f:then>
+                    <f:else>
+                        <f:if condition="{newsItem.media}">
+                            <f:alias map="{mediaElement: '{newsItem.media.0}'}">
+                                <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
+                                         crop="{mediaElement.crop}"
+                                         width="640" height="360c+50"
+                                         alt="{mediaElement.originalResource.alternative}" class="scale"/>
+                            </f:alias>
+                        </f:if>
+                    </f:else>
+                </f:if>
+            </div>
+            <div class="news-entry__teaser">
+                <h2 class="headline headline--primary" itemprop="headline">
+                    {newsItem.title}
+                    <span class="subline">
+                        <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
+                    </span>
+                </h2>
+                <n:removeMediaTags>
+                    <f:if condition="{newsItem.teaser}">
+                        <f:then>
+                            <div itemprop="description">{newsItem.teaser -> f:format.html()}</div>
+                        </f:then>
+                        <f:else>
+                            <div itemprop="description">{newsItem.bodytext -> f:format.html()}</div>
+                        </f:else>
+                    </f:if>
+                </n:removeMediaTags>
+            </div>
+        </div>
+    </div>
+
+</html>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/Detail.html b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/Detail.html
new file mode 100644
index 00000000..fbb3e6bd
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/Detail.html
@@ -0,0 +1,70 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+	  xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
+	  data-namespace-typo3-fluid="true">
+
+    <f:layout name="Detail" />
+
+    <f:section name="content">
+        <f:if condition="{newsItem}">
+            <f:then>
+                <div class="blog-entry blog-entry--detail">
+                    <n:format.nothing>
+                        <n:excludeDisplayedNews newsItem="{newsItem}" />
+                        <f:if condition="{newsItem.alternativeTitle}">
+                            <f:then>
+                                <n:titleTag>
+                                    <f:format.htmlentitiesDecode>{newsItem.alternativeTitle}</f:format.htmlentitiesDecode>
+                                </n:titleTag>
+                            </f:then>
+                            <f:else>
+                                <n:titleTag>
+                                    <f:format.htmlentitiesDecode>{newsItem.title}</f:format.htmlentitiesDecode>
+                                </n:titleTag>
+                            </f:else>
+                        </f:if>
+                        <f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
+                    </n:format.nothing>
+                    <h2 class="headline headline--primary headline--underlined" itemprop="headline">{newsItem.title}</h2>
+                    <p class="blog-entry__info">
+                        <f:if condition="{newsItem.author}">{newsItem.author} am </f:if>
+                        <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
+                        <f:if condition="{newsItem.tags}"> in
+                            <f:for each="{newsItem.tags}" as="tag" iteration="iteration">
+                                <f:link.page title="{tag.title}" pageUid="{settings.tagListPageUid}" additionalParams="{tx_news_pi1:{overwriteDemand:{tags: tag}}}">
+                                    {tag.title}
+                                </f:link.page>
+                                {f:if(condition: iteration.isLast, else: ', ')}
+                            </f:for>
+                        </f:if>
+                    </p>
+                    <f:if condition="{newsItem.teaser}">
+                        <f:format.html>{newsItem.teaser}</f:format.html>
+                    </f:if>
+                    <n:renderMedia news="{newsItem}" imgClass="img-responsive" videoClass="video-wrapper" audioClass="audio-wrapper">
+                        <f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings, id: newsItem.uid}" />
+                        <f:format.html>{newsItem.bodytext}</f:format.html>
+                    </n:renderMedia>
+                    <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
+                    <f:if condition="{newsItem.relatedFiles}">
+                        <h3 class="headline headline--underlined">Dateien</h3>
+                        <ul>
+                            <f:for each="{newsItem.relatedFiles}" as="relatedFile">
+                                <li>
+                                    <a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank">
+                                        {f:if(condition:relatedFile.originalResource.title, then:relatedFile.originalResource.title, else:relatedFile.originalResource.name)}, {relatedFile.originalResource.size -> f:format.bytes()}
+                                    </a>
+                                </li>
+                            </f:for>
+                        </ul>
+                    </f:if>
+                    <f:if condition="{settings.backPid}">
+                        <f:link.page pageUid="{settings.backPid}" class="button button--default button--small">
+                            <f:translate key="back-link" />
+                        </f:link.page>
+                    </f:if>
+                </div>
+            </f:then>
+        </f:if>
+    </f:section>
+
+</html>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/List.html b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/List.html
new file mode 100644
index 00000000..e3ce744f
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/News/List.html
@@ -0,0 +1,33 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+	  xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
+	  data-namespace-typo3-fluid="true">
+
+    <f:layout name="General" />
+
+    <f:section name="content">
+        <f:if condition="{news}">
+            <f:then>
+                <f:if condition="{settings.hidePagination}">
+                    <f:then>
+                        <f:for each="{news}" as="newsItem" iteration="iterator">
+                            <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+                        </f:for>
+                    </f:then>
+                    <f:else>
+                        <n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}" initial="{offset:settings.offset,limit:settings.limit,recordId:contentObjectData.uid}">
+                            <f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
+                                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+                            </f:for>
+                        </n:widget.paginate>
+                    </f:else>
+                </f:if>
+            </f:then>
+            <f:else>
+                <div class="no-news-found">
+                    <f:translate key="list_nonewsfound" />
+                </div>
+            </f:else>
+        </f:if>
+    </f:section>
+
+</html>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html
new file mode 100644
index 00000000..8c2bb412
--- /dev/null
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Templates/News/ViewHelpers/Widget/Paginate/Index.html
@@ -0,0 +1,84 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+
+    <f:renderChildren arguments="{contentArguments}" />
+    <f:render section="paginator" arguments="{pagination: pagination,configuration:configuration}" />
+
+    <f:section name="paginator">
+        <f:if condition="{pagination.numberOfPages} > 1">
+            <f:if condition="{settings.list.paginate}">
+                <f:if condition="{pagination.previousPage}">
+                    <f:if condition="{pagination.previousPage} > 1">
+                        <f:then>
+                            <n:headerData><link rel="prev" href="{f:widget.uri(arguments: {currentPage: pagination.previousPage}) -> f:format.htmlentities()}" /></n:headerData>
+                        </f:then>
+                        <f:else>
+                            <n:headerData><link rel="prev" href="{f:widget.uri() -> f:format.htmlentities()}" /></n:headerData>
+                        </f:else>
+                    </f:if>
+                </f:if>
+                <f:if condition="{pagination.nextPage}">
+                    <n:headerData><link rel="next" href="{f:widget.uri(arguments: {currentPage: pagination.nextPage}) -> f:format.htmlentities()}" /></n:headerData>
+                </f:if>
+            </f:if>
+            <nav aria-label="Paginierung">
+                <ul class="pagination">
+                    <f:if condition="{pagination.previousPage}">
+                        <li class="previous">
+                            <f:if condition="{pagination.previousPage} > 1">
+                                <f:then>
+                                    <f:widget.link arguments="{currentPage: pagination.previousPage}">&laquo;</f:widget.link>
+                                </f:then>
+                                <f:else>
+                                    <f:widget.link>&laquo;</f:widget.link>
+                                </f:else>
+                            </f:if>
+                        </li>
+                    </f:if>
+                    <f:if condition="{pagination.displayRangeStart} > 1">
+                        <li class="first">
+                            <f:widget.link>1</f:widget.link>
+                        </li>
+                    </f:if>
+                    <f:if condition="{pagination.hasLessPages}">
+                        <li>....</li>
+                    </f:if>
+                    <f:for each="{pagination.pages}" as="page">
+                        <f:if condition="{page.isCurrent}">
+                            <f:then>
+                                <li class="active"><span>{page.number}</span></li>
+                            </f:then>
+                            <f:else>
+                                <li>
+                                    <f:if condition="{page.number} > 1">
+                                        <f:then>
+                                            <f:widget.link arguments="{currentPage: page.number}">{page.number}</f:widget.link>
+                                        </f:then>
+                                        <f:else>
+                                            <f:widget.link>{page.number}</f:widget.link>
+                                        </f:else>
+                                    </f:if>
+                                </li>
+                            </f:else>
+                        </f:if>
+                    </f:for>
+                    <f:if condition="{pagination.hasMorePages}">
+                        <li class="disabled">....</li>
+                    </f:if>
+                    <f:if condition="{pagination.displayRangeEnd} < {pagination.numberOfPages}">
+                        <li class="last">
+                            <f:widget.link arguments="{currentPage: pagination.numberOfPages}">{pagination.numberOfPages}</f:widget.link>
+                        </li>
+                    </f:if>
+                    <f:if condition="{pagination.nextPage}">
+                        <li class="last next">
+                            <f:widget.link arguments="{currentPage: pagination.nextPage}">&raquo;</f:widget.link>
+                        </li>
+                    </f:if>
+                </ul>
+            </nav>
+        </f:if>
+    </f:section>
+
+</html>