Help on Some Plugins

[K]

While I am not the best at coding, there are 2 minor problems that bug me every time I use tiddlywiki: 

1. In the storytabs plugin, when you switch tabs, it doesn't remember the scroll position of the tabs you switched from. The story tabs in twc supported this. Id like to know (1) how to implement this. I dont need code, just a general idea of what to write.

2. In the context plugin, when you do searches, it displays html code and ;nbsp in the output; where and how would I write code to filter this output out. (The context plugin is a search plugin designed to display context in your searches ie. displaying a bit of what you wrote in the page).

3. (Extra) How would I modify the tiddlywiki core to add more javascript? I've heard that this has been disabled, but since this is a personal tiddlywiki, I want to add some more features. Ie. suppose I want custom js to append a codeblock to every h4 tag.

Edit: So what I have to do is make a javascript tiddler of the correct type and make a div area like the other js being called in $:/core/templates/tiddlywiki5.html?

[Jed Carty]

If you want to add javascript globally than you can write the javascript inside a tiddler and put it inside script tags and tag the tiddler with $:/tags/RawMarkup

Then you save and reload your wiki and the javascript should be loaded.

[K]

Ok thanks, I've managed to get something working, but how do I get this jquery line to run on every page? 

> $( $( "h3" ) ).append( "<a href="#tw-href000" style="float: right;">[Top]</a>" );

[RichardWilliamSmith]

You'd probably need to include jQuery, but I'm not sure it's a great idea. You have no guarantees about when any individual piece of the UI will be updated and re-drawn because of the way Tiddlywiki uses the DOM.

Instead of adding code that way, it's might be better to learn a bit more about how Tiddlywiki actually works. Have you seen the dev docs? http://tiddlywiki.com/dev/

If you want to add an H3, followed by a block of code, it might be better to do that in a macro and invoke it where you need it.

Regards,

Richard

[K]

I have looked at it, but the devs seem to be focusing on restricting script to singular instances that you can call with macros. I finally found a way to make reveal popups on hover instead of using a macro and this reduced the number of clicks drastically. Imo this wiki is for personal use so I dont mind modifying it.

Perhaps, I would have to find the code where a page is rendered and run a script there to put this element before the h3. Any idea what renders the tiddler? I spent quite a while before I figured out to attach an id to the a div so I could have scroll to the top behavior. Or I could look into plugins.

[K]

Ok, Ive written a function...

Where do I put it?

function appendH3() {

    var my_elem = document.getElementsByTagName(h3);

var appender1 = document.createElement(a);

appender1.href = "#tw-href000";

appender1.style.float='right';

appender1.textContent = '[Top]';

my_elem.parentNode.insertBefore(appender1, my_elem);

}

--- 

The above function didnt work due to me having no knowledge in javascript.

After fiddling around, I managed to create a correct script, but I still don't know where to put it....

function appendH3() {

   var a = document.createElement('a');

  a.appendChild(linkText);

a.href = "#tw-href000";

a.style.float = "right";

  var linkText = document.createTextNode("[Top]");

  var x = document.querySelectorAll("h3");

  var arr = [];

  

for(var i = x.length; i--; arr.unshift(x[i]));

for (var i = arr.length - 1; i >= 0; i -= 1) {

var clone = a.cloneNode(true);

arr[i].appendChild(clone);

}

}

[BJ]

Have at look at this thread

https://groups.google.com/forum/#!msg/tiddlywiki/NwOI-QER2ig/lSLS3XolwDoJ

all the best

BJ

[K]

That's really helpful information BJ, but I've finally isolated what I want to do - I want to put a section of code to change the way tiddlywiki renders html tags, but I have no idea where - the script below takes h3 tags and appends a link floating to the right of them:

function appendH3() {

   var a = document.createElement('a');

   a.appendChild(linkText);

a.href = "#tw-href000";

a.style.float = "right";

  var linkText = document.createTextNode("[Top]");

  var x = document.querySelectorAll("h3");

  var arr = [];

  

for(var i = x.length; i--; arr.unshift(x[i]));

for (var i = arr.length - 1; i >= 0; i -= 1) {

var clone = a.cloneNode(true);

arr[i].appendChild(clone);

}

}

Consulting the dev tiddlywiki, tiddlywiki refreshes its contents, but where do I put it?

[BJ]

Are you asking (in general) how the dom can be manipulate  after tiddlywiki has created it?

TW5 is similar to react, it creates the dom using other elements.

Tw creates its own tree, a tree of widgets, it is the result of compiling wikitext (or markdown). A widget create dom elements and link them to the parent domnode provided by the widgets ancestor (its parent widget). Because of this the dom is tied to the widget tree, and so, in general, running javascript to manipulate the dom is a bad idea as it may interfere with the association between widgets and domnodes.

So it is better to use wikitext

[Jed Carty]

I agree with BJ, doing this in tiddlywiki is this task that is better suited to a wikitext than javascript. In my experience using document.querySelectorAll(..) in a wiki leads to strange edge cases because everything can be re-rendered individually.

Do you have existing html that you are trying to put into tiddlywiki or are you creating it in tiddlywiki?

If you are creating it in tiddlywiki than it would be much simpler to create a macro for the different tags and put that in places where use them instead of the tags directly.

[K]

I know that TW takes the tiddler data and renders it. Every time TW senses a change it refreshes it. Instead of putting the code outside of the system, what I want to do is modify how tiddlywiki renders this data. In your words, I want to modify the widget; I just don't know which one.

I have created the html manually, but I want to decrease the amount of time it takes

[K]

Perhaps instead of doing that, if I could find where TW parses and renders the content, I could select all the nodes/arrays and filter them to modify what I want ie. write an if statement inside the parse loop so that it modifies how the h3 tag is rendered. 

Or if I find the render function, I could put the if statement there ie. (if h3) then do this etc.

I just want to scrap the wikitext, tbh the only wikitext I use are the prettylinks -> because ckeditor doesn't do any wonky things to them. Compared to Ckeditor, the speed of editing using wikitext is relatively low, I can do the same amount of work in 30 min in 10 min with html editing.

@jed If I made a macro for each tag, I'd have to call it potentially hundreds of times....not feasible imo. 

[Jed Carty]

how is it any less feasible than putting in the tags themselves? You make the macros called h3 and /h3, than instead of putting <h3> you just put <<h3>> and instead of </h3> you put <</h3>>

[RichardWilliamSmith]

Hi K,

The h3's are generated by /core/modules/parsers/wikiparser/rules/heading.js 

Let us know how you get on.

Regards,

Richard

[K]

Perhaps I didn't understand the problem before, due to tiddlywiki's internal strucure, so I need to rephrase what it is exactly what I want to do:

1. I want to change the way h? tags are rendered. That is to say, I want to add another element right after the h tag when it is rendered. Do I have to write a widget or is there a much more simple way to do this. ie. put an <a> element right after.

So do I modify $:/core/modules/widgets/element.js? because seems to control the rendering of elements.

If I have to write a widget, I need to know where it will go and how it will plug into the tw core.

[TonyM]

K,

Can you explain why you want to do this?. The Reason I ask is you are asking for a specific solution, not defining the problem. Since others are more familiar with tiddlywiki, we may be able to solve your root problem not the one you think you have.

Perhaps even CSS could be used?

Regards
Tony

[RichardWilliamSmith]

The thing here is that you probably don't want to/need to "change the way h3 tags are rendered" - because the whole UI is being rendered through Tiddlywiki templates etc. there is probably a better mechanism to get at what you want to change, rather than trying to over-ride core behaviour, especially without properly appreciating just how complicated the core is.

If you want to change the way titles of Tiddlers are displayed, for example, you should be looking at the relevant tiddler ($:/core/ui/ViewTemplate/title) or perhaps you want to target a different part of the wiki? 

As Tony suggests, perhaps explain a little more of what you're trying to achieve?

Regards,

Richard