[TW5] Javascript kiddy

[TonyM]

Folks,

I was wondering if you could tell a JavaScript kiddy like myself, who loves to cut snipits of code and reuse them if there is a practical way to use common javacript to enhance out tiddlywikis.

An example may be here https://www.w3schools.com/w3css/w3css_tabulators.asp

I know this could be achived in other ways however such examples exist out in the world and they can help develop solutions quickly.

In the example below I am using a w3.css stylesheet.

Where some html and css call for a little javascript

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

 <div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
   <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
 </div>

and 

function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(cityName).style.display = "block";
}

Clearly this is quite simple javascript involving defining a single function.

Is there a way to get this function added to the wiki so that the HTML/CSS solution works?.

Thanks in advance

Tony

[Jeremy Ruston]

Hi Tony

Is there a way to get this function added to the wiki so that the HTML/CSS solution works?.

Not as written, no.

It is an example of conventional DOM-based programming, as popularised by jQuery. The key characteristic is that the state of the page is maintained in the DOM. TiddlyWiki 5 is based on a fundamentally different architecture where the state is maintained in JavaScript variables, and the DOM can be recreated from that state as needed.

DOM-based JavaScript libraries can be integrated with TiddlyWiki (there are several examples in the plugin library, such as CodeMirror, the Twitter plugin etc.). But it’s a complex process that requires an understanding of the specifics of the library and of TiddlyWiki itself.

(TiddlyWiki Classic, on the other hand, is very much a traditional DOM-based app, and it’s relatively easy to drop in off-the-shelf JavaScript).

It’s worth pointing out that TiddlyWiki 5 adopted this architecture in 2011, but it has since become mainstream in the shape of the React framework. There’s the same chasm for jQuery developers to cross to get to React as there is for TiddlyWiki 5.

Best wishes

Jeremy.

Thanks in advance

Tony

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/8e038951-2cd6-47c5-971c-244a7778e100%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[TonyM]

Jeremy,

Thanks for that, it will take time for me to fully understand your answer, but I understand why.

Given this is infact a somewhat convoluted method of changing display onclick, can you envision a simple to replace this in tiddlywiki?

I would like to see if I can translate such simple javascript to psuedocode that I can implement in tiddlywiki.

My initial thought is evans formula plugin to change attributes. Somehow I need to trigger an action widget on click and the rest should be easy.

Regards
Tony

[TonyM]

Actualy I think I see how.

Tw buttons instead, action to change a field and formula to give an attribute of display:none to display:block for the selected item.

Wa la
Tony

[Thomas Elmiger]

Hi Tony

TW has tabs and the reveal widget for this functionality, no JS needed – or did I miss something?

Kind regards from a script kiddy ;–)
Thomas

[TonyM]

Thomas,

Yes I know there are tiddlywiki ways to do it, what I am trying to do is find the way to take html backed up with javascript code available all over the internet, especially at w3schools and find a re-implementation in tiddlywiki. In the most recent case I am making use of w3css and building my own tabs tool to overcome what appear to be limitations (for what I want to do) with the tabs widget.

I see html and css as somewhat universal technologies that I would like to leverage in tiddlywiki, I have being learning quite a bit about html/css in tiddlywiki and the html/css knowledge helps in WordPress and other platforms.

While Jeremy has pointed out the limitations because of the different usage of JavaScript, I am keen to leverage the substantial knowledge-base available in these related technologies.

The Truth is, I have never quite got the reveal widget, but even once I do, to be honest, the documentation on it, is not crash hot for someone coming from my background. I need to learn to translate solutions to using the reveal.

Thanks for pointing out the obvious in case I had missed it, but perhaps this is not the case this time.

Best wishes

Tony

[Thomas Elmiger]

Hi again Tony

To point out the less obvious: I think I stood not far from where you are some time ago … wouldn’t it be great if we could throw in some standard lines of JS to get neat effects here and there? Yes of course. But honestly: I gave up. There are good reasons for TW to restrict this, e.g. security. 

O.k. I was able to develop a widget (Details, it adds a new HTML-element to TW, I had to search for the differentiation to the reveal widget) and some JS macros like RPN for simple calculations. 

So what did I do instead? I opted to focus on CSS which already offers enormous potential to improve interaction with TW combined with TW standard functionality. The intermediate result is my Bricks project, a hole in which many, many evening hours of my life disappeared – to say it Joe Armstong style :)

So maybe you can include my learnings into your consideration of next goals and steps. 

I hope these thoughts are helpful and wish you all the best!

Thomas 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywikidev/a1okj6YIUog/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywikide...@googlegroups.com.

To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/174ca05a-f032-40fc-b2f7-cc12ad405f4d%40googlegroups.com.