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

hover anchor links in HTML: https://github.com/metanorma/metanorma-og… #578

Merged
merged 6 commits into from
May 6, 2024
22 changes: 22 additions & 0 deletions lib/isodoc/base_style/reset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -199,3 +199,25 @@ table.rouge-line-table pre {
overflow-x: visible;
font-size: 100%;
}

a.header{color:inherit;text-decoration:none}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.
Colon after property should be followed by one space
Declaration should be terminated by a semicolon
Opening curly brace { should be preceded by one space

a.header:hover{color:#a53221}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.
Colon after property should be followed by one space
Color literals like #a53221 should only be used in variable declarations; they should be referred to via variable everywhere else.
Declaration should be terminated by a semicolon
Opening curly brace { should be preceded by one space

a.header:visited{color:inherit;text-decoration:none}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.
Colon after property should be followed by one space
Declaration should be terminated by a semicolon
Opening curly brace { should be preceded by one space

a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

! should be preceded by a space, and should not be followed by a space
!important should not be used
Avoid qualifying class selectors with an element.
Colon after property should be followed by one space
Declaration should be terminated by a semicolon
Opening curly brace { should be preceded by one space
Properties should be ordered display, font-weight, margin-left, position, text-align, text-decoration, visibility, width, z-index

a.anchor::before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.
Colon after property should be followed by one space
Declaration should be terminated by a semicolon
Opening curly brace { should be preceded by one space
Properties should be ordered content, display, font-size, padding-top
.1 should be written with a leading zero as 0.1
.85 should be written with a leading zero as 0.85

h1>a.anchor:hover,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid qualifying class selectors with an element.

h2>a.anchor:hover,
h3>a.anchor:hover,
h4>a.anchor:hover,
h5>a.anchor:hover,
h6>a.anchor:hover,
.inline-header>a.anchor:hover,
h1:hover>a.anchor,
h2:hover>a.anchor,
h3:hover>a.anchor,
h4:hover>a.anchor,
h5:hover>a.anchor,
h6:hover>a.anchor,
.inline-header:hover>a.anchor{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opening curly brace { should be preceded by one space

visibility:visible;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colon after property should be followed by one space
Line should be indented 2 spaces, but was indented 0 spaces

}
2 changes: 1 addition & 1 deletion lib/isodoc/function/section_titles.rb
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ def clausedelimspace(_node, out)
end

def inline_header_title(out, node, title)
out.span class: "zzMoveToFollowing" do |s|
out.span class: "zzMoveToFollowing inline-header" do |s|
s.b do |b|
title&.children&.each { |c2| parse(c2, b) }
clausedelimspace(node, out) if /\S/.match?(title&.text)
Expand Down
27 changes: 23 additions & 4 deletions lib/isodoc/html_function/postprocess.rb
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,26 @@ def html5(doc)

def html_cleanup(html)
html = term_header(html_footnote_filter(html_preface(htmlstyle(html))))
html = footnote_format(footnote_backlinks(html_toc(html)))
html = footnote_format(footnote_backlinks(html))
html = mathml(html_list_clean(remove_placeholder_paras(html)))
sourcecode_cleanup(html)
html_toc(heading_anchors(sourcecode_cleanup(html)))
end

def heading_anchors(html)
html.xpath("//h1 | //h2 | //h3 | //h4 | //h5 | //h6 | //h7 | //h8 "\
"//span[@class = 'inline-header']").each do |h|
h.at("./ancestor::div[@id='toc']") and next
div = h.xpath("./ancestor::div[@id]")
div.empty? and next
heading_anchor(h, div[-1]["id"])
end
html
end

def heading_anchor(hdr, id)
hdr.children = <<~HTML.strip
<a class='anchor' href='##{id}'/><a class='header' href='##{id}'>#{hdr.children.to_xml}</a>
HTML
end

def sourcecode_cleanup(html)
Expand All @@ -52,7 +69,7 @@ def remove_placeholder_paras(html)

def html_list_clean(html)
html.xpath("//ol/div | //ul/div").each do |div|
li = div&.xpath("./preceding-sibling::li")&.last ||
li = div.xpath("./preceding-sibling::li")&.last ||
div.at("./following-sibling::li")
div.parent = li
end
Expand Down Expand Up @@ -92,7 +109,6 @@ def image_suffix(img)
type = img["mimetype"]&.sub(%r{^[^/*]+/}, "")
matched = /\.(?<suffix>[^. \r\n\t]+)$/.match img["src"]
type and !type.empty? and return type

!matched.nil? and matched[:suffix] and return matched[:suffix]
"png"
end
Expand All @@ -111,6 +127,9 @@ def term_header(docxml)
%w(h1 h2 h3 h4 h5 h6 h7 h8).each do |h|
docxml.xpath("//p[@class = 'TermNum'][../#{h}]").each do |p|
p.name = "h#{h[1].to_i + 1}"
id = p["id"]
p["id"] = "_#{UUIDTools::UUID.random_create}"
p.wrap("<div id='#{id}'></div>")
end
end
docxml
Expand Down
4 changes: 3 additions & 1 deletion lib/isodoc/html_function/postprocess_cover.rb
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,9 @@ def html_intro(docxml)
def html_toc_entry(level, header)
content = header.at("./following-sibling::p" \
"[@class = 'variant-title-toc']") || header
%(<li class="#{level}"><a href="##{header['id']}">\
id = header.at(".//a[@class = 'anchor']/@href")&.text&.sub(/^#/, "") ||
header["id"]
%(<li class="#{level}"><a href="##{id}">\
#{header_strip(content)}</a></li>)
end

Expand Down
4 changes: 2 additions & 2 deletions lib/isodoc/presentation_function/sourcecode.rb
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@ def sourcecode_table_to_elem(elem, tokens)
end

def source_lex(elem)
lexer = (Rouge::Lexer.find(elem["lang"] || "plaintext") ||
Rouge::Lexer.find("plaintext"))
lexer = Rouge::Lexer.find(elem["lang"] || "plaintext") ||
Rouge::Lexer.find("plaintext")
l = Rouge::Lexers::Escape.new(start: "{^^{", end: "}^^}", lang: lexer)
source = to_xml(elem.children).gsub(/</, "{^^{<").gsub(/>/, ">}^^}")
l.lang.reset!
Expand Down
4 changes: 2 additions & 2 deletions spec/isodoc/footnotes_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@
</div>
<br />
<div class="Section3" id="">
<h1 class="IntroTitle">Introduction</h1>
<h1 class="IntroTitle"><a class="anchor" href="#"/> <a class="header" href="#">Introduction</a></h1>
</div>
</main>
OUTPUT
Expand Down Expand Up @@ -305,7 +305,7 @@
</div>
<br />
<div class="Section3" id="">
<h1 class="IntroTitle">Introduction</h1>
<h1 class="IntroTitle"><a class="anchor" href="#"/><a class="header" href="#">Introduction</a></h1>
</div>
</main>
OUTPUT
Expand Down
38 changes: 19 additions & 19 deletions spec/isodoc/postproc_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -415,14 +415,14 @@
<div class="prefatory-section">
/* an empty html intro page */
<ul id="toc-list"/>
<div id="toc"><ul><li class="h1"><a href="#_"> Antaŭparolo</a></li></ul></div>
<div id="toc"><ul><li class="h1"><a href="#fwd"> Antaŭparolo</a></li></ul></div>
</div>
<br/>
<main class="main-section">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<br/>
<div id="fwd">
<h1 class="ForewordTitle" id="_">Antaŭparolo</h1>
<h1 class="ForewordTitle" id="_"><a class="anchor" href="#fwd"/><a class="header" href="#fwd">Antaŭparolo</a></h1>
<div class="Note">
<p>  These results are based on a study carried out on three different types of kernel.</p>
</div>
Expand All @@ -438,16 +438,16 @@
IsoDoc::HtmlConvert.new({ htmlintropage: "spec/assets/htmlintro.html" })
.convert("test", <<~INPUT, false)
<iso-standard xmlns="http://riboseinc.com/isoxml">
<preface><foreword displayorder="1"><title>Foreword</title>
<preface><foreword displayorder="1" id="fwd"><title>Foreword</title>
<variant-title type="toc">FORVORT</variant-title>
</foreword></preface>
<sections>
<clause displayorder="2"><title>First Clause</title>
<clause><title>First Subclause</title>
<clause displayorder="2" id="clA"><title>First Clause</title>
<clause id="clB"><title>First Subclause</title>
<variant-title type="toc">SUBCLOZ</variant-title>
</clause>
</clause>
<clause displayorder="3"><title>Second Clause</title><clause><title>Subclause</title></clause></clause>
<clause displayorder="3" id="clC"><title>Second Clause</title><clause id="clD"><title>Subclause</title></clause></clause>
</sections>
</iso-standard>
INPUT
Expand All @@ -458,19 +458,19 @@
<div id="toc">
<ul>
<li class="h1">
<a href="#_"> FORVORT</a>
<a href="#fwd"> FORVORT</a>
</li>
<li class="h1">
<a href="#_"> First Clause</a>
<a href="#clA"> First Clause</a>
</li>
<li class="h2">
<a href="#_"> SUBCLOZ</a>
<a href="#clB"> SUBCLOZ</a>
</li>
<li class="h1">
<a href="#_"> Second Clause</a>
<a href="#clC"> Second Clause</a>
</li>
<li class="h2">
<a href="#_"> Subclause</a>
<a href="#clD"> Subclause</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -509,15 +509,15 @@
expect(xmlpp(html)).to be_equivalent_to xmlpp(<<~OUTPUT)
<main xmlns:epub="epub" class="main-section"><button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div id="A">
<h1>Clause 4</h1>
<h1><a class="anchor" href="#A"/><a class="header" href="#A">Clause 4</a></h1>
<a class='FootnoteRef' href='#fn:3' id='fnref:1'>
<sup>1</sup>
</a>
<div id="N">
<h2>Introduction to this<a class='FootnoteRef' href='#fn:2' id='fnref:2'><sup>2</sup></a></h2>
<h2><a class="anchor" href="#N"/><a class="header" href="#N">Introduction to this<a class='FootnoteRef' href='#fn:2' id='fnref:2'><sup>2</sup></a></a></h2>
</div>
<div id="O">
<h2>Clause 4.2</h2>
<h2><a class="anchor" href="#O"/><a class="header" href="#O">Clause 4.2</a></h2>
<p>A<a class='FootnoteRef' href='#fn:2'><sup>2</sup></a></p>
</div>
</div>
Expand Down Expand Up @@ -662,7 +662,7 @@
output = <<~OUTPUT
<main class="main-section"><button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div id="_clause">
<h1>Clause</h1>
<h1><a class="anchor" href="#_clause"></a><a class="header" href="#_clause">Clause</a></h1>
<p id="_20514f5a-9f86-454e-b6ce-927f65ba6441">
<span class="stem"><math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi>
Expand Down Expand Up @@ -742,7 +742,7 @@
output = <<~OUTPUT
<main class="main-section"><button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div id="_clause">
<h1>Clause</h1>
<h1><a class="anchor" href="#_clause"></a><a class="header" href="#_clause">Clause</a></h1>
<p id="_20514f5a-9f86-454e-b6ce-927f65ba6441">
<span class="stem"><math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle mathvariant="sans-serif">
Expand Down Expand Up @@ -998,9 +998,9 @@
</iso-standard>
INPUT
expect(File.exist?("test.html")).to be true
html = File.read("test.html")
expect(html).to match(%r{<h2 class="TermNum" id="paddy1">1\.1\.</h2>})
expect(html).to match(%r{<h2 class="TermNum" id="paddy">1\.2\.</h2>})
html = strip_guid(File.read("test.html"))
expect(html).to include(%{<div id="paddy1"><h2 class="TermNum" id="_"><a class="anchor" href="#paddy1"></a><a class="header" href="#paddy1">1\.1\.</a></h2>})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line is too long. [161/80]

expect(html).to include(%{<div id="paddy"><h2 class="TermNum" id="_"><a class="anchor" href="#paddy"></a><a class="header" href="#paddy">1\.2\.</a></h2>})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line is too long. [158/80]

end

it "does not lose HTML escapes in postprocessing" do
Expand Down
6 changes: 3 additions & 3 deletions spec/isodoc/section_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<h2>Introduction</h2>
</div>
<div id='O'>
<span class='zzMoveToFollowing'>
<span class='zzMoveToFollowing inline-header'>
<b>Clause 4.2&#160; </b>
</span>
</div>
Expand Down Expand Up @@ -110,7 +110,7 @@
<h2>Introduction</h2>
</div>
<div id='O'>
<span class='zzMoveToFollowing'>
<span class='zzMoveToFollowing inline-header'>
<b>
Clause 4.2
<span style='mso-tab-count:1'>&#160; </span>
Expand Down Expand Up @@ -1896,7 +1896,7 @@
<h2>1.1.&#160; Introduction</h2>
</div>
<div id="O">
<span class="zzMoveToFollowing"><b>1.2.&#160; Clause 4.2&#160; </b></span>
<span class="zzMoveToFollowing inline-header"><b>1.2.&#160; Clause 4.2&#160; </b></span>
<p>ABC</p>
</div>
</div>
Expand Down
Loading