https://www.xxxlutz-dasradio.at/dependencies/classes/NewsView/NewsView.js

1class NewsView extends HTMLElement
2{
3   constructor(body)
4   {
5      super();
6      this._body = body;
7   }
8   connectedCallback()
9   {
10      NewsCache.getSpecific(this._body.id).then(news =>
11      {
12         this.innerHTML = `
13            <a href="/aktuell">
14               <regular-icon type="arrow-left" color="purple"></regular-icon>
15            </a>
16            <div class="news-container">
17               <img src="${news.img ? news.img : ""}" alt="Artikel Illustration" onError="this.src = '/images/fallback/fallback-16x9.png'"/>
18               <div class="info-container">
19                  <span class="date">${news.ts ? new Date(news.ts * 1000).toLocaleDateString() : "&nbsp;"}</span>
20                  <div class="title">${news.title}</div>
21               </div>
22            </div>
23            <a class="action" href="/aktuell/${news.next_slug}">
24               <span class="read">Nächster Artikel</span>
25            </a>
26         `;
27         this.querySelector('.info-container').append(new CustomHTML({body: news.html}));
28         this.querySelector(".action").addEventListener("click", () =>
29         {
30            let event = new Event("NewsView.next");
31            event.articleId = news.nextID;
32            document.dispatchEvent(event);
33         });
34      }).catch(error =>
35      {
36         this.remove();
37         throw error;
38      });
39   }
40   disconnectedCallback()
41   {
42      this.innerHTML = "";
43   }
44   static build(news)
45   {
46      let element = new NewsView(news.body);
47      if(news.id)
48      {
49         element.id = news.id;
50      }
51      return element;
52   }
53}
54customElements.define("news-view", NewsView);