Set HTML Free in TiddlyWiki

[TonyM]

Moved from GitHub Issues Queue

Folks,

Following on from my speculation in dealing with cases such as the html details I would like your views on the following.

If we could find a way to support the integration of HTML with TiddlyWiki for these "primitives" I believe this would be very popular, one way maybe to have some basic functions that "emulate" common html javascript functions OR extend the way WikiText containing HTML is parsed, so that the two work better together.

Eg a way to provision the html details with a toggle value.

The idea would be to leverage the rich html environment and reduce the need for solutions to be built into tiddlywiki when they already live in the HTML5 standards. If you spend time as I have looking at HTML at https://www.w3schools.com/ you will see that on many occasions that the html demands JavaScript which will not (directly) work in tiddlywiki but more often than not this java script seems really basic, allowing a value to be set or stored on click or some other primitive operation. Or the browser contains the value the html has produced from input to states but we have no way to reference it in the wikitext.

In fact TiddlyWiki has already done as I propose with CSS allowing it to be a fully supported standard in tiddlywiki as well as permitting it to be used in response to tiddlywiki tags and other attributes.

I am not saying this is simple, but it potentially is, and I do not have the experience to implement it.

In some ways Evans formula plugin is doing this by allowing html attributes to be set using tiddlywiki variables and tiddler/fields.

What remains is I believe a need to connect HTML more closely to the tiddlywiki internals.

One slightly more complex example may be html forms and php https://www.w3schools.com/html/html_forms.asp

 <form> First name:<br>
 <input type="text" name="firstname"><br>
 Last name:<br> <input type="text" name="lastname">
 </form>

If we could only access the values above we know are stored in the browser eg firstname lastname

But I think it worthy of investigation, because it would open the world of HTML5 and related frameworks to users while reducing the need for "equivalent" widgets like this threads Details widget. It will simplify what goes into tiddlywiki while at the same time enriching its capabilities. Further once a subset of tiddlywiki/html5 "methods" are available it would be easy to translate a wealth of code from html training and support sites, and users.

Please consider deeply, the return could be massive.

Regards
Tony

[Mat]

I probably don't fully understand what you're asking about so FWIW;

Regarding this:

>If we could only access the values above we know are stored in the browser eg firstname lastname

Did you see Tobias' dom plugin ?

Also, working with the actual html tag properties reminds me of Mavo.

>In fact TiddlyWiki has already done as I propose with CSS allowing it to be a fully supported standard in tiddlywiki 

My impression is not that TW has "done" anything with CSS... I mean, CSS is part of the fundamental language used by browsers so TW has merely *not* blocked this, as it does with JS. I'd think. This is also probably why allowing some js would be tricky; exactly what should be allowed?

<:-)

[TonyM]

Mat,

Thanks for the leads, have you any examples of using this in TiddlyWiki?

I would like to see if I can access the below; especially once values are entered as a test

 <form id="frm">
  First name:<br>
  <input type="text" name="firstname" id="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname" id="lastname">
</form>

Mavo has potential but can it be used in tiddlywiki?

The key seems to me accessing tiddlywiki lists, variables and text references (including fields) and updating them although if much can be done over and on top of tiddlywiki it would still have value.

Regards

Tony

[Jed Carty]

Tony,

TiddlyWiki being able to display things in multiple places creates problems for forms like you are suggesting. HTML forms are designed with a very limited use in mind. You have a form and you have a submit button and when you click on the submit button the form data is sent to a server and it is the responsibly of the server to figure out what to do with it. Adding javascript on top of this some things can be done in a browser, but that leads to other issues. TiddlyWiki lets you display the same content in multiple places, this breaks the assumptions used by html when using id attributes. An id is supposed to be unique in a page so that you can use getElementById to pick a unique element. If you have that in a tiddler that is displayed in two places than the behaviour is not well defined.

And anything that uses the html dom for storing the state the way that the forms you mention do is going to be a problem if the tiddler gets refreshed. For example if you have the form in a tiddler displayed using the tabs macro and switch tabs after entering information that information may be lost. Or if you have the form in a tiddler that is displayed multiple times there is nothing to prevent you from entering different data in it in each place. In a situation like that with html the error is in the html and there isn't an expected outcome for when you try and use the form because it is given bad data.

And as a personal opinion, I think that the jquery approach of storing everything in the dom is a bad idea. It leads to very difficult to maintain systems where changing one part has unintended and unpredictable side effects because there is nowhere to look to determine what actually affects each component. TiddlyWiki already supports html, there are a few cases like forms where the way that they are used doesn't work in the tiddlywiki context but we have equivalent structures that do work.

[TonyM]

Jed,

Thanks for your view here. I understand the complications you describe. I suppose I am hoping we can provide those "equivalent structures" a little more comprehensively and if possible in a systemic way so more of the html5 standards can be applied. Perhaps keeping it simpler.

