We Keep Coding

facing some issue to set type on sweetalert2

Typescript gave me 2 errors in the toastMixin variable and into the animation object. I didn't find any solution to solve it.
Error:
let toastMixin: typeof Swal
No overload matches this call.
Overload 1 of 2, '(options: SweetAlertOptions<any, any>): Promise<SweetAlertResult<any>>', gave the following error.
Argument of type '{ animation: boolean; title: string; }' is not assignable to parameter of type 'SweetAlertOptions<any, any>'.
Object literal may only specify known properties, and 'animation' does not exist in type 'SweetAlertOptions<any, any>'.
Overload 2 of 2, '(title?: string | undefined, html?: string | undefined, icon?: SweetAlertIcon | undefined): Promise<SweetAlertResult<any>>', gave the following error.
Argument of type '{ animation: boolean; title: string; }' is not assignable to parameter of type 'string'.ts(2769)
Code: TS showing the error on let toastMixin and in animation object
export const errorHandle = (massage:string) => {
let toastMixin = Swal.mixin({
toast: true,
icon: 'success',
title: 'General Title',
animation: false,
position: 'top-right',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
if (massage === 'added') {
toastMixin.fire({
animation: true,
title: 'Successfully added'
});
} else if (massage === 'duplicate') {
toastMixin.fire({
title: 'You already added the developer',
icon: 'error'
});
} else if (massage === 'removed') {
toastMixin.fire({
animation: true,
title: 'Removed'
});
}
}

Because there shouldnt be an animation field in the param you pass to Swal, as shown here https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts#L442

The animation parameter has been removed, use showClass and hideClass instead:
Swal.fire({
icon: 'success',
title: 'I am not animated',
showClass: {
backdrop: 'swal2-noanimation', // disable backdrop animation
popup: '', // disable popup animation
icon: '' // disable icon animation
},
hideClass: {
popup: '', // disable popup fade-out animation
},
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>

Vue.js cannot add style from method

I'd like to add some styles into html element from methods:
<div class="add-profile-img" v-bind:style="getBackgroundImg()">
The method is:
getBackgroundImg: function() {
return {
width: 180px;
height: 180px;
background-color: 'yellow';
background-image:url(this.BASE_URL +'/uploads/noimg.gif');
}
},
However, I get
Syntax Error: Identifier directly after number (79:13)
77 | getBackgroundImg: function() {
78 | return {
> 79 | width: 180px;
| ^
How can I fix it?

Dimension in pixels need to be in string format so the function return a valid javascript object:
return {
width: '180px',
height: '180px',
'background-color': 'yellow',
'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}

can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)
data(){
return{
yourStyleVariable: {
backgroundColor: 'red'
}
}
}

Set minimum width of chrome app

I am trying to set the minimum width of a chrome app and I looked at some chrome documention and I implemented it into my chrome app like this:
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {
width: 800,
height: 600,
minWidth: 600
}
}
);
});
However I got the error:
Error
Error in event handler for app.runtime.onLaunched: Error: Invalid value for argument 2. Property 'bounds.minWidth': Unexpected property.
From my knowledge, this means that the property doesn't exist but this can't be the case as it's in the documentation. Maybe I implemented it wrong? Any help would be appreciated!

I found out that it's innerBounds I needed to use! Here is my code now:
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'mainWindow',
bounds: {width: 800, height: 600},
innerBounds: { minWidth: 800}
}
);
});

Replacing javascript Alerts with Kendo Notification

I'm wondering the best way to replace all my alert('error...') with kendo notifications, the easiest way.
so I can just do
myKendoAlert('my message', info); and I don't have to add a specific html div or span holder to each page.
currently I'm doing something like:
var popupNotification = $("#popupNotification").kendoNotification({
position: {
pinned: false,
bottom: 100,
right: 100
},
templates: [{
type: "info",
template: "<div>Test : #= myMessage #</div>"
}],
autoHideAfter: 0,
stacking: "up"
}).data("kendoNotification");
But I need to put this in a common javascript file with a function I can use on all pages. with, info, error, success... (and clear on success)

