Ionic 4 ion-action-controller prevent auto close on button click - ionic-framework

I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?

the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}

backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false

Related

Code migration from tinymce 4 to tinymce 5 - problem with action function (true / false)

I have a problem with migrating the plugin from tinymce 4 to tinymka 5. The console tells me "Uncaught (in promise) TypeError: btn.active is not a function"
I can not find an equivalent for tinymce 5. Can someone replace it?
Code below:
tinymce.PluginManager.add('phonelink', function(editor, url) {
// Add a button that opens a window
var linkText = "";
var linkTitle = "";
var link = "";
// tinymce.DOM.loadCSS(url + '/css/phonelink.css');
editor.ui.registry.addButton('phonelink2', {
text: 'asddas',
icon: 'image-options',
onSetup: updateOnSelect,
onAction: onClickPhoneButton
});
// Adds a menu item to the tools menu
editor.ui.registry.addMenuItem('phonelink', {
text: 'asddas',
icon: 'image-options',
context: 'tools',
onAction: onClickPhoneButton,
onSetup: updateOnSelect
});
function onClickPhoneButton(){
editor.windowManager.open({
title: '123213123',
body: {
type: 'panel',
items: [
{type: 'input', name: 'phone', label: 'Teléfono', value: link},
{type: 'input', name: 'showtext', label: 'Texto a mostrar', value: linkText},
{type: 'input', name: 'title', label: 'Título', value: linkTitle}
]
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
type: 'submit',
name: 'submitButton',
text: 'Stwórz',
primary: true
}
],
onAction: function(e) {
alert('Toggle menu item clicked');
},
onSubmit: function(e) {
var data = e.getData();
var hrefLink = '<a title="' + data .title + '" href="tel:+34' + data .phone + '">' + data .showtext + '</a>';
if(link !== ''){
editor.setContent(hrefLink);
}else{
editor.insertContent(hrefLink);
}
e.close();
}
});
}
function updateOnSelect() {
var btn = this;
const editorEventCallback = function (e) {
var node = editor.selection.getNode();
var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
btn.active(isTelLink);
if(isTelLink){
link = node.href;
link = link.replace("tel:+34", "");
linkTitle = node.title;
linkText = node.text;
}
};
editor.on('NodeChange', editorEventCallback);
return function (btn) {
editor.off('NodeChange', editorEventCallback);
}
}
});
I searched the documentation for a replacement, but found nothing.
TinyMCE 5 no longer passes the button and menu instance via this. Instead it passes an API instance as the first parameter, so you'll want to change your updateOnSelect function to something like this:
function updateOnSelect(api) {
const editorEventCallback = function (e) {
var node = editor.selection.getNode();
var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
api.setActive(isTelLink);
if(isTelLink){
link = node.href;
link = link.replace("tel:+34", "");
linkTitle = node.title;
linkText = node.text;
}
};
editor.on('NodeChange', editorEventCallback);
return function (btn) {
editor.off('NodeChange', editorEventCallback);
}
}
You'll note var btn = this has been removed and that the API to set an item as active is setActive instead of active. This can be found in the documentation here: https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton and https://www.tiny.cloud/docs/ui-components/menuitems/#togglemenuitems (see the API section in both links).
In the above, you may have noticed both reference "Toggle" items. That's another change in TinyMCE 5, as different types of buttons/menu items have a separate registration API. So you'll also need to swap to using editor.ui.registry.addToggleButton and editor.ui.registry.addToggleMenuItem. More details about that can be found here if needed: https://www.tiny.cloud/docs/migration-from-4x/#customtoolbarbuttons
Here's an example fiddle showing the changes mentioned above: https://fiddle.tiny.cloud/B5haab.
Hopefully that helps!

Sweet alert go back in queue

