Make popup settings vertical tabs "sticky"

[marklchaves]

Describe the feature request

Right now, the Triggers tab is the default active tab after every page load even if I'm actively on the Targeting, Display, Close, or Advanced tabs.

Use case

It'd be super nice to have Popup Maker remember the active tab so I can verify my settings changes look good without having to manually go back where I was just before saving or reloading the page.

Example screenshots (if any)

Screencast: https://share.wppopupmaker.com/9ZuQ52wL

The demo is a proof of concept written mostly in plain JavaScript using the browser session storage API. I can port it to jQuery for my next sprint.

In a future sprint, we can add support for the horizontal tabs.

[danieliser]

@marklchaves I don't know how many times I've thought of doing this, but was in the middle of something else already. YES!!, it needs to work like that.

[marklchaves]

@danieliser sounds good! I've got the horizontal tabs working in my dev. I'll jump back on this shortly to port to jQuery and keep you posted 😌

[danieliser]

Also post your vanilla JS here before you rewrite. We are slowly moving away from jQuery.

[marklchaves]

Instructions for installing the sticky tab code

1. Go to the branch https://github.com/PopupMaker/Popup-Maker/tree/975-popup-settings-sticky-vertical-horizontal-tabs
2. Copy assets/js/sticky-module.js to your test env
3. Edit your test env's assets/js/admin-popup-editor.js
4. Insert import { makeTabsSticky } from "./sticky-module.js"; at the top of the admin-popup-editor.js file
5. Insert makeTabsSticky(); right after line 297 in admin-popup-editor.js
6. Minify admin-popup-editor.js
7. Add the PHP filter hook below to your chile theme functions.php or use a code snippets plugin.

function add_type_attribute($tag, $handle, $src) {
    if ( 'pum-admin-popup-editor' !== $handle ) {
        return $tag;
    }
    // Add the original ID and the type attributes.
    $tag = '<script id="pum-admin-popup-editor-js" type="module" src="' . esc_url( $src ) . '"></script>';
    return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);