Develop Reference

OnAction event on tinymce editor v6 for custom button is not working

I am trying to get the click event of the tinymce custom button while building a plugin.
My code snippet looks like:
const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
Can Anyone help me with this?
I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working

const openDialog = () => editor.windowManager.openUrl({
type: 'panel',
title: 'Example plugin',
url : '/vendors/tinymce/plugins/gallery/dash.html',
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'custom',
text: 'Select',
buttonType: 'primary',
onAction: function(api) {
const data = api.getData();
console.log('Custom button clicked');
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
}
],
});
tinymce.PluginManager.add('yourparams', function(editor, url) {
editor.addButton('your_button_name', {
text: 'Open Dialog',
icon: false,
onclick: function() {
openDialog();
}
});
});
TinyMCE plugin defined using tinymce.PluginManager.add(), this method add new button in editor toolbar with respect to editor.addButton() method, onclick open the OpenDialog() function when you clicked on it.

Web Notification Display Duration

I am sending a notification web. I want to display up to ten minutes if the user does not click on the notification.
I used setTimeout, but it is displayed for about 15 seconds and then hidden.
please guide me.
This is my code:
function notify(title, message, link) {
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
}
var notify = new Notification(title, option);
notify.onclick = function () {
window.open(link, '_blank');
notify.close();
};
notification.onshow = function () {
setTimeout(notification.close, 600000);
}
}

i have update your code. May this helps you !
var options = {
body: "My notification message",
dir : "ltr",
requireInteraction: true
};
var notify = new Notification('Hello User', options);
notify.onclick = function () {
notify.close();
};
notify.onshow = function () {
setTimeout(()=>{
notify.close();
}, 15000);
}

Just add the property requireInteraction.
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
requireInteraction: true,
}
The requireInteraction read-only property of the Notification
interface returns a Boolean indicating that a notification should
remain active until the user clicks or dismisses it, rather than
closing automatically.
See here: https://developer.mozilla.org/en-US/docs/Web/API/notification/requireInteraction

Composite Control event is not triggering

i have a control as below
i need to fire the event closed when i click on the close icon press
sap.ui.define(["sap/ui/core/Control",
"sap/m/Carousel",
"sap/m/Panel",
"sap/m/Toolbar",
"sap/ui/core/Icon",
"sap/m/Label",
"sap/m/Button",
"sap/m/ToolbarSpacer"], function (Control,Carousel,Panel,Toolbar,Icon,Label,Button,ToolbarSpacer) {
"use strict";
return Control.extend("com.example.Control", {
metadata : {
aggregations : {
_panel : {
type : "sap.m.Panel",
multiple: false,
visibility:'hiddden'
}
},
events : {
closed : {
}
}
},
renderer : function (oRM, oControl) {
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.addClass("sapUiSizeCompact");
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_panel"));
oRM.write("</div>");
},
init : function () {
var that = this;
var _carousel = new Carousel({
pages : [new Label({
text : "Test"
}),
new Label({
text : "Test"
})]
});
var _closeIcon = new Icon({
src : "sap-icon://decline",
press :jQuery.proxy(this.onCloseInfoWindow,this)
});
var _toolBar = new Toolbar({
content : [
new Label({
text :"Information"
}),
new ToolbarSpacer(),
_closeIcon,
]
});
var _panel = new Panel({
headerToolbar : _toolBar
});
_panel.addContent(_carousel);
this.setAggregation('_panel',_panel);
},
onCloseInfoWindow : function(oEvent){
}
});
});
The onCloseInfoWindow is not triggering the press event when click on close icon
do i need to do some add the icon also as aggregation and need to render?

Do you want to fire the closed event that you have created in your custom control ?
Use the below code for calling the closed event from your custom control:
onCloseInfoWindow : function(oEvent){
//console.log('Called');
this.fireClosed(oEvent);
}
View XML: here, Control is my name for your control.
<c:Control closed='onClose'/>
Controller:
onClose:function(oEvent) {
console.log('Closed Called!');
}

Why are you using press :jQuery.proxy(this.onCloseInfoWindow,this) ? I've never used that jQuery.proxy in ui5.
For triggering the close function, you could do
var _closeIcon = new Icon({
src : "sap-icon://decline",
press : function(oEvent){
this.fireClosed(oEvent);
}.bind(this)
});

Duplicate id when creating a dialog in OpenUI5

I need help with OpenUI5. I created button in View and by clicking on button it creates Dialog window and throws an error so I cant proceed to functionality of the Dialog.
Button in view:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
tap="sendToEmail"
press="sendToEmail"
icon="sap-icon://email">
Function in Controller:
sendToEmail: function() {
var email = new Dialog({
title: 'שליחת תוצאות לדוא"ל',
type: 'Message',
content: [
new Input('submitEmailInput', {
liveChange: function (oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'דואר אלקטרוני'
})
],
beginButton: new Button({
text: 'שליחה',
enabled: false,
icon: 'sap-icon://email',
press: function () {
//var sText = sap.ui.getCore().byId('submitEmailInput').getValue();
//MessageToast.show('Email is: ' + sText);
// here comes the API request
email.close();
}
}),
endButton: new Button({
text: 'סגירה',
icon: 'sap-icon://decline',
press: function () {
email.close();
}
}),
afterClose: function () {
email.destroy();
}
});
email.open();}
The error: duplicate id
Many thanks!

you have attached the same event handler to "tap" and "press" events so sendToEmail is being called twice (and the second time the control with the same ID already exists)... remove "tap" as this is depreciated, so you should end up with:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
press="sendToEmail"
icon="sap-icon://email">

I can't close dialog in jointJS

Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?

The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);

I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},