I found some information on CKEditor4 on trapping a clicked tool on the CKEditor toolbar but the v5 rewrite means this no longer works:
editor.on('afterCommandExec', handleAfterCommandExec);
function handleAfterCommandExec(event)
{
var commandName = event.data.name;
// For 'bold' commmand
if (commandName == 'bold')
alert("Bold button pressed!");
}
Are there any examples of working CKEditor 5 code to detect when a tool has been clicked? I'm actually trying to trap when someone clicks Track Changes to show the changes sidebar but hide it otherwise.
Maybe this works
const command = editor.commands.get('bold')
command.on('execute', () => {
console.log('Bold has been executed')
})
Related
Ran into the issue, where the test code should click the button Process in the iframe. Used npm i cypress-iframe lib, but came up to nothing. Cypress could not find the button.
Tried cy.iframe('[class="resp-iframe"]').find('resp-iframe[id="submit"]')
HTML of the problem
Tried the other ways to click on iframe button:
cy.get('iframe[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
cy.wrap($body).find('resp-iframe[class="btn btn-block btn-primary"]').eq(0).click();
})
also
cy.get('[class="resp-iframe"]').then($element => {
const $body = $element.contents().find('body')
let stripe = cy.wrap($body)
stripe.find('[class="resp-iframe"]').click(150,150)
})
and
cy.iframe('#resp-iframe').find('[name="submitButton"]')
Error
Error 2
Updated FYI:
The first part of code - clicking the Google button in bottom-right:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
Then, waiting for secure payment preloader to finish up:
cy.wait(20000)
Then, trying to catch the Process button by suggestions:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
or
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
whole code part looks:
const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('[id="popup-contentIframe"]')
.its('0.contentDocument.body')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap)
}
getIframeBody().find('[id="payWithout3DS"]').click()
cy.wait(20000)
cy.iframe('[name="AcsFrame"]').find('#submit').click()
But still, getting:
Maybe anyone had something like that?
Thanks.
How about you try this:
cy.iframe('[name="AcsFrame"]').find('#submit').click()
You don't need to repeat the resp-iframe inside the .find().
The selector .find('resp-iframe[id="submit"]') means look for HTML like this: <resp-iframe id="submit"> but the element you want is <input id="submit">.
Everything else looks ok
cy.iframe('[class="resp-iframe"]').find('[id="submit"]')
I am using echarts to visualize multiple line-charts. When I click exactly on a datapoint I am able to select a specific line chart. However If I click elsewhere on the line, where there in no datapoint associated, the chart in not selected. I know there is a focus feature by hovering the mouse. I want the same functionality using the click event.
I am using the following method, but I am not sure how to implement it.
myChart.getZr().on('click', params => {
//to be implemented
})
Here is the configuration example for the hovering effect on echarts:
https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis
I solved this with filled-area
I put areaStyle: {} in series' option
then add the following event handler like this
myChart.getZr().on('click', function (params) {
Object.keys(params.target).filter(key => key.includes(
'__ec_inner_')).filter(key => params.target[key]
.seriesIndex != undefined).forEach(key => {
console.log(option.series[params.target[key]
.seriesIndex].name)
})
});
I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀
How to remove defaut context menu in vala?
https://valadoc.org/webkit2gtk-4.0/WebKit.ContextMenu.html
this code, not working
var cm = new WebKit.ContextMenu();
cm.remove_all();
According to the documentation, you could do something like that.
my_web_view.context_menu.connect ((menu, evt, hit_test) => { return true; });
This signal is emitted every time a context menu is about to be shown. Returning true in the handler will just prevent the menu to appear.
I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">