Regards

Tony

[PMario]

On Tuesday, August 7, 2018 at 4:03:09 AM UTC+2, TonyM wrote:

The idea would be to leverage the rich html environment and reduce the need for solutions to be built into tiddlywiki when they already live in the HTML5 standards.

TW uses HTML standards but it's needed to sanitize the code that users can store within tiddlers. ...

If you spend time as I have looking at HTML at https://www.w3schools.com/ you will see that on many occasions that the html demands JavaScript which will not (directly) work in tiddlywiki

Just try to post 1 of your examples with js here in the group. ... And you'll see, it won't work. .. And there is a very good reason!

 

but more often than not this java script seems really basic, allowing a value to be set or stored on click or some other primitive operation. Or the browser contains the value the html has produced from input to states but we have no way to reference it in the wikitext.

That's the problem. ... The js is very basic, just to "showcase" the possibilities. .. In real world apps there is no way, that these examples would be useful out of the box. Mainly because of massive security problems especially using forms.

-m

[Mat]

TonyM wrote:

Mat,

Thanks for the leads, have you any examples of using this in TiddlyWiki?

Nope.

 

I would like to see if I can access the below; especially once values are entered as a test

 <form id="frm">
  First name:<br>
  <input type="text" name="firstname" id="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname" id="lastname">
</form>

That should be doable with very contrieved wikitext code, treating the code as text and traversing through it and using regexps and using various split operators to extract stuff. Reminds me vaguely of the CherryPicker plugin.

 

Mavo has potential but can it be used in tiddlywiki?

Probably would require a lot of tweaking. For one thing, Mavo uses... whats-it-called... when you declare some url at the top of the html-document from where the code is fetched  (cdn?). My shallow snooping around at Mavo have not found any "download-to-get-a-complete-standalone"... but possibly it's just poor snooping.

Personally, I'm curious if there are pieces of mavo that could somehow be integrated. Not least their plugins but also they might have some creative saving solutions. 

<:-)

[TonyM]

Mat,

Probably would require a lot of tweaking. For one thing, Mavo uses... whats-it-called... when you declare some url at the top of the html-document from where the code is fetched  (cdn?). My shallow snooping around at Mavo have not found any "download-to-get-a-complete-standalone"... but possibly it's just poor snooping.

Tag a tiddler with $:/tags/RawMarkup or import CSS to a tiddler and $:/tags/Stylesheet

Personally, I'm curious if there are pieces of mavo that could somehow be integrated. Not least their plugins but also they might have some creative saving solutions. 

<:-)

I think it possible but I believe the idea of setting HTML free would help.

Regards

Tony 

[TonyM]

Folks,

I may try and restate this another way.

When using TiddlyWiki we can include HTML structures and most work well however they do not interact with tiddlywikis variables, fields state tiddlers. 

The point is the values and selections made in html is stored in the browser, a simple example is the details object

This works in tiddly wiki

<details open>
<summary>Summary</summary>
Content
</details>

You will see the details opens and closes and remembers the state until you leave the tiddler.

In a javascript permissible environment you can perform quite generic manipulations such as

Access a Details Object

var x = document.getElementById("myDetails"); 

Create a Details Object

var x = document.createElement("DETAILS"); 

Here is an example of some level of interaction with html objects. As I understand it the tool retrieves the content from the DOM

http://tobibeer.github.io/tw5-plugins/#%24%3A%2Fplugins%2Ftobibeer%2Fdom

<details open id=test>

<summary id=stest>Summary of this detail</summary>

Content of details

</details>

---

<<domtext test>>

<<domtext stest>>

returns

Summary of this detail
Content of details

---------------------------------------------------

Summary of this detail Content of details

Summary of this detail

We can use the domtext macro to retrieve a value, if we could have a macro to write into the same values

Further work is needed to access the input and user entry values

Basically I propose general purpose "generic" macros or widgets to access HTML "DOM elements?" 

This would open HTML up to further integration.

Imagine if we could make the map tag work!

https://www.w3schools.com/tags/tag_map.asp

Regards

Tony

[TonyM]

Another example

See this HTML

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit">Submit</button><br>
  <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>

Pressing submit will craft a HTML link to the PHP page

http://127.0.0.1:8088/action_page.php?fname=Tony&lname=Muscio

Why cant we pass this to a macro or a temp tiddler? Even to our own wiki?

Actually I just did it

 <form action="http://127.0.0.1:8088/Instances/TiddlyWiki5.html#">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Results in http://127.0.0.1:8088/Instances/TiddlyWiki5.html?fname=Tony&lname=Muscio#

Which reloads the current wiki 

and 

$:/info/url/search

contains

?fname=Tony&lname=Muscio

Regards

Tony