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
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>


<div class="update-news" 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">
         <div class="update-news-image">
             <img id="update-online-image"
             <img class="update-online-image"
                 src=""
                 src=""
                 alt="">
                 alt=""
                style="display:none;">
         </div>
         </div>


        <!-- Article information -->
         <div class="update-news-content">
         <div class="update-news-content">


             <div class="update-online-date"
             <div class="update-online-date"></div>
                id="update-online-date">
            </div>


             <h2 class="update-online-title"
             <h2 class="update-online-title"></h2>
                id="update-online-title">
            </h2>


             <div class="update-online-excerpt"
             <div class="update-online-excerpt"></div>
                id="update-online-excerpt">
            </div>


             <a class="update-online-link"
             <a class="update-online-link"
              id="update-online-link"
               href=""
               href=""
               target="_blank"
               target="_blank"
Line 50: Line 42:


     /*
     /*
     * Get the latest UPDate Online article.
     * --------------------------------
    * 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 57: Line 110:
         '?categories=4&per_page=1';
         '?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();
            return response.json();


    })
        })


    .then(function (posts) {


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


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




        /*
            var post =
        * --------------------------------
                posts[0];
        * TITLE
        * --------------------------------
        */


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


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


        /*
            title.innerHTML =
        * --------------------------------
                post.title.rendered;
        * EXCERPT
        * --------------------------------
        */


        document.getElementById(
            'update-online-excerpt'
        ).innerHTML =
            post.excerpt.rendered;


            /*
            * --------------------------------
            * EXCERPT
            * --------------------------------
            */


        /*
            excerpt.innerHTML =
        * --------------------------------
                post.excerpt.rendered;
        * ARTICLE LINK
        * --------------------------------
        */


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


            /*
            * --------------------------------
            * ARTICLE LINK
            * --------------------------------
            */


        /*
            link.href =
        * --------------------------------
                post.link;
        * DATE
        * --------------------------------
        */


        var date = new Date(post.date);


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


            var articleDate =
                new Date(post.date);


        /*
        * --------------------------------
        * FIND FIRST IMAGE AFTER
        * THE FIRST PARAGRAPH
        * --------------------------------
        */


        var temp =
            dateElement.textContent =
            document.createElement('div');
                articleDate.toLocaleDateString(
                    'en-US',
                    {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    }
                );


        temp.innerHTML =
            post.content.rendered;


            /*
            * --------------------------------
            * ARTICLE CONTENT
            * --------------------------------
            */


        /*
            var article =
        * Find the first paragraph
                document.createElement('div');
        */
 
        var firstParagraph =
            temp.querySelector('p');




        var firstImage = null;
            article.innerHTML =
                post.content.rendered;


        if (firstParagraph) {


             /*
             /*
             * Look through everything that
             * --------------------------------
             * comes AFTER the first paragraph.
             * FIND FIRST PARAGRAPH
            * --------------------------------
             */
             */


             var current =
             var paragraphs =
                 firstParagraph.nextElementSibling;
                 article.querySelectorAll('p');




             while (current) {
             var firstParagraph =
                null;


                 /*
 
                * Check whether this element
            for (
                * itself contains an image.
                 var i = 0;
                */
                i < paragraphs.length;
                i++
            ) {


                 if (
                 if (
                     current.tagName &&
                     paragraphs[i]
                    current.tagName.toLowerCase() === 'img'
                        .textContent
                        .trim() !== ''
                 ) {
                 ) {


                     firstImage =
                     firstParagraph =
                         current;
                         paragraphs[i];


                     break;
                     break;
                }


                 }
            }
 
 
            /*
            * --------------------------------
            * FIND FIRST IMAGE AFTER
            * FIRST PARAGRAPH
            * --------------------------------
            */
 
            var selectedImage =
                 null;
 
 
            if (firstParagraph) {
 
                var images =
                    article.querySelectorAll('img');




                 /*
                 for (
                * Check for an image inside
                    var j = 0;
                * this element.
                    j < images.length;
                */
                    j++
                ) {


                var image =
                    var position =
                    current.querySelector('img');
                        firstParagraph.compareDocumentPosition(
                            images[j]
                        );




                if (image) {
                    if (
                        position &
                        Node.DOCUMENT_POSITION_FOLLOWING
                    ) {


                    firstImage =
                        selectedImage =
                        image;
                            images[j];


                    break;
                        break;
                    }


                 }
                 }


                current =
                    current.nextElementSibling;
             }
             }
        }




        /*
            /*
        * --------------------------------
            * --------------------------------
        * DISPLAY THE IMAGE
            * DISPLAY IMAGE
        * --------------------------------
            * --------------------------------
        */
            */
 
            if (selectedImage) {


        // Find the first image AFTER the opening paragraph
                var imageUrl =
var temp = document.createElement('div');
                    selectedImage.getAttribute(
temp.innerHTML = post.content.rendered;
                        'src'
                    );


var paragraphs = temp.querySelectorAll('p');
var firstParagraph = null;


// Find the first paragraph that actually contains text
                if (!imageUrl) {
for (var i = 0; i < paragraphs.length; i++) {
    if (paragraphs[i].textContent.trim().length > 0) {
        firstParagraph = paragraphs[i];
        break;
    }
}


var selectedImage = null;
                    imageUrl =
                        selectedImage.getAttribute(
                            'data-src'
                        );


if (firstParagraph) {
                }


    // Look at all paragraphs and images in document order
    var elements = temp.querySelectorAll('p, img');
    var passedFirstParagraph = false;


    for (var i = 0; i < elements.length; i++) {
                if (!imageUrl) {


        var element = elements[i];
                    imageUrl =
                        selectedImage.getAttribute(
                            'data-lazy-src'
                        );


        if (element === firstParagraph) {
                }
            passedFirstParagraph = true;
            continue;
        }


        if (
            passedFirstParagraph &&
            element.tagName.toLowerCase() === 'img' &&
            !firstParagraph.contains(element)
        ) {
            selectedImage = element;
            break;
        }
    }
}


// Put the image into our widget
                if (imageUrl) {
if (selectedImage) {


    var imageUrl =
                    image.src =
        selectedImage.getAttribute('src') ||
                        imageUrl;
        selectedImage.getAttribute('data-src') ||
        selectedImage.getAttribute('data-lazy-src');


    if (imageUrl) {
                    image.alt =
        var outputImage =
                        selectedImage.getAttribute(
            document.getElementById('update-online-image');
                            'alt'
                        ) ||
                        post.title.rendered;


        outputImage.src = imageUrl;
                    image.style.display =
        outputImage.alt =
                        'block';
            selectedImage.getAttribute('alt') ||
            post.title.rendered;


        outputImage.style.display = 'block';
                }
    }
}


            }


        /*
        * --------------------------------
        * SHOW ARTICLE
        * --------------------------------
        */


        document.getElementById(
            /*
            'update-online-loading'
            * --------------------------------
        ).style.display =
            * SHOW CONTENT
            'none';
            * --------------------------------
            */


            loading.style.display =
                'none';


        document.getElementById(
             content.style.display =
             'update-online-content'
                'block';
        ).style.display =
            'flex';


    })
        })




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


    .catch(function (error) {
        .catch(function (error) {


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


        console.error(error);
            loading.textContent =
                'Unable to load the latest UPDate Online article.';


    });
        });


})();
})();
Line 339: 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}}


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