mirror of
https://github.com/gyurix1968/guacamole-client.git
synced 2025-09-06 13:17:41 +00:00
GUAC-809: Implement guacOsk directive.
This commit is contained in:
Michael Jumper
@@ -36,118 +36,3 @@
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.guac-keyboard {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key {
|
||||
background: #444;
|
||||
border: 1px outset #888;
|
||||
-moz-border-radius: 0.1em;
|
||||
-webkit-border-radius: 0.1em;
|
||||
-khtml-border-radius: 0.1em;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-cap {
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
font-size: 50%;
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key.highlight {
|
||||
background: #666;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key.shift,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key.control,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key.alt,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key.super,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
|
||||
background: #822;
|
||||
border-color: #D44;
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-row {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-column {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-gap {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Hide keycaps requiring modifiers which are NOT currently active. */
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-caps)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-caps,
|
||||
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-numsym)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-numsym,
|
||||
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-shift)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-shift,
|
||||
|
||||
/* Hide keycaps NOT requiring modifiers which ARE currently active, where that
|
||||
modifier is used to determine which cap is displayed for the current key. */
|
||||
.guac-keyboard.guac-keyboard-modifier-shift
|
||||
.guac-keyboard-key.guac-keyboard-uses-shift
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-shift),
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym
|
||||
.guac-keyboard-key.guac-keyboard-uses-numsym
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-numsym),
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-caps
|
||||
.guac-keyboard-key.guac-keyboard-uses-caps
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-caps) {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
114
guacamole/src/main/webapp/app/osk/directives/guacOsk.js
Normal file
114
guacamole/src/main/webapp/app/osk/directives/guacOsk.js
Normal file
@@ -0,0 +1,114 @@
|
||||
/*
|
||||
* Copyright (C) 2014 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
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A directive which displays the Guacamole on-screen keyboard.
|
||||
*/
|
||||
angular.module('osk').directive('guacOsk', [function guacOsk() {
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
|
||||
/**
|
||||
* The URL for the Guacamole on-screen keyboard layout to use.
|
||||
*
|
||||
* @type String
|
||||
*/
|
||||
layout : '='
|
||||
|
||||
},
|
||||
|
||||
templateUrl: 'app/osk/templates/guacOsk.html',
|
||||
controller: ['$scope', '$rootScope', '$window', '$element',
|
||||
function guacOsk($scope, $rootScope, $window, $element) {
|
||||
|
||||
/**
|
||||
* The current on-screen keyboard, if any.
|
||||
*
|
||||
* @type Guacamole.OnScreenKeyboard
|
||||
*/
|
||||
var keyboard = null;
|
||||
|
||||
/**
|
||||
* The main containing element for the entire directive.
|
||||
*
|
||||
* @type Element
|
||||
*/
|
||||
var main = $element[0];
|
||||
|
||||
/**
|
||||
* Event listener which resizes the current keyboard, if any, such
|
||||
* that it fits within available space.
|
||||
*/
|
||||
var resizeListener = function resizeListener() {
|
||||
|
||||
// Resize keyboard, if defined
|
||||
if (keyboard)
|
||||
keyboard.resize(main.offsetWidth);
|
||||
|
||||
};
|
||||
|
||||
// Set layout whenever URL changes
|
||||
$scope.$watch("layout", function setLayout(layout) {
|
||||
|
||||
// Remove current keyboard
|
||||
keyboard = null;
|
||||
main.innerHTML = "";
|
||||
|
||||
// Load new keyboard
|
||||
if (layout) {
|
||||
|
||||
// Add OSK element
|
||||
keyboard = new Guacamole.OnScreenKeyboard(layout);
|
||||
main.appendChild(keyboard.getElement());
|
||||
|
||||
// Init size
|
||||
keyboard.resize(main.offsetWidth);
|
||||
|
||||
// Broadcast keydown for each key pressed
|
||||
keyboard.onkeydown = function(keysym) {
|
||||
$rootScope.$broadcast('guacKeydown', keysym);
|
||||
};
|
||||
|
||||
// Broadcast keydown for each key released
|
||||
keyboard.onkeyup = function(keysym) {
|
||||
$rootScope.$broadcast('guacKeyup', keysym);
|
||||
};
|
||||
|
||||
// Resize keyboard whenever window changes size
|
||||
$window.addEventListener('resize', resizeListener);
|
||||
|
||||
}
|
||||
|
||||
}); // end layout scope watch
|
||||
|
||||
// Clean up event listeners upon destroy
|
||||
$scope.$on('$destroy', function destroyKeyboard() {
|
||||
$window.removeEventListener('resize', resizeListener);
|
||||
});
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
}]);
|
||||
26
guacamole/src/main/webapp/app/osk/oskModule.js
Normal file
26
guacamole/src/main/webapp/app/osk/oskModule.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
* Copyright (C) 2014 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
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Module for displaying the Guacamole on-screen keyboard.
|
||||
*/
|
||||
angular.module('osk', []);
|
||||
136
guacamole/src/main/webapp/app/osk/styles/osk.css
Normal file
136
guacamole/src/main/webapp/app/osk/styles/osk.css
Normal file
@@ -0,0 +1,136 @@
|
||||
/*
|
||||
* Copyright (C) 2014 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
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*/
|
||||
|
||||
.guac-keyboard {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key {
|
||||
background: #444;
|
||||
border: 1px outset #888;
|
||||
-moz-border-radius: 0.1em;
|
||||
-webkit-border-radius: 0.1em;
|
||||
-khtml-border-radius: 0.1em;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-cap {
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
font-size: 50%;
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key.highlight {
|
||||
background: #666;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key.shift,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key.control,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key.alt,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key.super,
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym .guac-keyboard-key.numsym {
|
||||
background: #882;
|
||||
border-color: #DD4;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
|
||||
background: #822;
|
||||
border-color: #D44;
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-row {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-column {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.guac-keyboard .guac-keyboard-gap {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Hide keycaps requiring modifiers which are NOT currently active. */
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-caps)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-caps,
|
||||
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-numsym)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-numsym,
|
||||
|
||||
.guac-keyboard:not(.guac-keyboard-modifier-shift)
|
||||
.guac-keyboard-cap.guac-keyboard-requires-shift,
|
||||
|
||||
/* Hide keycaps NOT requiring modifiers which ARE currently active, where that
|
||||
modifier is used to determine which cap is displayed for the current key. */
|
||||
.guac-keyboard.guac-keyboard-modifier-shift
|
||||
.guac-keyboard-key.guac-keyboard-uses-shift
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-shift),
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-numsym
|
||||
.guac-keyboard-key.guac-keyboard-uses-numsym
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-numsym),
|
||||
|
||||
.guac-keyboard.guac-keyboard-modifier-caps
|
||||
.guac-keyboard-key.guac-keyboard-uses-caps
|
||||
.guac-keyboard-cap:not(.guac-keyboard-requires-caps) {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
24
guacamole/src/main/webapp/app/osk/templates/guacOsk.html
Normal file
24
guacamole/src/main/webapp/app/osk/templates/guacOsk.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="osk">
|
||||
<!--
|
||||
Copyright (C) 2014 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
-->
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user