Presentation JavaScript for HTML Developers

Home

Build your Beta

Beyond PMF. Your True 1.0

Product Expansion

Product Transformation

Our Work

Our Process

About us

Work Insights

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

Your next read

Cognitive Neuroscience: A Doorway to Better UX Design ?

You developed some HTML pages and provided to the Client. Though the Client is aware...

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

Yogesh

07 Sep, 2017

Let'sTalk

Want to improve your product’s user experience? Let’s start with a simple discovery call.

Thanks for the submission.