Request for widget to read html custom attribute values

#1

Could there be a widget or some mechanism to get html element attribute values? Or is it a safety risk?

For example, in <div class="myclass" foo="bar"> I would like to access the values for class and foo.

…or, also acceptible, if the data- attribute prefix is required, i.e to extract the value from <element data-*="value">

The latter is accessible via CSS so it would make sense to also allow access to it via a wiki command. Here’s a writeup about this.

Here is an article that gives examples why this would be useful.

Is there a security risk I don’t see here or is it reasonable to propose such a widget (or other mechanism) in TW?

Thanx

#2

Could you please explain your intended use case with a concrete example?

Where and when do you want to access the element attributes, and what do you want to then do with them? As it stands, the question posed is to vague to be answered. You mention a wiki command but surely you don’t mean node.js commands?

#3

Thanks for reply! “Command” might be the wrong term, I just mean an invocation to “do” something (in this case extract the values) in the wikitext, such as <$widget... or <<macro... etc. “Transclude” the attribute value, if you will.

A concrete example showed up in scrolly: The user must wrap his to-be-scrolled text in the custom html element <scrollbar> and I want the user to be able to specify there what height the construct should have, like e.g so <scrollbar height=50vh>. Currently, the height is hard coded in the accompanying stylesheet, including sizes for subsequent items in the style defs that depend on the outer height.

BTW, maybe there already exists a mechanism in TW to read data-* attribute values used in Custom styles by data-tags ?

#4

This example isn’t as clear to me as you might imagine. I understand the user requirement to specify a height, however it still isn’t clear where you want to later access this height and what you want to do with it. Do you want to access it in a stylesheet? If so, how would you know which instance of you want to retrieve properties from? Or do you want to use the user specified attribute to set a style attribute on the element itself? Or on another element?

The chances that I have done work in the area that interests you seems pretty high, however it is impossible to be of further help without understanding what you are trying to do. Do you perhaps want to set a CSS variable via an element attribute and then use that variable to set CSS values within that element?

Again, read the attribute where and when, and in order to use how? Is it in an action string? In a stylesheet? In a filtered transclusion to assign an element attribute?

Edit: the custom tag approach makes me think you would be well served by the parametrized transclusion work. The user could specify a value as a widget attribute and it could be available as a variable everywhere within that widget to use as necessary.

1 Like
#5

You can already do this, but with css only. See CSS variable : Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

Here’s an example:

<div class="mydiv" style="--size:100px;">A div</div>

$$$text/vnd.tiddlywiki
\rules except dash
<style>
.mydiv{
width:var(--size);
background:red;
aspect-ratio:2/1;
}
</style>
$$$

Be carefull of wikification of the -- into –, you can use the pragma \rules except dash to keep them as-is, use a typed block or use backticks.

I use this for my custom links icon: Demos — Q&A and tools for tiddlywiki

You can also refer to attribute with the css function attr(), but it has some limitations.

2 Likes
Documentation tiddlers on TiddlyWiki.com in need of work (please contribute to the list)
#6

Just a fast shot without reading the thread. Only read the OP.

\define myClass() myclass
\define bar() bar

<div class=<<myClass>> foo=<<bar>>>

</div>

Since the vars are local to this tiddler you can access them everywhere

#7

Again, your reply is much appreciated!

Yes, I have only considered that it would be the stylesheet that should access it (but, of course, now that you ask I can’t help but wonder if it would be useful elsewhere? …but that is not what I have in mind currently)

And yes, only the element wherein the user states the value should be affected.

P.S I note @telumire 's reply so I will try it out before it is worth bothering more with the OP. It might suffice. Thanks @telumire

#8

Yahoo! CSS variables seem to do the trick.

Much thanko to @saqimtiaz , @telumire and @pmario

1 Like
#9

User can set $:/config/scrolly/stc-height to eg: 50vh somewhere

You can create a stylesheet similar to TW based CSS

title: my-classes
tags: $:/tags/Stylesheet

.myClass {
  height: {{$:/config/scrolly/stc-height}};
}

Did test it and it works

3 Likes