mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-19 16:49:45 +08:00
909 lines
22 KiB
TypeScript
909 lines
22 KiB
TypeScript
|
|
|
|
// All exemple scripts from PhotonUI documentation:
|
|
|
|
// Accel Manager
|
|
// We add a field to test accels
|
|
var field = new photonui.TextField({
|
|
value: "Text Field"
|
|
});
|
|
photonui.domInsert(field, "demo");
|
|
|
|
// ... And a label to display things
|
|
var label = new photonui.Label({text: ""});
|
|
photonui.domInsert(label, "demo");
|
|
|
|
// We create the accel
|
|
var accel = new photonui.AccelManager();
|
|
|
|
// "Ctrl+A" / "Command+A" accelerator that is disabled if
|
|
// a field is focused
|
|
accel.addAccel("accel1", "ctrl + a", function() {
|
|
label.text += "'Ctrl + A' accelerator\n";
|
|
});
|
|
accel.addAccel("accel1-mac", "command + a", function() {
|
|
label.text += "'Command + A' accelerator\n";
|
|
});
|
|
|
|
// "Ctrl+R" accelerator that works even if the field is focused
|
|
accel.addAccel("accel3", "ctrl + r", function() {
|
|
label.text += "'Ctrl + R' accelerator\n";
|
|
}, false);
|
|
|
|
// A more complexe sequence (hold "Ctrl+X", and then press "C")
|
|
accel.addAccel("accel4", "ctrl + x > c", function() {
|
|
label.text += "'Ctrl + X > C' accelerator\n";
|
|
});
|
|
|
|
// BoxLayout
|
|
var box = new photonui.BoxLayout({
|
|
orientation: "vertical", // "vertical" or "horizontal"
|
|
spacing: 5, // spacing between widgets
|
|
children: [
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button()
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(box, "demo");
|
|
|
|
// Button
|
|
var btn = new photonui.Button({
|
|
text: "My Button",
|
|
leftIcon: new photonui.FAIcon("fa-send"),
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
alert("Someone clicked on " + widget.text);
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(btn, "demo");
|
|
|
|
// canvas
|
|
var canvas = new photonui.Canvas({
|
|
width: 200,
|
|
height: 150
|
|
});
|
|
|
|
photonui.domInsert(canvas, "demo");
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
ctx.lineWidth = 3;
|
|
ctx.strokeStyle = "#DB624F";
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(10, 10);
|
|
ctx.lineTo(40, 140);
|
|
ctx.lineTo(50, 30);
|
|
ctx.lineTo(190, 100);
|
|
ctx.stroke();
|
|
|
|
// Checkbox
|
|
var check = new photonui.CheckBox({
|
|
value: true
|
|
});
|
|
|
|
photonui.domInsert(check, "demo");
|
|
|
|
// Color
|
|
var color = new photonui.Color("red");
|
|
|
|
console.log(color.hexString);
|
|
// "#FF0000"
|
|
var color = new photonui.Color("red");
|
|
|
|
console.log(color.hexString);
|
|
// "#FF0000"
|
|
|
|
console.log(color.rgbString);
|
|
// "rgb(255, 0, 0)"
|
|
|
|
console.log(color.rgbaString);
|
|
// "rgb(255, 0, 0, 1)"
|
|
|
|
console.log(color.getRGB());
|
|
// Array [ 255, 0, 0 ]
|
|
|
|
console.log(color.getRGBA());
|
|
// Array [ 255, 0, 0, 255 ]
|
|
|
|
console.log(color.red, color.green, color.blue);
|
|
// 255 0 0
|
|
|
|
console.log(color.hue, color.saturation, color.brightness);
|
|
// 0 100 100
|
|
|
|
color.brightness = 50;
|
|
console.log(color.hexString);
|
|
// "#7F0000"
|
|
|
|
color.hue = 204;
|
|
console.log(color.hexString);
|
|
// #004C7F
|
|
|
|
// ColorButton
|
|
var btn2 = new photonui.ColorButton({
|
|
value: "#4EC8DB",
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
var header = document.getElementsByTagName("header")[0];
|
|
header.style.backgroundColor = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(btn2, "demo");
|
|
|
|
// colorpalette
|
|
var palette = new photonui.ColorPalette({
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
var header = document.getElementsByTagName("header")[0];
|
|
header.style.backgroundColor = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(palette, "demo");
|
|
|
|
var palette = new photonui.ColorPalette({
|
|
palette: [
|
|
["#D32F2F", "#F44336", "#E91E63", "#9C27B0", "#673AB7"],
|
|
["#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688"],
|
|
["#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107"],
|
|
["#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"]
|
|
],
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
var header = document.getElementsByTagName("header")[0];
|
|
header.style.backgroundColor = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(palette, "demo");
|
|
|
|
// ColorPicker
|
|
var colorPicker = new photonui.ColorPicker({
|
|
value: "#4EC8DB",
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
var header = document.getElementsByTagName("header")[0];
|
|
header.style.backgroundColor = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(colorPicker, "demo");
|
|
|
|
// ColorPickerDialog
|
|
var dlg = new photonui.ColorPickerDialog({
|
|
value: "#4EC8DB",
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
var header = document.getElementsByTagName("header")[0];
|
|
header.style.backgroundColor = value;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Add a button to show up the dialog
|
|
var btn = new photonui.Button({
|
|
text: "Display the dialog",
|
|
callbacks: {
|
|
click: dlg.show.bind(dlg)
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(btn, "demo");
|
|
|
|
// Dialog
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
|
|
new photonui.Dialog({
|
|
title: "My Dialog",
|
|
visible: true,
|
|
x: pos.x, y: pos.y,
|
|
child: new photonui.Label("Hello, I'm a dialog"),
|
|
padding: 10,
|
|
buttons: [
|
|
new photonui.Button()
|
|
],
|
|
callbacks: {
|
|
"close-button-clicked": function(widget: any) {
|
|
widget.destroy();
|
|
}
|
|
}
|
|
});
|
|
|
|
// FAIcon
|
|
var icon = new photonui.FAIcon({
|
|
iconName: "fa-camera",
|
|
size: "fa-3x", // "", "fa-lg", "fa-2x", "fa-3x", "fa-4x", "fa5x"
|
|
color: "#DB624F"
|
|
});
|
|
|
|
photonui.domInsert(icon, "demo");
|
|
|
|
// FileManager
|
|
// File manager that accepts PNG, JPEG, BMP and SVG files
|
|
var fm = new photonui.FileManager({
|
|
acceptedMimes: ["image/png", "image/jpeg"],
|
|
acceptedExts: ["bmp", "svg"],
|
|
dropZone: document, // Enable file d&d
|
|
multiselect: true, // Allow to select more than one file
|
|
callbacks: {
|
|
"file-open": function(widget: any, file: any, x: number, y: number) {
|
|
// x and y are defined only with d&d
|
|
if (x !== undefined) {
|
|
alert(file.name + " dropped at ("+x+", "+y+")");
|
|
}
|
|
else {
|
|
alert(file.name + " opened");
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Button to show the "file open" dialog
|
|
var btn = new photonui.Button({
|
|
text: "Open",
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
fm.open();
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(btn, "demo");
|
|
|
|
// FluidLayout
|
|
var fl = new photonui.FluidLayout({
|
|
children: [
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button()
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(fl, "demo");
|
|
|
|
// FontSelect
|
|
var select = new photonui.FontSelect({
|
|
value: "item1",
|
|
fonts: [
|
|
"Arial",
|
|
"Arial Black",
|
|
"Cantarell",
|
|
"Courier New",
|
|
"Impact",
|
|
"Time New Roman",
|
|
"Titillium Web",
|
|
"Verdana"
|
|
],
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
alert("Value changed: " + value);
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(select, "demo");
|
|
|
|
// GridLayout
|
|
var grid = new photonui.GridLayout({
|
|
horizontalPadding: 0,
|
|
verticalPadding: 0,
|
|
horizontalSpacing: 5,
|
|
verticalSpacing: 5,
|
|
children: [
|
|
new photonui.Button({
|
|
text: "Widget 1",
|
|
layoutOptions: {
|
|
x: 0, y: 0,
|
|
cols: 1, rows: 1
|
|
}
|
|
}),
|
|
new photonui.Button({
|
|
text: "Widget 2",
|
|
layoutOptions: {
|
|
x: 1, y: 0,
|
|
cols: 1, rows: 1
|
|
}
|
|
}),
|
|
new photonui.Button({
|
|
text: "Widget 3",
|
|
layoutOptions: {
|
|
x: 2, y: 0,
|
|
cols: 1, rows: 2
|
|
}
|
|
}),
|
|
new photonui.Button({
|
|
text: "Widget 4",
|
|
layoutOptions: {
|
|
x: 0, y: 1,
|
|
cols: 2, rows: 1
|
|
}
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(grid, "demo");
|
|
|
|
// Image
|
|
var img = new photonui.Image({
|
|
url: "../../images/favicon.png"
|
|
});
|
|
|
|
photonui.domInsert(img, "demo");
|
|
|
|
// Label
|
|
var label = new photonui.Label({
|
|
text: "My Label",
|
|
textAlign: "left"
|
|
});
|
|
|
|
photonui.domInsert(label, "demo");
|
|
|
|
// Menu
|
|
var menu = new photonui.Menu({
|
|
iconVisible: true,
|
|
children: [
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 1",
|
|
icon: new photonui.FAIcon("fa-paper-plane")
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 2",
|
|
icon: new photonui.FAIcon("fa-gears")
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 3",
|
|
icon: new photonui.FAIcon("fa-paw")
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(menu, "demo");
|
|
|
|
// MenuItem
|
|
var menu = new photonui.Menu({
|
|
iconVisible: true,
|
|
children: [
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 1",
|
|
icon: new photonui.FAIcon("fa-paper-plane"),
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
alert("You clicked on me!");
|
|
}
|
|
}
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 2",
|
|
icon: new photonui.FAIcon("fa-gears")
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 3",
|
|
icon: new photonui.FAIcon("fa-paw")
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(menu, "demo");
|
|
|
|
// Mouse Manager
|
|
var img = new photonui.Image({
|
|
url: "../../images/favicon.png"
|
|
});
|
|
|
|
var mouse = new photonui.MouseManager({
|
|
element: img,
|
|
callbacks: {
|
|
"click": function(manager: any, mstate: any) {
|
|
alert("You clicked on the image at " +
|
|
mstate.x + ", " + mstate.y);
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(img, "demo");
|
|
|
|
// Numeric Filed
|
|
var field2 = new photonui.NumericField({
|
|
placeholder: "placeholder",
|
|
decimalDigits: 2,
|
|
min: -10, max: 10,
|
|
step: 0.5, // When scrolling over the field
|
|
decimalSymbol: ".", // "." or ","
|
|
value: 5.5
|
|
});
|
|
|
|
photonui.domInsert(field2, "demo");
|
|
|
|
// PopupMenu
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
|
|
var popup = new photonui.PopupMenu({
|
|
children: [
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 1",
|
|
icon: new photonui.FAIcon("fa-paper-plane"),
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
alert("You clicked on me!");
|
|
}
|
|
}
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 2",
|
|
icon: new photonui.FAIcon("fa-gears")
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Menu Item 3",
|
|
icon: new photonui.FAIcon("fa-paw")
|
|
})
|
|
]
|
|
});
|
|
|
|
popup.popupXY(pos.x, pos.y);
|
|
|
|
// PopupWindow
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
|
|
var popup = new photonui.PopupWindow({
|
|
padding: 10,
|
|
width: 200,
|
|
height: 200,
|
|
child: new photonui.Label({
|
|
text: "Click anywhere to close"
|
|
})
|
|
});
|
|
|
|
popup.popupXY(pos.x, pos.y);
|
|
|
|
// ProgressBar
|
|
var pb = new photonui.ProgressBar({
|
|
textVisible: true,
|
|
value: 0.42
|
|
});
|
|
|
|
photonui.domInsert(pb, "demo");
|
|
|
|
// Select
|
|
var select2 = new photonui.Select({
|
|
value: "item1",
|
|
children: [
|
|
new photonui.MenuItem({value: "item1", text: "Item 1"}),
|
|
new photonui.MenuItem({value: "item2", text: "Item 2"}),
|
|
new photonui.MenuItem({value: "item3", text: "Item 3"})
|
|
],
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
alert("Value changed: " + value);
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(select2, "demo");
|
|
|
|
// Separator
|
|
var separator = new photonui.Separator();
|
|
|
|
photonui.domInsert(separator, "demo");
|
|
|
|
// Slider
|
|
var box = new photonui.BoxLayout({
|
|
children: [
|
|
new photonui.Slider({
|
|
fieldVisible: false,
|
|
min: 0, max: 100,
|
|
step: 5,
|
|
value: 50
|
|
}),
|
|
new photonui.Slider({
|
|
fieldVisible: true,
|
|
min: -100, max: 100,
|
|
step: 10,
|
|
value: -50
|
|
}),
|
|
new photonui.Slider({
|
|
fieldVisible: true,
|
|
min: 0, max: 1,
|
|
decimalDigits: 2,
|
|
decimalSymbol: ".",
|
|
step: 0.05,
|
|
value: 0.5
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(box, "demo");
|
|
|
|
// SpriteIcon
|
|
// Create the spritesheet
|
|
var spriteSheet = new photonui.SpriteSheet({
|
|
name: "default",
|
|
imageUrl: "./spritesheet.png",
|
|
size: 16,
|
|
icons: {
|
|
"remove": [ 0, 0],
|
|
"add": [16, 0],
|
|
"grayHeart": [32, 0],
|
|
"redHeart": [48, 0],
|
|
"battery1": [ 0, 16],
|
|
"battery2": [16, 16],
|
|
"battery3": [32, 16],
|
|
"battery4": [48, 16]
|
|
}
|
|
});
|
|
|
|
// Create an icon from the spritesheet
|
|
var icon2 = new photonui.SpriteIcon("default/redHeart");
|
|
|
|
photonui.domInsert(icon2, "demo");
|
|
|
|
// SubMenuItem
|
|
var menu = new photonui.Menu({
|
|
iconVisible: true,
|
|
children: [
|
|
new photonui.SubMenuItem({
|
|
text: "Submenu Item",
|
|
menuName: "submenu1",
|
|
icon: new photonui.FAIcon("fa-paw")
|
|
}),
|
|
new photonui.Menu({
|
|
visible: true, // false to hide it by default
|
|
name: "submenu1",
|
|
iconVisible: true,
|
|
children: [
|
|
new photonui.MenuItem({
|
|
text: "Submenu Item 1",
|
|
icon: new photonui.FAIcon("fa-gamepad")
|
|
}),
|
|
new photonui.MenuItem({
|
|
text: "Sumbenu Item 2",
|
|
icon: new photonui.FAIcon("fa-flask")
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(menu, "demo");
|
|
|
|
// Switch
|
|
var sw = new photonui.Switch({
|
|
value: true
|
|
});
|
|
|
|
photonui.domInsert(sw, "demo");
|
|
|
|
// TabItem
|
|
var tabs = new photonui.TabLayout({
|
|
tabsPosition: "top", // "top", "bottom", "left" or "right"
|
|
children: [
|
|
new photonui.TabItem({
|
|
title: "Tab 1",
|
|
child: new photonui.Label("Widget inside the first tab")
|
|
}),
|
|
new photonui.TabItem({
|
|
title: "Tab 2",
|
|
child: new photonui.Button()
|
|
}),
|
|
new photonui.TabItem({
|
|
title: "Tab 3"
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(tabs, "demo");
|
|
document.getElementById("demo")
|
|
.className += " photonui-container-expand-child";
|
|
|
|
// TabLayout
|
|
var tabs = new photonui.TabLayout({
|
|
tabsPosition: "top", // "top", "bottom", "left" or "right"
|
|
children: [
|
|
new photonui.TabItem({
|
|
title: "Tab 1",
|
|
child: new photonui.Label("Widget inside the first tab")
|
|
}),
|
|
new photonui.TabItem({
|
|
title: "Tab 2",
|
|
child: new photonui.Button()
|
|
}),
|
|
new photonui.TabItem({
|
|
title: "Tab 3"
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(tabs, "demo");
|
|
document.getElementById("demo")
|
|
.className += " photonui-container-expand-child";
|
|
|
|
// Text
|
|
var text = new photonui.Text({
|
|
rawHtml: "<strong>Lorem ipsum</strong> dolor sit amet..."
|
|
});
|
|
|
|
photonui.domInsert(text, "demo");
|
|
|
|
// TextAreaField
|
|
var field3 = new photonui.TextAreaField({
|
|
placeholder: "placeholder",
|
|
value: "This is a\nTextArea"
|
|
});
|
|
|
|
photonui.domInsert(field3, "demo");
|
|
|
|
// TextField
|
|
var field = new photonui.TextField({
|
|
placeholder: "placeholder",
|
|
value: "Text"
|
|
});
|
|
|
|
photonui.domInsert(field, "demo");
|
|
|
|
var grid = new photonui.GridLayout({
|
|
verticalSpacing: 5,
|
|
horizontalSpacing: 5,
|
|
children: [
|
|
new photonui.Label({
|
|
text: "Username:",
|
|
forInputName: "username-field",
|
|
layoutOptions: {
|
|
gridX: 0,
|
|
gridY: 0
|
|
}
|
|
}),
|
|
new photonui.TextField({
|
|
name: "username-field",
|
|
placeholder: "Username",
|
|
value: "Anakin",
|
|
layoutOptions: {
|
|
gridX: 1,
|
|
gridY: 0
|
|
}
|
|
}),
|
|
new photonui.Label({
|
|
text: "Password:",
|
|
forInputName: "password-field",
|
|
layoutOptions: {
|
|
gridX: 0,
|
|
gridY: 1
|
|
}
|
|
}),
|
|
new photonui.TextField({
|
|
name: "password-field",
|
|
type: "password",
|
|
placeholder: "password",
|
|
value: "D4RK51D3",
|
|
layoutOptions: {
|
|
gridX: 1,
|
|
gridY: 1
|
|
}
|
|
}),
|
|
new photonui.Button({
|
|
text: "Login",
|
|
leftIcon: new photonui.FAIcon("fa-sign-in"),
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
var usernameField = photonui.getWidget("username-field");
|
|
var passwordField = photonui.getWidget("password-field");
|
|
alert(
|
|
"Username: " + (<photonui.TextField>usernameField).value +
|
|
", Password: " + (<photonui.TextField>passwordField).value
|
|
);
|
|
}
|
|
},
|
|
layoutOptions: {
|
|
gridX: 0,
|
|
gridY: 2,
|
|
gridWidth: 2
|
|
}
|
|
})
|
|
]
|
|
});
|
|
|
|
photonui.domInsert(grid, "demo");
|
|
|
|
// ToggleButton
|
|
var toggle = new photonui.ToggleButton({
|
|
value: false,
|
|
text: "Toggle Button"
|
|
});
|
|
|
|
photonui.domInsert(toggle, "demo");
|
|
|
|
var toggle2 = new photonui.ToggleButton({
|
|
value: false,
|
|
text: "Value: off",
|
|
buttonColor: "red",
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
widget.text = "Value: " + ((value) ? "on" : "off");
|
|
widget.buttonColor = (value) ? "green" : "red";
|
|
}
|
|
}
|
|
});
|
|
|
|
photonui.domInsert(toggle2, "demo");
|
|
|
|
// Translation
|
|
var translation = new photonui.Translation();
|
|
|
|
translation.addCatalogs({
|
|
"fr": {
|
|
"messages": {
|
|
"Hello World": ["Bonjour le monde"]
|
|
}
|
|
}
|
|
});
|
|
|
|
translation.locale = "fr"; // Change the locale to test
|
|
|
|
var label = new photonui.Label({
|
|
text: _("Hello World"),
|
|
text2: translation.lazyGettext("Hello World")
|
|
});
|
|
|
|
photonui.domInsert(label, "demo");
|
|
|
|
var tr = new photonui.Translation();
|
|
tr.addCatalogs({
|
|
"fr": {
|
|
"plural-forms": "nplurals=2; plural=(n > 1);",
|
|
"messages": {
|
|
"Hello World": ["Bonjour le monde"],
|
|
'Browser language is "{lang}".': ["La langue du navigateur est « {lang} »."],
|
|
"Close": ["Fermer"]
|
|
}
|
|
},
|
|
"it": {
|
|
"plural-forms": "nplurals=2; plural=(n != 1);",
|
|
"messages": {
|
|
"Hello World": ["Buongiorno il mondo"],
|
|
'Browser language is "{lang}".': ['La lingua del browser è "{lang}".'],
|
|
"Close": ["Chiudere"]
|
|
}
|
|
}
|
|
});
|
|
tr.locale = tr.guessUserLanguage(); // Browser language
|
|
|
|
// Language selector
|
|
var layout = new photonui.BoxLayout({
|
|
orientation: "vertical",
|
|
children: [
|
|
new photonui.Label({
|
|
text: _('Browser language is "{lang}".', {
|
|
lang: tr.guessUserLanguage()
|
|
})
|
|
}),
|
|
new photonui.Select({
|
|
name: "lang",
|
|
placeholder: "Choose a language...",
|
|
value: tr.locale,
|
|
children: [
|
|
new photonui.MenuItem({value: "en", text: "English"}),
|
|
new photonui.MenuItem({value: "fr", text: "Français"}),
|
|
new photonui.MenuItem({value: "it", text: "Italiano"}),
|
|
],
|
|
callbacks: {
|
|
"value-changed": function(widget: any, value: any) {
|
|
tr.locale = value;
|
|
}
|
|
}
|
|
})
|
|
]
|
|
});
|
|
photonui.domInsert(layout, "demo");
|
|
|
|
// A window
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
var win = new photonui.Window({
|
|
visible: true,
|
|
title: _("Hello World"),
|
|
x: pos.x, y: pos.y + 100,
|
|
width: 250,
|
|
padding: 20,
|
|
child: new photonui.Button({
|
|
text: _("Close"),
|
|
callbacks: {
|
|
"click": function() { win.hide(); }
|
|
}
|
|
}),
|
|
callbacks: {
|
|
"close-button-clicked": function(widget: any) { widget.hide(); }
|
|
}
|
|
});
|
|
|
|
// Viewport
|
|
var viewport = new photonui.Viewport({
|
|
width: 300,
|
|
height: 200,
|
|
padding: 5,
|
|
horizontalScrollbar: false, // true, false or null (= auto)
|
|
verticalScrollbar: null, // true, false or null (= auto)
|
|
child: new photonui.BoxLayout({
|
|
children: [
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button(),
|
|
new photonui.Button()
|
|
]
|
|
})
|
|
});
|
|
|
|
photonui.domInsert(viewport, "demo");
|
|
|
|
// Window
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
|
|
new photonui.Window({
|
|
title: "My Window",
|
|
visible: true,
|
|
x: pos.x, y: pos.y,
|
|
width: 300, height: 100,
|
|
callbacks: {
|
|
"close-button-clicked": function(widget: any) {
|
|
widget.destroy();
|
|
},
|
|
"position-changed": function(widget: any, x: number, y: number) {
|
|
widget.title = "My Window (x: " + x + ", y: " + y + ")";
|
|
}
|
|
}
|
|
});
|
|
|
|
// Get the position of the #demo area to display windows
|
|
// in the right place
|
|
var pos = photonui.Helpers.getAbsolutePosition("demo");
|
|
|
|
// Create a window with a button to center it (x axis) on the page
|
|
var win1 = new photonui.Window({
|
|
title: "Window 1",
|
|
visible: true,
|
|
padding: 10,
|
|
x: pos.x + 20, y: pos.y + 50,
|
|
child: new photonui.Button({
|
|
text: "Center Me",
|
|
callbacks: {
|
|
click: function(widget: any, event: any) {
|
|
win1.center();
|
|
win1.y = pos.y;
|
|
}
|
|
}
|
|
}),
|
|
callbacks: {
|
|
"close-button-clicked": function(widget: any) {
|
|
widget.destroy();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Create a second window without "close" button
|
|
var win2 = new photonui.Window({
|
|
title: "Window 2",
|
|
visible: true,
|
|
height: 100,
|
|
closeButtonVisible: false,
|
|
x: pos.x, y: pos.y
|
|
});
|
|
|
|
// Focus the first window
|
|
win1.show();
|