Reference.jump - Template

This is a template for LiaScript that adds a single macro, @Reference.jump, for cross-referencing content within a course. Clicking the generated link

1. switches to the given section (slide),
2. waits briefly for the slide transition to finish, then scrolls the target element into view,
3. highlights the target element for a few seconds and fades the highlight out again.

Try it on LiaScript:

https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaTemplates/reference-jump/master/README.md

See the project on GitHub:

https://github.com/LiaTemplates/reference-jump

Usage

Load the macro via import in the header of your own course:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/reference-jump/0.0.1/README.md
-->

Or, if you want to always use the latest version:

<!--
import: https://raw.githubusercontent.com/LiaTemplates/reference-jump/master/README.md
-->

Note: target ids are assigned manually, using one of two mechanisms:

• Wrap the target in raw HTML: <span id="...">...</span>.
• Attach an HTML comment <!-- id="..." --> to a Markdown element. A comment placed on its own line applies to the entire block that follows it; a comment placed directly after an inline element applies only to that element.

Within all the text.
<span id="id-1">This is an important sentence.</span>
While this one is not important.

<!-- id="id-2" -->
In contrast to the example above this is an important
paragraph. While this is an important inline formula.
$\frac{a}{1+x}$<!-- id="id-3" -->. A comment attached
to a Markdown block is applied onto the entire block,
while attached to an element is only applied to the
element.

---

Example

Within all the text. This is an important sentence. While this one is not important.

In contrast to the example above this is an important paragraph. While this is an important inline formula. $\frac{a}{1+x}$. A comment attached to a Markdown block is applied onto the entire block, while attached to an element is only applied to the element.

@Reference.jump

@Reference.jump(Link text,target id,#target-section)

It can also be written in the style of a regular Markdown link, with the target section as the URL part:

@[Reference.jump(Link text,target id)](#target-section)

Both forms produce the exact same macro call. The second form has one advantage: since it is valid Markdown link syntax, a renderer that doesn't support LiaScript macros will still show it as a working link to #target-section — it just won't scroll to and highlight target id.

Parameter	Description
Link text	The visible text of the link
target id	The id of the element to scroll to and highlight
#target-section	Anchor of the target section, e.g. #example-section-a (the slide title, lowercased, spaces replaced by -)

Example

Each link below jumps back up to the Usage section and highlights one of the ids defined there, regardless of which mechanism was used to set that id:

1. @Reference.jump(Jump to the sentence marked with a span,id-1,#usage)

2. @Reference.jump(Jump to the paragraph marked with a block comment,id-2,#usage)

3. @[Reference.jump(Jump to the formula marked with an inline comment,id-3)](#usage)

---

1. @Reference.jump(Jump to the sentence marked with a span,id-1,#usage)

2. @Reference.jump(Jump to the paragraph marked with a block comment,id-2,#usage)

3. @Reference.jump(Jump to the formula marked with an inline comment,id-3)

Implementation

@onload
window.LiaReferenceJumpTimers = {}

window.LiaReferenceJump = function (id) {
  var timers = window.LiaReferenceJumpTimers

  if (timers[id]) {
    clearTimeout(timers[id].scroll)
    clearTimeout(timers[id].fade)
  }

  timers[id] = {}

  timers[id].scroll = setTimeout(function () {
    var el = document.getElementById(id)
    if (!el) {
      console.warn('Reference.jump: no element found with id "' + id + '"')
      return
    }

    el.scrollIntoView({ behavior: "smooth", block: "center" })

    el.style.transition = "background-color 0.6s ease"
    el.style.backgroundColor = "#fff59d"

    timers[id].fade = setTimeout(function () {
      el.style.backgroundColor = ""
    }, 3000)
  }, 1500)
}
@end

@Reference.jump: <a href="@2" onclick="LiaReferenceJump('@1')">@0</a>

If you want to minimize loading effort in your own project, you can also copy this code directly into your main header instead of using import.