Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to add div wrapper to every passage via javascript in SugarCube 2?

I know this can't be too hard using prerender or postrender, but I'm not having luck at the moment...

I just want:
<div class="passage">My passage text</div>

to become:
<div class="passage"><div class="my-wrapper">My passage text</div></div>

for every rendered passage. And preferably as early as possible (so that other scripts looking for "my-wrapper" class would still have time to do things in postrender).

Twine 1.4 + SugarCube 2.

Thanks for any help!

Comments

  • Dare I ask. Why do you need a wrapper element?

    Beyond that, to answer the question asked. Something like that can't be done until postrender. Try something like the following:
    postrender['doTheWrapping'] = function (content) {
    	var $wrapper = $('<div class="my-wrapper"></div>');
    	$(content).contents().appendTo($wrapper);
    	$wrapper.appendTo(content);
    
    	// To ensure the above happens before 'other scripts looking for
    	// "my-wrapper" class would still have time to do things in postrender'
    	// you'll need to either move the code of those `postrender` tasks
    	// here or you need to make them into `postdisplay` tasks.
    };
    
  • edited March 2016
    Thanks TME!

    The reason for adding the wrapper class is to add a 'typed' container div to passages automatically, for use with typedjs (so all passages will be automatically typed). I want to add a wrapper rather than simply adding '.typed' to the passage div for styling purposes.
  • edited March 2016
    Just for future reference in case anyone else is looking, it seems adding a wrapper class inside passages can actually be simplified to:
    postrender['doTheWrapping'] = function (content) {
      jQuery(content).wrapInner('<div class="my-wrapper" />');
    };
    
Sign In or Register to comment.