Skip to content

Commit

Permalink
Fixed some bugs; changed custom display definition to pipe style like…
Browse files Browse the repository at this point in the history 
… Obsidian
  • Loading branch information
@maouw
maouw committed Dec 12, 2023
1 parent 287a053 commit 19cdf63
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 92 deletions.
21 changes: 8 additions & 13 deletions _extensions/popover-glossary/popover-glossary.css
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,35 @@
/* glossary deflist styles */
.glossary_dl {
font-size: 95%;
}

.glossary_dl dt {
font-weight: bold;
}

.glossary_dl dd {
margin-left: 1em;
line-height: normal;
text-indent: 2em;
text-align: justify;
border-top: 1px dotted var(--quarto-body-color);
border-top: 1px dotted;
}

/* glossary reference style */
.glossary-ref {
cursor: pointer;
display: inline;
border-style: hidden;
text-decoration: underline dashed;
}

/* glossary definition popup styles */
.glossary-def {
/* background-color: var(--quarto-body-color);*/
background-color: var(--quarto-body-bg);
opacity: 1;
color: var(--quarto-body-color);
font-size: 75%;
opacity: 1.0 !important;
display: none;
z-index: 1000;
max-width: 33%;
border-color: var(--quarto-border-color);
border-width: 1px;
border-style: solid;
box-shadow: 2px 2px var(--quarto-body-color);
box-shadow: 2px 2px;
padding: 0.5em;
outline: 1px dotted var(--quarto-body-color);
outline: 1px dotted;
outline-offset: -2px;
text-align: justify;
}
Expand Down
57 changes: 37 additions & 20 deletions _extensions/popover-glossary/popover-glossary.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,35 @@
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script>
const refs = document.querySelectorAll(".glossary-ref");
var activeRef, oldRef;

refs.forEach((ref) => {
const link = ref.querySelector(".glossary-link");
const def = ref.querySelector(".glossary-def");
//const def_string = atob(ref.getAttribute("data-glossary-def-base64"));
const def_string = decodeURIComponent(escape(window.atob( ref.getAttribute("data-glossary-def-base64") )));
let new_def = document.createElement("div");
new_def.innerHTML = def_string;

document.body.appendChild(new_def);

const def = document.querySelector(
"div[data-glossary-term='" + ref.getAttribute("data-glossary-term") + "']"
);

const popperInstance = Popper.createPopper(ref, def, {
placement: "auto",
});

function show() {
// Make the def visible
def.setAttribute("data-show", "");
// Hide the old one if it exists
if (activeRef != null) {
oldRef = activeRef;
oldRef.dispatchEvent(new Event("focusout"));
oldRef = null; // Clear the old ref after hiding it
}
activeRef = ref; // Set the new active ref
def.setAttribute("data-show", ""); // Show the definition by adding the data-show attribute

// Enable the event listeners
// Enable the event listeners:
popperInstance.setOptions((options) => ({
...options,
modifiers: [
Expand All @@ -27,28 +43,29 @@
}

function hide() {
// Hide the def
def.removeAttribute("data-show");

// Disable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: "eventListeners", enabled: false },
],
}));
// Only hide if the related target is null (i.e. the user clicked outside the popover):
if ((event.relatedTarget === null || event.relatedTarget === undefined)) {
def.removeAttribute("data-show");
activeRef == null // Disable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: "eventListeners", enabled: false },
],
}));
}
}

const showEvents = ["click"];
const hideEvents = ["blur"];
const showEvents = ["click", "touchstart"];
const hideEvents = ["focusout"];

showEvents.forEach((event) => {
link.addEventListener(event, show);
ref.addEventListener(event, show);
});

hideEvents.forEach((event) => {
link.addEventListener(event, hide);
ref.addEventListener(event, hide);
});
});
</script>
101 changes: 47 additions & 54 deletions _extensions/popover-glossary/popover-glossary.lua
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
-- popover-glossary.lua
-- Author: Lisa DeBruine
-- Author: Altan Orhon

-- Global glossary deflist
-- Author: Lisa DeBruine (original glossary.lua)
-- Author: Altan Orhon (additions for popover-glossary.lua)
-- Global glossary def
globalGlossaryDefList = {}

-- Helper Functions

local function addHTMLDeps()
-- add the HTML requirements for the library used
-- add the HTML requirements for the popover glossary
quarto.doc.add_html_dependency({
name = 'popover-glossary',
stylesheets = { 'popover-glossary.css' }
name = "popover-glossary",
stylesheets = { "popover-glossary.css" },
})

quarto.doc.include_file("after-body", "popover-glossary.html")
end

local function kwExists(kwargs, keyword)
for key, value in pairs(kwargs) do
if key == keyword then
Expand All @@ -26,61 +23,47 @@ local function kwExists(kwargs, keyword)
return false
end

local function read_metadata_file(fname)
local metafile = io.open(fname, 'r')
local content = metafile:read("*a")
metafile:close()
local metadata = pandoc.read(content, "markdown").meta
return metadata
end

