Looking Macros

OVERVIEW

There are three different macros you can use: <<observe>>, <<glance>> and <<reveal>>. 

• <<observe>> opens up a dialog from Chapel's popover macro;
• <<glance>> reveals new lines of text. 
• <<reveal>> also reveals new lines of text in the same passage, but displays a different passage.

Please look at the demo for a demonstration!

HOW TO INSTALL

1. Add Chapel's Popover macro to your project: https://github.com/ChapelR/custom-macros-for-sugarcube-2/blob/master/docs/popove... (I recommend the minified JS but the pretty CSS for more in-depth styling!)
2. In your Story JavaScript, add this: https://pastebin.com/MTRxgBFA
3. In your Stylesheet, add this: https://pastebin.com/ne0p8CXU
   
4. Optional step: You might want to add this to Chapel's Popover macro if you want to get rid of the scrollbar (can still scroll): https://pastebin.com/5radkgRJ

Usage

1. Make a <<link>> so that, when clicked, it will execute <<observe>>, <<reveal>>, or <<glance>>. Give it a link text, but do not link it to a new passage.
2. Wrap the <<link>> in a <span> and give it a unique id that is not used anywhere else in the passage. You can also add any classes here. By default, the CSS code includes the "look" class that, when added, will make the link a bright, bold text to distinguish it as a "looking" link. See below.
   

   

3. Inside the link, use <<observe>>, <<reveal>>, or <<glance>>. Instructions on syntax and how they work below.

Observe

<<observe "[id]" "[passage name]" "[replaced colored text]" "[normal text]">>

• id - The id given to the <span> tag wrapped around the link.
• passage name - A passage that will be shown as a popup using Chapel's Popover macro.
• replaced color text - After the passage has been observed, this will replace the original link with a bright, golden color.
• normal text (optional) - After the passage has been observed, this will follow the color text as regular, unstyled text.

<span id="o1" class="look"><<link "Observe this!">><<observe "o1" "p2" "this has been observed!" "Congratulations!">><</link>></span>

Glance

<<glance "[id]" "[replaced color text]" "[normal text]">>

• id - The id given to the <span> tag wrapped around the link.
  
• replaced color text - After the link is clicked, this will replace the original link with a bright, golden color.
• normal text - After the link is clicked, this will follow the colored text as regular, unstyled text.

<span id="g1" class="look"><<link "Glance over here!">><<glance "g1" "Glance over here!" "You might see something new.">><</link>></span>

Reveal

<<reveal "[id]" "[replaced colored text]" "[passage name]">>

• id - The id given to the <span> tag wrapped around the link.
• replaced color text - After the link is clicked, this will replace the original link with a bright, golden color.
  
• passage name - After the bright, golden colored text, it will display the passage indicated right after.

<span id="r1" class="look"><<link "Click to reveal text!">><<reveal "r1" "Text revealed!" "p2">><</link>></span>