blacklight/scribe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Display figure captions as margin notes

Browse source 
On a thin viewport like a phone these show up as hidden at first until
the user expands them by interacting with the "writing hand" icon. Each
margin note needs a small bit of markup near it to enable the toggle.
Each also needs a unique ID to ensure it doesn't interact with
alternate content. The `hash` value of the FigureCaption's `children`
provides this unique value.
This commit is contained in:
Edward Loveall 2021-08-15 15:08:03 -04:00
parent 6baba80309
commit 6726dff526
No known key found for this signature in database
GPG key ID: 789A4AE983AC8901
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
spec/components/page_content_spec.cr
View file

@ -112,15 +112,14 @@ describe PageContent do
end end
it "renders a figure and figure caption" do it "renders a figure and figure caption" do
children = [Text.new("A caption")] of Child
page = Page.new( page = Page.new(
title: "Title", title: "Title",
subtitle: nil, subtitle: nil,
nodes: [ nodes: [
Figure.new(children: [ Figure.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200), Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
FigureCaption.new(children: [ FigureCaption.new(children: children),
Text.new("A caption"),
] of Child),
] of Child), ] of Child),
] of Child ] of Child
) )
@ -130,7 +129,11 @@ describe PageContent do
html.should eq stripped_html <<-HTML html.should eq stripped_html <<-HTML
<figure> <figure>
<img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100"> <img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
<figcaption>A caption</figcaption> <label class="margin-toggle" for="#{children.hash}">&#9997;&#xFE0E;</label>
<input class="margin-toggle" type="checkbox" id="#{children.hash}">
<span class="marginnote">
A caption
</span>
</figure> </figure>
HTML HTML
end end

11
src/components/page_content.cr
View file

@ -43,7 +43,16 @@ class PageContent < BaseComponent
end end
def render_child(node : FigureCaption) def render_child(node : FigureCaption)
figcaption { render_children(node.children) } writing_hand = "&#9997;"
text_variant = "&#xFE0E;"
footnote_id = node.children.hash.to_s
label class: "margin-toggle", for: footnote_id do
raw writing_hand + text_variant
end
input class: "margin-toggle", type: "checkbox", id: footnote_id
span class: "marginnote" do
render_children(node.children)
end
end end
def render_child(node : Heading2) def render_child(node : Heading2)