Redmine

.wiki-toc-sidebar ul.toc a.is-active {

  background-color: var(--oc-blue-1);

  color: var(--oc-blue-9);

  border-radius: 2px;

  box-shadow: 0 0 0 2px var(--oc-blue-1);

}

/* Sidebar TOC: keep the rules scoped after the sidebar's list styles. */

.wiki-toc-sidebar { clear: both; overflow-wrap: anywhere; }

.wiki-toc-sidebar-controls { display: flex; justify-content: flex-end; flex-shrink: 0; gap: 4px; padding: 4px 8px; }

.wiki-toc-sidebar .wiki-toc-button {

  background: none;

  border: 0;

  box-shadow: none;

  color: var(--oc-blue-8);

  cursor: pointer;

  font: inherit;

  min-inline-size: 28px;

  min-block-size: 28px;

  padding: 2px 6px;

}

.wiki-toc-sidebar .wiki-toc-button:hover { color: var(--oc-red-9); }

.wiki-toc-sidebar .wiki-toc-button:focus-visible { outline: 2px solid var(--oc-blue-8); outline-offset: 1px; }

.wiki-toc-sidebar .wiki-toc-button svg { vertical-align: middle; }

.flyout-menu .wiki-toc-sidebar .wiki-toc-button { color: inherit; }

#sidebar .wiki-toc-sidebar ul.toc,

.flyout-menu .wiki-toc-sidebar ul.toc { display: block; margin: 0; padding: 8px; }

#sidebar .wiki-toc-sidebar ul.toc ul,

.flyout-menu .wiki-toc-sidebar ul.toc ul { margin: 0; padding: 0; }

#sidebar .wiki-toc-sidebar ul.toc li,

.flyout-menu .wiki-toc-sidebar ul.toc li { list-style-type: none; }

#sidebar .wiki-toc-sidebar ul.toc li li,

.flyout-menu .wiki-toc-sidebar ul.toc li li { margin-inline-start: 1em; }

@media screen and (min-width: 900px) {

  #wrapper:has(.wiki-toc-sidebar) { overflow: clip; }

  #sidebar:has(.wiki-toc-sidebar) { display: flex; flex-direction: column; }

  #sidebar:has(.wiki-toc-sidebar) #sidebar-wrapper { flex: 1; min-block-size: 0; }

  .wiki-toc-sidebar {

    display: flex;

    flex-direction: column;

    position: sticky;

    top: 10px;

    max-block-size: calc(100vh - 20px);

    margin-block-end: 14px;

  }

  .wiki-toc-sidebar-content { min-block-size: 0; overflow-y: auto; }

}

    @wiki_toc_sidebar = nil if options[:toc_sidebar]

    if @parsed_headings.any? || options[:toc_sidebar]

      replace_toc(text, @parsed_headings, options)

  TOC_RE = /<p>\{\{((<|&lt;)|(>|&gt;))?toc(\(sidebar\))?\}\}<\/p>/i unless const_defined?(:TOC_RE)

  def replace_toc(text, headings, options={})

    has_headings = headings.any?

    text.gsub!(TOC_RE) do |match|

      left_align, right_align, sidebar = $2, $3, $4

      next match if sidebar && (!options[:toc_sidebar] || left_align || right_align)

      next match if !sidebar && !has_headings

          label = sidebar ? CGI.escapeHTML(item) : item

          out << "<a href=\"##{anchor}\">#{label}</a>"

        if sidebar

          # Only markup built here, with escaped labels, is trusted.

          @wiki_toc_sidebar ||= out.html_safe

          ''

        else

          out

        end

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

  scrollToTop() {

    window.scrollTo({ top: 0, behavior: "instant" });

  }

  scrollToBottom() {

    window.scrollTo({ top: document.scrollingElement.scrollHeight, behavior: "instant" });

  }

  connect() {

    const content = document.querySelector("#content .wiki-page");

    if (!content) return;

    const anchors = new Map(

      Array.from(content.querySelectorAll("a[name], [id]"), anchor =>

        [anchor.getAttribute("name") || anchor.id, anchor])

    );

    this.items = Array.from(this.element.querySelectorAll('ul.toc a[href^="#"]'))

      .map(link => {

        const fragment = link.getAttribute("href").slice(1);

        let name;

        try { name = decodeURIComponent(fragment); } catch { name = fragment; }

        return { link, anchor: anchors.get(fragment) || anchors.get(name) };

      }).filter(item => item.anchor);

    this.scheduleUpdate = () => {

      if (this.frame) return;

      this.frame = requestAnimationFrame(() => {

        this.frame = null;

        this.updateCurrentHeading();

      });

    };

    window.addEventListener("scroll", this.scheduleUpdate, { passive: true });

    window.addEventListener("resize", this.scheduleUpdate);

    window.addEventListener("hashchange", this.scheduleUpdate);

    this.scheduleUpdate();

  }

  disconnect() {

    window.removeEventListener("scroll", this.scheduleUpdate);

    window.removeEventListener("resize", this.scheduleUpdate);

    window.removeEventListener("hashchange", this.scheduleUpdate);

    if (this.frame) cancelAnimationFrame(this.frame);

    this.frame = null;

    this.items?.forEach(({ link }) => {

      link.classList.remove("is-active");

      link.removeAttribute("aria-current");

    });

  }

  updateCurrentHeading() {

    let active = null;

    for (const item of this.items) {

      if (item.anchor.getBoundingClientRect().top <= 10) active = item.link;

    }

    for (const { link } of this.items) {

      link.classList.toggle("is-active", link === active);

      if (link === active) link.setAttribute("aria-current", "location");

      else link.removeAttribute("aria-current");

    }

  }

}

        :toc_sidebar => local_assigns.fetch(:toc_sidebar, false),

