Widget:UPDateOnline: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<div class="update | <div class="update-news"> | ||
<div | <div class="update-online-loading"> | ||
Loading latest news... | Loading latest news... | ||
</div> | </div> | ||
<div | <div class="update-online-content" style="display:none;"> | ||
<div class="update-news-image"> | <div class="update-news-image"> | ||
<img | <img class="update-online-image" | ||
src="" | src="" | ||
alt="" | alt="" | ||
| Line 17: | Line 16: | ||
</div> | </div> | ||
<div class="update-news-content"> | <div class="update-news-content"> | ||
<div class | <div class="update-online-date"></div> | ||
<h2 class | <h2 class="update-online-title"></h2> | ||
<div class | <div class="update-online-excerpt"></div> | ||
<a class="update-online-link" | <a class="update-online-link" | ||
href="" | href="" | ||
target="_blank" | target="_blank" | ||
| Line 49: | Line 40: | ||
<script> | <script> | ||
(function () { | (function () { | ||
/* | |||
* -------------------------------- | |||
* Find THIS widget instance | |||
* -------------------------------- | |||
*/ | |||
var widgets = | |||
document.querySelectorAll('.update-news'); | |||
var widget = | |||
widgets[widgets.length - 1]; | |||
if (!widget) { | |||
return; | |||
} | |||
/* | |||
* -------------------------------- | |||
* Find elements inside this widget | |||
* -------------------------------- | |||
*/ | |||
var loading = | |||
widget.querySelector( | |||
'.update-online-loading' | |||
); | |||
var content = | |||
widget.querySelector( | |||
'.update-online-content' | |||
); | |||
var image = | |||
widget.querySelector( | |||
'.update-online-image' | |||
); | |||
var title = | |||
widget.querySelector( | |||
'.update-online-title' | |||
); | |||
var excerpt = | |||
widget.querySelector( | |||
'.update-online-excerpt' | |||
); | |||
var link = | |||
widget.querySelector( | |||
'.update-online-link' | |||
); | |||
var dateElement = | |||
widget.querySelector( | |||
'.update-online-date' | |||
); | |||
/* | /* | ||
| Line 60: | Line 110: | ||
'?categories=4&per_page=1'; | '?categories=4&per_page=1'; | ||
/* | |||
* -------------------------------- | |||
* Retrieve latest article | |||
* -------------------------------- | |||
*/ | |||
fetch(api) | fetch(api) | ||
| Line 85: | Line 141: | ||
var post = posts[0]; | var post = | ||
posts[0]; | |||
| Line 94: | Line 151: | ||
*/ | */ | ||
title.innerHTML = | |||
post.title.rendered; | post.title.rendered; | ||
| Line 106: | Line 161: | ||
*/ | */ | ||
excerpt.innerHTML = | |||
post.excerpt.rendered; | post.excerpt.rendered; | ||
| Line 118: | Line 171: | ||
*/ | */ | ||
link.href = | |||
post.link; | post.link; | ||
| Line 130: | Line 181: | ||
*/ | */ | ||
var | var articleDate = | ||
new Date(post.date); | new Date(post.date); | ||
dateElement.textContent = | |||
articleDate.toLocaleDateString( | |||
'en-US', | 'en-US', | ||
{ | { | ||
| Line 149: | Line 198: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* | * ARTICLE CONTENT | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
| Line 163: | Line 212: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* FIND FIRST | * FIND FIRST PARAGRAPH | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
| Line 171: | Line 220: | ||
var firstParagraph = null; | var firstParagraph = | ||
null; | |||
| Line 191: | Line 241: | ||
break; | break; | ||
} | } | ||
} | } | ||
| Line 196: | Line 247: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* FIND | * FIND FIRST IMAGE AFTER | ||
* FIRST PARAGRAPH | |||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
var | var selectedImage = | ||
null; | |||
if (firstParagraph) { | |||
var images = | |||
article.querySelectorAll('img'); | |||
for ( | for ( | ||
| Line 221: | Line 267: | ||
j++ | j++ | ||
) { | ) { | ||
var position = | var position = | ||
firstParagraph.compareDocumentPosition( | firstParagraph.compareDocumentPosition( | ||
images[j] | |||
); | ); | ||
| Line 243: | Line 280: | ||
selectedImage = | selectedImage = | ||
images[j]; | |||
break; | break; | ||
| Line 260: | Line 297: | ||
if (selectedImage) { | if (selectedImage) { | ||
var imageUrl = | var imageUrl = | ||
| Line 270: | Line 303: | ||
); | ); | ||
if (!imageUrl) { | if (!imageUrl) { | ||
| Line 294: | Line 323: | ||
} | } | ||
if (imageUrl) { | if (imageUrl) { | ||
image.src = | |||
imageUrl; | imageUrl; | ||
image.alt = | |||
selectedImage.getAttribute( | selectedImage.getAttribute( | ||
'alt' | 'alt' | ||
| Line 329: | Line 335: | ||
post.title.rendered; | post.title.rendered; | ||
image.style.display = | |||
'block'; | 'block'; | ||
| Line 340: | Line 345: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* SHOW | * SHOW CONTENT | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
loading.style.display = | |||
'none'; | 'none'; | ||
content.style.display = | |||
'flex'; | 'flex'; | ||
}) | }) | ||
| Line 367: | Line 366: | ||
.catch(function (error) { | .catch(function (error) { | ||
console.error( | |||
' | 'UPDate Online Widget:', | ||
). | error | ||
); | |||
loading.textContent = | |||
'Unable to load the latest UPDate Online article.'; | 'Unable to load the latest UPDate Online article.'; | ||
}); | }); | ||
| Line 386: | Line 386: | ||
== UPDate Online Widget == | == UPDate Online Widget == | ||
Displays the latest UPDate Online article and | Displays the latest UPDate Online article | ||
the first image appearing after the opening paragraph. | and the first image appearing after the | ||
opening paragraph. | |||
=== Usage === | === Usage === | ||
Revision as of 23:57, 6 October 2026
UPDate Online Widget
Displays the latest UPDate Online article and the first image appearing after the opening paragraph.
Usage
{{#widget:UPDateOnline}}