Clean up UI of "this is a test"... and other WIP before release

[pombredanne]

For instance:

"this is a test tooltip"

[johnmhoran]

@tdruez @pombredanne Following up on this morning's call and working in my new branch 798-refine-ui, I've removed all traces of jQuery code (with 1 exception noted below) and replaced the empty-form jQuery on the 5 main templates with JS, e.g.:

    function validatePkgForm() {
        var x = document.forms["pkg_form"]["name"].value;
        if (x.trim().length == "") {
            return false;
        }
    }

    function validateVulnForm() {
        var x = document.forms["vuln_form"]["vuln_id"].value;
        if (x.trim().length == "") {
            return false;
        }
    }

However, I now see/recall that the Bulma tabsets on the 2 details pages also use jQuery and no longer work, e.g.,

    $(document).ready(function () {
        $('#tabs li').on('click', function () {
            var tab = $(this).data('tab');

            $('#tabs li').removeClass('is-active');
            $(this).addClass('is-active');

            $('#tab-content div').removeClass('is-active');
            $('div[data-content="' + tab + '"]').addClass('is-active');
        });
    });

I've checked my notes and don't see where I got this code, but evidently not from Bulma, which is CSS-only. What do you suggest we do? Use jQuery just for the tabs? Replace the tabs with some other display?

[tdruez]

https://github.com/nexB/scancode.io/blob/main/scancodeio/static/main.js#L61

[johnmhoran]

I see a codepen example here: https://codepen.io/t7team/pen/ZowdRN. Don't know if it would work for us nor what the license is.

And a youtube video re vanilla JS: https://www.youtube.com/watch?v=jsevCC_nlHc&t=11s

[johnmhoran]

Thank you @tdruez , looking into this now. 👍

[johnmhoran]

and this comes from Bulma's JS even tho Bulma is CSS-only? ;-]

https://bulma.io/lib/main.js?v=202104191409

[johnmhoran]

@tdruez Unfortunately I haven't been able to get the tabs working with this SCIO JS code, perhaps because SCIO creates the Bulma tabs differently than I've created them in VCIO.

[johnmhoran]

Chrome devtools indicated that getAll() was not defined, which taught me that my new main.js file also needed this:

// Utils, available globally

function getAll(selector) {
    var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}

Now I can click the tabs and the tabs change -- but not the tab content. ;-[ So somewhere in this SCIO code there might be code tied to the SCIO (but not VCIO) way the tabsets/tabs are structured. . . .

function setupTabs() {
    const $tabLinks = getAll('.tabs a');

    $tabLinks.forEach(function ($el) {
        $el.addEventListener('click', function (event) {
            const activeLink = document.querySelector('.tabs .is-active');
            const activeTabContent = document.querySelector('.tab-content.is-active');
            const target_id = $el.dataset.target;
            const targetTabContent = document.getElementById(target_id);

            activeLink.classList.remove('is-active');
            $el.parentNode.classList.add('is-active');
            if (activeTabContent) activeTabContent.classList.remove('is-active');
            if (targetTabContent) targetTabContent.classList.add('is-active');
        });
    });
}

[johnmhoran]

@tdruez I've been unable to get the SCIO JS code working with the tabsets on the 2 details pages, package_update.html and vulnerability.html, and am reluctant to re-add the jQuery I just finished removing, so I'm pushing the code as it currently exists with the hope you'll be able to help me resolve this.

All 134 local tests pass and all 5 GH checks pass (for PR 813 there are 9, not 5, GH checks, no idea why the diff).

[johnmhoran]

For the record, earlier today I finished replacing the jQuery with JavaScript, including for the Bulma tabsets, and committed and pushed to #847. Next steps include additional cleanup and work on comments, suggestions and issues from earlier this week.

[johnmhoran]

This has been addressed in several recent pushes to #847