search

docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.47k stars 5.67k forks source link

Anchors not working inside of tabs when using History routerMode #2162

Closed AntoineB9 closed 10 months ago

AntoineB9 commented 1 year ago

Bug Report

Steps to reproduce

  1. Use "routerMode=history"
  2. Have docsify tabs and ToC plug-in (https://github.com/mrpotatoes/docsify-toc) installed.
  3. Create a page with multiple tabs and set up headers inside.
  4. Click on the headers of the non-selected tabs in your Table of Content.

What is current behaviour

  1. The page scroll is functional but the tab selection does not change.

What is the expected behaviour

  1. The page scroll is functional and the tab selection changes to the one containing the selected header.

Other relevant information

Further exploration

We tried to develop a plugin to be able to link to anchors (headers) in tab and to make the anchors work inside the ToC, before knowing it was caused by routerMode. We found out that the script worked when you opened a link ; You were redirected to the right anchor but, the ToC kept on scrolling to the "right section" without changing the tab selection. We tried to add the script as a plug-in, by adding it as a .js file and adding the script at the end of index.html but it did not fix the issue. Same when we tried to add the script directly into index.html with a hook (illustrated below). Here is the code we used in the index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360Suite Documentation</title>
    <link href="/_images/media/favicon.png" rel="icon" sizes="32x32" type="image/png">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
    <meta content="Description" name="description">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport">
    <!-- Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <!-- docsify-themeable styles-->
    <link href="/css/themeable.css" rel="stylesheet" type="text/css">
    <!-- Custom theme stylesheet -->
    <link href="/css/theme-custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- Docsify v4 -->
<!-- Searchbar + Navbar + Sidebar -->
<script>

  function autoScrollToTabAndIds() {
    let current_url = new URL(window.location.href)

    let searchedId = current_url.searchParams.get("id")
    let tab= current_url= current_url.searchParams.get("tab")
    let tabSelected = false
    if (tab) {
      const tabButton = document.querySelector(`.docsify-tabs__tab[data-tab=${tab}]`)
      if (tabButton) {
        // first reset all active
        document.querySelectorAll('.docsify-tabs__tab--active').forEach(n => n.classList.remove("docsify-tabs__tab--active"))
        tabButton.classList.add('docsify-tabs__tab--active')
        tabSelected = true
      }
    }

    if (searchedId) {
      const elementToScroll = document.querySelector(`#${searchedId}`)
      if (elementToScroll) {
        if (!tabSelected) {
          // first reset all active
          document.querySelectorAll('.docsify-tabs__tab--active').forEach(n => n.classList.remove("docsify-tabs__tab--active"))

          const isThereATab = !!document.querySelector(`.docsify-tabs__content #${searchedId}`)
          const tabElement = new Array(...document.querySelectorAll(".docsify-tabs__content")).find(n => !! n.querySelector(`#${searchedId}`))
          document.querySelector(`.docsify-tabs__tab[data-tab="${tabElement.getAttribute('data-tab-content')}"]`).classList.add("docsify-tabs__tab--active")
        }

      elementToScroll.scrollIntoView({behavior: 'smooth'})
      }
    }
  }

  function pluginAutoScrollToTabAndIds(hook) {
    hook.ready(autoScrollToTabAndIds);
  }

  window.$docsify = {
    nameLink: {
      '/fr_FR/': '/fr_FR/',
      '/': '/'
    },
    swagger: {
    cache: true,
    tableWidth: "auto",
      fallback: "en"
  },
    loadSidebar: true,
    routerMode: 'history',
    loadNavbar: true,
    alias: {
      '/en_US/.*/_sidebar.md': '/_sidebar.md',
      '/en_US/.*/_navbar.md': '/_navbar.md',
      '/fr_FR/.*/_sidebar.md': '/fr_FR/_sidebar.md',
      '/fr_FR/.*/_navbar.md': '/fr_FR/_navbar.md',
      '/dist/_sidebar.md': '/_sidebar.md',
      '/dist/_navbar.md': '/_navbar.md'
    },
    'flexibleAlerts': {
      note: {
        label: {
          '/en_US/': 'Note',
          '/fr_FR/': 'Note'
        }
      },
      tip: {
        label: {
          '/en_US/': 'Tip',
          '/fr_FR/': 'Astuce'
        }
      },
      warning: {
        label: {
          '/en_US/': 'Warning',
          '/fr_FR/': 'Avertissement'
        }
      },
      attention: {
        label: {
          '/en_US/': 'Attention',
          '/fr_FR': 'Attention'
        }
      },
       learn: {
        label: 'Learn',

      // localization
        label: {
        '/en_US/': 'What you\'ll learn',
        '/fr_FR/': 'Ce que vous allez apprendre'
      },
        icon: 'fas fa-graduation-cap',
        className: 'note'
    },
      important: {
        label: 'Important',
        label: {
          '/en_US/': 'Important',
          '/fr_FR/': 'Important'
        },
        className: 'warning'
      },
      troubleshooting: {
        label: 'Troubleshooting',
        label: {
          '/en_US/': 'Troubleshooting',
          '/fr_FR/': 'Troubleshooting'
        },
        className: 'warning'
      },
  },
  themeable: {
    readyTransition: true, // default
  },
  toc: {
    scope: '.markdown-section',
    headings: 'h1, h2, h3',
    title: 'Table of Contents',
  },
    auto2top: true,
    name: '360',
    logo: '/_images/media/360Logo.png',
    search: {
      maxAge: 86400000, // Expiration time, the default one day
      paths: 'auto',
      placeholder: { 
        '/fr_FR/' : 'Rechercher...',
        '/en_US/' : 'Search...',
        '/' : 'Search...'
      },
      noData: { 
        '/fr_FR/' : 'Aucun résultat',
        '/en_US/' : 'No results',
        '/' : 'No results'
      },
      depth: 6,
      hideOtherSidebarContent: true, // whether or not to hide other sidebar content
    }
  }
  $docsify.plugins = [].concat(pluginAutoScrollToTabAndIds, $docsify.plugins || []);
</script>
    <script src="/_resources/docsify.js" type="application/javascript"></script>
  <script src="/_resources/pagescroll.js" type="application/javascript"></script>
    <script src="/_resources/search.js" type="application/javascript"></script>
    <script src="/_resources/themeable.js" type="application/javascript"></script>
    <script src="/_resources/tabs.js" type="application/javascript"></script>
    <script src="/_resources/toc.js" type="application/javascript"></script>
    <script src="/_resources/zoom_image.js" type="application/javascript"></script>
    <script src="/_resources/collapse.js" type="application/javascript"></script>
    <script src="/_resources/alerts.js" type="application/javascript"></script>
    <script src="/_resources/copycode.js" type="application/javascript"></script>
</body>
</html>

Please create a reproducible sandbox

Edit 307qqv236

-> Sandbox : https://codesandbox.io/s/little-voice-4n6gxx

Mention the docsify version in which this bug was not present (if any)

Bug is not present when using "hash" routerMode

trusktr commented 1 year ago

I'm not sure we can fix this if it is a problem with a plugin that isn't in core.'

Can you please provide a working codesandbox?

trusktr commented 1 year ago

You checked the box for Bug does still occur when all/other plugins are disabled?. Are you saying the issue happens also without the toc plugin?

jhildenbiddle commented 10 months ago

This is a plugin-related issue, not a docsify-specific issue. Please recreate the issue in the appropriate plugin repo.