mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-06 21:27:40 +00:00
GUAC-1170: Migrate to JSON representation, at least in spirit.
This commit is contained in:
Michael Jumper
@@ -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
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
@@ -23,22 +23,29 @@
|
||||
var Guacamole = Guacamole || {};
|
||||
|
||||
/**
|
||||
* Dynamic on-screen keyboard. Given the URL to an XML keyboard layout file,
|
||||
* this object will download and use the XML to construct a clickable on-screen
|
||||
* keyboard with its own key events.
|
||||
* Dynamic on-screen keyboard. Given the layout object for an on-screen
|
||||
* keyboard, this object will construct a clickable on-screen keyboard with its
|
||||
* own key events.
|
||||
*
|
||||
* @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
|
||||
* values.
|
||||
*
|
||||
* @private
|
||||
* @type Number
|
||||
*/
|
||||
var modifiers = 0;
|
||||
|
||||
@@ -47,86 +54,69 @@ Guacamole.OnScreenKeyboard = function(url) {
|
||||
* original press. When the modifier is cleared, this keysym must be
|
||||
* released.
|
||||
*
|
||||
* @private
|
||||
* @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 modifier_masks = {};
|
||||
var next_mask = 1;
|
||||
|
||||
/**
|
||||
* Adds a class to an element.
|
||||
* Adds a CSS class to an element.
|
||||
*
|
||||
* @private
|
||||
* @function
|
||||
* @param {Element} element The element to add a class to.
|
||||
* @param {String} classname The name of the class to add.
|
||||
*/
|
||||
var addClass;
|
||||
|
||||
/**
|
||||
* Removes a class from an element.
|
||||
* @param {Element} element
|
||||
* The element to add a class to.
|
||||
*
|
||||
* @private
|
||||
* @function
|
||||
* @param {Element} element The element to remove a class from.
|
||||
* @param {String} classname The name of the class to remove.
|
||||
* @param {String} classname
|
||||
* The name of the class to add.
|
||||
*/
|
||||
var removeClass;
|
||||
var addClass = function addClass(element, classname) {
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
// If classList supported, use that
|
||||
if (element.classList)
|
||||
element.classList.add(classname);
|
||||
};
|
||||
|
||||
/** @ignore */
|
||||
removeClass = function(element, classname) {
|
||||
element.classList.remove(classname);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Otherwise, implement own
|
||||
else {
|
||||
|
||||
/** @ignore */
|
||||
addClass = function(element, classname) {
|
||||
|
||||
// Simply add new class
|
||||
// Otherwise, simply append the class
|
||||
else
|
||||
element.className += " " + classname;
|
||||
|
||||
};
|
||||
|
||||
/** @ignore */
|
||||
removeClass = function(element, classname) {
|
||||
/**
|
||||
* 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) {
|
||||
|
||||
// Filter out classes with given name
|
||||
// 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,
|
||||
function(match, testClassname, spaces, offset, string) {
|
||||
function removeMatchingClasses(match, testClassname) {
|
||||
|
||||
// If same class, remove
|
||||
if (testClassname == classname)
|
||||
if (testClassname === classname)
|
||||
return "";
|
||||
|
||||
// Otherwise, allow
|
||||
@@ -134,393 +124,170 @@ Guacamole.OnScreenKeyboard = function(url) {
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
/**
|
||||
* Counter of mouse events to ignore. This decremented by mousemove, and
|
||||
* while non-zero, mouse events will have no effect.
|
||||
*
|
||||
* @private
|
||||
* @type Number
|
||||
*/
|
||||
var ignoreMouse = 0;
|
||||
|
||||
// Returns a unique power-of-two value for the modifier with the
|
||||
// given name. The same value will be returned for the same modifier.
|
||||
function getModifierMask(name) {
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
|
||||
var value = modifier_masks[name];
|
||||
/**
|
||||
* 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 = modifierMasks[name];
|
||||
if (!value) {
|
||||
|
||||
// Get current modifier, advance to next
|
||||
value = next_mask;
|
||||
next_mask <<= 1;
|
||||
value = nextMask;
|
||||
nextMask <<= 1;
|
||||
|
||||
// Store value of this modifier
|
||||
modifier_masks[name] = value;
|
||||
modifierMasks[name] = 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) {
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
|
||||
// Scale element width/height
|
||||
element.style.width = (width * pixels) + "px";
|
||||
element.style.height = (height * pixels) + "px";
|
||||
|
||||
// Scale font, if requested
|
||||
if (scaleFont) {
|
||||
element.style.lineHeight = (height * 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
|
||||
var keyboard = document.createElement("div");
|
||||
keyboard.className = "guac-keyboard";
|
||||
|
||||
// Retrieve keyboard XML
|
||||
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));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
/* TODO: Actually parse the darn thing */
|
||||
|
||||
// Do not allow selection or mouse movement to propagate/register.
|
||||
keyboard.onselectstart =
|
||||
keyboard.onmousemove =
|
||||
keyboard.onmouseup =
|
||||
keyboard.onmousedown =
|
||||
function(e) {
|
||||
keyboard.onmousedown = function handleMouseEvents(e) {
|
||||
|
||||
// If ignoring events, decrement counter
|
||||
if (ignore_mouse)
|
||||
ignore_mouse--;
|
||||
if (ignoreMouse)
|
||||
ignoreMouse--;
|
||||
|
||||
e.stopPropagation();
|
||||
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.
|
||||
*
|
||||
@@ -537,6 +304,13 @@ Guacamole.OnScreenKeyboard = function(url) {
|
||||
*/
|
||||
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 {Element} The element containing the entire on-screen keyboard.
|
||||
@@ -556,12 +330,13 @@ Guacamole.OnScreenKeyboard = function(url) {
|
||||
this.resize = function(width) {
|
||||
|
||||
// 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
|
||||
for (var i=0; i<scaledElements.length; 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
|
||||
* caps associated with tuples of modifiers. The cap determins what happens
|
||||
* when a key is pressed, while it is the state of modifier keys that determines
|
||||
* what cap is in effect on any particular key.
|
||||
* Represents an entire on-screen keyboard layout, including all available
|
||||
* keys, their behaviors, and their relative position and sizing.
|
||||
*
|
||||
* @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() {
|
||||
|
||||
var key = this;
|
||||
Guacamole.OnScreenKeyboard.Layout = function(template) {
|
||||
|
||||
/**
|
||||
* 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
|
||||
* which applies.
|
||||
* The width of the entire keyboard, in arbitrary units. The width of each
|
||||
* 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) {
|
||||
return key.caps[modifier & key.modifierMask];
|
||||
};
|
||||
this.width = template.width;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Basic representation of a cap of a key. The cap is the visible part of a key
|
||||
* and determines the active behavior of a key when pressed. The state of all
|
||||
* modifiers on the keyboard determines the active cap for all keys, thus
|
||||
* each cap is associated with a set of modifiers.
|
||||
* Represents a single key, or a single possible behavior of a key. Each key
|
||||
* on the on-screen keyboard must have at least one associated
|
||||
* Guacamole.OnScreenKeyboard.Key, whether that key is explicitly defined or
|
||||
* implied, and may have multiple Guacamole.OnScreenKeyboard.Key if behavior
|
||||
* depends on modifier states.
|
||||
*
|
||||
* @constructor
|
||||
* @param {String} text The text to be displayed within this cap.
|
||||
* @param {Number} keysym The keysym this cap sends when its associated key is
|
||||
* pressed or released.
|
||||
* @param {String} modifier The modifier represented by this cap.
|
||||
* @param {Guacamole.OnScreenKeyboard.Key|Object} template
|
||||
* The object whose identically-named properties will be used to initialize
|
||||
* the properties of this key.
|
||||
*/
|
||||
Guacamole.OnScreenKeyboard.Cap = function(text, keysym, modifier) {
|
||||
Guacamole.OnScreenKeyboard.Key = function(template) {
|
||||
|
||||
/**
|
||||
* Modifier represented by this keycap
|
||||
* The unique name identifying this key within the keyboard layout.
|
||||
*
|
||||
* @type String
|
||||
*/
|
||||
this.modifier = null;
|
||||
this.name = template.name;
|
||||
|
||||
/**
|
||||
* The text to be displayed within this keycap
|
||||
* 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.text = text;
|
||||
this.title = template.title || template.name;
|
||||
|
||||
/**
|
||||
* The keysym this cap sends when its associated key is pressed/released
|
||||
* 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 = keysym;
|
||||
this.keysym = template.keysym;
|
||||
|
||||
// Set modifier if provided
|
||||
if (modifier) this.modifier = modifier;
|
||||
/**
|
||||
* 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;
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user