Jump to content

Widget:UPDateOnline: Difference between revisions

From Iskomunidad
← Older edit
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
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>


<div class="your-news-class" id="update-online-news">
<div class="update-news">


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


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


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


        <!-- Date -->
         <div class="update-news-content">
         <div id="update-online-date"></div>


        <!-- Title -->
            <div class="update-online-date"></div>
        <h2 id="update-online-title"></h2>


        <!-- Excerpt -->
            <h2 class="update-online-title"></h2>
        <div id="update-online-excerpt"></div>


        <!-- Read more -->
            <div class="update-online-excerpt"></div>
        <a id="update-online-link"
 
          href=""
            <a class="update-online-link"
          target="_blank"
              href=""
          rel="noopener noreferrer">
              target="_blank"
            Read more →
              rel="noopener noreferrer">
         </a>
                Read more →
            </a>
 
         </div>


     </div>
     </div>
Line 41: Line 42:


     /*
     /*
     * Get the newest UPDate Online article.
     * --------------------------------
     *
    * Find THIS widget instance
     * _embed=true tells WordPress to include
    * --------------------------------
     * information about the featured image.
    */
 
    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' +
         'https://upd.edu.ph/wp-json/wp/v2/posts' +
         '?categories=4&per_page=1&_embed=true';
         '?categories=4&per_page=1';
 


    /*
    * --------------------------------
    * Retrieve latest article
    * --------------------------------
    */


     fetch(api)
     fetch(api)


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


        if (!response.ok) {
            if (!response.ok) {
            throw new Error(
                throw new Error(
                'Unable to retrieve UPDate Online'
                    'Unable to retrieve UPDate Online'
             );
                );
         }
             }
 
            return response.json();
 
        })
 
 
         .then(function (posts) {
 
            if (!posts || posts.length === 0) {
                throw new Error(
                    'No UPDate Online article found'
                );
            }
 
 
            var post =
                posts[0];
 
 
            /*
            * --------------------------------
            * TITLE
            * --------------------------------
            */
 
            title.innerHTML =
                post.title.rendered;
 
 
            /*
            * --------------------------------
            * EXCERPT
            * --------------------------------
            */
 
            excerpt.innerHTML =
                post.excerpt.rendered;
 
 
            /*
            * --------------------------------
            * ARTICLE LINK
            * --------------------------------
            */
 
            link.href =
                post.link;
 
 
            /*
            * --------------------------------
            * DATE
            * --------------------------------
            */


        return response.json();
            var articleDate =
                new Date(post.date);


    })


    .then(function (posts) {
            dateElement.textContent =
                articleDate.toLocaleDateString(
                    'en-US',
                    {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    }
                );


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


        var post = posts[0];
            /*
            * --------------------------------
            * ARTICLE CONTENT
            * --------------------------------
            */


            var article =
                document.createElement('div');


        /*
        * -----------------------------
        * TITLE
        * -----------------------------
        */


        document.getElementById(
             article.innerHTML =
             'update-online-title'
                post.content.rendered;
        ).innerHTML =
            post.title.rendered;




        /*
            /*
        * -----------------------------
            * --------------------------------
        * EXCERPT
            * FIND FIRST PARAGRAPH
        * -----------------------------
            * --------------------------------
        */
            */


        document.getElementById(
            var paragraphs =
            'update-online-excerpt'
                article.querySelectorAll('p');
        ).innerHTML =
            post.excerpt.rendered;




        /*
            var firstParagraph =
        * -----------------------------
                null;
        * ARTICLE LINK
        * -----------------------------
        */


        document.getElementById(
            'update-online-link'
        ).href =
            post.link;


            for (
                var i = 0;
                i < paragraphs.length;
                i++
            ) {


        /*
                if (
        * -----------------------------
                    paragraphs[i]
        * DATE
                        .textContent
        * -----------------------------
                        .trim() !== ''
        */
                ) {


        var date = new Date(post.date);
                    firstParagraph =
                        paragraphs[i];


        document.getElementById(
                     break;
            'update-online-date'
        ).textContent =
            date.toLocaleDateString(
                'en-US',
                {
                     year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                 }
                 }
            );


            }
            /*
            * --------------------------------
            * FIND FIRST IMAGE AFTER
            * FIRST PARAGRAPH
            * --------------------------------
            */
            var selectedImage =
                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;
        * -----------------------------
                    }
        * 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.
             * --------------------------------
             *
             * DISPLAY IMAGE
             * source_url = original image
             * --------------------------------
             */
             */


             if (media.source_url) {
             if (selectedImage) {


                 var image =
                 var imageUrl =
                     document.getElementById(
                     selectedImage.getAttribute(
                         'update-online-image'
                         'src'
                     );
                     );


                image.src =
                    media.source_url;


                 image.alt =
                 if (!imageUrl) {
                    post.title.rendered;
 
                    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';
 
                }


                image.style.display =
                    'block';
             }
             }
         }
 
 
            /*
            * --------------------------------
            * SHOW CONTENT
            * --------------------------------
            */
 
            loading.style.display =
                'none';
 
            content.style.display =
                'block';
 
         })




         /*
         /*
         * -----------------------------
         * --------------------------------
         * SHOW ARTICLE
         * ERROR HANDLING
         * -----------------------------
         * --------------------------------
         */
         */


         document.getElementById(
         .catch(function (error) {
            'update-online-loading'
        ).style.display =
            'none';


            console.error(
                'UPDate Online Widget:',
                error
            );


        document.getElementById(
             loading.textContent =
             'update-online-content'
                'Unable to load the latest UPDate Online article.';
        ).style.display =
            'block';


    })
        });
 
})();
</script>


</includeonly>


    /*
    * -----------------------------
    * ERROR HANDLING
    * -----------------------------
    */


    .catch(function (error) {
<noinclude>


        document.getElementById(
== UPDate Online Widget ==
            'update-online-loading'
        ).innerHTML =
            'Unable to load the latest UPDate Online article.';


        console.error(error);
Displays the latest UPDate Online article
and the first image appearing after the
opening paragraph.


    });
=== Usage ===


})();
<pre>
</script>
{{#widget:UPDateOnline}}
</pre>


</includeonly>
</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"