We Keep Coding

CKeditor dialog Plugin dynamic content elements (Set on runtime like in onShow methode)

Actually, I want to show the attributes of clicked/selected element in the dialog, first, it does properly but when I close the dialog and open for any other element its show the prev attributes list because let listAttrElements = getListOfItems(elAttributes);
this line won't run again until reloading the page.
I just want to update the list whenever the modal opens for a single element, close open again for another element then values should be as per another element.
// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
let selection = editor.getSelection();
let element = selection.getStartElement();
let elAttributes = Object.keys(element.getAttributes());
let listAttrElements = getListOfItems(elAttributes);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Attributes',
minWidth: 400,
minHeight: 200,
// Dialog window content definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'basic',
// label: 'Basic Settings',
// The tab content.
elements: listAttrElements
}
],
// Invoked when the dialog is loaded.
onShow: function() {
console.log('here in on show');
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
CKEDITOR.dialog.getCurrent().reset();
},
onLoad: () => {
console.log('loaded')
}
};
});
function getListOfItems (attrObj) {
return attrObj.map ((el, index) => { return {
// Text input field for the abbreviation text.
type: 'checkbox',
id: index,
label: el,
// Called by the main setupContent method call on dialog initialization.
setup: function( element ) {
console.log('new setuop require')
this.setValue( element.getText() );
},
// Called by the main commitContent method call on dialog confirmation.
// set value onchange
commit: function( element ) {
element.setText( this.getValue() );
}
}});
}
Thanks in advance for the help!
https://github.com/ckeditor/ckeditor4/issues/4906#issuecomment-927666316

This is how I solved it:
editor.on('dialogHide', function (evt) {
if (evt.data.getName()=== 'abbrDialog') {
editor._.storedDialogs['abbrDialog'] = false
}
});

Electron app close dialog with message box confirmation

I use Electron v13.0.1 from this repo
Need close confirmation, use this implementation:
win.on('close', function (e) {
require('electron').dialog.showMessageBox(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
}).then(function (data) {
if (data.response === 0) {
e.preventDefault();
}
});
});
But when I click on the close button dialog appeared on second and the application close without any confirmation or rejection. In other words, the dialog does not create conjunction for close.
What is the problem with my solution?

The problem is that you are calling an asynchronous method and the event function continues execution and eventually returns, before any user input is given.
One way to solve this is to use the showMessageBoxSync function for synchronous operation. This will wait until user selects an option before continuing execution. Like below:
const { dialog } = require('electron');
win.on('close', function (e) {
let response = dialog.showMessageBoxSync(this, {
type: 'question',
buttons: ['Yes', 'No'],
title: 'Confirm',
message: 'Are you sure you want to quit?'
});
if(response == 1) e.preventDefault();
});

explicitly release sweetalert popup after ajax call

I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}

You should be able to close it like this
swal.close()

how to close sweet alert on ajax request completion

