Jump to content

Widget:UPDateOnline: Difference between revisions

From Iskomunidad
Created page with "<includeonly> <div id="update-online-news" style=" margin: 20px 0; padding: 25px; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); "> <!-- Heading --> <div style=" font-family:'Playfair Display',Georgia,serif; font-size:180%; font-weight:bold; margin-bottom:15px; "> UPDate Online </div> <!-- Loading message --> <div id="update-onl..."
 
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly>
<div id="update-online-news" style="
<div class="your-news-class" id="update-online-news">
    margin: 20px 0;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
">


    <!-- Heading -->
    <div style="
        font-family:'Playfair Display',Georgia,serif;
        font-size:180%;
        font-weight:bold;
        margin-bottom:15px;
    ">
        UPDate Online
    </div>
    <!-- Loading message -->
     <div id="update-online-loading">
     <div id="update-online-loading">
         Loading latest news...
         Loading latest news...
     </div>
     </div>


    <!-- Article -->
     <div id="update-online-content" style="display:none;">
     <div id="update-online-content" style="display:none;">


        <!-- Date -->
         <div class="update-online-date" id="update-online-date"></div>
         <div id="update-online-date" style="
            font-size:90%;
            color:#777;
            margin-bottom:8px;
        "></div>


         <!-- Title -->
         <h2 class="update-online-title" id="update-online-title"></h2>
        <div id="update-online-title" style="
            font-family:'Playfair Display',Georgia,serif;
            font-size:150%;
            font-weight:bold;
            line-height:1.3;
            margin-bottom:10px;
        "></div>


        <!-- Excerpt -->
         <div class="update-online-excerpt" id="update-online-excerpt"></div>
         <div id="update-online-excerpt" style="
            line-height:1.6;
            margin-bottom:15px;
        "></div>


         <!-- Read More -->
         <a class="update-online-link"
        <a id="update-online-readmore"
          id="update-online-link"
           href="#"
           href=""
           target="_blank"
           target="_blank"
           rel="noopener noreferrer"
           rel="noopener noreferrer">
          style="
              display:inline-block;
              background:#9a7420;
              color:#fff;
              padding:8px 18px;
              text-decoration:none;
              border-radius:3px;
          ">
             Read more →
             Read more →
         </a>
         </a>


    </div>
    <!-- More news -->
    <div style="
        margin-top:20px;
        padding-top:15px;
        border-top:1px solid #eee;
    ">
        <a href="https://upd.edu.ph/category/update-online/"
          target="_blank"
          rel="noopener noreferrer"
          style="
              text-decoration:none;
              font-weight:bold;
          ">
            View more UPDate Online news →
        </a>
     </div>
     </div>


Line 89: Line 29:
(function () {
(function () {


     var api =
     fetch(
         'https://upd.edu.ph/wp-json/wp/v2/posts?categories=4&per_page=1';
         'https://upd.edu.ph/wp-json/wp/v2/posts?categories=4&per_page=1'
    )


     fetch(api)
     .then(function (response) {
        return response.json();
    })


        .then(function(response) {
    .then(function (posts) {


            if (!response.ok) {
        if (!posts || !posts.length) {
                throw new Error(
            throw new Error('No article found');
                    'Unable to retrieve UPDate Online'
        }
                );
            }


            return response.json();
        var post = posts[0];
        })


         .then(function(posts) {
         /* Title */
        document.getElementById('update-online-title').innerHTML =
            post.title.rendered;


            if (!posts || posts.length === 0) {
        /* Excerpt */
                throw new Error(
        document.getElementById('update-online-excerpt').innerHTML =
                    'No UPDate Online articles found'
             post.excerpt.rendered;
                );
             }


             var post = posts[0];
        /* Article URL */
        document.getElementById('update-online-link').href =
             post.link;


            /*
        /* Date */
            * Hide loading message
        var date = new Date(post.date);
            */
            document.getElementById(
                'update-online-loading'
            ).style.display = 'none';


            /*
        document.getElementById('update-online-date').textContent =
            * Show article
             date.toLocaleDateString('en-US', {
            */
                year: 'numeric',
            document.getElementById(
                month: 'long',
                'update-online-content'
                day: 'numeric'
             ).style.display = 'block';
            });


            /*
        /* Show article */
            * Article title
        document.getElementById('update-online-loading').style.display =
            */
            'none';
            document.getElementById(
                'update-online-title'
            ).innerHTML = post.title.rendered;


            /*
        document.getElementById('update-online-content').style.display =
            * Article excerpt
            'block';
            */
            document.getElementById(
                'update-online-excerpt'
            ).innerHTML = post.excerpt.rendered;


            /*
    })
            * Article link
            */
            document.getElementById(
                'update-online-readmore'
            ).href = post.link;


            /*
    .catch(function (error) {
            * Publication date
            */
            var date = new Date(post.date);


            document.getElementById(
        document.getElementById('update-online-loading').innerHTML =
                'update-online-date'
            'Unable to load the latest UPDate Online article.';
            ).textContent = date.toLocaleDateString(
                'en-US',
                {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                }
            );


         })
         console.error(error);


        .catch(function(error) {
    });
 
            document.getElementById(
                'update-online-loading'
            ).innerHTML =
                'Unable to load the latest UPDate Online article. ' +
                '<a href="https://upd.edu.ph/category/update-online/" ' +
                'target="_blank">' +
                'Visit UPDate Online</a>.';
 
            console.error(error);
 
        });


})();
})();
</script>
</script>
</includeonly>
</includeonly>
<noinclude>
== UPDate Online Widget ==
Displays the latest article from UP Diliman UPDate Online.
=== Usage ===
<pre>
{{#widget:UPDateOnline}}
</pre>
</noinclude>

Revision as of 23:09, 6 October 2026