User Tools

Site Tools


script

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

script [2014/01/15 04:07]
l [prerender and postrender]
script [2017/10/09 20:39]
Line 1: Line 1:
-===== Scripts ===== 
  
-Just as you can tag a passage ''​stylesheet''​ to have its contents treated as CSS style rules, you can use the ''​script''​ tag to include custom Javascript in your story. All passages with this tag are executed when the page loads, which you can use as an opportunity to do two things: 
- 
-  * Install custom [[macro]]s made in Javascript by other Twine users. 
-  * Modify how your story will work. To do this properly requires careful inspection of the Twine engine. 
- 
-The execution order of passages tagged ''​script''​ is based on the alphabetical order of the script passages'​ names. 
- 
-====Requesting jQuery==== 
- 
-You may wish to use [[http://​jquery.com|jQuery]] in your scripts to manipulate the page's structure. But, you want other people to be able to use your script without having to set the [[StorySettings]] jQuery value themselves. There is another way to request jQuery: simply put the case-insensitive words "​requires jQuery"​ in a comment or a string inside your code: 
-<​code>//​requires jquery</​code>​ 
-You can also request the [[http://​modernizr.com|Modernizr]] library with the words "​requires Modernizr"​. 
- 
-====prerender and postrender==== 
- 
-Two objects exist in the Twine engine that are designed for custom script writers: ''​prerender''​ and ''​postrender''​. If you add Javascript function properties to these objects, those function properties will be run every time a [[passage]] is rendered. 
- 
-A ''​postrender''​ function looks like this: 
-<​code>​ 
-postrender.hello = function(a) { 
-    a.className += "​hello";​ 
-    console.log(this.title); ​ 
-}</​code>​ 
-When ''​postrender.hello''​ is called, ''​this''​ is the Passage object which is currently being rendered, and the first argument ''​a''​ is the <div class="​body content">​ element into which the passage'​s code has been rendered. You can thus transform or modify the div's contents in interesting ways. 
- 
-''​postrender''​ functions are called just after the passage'​s code is rendered into the div. ''​prerender''​ functions are called just before then. 
- 
-===Passage objects=== 
-Passage objects have the following structure (plus some other less useful properties):​ 
->title: the string name of the passage. 
->tags: an array of strings representing the passage'​s [[tag]]s. 
->text: the raw code of the passage. 
->​processText():​ the code of the passage with some substitutions made - the "​nobr"​ tag, if present, removes line breaks, and imported [[image]] syntax has the image'​s base64 data inserted. 
- 
-====Collisions==== 
- 
-If you use a lot of scripts from many people, note that as of 1.4.1, naming collisions in the ''​macros'',​ ''​postrender''​ and ''​prerender''​ objects (such as, adding macros which have the same name) are not alerted to the author. Take care that each addition to these objects has a unique name. 
script.txt ยท Last modified: 2017/10/09 20:39 (external edit)