Skip to content

"Passage Events": SugarCube (v2.18)#

Summary#

SugarCube triggers different events as they happen to passages. Through using jQuery and its own JavaScript event handling, code can be added to work with other, existing functionality.

In this example, the "passagestart" and "passagerender" events are shown. In the event progression, the 'passagestart' event occurs before the PassageHeader prepending its content and the 'passagerender' happens after the PassageFooter. Through using event handling, content is added before the PassageHeader and after the PassageFooter as an example of when events occur in presenting passages.

Example#

Download

Twee Code#

:: StoryTitle
Passage Events in SugarCube

:: UserScript[script]
/*
    Prepend the content of the passage "New Header" to every passage.

    This demonstrates that the 'passagestart' event comes before
     the PassageHeader prepending.
*/
$(document).on(':passagestart', function (eventObject) {
    var headerContent = Story.get("New Header").processText();
    $(eventObject.content).wiki(headerContent);
});

/*
    Append the content of the passage "New Footer" to every passage.

    This demonstrates that the 'passagerender' event comes after
     the PassageFooter appending.
*/
$(document).on(':passagerender', function (eventObject) {
    var footerContent = Story.get("New Footer").processText();
    $(eventObject.content).wiki(footerContent);
});

:: Start
[[Another passage]]

:: Another passage
[[Back to beginning|Start]]

:: New Header
This is added before the PassageHeader!


:: PassageHeader
This is the PassageHeader.

:: PassageFooter

This is the PassageFooter!

:: New Footer
This is added after the PassageFooter!

Twee Download

See Also#

Headers and Footers