Resizable elements.

This commit is contained in:
Michael Jumper
2012-01-19 15:05:53 -08:00
parent 1a88b26c98
commit 80795f656f

View File

@@ -48,6 +48,25 @@ var Guacamole = Guacamole || {};
*/ */
Guacamole.OnScreenKeyboard = function(url) { Guacamole.OnScreenKeyboard = function(url) {
var scaledElements = [];
function ScaledElement(element, width, height, scaleFont) {
this.width = width;
this.height = height;
this.scale = function(pixels) {
element.style.width = width * pixels + "px";
element.style.height = height * pixels + "px";
if (scaleFont) {
element.style.lineHeight = height * pixels + "px";
element.style.fontSize = pixels + "px";
}
}
}
// For each child of element, call handler defined in next // For each child of element, call handler defined in next
function parseChildren(element, next) { function parseChildren(element, next) {
@@ -92,10 +111,6 @@ Guacamole.OnScreenKeyboard = function(url) {
if (xml) { if (xml) {
var width = 640;
var size = 20;
var unit = width / size;
function parse_row(e) { function parse_row(e) {
var row = document.createElement("div"); var row = document.createElement("div");
@@ -117,10 +132,11 @@ Guacamole.OnScreenKeyboard = function(url) {
gap.className = "guacamole-keyboard-gap"; gap.className = "guacamole-keyboard-gap";
// Set gap size // Set gap size
var gap_units = 1;
if (gap_size) if (gap_size)
gap.style.width = gap.style.height = gap_units = parseFloat(gap_size.value);
parseFloat(gap_size.value)*unit + "px";
scaledElements.push(new ScaledElement(gap, gap_units, gap_units));
row.appendChild(gap); row.appendChild(gap);
}, },
@@ -134,9 +150,6 @@ Guacamole.OnScreenKeyboard = function(url) {
// Create element // Create element
var key_element = document.createElement("div"); var key_element = document.createElement("div");
key_element.className = "guacamole-keyboard-key"; key_element.className = "guacamole-keyboard-key";
key_element.style.fontSize = unit + "px";
key_element.style.height = unit + "px";
key_element.style.lineHeight = unit + "px";
// Create cap // Create cap
var cap_element = document.createElement("div"); var cap_element = document.createElement("div");
@@ -144,10 +157,9 @@ Guacamole.OnScreenKeyboard = function(url) {
key_element.appendChild(cap_element); key_element.appendChild(cap_element);
// Set key size // Set key size
var key_units = 1;
if (key_size) if (key_size)
key_element.style.width = parseFloat(key_size.value)*unit + "px"; key_units = parseFloat(key_size.value);
else
key_element.style.width = unit + "px";
parseChildren(e, { parseChildren(e, {
"cap": function cap(e) { "cap": function cap(e) {
@@ -169,6 +181,7 @@ Guacamole.OnScreenKeyboard = function(url) {
} }
}); });
scaledElements.push(new ScaledElement(key_element, key_units, 1, true));
row.appendChild(key_element); row.appendChild(key_element);
} }
@@ -207,7 +220,10 @@ Guacamole.OnScreenKeyboard = function(url) {
throw new Error("Root element must be keyboard"); throw new Error("Root element must be keyboard");
// Get attributes // Get attributes
var keyboard_size = keyboard_element.attributes["size"]; if (!keyboard_element.attributes["size"])
throw new Error("size attribute is required for keyboard");
var keyboard_size = parseFloat(keyboard_element.attributes["size"].value);
parseChildren(keyboard_element, { parseChildren(keyboard_element, {
@@ -241,6 +257,19 @@ Guacamole.OnScreenKeyboard = function(url) {
return keyboard; return keyboard;
}; };
this.resize = function(width) {
// Get pixel size of a unit
var unit = width / keyboard_size;
// Resize all scaled elements
for (var i=0; i<scaledElements.length; i++) {
var scaledElement = scaledElements[i];
scaledElement.scale(unit)
}
};
}; };
Guacamole.OnScreenKeyboard.Key = function() { Guacamole.OnScreenKeyboard.Key = function() {