I am trying to have a function fire based on what selection is made in a sweetalert2 dialog with select options. For example - in the below - if the user selects Apple then a function called red is fired, bananas a function called yellow is fired, grapes a function called purple is fired. Is this possible and if so how would I do this?
(async () => {
const { value: fruit } = await Swal.fire({
title: 'Select field validation',
input: 'select',
inputOptions: {
'Fruits': {
apples: 'Apples',
bananas: 'Bananas',
grapes: 'Grapes'
}
},
inputPlaceholder: 'Select a fruit',
showCancelButton: true,
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
})()
Related
I have a form and I am trying to apply mask when submit button is clicked but somehow mask is not displaying on form.
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
It is working in panel but in form, we are not getting anything.
Thanks in advance.
You need to call show method on Ext.LoadMask instance.
Example on https://fiddle.sencha.com/#view/editor&fiddle/3cuq
let target = Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 400,
height: 400
});
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
objMask.show();
I am currently trying to write a plugin for the CKEditor 5 to support automatic translations. I was able to find out how to write plugins and how to create dropdowns in the documentation.
But in the documentation there is no mention (or I missed it) how to be informed about a click on the values:
There is an Execute Handler for the button that opens the dropdown, but how do I register a listener for a click on one of the values?
Can I assign an id or similar to my items to recognize the click on the right element of the dropdown?
Here's the code that I was able to build based on the documentation:
class Translation extends Plugin {
init() {
this.editor.ui.componentFactory.add('translate', (locale) => {
const dropdownView = createDropdown(locale);
dropdownView.buttonView.set({
icon: languageIcon,
label: 'Translate',
tooltip: true,
});
const items = new Collection();
items.add({
id: 'en', // how to assign id ???
type: 'button',
model: new Model({
withText: true,
label: 'English'
}),
});
items.add({
id: 'es', // how to assign id ???
type: 'button',
model: new Model({
withText: true,
label: 'Spanish'
}),
});
addListToDropdown(dropdownView, items);
// callback for click on item ????
dropdownView.on('click', (event) => {
console.log('click', event);
});
return dropdownView;
});
}
}
You can use DropdownView.on() method to listen to the execute event.
And, use EventInfo.source property to get the object that is clicked and then use its property e.g. id or label to identify it.
For example:
const items = new Collection();
items.add( {
type: 'button',
model: new Model({
id: 'en', // id
withText: true,
label: 'English',
})
} );
items.add( {
type: 'button',
model: new Model({
id: 'es', // id
withText: true,
label: 'Spanish'
})
} );
addListToDropdown(dropdownView, items);
dropdownView.on('execute', (eventInfo) => {
const { id, label } = eventInfo.source;
if ( id === 'en' ) {
console.log('Object (en):', label);
} else if ( id === 'es' ) {
console.log('Object (es):', label);
}
});
Here's the complete working example with ClassicEditor (tested):
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Model from '#ckeditor/ckeditor5-ui/src/model';
import Collection from '#ckeditor/ckeditor5-utils/src/collection';
import { createDropdown, addListToDropdown } from '#ckeditor/ckeditor5-ui/src/dropdown/utils';
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
const Translate = 'translate';
class Translation extends Plugin {
init() {
console.log('Translation initialized!');
this.editor.ui.componentFactory.add(Translate, (locale) => {
const dropdownView = createDropdown(locale);
dropdownView.buttonView.set({
label: 'Translate',
withText: true,
});
const items = new Collection();
items.add( {
type: 'button',
model: new Model({
id: 'en',
withText: true,
label: 'English',
})
} );
items.add( {
type: 'button',
model: new Model({
id: 'es',
withText: true,
label: 'Spanish'
})
} );
addListToDropdown(dropdownView, items);
dropdownView.on('execute', (eventInfo) => {
const { id, label } = eventInfo.source;
if ( id === 'en' ) {
console.log('Object (en):', label);
} else if ( id === 'es' ) {
console.log('Object (es):', label);
}
});
return dropdownView;
});
}
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Translation ],
toolbar: [ Translate ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
Console output after clicking both items:
Object (en): English
Object (es): Spanish
You can use execute. it will fire an event when the toolbar button or list item is executed.for listView It fires when a child of some ListItemView fired execute. for toolbarView It fires when one of the buttons has been executed. execute will return EventInfo object when event fires. Also, there is off() and stop() method to de-register the event listener.
Note: Only supported when dropdown has list view added using addListToDropdown or addToolbarToDropdown.
Here is the snippet, give it a try.
this.listenTo( dropdownView, 'execute', eventInfo => {
console.log(eventInfo.source);
} );
----------------------------------------------------------- OR ------------------------------------------------------------------
dropdownView.on('execute', eventInfo => {
console.log(eventInfo.source);
} );
I want to implement a method that cancels moving to the next row if data has changed.
My thought was to use the on-current-change event as this provides me with the oldCurrentRow.
What event should I emit with what parameters to achieve staying on the last highlighted row.
You can find a fiddle here https://jsfiddle.net/arjanno/pdazb5kf/28/
Key is what happens here
onCancel: function () {
//Move back to oldCurrentRow
this.$Message.info(`Clicked cancel`);
}
As long as you don't set data dirty you should be able to click on any row.
When you click Dirty it should show a modal asking you if you want to lose your changes.
On cancel I want to stay on the row I was before clicking on another row.
I don't think we can know the index of the row by the data the on-current-change callback gives us. This can/should be changed since its useful, fell free to open a issue for it.
In any case what you can do is to compare the last selected row with the current data set and use the _highlight key to tell i-table which row to highlight.
Example: https://jsfiddle.net/pdazb5kf/40/
The code would be:
function rowToString(row) {
const data = ['name', 'age', 'address'].map(key => row[key]);
return JSON.stringify(data);
}
export default {
data() {
return {
columns3: [{
type: 'index',
width: 60,
align: 'center'
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
dirty: false,
modal1: false,
data1: [{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02',
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
methods: {
onCurrentChange: function(currentRow, oldCurrentRow) {
this.lastIndex = rowToString(oldCurrentRow);
if (this.dirty) {
this.modal1 = true;
}
},
onCancel: function() {
//Move back to oldCurrentRow
this.$Message.info(`Clicked cancel`);
this.data1 = this.data1.map((row, i) => {
return {
...row,
_highlight: rowToString(row) === this.lastIndex
}
});
}
}
}
I'm developing an ionic 3 application like instagram, to let users pick photos from their phone album, while they can preview the photo on the same page.
I've tried cordova-plugin-photo-library here, but there's no limit function so I have to get all photos from user album, which could be very large volume. Users have to wait until all photos are loaded before they can click and select one picture. This is really bad user experience.
Anyone has an idea? Thanks.
you can use base64 image
# view
<img *ngFor='let image of images' [src]="DomSanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,'+image)" style="width: 100px;height:100px;" [hidden]="lastImage === null">
# choice select method
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'choice select method',
buttons: [
{
text: 'gallery',
handler: () => {
this.takePicture(this.camera.PictureSourceType.SAVEDPHOTOALBUM);
}
},
{
text: 'take image',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType) {
// Create options for the Camera Dialog
var options = {
quality: 100,
sourceType: sourceType,
encodingType: this.camera.EncodingType.JPEG,
allowEdit: true,
saveToPhotoAlbum: true,
targetWidth: 600,
targetHeight: 600,
correctOrientation: true,
destinationType: this.camera.DestinationType.DATA_URL
};
// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.SAVEDPHOTOALBUM) {
this.images.push(imagePath);
} else {
this.images.push(imagePath);
}
}, (err) => {
this.presentToast('Error while selecting image.');
});
}
Is it possible to change the source in a Handsontable instance when inside an event?
Below is my code:
var container2 = $('#example2');
var hot2 = new Handsontable(container2, {
data: {},
minRows: 5,
colHeaders: ['Car', 'Year', 'Car Color'],
columns: [
{
type: 'autocomplete',
source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
strict: true,
allowInvalid: false
}, ,
{},
{
type: 'autocomplete',
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
strict: true,
allowInvalid: false
}]
});
Handsontable.hooks.add('afterChange', afterChangedCallback, hot2);
function afterChangedCallback(p) {
console.log(p);
if (p[0][1] == 0) {
alert('This means the first column has changed, I now want to update the colors here');
}
}
When a user selects a different car brand, I only want to populate the dropdown of "Car Color" with certain colors. Thus, not all car brands has the same colors.
EDIT
I updated the callback function to this based on the accepted answer:
function afterChanged(p) {
console.log(p);
if (p[0][1] == 0) {
hot2.updateSettings({
cells: function (row, col, prop) {
if (row == p[0][0] && col == 2) {
var cellProperties = {};
cellProperties.source = ['red', 'yellow', 'blue'];
return cellProperties;
}
}
});
}
}
Yup, you can use the updateSettings method to change the source of an entire column or particular cell. You probably want per-cell so I would do:
hot.updateSettings({
cells: newCellDefinitionFunction()
})
Of course this new definition is up to you to figure out. It could just be returning the same cellProperties each time but check on some global array for what sources to use for which cells.