Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open new tab instead of redirect #39

Closed
fleshmanj opened this issue Oct 12, 2024 · 2 comments
Closed

Open new tab instead of redirect #39

fleshmanj opened this issue Oct 12, 2024 · 2 comments

Comments

@fleshmanj
Copy link

If you're interested, I am willing to add the feature. Otherwise, it's still great as is.

@dadatuputi
Copy link
Owner

Yeah this isn't a bad move @fleshmanj. Go ahead and make a PR and I'll review it. My only concern is the pop-up loading modal is a pet of mine, and I want it to remain.

The logic for it is in search.js:

  const my_modal = new bootstrap.Modal(document.getElementById('exit-modal'), {focus: false});
  $("#link-list a").on('click', function(event) {
    $('#exit-modal .modal-header .title').text($(this).prop('title'));
    $('#exit-modal .link').text($(this).prop('href'));
    my_modal.toggle();
  });

I'm thinking for UX:

  1. User clicks a link, modal toggles/appears
  2. Slight delay, like 1000-2000ms (new tab is still loading)
  3. Switch focus to new window, while closing modal

We'll need to check for popup blocking, like:

    // Open window in background
    const newWindow = window.open(url, '_blank', 'noopener');
    if (newWindow) {
        // Ensure the new window stays in background by focusing back on current window
        window.focus();
        
        // After delay, switch to new window and close modal
        setTimeout(() => {
            newWindow.focus();
            my_modal.hide();
        }, 2000);
    } else {
        // In case popup was blocked
        $('#exit-modal .link').text('Please allow popups to open ' + url);
    }

And ideally close the modal when clicking outside the modal in case it gets stuck.

@dadatuputi
Copy link
Owner

If you want to test and build locally, you just need to:

  1. npm install
  2. npm run dev
  3. jekyll serve

You do need node and jekyll (ruby) installed. I use WSL on a windows machine personally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants