3 ms·
>> It must be a real <a href> element that the user hovers over and clicks on For each <canvas> element that Scrawl-canvas wraps, it adds a hidden <nav> elemen
by rikroots 7y ago
>> It must be a real <a href> element that the user hovers over and clicks on
For each <canvas> element that Scrawl-canvas wraps, it adds a hidden <nav> element to the DOM, immediately after that <canvas> element. Creating a graphical entity with an anchor attribute will trigger the library to add an <a> element to the hidden <nav> element. When the user clicks on the graphical entity in the canvas, the library creates a new MouseEvent 'click' event and then dispatches it from the <a> element.
The anchors are not directly placed over the graphical entitys in the canvas, but they are there in the DOM.
>> Modifiers: Ctrl+click, Shift+click, Ctrl+Shift+click, that sort of thing, which change where the link will open—current window, new window, new background tab, new foreground tab, it’s up to the user agent to decide what it all means, and target=_blank is the only slight control authors can have.
For Chrome running on a Macbook Pro: Shift+click opens the link in a new window; Command+click opens the link in a new tab but remains on the original page. I've not tested this functionality yet for other browsers, or for any browser running in a different OS/device.
>> If you use open(…) or similar, it will do the wrong thing. open() is a very flimsy tool that has (or should have) very limited use. Browsers are likely to block it, though they may allow it to operate as part of an event handler.
The library makes no use of window.open(), or similar. Links are driven by MouseEvents:
let e = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
>> Concerning DOM elements matching the canvas contents, yes, that’s the approach that needs to be taken; and it needs to be taken. This leads me to suspect that for many applications minimising the part that happens in the canvas, or making an SVG/canvas hybrid, may be more sensible. The few examples I looked at seemed to start in the direction of doing this, but not take it as far as it needs to be taken to satisfy accessibility.
I am grateful for the feedback! If the responses I've given above indicate that my thinking is flawed, then it is much better for this flawed thinking to be exposed and examined - and, if possible, fixed in the near future - rather than letting them lie hidden and festering in the library, making it unusable for serious production sites.
- chrismorgan 7y agoInteresting. I had forgotten that synthesising events and dispatching them triggered the appropriate functionality. I knew it once, but for some reason I’d ended up thinking that .click() was special. Anyway, it’s not enough to simulate clicking on the anchor element, for two reasons: • As hitherto stated, the anchor element is not there under the mouse; so any other interactions definitely won’t work properly. e.g. hover should show the link destination in the status bar, and right click should open a context menu with items like “open link”, “open link in new tab”, “open link in private window”, “send link”, &c. I don’t believe that either of these can be triggered programmatically. • It doesn’t have the desired effect across all browsers. In fact, I find it surprising that a synthesised click event would have modifiers work in any browser, and I’m inlined to call it a bug. The synthesised event doesn’t have the modifiers like ctrlKey set on it, so if Chrome is trying to be helpful by guessing that you probably want the modifiers to apply even to the faked event (which is a dubious assumption) then it puts it at odds with event handlers, which will see events without ctrlKey et al. And if you try to set ctrlKey in Firefox (haven’t tried in any other browser) then it ignores the event (which I find a tad surprising, but I’m guessing it’s a form of browser hijack protection), so there doesn’t seem to be any way to make this simulation approach work in Firefox. There’s a lot you can do in browsers, but there’s also rather a lot of user agent functionality that can’t be faked, like <a href> and scrolling. And so for those sorts of things, I say: use the native functionality, and accept no substitutes. I am heartened to see how carefully you’ve been thinking all these things through. Nice job!