Popups - Twine Sugarcube 2

Two options below. Other related tutorials are

• Closing it when selecting a link on the popup.
• Hidden description panel instead of popup.

PREFERRED OPTION

Use DialogAPI (Dan Cox video tutorial)

1. Define a passage with the content you want to appear in the popup.

2. In the passage with the link/button to the popup, use (from here):

<<button "You">>
<<script>>
Dialog.setup("Character Sheet", "charsheet");
Dialog.wiki(Story.get("PC Sheet").processText());
Dialog.open();
<</script>>
<</button>>

<<button "You">>
<<script>>
Dialog.setup("Character Sheet", "charsheet");
Dialog.wiki(Story.get("PC Sheet").processText());
Dialog.open();
<</script>>
<</button>>

- Where “Character Sheet” is the title that will show on the popup, “charsheet” is the class (CSS), and “PC Sheet” is the title of the Passage you want to appear in the pop-up.
- You can use it as a *button* or as a *link.*

Styling with CSS

If you want to change the style for the body of popups from the overall body, put this in the Stylesheet:

/* Set background for the dialog/pop-up passages */
#ui-dialog-body {
  background-image: url("space.jpg");
  background-color: black;
}

/* Set background for the dialog/pop-up passages */
#ui-dialog-body {
  background-image: url("space.jpg");
  background-color: black;
}

(Obvs, you can add various properties, including font changes, etc, as you would any other CSS style.)

If you want more than one style for various pop-ups, use both the dialog button in the passage - note above where it says “charsheet"? Use that in the Stylesheet:

/* Set alternate background for other dialog/pop-up passages /
.charsheet #ui-dialog-body {
  background-image: none;
  background-color: black;
}

/* Set alternate background for other dialog/pop-up passages /
.charsheet #ui-dialog-body {
  background-image: none;
  background-color: black;
}

SECOND OPTION

Define a “popup” macro.

1. Paste this code into the Story Javascript: /* Usage: <<popup “Some Pasage”>> */ Macro.add(“popup”, {     version : { major: 1, minor: 0, revision: 0 },     handler : function () {         if (this.args.length < 2) {             var errors = [];             if (this.args.length < 1) { errors.push(“link text”); }             if (this.args.length < 2) { errors.push(“passage name”); }             return this.error(“no " + errors.join(” or “) + " specified”);         }

var    el      = document.createElement(“a”),             passage = this.args[1],             title;         el.innerHTML = this.args[0];         el.className = “link-internal macro-popup”;         el.setAttribute(“data-passage”, passage);         title = el.textContent;         UI.addClickHandler(el, null, function (evt) {             var    dialog = UI.setup(title, “popup”);             new Wikifier(dialog, tale.get(passage).processText().trim());         });         this.output.appendChild(el);     } });

1. In the passage, use:

<<popup “PopupTitle” PassageName>>

- Where “PopupTitle” is what will appear in the title bar of the pop-up window/dialog, and PassageName is the name of the passage whose content should appear in the popup.
- Make sure the PassageName has no spaces - it only reads the first word.