Windows 7 x64, nwjs 0.19.4
Minimize to tray works fine without setting window.location.href, but when set nwjs will not minimize to tray.
Revised Code Per Request:
index.html
<html>
<body>
<div></div>
<script>
// Load library
var gui = require('nw.gui');
// Reference to window and tray
var win = gui.Window.get();
var tray;
onload = function () {
window.location.href = "http://iheartradio.com"
};
// Get the minimize event
win.on('minimize', function () {
// Hide window
win.hide();
var tray = new nw.Tray({
title: 'Web Music Player',
icon: 'img/music.png'
});
// Show window and remove tray when clicked
tray.on('click', function () {
win.show();
this.remove();
tray = null;
});
});
</script>
</body>
</html>
package.json
{
"name": "webmusicplayer",
"version": "0.1.0",
"main": "index.html",
"single-instance": true,
"window": {
"title": "webmusicplayer",
"min_width": 1200,
"min_height": 600
},
"webkit": {
"plugin": true
},
"chromium-args": "--load-plugin=ffmpegsumo.dll --child-clean-exit --disable-direct-composition --allow-running-insecure-content --no-proxy-server --enable-video-player-chromecast-support"
}
Main issue with your code is that you are registering maximize event on window object after that you are reloading using window.location, so your javascript code will be removed and garbage collected.
You need to inject your js code after every reload, you can use
inject_js_start or inject_js_end config of package.json to make sure you script is preserved on every reload
Below is the full working code as per your requirement
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tray Demo</title>
<script type="text/javascript">
console.log('redirecting the page');
window.location.href = 'http://www.microsoft.com';
</script>
</head>
<body>
<p>redirecting the page...</p>
</body>
</html>
package.json
{
"main": "home.html",
"name": "tray-demo",
"description": "tray demo for windows",
"version": "1.0",
"inject_js_start": "NWInit.js",
"window": {
"title": "Tray Demo",
"resizable": true,
"show_in_taskbar": true
},
"webkit": {
"plugin": true
},
"node-remote": "*://*"
}
NWInit.js
if(typeof nw != 'undefined') {
NWInit = {
initApp: function() {
console.log('init app called');
var win = nw.Window.get();
win.showDevTools();
win.on('minimize', function() {
console.log('minimize called');
if(typeof nw.Tray == 'undefined') {
return;
}
win.hide();
var tray = new nw.Tray({
title: 'Web Music Player',
icon: 'img/music.png'
});
tray.on('click', function() {
console.log('tray clicked');
win.show();
tray.remove();
tray = null;
});
});
}
};
NWInit.initApp();
}
I had the same problem. Using the webview tag instead of iFrame seems to fix the reloading issue.
https://nwjs.readthedocs.io/en/nw13/References/Frames/
Related
I checked the demo and confirmed it does work in the demo way. But I need to use the components in HTML but not in webpack-ed a modal.vue template. So I wrote the following:
<body>
<div id="app">
<modal name="test">
test
</modal>
</div>
<script src="{% static 'js/tmpdev.bundle.js' %}" type="text/javascript"></script>
<script>
Vue.use(VueJsModal, {
dialog: true,
dynamicDefaults: {
draggable: true
}
})
new Vue({
el: '#app',
components: {
},
data() {
return {
};
},
mounted() {
window.addEventListener('keydown', (e) => {
if (e.key == 'Escape') {
this.toggle();
}
});
this.$modal.show('test');
},
methods: {
toggle() {
this.$modal.show('test');
}
},
filters: {
},
});
</script>
</body>
The above should display the modal window on the screen immediately when I reloaded the tab or additionally when I pressed "esc" key. But for some reason this doesn't show the modal. The console log has no error on it, I can see <div id="modals-container"></div> on the HTML source, the this.$modal.show('test'); part is executed without an error. So I have no clue now. What is wrong with the code above? Thanks.
You should add Escape key EventListener code in the created life cycle hook.
window.addEventListener('keydown', this.toggle);
In methods object :
toggle(event) {
if (event.keyCode === 27) {
this.$modal.show('test');
console.log('esc key pressed');
}
}
Once you done with the requirement, You can destroy this event to prevent memory leaks.
destroyed: function() {
document.removeEventListener('keydown', this.toggle);
}
I'm developing sns login page.
I use custom login-button and FB.login().
Suddenly, I encounted unsuspected problem that FB.login() resulted in auto-login popup before I click login button..
I do Not want pop-up login window before click the login-button...!!
How can I fix this problem?? Help me..plz....ㅜㅜ
this is my url!
http://sangji.dothome.co.kr/index2.html
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
FB.init({
appId: 'myAppKey',
status: true,
cookie: true,
xfbml: true,
oauth: true,
version : 'v2.5'
});
fbLoginStatus();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function fbLoginStatus(){
FB.getLoginStatus(function(response) {
console.log(response);
if (response.status === 'connected') {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
fblogin();
}
});
}
function fblogin(){
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log(access_token);
} else {
console.log('Authorization failed.');
}
},{ //permissions
scope: 'email'
});
}
</script>
<img src="fb_bt.png">
</body>
</html>
You are calling 'fblogin' in the callback to getLoginStatus - this in turn is calling FB.login which is based on opening a popup.
i am plotting the markers on the map in openlayer3 as shown below
<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
</head>
<body>
<div id="map" style="width:1000px;height:1000px"></div>
<script>
var map;
function initMap() {
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false,
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
}
function invokeAddMarker(){
var markerData = [
{
"title": 'point1',
"lat": 1.350664,
"lng": 103.985190,
"description": 'yyyy'
}, {
"title": 'point2',
"lat":1.353604,
"lng": 103.986395,
"description": 'zzz'
}, {
"title": 'point3',
"lat": 1.357227,
"lng": 103.9879999,
"description": 'uuu'
}
];
for(var i=0;i<markerData.length;i++){
addmarker(markerData[i].lat,markerData[i].lng);
}
}
function addmarker(lat,lng){
console.log("*****lat******"+lat);
console.log("*****lng******"+lng);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lng,lat],'EPSG:4326', 'EPSG:3857')),
name: 'camera'
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'camera.png'
}))
});
iconFeature.setStyle(iconStyle);
vectorSource = new ol.source.Vector({
features: [iconFeature]
});
/*t clear the markers*/
/*vectorSource.clear();*/
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
alert("video comes here");
}
});
}
initMap();
invokeAddMarker();
</script>
</body>
</html>
I am facing two problem in the above code
1:the click event will fired 3 times ie, the number marker on the map that should only onces by theory
2:when i resize the div say(new width and height of the div is varied to new value in which the map is displayed)the markers will adjust to div but the event is not fired
please say why is this behavior and how to overcome it
Basically, when I load my homepage, vue.js requests an api, that returns a json response like so
[
{
"time": 321
},
{
"time": 2712
}
]
When the request is finished loading, I assign the the array to a timers object in the data object in my vue.js file.
This is where it gets tricky. So basically, when above is loaded into vue, I need each one to be incremented each second, with setInterval(). To make it even worse, I need another callback for each function where I can pause the timer, and send another request to the server (to pause the timer serverside).
Any ideas?
I ended up creating a new timer that starts, when the document is loaded. To the response I've also added a counting attribute (boolean).
new Vue({
el: "#body",
data: {
timers: [
{
time: 222,
counting: true
},
{
time: 4123,
counting: true
}
],
test: 2
},
methods: {
pauseTimer: function(timer) {
timer.counting = !timer.counting;
}
},
ready: function() {
var that = this;
var timer = setInterval(function(){
$.each(that.$data.timers, function(index, value){
if(value.counting)
value.time++;
});
}, 1000);
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body id="body">
<ul>
<li v-repeat="timers">{{ time }} - </li>
</ul>
{{ $data | json 2 }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.js"></script>
</body>
</html>
Hi I am new to facebook development, and would like to post a feed using this code below, but the message nor the user_message_prompt do not appear in the text box. Do I need to set something in my application to allow this. All I get is default messages.
I tried the 2 methods below, and both of them do not show the message nor user_message_prompt message.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: "174009502722096", status: true, cookie: true, xfbml: true });
function postToFeed() {
var publish = {
method: 'feed',
message: 'Martin Okello presents share',
caption: 'Visit MartinLayooinc',
description: (
'Martin Okello, aka the medallion presents his application'
),
link: 'http://www.martinlayooinc.co.uk',
picture: 'http://www.martinlayooinc.co.uk/topImages/bigMedallion.jpg',
user_message_prompt: 'Share MartinLayooinc Software with friends!'
};
FB.ui(publish,
function(response)
{
alert('MartinLayooInc has been posted!!')
});
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
<!--from here-->
<div id="fb-root">
<p>
<a onclick='postToFeed(); return false;'><img src="topImages/facebook_button.png" style="height:20px; width:80px;" />
</a>
</p>
<p id='msg'>
</p>
</div>
</body>
</html>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '174009502722096', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
logout();
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
I believe they are both deprecated. The message parameter is now ignored and I didn't see the other parameter in the documentation. Apparently, Facebook wants users to put their own message into the text field rather than be forced or prompted. Check out the main info page for it here:
https://developers.facebook.com/docs/reference/javascript/FB.ui/
and the detailed page here:
https://developers.facebook.com/docs/reference/dialogs/feed/
Scroll to the bottom and you'll see the supported parameters. Hopefully it's not a game changer for you.
You should do something like this
window.fbAsyncInit = function() {FB.init({
appId: '{YOUR APP ID}',
xfbml: true,
version: 'v2.1'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function share_prompt() {
FB.ui({
method: 'feed',
name: 'Your App Name',
link: 'https://example.com',
picture: 'http://example.com/img/fbicon.jpg',
caption: 'Your Caption here',
description: 'some sort of your own description',
message: 'Your Message goes here mate'
});
}
Then call the function like below;
<div>Click to open your dialog </div>