[Help] libTokenMarkers and CSS

I'm attempting to convert the RoundMaster API to use the libTokenMarkers API to easily add new token marker libraries for DMs & Game Creators to take advantage of.  However, there are functions where the CSS <a> Anchor element is used to create buttons of the image of the token markers in a menu for Players to select the marker.  The original approach for token marker management adopted from the TrackerJacker API was to hold the raw URLs of the token markers, which could easily be used with the background-image: url() style element within the Anchor element to set the image.  This does not work with the .getHTML() method of the token object returned by the libTokenMarkers.getStatus() function. This was the original statement, with e.img being the image url for the token marker: <a style="font-size: 0px; background: url('+e.img+') center center no-repeat; width: 21px; height: 21px" href="'+command+'"><img style="text-align: center;" src="'+e.img+'"></img></a> I note there is an optional [CSS] parameter to the .getHTML() method, but I can't see any documentation for this parameter.  Can this help in any way, or is it just a reference to a style sheet? Can #TheAaron or anyone else give me some tips as to how to put the token marker images in custom buttons using the Anchor element or otherwise?

The getHTML function acts like a mask because for markers like the simple circles of color and the X, there is no image. Those are rendered via CSS. So getHTML returns the proper HTML regardless of whether there is an image to use as the source or there is a circle that needs to be drawn with CSS. (There are different classes of token marker - image based, color based, etc. - which use the same function but build different output.) I haven't looked at TrackerJacker to know what it would do with the markers that don't have an image to store.... but here's one approach:     const decomposeStatuses = (list) => {         return list.split(/\s*,\s*/g).filter(s => s.length)             .reduce((m, s) => {                 let st = libTokenMarkers.getStatus(s.slice(0, /(@\d+$|:)/.test(s) ? /(@\d+$|:)/.exec(s).index : s.length));                 if (!st) return m;                 st.num = /^.+@0*(\d+)/.test(s) ? /^.+@0*(\d+)/.exec(s)[1] : '';                 st.getNum = function () { return this.num };                 m.push(st);                 return m;             }, []);     }; That will get you an array of returns from libTokenMarkers with the original functions (getHTML, getName, and getTag), as well as another that I wanted (getNum). Then when you need the token marker rendered, you call the .getHTML() function of the appropriate token marker. To pass CSS into the  style  argument of the getHTML() function, you're just passing CSS. You're properties will come at the end of the rendered HTML element, so they will overwrite whatever is pre-coded to be a part of it. For instance, here is the getHTML for a standard (image-based) marker: getHTML(scale = 1.4, style=''){   return `<div style="width: ${scale}em; vertical-align: middle; height: ${scale}em; display:inline-block; margin: 0 3px 0 0; border:0; padding:0;background-image: url('${this.url}');background-repeat:no-repeat; background-size: auto ${scale}em;${style}"></div>`; } You see how  style  is way out at the right, being inserted as a string. That means you could even overwrite the CSS already included (background-repeat and background-size). So pass the CSS that you need to alter the token marker to look the way you want it to, and it will be applied. That's just my 2 cents... I'll see if I can poke Aaron to see if he has something to say.

What Tim said. =D   Sorry for the delay, trying to close on a house this week and it's eating my time (and Russ Hapke introduced me to Valheim... RIP my meager free time...).  I could likely introduce a function that returns an image url if one exists, or a clear image if one doesn't, or similar.  The X and Color Splats throw a wrench in things... 

timmaugh said: The getHTML function acts like a mask because for markers like the simple circles of color and the X, there is no image. Those are rendered via CSS. So getHTML returns the proper HTML regardless of whether there is an image to use as the source or there is a circle that needs to be drawn with CSS. (There are different classes of token marker - image based, color based, etc. - which use the same function but build different output.) ... Thanks!  That got me sorted, if only by realising I needed to look at the code for libTokenMarkers and realise there is a .url property for the token objects!  RoundMaster API now seems to be working with libTokenMarkers: needs some bench testing and then game-play testing with my group, but looks good for release fairly quickly as this is a fairly simple change.