A code sample: Providing viewers of a hosted TW with "save preferences" for palette

#1

A TiddlyWiki showing how we can let a viewer of an online TiddlyWiki save preferences for that TiddlyWiki to browser local storage, so the TiddlyWiki instance always appears, every visit, as the viewer prefers.

You’ll find everything at By Charlie Veniot — a TiddlyWiki coding sample

2 Likes
#2

Oops, I’ve got a wee bug in there I have to fix after supper.

EDIT:

  • bug fixed
  • now adding a way to remove a local storage item

EDIT 2:

  • was not happy with that first implementation, so I completely refactored the thing (see next post)
#3

For the luv o’ Pete, it has been like dancing with two left feet.

Anyway, that’s done and working A-1. (Wasn’t going for super-pretty, just aiming for decently functional).

The only thing that might be nice to have: don’t highlight the save button (after changing the palette) when the wiki is hosted on the web at a read-only place.

image
image724×468 32.6 KB

#4

@Charlie_Veniot I just had a look at your example and for other readers this solution is using some javascript macros to address local storage without using the Core Local storage plugin, Which I was inclined to think.

  • Thanks for Sharing.

May I ask where you sourced the JS Macros?

#5

I coded the JS macros.

1 Like
#6

For the giggles, I downloaded TiddlyWiki.com and uploaded a version of it with this code sample.

Try it out: copy of TiddlyWiki.com hosted at Neocities.

Although I like the idea of allowing viewers to access a site with their preferred appearance settings, there are two problems I can think of:

  • the appearance of a site often reflects “branding”, and letting viewers choose their preferred appearance does mean getting out of the “branding” concept
  • often times, it is easy to setup features that are intertwingled with a specific appearance, and that feature breaks when alternative appearances are selected (screenshot example below):

image
image1722×801 153 KB

Total aside: All of that has me thinking that TiddlyWiki.com may not be optimized for folk with visual impairments. That might be a good thing to look into.

#7

The specific display issue you illustrate in your screenshot is that the “Quickstart cards” text and svg icon color changes with selected palette, but the card backgrounds do not. As a result, the text icons are virtually impossible to see.

The TL/DR response is that the content in HelloThere was designed for use on TiddlyWiki.com with the default palette, and is simply not responsive to alternative palette selections.

Here’s some details about how this happens:

In the HelloThere tiddler, the Quickstart cards are displayed using this wikitext code:

<$list filter="[tag[Quick Start]]">
<$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
</$list>

Examing the tiddlers tagged with Quick Start shows that they each have a background-color field, but NOT color or text-color fields. Thus, the bordercolor and textcolor params passed into the flex-card procedure have no specified value.

The flex-card procedure is defined in $:/editions/tw5.com/wikitext-macros:

\procedure flex-card(class,bordercolor:"",backgroundcolor:"",textcolor:"",...)

and these parameters are used like this:

<div class="tc-card-accent"
   style.borderTop={{{ [<bordercolor>!is[blank]addprefix[5px solid ]] }}}
   style.background={{!!background}}
   style.backgroundColor=<<backgroundcolor>>
   style.color=<<textcolor>>
   style.fill=<<textcolor>>>

This means that when no specific parameter value is passed for textcolor, the card content uses the current pallete’s “foreground” color, which for the default “Vanilla” palette is #333333, but for a “dark” palette (e.g., “CupertinoDark”) that value is #FFFFFF. As a result, when that palette is selected, the text in the Quick Start card is white on a white background.

One possible “simple fix” for this is to edit HelloThere, and change the textcolor={{!!text-color}} parameter to a fixed value, such as textcolor="black".

A similar issue happens with the card further down in HelloThere that are used to show “Testimonials and Reviews”. When a “dark” palette is selected, the text content in these cards is not visible because the palette foreground color is light (e.g., #FFFFFF) and the cards use a light background. However, the “simple fix” suggested above (using textcolor="black") doesn’t work because of some CSS defined in $:/_tw5.com-styles, which includes this rule:

.tc-tiddlylink.tc-card:hover {
	color: #FFFFFF;
	background: #1E1E1E;
	...
}

which changes the card foreground and background colors on “mouseover”, resulting in black text on a dark background. Unraveling this color issue will take some more digging, since there are several different factors interacting (params, palette, and hover styles) to produce the displayed result.

-e

#8

I did create an issue at Github, so “the palette problem” will not be forgotten. [BUG] HelloThere Cards do not adjust colours to selected palettes · Issue #8629 · TiddlyWiki/TiddlyWiki5 · GitHub