diff --git a/src/sunstone/public/app/main.js b/src/sunstone/public/app/main.js index 4469292ea47..b108036625d 100644 --- a/src/sunstone/public/app/main.js +++ b/src/sunstone/public/app/main.js @@ -71,6 +71,9 @@ require.config({ "flot.time": "../bower_components/flot/jquery.flot.time", "flot.tooltip": "../bower_components/flot.tooltip/js/jquery.flot.tooltip", + /* WMKS */ + "wmks" : "../bower_components/wmks/wmks.min", + /* VNC */ "vnc-rfb": "../bower_components/no-vnc/lib/rfb", @@ -119,6 +122,8 @@ require.config({ deps: [ "foundation", "jquery", + "jquery-ui", + "wmks", "tabs/provision-tab", "tabs/dashboard-tab", "tabs/system-top-tab", @@ -168,6 +173,16 @@ require.config({ deps: ["jquery"] }, + /* JQuery-UI */ + "jquery-ui": { + deps: ["jquery"] + }, + + /* WMKS */ + "wmks": { + deps: ["jquery", "jquery-ui"] + }, + /* Foundation */ "foundation": { deps: ["jquery"] diff --git a/src/sunstone/public/app/opennebula/vm.js b/src/sunstone/public/app/opennebula/vm.js index 50518570966..58330c450a0 100644 --- a/src/sunstone/public/app/opennebula/vm.js +++ b/src/sunstone/public/app/opennebula/vm.js @@ -525,6 +525,27 @@ define(function(require) { } }); }, + "vmrc" : function(params, startstop) { + var callback = params.success; + var callback_error = params.error; + var id = params.data.id; + var resource = RESOURCE; + + var method = startstop; + var request = OpenNebulaHelper.request(resource, method, params.data); + $.ajax({ + url: "vm/" + id + "/startvnc", + type: "POST", + dataType: "json", + success: function(response) { + return callback ? callback(request, response) : null; + }, + error: function(response) { + return callback_error ? + callback_error(request, OpenNebulaError(response)) : null; + } + }); + }, "append": function(params) { var action_obj = {"template_raw" : params.data.extra_param, append : true}; OpenNebulaAction.simple_action(params, RESOURCE, "update", action_obj); diff --git a/src/sunstone/public/app/tabs/vms-tab.js b/src/sunstone/public/app/tabs/vms-tab.js index 3d47c846835..3e328041eda 100644 --- a/src/sunstone/public/app/tabs/vms-tab.js +++ b/src/sunstone/public/app/tabs/vms-tab.js @@ -36,6 +36,7 @@ define(function(require) { require("./vms-tab/dialogs/snapshot"), require("./vms-tab/dialogs/revert"), require("./vms-tab/dialogs/vnc"), + require("./vms-tab/dialogs/vmrc"), require("./vms-tab/dialogs/spice"), require("./vms-tab/dialogs/saveas-template") ]; diff --git a/src/sunstone/public/app/tabs/vms-tab/actions.js b/src/sunstone/public/app/tabs/vms-tab/actions.js index 69b5cf50f37..f553ce8c23b 100644 --- a/src/sunstone/public/app/tabs/vms-tab/actions.js +++ b/src/sunstone/public/app/tabs/vms-tab/actions.js @@ -22,6 +22,7 @@ define(function(require) { var OpenNebulaVM = require('opennebula/vm'); var CommonActions = require('utils/common-actions'); var Vnc = require('utils/vnc'); + var Vmrc = require('utils/vmrc'); var Spice = require('utils/spice'); var Files = require('utils/files'); @@ -30,6 +31,7 @@ define(function(require) { var DEPLOY_DIALOG_ID = require('./dialogs/deploy/dialogId'); var MIGRATE_DIALOG_ID = require('./dialogs/migrate/dialogId'); var VNC_DIALOG_ID = require('./dialogs/vnc/dialogId'); + var VMRC_DIALOG_ID = require('./dialogs/vmrc/dialogId'); var SPICE_DIALOG_ID = require('./dialogs/spice/dialogId'); var SAVE_AS_TEMPLATE_DIALOG_ID = require('./dialogs/saveas-template/dialogId'); var UPDATECONF_FORM_ID = require('./form-panels/updateconf/formPanelId'); @@ -282,6 +284,34 @@ define(function(require) { }, notify: true }, + "VM.startvmrc" : { + type: "custom", + call: function() { + $.each(Sunstone.getDataTable(TAB_ID).elements(), function(index, elem) { + if (!Vmrc.lockStatus()) { + Vmrc.lock(); + Sunstone.runAction("VM.startvmrc_action", elem); + } else { + Notifier.notifyError(Locale.tr("VMRC Connection in progress")) + return false; + } + }); + } + }, + "VM.startvmrc_action" : { + type: "single", + call: OpenNebulaVM.vmrc, + callback: function(request, response) { + var dialog = Sunstone.getDialog(VMRC_DIALOG_ID); + dialog.setElement(response); + dialog.show(); + }, + error: function(req, resp) { + Notifier.onError(req, resp); + Vmrc.unlock(); + }, + notify: true + }, "VM.startspice" : { type: "custom", call: function() { diff --git a/src/sunstone/public/app/tabs/vms-tab/buttons.js b/src/sunstone/public/app/tabs/vms-tab/buttons.js index 1e7d2fa1581..58dd4c846ce 100644 --- a/src/sunstone/public/app/tabs/vms-tab/buttons.js +++ b/src/sunstone/public/app/tabs/vms-tab/buttons.js @@ -200,6 +200,12 @@ define(function(require) { layout: "vmsremote_buttons", custom_classes: "only-sunstone-info vnc-sunstone-info" }, + "VM.startvmrc" : { + type: "action", + text: Locale.tr("VMRC"), + layout: "vmsremote_buttons", + custom_classes: "only-sunstone-info vmrc-sunstone-info" + }, "VM.startspice" : { type: "action", text: Locale.tr("SPICE"), diff --git a/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc.js b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc.js new file mode 100644 index 00000000000..6a9a572cad5 --- /dev/null +++ b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc.js @@ -0,0 +1,95 @@ +/* -------------------------------------------------------------------------- */ +/* Copyright 2002-2020, OpenNebula Project, OpenNebula Systems */ +/* */ +/* Licensed under the Apache License, Version 2.0 (the "License"); you may */ +/* not use this file except in compliance with the License. You may obtain */ +/* a copy of the License at */ +/* */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/* */ +/* Unless required by applicable law or agreed to in writing, software */ +/* distributed under the License is distributed on an "AS IS" BASIS, */ +/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */ +/* See the License for the specific language governing permissions and */ +/* limitations under the License. */ +/* -------------------------------------------------------------------------- */ + +define(function(require) { + /* + DEPENDENCIES + */ + + var BaseDialog = require('utils/dialogs/dialog'); + var TemplateHTML = require('hbs!./vmrc/html'); + var Sunstone = require('sunstone'); + var Vmrc = require('utils/vmrc'); + + /* + CONSTANTS + */ + + var DIALOG_ID = require('./vmrc/dialogId'); + var TAB_ID = require('../tabId') + + /* + CONSTRUCTOR + */ + + function Dialog() { + this.dialogId = DIALOG_ID; + + BaseDialog.call(this); + }; + + Dialog.DIALOG_ID = DIALOG_ID; + Dialog.prototype = Object.create(BaseDialog.prototype); + Dialog.prototype.constructor = Dialog; + Dialog.prototype.html = _html; + Dialog.prototype.onShow = _onShow; + Dialog.prototype.onClose = _onClose; + Dialog.prototype.setup = _setup; + Dialog.prototype.setElement = _setElement; + + return Dialog; + + /* + FUNCTION DEFINITIONS + */ + + function _html() { + return TemplateHTML({ + 'dialogId': this.dialogId + }); + } + + function _setup(context) { + var that = this; + + $("#open_in_a_new_window", context).on("click", function() { + var dialog = Sunstone.getDialog(DIALOG_ID); + dialog.hide(); + }); + + $('#sendCtrlAltDelButton', context).click(function() { + Vmrc.sendCtrlAltDel(); + return false; + }); + + return false; + } + + function _onShow(context) { + Vmrc.vmrcCallback(this.element); + return false; + } + + function _onClose(context) { + Vmrc.disconnect(); + Vmrc.unlock(); + return false; + } + + function _setElement(element) { + this.element = element + } +}); diff --git a/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/dialogId.js b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/dialogId.js new file mode 100644 index 00000000000..a392271ea5c --- /dev/null +++ b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/dialogId.js @@ -0,0 +1,19 @@ +/* -------------------------------------------------------------------------- */ +/* Copyright 2002-2020, OpenNebula Project, OpenNebula Systems */ +/* */ +/* Licensed under the Apache License, Version 2.0 (the "License"); you may */ +/* not use this file except in compliance with the License. You may obtain */ +/* a copy of the License at */ +/* */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/* */ +/* Unless required by applicable law or agreed to in writing, software */ +/* distributed under the License is distributed on an "AS IS" BASIS, */ +/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */ +/* See the License for the specific language governing permissions and */ +/* limitations under the License. */ +/* -------------------------------------------------------------------------- */ + +define(function(require) { + return 'vmrcVMDialog'; +}); diff --git a/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/html.hbs b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/html.hbs new file mode 100644 index 00000000000..a88426b0698 --- /dev/null +++ b/src/sunstone/public/app/tabs/vms-tab/dialogs/vmrc/html.hbs @@ -0,0 +1,40 @@ +{{! -------------------------------------------------------------------------- }} +{{! Copyright 2002-2020, OpenNebula Project, OpenNebula Systems }} +{{! }} +{{! Licensed under the Apache License, Version 2.0 (the "License"); you may }} +{{! not use this file except in compliance with the License. You may obtain }} +{{! a copy of the License at }} +{{! }} +{{! http://www.apache.org/licenses/LICENSE-2.0 }} +{{! }} +{{! Unless required by applicable law or agreed to in writing, software }} +{{! distributed under the License is distributed on an "AS IS" BASIS, }} +{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. }} +{{! See the License for the specific language governing permissions and }} +{{! limitations under the License. }} +{{! -------------------------------------------------------------------------- }} + +
+
+
+
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/sunstone/public/app/utils/vmrc.js b/src/sunstone/public/app/utils/vmrc.js new file mode 100644 index 00000000000..f29ec2354db --- /dev/null +++ b/src/sunstone/public/app/utils/vmrc.js @@ -0,0 +1,130 @@ +/* -------------------------------------------------------------------------- */ +/* Copyright 2002-2020, OpenNebula Project, OpenNebula Systems */ +/* */ +/* Licensed under the Apache License, Version 2.0 (the "License"); you may */ +/* not use this file except in compliance with the License. You may obtain */ +/* a copy of the License at */ +/* */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/* */ +/* Unless required by applicable law or agreed to in writing, software */ +/* distributed under the License is distributed on an "AS IS" BASIS, */ +/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */ +/* See the License for the specific language governing permissions and */ +/* limitations under the License. */ +/* -------------------------------------------------------------------------- */ + +define(function(require) { + // var WMKS = requiere("wmks"); + var Config = require("sunstone-config"); + var _lock = false; + var _rfb; + var _wmks; + var _message = ""; + var _status = "Loading"; + var _is_encrypted = ""; + + return { + "lockStatus": lockStatus, + "lock": lock, + "unlock": unlock, + "vmrcCallback": vmrcCallback, + "disconnect": disconnect, + "sendCtrlAltDel": sendCtrlAltDel + }; + + function lockStatus() { + return _lock; + } + + function lock() { + _lock = true; + } + + function unlock() { + _lock = false; + } + + function setStatus(message="", status=""){ + _message = message; + _status = status; + $(".VMRC_message").text(_message); + $("#VMRC_status").text(_status); + } + + function connected(){ + setStatus(null, "VMRC " + _rfb._rfb_connection_state + " (" + _is_encrypted + ") to: " + _rfb._fb_name); + } + + function disconnectedFromServer(e){ + if (e.detail.clean) { + setStatus(null, "VMRC " + _rfb._rfb_connection_state + " (" + _is_encrypted + ") to: " + _rfb._fb_name); + } else { + setStatus("Something went wrong, connection is closed", "Failed"); + } + } + + function desktopNameChange(e) { + if (e.detail.name) { + setStatus(null, "VMRC " + _rfb._rfb_connection_state + " (" + _is_encrypted + ") to: " + e.detail.name); + } + } + + function credentialsRequired(e) { + setStatus("Something went wrong, more credentials must be given to continue", "Failed"); + } + + function vmrcCallback(response) { + var URL = ""; + var proxy_port = Config.vncProxyPort; + var pw = response["password"]; + var token = response["token"]; + var vm_name = response["vm_name"]; + var protocol = window.location.protocol; + var hostname = window.location.hostname; + var port = window.location.port; + + if (protocol === "https:") { + URL = "wss"; + _is_encrypted ="encrypted"; + } else { + URL = "ws"; + _is_encrypted ="unencrypted"; + } + URL += "://" + hostname; + URL += ":" + proxy_port; + URL += "/ticket/" + token; + // URL += "/?vm=" + vm_name; + + // if (!Config.requestVNCPassword) { + // URL += "&password=" + pw; + // } + var re = new RegExp("^(ws|wss):\\/\\/[\\w\\D]*?\\?", "gi"); + var link = URL.replace(re, protocol + "//" + hostname + ":" + port + "/vnc?"); + + try{ + var wmks = WMKS.createWMKS("VMRC_canvas",{}) + .register(WMKS.CONST.Events.CONNECTION_STATE_CHANGE, + function(event,data){ + if(typeof cons !== 'undefined' && data.state == cons.ConnectionState.CONNECTED) + { + console.log("connection state change : connected"); + } + }); + wmks.connect(URL); + }catch(err){ + setStatus("Something went wrong, connection is closed", "Failed"); + console.log("error start VMRC ", err); + } + + $("#open_in_a_new_window").attr("href", link); + } + + function disconnect() { + if (_rfb) { _rfb.disconnect(); } + } + + function sendCtrlAltDel() { + if (_rfb) { _rfb.sendCtrlAltDel(); } + } +}); diff --git a/src/sunstone/public/app/utils/webmks/css/extended-keypad.css b/src/sunstone/public/app/utils/webmks/css/extended-keypad.css new file mode 100644 index 00000000000..3dbc0824f88 --- /dev/null +++ b/src/sunstone/public/app/utils/webmks/css/extended-keypad.css @@ -0,0 +1,314 @@ +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * extended-keypad.css + * + * Defines style for the virtual keys on the control pane. + */ + +.ctrl-pane-wrapper { + width: 290px !important; /* Needed as the default is a bit larger than this */ + border: 1px solid #333 !important; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ +} + +.fnKey-pane-wrapper { + width: 427px; + border: 1px solid #333; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: #c1c4d1; /* Old browsers */ + background: -webkit-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* IE10+ */ + background: linear-gradient(top, #c1c4d1 0%, #b0b1bd 100%); /* W3C */ + position: absolute; + padding: 0; + -moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.fnKey-pane-wrapper-down { + width: 427px; + border: 1px solid #333; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: #6e6e77; /* Old browsers */ + background: -webkit-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #6e6e77 0%,#656565 100%); /* IE10+ */ + background: linear-gradient(top, #6e6e77 0%, #656565 100%); /* W3C */ + position: absolute; + padding: 0; + -moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +/* Hide jquery ui title bar. */ +.ctrl-pane-wrapper .ui-dialog-titlebar { + border-top: 1px solid #ccc; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + border-bottom: 0; + padding: .6em .8em 0 .8em; + background: none !important; + -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; + -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px; +} + +/* Replace jquery ui title bar close icon. */ +.ctrl-pane-wrapper .ui-dialog-titlebar-close { + margin-top: -9px; + border: 0 !important; + background: none !important; +} + +/* Background-image is defined along with touch-sprite in 1 place. */ +.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon { + background-position: -9px -239px; + background-repeat: no-repeat; +} + +.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon:active { + background-position-x: -24px; + background-repeat: no-repeat; +} + +/* The grabber icon indicating the dialog could be moved around */ +.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title { + background-position: -10px -255px; + background-repeat: no-repeat; + width: 40px; + height: 14px; + margin: 0 0 0 42%; +} + +.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title:active { + background-position-x: -52px; +} + +.ctrl-pane-wrapper .ui-dialog-content { + background: none !important; + padding: 0 0; + border-style: solid; + border-color: #aaaaaa; + border-width: 0 1px 1px 1px; + -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; + -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; +} + +.fnKey-inner-border-helper { + position: relative; + background: none !important; + border-style: solid; + border-color: #d5d5d5; + border-width: 1px; + -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; + pointer-events:none; +} + +.ctrl-pane-wrapper .ctrl-pane { + padding: 3px 0 3px 6px; + height: 140px; + width: 280px; +} + +.ctrl-pane .baseKey { + float: left; + border: 0; + padding: 0; + width: 57px; + height: 57px; + margin: 6px; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHeros', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-size: 18px; + text-shadow: 0 1px 1px #eeeeee; + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .7); + -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.7); + box-shadow: 0px 1px 3px rgba(0,0,0,.7); +} + +.ctrl-pane .ctrl-key-top-row { + background: -webkit-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* IE10+ */ + background: linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* W3C */ +} + +.ctrl-pane .ctrl-key-bottom-row { + background: -webkit-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .up-position .fn-key-top-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* W3C */ +} + +.ctrl-pane .up-position .fn-key-bottom-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* W3C */ +} + +.ctrl-pane .down-position .fn-key-top-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .down-position .fn-key-bottom-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .fn-key-top-row { + margin: 12px 6px 6px 6px; +} + +.ctrl-pane .border-key-top-left .fn-key-top-row { + margin: 12px 6px 6px 12px; +} + +.ctrl-pane .border-key-top-right .fn-key-top-row { + margin: 12px 12px 6px 6px; +} + +.ctrl-pane .fn-key-bottom-row { + margin: 5px 6px 12px 6px; +} + +.ctrl-pane .border-key-bottom-left .fn-key-bottom-row { + margin: 5px 6px 12px 12px; +} + +.ctrl-pane .border-key-bottom-right .fn-key-bottom-row { + margin: 5px 12px 12px 6px; +} + +.ctrl-pane .ctrl-key-top-row:active, .ctrl-pane .fn-key-top-row:active, +.ctrl-pane .ctrl-key-bottom-row:active, .ctrl-pane .fn-key-bottom-row:active { + background: #bbbbbb; + background: -webkit-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: -ms-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: -o-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: linear-gradient(bottom, #888888 25%, #CCCCCC 68%); +} + +.ctrl-pane .ctrl-key-top-row div, .ctrl-pane .ctrl-key-bottom-row div, +.ctrl-pane .fn-key-top-row div, .ctrl-pane .fn-key-bottom-row div { + width: 100%; + text-align: center; + padding-top: 17px; + overflow-x: hidden; +} + +/* Highlight selected modifier key */ +.ctrl-pane .ab-modifier-key-down { + color: #4D8DFF; +} + +.ctrl-pane .baseKey img { /* use .touch-sprite for image */ + background-repeat: no-repeat; + width: 57px; + height: 57px; + border: 0; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; +} + +.ctrl-pane .baseKey .right-arrow { + background-position: -242px -182px; +} + +.ctrl-pane .baseKey .left-arrow { + background-position: -126px -182px; +} + +.ctrl-pane .baseKey .up-arrow { + background-position: -299px -182px; +} + +.ctrl-pane .baseKey .down-arrow { + background-position: -183px -182px; +} + +.ctrl-pane .baseKey .more-keys { + background-position: -10px -182px; +} + +/* Ctrl - pane flip transition. */ +.ctrl-pane.flip-container { + perspective: 1000; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; +} + + /* flip the ctrl-pane when this class toggles. */ +.flip-container.perform-flip .flipper { + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); +} + +/* flip speed goes here */ +.flip-container .flipper { + transition: 0.6s; + transform-style: preserve-3d; + -webkit-transition: 0.6s; + -webkit-transform-style: preserve-3d; + -moz-transition: 0.6s; + -moz-transform-style: preserve-3d; + -ms-transition: 0.6s; + -ms-transform-style: preserve-3d; + position: relative; +} + +/* hide back of pane during swap */ +.flip-container .front, .flip-container .back { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; +} + +/* front pane, placed above back */ +.flip-container .front { + z-index: 200; +} + +/* back, initially hidden pane */ +.flip-container .back { + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); +} diff --git a/src/sunstone/public/app/utils/webmks/css/main-ui.css b/src/sunstone/public/app/utils/webmks/css/main-ui.css new file mode 100644 index 00000000000..772112a7d37 --- /dev/null +++ b/src/sunstone/public/app/utils/webmks/css/main-ui.css @@ -0,0 +1,155 @@ +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * main-ui.css + * + * Defines style for the wmks ui widgets. + * + * Use CSS3 for touch devices as jquery effects break when browser handles + * orientation changes, or page bouncing. + * + * TODO: Need to handle Retina mode for iPad. + */ + +/* + * jQuery UI Dialog 1.8.16 + */ +.ui-dialog { + padding: 0; + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.ui-dialog .ui-dialog-titlebar { + padding: .8em .8em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.ui-dialog .ui-dialog-titlebar-close { + right: .4em; + margin-top: -11px; +} + +.ui-widget-content { + border: 0; + background: #ffffff; + color: #333333; +} + +.ui-widget-header a { + color: #333333; +} + + +/* Touch feedback indicator */ +.ui-touch-feedback-icon { + background-image: url('../img/touch_sprite_feedback.png'); + width: 300px; + height: 120px; + position: absolute; + left: -9999px; + top: -9999px; + z-index: 2; +} + +.feedback-container { + z-index: 2; + position: absolute; + display: none; +} + +.feedback-container.cursor-icon { + background: url('../img/touch_sprite_feedback.png') -260px -15px no-repeat; + width: 17px; + height: 23px; +} + +.feedback-container.tap-icon { + background: url('../img/touch_sprite_feedback.png') -300px -15px no-repeat; + width: 36px; + height: 36px; +} + +.feedback-container.drag-icon { + background: url('../img/touch_sprite_feedback.png') -10px -10px no-repeat; + width: 100px; + height: 100px; +} + +.feedback-container.pulse-icon { + background: url('../img/touch_sprite_feedback.png') -111px -10px no-repeat; + width: 100px; + height: 100px; +} + +.feedback-container.scroll-icon { + background: url('../img/touch_sprite_feedback.png') -212px -10px no-repeat; + width: 27px; + height: 100px; +} + +/* CSS3 feedback indicator animation. Keep it simple (uses lower cpu cycles) + as there may be multiple animation requests made in quick successions. */ +.animate-feedback-indicator { + display: block; + opacity: 0; + animation-name: showfadeout; + animation-duration: 350ms; + -webkit-animation-name: showfadeout; + -webkit-animation-duration: 350ms; + -moz-animation-name: showfadeout; + -moz-animation-duration: 350ms; + -ms-animation-name: showfadeout; + -ms-animation-duration: 350ms; +} + +@-webkit-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +@-moz-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +@-ms-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.animate-double-feedback-indicator { + display: block; + opacity: 0; + animation-name: showdoublefadeout; + animation-duration: 400ms; + -webkit-animation-name: showdoublefadeout; + -webkit-animation-duration: 400ms; + -moz-animation-name: showdoublefadeout; + -moz-animation-duration: 400ms; + -ms-animation-name: showdoublefadeout; + -ms-animation-duration: 400ms; +} + +@-webkit-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} + +@-moz-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} + +@-ms-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} diff --git a/src/sunstone/public/app/utils/webmks/css/trackpad.css b/src/sunstone/public/app/utils/webmks/css/trackpad.css new file mode 100644 index 00000000000..efccae414ad --- /dev/null +++ b/src/sunstone/public/app/utils/webmks/css/trackpad.css @@ -0,0 +1,192 @@ +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * trackpad.css + * + * Defines style for the trackpad widget. + */ + +/* + * jQuery UI Dialog 1.8.16 + */ +.ui-dialog { + padding: 0; + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.ui-dialog .ui-dialog-titlebar { + padding: .8em .8em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.ui-dialog .ui-dialog-titlebar-close { + right: .4em; + margin-top: -11px; +} + +.ui-widget-content { + border: 0; + background: #ffffff; + color: #333333; +} + +.ui-widget-header a { + color: #333333; +} + +/* + * Touch sprite is loaded in a single class (as we have disabled caching images). + * We do this for the iOS case, due to extreme limitations in terms of image size. + * This form of grouped declaration forces all these definitions to load the same + * sprite. (This is also loaded upfront for the navbar so its always visible). + * For details see PR - 978390. + */ +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon, +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title, +.touch-sprite { + background-image: url('../img/touch_sprite.png'); +} + +/* Replace jquery ui title bar close icon. */ +.trackpad-wrapper .ui-dialog-titlebar-close { + margin-top: -9px; + border: 0 !important; + background: none !important; +} + +.trackpad-wrapper .ui-dialog-titlebar-close { + margin-top: -11px; +} + +/* Background-image is defined along with touch-sprite in 1 place. */ +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon { + background-position: -9px -239px; + background-repeat: no-repeat; +} + +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon:active { + background-position-x: -24px; + background-repeat: no-repeat; +} + +/* The grabber icon indicating the dialog could be moved around */ +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title { + background-position: -10px -255px; + background-repeat: no-repeat; + width: 40px; + height: 14px; + margin: 0 0 0 42%; +} +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title:active { + background-position-x: -52px; +} + +.trackpad-wrapper { + width: 289px !important; /* As this is less than the default value */ + border: 1px solid #333 !important; + background: none !important; + border-radius: 6px; + box-shadow: 0px 4px 9px rgba(0,0,0,.6); +} + +.trackpad-wrapper .ui-dialog-titlebar { + border-top: 1px solid #ccc; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + border-bottom: 0; + padding: .5em .8em .4em .8em; + background: rgb(175,176,187); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* W3C */ + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.trackpad-wrapper .trackpad-container { + padding: 0 !important; +} + +.trackpad-wrapper .left-border { + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ + margin-top: -1px; + float: left; + width: 12px; + height: 209px; + border: 0; +} + +.trackpad-wrapper .touch-area { + background: rgba(255,255,255,0.8); + background: -webkit-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Opera 11.10+ */ + background: -ms-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* IE10+ */ + background: linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* W3C */ + border: 1px solid #555; + box-shadow: 0 2px 6px 1px #888 inset; + float: left; + width: 263px; + height: 206px; +} + +.trackpad-wrapper .right-border { + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ + margin-top: -1px; + float: left; + width: 12px; + height: 209px; + border: 0; + } + +.trackpad-wrapper .bottom-border { + background: rgb(123,123,133); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* W3C */ + width: 289px; + height: 73px; + margin-top: 208px; + border: 0; +} + +.trackpad-wrapper .button-left, .trackpad-wrapper .button-right { + background: rgb(255,255,255); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* W3C */ + border-radius: 6px; + box-shadow: 0 2px 5px #333; + float: left; + width: 126px; + height: 47px; +} + +.trackpad-wrapper .button-left { + margin: 12px 0px auto 12px; +} + +.trackpad-wrapper .button-right { + margin: 12px; +} + +.trackpad-wrapper .button-left.button-highlight, +.trackpad-wrapper .button-right.button-highlight { + background: -webkit-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* W3C */ +} diff --git a/src/sunstone/public/app/utils/webmks/css/wmks-all.css b/src/sunstone/public/app/utils/webmks/css/wmks-all.css new file mode 100644 index 00000000000..b12feed8571 --- /dev/null +++ b/src/sunstone/public/app/utils/webmks/css/wmks-all.css @@ -0,0 +1,661 @@ +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * main-ui.css + * + * Defines style for the wmks ui widgets. + * + * Use CSS3 for touch devices as jquery effects break when browser handles + * orientation changes, or page bouncing. + * + * TODO: Need to handle Retina mode for iPad. + */ + +/* + * jQuery UI Dialog 1.8.16 + */ +.ui-dialog { + padding: 0; + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.ui-dialog .ui-dialog-titlebar { + padding: .8em .8em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.ui-dialog .ui-dialog-titlebar-close { + right: .4em; + margin-top: -11px; +} + +.ui-widget-content { + border: 0; + background: #ffffff; + color: #333333; +} + +.ui-widget-header a { + color: #333333; +} + + +/* Touch feedback indicator */ +.ui-touch-feedback-icon { + background-image: url('../img/touch_sprite_feedback.png'); + width: 300px; + height: 120px; + position: absolute; + left: -9999px; + top: -9999px; + z-index: 2; +} + +.feedback-container { + z-index: 2; + position: absolute; + display: none; +} + +.feedback-container.cursor-icon { + background: url('../img/touch_sprite_feedback.png') -260px -15px no-repeat; + width: 17px; + height: 23px; +} + +.feedback-container.tap-icon { + background: url('../img/touch_sprite_feedback.png') -300px -15px no-repeat; + width: 36px; + height: 36px; +} + +.feedback-container.drag-icon { + background: url('../img/touch_sprite_feedback.png') -10px -10px no-repeat; + width: 100px; + height: 100px; +} + +.feedback-container.pulse-icon { + background: url('../img/touch_sprite_feedback.png') -111px -10px no-repeat; + width: 100px; + height: 100px; +} + +.feedback-container.scroll-icon { + background: url('../img/touch_sprite_feedback.png') -212px -10px no-repeat; + width: 27px; + height: 100px; +} + +/* CSS3 feedback indicator animation. Keep it simple (uses lower cpu cycles) + as there may be multiple animation requests made in quick successions. */ +.animate-feedback-indicator { + display: block; + opacity: 0; + animation-name: showfadeout; + animation-duration: 350ms; + -webkit-animation-name: showfadeout; + -webkit-animation-duration: 350ms; + -moz-animation-name: showfadeout; + -moz-animation-duration: 350ms; + -ms-animation-name: showfadeout; + -ms-animation-duration: 350ms; +} + +@-webkit-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +@-moz-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +@-ms-keyframes showfadeout { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.animate-double-feedback-indicator { + display: block; + opacity: 0; + animation-name: showdoublefadeout; + animation-duration: 400ms; + -webkit-animation-name: showdoublefadeout; + -webkit-animation-duration: 400ms; + -moz-animation-name: showdoublefadeout; + -moz-animation-duration: 400ms; + -ms-animation-name: showdoublefadeout; + -ms-animation-duration: 400ms; +} + +@-webkit-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} + +@-moz-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} + +@-ms-keyframes showdoublefadeout { + 0% { opacity: 1; } + 40% { opacity: 0; } + 70% { opacity: 1; } + 100% { opacity: 0; } +} +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * trackpad.css + * + * Defines style for the trackpad widget. + */ + +/* + * jQuery UI Dialog 1.8.16 + */ +.ui-dialog { + padding: 0; + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.ui-dialog .ui-dialog-titlebar { + padding: .8em .8em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.ui-dialog .ui-dialog-titlebar-close { + right: .4em; + margin-top: -11px; +} + +.ui-widget-content { + border: 0; + background: #ffffff; + color: #333333; +} + +.ui-widget-header a { + color: #333333; +} + +/* + * Touch sprite is loaded in a single class (as we have disabled caching images). + * We do this for the iOS case, due to extreme limitations in terms of image size. + * This form of grouped declaration forces all these definitions to load the same + * sprite. (This is also loaded upfront for the navbar so its always visible). + * For details see PR - 978390. + */ +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon, +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title, +.touch-sprite { + background-image: url('../img/touch_sprite.png'); +} + +/* Replace jquery ui title bar close icon. */ +.trackpad-wrapper .ui-dialog-titlebar-close { + margin-top: -9px; + border: 0 !important; + background: none !important; +} + +.trackpad-wrapper .ui-dialog-titlebar-close { + margin-top: -11px; +} + +/* Background-image is defined along with touch-sprite in 1 place. */ +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon { + background-position: -9px -239px; + background-repeat: no-repeat; +} + +.trackpad-wrapper .ui-dialog-titlebar-close .ui-icon:active { + background-position-x: -24px; + background-repeat: no-repeat; +} + +/* The grabber icon indicating the dialog could be moved around */ +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title { + background-position: -10px -255px; + background-repeat: no-repeat; + width: 40px; + height: 14px; + margin: 0 0 0 42%; +} +.trackpad-wrapper .ui-dialog-titlebar .ui-dialog-title:active { + background-position-x: -52px; +} + +.trackpad-wrapper { + width: 289px !important; /* As this is less than the default value */ + border: 1px solid #333 !important; + background: none !important; + border-radius: 6px; + box-shadow: 0px 4px 9px rgba(0,0,0,.6); +} + +.trackpad-wrapper .ui-dialog-titlebar { + border-top: 1px solid #ccc; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + border-bottom: 0; + padding: .5em .8em .4em .8em; + background: rgb(175,176,187); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(175,176,187,.93) 0%,rgba(170,171,182,.93) 100%); /* W3C */ + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.trackpad-wrapper .trackpad-container { + padding: 0 !important; +} + +.trackpad-wrapper .left-border { + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ + margin-top: -1px; + float: left; + width: 12px; + height: 209px; + border: 0; +} + +.trackpad-wrapper .touch-area { + background: rgba(255,255,255,0.8); + background: -webkit-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* Opera 11.10+ */ + background: -ms-linear-gradient(-70deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* IE10+ */ + background: linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(238,238,240,0.8) 22%, rgba(210,210,216,0.8) 71%); /* W3C */ + border: 1px solid #555; + box-shadow: 0 2px 6px 1px #888 inset; + float: left; + width: 263px; + height: 206px; +} + +.trackpad-wrapper .right-border { + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ + margin-top: -1px; + float: left; + width: 12px; + height: 209px; + border: 0; + } + +.trackpad-wrapper .bottom-border { + background: rgb(123,123,133); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(123,123,133,.93) 0%,rgba(110,110,119,.93) 100%); /* W3C */ + width: 289px; + height: 73px; + margin-top: 208px; + border: 0; +} + +.trackpad-wrapper .button-left, .trackpad-wrapper .button-right { + background: rgb(255,255,255); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(255,255,255,.7) 0%,rgba(225,225,227,.7) 3%,rgba(204,204,204,.7) 45%,rgba(190,190,195,.7) 96%,rgba(131,131,135,.7) 100%); /* W3C */ + border-radius: 6px; + box-shadow: 0 2px 5px #333; + float: left; + width: 126px; + height: 47px; +} + +.trackpad-wrapper .button-left { + margin: 12px 0px auto 12px; +} + +.trackpad-wrapper .button-right { + margin: 12px; +} + +.trackpad-wrapper .button-left.button-highlight, +.trackpad-wrapper .button-right.button-highlight { + background: -webkit-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.7) 0%,rgba(123,123,133,.7) 100%); /* W3C */ +} +/****************************************************************************** + * Copyright 2013 VMware, Inc. All rights reserved. + *****************************************************************************/ + +/* + * extended-keypad.css + * + * Defines style for the virtual keys on the control pane. + */ + +.ctrl-pane-wrapper { + width: 290px !important; /* Needed as the default is a bit larger than this */ + border: 1px solid #333 !important; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: rgb(170,171,182); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(170,171,182,.93) 0%,rgba(123,123,133,.93) 100%); /* W3C */ +} + +.fnKey-pane-wrapper { + width: 427px; + border: 1px solid #333; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: #c1c4d1; /* Old browsers */ + background: -webkit-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #c1c4d1 0%,#b0b1bd 100%); /* IE10+ */ + background: linear-gradient(top, #c1c4d1 0%, #b0b1bd 100%); /* W3C */ + position: absolute; + padding: 0; + -moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +.fnKey-pane-wrapper-down { + width: 427px; + border: 1px solid #333; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + background: #6e6e77; /* Old browsers */ + background: -webkit-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #6e6e77 0%,#656565 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #6e6e77 0%,#656565 100%); /* IE10+ */ + background: linear-gradient(top, #6e6e77 0%, #656565 100%); /* W3C */ + position: absolute; + padding: 0; + -moz-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,.5); + box-shadow: 0px 5px 7px rgba(0,0,0,.5); +} + +/* Hide jquery ui title bar. */ +.ctrl-pane-wrapper .ui-dialog-titlebar { + border-top: 1px solid #ccc; + border-left: 1px solid #aaa; + border-right: 1px solid #aaa; + border-bottom: 0; + padding: .6em .8em 0 .8em; + background: none !important; + -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; border-top-left-radius: 5px; + -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px; border-top-right-radius: 5px; +} + +/* Replace jquery ui title bar close icon. */ +.ctrl-pane-wrapper .ui-dialog-titlebar-close { + margin-top: -9px; + border: 0 !important; + background: none !important; +} + +/* Background-image is defined along with touch-sprite in 1 place. */ +.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon { + background-position: -9px -239px; + background-repeat: no-repeat; +} + +.ctrl-pane-wrapper .ui-dialog-titlebar-close .ui-icon:active { + background-position-x: -24px; + background-repeat: no-repeat; +} + +/* The grabber icon indicating the dialog could be moved around */ +.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title { + background-position: -10px -255px; + background-repeat: no-repeat; + width: 40px; + height: 14px; + margin: 0 0 0 42%; +} + +.ctrl-pane-wrapper .ui-dialog-titlebar .ui-dialog-title:active { + background-position-x: -52px; +} + +.ctrl-pane-wrapper .ui-dialog-content { + background: none !important; + padding: 0 0; + border-style: solid; + border-color: #aaaaaa; + border-width: 0 1px 1px 1px; + -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; + -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; +} + +.fnKey-inner-border-helper { + position: relative; + background: none !important; + border-style: solid; + border-color: #d5d5d5; + border-width: 1px; + -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; + pointer-events:none; +} + +.ctrl-pane-wrapper .ctrl-pane { + padding: 3px 0 3px 6px; + height: 140px; + width: 280px; +} + +.ctrl-pane .baseKey { + float: left; + border: 0; + padding: 0; + width: 57px; + height: 57px; + margin: 6px; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; + font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHeros', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-size: 18px; + text-shadow: 0 1px 1px #eeeeee; + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .7); + -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.7); + box-shadow: 0px 1px 3px rgba(0,0,0,.7); +} + +.ctrl-pane .ctrl-key-top-row { + background: -webkit-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* IE10+ */ + background: linear-gradient(top, #fff 0%,#f3f5fb 2%,#d2d2d8 98%,#999 100%); /* W3C */ +} + +.ctrl-pane .ctrl-key-bottom-row { + background: -webkit-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #fff 0%,#e1e1e3 2%,#d1d1d4 50%,#bebec3 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .up-position .fn-key-top-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#f7f7f7 2%,#dcdde3 96%,#999999 100%); /* W3C */ +} + +.ctrl-pane .up-position .fn-key-bottom-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#f3f5fb 2%,#d2d2d8 98%,#999999 100%); /* W3C */ +} + +.ctrl-pane .down-position .fn-key-top-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#e1e1e3 4%,#d1d1d4 45%,#b7b8bd 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .down-position .fn-key-bottom-row { + color:#333; + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* IE10+ */ + background: linear-gradient(top, #ffffff 0%,#d9dadd 4%,#c8c8cd 45%,#b0b0b7 98%,#838387 100%); /* W3C */ +} + +.ctrl-pane .fn-key-top-row { + margin: 12px 6px 6px 6px; +} + +.ctrl-pane .border-key-top-left .fn-key-top-row { + margin: 12px 6px 6px 12px; +} + +.ctrl-pane .border-key-top-right .fn-key-top-row { + margin: 12px 12px 6px 6px; +} + +.ctrl-pane .fn-key-bottom-row { + margin: 5px 6px 12px 6px; +} + +.ctrl-pane .border-key-bottom-left .fn-key-bottom-row { + margin: 5px 6px 12px 12px; +} + +.ctrl-pane .border-key-bottom-right .fn-key-bottom-row { + margin: 5px 12px 12px 6px; +} + +.ctrl-pane .ctrl-key-top-row:active, .ctrl-pane .fn-key-top-row:active, +.ctrl-pane .ctrl-key-bottom-row:active, .ctrl-pane .fn-key-bottom-row:active { + background: #bbbbbb; + background: -webkit-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: -ms-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: -o-linear-gradient(bottom, #888888 25%, #CCCCCC 68%); + background: linear-gradient(bottom, #888888 25%, #CCCCCC 68%); +} + +.ctrl-pane .ctrl-key-top-row div, .ctrl-pane .ctrl-key-bottom-row div, +.ctrl-pane .fn-key-top-row div, .ctrl-pane .fn-key-bottom-row div { + width: 100%; + text-align: center; + padding-top: 17px; + overflow-x: hidden; +} + +/* Highlight selected modifier key */ +.ctrl-pane .ab-modifier-key-down { + color: #4D8DFF; +} + +.ctrl-pane .baseKey img { /* use .touch-sprite for image */ + background-repeat: no-repeat; + width: 57px; + height: 57px; + border: 0; + -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; +} + +.ctrl-pane .baseKey .right-arrow { + background-position: -242px -182px; +} + +.ctrl-pane .baseKey .left-arrow { + background-position: -126px -182px; +} + +.ctrl-pane .baseKey .up-arrow { + background-position: -299px -182px; +} + +.ctrl-pane .baseKey .down-arrow { + background-position: -183px -182px; +} + +.ctrl-pane .baseKey .more-keys { + background-position: -10px -182px; +} + +/* Ctrl - pane flip transition. */ +.ctrl-pane.flip-container { + perspective: 1000; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; +} + + /* flip the ctrl-pane when this class toggles. */ +.flip-container.perform-flip .flipper { + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); +} + +/* flip speed goes here */ +.flip-container .flipper { + transition: 0.6s; + transform-style: preserve-3d; + -webkit-transition: 0.6s; + -webkit-transform-style: preserve-3d; + -moz-transition: 0.6s; + -moz-transform-style: preserve-3d; + -ms-transition: 0.6s; + -ms-transform-style: preserve-3d; + position: relative; +} + +/* hide back of pane during swap */ +.flip-container .front, .flip-container .back { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; +} + +/* front pane, placed above back */ +.flip-container .front { + z-index: 200; +} + +/* back, initially hidden pane */ +.flip-container .back { + transform: rotateY(180deg); + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); +} diff --git a/src/sunstone/public/app/utils/webmks/img/touch_sprite.png b/src/sunstone/public/app/utils/webmks/img/touch_sprite.png new file mode 100644 index 00000000000..9209d836cd3 Binary files /dev/null and b/src/sunstone/public/app/utils/webmks/img/touch_sprite.png differ diff --git a/src/sunstone/public/app/utils/webmks/img/touch_sprite_feedback.png b/src/sunstone/public/app/utils/webmks/img/touch_sprite_feedback.png new file mode 100644 index 00000000000..fbdb0a3fc5f Binary files /dev/null and b/src/sunstone/public/app/utils/webmks/img/touch_sprite_feedback.png differ diff --git a/src/sunstone/public/app/utils/webmks/wmks.min.js b/src/sunstone/public/app/utils/webmks/wmks.min.js new file mode 100644 index 00000000000..7a1d74277bb --- /dev/null +++ b/src/sunstone/public/app/utils/webmks/wmks.min.js @@ -0,0 +1,6 @@ +(function(){function a(a){var b=a.length,c=new Array(Math.ceil(b/8)),d,e;for(d=0,e=0;d0?d.shift():new Image},f=function(a){delete a[0],a[0]=null,a=null},g=function(a){a.onload=a.onerror=null;var e=[71,73,70,56,57,97,1,0,1,0,0,255,0,44,0,0,0,0,1,0,1,0,0,2,0,59];e.push32($.now()),a.src="data:image/gif;base64,"+c.encodeFromArray(e),d.length<=b?d.push(a):f([a])};this.getImage=function(){return e()},this.releaseImage=function(a){if(!a)return;g(a)}}function e(){this._mediaSource=null,this._sourceBuffer=null,this._tempQueue=[],this._mediaPlayer=null,this._isError=!1,this._isErrorDoneCalled=!1,this._sendRequest=0,this._doneRequest=0,this._decodeDoneCb=null,this._decodeErrorCb=null,e.instanceNumber++,this._name="MP4Decoder"+e.instanceNumber}function f(d){function g(a){WMKS.LOGGER.trace("uint8utf8: replacing functions"),a._originalFunctions=a._originalFunctions||{};for(var b in f)f.hasOwnProperty(b)&&(a._originalFunctions[b]||(a._originalFunctions[b]=a[b]),a[b]=f[b])}function h(a){WMKS.LOGGER.trace("restoreFunctions");if(!a._originalFunctions)return;for(var b in a._originalFunctions)a._originalFunctions.hasOwnProperty(b)&&(a[b]=a._originalFunctions[b])}"use strict",WMKS.LOGGER.debug("adding uint8utf8 support");var e=d;e.hasOwnProperty("_legacyReceiveQueue")||(e._legacyReceiveQueue="",e._legacyReceiveQueueIndex=""),e.useLegacy=!1;var f={};f._receiveQueueBytesUnread=function(){return this._legacyReceiveQueue.length-this._legacyReceiveQueueIndex},f._receiveQueueConsumeBytes=function(a){this._legacyReceiveQueueIndex+=a},f._receiveQueueReset=function(){this._legacyReceiveQueue="",this._legacyReceiveQueueIndex=0},f._readString=function(a){var b=this._legacyReceiveQueue.slice(this._legacyReceiveQueueIndex,this._legacyReceiveQueueIndex+a);return this._legacyReceiveQueueIndex+=a,b},f._readStringUTF8=function(a){var b,c,d,e,f=[],g=this._legacyReceiveQueueIndex;while(ge._legacyReceiveQueue.length)return e.fail("overflow receiveQueue");e._legacyReceiveQueueIndex===e._legacyReceiveQueue.length&&(e._legacyReceiveQueue="",e._legacyReceiveQueueIndex=0);if(typeof b.data!="string"){var c=new Uint8Array(b.data);e._legacyReceiveQueue=e._legacyReceiveQueue.concat(a(c))}else e._legacyReceiveQueue=e._legacyReceiveQueue.concat(b.data);e._processMessages()},e.protocolList.indexOf("uint8utf8")===-1&&e.protocolList.push("uint8utf8"),f._receiveQueueReset.call(e)}var c={decodeToArray:function(a,c){return b(window.atob(a),c)},decodeToString:function(a){return window.atob(a)},encodeFromArray:function(b){return window.btoa(a(b))},encodeFromString:function(a){return window.btoa(a)}};WMKS={},WMKS.LOGGER=new function(){"use strict",this.LEVEL={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4};var a=this.LEVEL.INFO,b=[" [Trace] "," [Debug] "," [Info ] "," [Warn ] "," [Error] "];this.trace=function(a){this.log(a,this.LEVEL.TRACE)},this.debug=function(a){this.log(a,this.LEVEL.DEBUG)},this.info=function(a){this.log(a,this.LEVEL.INFO)},this.warn=function(a){this.log(a,this.LEVEL.WARN)},this.error=function(a){this.log(a,this.LEVEL.ERROR)},this.log=typeof console=="undefined"||typeof console.log=="undefined"?$.noop:function(c,d){d=d===undefined?this.LEVEL.INFO:d,d>=a&&c&&console.log((WMKS.BROWSER.isIE()?(new Date).toUTCString():(new Date).toISOString())+b[d]+c)},this.setLogLevel=function(c){typeof c=="number"&&c>=0&&c-1?c:d;var e=function(b,c){var d=a.match(b);return d&&d.length>c&&d[c]||""};this.version={full:""},this.isSafari()?this.version.full=e(/Version[ \/]([0-9\.]+)/i,1):this.isChrome()?this.version.full=e(/Chrome\/([0-9\.]+)/i,1):this.isFirefox()?this.version.full=e(/(?:Firefox|Iceweasel)[ \/]([0-9\.]+)/i,1):this.isOpera()?this.version.full=e(/Version[ \/]([0-9\.]+)/i,1)||e(/(?:opera|opr)[\s\/]([0-9\.]+)/i,1):this.isIE()&&(this.version.full=e(/(?:\b(MS)?IE\s+|\bTrident\/7\.0;.*\s+rv:|\bEdge\/)([0-9\.]+)/i,2));var f=this.version.full.split(".");this.version.major=parseInt(f.length>0?f[0]:0,10),this.version.minor=parseInt(f.length>1?f[1]:0,10),this.version.float=parseFloat(this.version.full),this.isCanvasSupported=function(){try{var a=document.createElement("canvas"),b=!!a.getContext;return a=null,b}catch(c){return!1}}},WMKS.CONST={CLICK:{left:1,middle:2,right:4},FORCE_RAW_KEY_CODE:{8:!0,9:!0,13:!0}},WMKS.UTIL={createCanvas:function(a){var b={};return a&&(b.position="absolute"),$("").css(b)},createVideo:function(a){var b={};return a&&(b.position="absolute"),$("