Widget:UPDateOnline: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<div class="your-news-class" id="update-online-news"> | <div class="your-news-class" id="update-online-news"> | ||
| Line 8: | Line 9: | ||
<div id="update-online-content" style="display:none;"> | <div id="update-online-content" style="display:none;"> | ||
< | <!-- News image --> | ||
<img id="update-online-image" | |||
src="" | |||
alt="" | |||
style="display:none;"> | |||
< | <!-- Date --> | ||
<div id="update-online-date"></div> | |||
< | <!-- Title --> | ||
<h2 id="update-online-title"></h2> | |||
< | <!-- Excerpt --> | ||
<div id="update-online-excerpt"></div> | |||
<!-- Read more --> | |||
<a id="update-online-link" | |||
href="" | href="" | ||
target="_blank" | target="_blank" | ||
| Line 25: | Line 35: | ||
</div> | </div> | ||
<script> | <script> | ||
(function () { | (function () { | ||
/* | |||
'https://upd.edu.ph/wp-json/wp/v2/posts?categories=4&per_page=1' | * Get the newest UPDate Online article. | ||
) | * | ||
* _embed=true tells WordPress to include | |||
* information about the featured image. | |||
*/ | |||
var api = | |||
'https://upd.edu.ph/wp-json/wp/v2/posts' + | |||
'?categories=4&per_page=1&_embed=true'; | |||
fetch(api) | |||
.then(function (response) { | .then(function (response) { | ||
if (!response.ok) { | |||
throw new Error( | |||
'Unable to retrieve UPDate Online' | |||
); | |||
} | |||
return response.json(); | return response.json(); | ||
}) | }) | ||
| Line 40: | Line 69: | ||
if (!posts || !posts.length) { | if (!posts || !posts.length) { | ||
throw new Error('No article found'); | throw new Error( | ||
'No UPDate Online article found' | |||
); | |||
} | } | ||
var post = posts[0]; | var post = posts[0]; | ||
/* | |||
document.getElementById('update-online-title').innerHTML = | /* | ||
* ----------------------------- | |||
* TITLE | |||
* ----------------------------- | |||
*/ | |||
document.getElementById( | |||
'update-online-title' | |||
).innerHTML = | |||
post.title.rendered; | post.title.rendered; | ||
/* | |||
document.getElementById('update-online-excerpt').innerHTML = | /* | ||
* ----------------------------- | |||
* EXCERPT | |||
* ----------------------------- | |||
*/ | |||
document.getElementById( | |||
'update-online-excerpt' | |||
).innerHTML = | |||
post.excerpt.rendered; | post.excerpt.rendered; | ||
/* | |||
document.getElementById('update-online-link').href = | /* | ||
* ----------------------------- | |||
* ARTICLE LINK | |||
* ----------------------------- | |||
*/ | |||
document.getElementById( | |||
'update-online-link' | |||
).href = | |||
post.link; | post.link; | ||
/* | |||
/* | |||
* ----------------------------- | |||
* DATE | |||
* ----------------------------- | |||
*/ | |||
var date = new Date(post.date); | var date = new Date(post.date); | ||
document.getElementById('update-online-date').textContent = | document.getElementById( | ||
date.toLocaleDateString('en-US', { | 'update-online-date' | ||
).textContent = | |||
date.toLocaleDateString( | |||
'en-US', | |||
{ | |||
year: 'numeric', | |||
month: 'long', | |||
day: 'numeric' | |||
} | |||
); | |||
/* | |||
* ----------------------------- | |||
* FEATURED IMAGE | |||
* ----------------------------- | |||
* | |||
* WordPress places the featured | |||
* image information inside: | |||
* | |||
* post._embedded['wp:featuredmedia'] | |||
*/ | |||
if ( | |||
post._embedded && | |||
post._embedded['wp:featuredmedia'] && | |||
post._embedded['wp:featuredmedia'].length | |||
) { | |||
var media = | |||
post._embedded['wp:featuredmedia'][0]; | |||
/* | |||
* Get the image URL. | |||
* | |||
* source_url = original image | |||
*/ | |||
if (media.source_url) { | |||
var image = | |||
document.getElementById( | |||
'update-online-image' | |||
); | |||
image.src = | |||
media.source_url; | |||
image.alt = | |||
post.title.rendered; | |||
/* | image.style.display = | ||
document.getElementById('update-online-loading').style.display = | 'block'; | ||
} | |||
} | |||
/* | |||
* ----------------------------- | |||
* SHOW ARTICLE | |||
* ----------------------------- | |||
*/ | |||
document.getElementById( | |||
'update-online-loading' | |||
).style.display = | |||
'none'; | 'none'; | ||
document.getElementById('update-online-content').style.display = | |||
document.getElementById( | |||
'update-online-content' | |||
).style.display = | |||
'block'; | 'block'; | ||
}) | }) | ||
/* | |||
* ----------------------------- | |||
* ERROR HANDLING | |||
* ----------------------------- | |||
*/ | |||
.catch(function (error) { | .catch(function (error) { | ||
document.getElementById('update-online-loading').innerHTML = | document.getElementById( | ||
'update-online-loading' | |||
).innerHTML = | |||
'Unable to load the latest UPDate Online article.'; | 'Unable to load the latest UPDate Online article.'; | ||
| Line 87: | Line 219: | ||
})(); | })(); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||