I have created the below sample code in html
<!DOCTYPE html>
<html>
<head>
<title>Hello Node Webkit</title>
<script>
var guia = require('nw.gui');
var win = guia.Window.get();
var isMaximized = false;
</script>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<div style="-webkit-app-region: drag;position:absolute;height:30px;width:910px;background:grey;position:absoulte;margin:auto;right:0;left:0">
<div id="close" style="-webkit-app-region: no-drag;cursor:pointer;position:absolute;right:2px;top:2px;width:15px;height:15px;background:white">
</div>
<div id="max" style="-webkit-app-region: no-drag;cursor:pointer;position:absolute;right:22px;top:2px;width:15px;height:15px;background:green">
</div>
<div id="min" style="-webkit-app-region: no-drag;cursor:pointer;position:absolute;right:52px;top:2px;width:15px;height:15px;background:red">
</div>
</div>
<script>
document.getElementById("close").onclick=function(){
win.close();
}
document.getElementById("max").onclick=function()
{
if (isMaximized)
{
isMaximized = false;
win.unmaximize();
}
else
{
isMaximized = true;
win.maximize();
}
}
document.getElementById("min").onclick=function(){
win.minimize();
}
</script>
package.json
{
"name": "a",
"version": "1.1.1",
"description": "a",
"main": "index.html",
"window":
{
"frame":false,
"toolbar":false,
"width":910,
"height":750,
"max_width":1100,
"max_height":900,
"min_width":910,
"min_height":750,
"autoResize": false
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
After maximizing when dragging the window , size of window automatically resizes to its original size. Why this happens.
On unmaximized state dragging works fine without any window resize event.
Related
I can use "https://api.opentopodata.org/v1/srtm90m?locations=-43.5,172.5" to get the follwoing results with a browser:
{
"results": [
{
"dataset": "srtm90m",
"elevation": 45.0,
"location": {
"lat": -43.5,
"lng": 172.5
}
}
],
"status": "OK"
}
But, I have a problem making the following code work in javascript. Specifically, the "$.getJSON()" function does not work. Could someone help me out with this?
<!DOCTYPE html>
<head>
<title>JavaScript - read JSON from URL</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="mypanel"></div>
<script>
var url ="https://api.opentopodata.org/v1/srtm90m?locations=-43.5,172.5"
$.getJSON(url, function(data) {
alert(data);
});
</script>
</body>
</html>
Below is my html code that am using to implement select2
<!DOCTYPE html>
<html>
<head>
<title>department</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="ProgramForm">
<div class="form-row">
<div class="form-group col-md-4">
<label for="department">Department<span style="color:red">*</span></label>
<select v-model="department" class="form-control select2" >
<option> </option>
<option v-for="department in departmentData" v-bind:value="department">{{department.departmentName}}</option>
</select>
</div>
</div>
<p>Selected{{department}}</p>
</div>
My script section is as follows
<script type="text/javascript" >
$(function () {
var programFormVM=new Vue({
el:"#ProgramForm",
data:function(){
return {
department:{},
departmentData:[
{ "id": 1, "departmentCode": "HR", "departmentName": "Human Resource" },
{ "id": 2, "departmentCode": "ENG", "departmentName": "Engineering" },
{ "id": 3, "departmentCode": "AE", "departmentName": "Agricultural Economics" },
{ "id": 4, "departmentCode": "FS", "departmentName": "Field Station" },
{ "id": 5, "departmentCode": "ARC", "departmentName": "Architecture" }
]
}
},
created:function (){
},
methods:{
},
});
$('.select2').select2({
placeholder: "Select a department"
}).on('change', function(e) {
// var data = $(".select2 option:selected").val();
programFormVM.department=$(".select2 option:selected").val();
});
});
</script>
</body>
</html>
I need to display the object as a string. As it is, an getting [object Object].I Have tried .text() but its giving the name of the department only. I my case i need the whole object but as a string like { "id": 5, "departmentCode": "ARC", "departmentName": "Architecture" }. Please help out. Regards.
v-bind:value="department.id"
const selectedValue = <value from select>
const selectedDepartment = this.departmentData.find(x => x.id === selectedVal)
I'm getting a 404 on my app-build.js bundle whenever I publish (AWS). The browser is referencing the previous bundle revision (e.g., dist/app-build-cf4...).
Even with a new bundle revision number and using "System.cacheBust" on the app-build file, it's still holding on to the old rev #.
I have to manually clear the cache to get the site to load.
Index.cshtml
...
<body aurelia-app="main" class="page">
<div>
<div class="splash text-darker-clr" >
<div class="message">
<span>Site</span>
<br />
<div id="ajax-loading-screen" data-disable-fade-on-click="0" data-effect="standard" data-method="standard">
<div class="loading-icon">
<span class="fa fa-circle-o-notch fa-spin spin"></span>
</div>
</div>
</div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
var systemLocate = System.locate; System.cacheBust = "?bust=" + Date.now(), System.locate = function (a) { var b = this; return Promise.resolve(systemLocate.call(this, a)).then(function (a) { return a.lastIndexOf("html.js") > -1 ? a : a.lastIndexOf("css.js") > -1 ? a : a + b.cacheBust }) };
System.import('aurelia-bootstrapper');
</script>
</div>
</body>
bundles.js
module.exports = {
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"moment",
"aurelia-bootstrap-datepicker",
"aurelia-authentication",
"aurelia-api",
"aurelia-dialog"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
I have account with www.makemytrip.com and where 'from' field and 'to' field is already saved through cookies
Using extension, I would like to display the value present in 'from' field of that site. (whose id is 'hp-widget__sfrom')
On page load I am able to view the value but the same I can't achieve on click on my button defined in my extension
Below is the code: index.html
<html>
<head>
<title>My new extension</title>
</head>
<body>
<input type="button" id="save" value="Save Text">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Test1",
"description": "TestDesc",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html",
"default_title": "Test11"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myContentScript.js"]
}
]
}
myContentScript.js
window.onload = function(){
alert("Hi by contentScript");
//alert(document.getElementById('hp-widget__sfrom').value); //this works!
//but the below doesn't work; onclick of button
document.getElementById('save').onclick = function(){
alert(document.getElementById('hp-widget__sfrom').value);
}
}
background.js
window.onload = function(){
alert("Hi by backgroundJS");
}
I appreciate any sort of help!
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/