local function readGlossary(path)
local f = io.open(path, "r")
if not f then
io.stderr:write("Cannot open file " .. path)
else
local lines = f:read("*all")
f:close()
return (lines)
end
end

---Merge user provided options with defaults
---@param userOptions table
local function mergeOptions(userOptions, meta)
local defaultOptions = {
path = "glossary.yml",
add_to_deflist = true
add_to_deflist = true,
}

-- override with meta values first
if meta.popover_glossary ~= nil then
for k, v in pairs(meta.popover_glossary) do
local value = pandoc.utils.stringify(v)
if value == 'true' then value = true end
if value == 'false' then value = false end
defaultOptions[k] = value
if value == "true" then
defaultOptions[k] = true
elseif value == "false" then
defaultOptions[k] = false
else
defaultOptions[k] = value
end
end
end

-- then override with function keyword values
if userOptions ~= nil then
for k, v in pairs(userOptions) do
local value = pandoc.utils.stringify(v)
if value == 'true' then value = true end
if value == 'false' then value = false end
defaultOptions[k] = value
if value == "true" then
defaultOptions[k] = true
elseif value == "false" then
defaultOptions[k] = false
else
defaultOptions[k] = value
end
end
end

return defaultOptions
end


-- Main Glossary Function Shortcode

return {

["term"] = function(args, kwargs, meta)
-- this will only run for HTML documents
if not quarto.doc.isFormat("html:js") then
Expand Down Expand Up @@ -108,25 +91,25 @@ return {
end
gdl = gdl .. "</dl>"

return pandoc.RawInline('html', gdl)
return pandoc.RawInline("html", gdl)
end

-- or set up in-text term
local options = mergeOptions(kwargs, meta)

local display = pandoc.utils.stringify(args[1])
local term = string.lower(display)

if kwExists(kwargs, "display") then
display = pandoc.utils.stringify(kwargs.display)
end
local term = string.lower(string.gsub(pandoc.utils.stringify(args[1]), "[|].*", ""))
local display = string.gsub(pandoc.utils.stringify(args[1]), ".*[|]", "")
print("term: " .. term .. " display: " .. display)

-- get definition
local def = ""
if kwExists(kwargs, "def") then
def = pandoc.write(pandoc.Pandoc(kwargs.def), "html")
else
local metafile = io.open(options.path, 'r')
local metafile = io.open(options.path, "r")
if metafile == nil then
quarto.log.warning("Glossary file not found: " .. options.path)
return pandoc.Null()
end
local content = "---\n" .. metafile:read("*a") .. "\n---\n"
metafile:close()
local glossary = pandoc.read(content, "markdown").meta
Expand All @@ -143,12 +126,22 @@ return {
if options.add_to_deflist then
globalGlossaryDefList[term] = def
end


glossText = "<button class='glossary-ref'><div class='glossary-def' role='tooltip'>" ..
pandoc.RawInline("html", def).text ..
"</div><a class='glossary-link' href='javascript:void(0);'>" .. display .. "</a></button>"
local def_div = "<div class='glossary-def' data-glossary-term='"
.. term
.. "' role='tooltip'>"
.. pandoc.RawBlock("html", def).text
.. "</div>"
local def_div_base64 = quarto.base64.encode(def_div)
-- glossText = "<span class='glossary-ref'><span class='glossary-def' role='tooltip'>" ..
-- pandoc.RawBlock("html", def).text ..
-- "</span><a class='glossary-link' href='javascript:void(0);'>" .. display .. "</a></span>"
glossText = "<a class='glossary-ref' data-glossary-term='"
.. term
.. "' data-glossary-def-base64='"
.. def_div_base64
.. "' href='javascript:void(0);'>"
.. display
.. "</a>"
return pandoc.RawInline("html", glossText)
end

end,
}
19 changes: 14 additions & 5 deletions index.qmd
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
```
```
# Quarto-Popover-Glossary

This extension provides shortcodes for [popover-glossary](https://github.com/maouw/quarto-popover-glossary) in quarto. It uses the [Popper](https://popper.js.org) library to create popovers with glossary definitions.
Expand Down Expand Up @@ -49,21 +52,27 @@ The simplest use starts with the word `term` and then the term to be defined. Cl

No need to change if you're just using different case:

`{{{< term html >}}}`
`{{{< term sesoi >}}}`

{{< term html >}}
{{< term sesoi >}}

Use quotes if your term is more than one word.

`{{{< term "effect size" >}}}`

{{< term "effect size" >}}

Add a `display` argument if you want to display something different than the term:
You can use Markdown or HTML in the definition, too:

`{{{< term html >}}}`

{{< term "html" >}}

If you want the link to display something different from the term, append a pipe (`|`) character and the display text.

`{{{< term alpha display="alpha criterion" >}}}`
`{{{< term "alpha|alpha criterion" >}}}`

{{< term alpha display="alpha criterion" >}}
The {{< term "alpha|alpha criterion" >}} is...

### Definitions

Expand Down

0 comments on commit 19cdf63

Please sign in to comment.