arrow right icon

Presentation JavaScript for HTML Developers

Presentation JavaScript for HTML Developers

You developed some HTML pages and provided to the Client. Though the Client is aware that you are just a HTML developer, he/she suggests to write at least some Basic JavaScript code by which the HTML pages can be viewed in a flow. That is where the requirement for Presentational JavaScript is required.

In one of the Projects in Divami, the client requested the same. My first thought was to add anchor tags in HTMLs. So that I can use href attribute and navigate to different pages, but those HTML alterations are just for presentation and should be removed again after final approval. That would be hectic to handle. My second thought was to write JS code for each page separately. Though, this won’t alter the HTML that much (just needed to include external JS script file), we will end up having equal number of JS files and HTML files. This again goes out of hand, if there are a lot of pages to handle (as in my case), then I decided to have a single JS file attached to all HTML pages.

Hmm.. Sounds good but does it work? because there could be a case where there are different pages, few of them having same class names but need to navigate to different pages. In this case, there should be differentiation among same class names in different pages. The only clear visible differentiation is page name itself. So we can use that. Now, to consider same class name between different sections, same page, different navigations, this can be solved using good old CSS selectors which are fortunately available in querySelector and querySelctorAll methods. Hence, the problems related to Presentational JavaScript are fixed.

Here is the code:


(function presentationalJS(){
    // Write the navigations here!!
    let presentationalNavigations = {
        "home": [{
            selector: ".nav-link:first-child",
            redirectTo: "about"
        },{
            selector: ".nav-link:first-child + .nav-link",
            redirectTo: "careers"
        }],
        "about": [{
            selector: ".view-more",
            redirectTo: "people-details/anon"
        }]
    };

    // Config variables
    const baseUrl = "";

    // Don't worry about this code, if you are a HTML Developer
    // But do try to understand 
    function handleBodyClick(e){
        const targetElement   = e.target;
        const pageNavigations = presentationalNavigations[getPageName()];
        if(!pageNavigations) return;     // Aborting further operation if no data available
        const targetObj = pageNavigations.find(    // Fetching the current page's navigation object
            pageNavigation => 
                [...document.body.querySelectorAll(pageNavigation.selector)]
                .some(navElement => navElement === targetElement)
        ) || {};  // returning empty object if no data found
        
        if(targetObj.redirectTo){
            redirectTo(targetObj.redirectTo);
        }
        else if(targetObj.goBack) {
            history.go(Number(`-${targetObj.goBack}`));    // back
        }

        function getPageName(){
            return location.href.match(/([^\/]*)\.html/)[1];   // Get only HTML file name from the url
        }

        function redirectTo(href){
            setTimeout(function(){     // setTimeout to give this function high priority
                let a = document.createElement('a');        // A dummy anchor element to handle redirection
                a.href = baseUrl + href + ".html";          // Assigning a href value
                console.log("redirecting to " + a.href);    // For debugging purpose
                a.click();    // triggering click to redirect to provided href path
            });
        }
    }

    document.body.addEventListener('body', handleBodyClick);  // Registering event
})();

Share
LinkedInFacebookWhatsApp