Where is the browse widget defined?

Developers
1

Folks,

I am likely to submit a GitHub issue in relation to the browse widget since it has a fixed Button label Browser... yet we can set various customisations see BrowseWidget

  • The different possible operations of the browse widget, different uses should be able to be reflected in the button for example Import JSON... Import CSV file...
  • At present only the tooltip is available

I would like to investigate how I/we my change or override this but I can’t find the source code in tiddlywiki

  • Thanks in advance
  • Do tell me how you found it, because I do not normally have this problem

[Update before Post]

The Import button displays a paperclip yet uses this widget, so it is already possible to rename the button by using;

<div class="tc-file-input-wrapper">
<$browse multiple accept=".json .tid .txt .csv" tooltip="Search for and Import one or more .json .tid .csv or .txt files"/>
Import Files
</div>
  • If this is the official way I would like to document it
  • If not I would like to add a label parameter to the browse widget.
2

Hi @TW_Tones I think you’re asking how to style the browse widget.

The background is that the browse widget is based on an HTML construct called the file input control (see MDN for details). It is a special type of HTML input button, and there is not a straightforward JavaScript API.

The default appearance of the <$browse> widget is just the plain file input control that is provided by the browser. CSS has to be used to style it, but the details are not the same as ordinary buttons:

With that background, the CSS that is used in the Vanilla theme makes more sense; it is just a variation of the standard approach for styling file inputs:

.tc-file-input-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
}

.tc-file-input-wrapper input[type=file] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 999px;
	max-width: 100%;
	max-height: 100%;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: pointer;
	display: inline-block;
}
2 Likes
3

Thanks @jeremyruston that explains it, reassuring to know it’s somewhat of an exception thus not so easy to find.

As noted elsewhere, such as a Documentation update it is important to close this widget <$browse/>.