<% if @wiki_toc_sidebar.present? -%>

  <div class="wiki wiki-toc-sidebar" data-controller="wiki-sidebar-toc">

    <div class="wiki-toc-sidebar-controls">

      <%= button_tag :type => 'button', :class => 'wiki-toc-button', :title => l(:button_scroll_to_top),

                     :aria => {:label => l(:button_scroll_to_top)},

                     :data => {:action => 'wiki-sidebar-toc#scrollToTop'} do %>

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"

             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">

          <path d="m7 13 5-5 5 5m-10 5 5-5 5 5" />

        </svg>

      <% end %>

      <%= button_tag :type => 'button', :class => 'wiki-toc-button', :title => l(:button_scroll_to_bottom),

                     :aria => {:label => l(:button_scroll_to_bottom)},

                     :data => {:action => 'wiki-sidebar-toc#scrollToBottom'} do %>

        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"

             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">

          <path d="m7 6 5 5 5-5m-10 5 5 5 5-5" />

        </svg>

      <% end %>

    </div>

    <div class="wiki-toc-sidebar-content">

      <%= @wiki_toc_sidebar %>

    </div>

  </div>

<% end -%>

<%= render(:partial => "wiki/content", :locals => {:content => @content, :toc_sidebar => true}) %>

  button_scroll_to_top: Scroll to top

  button_scroll_to_bottom: Scroll to bottom

  button_scroll_to_top: 最上部へ

  button_scroll_to_bottom: 最下部へ

  def test_sidebar_toc_remains_literal_outside_wiki

    with_settings :text_formatting => 'textile' do

      record = Issue.find(1)

      record.update!(:description => "{{toc(sidebar)}}\n\nh1. Heading")

      get :show, :params => {:id => record.id}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

    end

  end

  def test_sidebar_toc_remains_literal_outside_wiki

    with_settings :text_formatting => 'textile' do

      record = News.find(1)

      record.update!(:description => "{{toc(sidebar)}}\n\nh1. Heading")

      get :show, :params => {:id => record.id}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

    end

  end

  def test_sidebar_toc_remains_literal_in_issue_preview

    @request.session[:user_id] = 2

    with_settings :text_formatting => 'textile' do

      post :issue, :params => {:project_id => 1, :text => "{{toc(sidebar)}}\n\nh1. Heading"}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

    end

  end

  def test_sidebar_toc_remains_literal_outside_wiki

    with_settings :text_formatting => 'textile' do

      record = Version.find(3)

      record.update!(:description => "{{toc(sidebar)}}\n\nh1. Heading")

      get :show, :params => {:id => record.id}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

      get :index, :params => {:project_id => record.project_id}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

    end

  end

  def test_show_sidebar_toc_between_sidebar_and_wiki_menu

    @request.session[:user_id] = 2

    with_settings :text_formatting => 'textile' do

      page = WikiPage.find(1)

      page.content.update!(:text => "{{toc(sidebar)}}\n\nh1. Main\n\nh2. Child")

      page.add_watcher User.find(2)

      sidebar = page.wiki.pages.build(:title => 'Sidebar')

      sidebar.content = WikiContent.new(:text => "h3. Sidebar\n\n{{toc(sidebar)}}")

      sidebar.save!

      get :show, :params => {:project_id => 1, :id => page.title}

      assert_response :success

      assert_select '#sidebar-wrapper > .wiki + .wiki-toc-sidebar + h3', 1

      assert_select '.wiki-toc-sidebar a[href="#Main"]', 1

      assert_select '.wiki-toc-sidebar li li a', :text => 'Child'

      assert_select '#content .wiki-page', :text => /\{\{toc\(sidebar\)\}\}/, :count => 0

      assert_select '#watchers', 1

    end

  end

  def test_show_sidebar_toc_for_previous_version_without_sidebar_page

    with_settings :text_formatting => 'textile' do

      page = WikiPage.find(1)

      page.content.update!(:text => "{{toc(sidebar)}}\n\nh1. Previous")

      version = page.content.version

      page.content.update!(:text => 'New content')

      get :show, :params => {:project_id => 1, :id => page.title, :version => version}

      assert_response :success

      assert_select '#sidebar-wrapper > .wiki-toc-sidebar + h3', 1

      assert_select '.wiki-toc-sidebar a[href="#Previous"]', 1

    end

  end

  def test_show_without_sidebar_toc_or_headings_has_no_container

    with_settings :text_formatting => 'textile' do

      page = WikiPage.find(1)

      ['h1. Heading', '{{toc(sidebar)}}'].each do |text|

        page.content.update!(:text => text)

        get :show, :params => {:project_id => 1, :id => page.title}

        assert_response :success

        assert_select '.wiki-toc-sidebar', 0

      end

    end

  end

  def test_sidebar_toc_is_not_enabled_for_html_export

    Role.anonymous.add_permission! :export_wiki_pages

    with_settings :text_formatting => 'textile' do

      page = WikiPage.find(1)

      page.content.update!(:text => "{{toc(sidebar)}}\n\nh1. Heading")

      get :show, :params => {:project_id => 1, :id => page.title, :format => 'html'}

      assert_response :success

      assert_includes response.body, '{{toc(sidebar)}}'

      assert_select '.wiki-toc-sidebar', 0

    end

  end

  def test_sidebar_toc_with_both_formatters

    {'textile' => "h1. 日本語 & Heading\n\nh2. Child\n\nh1. 日本語 & Heading",

     'common_mark' => "# 日本語 & Heading\n\n## Child\n\n# 日本語 & Heading"}.each do |format, headings|

      with_settings :text_formatting => format do

        result = textilizable("{{toc(sidebar)}}\n\n{{toc(sidebar)}}\n\n{{toc}}\n\n#{headings}", :toc_sidebar => true)

        assert_not_includes result, '{{toc(sidebar)}}'

        assert_select_in result, 'ul.toc', 1

        assert @wiki_toc_sidebar.html_safe?

        assert_select_in @wiki_toc_sidebar, 'ul.toc', 1

        assert_select_in @wiki_toc_sidebar, 'li li a', :text => 'Child'

        toc = Nokogiri::HTML.fragment(@wiki_toc_sidebar)

        anchors = Nokogiri::HTML.fragment(result).css('a[name]').pluck('name')

        assert_equal anchors, toc.css('a').map {|a| a['href'].delete_prefix('#')}

        assert_equal 3, anchors.uniq.size

      end

    end

  end

  def test_sidebar_toc_is_opt_in_and_does_not_change_inline_alignment

    with_settings :text_formatting => 'textile' do

      result = textilizable("{{toc(sidebar)}}\n\nh1. Heading")

      assert_includes result, '{{toc(sidebar)}}'

      assert_nil @wiki_toc_sidebar

      result = textilizable("{{toc(sidebar)}}\n\n{{<toc}}\n\n{{>toc}}\n\nh1. Heading", :toc_sidebar => true)

      assert_select_in result, 'ul.toc.left', 1

      assert_select_in result, 'ul.toc.right', 1

    end

  end

  def test_sidebar_toc_resets_only_for_enabled_rendering_including_blank_content

    with_settings :text_formatting => 'textile' do

      textilizable("{{toc(sidebar)}}\n\nh1. Main", :toc_sidebar => true)

      saved = @wiki_toc_sidebar

      textilizable("{{toc(sidebar)}}\n\nh1. Sidebar")

      assert_equal saved, @wiki_toc_sidebar

      textilizable('', :toc_sidebar => true)

      assert_nil @wiki_toc_sidebar

      result = textilizable("{{toc(sidebar)}}\n\n{{toc}}", :toc_sidebar => true)

      assert_includes result, '{{toc}}'

      assert_not_includes result, '{{toc(sidebar)}}'

      assert_nil @wiki_toc_sidebar

      result = textilizable("{{toc(sidebar)}}\n\nh5. Too deep", :toc_sidebar => true)

      assert_not_includes result, '{{toc(sidebar)}}'

      assert_nil @wiki_toc_sidebar

    end

  end

  def test_sidebar_toc_preserves_code_and_escapes_heading_content

    {'textile' => "<pre>{{toc(sidebar)}}</pre>\n\nh1. &lt;script&gt;alert(1)&lt;/script&gt;",

     'common_mark' => "```\n{{toc(sidebar)}}\n```\n\n# <script>alert(1)</script>"}.each do |format, text|

      with_settings :text_formatting => format do

        result = textilizable(text, :toc_sidebar => true)

        assert_includes result, '{{toc(sidebar)}}'

        assert_nil @wiki_toc_sidebar

        textilizable("{{toc(sidebar)}}\n\n#{text}", :toc_sidebar => true)

        assert_select_in @wiki_toc_sidebar, 'script', 0

        assert_select_in @wiki_toc_sidebar, 'a', :text => '<script>alert(1)</script>'

      end

    end

  end

  def test_sidebar_toc_include_preserves_existing_heading_collection

    with_settings :text_formatting => 'textile' do

      @project = Project.find(1)

      page = @project.wiki.pages.find_by!(:title => 'Another_page')

      page.content.update!(:text => "{{toc(sidebar)}}\n\nh1. Included")

      result = textilizable("{{include(Another_page)}}\n\n{{toc(sidebar)}}\n\nh1. Main", :toc_sidebar => true)

      assert_select_in @wiki_toc_sidebar, 'a', :text => 'Main'

      anchors = Nokogiri::HTML.fragment(result).css('a[name]').pluck('name')

      links = Nokogiri::HTML.fragment(@wiki_toc_sidebar).css('a').map {|a| a['href'].delete_prefix('#')}

      assert_equal anchors, links

    end

  end

