Merge pull request #2580 from r3wald/feature/newsfeed-show-as-list

feature: show newsfeed as list

CHANGELOG.md

@@ -21,6 +21,7 @@ Special thanks to the following contributors: @B1gG, @codac, @ezeholz, @khassel,
 - Added custom-properties for gaps around body and between modules
 - Added test case for recurring calendar events
 - Added new Environment Canada provider for default WEATHER module (weather data for Canadian locations only)
+- Added list view for newsfeed module.
 
 ### Updated
 

modules/default/newsfeed/newsfeed.css

@@ -12,3 +12,12 @@ iframe.newsfeed-fullarticle {
   bottom: inherit;
   top: -90px;
 }
+
+.newsfeed-list {
+  list-style: none;
+}
+
+.newsfeed-list li {
+  text-align: justify;
+  margin-bottom: 0.5em;
+}

modules/default/newsfeed/newsfeed.js

@@ -14,6 +14,7 @@ Module.register("newsfeed", {
 				encoding: "UTF-8" //ISO-8859-1
 			}
 		],
+		showAsList: false,
 		showSourceTitle: true,
 		showPublishDate: true,
 		broadcastNewsFeeds: true,
@@ -128,6 +129,10 @@ Module.register("newsfeed", {
 		}
 
 		const item = this.newsItems[this.activeItem];
+		const items = this.newsItems.map(function (item) {
+			item.publishDate = moment(new Date(item.pubdate)).fromNow();
+			return item;
+		});
 
 		return {
 			loaded: true,
@@ -135,7 +140,8 @@ Module.register("newsfeed", {
 			sourceTitle: item.sourceTitle,
 			publishDate: moment(new Date(item.pubdate)).fromNow(),
 			title: item.title,
-			description: item.description
+			description: item.description,
+			items: items
 		};
 	},
 
@@ -192,7 +198,6 @@ Module.register("newsfeed", {
 				return true;
 			}, this);
 		}
-
 		newsItems.forEach((item) => {
 			//Remove selected tags from the beginning of rss feed items (title or description)
 			if (this.config.removeStartTags === "title" || this.config.removeStartTags === "both") {

modules/default/newsfeed/newsfeed.njk

@@ -1,28 +1,59 @@
 {% if loaded %}
-    <div>
-        {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
-            <div class="newsfeed-source light small dimmed">
-                {% if sourceTitle and config.showSourceTitle %}
-                    {{ sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %}
-                {% endif %}
-                {% if config.showPublishDate %}
-                    {{ publishDate }}:
-                {% endif %}
+    {% if config.showAsList %}
+        <ul class="newsfeed-list">
+            {% for item in items %}
+                <li>
+                    {% if (config.showSourceTitle and item.sourceTitle) or config.showPublishDate %}
+                        <div class="newsfeed-source light small dimmed">
+                            {% if item.sourceTitle and config.showSourceTitle %}
+                                {{ item.sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %}
+                            {% endif %}
+                            {% if config.showPublishDate %}
+                                {{ item.publishDate }}:
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                    <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
+                        {{ item.title }}
+                    </div>
+                    {% if config.showDescription %}
+                        <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
+                            {% if config.truncDescription %}
+                                {{ item.description | truncate(config.lengthDescription) }}
+                            {% else %}
+                                {{ item.description }}
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <div>
+            {% if (config.showSourceTitle and sourceTitle) or config.showPublishDate %}
+                <div class="newsfeed-source light small dimmed">
+                    {% if sourceTitle and config.showSourceTitle %}
+                        {{ sourceTitle }}{% if config.showPublishDate %}, {% else %}: {% endif %}
+                    {% endif %}
+                    {% if config.showPublishDate %}
+                        {{ publishDate }}:
+                    {% endif %}
+                </div>
+            {% endif %}
+            <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
+                {{ title }}
             </div>
-        {% endif %}
-        <div class="newsfeed-title bright medium light{{ ' no-wrap' if not config.wrapTitle }}">
-            {{ title }}
+            {% if config.showDescription %}
+                <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
+                    {% if config.truncDescription %}
+                        {{ description | truncate(config.lengthDescription) }}
+                    {% else %}
+                        {{ description }}
+                    {% endif %}
+                </div>
+            {% endif %}
         </div>
-        {% if config.showDescription %}
-            <div class="newsfeed-desc small light{{ ' no-wrap' if not config.wrapDescription }}">
-                {% if config.truncDescription %}
-                    {{ description | truncate(config.lengthDescription) }}
-                {% else %}
-                    {{ description }}
-                {% endif %}
-            </div>
-        {% endif %}
-    </div>
+    {% endif %}
 {% elseif error %}
     <div class="small dimmed">
         {{ "MODULE_CONFIG_ERROR" | translate({MODULE_NAME: "Newsfeed", ERROR: error}) | safe }}