How to overwrite window height and width from package.json in node webkit - node-webkit

Code from package.json:
{
"main": "main.html",
"name": "Test App",
"window": {
"toolbar": true,
"width": 400,
"height": 500,
"position": "mouse",
"resizable": true
}
}
In main.html I have javascript code to open new window:
window.open("http://www.example.com","mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
But height and width of window is not at width=100 and height=100.
I have also tried window.resize(100,100) in main.html but it didn't work.
Is there any way so that I can overwrite height and width of a new window?

Windows opened using window.open() use the window settings from the manifest file (package.json).
If you use the nw.js Window object to create the window, instead of the DOM object, you can pass in window settings in manifest format to override the defaults.
var gui = require("nw.gui")
gui.Window.open('http://www.example.com', {
width: 100,
height: 100,
});
Alternatively, if you must use the DOM window.open and need to control the defaults, you will need to handle the "new-win-policy" event and provide window settings using setNewWindowManifest:
// set up handler for new-win-policy event
var gui = require('nw.gui');
var win = gui.Window.get();
win.on('new-win-policy', function (frame, url, policy) {
policy.setNewWindowManifest({
width: 600,
height: 300
});
});
// open window using DOM object, uses arguments set in event handler
window.open('http://www.example.com', '_blank', '');
Further documentation available here: https://github.com/nwjs/nw.js/wiki/Window#new-win-policy

Related

dojo.dialog.change size after content has been set

require(["dojo","dojo/dom-attr"], function(dojo, domAttr){
var dlg =dijit.byId("my_dialog");
domAttr.set(dlg, "content", "this is a text");
//dlg.set("dimensions", [400, 200]);
//dojo.style("my_dialog", "width", "300px");
//dlg.resize({h: 500, w: 500});
});
I have a dijit.dialog. I set its text dynamically but the dialog's size is way too big. i've tried the three things commented above to no avail.
Just set property style with the right dimension for your dijit/dialog.
In the following example we set dimension width to 500px setting inline CSS for dialog dom element.
Live example:
https://jsfiddle.net/358rjoch/
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
myDialog = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 500px"
});
});
<button onclick="myDialog.show();">show</button>
Alternatively you can use only CSS (no inline), for example you can give an ID to your dialog widget and use a CSS selector for its style.
Live example:
https://jsfiddle.net/o15mbodm/
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
myDialog = new Dialog({
id:"myDialog", // your id here
title: "My Dialog",
content: "Test content."
});
});
#myDialog{
width: 500px;
height:400px;
}
You can find a detailed list of methods and properties for dijit/dialog widgets at the following link:
http://dojotoolkit.org/api/?qs=1.10/dijit/Dialog

Disabling resize on Dijit Simple Text Area?

I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>

How can i add floating component while creating viewport in ext4.1

How can i add a floating window to the viewport while its getting created.
When i'm trying to add whith
viewport.on('add',function(){
//my functionality here
});
How can i add???
Any help??
You can't really add components to a viewport while it's being created, unless you override its internal methods. And what you're doing is adding an event listener for the "add" event, which fires when items are added to a container.
I don't see why you're trying to add a window to a viewport, but you would add it just like any other item.
Ext.create("Ext.container.Viewport", {
items: [{
xtype: "window",
width: 400,
height: 400,
title: "My Window"
}]
});
Or just create the window by itself, since it is constrained to the document body anyway.
Remember, you have to call the show method on a window before it will render to the document (unless you set autoShow: true on the window config).

Dojo/Dijit TitlePane

How do you make a titlePane's height dynamic so that if content is added to the pane after the page has loaded the TitlePane will expand?
It looks like the rich content editor being an iframe that is loaded asynchronously confuses the initial layout.
As #missingno mentioned, the resize function is what you want to look at.
If you execute the following function on your page, you can see that it does correctly resize everything:
//iterate through all widgets
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
The above function iterates through all widgets and resizes all of them. This is probably unneccessary. I think you would only need to call it on each of your layout-related widgets, after the dijit.Editor is initialized.
The easiest way to do this on the actual page would probably to add it to your addOnLoad function. For exampe:
dojo.addOnLoad(function() {
dijit.byId("ContentLetterTemplate").set("href","index2.html");
//perform resize on widgets after they are created and parsed.
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
});
EDIT: Another possible fix to the problem is setting the doLayout property on your Content Panes to false. By default all ContentPane's (including subclasses such as TitlePane and dojox.layout.ContentPane) have this property set to true. This means that the size of the ContentPane is predetermined and static. By setting the doLayout property to false, the size of the ContentPanes will grow organically as the content becomes larger or smaller.
Layout widgets have a .resize() method that you can call to trigger a recalculation. Most of the time you don't need to call it yourself (as shown in the examples in the comments) but in some situations you have no choice.
I've made an example how to load data after the pane is open and build content of pane.
What bothers me is after creating grid, I have to first put it into DOM, and after that into title pane, otherwise title pane won't get proper height. There should be cleaner way to do this.
Check it out: http://jsfiddle.net/keemor/T46tt/2/
dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
var pane = new dijit.TitlePane({
title: 'Dynamic title pane',
open: false,
toggle: function() {
var self = this;
self.inherited('toggle', arguments);
self._setContent(self.onDownloadStart(), true);
if (!self.open) {
return;
}
var xhr = dojo.xhrGet({
url: '/echo/json/',
load: function(r) {
var someData = [{
id: 1,
name: "One"},
{
id: 2,
name: "Two"}];
var store = dojo.data.ObjectStore({
objectStore: new dojo.store.Memory({
data: someData
})
});
var grid = new dojox.grid.DataGrid({
store: store,
structure: [{
name: "Name",
field: "name",
width: "200px"}],
autoHeight: true
});
//After inserting grid anywhere on page it gets height
//Without this line title pane doesn't resize after inserting grid
dojo.place(grid.domNode, dojo.body());
grid.startup();
self.set('content', grid.domNode);
}
});
}
});
dojo.place(pane.domNode, dojo.body());
pane.toggle();
});​
My solution is to move innerWidget.startup() into the after advice to "toggle".
titlePane.aspect = aspect.after(titlePane, 'toggle', function () {
if (titlePane.open) {
titlePane.grid.startup();
titlePane.aspect.remove();
}
});
See the dojo/aspect reference documentation for more information.

How do you set wmode=opaque using Youtube's HTML5 iframe API?

I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.