Adding event listener to images

manojdcoder
Posts: 63
Joined: Thu Oct 29, 2020 12:01 am

Adding event listener to images

Post by manojdcoder » Fri Nov 13, 2020 9:51 pm

I would like to detect when a user clicks or double click on an image in DITA document. Any points how it could be done?

cristi_talau
Posts: 329
Joined: Thu Sep 04, 2014 4:22 pm

Re: Adding event listener to images

Post by cristi_talau » Mon Nov 16, 2020 7:47 pm

Hello,

Currently, there is no API to intercept mouse events on an image. To implement such API we need to understand your use-case better:
  • Would it be sufficient to call sync.actions.AbstractAction when the use double-clicks the image?
  • Do you want to do a specific thing, like turn resize handles on?
As a workaround you can implement a custom form control that renders the image and reacts to editing events. This is the approach we did for MathML [1] and embedded SVG images [2].

Best,
Cristian

[1] https://github.com/oxygenxml/web-author-mathml-plugin
[2] https://github.com/oxygenxml/web-author-svg-plugin

manojdcoder
Posts: 63
Joined: Thu Oct 29, 2020 12:01 am

Re: Adding event listener to images

Post by manojdcoder » Tue Nov 17, 2020 9:17 pm

Yes, basically I would like to call sync.actions.AbstractAction with intention to switch current image with a different one using a custom file chooser dialog.

cristi_talau
Posts: 329
Joined: Thu Sep 04, 2014 4:22 pm

Re: Adding event listener to images

Post by cristi_talau » Wed Nov 18, 2020 6:20 pm

Hello,

Starting with version 23.0 (to be released soon), Web Author can be configured to display a contextual floating-toolbar when the user selects an image (e.g. by clicking on it). This floating toolbar could contain a button to trigger the "Replace Image" action that you plan to implement. Do you consider this behavior sufficient?

The only problem is that currently, the image is not selected when the user clicks it. We have a registered issue to fix this. Meanwhile, you can use the following code snippet in a plugin:

Code: Select all

// This code uses undocumented API!!
document.onclick = function(e) {
    if (e.target.classList.contains('oxy-img')) {
        var editor = workspace.currentEditor;
        var imgElement = sync.api.dom.createApiNode(e.target);
        var selectionManager = editor.getSelectionManager();
        var sel = selectionManager.createAroundNode(imgElement)
        selectionManager.setSelection(sel);
    }
};
Best,
Cristian

manojdcoder
Posts: 63
Joined: Thu Oct 29, 2020 12:01 am

Re: Adding event listener to images

Post by manojdcoder » Wed Nov 18, 2020 11:32 pm

It worked perfectly, thank you.

Gabriel Titerlea
Posts: 53
Joined: Thu Jun 09, 2016 2:01 pm

Re: Adding event listener to images

Post by Gabriel Titerlea » Mon Mar 08, 2021 5:21 pm

Hello,

We have released Oxygen XML Web Author 23.1 [1]. Among other fixes, clicking an image selects the whole image element now.
So you can write a CSS rule that targets selected images to add your custom floating toolbar [2] near them.

Best,
Gabriel

[1] https://www.oxygenxml.com/xml_web_autho ... 3.1.0.html
[2] https://www.oxygenxml.com/doc/versions/ ... perty.html

Post Reply