I’m doing a bit of an ad-hoc modification to Paloma code (derivative of Snowman), so that the page is structured in a “content” column and a “dialogue” column. The “dialogue” column is a traditional Twine interface, but the “content” column technically exists outside of the interface and holds static things.
I want to place a link in the “content” column that will trigger a passage in the “dialogue” column - problem being that since the “content” column isn’t within the scope of <tw-storydata>, I can’t use the typical [[link]] syntax.
I found a method in SugarCube that uses the data-passage definition to allow a traditional <a> link to trigger a passage, but I can’t find anything like that for Snowman. Does anyone know a good method to tackle this?
1 Like
You didn’t supply an example of how the element(s) that represents the “content” column is being added to the page’s Document Object Model, nor did you explain where that/those element(s) are structurally in the DOM relative to those that make up Paloma’s default User Interface. And both of these things area likely going to influence any answer.
I will assume you are using code something like the following within your project’s Story > JavaScript area to append the HTML that represents the “content” column…
$('<div id="content"></div>').insertAfter("#passage");
…so that it is a child of the <body> element and a sibling to the <div id="passage"> element that represents the “current passage” area of the page.
I’ll also assume you’re using JavaScript something like the following in each Passage that needs to update the “content” column.
<%
$('#content').append('Some content, may include HTML');
%>
If you look at this section of the code that makes up the Paloma engine, you will see that it monitors the content of the <body> element for any ‘click’ event that is associated with a <a> element that has a data-passage attribute. And when such a ‘click’ event occurs, the event handler conditionally causes a transition to Passage Name assign to the data-passage attribute.
So if your “content” column is a child element of <body> and the current Passage updates that column like so…
<%
$('#content').append('a <a data-passage="Second">link</a> to the Second Passage');
%>
…then selecting that link will automatically update the “passage” area of the page, which you are calling the “dialogue” column.
1 Like
Yep, it works perfectly to use the SugarCube syntax here. I probably should’ve tried that before assuming it wouldn’t work the same, haha. Thank you for your help anyways!
1 Like