var modifiers = {};
var currentModifier = 1;
+ // Function for adding a class to an element
+ var addClass;
+
+ // Function for removing a class from an element
+ var removeClass;
+
+ // If Node.classList is supported, implement addClass/removeClass using that
+ if (Node.classList) {
+
+ addClass = function(element, classname) {
+ element.classList.add(classname);
+ };
+
+ removeClass = function(element, classname) {
+ element.classList.remove(classname);
+ };
+
+ }
+
+ // Otherwise, implement own
+ else {
+
+ addClass = function(element, classname) {
+
+ // Simply add new class
+ element.className += " " + classname;
+
+ };
+
+ removeClass = function(element, classname) {
+
+ // Filter out classes with given name
+ element.className = element.className.replace(/([^ ]+)[ ]*/g,
+ function(match, testClassname, spaces, offset, string) {
+
+ // If same class, remove
+ if (testClassname == classname)
+ return "";
+
+ // Otherwise, allow
+ return match;
+
+ }
+ );
+
+ };
+
+ }
+
// 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 getModifier(name) {
this.height = height;
this.scale = function(pixels) {
- element.style.width = Math.floor(width * pixels) + "px";
- element.style.height = Math.floor(height * pixels) + "px";
+ element.style.width = (width * pixels) + "px";
+ element.style.height = (height * pixels) + "px";
if (scaleFont) {
- element.style.lineHeight = Math.floor(height * pixels) + "px";
+ element.style.lineHeight = (height * pixels) + "px";
element.style.fontSize = pixels + "px";
}
}
"gap": function parse_gap(e) {
- // Get attributes
- var gap_size = e.attributes["size"];
-
// Create element
var gap = document.createElement("div");
gap.className = "guac-keyboard-gap";
// Set gap size
var gap_units = 1;
- if (gap_size)
- gap_units = parseFloat(gap_size.value);
+ 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) {
- // Get attributes
- var key_size = e.attributes["size"];
-
// 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";
// Set key size
var key_units = 1;
- if (key_size)
- key_units = parseFloat(key_size.value);
+ if (e.getAttribute("size"))
+ key_units = parseFloat(e.getAttribute("size"));
key.size = key_units;
parseChildren(e, {
"cap": function parse_cap(e) {
- // Get attributes
- var required = e.attributes["if"];
- var modifier = e.attributes["modifier"];
- var keysym = e.attributes["keysym"];
- var sticky = e.attributes["sticky"];
+ // TODO: Handle "sticky" attribute
// Get content of key cap
- var content = e.textContent;
+ 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,
- keysym ? keysym.value : null);
+ var cap = new Guacamole.OnScreenKeyboard.Cap(content, real_keysym);
- if (modifier)
- cap.modifier = modifier.value;
+ if (e.getAttribute("modifier"))
+ cap.modifier = e.getAttribute("modifier");
// Create cap element
var cap_element = document.createElement("div");
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 (required) {
+ if (e.getAttribute("if")) {
// Get modifier value for specified comma-delimited
// list of required modifiers.
- var requirements = required.value.split(",");
+ var requirements = e.getAttribute("if").split(",");
for (var i=0; i<requirements.length; i++) {
modifierValue |= getModifier(requirements[i]);
- cap_element.classList.add("guac-keyboard-requires-" + requirements[i]);
- key_element.classList.add("guac-keyboard-uses-" + requirements[i]);
+ addClass(cap_element, "guac-keyboard-requires-" + requirements[i]);
+ addClass(key_element, "guac-keyboard-uses-" + requirements[i]);
}
}
row.appendChild(key_container_element);
// Set up click handler for key
- key_element.onmousedown =
- key_element.ontouchstart = function() {
+ function press(e) {
+
+ // 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(on_screen_keyboard.modifiers);
+
+ // Update modifier state
+ if (cap.modifier) {
+
+ // Construct classname for modifier
+ var modifierClass = "guac-keyboard-modifier-" + cap.modifier;
+ var modifierFlag = getModifier(cap.modifier);
- key_element.classList.add("guac-keyboard-pressed");
+ // Toggle modifier state
+ on_screen_keyboard.modifiers ^= modifierFlag;
- // Get current cap based on modifier state
- var cap = key.getCap(on_screen_keyboard.modifiers);
+ // Activate modifier if pressed
+ if (on_screen_keyboard.modifiers & modifierFlag) {
+
+ addClass(keyboard, modifierClass);
+
+ // Send key event
+ if (on_screen_keyboard.onkeydown && cap.keysym)
+ on_screen_keyboard.onkeydown(cap.keysym);
- // Update modifier state
- if (cap.modifier) {
+ }
+
+ // Deactivate if not pressed
+ else {
- // Construct classname for modifier
- var modifierClass = "guac-keyboard-modifier-" + cap.modifier;
- var modifierFlag = getModifier(cap.modifier);
+ removeClass(keyboard, modifierClass);
+
+ // Send key event
+ if (on_screen_keyboard.onkeyup && cap.keysym)
+ on_screen_keyboard.onkeyup(cap.keysym);
- // Toggle modifier state
- on_screen_keyboard.modifiers ^= modifierFlag;
+ }
- // Activate modifier if pressed
- if (on_screen_keyboard.modifiers & modifierFlag)
- keyboard.classList.add(modifierClass);
+ }
- // Deactivate if not pressed
- else
- keyboard.classList.remove(modifierClass);
+ // 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;
}
- // TODO: Send key event
+ e.preventDefault();
};
- key_element.onmouseup =
- key_element.ontouchend = function() {
- key_element.classList.remove("guac-keyboard-pressed");
+ function release(e) {
+
+ // Release key if currently pressed
+ if (key.pressed) {
+
+ // Get current cap based on modifier state
+ var cap = key.getCap(on_screen_keyboard.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;
+
+ }
+
+ e.preventDefault();
+
};
+ key_element.addEventListener("mousedown", press, true);
+ key_element.addEventListener("touchstart", press, true);
+
+ key_element.addEventListener("mouseup", release, true);
+ key_element.addEventListener("mouseout", release, true);
+ key_element.addEventListener("touchend", release, true);
+
}
});
var col = document.createElement("div");
col.className = "guac-keyboard-column";
- var align = col.attributes["align"];
-
- if (align)
- col.style.textAlign = align.value;
+ if (col.getAttribute("align"))
+ col.style.textAlign = col.getAttribute("align");
// Columns can only contain rows
parseChildren(e, {
throw new Error("Root element must be keyboard");
// Get attributes
- if (!keyboard_element.attributes["size"])
+ if (!keyboard_element.getAttribute("size"))
throw new Error("size attribute is required for keyboard");
- var keyboard_size = parseFloat(keyboard_element.attributes["size"].value);
+ var keyboard_size = parseFloat(keyboard_element.getAttribute("size"));
parseChildren(keyboard_element, {
*/
this.modifiers = 0;
- this.onkeypressed = null;
- this.onkeyreleased = null;
+ this.onkeydown = null;
+ this.onkeyup = null;
this.getElement = function() {
return keyboard;
this.resize = function(width) {
// Get pixel size of a unit
- var unit = Math.floor(width / keyboard_size);
+ var unit = Math.floor(width * 10 / keyboard_size) / 10;
// Resize all scaled elements
for (var i=0; i<scaledElements.length; i++) {
var key = this;
/**
+ * Whether this key is currently pressed.
+ */
+ this.pressed = false;
+
+ /**
* Width of the key, relative to the size of the keyboard.
*/
this.size = 1;
projects / guacamole-common-js.git / blobdiff