safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 21:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-1170: Migrate to JSON representation, at least in spirit.

Browse Source
This commit is contained in:
Michael Jumper
2015-04-28 14:34:04 -07:00
parent 16072bd4d8
commit 29a0bc6387
1 changed files with 294 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

757
guacamole-common-js/src/main/webapp/modules/OnScreenKeyboard.js
View File

@@ -1,5 +1,5 @@
/* /*
* Copyright (C) 2013 Glyptodon LLC * Copyright (C) 2015 Glyptodon LLC
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy * Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal * of this software and associated documentation files (the "Software"), to deal
@@ -23,22 +23,29 @@
var Guacamole = Guacamole || {}; var Guacamole = Guacamole || {};
/** /**
* Dynamic on-screen keyboard. Given the URL to an XML keyboard layout file, * Dynamic on-screen keyboard. Given the layout object for an on-screen
* this object will download and use the XML to construct a clickable on-screen * keyboard, this object will construct a clickable on-screen keyboard with its
* keyboard with its own key events. * own key events.
* *
* @constructor * @constructor
* @param {String} url The URL of an XML keyboard layout file. * @param {Guacamole.OnScreenKeyboard.Layout} layout
* The layout of the on-screen keyboard to display.
*/ */
Guacamole.OnScreenKeyboard = function(url) { Guacamole.OnScreenKeyboard = function(layout) {
var on_screen_keyboard = this; /**
* Reference to this Guacamole.OnScreenKeyboard.
*
* @type Guacamole.OnScreenKeyboard
*/
var osk = this;
/** /**
* State of all modifiers. This is the bitwise OR of all active modifier * State of all modifiers. This is the bitwise OR of all active modifier
* values. * values.
* *
* @private * @private
* @type Number
*/ */
var modifiers = 0; var modifiers = 0;
@@ -47,86 +54,69 @@ Guacamole.OnScreenKeyboard = function(url) {
* original press. When the modifier is cleared, this keysym must be * original press. When the modifier is cleared, this keysym must be
* released. * released.
* *
* @private
* @type Object.<String, Number> * @type Object.<String, Number>
*/ */
var modifier_keysyms = {}; var modifierKeysyms = {};
/**
* All scalable elements which are part of the on-screen keyboard. Each
* scalable element is carefully controlled to ensure the interface layout
* and sizing remains constant, even on browsers that would otherwise
* experience rounding error due to unit conversions.
*
* @private
* @type ScaledElement[]
*/
var scaledElements = []; var scaledElements = [];
var modifier_masks = {};
var next_mask = 1;
/** /**
* Adds a class to an element. * Adds a CSS class to an element.
* *
* @private * @private
* @function * @function
* @param {Element} element The element to add a class to. * @param {Element} element
* @param {String} classname The name of the class to add. * The element to add a class to.
*
* @param {String} classname
* The name of the class to add.
*/ */
var addClass; var addClass = function addClass(element, classname) {
/** // If classList supported, use that
* Removes a class from an element. if (element.classList)
*
* @private
* @function
* @param {Element} element The element to remove a class from.
* @param {String} classname The name of the class to remove.
*/
var removeClass;
/**
* The number of mousemove events to require before re-enabling mouse
* event handling after receiving a touch event.
*/
this.touchMouseThreshold = 3;
/**
* Counter of mouse events to ignore. This decremented by mousemove, and
* while non-zero, mouse events will have no effect.
* @private
*/
var ignore_mouse = 0;
// Ignore all pending mouse events when touch events are the apparent source
function ignorePendingMouseEvents() { ignore_mouse = on_screen_keyboard.touchMouseThreshold; }
// If Node.classList is supported, implement addClass/removeClass using that
if (Node.classList) {
/** @ignore */
addClass = function(element, classname) {
element.classList.add(classname); element.classList.add(classname);
};
/** @ignore */
removeClass = function(element, classname) {
element.classList.remove(classname);
};
}
// Otherwise, implement own // Otherwise, simply append the class
else { else
/** @ignore */
addClass = function(element, classname) {
// Simply add new class
element.className += " " + classname; element.className += " " + classname;
}; };
/** @ignore */
removeClass = function(element, classname) {
// Filter out classes with given name /**
* Removes a CSS class from an element.
*
* @private
* @function
* @param {Element} element
* The element to remove a class from.
*
* @param {String} classname
* The name of the class to remove.
*/
var removeClass = function removeClass(element, classname) {
// If classList supported, use that
if (element.classList)
element.classList.remove(classname);
// Otherwise, manually filter out classes with given name
else {
element.className = element.className.replace(/([^ ]+)[ ]*/g, element.className = element.className.replace(/([^ ]+)[ ]*/g,
function(match, testClassname, spaces, offset, string) { function removeMatchingClasses(match, testClassname) {
// If same class, remove // If same class, remove
if (testClassname == classname) if (testClassname === classname)
return ""; return "";
// Otherwise, allow // Otherwise, allow
@@ -134,393 +124,170 @@ Guacamole.OnScreenKeyboard = function(url) {
} }
); );
}
}; };
}
// Returns a unique power-of-two value for the modifier with the /**
// given name. The same value will be returned for the same modifier. * Counter of mouse events to ignore. This decremented by mousemove, and
function getModifierMask(name) { * while non-zero, mouse events will have no effect.
*
* @private
* @type Number
*/
var ignoreMouse = 0;
/**
* Ignores all pending mouse events when touch events are the apparent
* source. Mouse events are ignored until at least touchMouseThreshold
* mouse events occur without corresponding touch events.
*
* @private
*/
var ignorePendingMouseEvents = function ignorePendingMouseEvents() {
ignoreMouse = osk.touchMouseThreshold;
};
/**
* Map of modifier names to their corresponding, unique, power-of-two value
* bitmasks.
*
* @private
* @type Object.<String, Number>
*/
var modifierMasks = {};
/**
* The bitmask to assign to the next modifier, if a new modifier is used
* which does not yet have a corresponding bitmask.
*
* @private
* @type Number
*/
var nextMask = 1;
/**
* Returns a unique power-of-two value for the modifier with the given
* name. The same value will be returned consistently for the same
* modifier.
*
* @private
* @param {String} name
* The name of the modifier to return a bitmask for.
*
* @return {Number}
* The unique power-of-two value associated with the modifier having
* the given name, which may be newly allocated.
*/
var getModifierMask = function getModifierMask(name) {
var value = modifier_masks[name]; var value = modifierMasks[name];
if (!value) { if (!value) {
// Get current modifier, advance to next // Get current modifier, advance to next
value = next_mask; value = nextMask;
next_mask <<= 1; nextMask <<= 1;
// Store value of this modifier // Store value of this modifier
modifier_masks[name] = value; modifierMasks[name] = value;
} }
return value; return value;
} };
function ScaledElement(element, width, height, scaleFont) { /**
* An element whose dimensions are maintained according to an arbitrary
* scale. The conversion factor for these arbitrary units to pixels is
* provided later via a call to scale().
*
* @private
* @constructor
* @param {Element} element
* The element whose scale should be maintained.
*
* @param {Number} width
* The width of the element, in arbitrary units, relative to other
* ScaledElements.
*
* @param {Number} height
* The height of the element, in arbitrary units, relative to other
* ScaledElements.
*
* @param {Boolean} [scaleFont=false]
* Whether the line height and font size should be scaled as well.
*/
var ScaledElement = function ScaledElement(element, width, height, scaleFont) {
this.width = width; /**
this.height = height; * The width of this ScaledElement, in arbitrary units, relative to
* other ScaledElements.
*
* @type Number
*/
this.width = width;
/**
* The height of this ScaledElement, in arbitrary units, relative to
* other ScaledElements.
*
* @type Number
*/
this.height = height;
/**
* Resizes the associated element, updating its dimensions according to
* the given pixels per unit.
*
* @param {Number} pixels
* The number of pixels to assign per arbitrary unit.
*/
this.scale = function(pixels) { this.scale = function(pixels) {
element.style.width = (width * pixels) + "px";
element.style.height = (height * pixels) + "px";
// Scale element width/height
element.style.width = (width * pixels) + "px";
element.style.height = (height * pixels) + "px";
// Scale font, if requested
if (scaleFont) { if (scaleFont) {
element.style.lineHeight = (height * pixels) + "px"; element.style.lineHeight = (height * pixels) + "px";
element.style.fontSize = pixels + "px"; element.style.fontSize = pixels + "px";
} }
}
} };
// For each child of element, call handler defined in next };
function parseChildren(element, next) {
var children = element.childNodes;
for (var i=0; i<children.length; i++) {
// Get child node
var child = children[i];
// Do not parse text nodes
if (!child.tagName)
continue;
// Get handler for node
var handler = next[child.tagName];
// Call handler if defined
if (handler)
handler(child);
// Throw exception if no handler
else
throw new Error(
"Unexpected " + child.tagName
+ " within " + element.tagName
);
}
}
// Create keyboard // Create keyboard
var keyboard = document.createElement("div"); var keyboard = document.createElement("div");
keyboard.className = "guac-keyboard"; keyboard.className = "guac-keyboard";
// Retrieve keyboard XML /* TODO: Actually parse the darn thing */
var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.open("GET", url, false);
xmlhttprequest.send(null);
var xml = xmlhttprequest.responseXML;
if (xml) {
function parse_row(e) {
var row = document.createElement("div");
row.className = "guac-keyboard-row";
parseChildren(e, {
"column": function(e) {
row.appendChild(parse_column(e));
},
"gap": function parse_gap(e) {
// Create element
var gap = document.createElement("div");
gap.className = "guac-keyboard-gap";
// Set gap size
var gap_units = 1;
if (e.getAttribute("size"))
gap_units = parseFloat(e.getAttribute("size"));
scaledElements.push(new ScaledElement(gap, gap_units, gap_units));
row.appendChild(gap);
},
"key": function parse_key(e) {
// Create element
var key_element = document.createElement("div");
key_element.className = "guac-keyboard-key";
// Append class if specified
if (e.getAttribute("class"))
key_element.className += " " + e.getAttribute("class");
// Position keys using container div
var key_container_element = document.createElement("div");
key_container_element.className = "guac-keyboard-key-container";
key_container_element.appendChild(key_element);
// Create key
var key = new Guacamole.OnScreenKeyboard.Key();
// Set key size
var key_units = 1;
if (e.getAttribute("size"))
key_units = parseFloat(e.getAttribute("size"));
key.size = key_units;
parseChildren(e, {
"cap": function parse_cap(e) {
// TODO: Handle "sticky" attribute
// Get content of key cap
var content = e.textContent || e.text;
// If read as blank, assume cap is a single space.
if (content.length == 0)
content = " ";
// Get keysym
var real_keysym = null;
if (e.getAttribute("keysym"))
real_keysym = parseInt(e.getAttribute("keysym"));
// If no keysym specified, try to get from key content
else if (content.length == 1) {
var charCode = content.charCodeAt(0);
if (charCode >= 0x0000 && charCode <= 0x00FF)
real_keysym = charCode;
else if (charCode >= 0x0100 && charCode <= 0x10FFFF)
real_keysym = 0x01000000 | charCode;
}
// Create cap
var cap = new Guacamole.OnScreenKeyboard.Cap(content, real_keysym);
if (e.getAttribute("modifier"))
cap.modifier = e.getAttribute("modifier");
// Create cap element
var cap_element = document.createElement("div");
cap_element.className = "guac-keyboard-cap";
cap_element.textContent = content;
key_element.appendChild(cap_element);
// Append class if specified
if (e.getAttribute("class"))
cap_element.className += " " + e.getAttribute("class");
// Get modifier value
var modifierValue = 0;
if (e.getAttribute("if")) {
// Get modifier value for specified comma-delimited
// list of required modifiers.
var requirements = e.getAttribute("if").split(",");
for (var i=0; i<requirements.length; i++) {
modifierValue |= getModifierMask(requirements[i]);
addClass(cap_element, "guac-keyboard-requires-" + requirements[i]);
addClass(key_element, "guac-keyboard-uses-" + requirements[i]);
}
}
// Store cap
key.modifierMask |= modifierValue;
key.caps[modifierValue] = cap;
}
});
scaledElements.push(new ScaledElement(key_container_element, key_units, 1, true));
row.appendChild(key_container_element);
// Set up click handler for key
function press() {
// Press key if not yet pressed
if (!key.pressed) {
addClass(key_element, "guac-keyboard-pressed");
// Get current cap based on modifier state
var cap = key.getCap(modifiers);
// Update modifier state
if (cap.modifier) {
// Construct classname for modifier
var modifierClass = "guac-keyboard-modifier-" + cap.modifier;
var modifierMask = getModifierMask(cap.modifier);
// Toggle modifier state
modifiers ^= modifierMask;
// Activate modifier if pressed
if (modifiers & modifierMask) {
addClass(keyboard, modifierClass);
modifier_keysyms[cap.modifier] = cap.keysym;
// Send key event
if (on_screen_keyboard.onkeydown && cap.keysym)
on_screen_keyboard.onkeydown(cap.keysym);
}
// Deactivate if not pressed
else {
var original_keysym = modifier_keysyms[cap.modifier];
removeClass(keyboard, modifierClass);
delete modifier_keysyms[cap.modifier];
// Send key event
if (on_screen_keyboard.onkeyup && original_keysym)
on_screen_keyboard.onkeyup(original_keysym);
}
}
// If not modifier, send key event now
else if (on_screen_keyboard.onkeydown && cap.keysym)
on_screen_keyboard.onkeydown(cap.keysym);
// Mark key as pressed
key.pressed = true;
}
}
function release() {
// Release key if currently pressed
if (key.pressed) {
// Get current cap based on modifier state
var cap = key.getCap(modifiers);
removeClass(key_element, "guac-keyboard-pressed");
// Send key event if not a modifier key
if (!cap.modifier && on_screen_keyboard.onkeyup && cap.keysym)
on_screen_keyboard.onkeyup(cap.keysym);
// Mark key as released
key.pressed = false;
}
}
function touchPress(e) {
e.preventDefault();
ignore_mouse = on_screen_keyboard.touchMouseThreshold;
press();
}
function touchRelease(e) {
e.preventDefault();
ignore_mouse = on_screen_keyboard.touchMouseThreshold;
release();
}
function mousePress(e) {
e.preventDefault();
if (ignore_mouse == 0)
press();
}
function mouseRelease(e) {
e.preventDefault();
if (ignore_mouse == 0)
release();
}
key_element.addEventListener("touchstart", touchPress, true);
key_element.addEventListener("touchend", touchRelease, true);
key_element.addEventListener("mousedown", mousePress, true);
key_element.addEventListener("mouseup", mouseRelease, true);
key_element.addEventListener("mouseout", mouseRelease, true);
}
});
return row;
}
function parse_column(e) {
var col = document.createElement("div");
col.className = "guac-keyboard-column";
if (col.getAttribute("align"))
col.style.textAlign = col.getAttribute("align");
// Columns can only contain rows
parseChildren(e, {
"row": function(e) {
col.appendChild(parse_row(e));
}
});
return col;
}
// Parse document
var keyboard_element = xml.documentElement;
if (keyboard_element.tagName != "keyboard")
throw new Error("Root element must be keyboard");
// Get attributes
if (!keyboard_element.getAttribute("size"))
throw new Error("size attribute is required for keyboard");
var keyboard_size = parseFloat(keyboard_element.getAttribute("size"));
parseChildren(keyboard_element, {
"row": function(e) {
keyboard.appendChild(parse_row(e));
},
"column": function(e) {
keyboard.appendChild(parse_column(e));
}
});
}
// Do not allow selection or mouse movement to propagate/register. // Do not allow selection or mouse movement to propagate/register.
keyboard.onselectstart = keyboard.onselectstart =
keyboard.onmousemove = keyboard.onmousemove =
keyboard.onmouseup = keyboard.onmouseup =
keyboard.onmousedown = keyboard.onmousedown = function handleMouseEvents(e) {
function(e) {
// If ignoring events, decrement counter // If ignoring events, decrement counter
if (ignore_mouse) if (ignoreMouse)
ignore_mouse--; ignoreMouse--;
e.stopPropagation(); e.stopPropagation();
return false; return false;
}; };
/**
* The number of mousemove events to require before re-enabling mouse
* event handling after receiving a touch event.
*
* @type Number
*/
this.touchMouseThreshold = 3;
/** /**
* Fired whenever the user presses a key on this Guacamole.OnScreenKeyboard. * Fired whenever the user presses a key on this Guacamole.OnScreenKeyboard.
* *
@@ -535,7 +302,14 @@ Guacamole.OnScreenKeyboard = function(url) {
* @event * @event
* @param {Number} keysym The keysym of the key being released. * @param {Number} keysym The keysym of the key being released.
*/ */
this.onkeyup = null; this.onkeyup = null;
/**
* The keyboard layout provided at time of construction.
*
* @type Guacamole.OnScreenKeyboard.Layout
*/
this.layout = layout;
/** /**
* Returns the element containing the entire on-screen keyboard. * Returns the element containing the entire on-screen keyboard.
@@ -556,12 +330,13 @@ Guacamole.OnScreenKeyboard = function(url) {
this.resize = function(width) { this.resize = function(width) {
// Get pixel size of a unit // Get pixel size of a unit
var unit = Math.floor(width * 10 / keyboard_size) / 10; var unit = Math.floor(width * 10 / osk.layout.width) / 10;
console.log("OnScreenKeyboard", "resizing unit", unit);
// Resize all scaled elements // Resize all scaled elements
for (var i=0; i<scaledElements.length; i++) { for (var i=0; i<scaledElements.length; i++) {
var scaledElement = scaledElements[i]; var scaledElement = scaledElements[i];
scaledElement.scale(unit) scaledElement.scale(unit);
} }
}; };
@@ -569,77 +344,133 @@ Guacamole.OnScreenKeyboard = function(url) {
}; };
/** /**
* Basic representation of a single key of a keyboard. Each key has a set of * Represents an entire on-screen keyboard layout, including all available
* caps associated with tuples of modifiers. The cap determins what happens * keys, their behaviors, and their relative position and sizing.
* when a key is pressed, while it is the state of modifier keys that determines *
* what cap is in effect on any particular key.
*
* @constructor * @constructor
* @param {Guacamole.OnScreenKeyboard.Layout|Object} template
* The object whose identically-named properties will be used to initialize
* the properties of this layout.
*/ */
Guacamole.OnScreenKeyboard.Key = function() { Guacamole.OnScreenKeyboard.Layout = function(template) {
var key = this;
/** /**
* Whether this key is currently pressed. * The language of keyboard layout, such as "en_US". This property is for
* informational purposes only, but it is recommend to conform to the
* [language code]_[country code] format.
*
* @type String
*/ */
this.pressed = false; this.language = template.language;
/** /**
* Width of the key, relative to the size of the keyboard. * The type of keyboard layout, such as "qwerty". This property is for
* informational purposes only, and does not conform to any standard.
*
* @type String
*/ */
this.size = 1; this.type = template.type;
/** /**
* An associative map of all caps by modifier. * Map of key name to corresponding keysym, title, or key object. If only
* the keysym or title is provided, the key object will be created
* implicitly. In all cases, the name property of the key object will be
* taken from the name given in the mapping.
*
* @type Object.<String, Number|String|Key[]>
*/ */
this.caps = {}; this.keys = template.keys;
/** /**
* Bit mask with all modifiers that affect this key set. * Arbitrarily nested, arbitrarily grouped key names. The contents of the
* layout will be traversed to produce an identically-nested grouping of
* keys in the DOM tree. All strings will be transformed into their
* corresponding sets of keys, while all objects and arrays will be
* transformed into named groups and anonymous groups respectively.
*
* @type Object
*/ */
this.modifierMask = 0; this.layout = template.layout;
/** /**
* Given the bitwise OR of all active modifiers, returns the key cap * The width of the entire keyboard, in arbitrary units. The width of each
* which applies. * key is relative to this width, as both width values are assumed to be in
* the same units. The conversion factor between these units and pixels is
* derived later via a call to resize() on the Guacamole.OnScreenKeyboard.
*
* @type Number
*/ */
this.getCap = function(modifier) { this.width = template.width;
return key.caps[modifier & key.modifierMask];
};
}; };
/** /**
* Basic representation of a cap of a key. The cap is the visible part of a key * Represents a single key, or a single possible behavior of a key. Each key
* and determines the active behavior of a key when pressed. The state of all * on the on-screen keyboard must have at least one associated
* modifiers on the keyboard determines the active cap for all keys, thus * Guacamole.OnScreenKeyboard.Key, whether that key is explicitly defined or
* each cap is associated with a set of modifiers. * implied, and may have multiple Guacamole.OnScreenKeyboard.Key if behavior
* * depends on modifier states.
*
* @constructor * @constructor
* @param {String} text The text to be displayed within this cap. * @param {Guacamole.OnScreenKeyboard.Key|Object} template
* @param {Number} keysym The keysym this cap sends when its associated key is * The object whose identically-named properties will be used to initialize
* pressed or released. * the properties of this key.
* @param {String} modifier The modifier represented by this cap.
*/ */
Guacamole.OnScreenKeyboard.Cap = function(text, keysym, modifier) { Guacamole.OnScreenKeyboard.Key = function(template) {
/**
* Modifier represented by this keycap
*/
this.modifier = null;
/**
* The text to be displayed within this keycap
*/
this.text = text;
/** /**
* The keysym this cap sends when its associated key is pressed/released * The unique name identifying this key within the keyboard layout.
*
* @type String
*/ */
this.keysym = keysym; this.name = template.name;
/**
* The human-readable title that will be displayed to the user within the
* key. If not provided, this will be derived from the key name.
*
* @type String
*/
this.title = template.title || template.name;
/**
* The keysym to be pressed/released when this key is pressed/released. If
* not provided, this will be derived from the title if the title is a
* single character.
*
* @type Number
*/
this.keysym = template.keysym;
/**
* The name of the modifier set when the key is pressed and cleared when
* this key is released, if any. The names of modifiers are distinct from
* the names of keys; both the "RightShift" and "LeftShift" keys may set
* the "shift" modifier, for example. By default, the key will affect no
* modifiers.
*
* @type String
*/
this.modifier = template.modifier;
/**
* An array containing the names of each modifier required for this key to
* have an effect. For example, a lowercase letter may require nothing,
* while an uppercase letter would require "shift", assuming the Shift key
* is named "shift" within the layout. By default, the key will require
* no modifiers.
*
* @type String[]
*/
this.requires = template.requires || [];
/**
* The width of this key, in arbitrary units, relative to other keys in the
* same layout. The true pixel size of this key will be determined by the
* overall size of the keyboard. By default, this will be 1.
*
* @type Number
*/
this.width = template.width || 1;
// Set modifier if provided
if (modifier) this.modifier = modifier;
}; };