Clickable SVG

Here we take a look at how we use javascript to make an svg interact with wiki:

Below I take a look at the javascript and logic in Wards quick demo to understand what is going on.

# Wards Demo

In this test example we retrieve an svg from an Assets folder and display it in a Frame with an html script that handles clicks and opens ghost pages describing what was clicked. github

http://ward.dojo.fed.wiki/assets/pages/clickable-svg/demo.html HEIGHT 350

# Pulling the code apart

This quick demo listens for `onclick` attached to the dive element (see demo.html):

<div id="diagram" onclick="poke(event)">

Here is the function where we first get some information we may wish to use or display:

function poke(event) { let target = event.target let parent = target.parentElement let kind = parent.getAttribute('class') let id = parent.getAttribute('id') ...

This is the part that opens a ghost page:

let story = [ {type:'paragraph', text}, {type:'code',text:json} ] let elements = parent.outerHTML for (let line of elements.split(/\n/)) story.push({type:'paragraph', text:line}) open({title, story}, event.shiftKey)

pages/clickable-svg

# To do Extra credit. We might read the sitemap with each click to determine if we should just open an exiting page rather than making a new one. The user might have saved notes on the page which we don't want to clobber.

Thee part of the code I don't understand yet is:

main() const dup = obj => JSON.parse(JSON.stringify(obj)) async function main() { let svg = await fetch(`http://.svg`).then(res => res.text()) diagram.innerHTML = svg }

But that will bee part of my joy learning javascript :)