I have came up with a problem of going back in queue in sweet alert.
The code shows one big swal which on confirm shows user swal queue with three options. I need it to go to the first step of queue on cancel button.
I have found a solution with async function, but it is not working in my case (or I have made some mistake. ;) - https://jsfiddle.net/ad3quksn/252/ )
$("#ZKARobimy").click(function () {
swal({
title: "First decidable swal",
allowOutsideClick: false,
width: '70%',
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Go to yes function',
cancelButtonText: 'Go to no function',,
}).then((result) => {
if (result.value) //pressed confirm button
swal.mixin({
confirmButtonText: 'next step &rAarr;',
cancelButtonText: '&lAarr; back to settings',
showCancelButton: true,
reverseButtons: true,
progressSteps: ['settings', 'verify', 'ending'],
width: '70%',
allowOutsideClick: false,
}).queue([
{
title: "First in queue - settings",
html: document.getElementById("doingZKAIt").innerHTML,
onOpen: () => {
generujSMSzkaIT();
}, onClose: function (dismiss) {
if (dismiss == 'cancel') {
console.log("first in queue " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm(); //here i wanted to click confirm button in first swal - before queue
generujSMSzkaIT();
swal.close();
}
console.log("outside if - onclose first in queue")
}
},'swal with back to first one in queue', 'swal without back button'
]), function (dismiss) { //tried to set function for the swal.mixin on cancel button, but it is not working the way i want it to.
if( dismiss == 'cancel')
{
console.log("swal.mixin cancel " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm();
}
}
} else if (//pressed cancel button
result.dismiss === swal.DismissReason.cancel
) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
})
Is there any other way to go back in swal queue?
This is available in sweetalert2: https://sweetalert2.github.io/recipe-gallery/queue-with-back-button.html
const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
confirmButtonText: 'Forward',
cancelButtonText: 'Back',
progressSteps: steps,
input: 'text',
inputAttributes: {
required: true
},
reverseButtons: true,
validationMessage: 'This field is required'
})
const values = []
let currentStep
for (currentStep = 0; currentStep < steps.length;) {
const result = await swalQueueStep.fire({
title: `Question ${steps[currentStep]}`,
inputValue: values[currentStep],
showCancelButton: currentStep > 0,
currentProgressStep: currentStep
})
if (result.value) {
values[currentStep] = result.value
currentStep++
} else if (result.dismiss === Swal.DismissReason.cancel) {
currentStep--
} else {
break
}
}
if (currentStep === steps.length) {
Swal.fire(JSON.stringify(values))
}

Changing Ionic alert button class dynamically

Is there a way to dynamically add and remove a class from an Ionic alert button?
This is how I am adding buttons to Ionic alert -
const alert = this.alertCtrl.create({
title: 'Alert title',
cssClass: 'my-alert-class',
buttons: [
{ text: 'Button 1', handler: data => { return false; }, cssClass: 'some-class' },
{ text: 'Button 2', handler: data => { return false; }, cssClass: 'some-class' }
]
});
Notice the return false inside handler. This prevents the alert from getting closed(which is ok).
So, as the alert is not closed, I want to change CSS properties of that button just to identify which one got clicked.
I have an option of adding/removing event listeners in case if there is no sol
As I couldn't find any inbuild ways of doing this, I wrote followings to achieve the functionality.
const buttonElms: NodeList = document.querySelectorAll('.my-ionic-alert .alert-button-group .alert-button');
// add "click" event listener to each button
for(let index = 0; index < buttonElms.length; index++) {
buttonElms[index].addEventListener('click', this.selectedButtonHandler);
}
selectedButtonHandler = (event: MouseEvent)=>{
// handler for clicked button
let target: any = event.target; // target element
let siblings: HTMLCollection = target.parentElement.children; // list of all siblings
for(let index = 0; index < siblings.length; index++){
siblings[index].classList.remove('selected-button'); // remove selected class from all siblings
}
target.classList.add('selected-button'); // add selected class to currently selected item
};

is it possible to change button's text with $ionicPopup.confirm()?

I'm using $ionicPopup.confirm() but I would like to change "cancel's button" text. Is it possible to do so ?
I'm aware of .show() syntax:
buttons: [
{ text: 'Cancel' }
]
But it does not seem to work with .confirm() ...
Thank 4 the help
At least in the latest release of Ionic (1.0.0) you can do the following:
var confirmPopup = $ionicPopup.confirm({
title: 'Popup title',
template: 'Popup text',
cancelText: 'Custom cancel',
okText: 'Custom ok'
}).then(function(res) {
if (res) {
console.log('confirmed');
}
});
Here is the relative documentation.
UPDATE : on ionic 1.0.0, this is now possible, check here
showConfirm Options :
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
cancelType: '', // String (default: 'button-default'). The type of the Cancel button.
okText: '', // String (default: 'OK'). The text of the OK button.
okType: '', // String (default: 'button-positive'). The type of the OK button.
}
Yes you can do wathever you want, using ionic popup.show and bind the Cancel event.
$ionicPopup.show({
template: msg,
title: titleConfirm,
buttons: [
{ text: "BTN_NO",
onTap:function(e){
return false;
}
},
{ text: "BTN_OK",
onTap:function(e){
return true;
}
},
]
});
After investigation on the ionic popover.confirm function this is
not possible to customize it. The value of popover.confirm are hardcoded line 446
function showConfirm(opts) {
return showPopup(extend({
buttons: [{
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'button-default',
onTap: function() { return false; }
}, {
text: opts.okText || 'OK',
type: opts.okType || 'button-positive',
onTap: function() { return true; }
}]
}, opts || {}));
}
It's possible to do, you have to use the "type" thing inside the button
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-assertive',
onTap: function(e) {
$scope.request_form.abc = "accepted";
}
}
]
in the type part you have to give the class name , and you can change the color of the button.

Jquery datepicker keypress to trigger button

I have a datepicker that is bind to the textbox
MakeDateField: function () {
$(this).not(".dispField").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, yearRange: '-100:+20', onSelect: function () { $(this).blur(); } });
$(this).blur(function () {
$(this).val($.trim($(this).val()));
if (datePickerBlurFix == 0) {
datePickerBlurFix = 1;
if (isValidDate($(this).val()) == false) {
$(this).val(convertDate($(this).val()));
if (dateRegEx.test($(this).val()) == false && $(this).val() != '') {
if ($(this).val() != "today" && $(this).val() != "**No Access**") {
$(this).val('');
msgBox({ Msg: msgDateCheck, Title: applicationName + ' - Error', Width: 300, Type: 'warning' }, function () {
$(this).focus();
datePickerBlurFix = 0;
});
}
}
}
}
datePickerBlurFix = 0;
});
},
My problem is when I press enter, the datepicker will automatic select today date. But it doesn't go in to the following code
$("#<%=txtDateSendFrom.ClientID %>").keypress(function (event) {
if (event.which == 13) {
$("#<%=btnFilter.ClientID %>").trigger("click");
event.preventDefault();
}
});
No matter how hard I press "Enter". I think this is because it has lost focus, but if I add one $(this).focus() in to the datepicker. It also didn't work, plus the window of the datepicker will remain opened.
How can I solve this problem?
Thank You