# frozen_string_literal: true

require_relative '../application_system_test_case'

class WikiSidebarTocSystemTest < ApplicationSystemTestCase

  def setup

    super

    @original_formatting = Setting.text_formatting

    Setting.text_formatting = 'textile'

    wiki_page = WikiPage.find(1)

    text = +"{{toc(sidebar)}}\n\nIntroduction\n\n"

    text << (1..60).map {|i| "h#{i.between?(2, 3) ? i : 1}. Heading #{i}\n\n" + ("Paragraph content.\n\n" * 20)}.join

    wiki_page.content.update!(:text => text)

    page.current_window.resize_to(1280, 900)

    visit '/projects/ecookbook/wiki/CookBook_documentation'

    assert_selector '.wiki-toc-sidebar[data-controller="wiki-sidebar-toc"]'

  end

  def teardown

    Setting.text_formatting = @original_formatting

    super

  end

  def test_current_heading_follows_scroll_click_and_back_scroll

    assert_no_selector '.wiki-toc-sidebar a.is-active'

    [1, 2, 10, 1].each do |number|

      page.execute_script("document.getElementsByName(arguments[0])[0].scrollIntoView()", "Heading-#{number}")

      assert_selector ".wiki-toc-sidebar a.is-active[aria-current='location'][href='#Heading-#{number}']"

      assert_selector '.wiki-toc-sidebar a.is-active', :count => 1

    end

    find('.wiki-toc-sidebar a[href="#Heading-3"]').click

    assert_selector '.wiki-toc-sidebar a.is-active[href="#Heading-3"]'

    page.execute_script('window.scrollTo(0, 0)')

    assert_no_selector '.wiki-toc-sidebar a.is-active'

  end

  def test_sticky_internal_scroll_and_mobile_breakpoint

    page.current_window.resize_to(1280, 800)

    page.execute_script('window.scrollTo(0, 1200)')

    assert_selector '.wiki-toc-sidebar a.is-active'

    metrics = page.evaluate_script(<<~JS)

      (() => {

        const toc = document.querySelector('.wiki-toc-sidebar');

        const content = toc.querySelector('.wiki-toc-sidebar-content');

        return {

          position: getComputedStyle(toc).position,

          top: toc.getBoundingClientRect().top,

          height: toc.clientHeight, contentHeight: content.clientHeight, scrollHeight: content.scrollHeight,

          viewport: innerHeight

        };

      })()

    JS

    assert_equal 'sticky', metrics['position']

    assert_in_delta 10, metrics['top'], 2

    assert_operator metrics['scrollHeight'], :>, metrics['contentHeight']

    assert_operator metrics['height'], :<=, metrics['viewport'] - 20

    controls_top = page.evaluate_script("document.querySelector('.wiki-toc-sidebar-controls').getBoundingClientRect().top")

    page.execute_script("document.querySelector('.wiki-toc-sidebar-content').scrollTop = 150")

    assert_operator page.evaluate_script("document.querySelector('.wiki-toc-sidebar-content').scrollTop"), :>, 0

    assert_in_delta controls_top, page.evaluate_script("document.querySelector('.wiki-toc-sidebar-controls').getBoundingClientRect().top"), 1

    page.current_window.resize_to(900, 800)

    assert_equal 'sticky', page.evaluate_script("getComputedStyle(document.querySelector('.wiki-toc-sidebar')).position")

    page.current_window.resize_to(899, 800)

    assert_equal 'static', page.evaluate_script("getComputedStyle(document.querySelector('.wiki-toc-sidebar')).position")

    assert_equal 'none', page.evaluate_script("getComputedStyle(document.querySelector('.wiki-toc-sidebar')).maxBlockSize")

    assert_selector '.flyout-menu .wiki-toc-sidebar', :visible => :all

  end

  def test_scroll_controls_reach_page_ends_and_keep_the_fragment

    page.execute_script("window.location.hash = 'Heading-2'")

    assert_selector '.wiki-toc-sidebar a.is-active[href="#Heading-2"]'

    find('.wiki-toc-sidebar-controls [data-action="wiki-sidebar-toc#scrollToBottom"]').click

    assert_in_delta page.evaluate_script('document.scrollingElement.scrollHeight - innerHeight'),

                    page.evaluate_script('scrollY'), 1

    find('.wiki-toc-sidebar-controls [data-action="wiki-sidebar-toc#scrollToTop"]').click

    assert_in_delta 0, page.evaluate_script('scrollY'), 1

    assert_equal '#Heading-2', page.evaluate_script('location.hash')

  end

  def test_all_levels_remain_visible_without_toggle_padding

    [1, 2, 3].each do |number|

      assert_selector ".wiki-toc-sidebar a[href='#Heading-#{number}']"

    end

    metrics = page.evaluate_script(<<~JS)

      (() => {

        const links = [1, 2, 3].map(n =>

          document.querySelector('.wiki-toc-sidebar a[href="#Heading-' + n + '"]'));

        return links.map(link => ({

          left: link.getBoundingClientRect().left,

          font: parseFloat(getComputedStyle(link).fontSize),

          padding: parseFloat(getComputedStyle(link.parentElement).paddingInlineStart)

        }));

      })()

    JS

    metrics.each {|metric| assert_in_delta 0, metric['padding'], 0.1}

    [1, 2].each do |index|

      assert_in_delta metrics[index]['font'], metrics[index]['left'] - metrics[index - 1]['left'], 1

    end

  end

end