Jump to content

Widget:UPDateOnline: Difference between revisions

From Iskomunidad
← Older editNewer 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
Line 13: Line 13:
             <img id="update-online-image"
             <img id="update-online-image"
                 src=""
                 src=""
                 alt="">
                 alt=""
                style="display:none;">
         </div>
         </div>


Line 50: Line 51:


     /*
     /*
     * Get the latest UPDate Online article.
     * Get the latest UPDate Online article
     */
     */


Line 60: Line 61:
     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) {
                throw new Error(
                    'No UPDate Online article found'
                );
            }




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


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


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


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


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


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


        /*
            document.getElementById(
        * --------------------------------
                'update-online-excerpt'
        * ARTICLE LINK
            ).innerHTML =
        * --------------------------------
                post.excerpt.rendered;
        */


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


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


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


        var date = new Date(post.date);


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


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


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


        var temp =
            /*
            document.createElement('div');
            * --------------------------------
            * FIND THE FIRST IMAGE AFTER
            * THE FIRST NON-EMPTY PARAGRAPH
            * --------------------------------
            */


        temp.innerHTML =
            var article =
            post.content.rendered;
                document.createElement('div');


            article.innerHTML =
                post.content.rendered;


        /*
        * Find the first paragraph
        */


        var firstParagraph =
            /*
            temp.querySelector('p');
            * Find all paragraphs
            */


            var paragraphs =
                article.querySelectorAll('p');


        var firstImage = null;


            var firstParagraph = null;


        if (firstParagraph) {


             /*
             /*
             * Look through everything that
             * Find the first paragraph
             * comes AFTER the first paragraph.
             * containing actual text
             */
             */


             var current =
             for (
                 firstParagraph.nextElementSibling;
                var i = 0;
                i < paragraphs.length;
                i++
            ) {
 
                if (
                    paragraphs[i]
                        .textContent
                        .trim()
                        .length > 0
                 ) {
 
                    firstParagraph =
                        paragraphs[i];
 
                    break;
                }
            }
 


            /*
            * Find all images
            */


             while (current) {
             var images =
                article.querySelectorAll('img');


                /*
                * Check whether this element
                * itself contains an image.
                */


                 if (
            var selectedImage = null;
                     current.tagName &&
 
                     current.tagName.toLowerCase() === 'img'
 
            /*
            * Find the first image that occurs
            * AFTER the first paragraph
            */
 
            if (firstParagraph) {
 
                 for (
                     var j = 0;
                    j < images.length;
                     j++
                 ) {
                 ) {


                     firstImage =
                     var image =
                         current;
                         images[j];
 
 
                    var position =
                        firstParagraph.compareDocumentPosition(
                            image
                        );
 
 
                    /*
                    * 4 means the image is
                    * following the paragraph
                    */


                     break;
                     if (
                        position &
                        Node.DOCUMENT_POSITION_FOLLOWING
                    ) {
 
                        selectedImage =
                            image;


                        break;
                    }
                 }
                 }
            }
            /*
            * --------------------------------
            * DISPLAY THE IMAGE
            * --------------------------------
            */


            if (selectedImage) {


                 /*
                 /*
                 * Check for an image inside
                 * WordPress normally uses src,
                 * this element.
                * but check several possibilities
                 * for future articles.
                 */
                 */


                 var image =
                 var imageUrl =
                     current.querySelector('img');
                     selectedImage.getAttribute('src') ||
                    selectedImage.getAttribute('data-src') ||
                    selectedImage.getAttribute('data-lazy-src') ||
                    selectedImage.getAttribute('data-original');
 
 
                /*
                * If there is no src, try srcset
                */


                if (!imageUrl) {


                if (image) {
                    var srcset =
                        selectedImage.getAttribute('srcset') ||
                        selectedImage.getAttribute('data-srcset');


                    firstImage =
                        image;


                     break;
                     if (srcset) {


                }
                        /*
                        * Take the largest image
                        * from the srcset.
                        */


                        var sources =
                            srcset.split(',');


                current =
                    current.nextElementSibling;
            }
        }


                        var lastSource =
                            sources[sources.length - 1]
                                .trim();


        /*
        * --------------------------------
        * DISPLAY THE IMAGE
        * --------------------------------
        */


        // Find the first image AFTER the opening paragraph
                        imageUrl =
var temp = document.createElement('div');
                            lastSource.split(' ')[0];
temp.innerHTML = post.content.rendered;
                    }
                }


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


// Find the first paragraph that actually contains text
                /*
for (var i = 0; i < paragraphs.length; i++) {
                * Make sure the image URL is
    if (paragraphs[i].textContent.trim().length > 0) {
                * absolute.
        firstParagraph = paragraphs[i];
                */
        break;
    }
}


var selectedImage = null;
                if (imageUrl) {


if (firstParagraph) {
                    if (
                        imageUrl.indexOf('http://') !== 0 &&
                        imageUrl.indexOf('https://') !== 0
                    ) {


    // Look at all paragraphs and images in document order
                        imageUrl =
    var elements = temp.querySelectorAll('p, img');
                            new URL(
    var passedFirstParagraph = false;
                                imageUrl,
                                'https://upd.edu.ph'
                            ).href;
                    }


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


        var element = elements[i];
                    var outputImage =
                        document.getElementById(
                            'update-online-image'
                        );


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


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


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


    var imageUrl =
                    outputImage.alt =
        selectedImage.getAttribute('src') ||
                        selectedImage.getAttribute('alt') ||
        selectedImage.getAttribute('data-src') ||
                        post.title.rendered;
        selectedImage.getAttribute('data-lazy-src');


    if (imageUrl) {
        var outputImage =
            document.getElementById('update-online-image');


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


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




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


        document.getElementById(
            document.getElementById(
            'update-online-loading'
                'update-online-loading'
        ).style.display =
            ).style.display =
            'none';
                'none';




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


    })
        })




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


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


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


        console.error(error);
            console.error(error);


    });
        });


})();
})();

Revision as of 23:25, 6 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=70879"