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

Display figure captions as margin notes 

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
it "renders a figure and figure caption" do
children = [Text.new("A caption")] of Child
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Figure.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
FigureCaption.new(children: [
Text.new("A caption"),
] of Child),
FigureCaption.new(children: children),
] of Child),
] of Child
)
@ -130,7 +129,11 @@ describe PageContent do
html.should eq stripped_html <<-HTML
<figure>
<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>
HTML
end

11
src/components/page_content.cr
View File

@ -43,7 +43,16 @@ class PageContent < BaseComponent
end
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
def render_child(node : Heading2)