feat: Extend MyFeedElement to support content_html etc. (#31) (#15)

nfreear · Jan 27, 2023 · 8ad3462 · 8ad3462
1 parent 254198d
commit 8ad3462
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,6 +11,8 @@ <h2> Demo Index </h2>
 
   <p> A collection of reusable custom elements (Web Components). </p>
 
+  <my-feed href="../src/feed.json" details="true" class="elem-list" >
+
   <ol>
     <li><a href="my-analytics.html"   >my-analytics</a>
     <li><a href="my-busy-spinner.html">my-busy-spinner</a>
@@ -24,6 +26,8 @@ <h2> Demo Index </h2>
     <li><a href="my-speech.html"      >my-text-to-speech</a>
   </ol>
 
+  </my-feed>
+
 </my-page>
 
 

diff --git a/demo/my-feed.html b/demo/my-feed.html
@@ -4,7 +4,11 @@
 <meta name="robots" content="noindex">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 
+<link rel="stylesheet" href="style/app.css" />
+
 <style>
+  /* https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
+  */
   my-feed::part(a) {
     display: block;
     padding: 2px;

diff --git a/demo/style/app.css b/demo/style/app.css
@@ -1,7 +1,9 @@
 
-@import '../../src/style/my-busy-spinner.css';
+/* @import '../../src/style/my-busy-spinner.css'; */
 
 :root {
+  --my-page-color: #222;
+
   /* <my-star-rating>
   */
   --my-star-rating-max-size: 5rem;
@@ -67,6 +69,20 @@ my-map::part(marker) {
   fill: navy;
 }
 
+my-feed::part(details) {
+  font-size: .95rem;
+  line-height: 1.4;
+}
+
+my-feed::part(sum) {
+  color: #444;
+  font-size: small;
+}
+
+my-feed::part(p) {
+  margin: .4rem 0;
+}
+
 /* The <p> in the <slot> within the Web Component !!
 */
 my-star-rating p {

diff --git a/src/components/MyFeedElement.js b/src/components/MyFeedElement.js
@@ -3,15 +3,15 @@
  *
  * @copyright © Nick Freear, 20-Oct-2022.
  *
- * @see https://codepen.io/nfreear/pen/rNKwoNL
  * @see ../demo/my-feed.html
+ * @see https://codepen.io/nfreear/pen/rNKwoNL
  * @status beta, my blog
  * @since 1.3.0
  */
 
 import MyElement from '../MyElement.js';
 
-const { fetch, Request } = window;
+const { fetch, Request, location } = window;
 
 const RSS_TO_JSON = 'https://api.rss2json.com/v1/api.json?rss_url=';
 const DEFAULT_RSS = 'tojson:http://feeds.bbci.co.uk/news/rss.xml';
@@ -24,12 +24,13 @@ export class MyFeedElement extends MyElement {
   async connectedCallback () {
     const HREF = this.getAttribute('href') || DEFAULT_RSS;
     const INCLUDE = this.getAttribute('include');
+    const OPEN = this.getAttribute('details') === 'open';
 
     const { data, resp, req } = await this._fetchFeed(HREF);
 
     const FILTERED = this._filterItems(data.items, INCLUDE);
 
-    const ITEMS = FILTERED.map(el => this._makeListItem(el));
+    const ITEMS = FILTERED.map(el => this._makeListItem(el, OPEN));
 
     const listElem = document.createElement('ul'); // Was: 'ol'
 
@@ -59,17 +60,20 @@ export class MyFeedElement extends MyElement {
     return filtered;
   }
 
-  _makeListItem (item) {
-    const { guid, link, pubDate, title, url, time, tags } = item;
+  _makeListItem (item, open) {
+    const { guid, link, pubDate, title, url, time, tags, content, content_html } = item; /* eslint-disable-line camelcase */
+    const CONTENT = content || content_html || ''; /* eslint-disable-line camelcase */
     // Be liberal in what we accept - 'link' or 'url'.
     return `<li>
     <a part="a" data-tags="${tags ? tags.join(',') : ''}" data-guid="${guid || ''}"
-       href="${link || url}" title="${pubDate || time}">${title}</a>
+       href="${link || url}" title="${pubDate || time || ''}">${title}</a>
+    <details part="details" ${open ? 'open' : ''}><summary part="sum">More</summary>${CONTENT}
   </li>`;
   }
 
   async _fetchFeed (href) {
     const uri = this._parseUrl(href);
+    // const uri = /\.\.?\/.+/.test(href) ? href : this._parseUrl(href);
     const req = new Request(uri);
     const resp = await fetch(req);
     if (!resp.ok) {
@@ -81,7 +85,8 @@ export class MyFeedElement extends MyElement {
   }
 
   _parseUrl (href) {
-    const PARSED = new URL(href);
+    const BASE = location.href;
+    const PARSED = new URL(href, BASE);
 
     if (PARSED.protocol === 'tojson:') {
       return RSS_TO_JSON + encodeURIComponent(PARSED.pathname);