Hi Victor,
It seems the script tag doesn't work in Markdown. Do you have any workaround for that?
what tag?
Sorry I meant inline script html tag
ahh yes, it doesnt.
Well not as you would expect atleast. It will not run on load.
A workaround is to put your script in onload of an image. I did something like that here.
Becareful though... running js scripts onload can break the designer. (ex: don't do an alert)
"<img style='display:none' src='/favicon.ico' onload=\" your script \"></img>"
1 Like
Hi Victor,
Do you think it is possible to get the runtime width and height of an object with the Markdown trick?
What I really always want is to know the runtime of the view size itself(like embedded view) in runtime.
For example, if I put an invisible SVG with w: 100% h:100% in a view and use the .getTotalLength() method to get the actual size which triggers the code every time the size is changed I can get the view size.
Or may be something simpler.
Not 100% sure what you are trying to do here. but this should get you the some bounds on resize.
I forgot to check if it was the views or the markdown one. probably the view, (else you'll need to add an other parentNode)
You could also get the size of your svg component if it has a domID, you can change the queryselector to #id instead of [data-component-path] (think like css selectors)
value = #your view custom key name
code = "<img style='display:none' src='/favicon.ico' onload=\"const componentPath = this.parentNode.parentNode.parentNode.parentNode.getAttributeNode('data-component-path'); const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == componentPath.value.split('.')[0]).value; window.addEventListener('resize',function(){ const viewNode = document.querySelector('[data-component-path='+CSS.escape(componentPath.value)+']'); view.custom.write('"+value+"',{...viewNode.getBoundingClientRect().toJSON()});}) \"></img>"
return code
1 Like
Thanks, Victor, this new JS code injection trick of yours opens a lot of possibilities that are only possible by creating a module.
Hehe yes, its usefull to be able to have access to the source language/code of the frontend.
For bigger/complex things you are still better of with a module though 
I wonder is it possible to use your trick inside iframe?
If it is possible we can do anything and finally pass the result to perspective view params
I am not 100% sure what the goal is here, but what about these steps:
- Create a web-dev text resource that is the html page you are trying to build to interact with Perspective
- Show that text resource in an iframe
- Reference
parent.window.__client.pageto talk to the parent page for whatever reason - Use that reference to interact with the base page?
This sounds like what you are trying to do, but I am not 100% positive
It highly depends on the website inside the iframe.
Generally you wont have access to what is clicked inside it. Though some sites desinged to be used as iframes do have extra things that they expose.
Which you then could probably access with the javascript
Yes, exactly and what is the syntax to target view.custom.xxx properties?
I mean with parent.window.__client.page how can I read and write perspective view properties?
The point I want to write the iframe code myself to interact with perspective view.
Just read and write view.custom.xxx property inside JavaScript code inside iframe is enough for me.
If you can controll the Iframe, then i think your best bet will be to send a message to the parent from there.
And then in perspective use the jsinjection to read the messages.
iframe:
// Called from the iframe
const message = JSON.stringify({
message: 'Hello from iframe',
date: Date.now(),
});
window.parent.postMessage(message, '*');
perspective: (not tested)
window.addEventListener('message', function (e) {const data = JSON.parse(e.data); view.custom.write('key',data);})
something like this i guess:
value = #your view custom key name
code = "<img style='display:none' src='/favicon.ico' onload=\"const componentPath = this.parentNode.parentNode.parentNode.parentNode.getAttributeNode('data-component-path'); const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == componentPath.value.split('.')[0]).value; window.addEventListener('message', function (e) {const data = JSON.parse(e.data); view.custom.write('"+value+"',data);}); \"></img>"
return code
You can send message to the iframe with
(in the onload):
document.querySelector('#youriframeid').postMessage("+yourjsonstring+",'*')
And read it in the iframe also with the eventlistener
window.addEventListener('message', function (e) {const data = JSON.parse(e.data); ...})
you might be able to access the client directly, with window.frameElement and window.parent... but not sure if that will be possible. try this in your iframe i guess
const componentPath = window.frameElement.parentNode.getAttributeNode('data-component-path');
const view = [...window.parent.__client.page.views._data.values()].find(view => view.value.mountPath == componentPath.value.split('.')[0]).value;
view.custom.write('yourperspectivekey',data);});
3 Likes
I Wonder if it’s possible to trigger the native perspective message handlers this way, not sure if those are triggered in the front end of the backend
2 Likes
Pretty sure those are in the gateway backend, not in javscript frontend.
Hm though maybe you could access those in an other way through the client context.
definently not with a window.postMessage
1 Like
So it is not possible yet
This i have not found yet no.
Your iframe messages should work, i think
nice work.
Can you make it to also select alpha channel?
This colour picker only accept RGB and no option for opacity or alpha channel