Page 1 of 1
Adding event listener to images
Posted: Fri Nov 13, 2020 9:51 pm
by manojdcoder
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?
Re: Adding event listener to images
Posted: Mon Nov 16, 2020 7:47 pm
by cristi_talau
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
Re: Adding event listener to images
Posted: Tue Nov 17, 2020 9:17 pm
by manojdcoder
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.
Re: Adding event listener to images
Posted: Wed Nov 18, 2020 6:20 pm
by cristi_talau
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
Re: Adding event listener to images
Posted: Wed Nov 18, 2020 11:32 pm
by manojdcoder
It worked perfectly, thank you.
Re: Adding event listener to images
Posted: Mon Mar 08, 2021 5:21 pm
by Gabriel Titerlea
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