Widget:UPDateOnline: Difference between revisions
No edit summary |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| 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 51: | Line 42: | ||
/* | /* | ||
* | * -------------------------------- | ||
* 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' | |||
); | |||
/* | |||
* -------------------------------- | |||
* UPDate Online API | |||
* -------------------------------- | |||
*/ | */ | ||
| Line 58: | Line 110: | ||
'?categories=4&per_page=1'; | '?categories=4&per_page=1'; | ||
/* | |||
* -------------------------------- | |||
* Retrieve latest article | |||
* -------------------------------- | |||
*/ | |||
fetch(api) | fetch(api) | ||
| Line 76: | Line 134: | ||
.then(function (posts) { | .then(function (posts) { | ||
if (!posts || | if (!posts || posts.length === 0) { | ||
throw new Error( | throw new Error( | ||
'No UPDate Online article found' | 'No UPDate Online article found' | ||
| Line 83: | Line 141: | ||
var post = posts[0]; | var post = | ||
posts[0]; | |||
| Line 92: | Line 151: | ||
*/ | */ | ||
title.innerHTML = | |||
post.title.rendered; | post.title.rendered; | ||
| Line 104: | Line 161: | ||
*/ | */ | ||
excerpt.innerHTML = | |||
post.excerpt.rendered; | post.excerpt.rendered; | ||
| Line 116: | Line 171: | ||
*/ | */ | ||
link.href = | |||
post.link; | post.link; | ||
| Line 128: | Line 181: | ||
*/ | */ | ||
var | var articleDate = | ||
new Date(post.date); | new Date(post.date); | ||
dateElement.textContent = | |||
articleDate.toLocaleDateString( | |||
'en-US', | 'en-US', | ||
{ | { | ||
| Line 146: | Line 198: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* | * ARTICLE CONTENT | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
| Line 153: | Line 204: | ||
var article = | var article = | ||
document.createElement('div'); | document.createElement('div'); | ||
article.innerHTML = | article.innerHTML = | ||
| Line 159: | Line 211: | ||
/* | /* | ||
* | * -------------------------------- | ||
* FIND FIRST PARAGRAPH | |||
* -------------------------------- | |||
*/ | */ | ||
| Line 166: | Line 220: | ||
var firstParagraph = null; | var firstParagraph = | ||
null; | |||
for ( | for ( | ||
| Line 183: | Line 233: | ||
paragraphs[i] | paragraphs[i] | ||
.textContent | .textContent | ||
.trim() | .trim() !== '' | ||
) { | ) { | ||
| Line 192: | Line 241: | ||
break; | break; | ||
} | } | ||
} | } | ||
/* | /* | ||
* | * -------------------------------- | ||
* FIND FIRST IMAGE AFTER | |||
* FIRST PARAGRAPH | |||
* -------------------------------- | |||
*/ | */ | ||
var | var selectedImage = | ||
null; | |||
if (firstParagraph) { | |||
var images = | |||
article.querySelectorAll('img'); | |||
for ( | for ( | ||
| Line 218: | Line 267: | ||
j++ | j++ | ||
) { | ) { | ||
var position = | var position = | ||
firstParagraph.compareDocumentPosition( | firstParagraph.compareDocumentPosition( | ||
images[j] | |||
); | ); | ||
if ( | if ( | ||
| Line 240: | Line 280: | ||
selectedImage = | selectedImage = | ||
images[j]; | |||
break; | break; | ||
} | } | ||
} | } | ||
} | } | ||
| Line 250: | Line 292: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* DISPLAY | * DISPLAY IMAGE | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
if (selectedImage) { | if (selectedImage) { | ||
var imageUrl = | var imageUrl = | ||
selectedImage.getAttribute( | selectedImage.getAttribute( | ||
'src' | |||
); | |||
if (!imageUrl) { | if (!imageUrl) { | ||
imageUrl = | |||
selectedImage.getAttribute( | selectedImage.getAttribute( | ||
'data-src' | |||
); | |||
} | |||
if (!imageUrl) { | |||
imageUrl = | |||
selectedImage.getAttribute( | |||
'data-lazy-src' | |||
); | |||
} | } | ||
if (imageUrl) { | if (imageUrl) { | ||
image.src = | |||
imageUrl; | imageUrl; | ||
image.alt = | |||
selectedImage.getAttribute( | |||
selectedImage.getAttribute('alt') || | 'alt' | ||
) || | |||
post.title.rendered; | post.title.rendered; | ||
image.style.display = | |||
'block'; | |||
} | } | ||
| Line 346: | Line 345: | ||
/* | /* | ||
* -------------------------------- | * -------------------------------- | ||
* SHOW | * SHOW CONTENT | ||
* -------------------------------- | * -------------------------------- | ||
*/ | */ | ||
loading.style.display = | |||
'none'; | 'none'; | ||
content.style.display = | |||
'block'; | |||
' | |||
}) | }) | ||
| Line 372: | 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 391: | 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 === | ||
Latest revision as of 00:17, 7 October 2026
UPDate Online Widget
Displays the latest UPDate Online article and the first image appearing after the opening paragraph.
Usage
{{#widget:UPDateOnline}}