I thought I’d create a wiki topic to post useful JS “hacks”. It’d be good to include methods using the Markdown component as well as Ben Musson’s Periscope module’s system.perspective.runJavaScript* methods, but either or is ok initially and others can update your wiki reply later.
What I had in mind was to have posts include the JSON for the Markdown component that includes the JS script within it, so that all you need to do is copy the JSON and paste it into your View.
E.g.
Example Markdown JSON
[
{
"type": "ia.display.markdown",
"version": 0,
"props": {
"style": {
"position": "absolute"
},
"markdown": {
"escapeHtml": false
}
},
"meta": {
"name": "JSInject_PowerChart_XTraceTagColours"
},
"position": {
"shrink": 0,
"basis": 0
},
"custom": {
"inlineJavascript": "(function() {\n function getPenColours() {\n const map = {};\n document.querySelectorAll('svg.pen-visibility-checkbox[data-pen-name]').forEach(svg => {\n const name = svg.getAttribute('data-pen-name');\n const fill = svg.style.fill;\n if (name && fill) map[name] = fill;\n });\n return map;\n }\n\n function colourXTraceLabels() {\n const penColours = getPenColours();\n document.querySelectorAll('.ia_powerChartComponent__xTrace__box__label').forEach(textEl => {\n const boldSpan = textEl.querySelector('tspan[style*="font-weight"]');\n if (!boldSpan) return;\n const penName = boldSpan.textContent.replace(/:\\s*$/, '').trim();\n if (penColours[penName]) {\n textEl.style.fill = penColours[penName];\n }\n });\n }\n\n if (window._xTraceObserver) window._xTraceObserver.disconnect();\n\n window._xTraceObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n const hasXTrace = [...mutation.addedNodes].some(node =>\n node.nodeType === 1 && (\n node.classList?.contains('ia_timeMarker') ||\n node.querySelector?.('.ia_timeMarker')\n )\n );\n const isInsideXTrace = mutation.target.closest?.(\n '.ia_timeMarker, .ia_powerChartComponent__xTrace__box'\n );\n if (hasXTrace || isInsideXTrace) {\n colourXTraceLabels();\n break;\n }\n }\n });\n\n window._xTraceObserver.observe(document.body, {\n childList: true,\n subtree: true,\n characterData: true,\n });\n\n colourXTraceLabels();\n })();"
},
"propConfig": {
"props.source": {
"binding": {
"config": {
"struct": {
"script": "{this.custom.inlineJavascript}"
},
"waitOnAll": true
},
"transforms": [
{
"code": "#\tcode = \"<img style='display:none' src='/favicon.ico' onload=\\\"\" + value.script.replace('\"', '"') + '\\\"></img>'\n#\t\n#\tcode = code.replace(\"\\n\", \"\").replace(\"\\t\", \"\").replace(\"\\n\", \"\").replace(\"\\r\", \"\").replace(\"\\r\", \"\").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \").replace(\" \", \" \")\n#\t\n#\treturn code\n\tscript = value.script\n\tscript = script.replace('\"', '"')\n\tscript = script.replace('\\n', '').replace('\\t', '').replace('\\r', '')\n\t\n\t# Collapse multiple spaces - repeat until stable\n\twhile ' ' in script:\n\t script = script.replace(' ', ' ')\n\t\n\tcode = '<img style=\"display:none\" src=\"/favicon.ico\" onload=\"{}\"></img>'.format(script)\n\treturn code",
"type": "script"
}
],
"type": "expr-struct"
}
}
}
}
]
This is the template that I use myself for Markdown JS hacking, and I just edit the custom.inlineJavaScript prop value with the JS script.
You need to make sure that the JS script is valid for inserting into a dummy DOM element’s onLoad script.
Please include a screenshot and a brief description of what the code does.
Please make sure to change your post to a wiki after posting so that others can edit if needed.