Just add a method to your namespace to do just that, and call it from where ever you need to.
Here is a sample that is similar to what I do, putting two methods, showSuccess and showError on the top level of the javascript namespace for my application (I use toastr, but same approach).
I have my app object on the window object, with two methods I can call from wherever.
http://jsbin.com/novena/1/edit

var notificationWidget = null;
function alert(message, type) {
if (notificationWidget == null) {
notificationWidget = $("#notification").kendoNotification({
button: true,
hideOnClick: true,
//appendTo: "#container",
//width: "30em",
position: {
pinned: true,
top: "5em",
left: null,
bottom: null,
right: 10
},
autoHideAfter: 8000
}).data("kendoNotification");
}
notificationWidget.show(message, type);
}

Calling methods of a configuration object that is passed to a function in JavaScript/jQuery

I have a funciton that accepts a configuration object which in turn generates a modal dialog with jQuery UI like so:
function modalDialog(settings) {
var options = $.extend({
selector: '.dialog', // the dialog element selector
disabled: false, // disables(true) or enables (false) the dialog
autoOpen: false, // dialog opens automatically when called (true), (false) dialog hidden until .dialog(open) method called
closeOnEscape: true, // dialog closes when focused and ESC key pressed
closeText: 'close', // specifies text for close button
draggable: false, // (true) dialog draggable by the title bar
resizable: false, // dialog is resizable
height: 'auto', // height of dialog in px
minHeight: false, // min-height in px
maxHeight: false, // max-height in px
width: 300, // width of dialog in px
minWidth: 150, // min-width in px
maxWidth: false, // max-width in px
modal: true, // disables other items on page
hide: null, // the effect to be used when dialog is closed
show: null, // the effect to be used when dialog is opened
position: 'center', // specifies where dialog should be displayed: single string, array of co-ordiantes, array of string values
title: '', // dialog title. Any valid HTML may be used
zIndex: 1000, // starting z-index for the dialog
stack: true // specifies if dialogs will stack on other dialogs
}, settings || {});
$(options.selector).dialog({
disabled: options.disabled,
autoOpen: options.autoOpen,
closeOnEscape: options.closeOnEscape,
closeText: options.closeText,
draggable: options.draggable,
resizable: options.resizable,
height: options.height,
minHeight: options.minHeight,
maxHeight: options.maxHeight,
width: options.width,
minWidth: options.minWidth,
maxWidth: options.maxWidth,
modal: options.modal,
hide: options.hide,
show: options.show,
position: options.position,
title: options.title,
zIndex: options.zIndex,
stack: options.stack,
create: function(event, ui){
if (typeof options.createCall == 'function') {
options.createCall.call(this);
}
},
open: function(event, ui){
if (typeof options.openCall == 'function') {
options.openCall.call(this);
}
},
beforeClose: function(event, ui){
if (typeof options.beforeCloseCall == 'function') {
options.beforeCloseCall.call(this);
}
},
close: function(event, ui){
if (typeof options.closeCall == 'function') {
options.closeCall.call(this);
}
},
focus: function(event, ui){
if (typeof options.focusCall == 'function') {
options.focusCall.call(this);
}
}
});
}
There is probably going to be a lot of modals on the project i am working on so i thought that it would be tidy to store the configuration objects within an object literal rather than generate them on the fly. Something like this:
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
}
}
Then the modal could be created by passing the reference to the stored object:
modalDialog(icisSite.modalStore.tradeFlowGraph);
The issue i am having is that the openCall method is not being invoked when passed to the modalDialog function in this manner. It does work when the configuration object is passed like this and i don't know why:
modalDialog({
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click');
}
});
Whilst it is not an issue to pass the parameters like this it would be nice to have them all stored centrally in an object literal that is available all the time, rather than creating and passing objects ad hoc.

It seems as though bringing the icisSite.modalStore object literal into the jQuery scope fixes the issue.
So wrapping it in the factory function like so:
$(function(){
icisSite.modalStore = {
tradeFlowGraph: {
selector: '.rtx-TradeFlowGraphs',
title: 'Fertilizer Trade Flow graphs',
width: 800,
openCall: function(){
carouselLink
.eq(0)
.trigger('click'); } } } });