Jump to content

Widget:UPDateOnline: Difference between revisions

From Iskomunidad
IskoAdmin (talk | contribs)
Bots, Bureaucrats, Interface administrators, page-editor, page-maker, Push subscription managers, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, Administrators, Widget editors
518 edits
VisualWikitext
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
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<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 class="update-news">
    <div style="
        font-family:'Playfair Display',Georgia,serif;
        font-size:180%;
        font-weight:bold;
        margin-bottom:15px;
    ">
        UPDate Online
    </div>


    <!-- Loading message -->
     <div class="update-online-loading">
     <div id="update-online-loading">
         Loading latest news...
         Loading latest news...
     </div>
     </div>


     <!-- Article -->
     <div class="update-online-content" style="display:none;">
    <div id="update-online-content" style="display:none;">
 
        <div class="update-news-image">
            <img class="update-online-image"
                src=""
                alt=""
                style="display:none;">
        </div>
 
        <div class="update-news-content">


        <!-- Date -->
            <div class="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"></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"></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"
              href=""
          href="#"
              target="_blank"
          target="_blank"
              rel="noopener noreferrer">
          rel="noopener noreferrer"
                Read more →
          style="
            </a>
              display:inline-block;
              background:#9a7420;
              color:#fff;
              padding:8px 18px;
              text-decoration:none;
              border-radius:3px;
          ">
            Read more →
        </a>


    </div>
        </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>


</div>
</div>


<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'
        );
    /*
    * --------------------------------
    * UPDate Online API
    * --------------------------------
    */


     var api =
     var api =
         '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';
 
 
    /*
    * --------------------------------
    * Retrieve latest article
    * --------------------------------
    */


     fetch(api)
     fetch(api)


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


             if (!response.ok) {
             if (!response.ok) {
Line 103: Line 128:


             return response.json();
             return response.json();
         })
         })


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


             if (!posts || posts.length === 0) {
             if (!posts || posts.length === 0) {
                 throw new Error(
                 throw new Error(
                     'No UPDate Online articles found'
                     'No UPDate Online article found'
                 );
                 );
             }
             }


             var post = posts[0];
 
             var post =
                posts[0];
 
 
            /*
            * --------------------------------
            * TITLE
            * --------------------------------
            */
 
            title.innerHTML =
                post.title.rendered;
 


             /*
             /*
             * Hide loading message
             * --------------------------------
            * EXCERPT
            * --------------------------------
             */
             */
             document.getElementById(
 
                 'update-online-loading'
             excerpt.innerHTML =
            ).style.display = 'none';
                 post.excerpt.rendered;
 


             /*
             /*
             * Show article
             * --------------------------------
            * ARTICLE LINK
            * --------------------------------
             */
             */
             document.getElementById(
 
                 'update-online-content'
             link.href =
            ).style.display = 'block';
                 post.link;
 


             /*
             /*
             * Article title
             * --------------------------------
            * DATE
            * --------------------------------
             */
             */
             document.getElementById(
 
                'update-online-title'
             var articleDate =
            ).innerHTML = post.title.rendered;
                new Date(post.date);
 
 
            dateElement.textContent =
                articleDate.toLocaleDateString(
                    'en-US',
                    {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    }
                );
 


             /*
             /*
             * Article excerpt
             * --------------------------------
            * ARTICLE CONTENT
            * --------------------------------
             */
             */
             document.getElementById(
 
                'update-online-excerpt'
             var article =
             ).innerHTML = post.excerpt.rendered;
                document.createElement('div');
 
 
             article.innerHTML =
                post.content.rendered;
 
 
            /*
            * --------------------------------
            * FIND FIRST PARAGRAPH
            * --------------------------------
            */
 
            var paragraphs =
                article.querySelectorAll('p');
 
 
            var firstParagraph =
                null;
 
 
            for (
                var i = 0;
                i < paragraphs.length;
                i++
            ) {
 
                if (
                    paragraphs[i]
                        .textContent
                        .trim() !== ''
                ) {
 
                    firstParagraph =
                        paragraphs[i];
 
                    break;
                }
 
            }
 


             /*
             /*
             * Article link
             * --------------------------------
            * FIND FIRST IMAGE AFTER
            * FIRST PARAGRAPH
            * --------------------------------
             */
             */
             document.getElementById(
 
                 'update-online-readmore'
             var selectedImage =
            ).href = post.link;
                null;
 
 
            if (firstParagraph) {
 
                 var images =
                    article.querySelectorAll('img');
 
 
                for (
                    var j = 0;
                    j < images.length;
                    j++
                ) {
 
                    var position =
                        firstParagraph.compareDocumentPosition(
                            images[j]
                        );
 
 
                    if (
                        position &
                        Node.DOCUMENT_POSITION_FOLLOWING
                    ) {
 
                        selectedImage =
                            images[j];
 
                        break;
                    }
 
                }
 
            }
 


             /*
             /*
             * Publication date
             * --------------------------------
            * DISPLAY IMAGE
            * --------------------------------
             */
             */
            var date = new Date(post.date);


             document.getElementById(
             if (selectedImage) {
                 'update-online-date'
 
            ).textContent = date.toLocaleDateString(
                var imageUrl =
                'en-US',
                    selectedImage.getAttribute(
                 {
                        'src'
                     year: 'numeric',
                    );
                     month: 'long',
 
                     day: 'numeric'
 
                 if (!imageUrl) {
 
                    imageUrl =
                        selectedImage.getAttribute(
                            'data-src'
                        );
 
                }
 
 
                if (!imageUrl) {
 
                    imageUrl =
                        selectedImage.getAttribute(
                            'data-lazy-src'
                        );
 
                }
 
 
                 if (imageUrl) {
 
                     image.src =
                        imageUrl;
 
                     image.alt =
                        selectedImage.getAttribute(
                            'alt'
                        ) ||
                        post.title.rendered;
 
                     image.style.display =
                        'block';
 
                 }
                 }
             );
 
             }
 
 
            /*
            * --------------------------------
            * SHOW CONTENT
            * --------------------------------
            */
 
            loading.style.display =
                'none';
 
            content.style.display =
                'block';


         })
         })


        .catch(function(error) {


            document.getElementById(
        /*
                'update-online-loading'
        * --------------------------------
            ).innerHTML =
        * ERROR HANDLING
                '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);
        .catch(function (error) {
 
             console.error(
                'UPDate Online Widget:',
                error
            );
 
            loading.textContent =
                'Unable to load the latest UPDate Online article.';


         });
         });
Line 184: Line 378:
})();
})();
</script>
</script>
</includeonly>
</includeonly>


<noinclude>
<noinclude>
== UPDate Online Widget ==
== UPDate Online Widget ==


Displays the latest article from UP Diliman UPDate Online.
Displays the latest UPDate Online article
and the first image appearing after the
opening paragraph.


=== Usage ===
=== Usage ===
Line 196: Line 395:
{{#widget:UPDateOnline}}
{{#widget:UPDateOnline}}
</pre>
</pre>
</noinclude>
</noinclude>

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}}


Retrieved from "https://iskomunidad.upd.edu.ph/index.php?title=Widget:UPDateOnline&oldid=70888"