I am using Electron Browser window to display notifications received from firebase.
My sample.js file
ipcRenderer.on(NOTIFICATION_RECEIVED, (_, serverNotificationPayload) => {
if (serverNotificationPayload.notification.body)
{
showCustomNotification(serverNotificationPayload);
}
function showCustomNotification(serverNotificationPayload){
let disp = electron.screen.getPrimaryDisplay()
console.log(disp.bounds.x)
console.log(disp.bounds.y)
win = new BrowserWindow({
x: disp.bounds.width-310,
y: disp.bounds.height-620,
width: 300,
height: 550,
icon: './icon.png',
title: serverNotificationPayload.notification.title,
closable: true,
skipTaskbar: true,
show: true,
frame:false,
alwaysOnTop: true
})
win.loadFile('index.html');
Now in my index.html file I need to render the json data thats received from firebase.I tried several solutions but none worked.If somebody can help me it would be great.Whenever I broadcast messages through firebase ,an empty window opens .I want to display the json content in that window.
Related
I've been working on an inertial scrolling implementation within Nextjs using Framer Motion but running into a bit of trouble when animation page transitions using animate presence. I'm hooking into the page scroll progress via useScroll and animating the Y transform with spring physics. The issue, however, is when resetting the window scroll position when navigating between pages. After the component has unmounted, I call window.scrollTo(0,0) via the AnimatePresence onExitComplete callback, but because I'm transforming the page position via spring physics, the scroll reset doesn't complete immediately. So when new pages are mounted, the page transform to reset the scroll is still running.
Additionally, I've included scroll={false} in my Next Link components to prevent the default scroll to top functionality so I can handle this manually via the AnimatePresence component as mentioned above. But this doesn't seem to be working.
There's a bit of code involved so I created a minimal reproduction repo here.
I also notice that passing scrollY to the y property of the variant object prevents the unwanted scrolling behavior on page transition. But passing something like scrollY - 128 breaks the behavior:
const variants = {
hidden: { opacity: 0, x: 0, y: 64 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: scrollY },
};
y value in exit variant wasn't being updated to match latest scrollY value. Solution:
useEffect(() => {
return scrollY.onChange((latest) => {
variants.exit.y = -scrollY.current - 128;
});
});
I'm using the following code to open the WordPress media uploader in my plugin. The code works fine and returns the selected image.
/* media*/
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Select Image',
button: {
text: 'Select Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#background_image').val(attachment.url);
console.log(attachment.sizes);
});
mediaUploader.open();
});
However when I look at the console - the custom image sizes (height and width) in the attachment.sizes are wrong, but the image, e.g. An image of 1024 x 1024 reports as 580x580 - but the filename clearly shows 1024x1024.
Any ideas on why this would be the case?
edit:
Here is an image of all of the Image sizes in WordPress including 1 from the theme and one I added as a test.
As you can see the thumbnail , medium and full sizes are correct but large and the 2 added (using add_image_size( 'imagetest', 1200, 630, true ); // Hard Crop Mode) Are incorrect.
Thanks in advance.
Nativescript Firebase plugin has Admob where you can use Smart Banner but we can't detect height of banner.
Who can i get banner height after it loads on different screen sizes?
firebase.admob.showBanner({
size: firebase.admob.AD_SIZE.SMART_BANNER, // see firebase.admob.AD_SIZE for all options
margins: { // optional nr of device independent pixels from the top or bottom (don't set both)
bottom: 10,
top: -1
},
androidBannerId: "ca-app-pub-9517346003011652/7749101329",
iosBannerId: "ca-app-pub-9517346003011652/3985369721",
testing: true, // when not running in production set this to true, Google doesn't like it any other way
iosTestDeviceIds: [ //Android automatically adds the connected device as test device with testing:true, iOS does not
"45d77bf513dfabc2949ba053da83c0c7b7e87715", // Eddy's iPhone 6s
"fee4cf319a242eab4701543e4c16db89c722731f" // Eddy's iPad Pro
],
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
onOpened: () => console.log("Ad opened"),
onClicked: () => console.log("Ad clicked"),
onLeftApplication: () => console.log("Ad left application")
}).then(
function () {
console.log("AdMob banner showing");
},
function (errorMessage) {
dialogs.alert({
title: "AdMob error",
message: errorMessage,
okButtonText: "Hmmkay"
});
}
);
First we are getting screen size and then doing calculations with SMART_BANNER logic
Import this platform
const platform = require("platform")
Height divided by scale
const screenHeightDp =platform.screen.mainScreen.heightPixels / platform.screen.mainScreen.scale;
Doing calculations as smart banner works
const BannerHeight = screenHeightDp > 720 ? 90 : screenHeightDp > 400 ? 50 : 32;
This is our banner height
console.log(BannerHeight);
H,I am using the KendoUI window and I am getting an issue as i have to open 3 Pop up window that contains divs as a Content in it but of different heights.if I select first one say of height 100px and close it and open the second window of height say 200px,it remains at 100px and hence hiding the content of the second popup window and when i resize the window and close it and when again open it,it remains at the previous dimension that i had resized it.
Why this is happening,not getting any clue on this.Please help me.
if (AccountType == "Bank") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: {AccountID:AccountID},
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '200px',
scrollable: false,
//deactivate: function () { wnd.destroy(); }
}).data('kendoWindow').center();
wnd.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Bank Account Edit");
}
});
}
if (AccountType == "Cash") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: { AccountID: AccountID },
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd1 = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '360px',
scrollable: false,
//deactivate: function () { wnd1.destroy(); }
}).data('kendoWindow').center().open();
//wnd1.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Cash Account Edit");
}
});
}
<div id="Update_Window" style="display:none;"></div>
As you said: you close it, you did not destroy. Closing a window means hiding it but it is still there with the same content and attributes.
You should not use $('#Update_Window').empty(); since this releases the DOM but not the Kendo Window so it will cause a memory leak. Instead of that, use: destroy.
$('#Update_Window').data("kendoWindow").destroy();
Anyway, my recommendation is not creating and destroying windows since this has some impact in performance, you should try to reuse it.
I've been trying to learn Sencha Touch and I'm stuck on something that is probably pretty obvious. I'm trying to update a tabPanel with a button event. I'd like for a tap on the first button to load 'maptestPanel' in the same panel. This is a map loaded from its own js file.
The map panel looks ok by itself:
maptestPanel = new Ext.Panel({
layout: 'fit',
fullscreen: true,
items: [map]
});
But I'm not seeing how to properly place it in the tabPanel
The code is:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var navBar = new Ext.Toolbar({
dock : 'top',
title: 'Some App Name',
});
var topPanel = new Ext.Panel({
dockedItems: [navBar],
fullscreen : true,
//html: 'Test Panel'
});
var tapHandler = function(button, event) {
btnPanel.update(maptestPanel); //I'm sure part of the problem is here
}
var SomeDate1 = new Ext.Button({
text:"Some date",
minWidth:200,
height: 45,
cls:"listButtonTop",
handler:tapHandler
});
var SomeDate2 = new Ext.Button({
text:"Another Date",
minWidth:200,
height: 45,
cls:"listButton"
});
var SomeDate3 = new Ext.Button({
text:"And Another Date",
minWidth:200,
height: 45,
cls:"listButtonBottom"
});
var btnPanel = new Ext.Panel ({
id: 'date',
items: [SomeDate1,SomeDate2,SomeDate3],
});
var tabpanel = new Ext.TabPanel({
layout: 'card',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Maps',
//html: '<h1>Place holder</h1>',
iconCls: 'maps',
cls: 'card1',
items: [btnPanel]
}, {
title: 'Favs',
html: '<h1>Place holder</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit'
//items: [SomeList, SomeOtherList, AnotherList]
}, {
title: 'Info',
html: '<h1>Place holder</h1>',
cls: 'card4',
iconCls: 'info'
}]
});
}
});
Thanks for any advice or a steer in the right direction.
There's several things you need to do to fix up that code:
1) 'Maps' has no layout. Since it has a single child item, layout: 'fit' would be appropriate here.
2) Only use fullscreen on the outermost item, you don't want the other items to be fullscreen since they are child items of other containers.
3) To dynamically add items to a container, use the add() method on container. You'll also need to call doLayout() to trigger a layout for the container.
btnPanel.add(maptestpanel);
btnPanel.doLayout();
However, in this case I don't see why you're adding the map to a panel, it doesn't give you any extra functionality. Instead, I would add the map directly to the btnPanel.
4) The btnPanel has no layout either, so you'll need to choose an appropriate layout there as well, possibly the vbox layout.
I only know "classic" sencha, but this should work the same way : So you could just add the mapPanel (but hidden) to your tabPanel, and in the button handler show it while hiding the button panel.
Besides, speaking of layouts, I don't think you need to precise layout:'card' in tabPanel since it uses a card layout by definition