I am using Sweet-alert in my angular app.
function GetDataFromServer(url) {
SweetAlert.swal(
{
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
//SweetAlert.swal(
// {
// title: "",
// text: "data loaded",
// });
return response.data;
}
function exception(ex) {
return (ex);
}
}
Req #1 (Main Objective of my this post)
What I am looking for is when the ajax request completes i.e.,
controls enters in the then(), Sweet alert should automatically hide.
Req #2
Also while request processing, I don't want to have the Close pop-up button (Ok button) in the sweet alert.
As per the documentation,showConfirmButton: false should hide it but it's not.
Any help/suggestion highly appreciated.
Thanks.

For automatically hiding the pop-over when it's done, you should set your initial pop-over to a variable so you can access it later. Maybe:
function GetDataFromServer(url) {
SweetAlert.swal({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swal.close()
return response.data;
}
function exception(ex) {
return (ex);
}
}
It's right on: https://t4t5.github.io/sweetalert/ in the methods section near the bottom.
Since you don't have a specific 'way' you want to do hide the ok button and you're just looking for suggestions, you could always just use a little CSS to target it and give it the ol display: none; setup.

You can close current showing sweetalert by using below line of code anywhere you want.
swal.close();
That's it!

You can use the close method over the sweet object see the documentation in down part
https://t4t5.github.io/sweetalert/
swal.close(); --> Close the currently open SweetAlert programmatically.
self.showProgress = function(message) {
swal({ title: message });
swal.showLoading();
};
self.hideProgress = function() {
swal.close();
};

SweetAlert has close method if you check the docs at http://t4t5.github.io/sweetalert/
You can use SweetAlert.close() to close the sweetalert in angular.

If you use swal2 you can close it using Swal.close() from anywhere inside your code for closing it when ajax is complete I think the code below is an easy way:
$(document).ajaxComplete(function () {
Swal.close();
});

swal does not work with sync function (ex. get), you need make call get async
swal({
type: 'warning',
text: 'Please wait.',
showCancelButton: false,
confirmButtonText: "ok",
allowOutsideClick: false,
allowEscapeKey: false
}).then(function (result) {
if (result) {
setTimeout(function () {
$http.get(url)
}, 500);
}
});

if you are using the AngularJS library known as angular-sweetalert then use swal.close(); to close the alert window.
angular-sweetalert is a wrapper on the core sweetalert library package.

Cache the swal() to trigger it later.
function GetDataFromServer(url) {
let swalAlert = SweetAlert.swal; // cache your swal
swalAlert({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swalAlert.close(); // this is what actually allows the close() to work
return response.data;
}
function exception(ex) {
return (ex);
}
}

CKEditor only show dialog window once

Hello I have been stuck on this for the past day.
I made a plugin for the CKEditor, when a user clicks the record button, a dialog opens up with language selection. Once the user selects the language they begin recording their speech. The problem is when the user ends the speech recognition and they want to record sometime later they are again prompted by the dialog window to select a language again. I want to make it so when the user selects a language and they click record, the dialog window doesn't pop up again.
CKEDITOR.plugins.add('speechtotext', {
init: function(editor) {
editor.ui.addButton('RecordButton', {
label: 'Speech to Text',
command: 'record',
toolbar: 'insert',
});
//Button to end recording
editor.ui.addButton('StopButton', {
label: 'End Speech to Text',
command: 'stop',
toolbar: 'insert',
});
//Command to end Speech to Text Recording
editor.addCommand('stop', {
exec: function() {
//stopRecording();
}
});
//Register the "recordDialog", returns the Dialog object
CKEDITOR.dialog.add('recordDialog', function() {
//The definition of the Dialog(the dialog window itself).
return {
title: 'Speech to Text Language Selection',
contents:
[{
elements:
[{
type: 'select',
id: 'languageSelect',
label: 'Select Language',
items:
[
//items
],
default: 'english',
onChange: function() {
languageOption = this.getValue();
console.log(languageOption);
languageSelected = true;
}
}]
}],
//The code that will execute ok button of the dialog window is pressed.
onOk: function() {
//start recording(){}
}
};
});
if(languageselected === false){
//opens up dialog window to prompt user for language selection
editor.addCommand('record', new CKEDITOR.dialogCommand('recordDialog'));
}else{
editor.addCommand('record', {
exec: function() {
//startrecording without prompting user to select language again
}
});
}
}
});
Whenever i select a language i say languageSelected = true;
so that next time i'm not prompted for another language selection but this does nothing its like it never runs.
I'm starting to think that maybe I somehow have to destroy the plugin instance and reload it again so that next time it calls the 'record' command without the dialog.
if(languageSelected === false){
//opens up dialog window to prompt user for language selection
editor.addCommand('record', new CKEDITOR.dialogCommand('recordDialog'));
}else{
editor.addCommand('record', {
exec: function() {
//startrecording without prompting user to select language again
}
});
}
Any suggestions on how to get this working? Thanks!