mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-05 16:35:33 +00:00
731 lines
No EOL
25 KiB
JavaScript
731 lines
No EOL
25 KiB
JavaScript
/***
|
|
KeymanWeb 10.0
|
|
Copyright 2017 SIL International
|
|
***/
|
|
|
|
// If a UI module has been loaded, we can rely on the publically-published 'name' property
|
|
// having been set as a way to short-out a UI reload. Its parent object always exists by
|
|
// this point in the build process.
|
|
if(!window['tavultesoft']['keymanweb']['ui']['name']) {
|
|
/********************************/
|
|
/* */
|
|
/* Toggle User Interface Code */
|
|
/* */
|
|
/********************************/
|
|
|
|
/**
|
|
* Do not enclose in an anonymous function, as the compiler may create
|
|
* global scope variables to replace true, false, null, which may collide
|
|
* with other variables.
|
|
* Instead, use the --output-wrapper command during optimization, which will
|
|
* add the anonymous function to enclose all code, including those optimized
|
|
* variables which would otherwise have global scope.
|
|
**/
|
|
|
|
try {
|
|
|
|
// Declare KeymanWeb, OnScreen Keyboard and Util objects
|
|
var keymanweb=window['tavultesoft']['keymanweb'],osk=keymanweb['osk'],util=keymanweb['util'];
|
|
var dbg=keymanweb['debug'];
|
|
|
|
// Disable UI for touch devices
|
|
if(util['isTouchDevice']()) throw '';
|
|
|
|
// Initialize user interface common variables
|
|
var ui=keymanweb['ui'] = {
|
|
name: 'toggle',
|
|
initialized: false,
|
|
controller: null,
|
|
oskButton: null,
|
|
kbdButton: null,
|
|
controllerHovered: false,
|
|
keyboards: [],
|
|
lastActiveKeyboard: -1,
|
|
selectedMenuItem: null,
|
|
updateList: true,
|
|
updateTimer: null
|
|
}
|
|
|
|
/**
|
|
* Update the KeymanWeb user interface when an input element is focused or blurred
|
|
*
|
|
* @param {Object} someElement focused element
|
|
* @param {(boolean|number)} focusing true if focusing
|
|
* @param {Object} activeControl Object representing API specs for the control, if it exists and is now focused.
|
|
*/
|
|
ui.doFocus = function(someElement,focusing, activeControl) {
|
|
// This callback must be ignored until UI is initialized, or for touch devices (which can never initialize the UI)
|
|
if(!ui.initialized) {
|
|
return;
|
|
}
|
|
|
|
if(window.event) {
|
|
someElement=window.event.srcElement;
|
|
}
|
|
|
|
if(focusing)
|
|
{
|
|
ui.controller.style.display = 'block';
|
|
}
|
|
else
|
|
{
|
|
if(!(keymanweb['getUIState']()['activationPending']) && !ui.controllerHovered)
|
|
{
|
|
ui.controller.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/* I2406 - Find an appropriate position for the controller */
|
|
var x, y, w, h, p;
|
|
|
|
p = util['getAbsolute'](someElement); x = p['x']; y=p['y'];
|
|
if(someElement.parentWindow && someElement.parentWindow.frameElement)
|
|
{
|
|
w = someElement.parentWindow.frameElement.clientWidth;
|
|
h = someElement.parentWindow.frameElement.clientHeight;
|
|
}
|
|
else if(someElement.defaultView && someElement.defaultView.frameElement)
|
|
{
|
|
w = someElement.defaultView.frameElement.clientWidth;
|
|
h = someElement.defaultView.frameElement.clientHeight;
|
|
}
|
|
else
|
|
{
|
|
w = someElement.offsetWidth;
|
|
h = someElement.offsetHeight;
|
|
}
|
|
if(x + w > (window.clientWidth?window.clientWidth:window.innerWidth) + document.documentElement.scrollLeft - ui.controller.offsetWidth - 1)
|
|
y += h;
|
|
else
|
|
{
|
|
x += w + 2;
|
|
//y += h - ui.controller.offsetHeight - 1; // ui.controller.offsetheight is returned as its prior value, which results in incorrect UI positioning
|
|
// so better to set the offset absolutely JMD 11/2/11
|
|
y += h - 29; //prevent UI being positioned *above* the top of the element
|
|
}
|
|
|
|
if(isNaN(x) || isNaN(y)) return;
|
|
ui.controller.style.left = x + 'px';
|
|
ui.controller.style.top = y + 'px';
|
|
}
|
|
|
|
keymanweb['addEventListener']('controlfocused',function(params){ui.doFocus(params.target,true, params['activeControl']);});
|
|
keymanweb['addEventListener']('controlblurred',function(params){ui.doFocus(params.target,false, null);});
|
|
|
|
osk['addEventListener']('show',
|
|
function(oskPosition)
|
|
{
|
|
// Ensure that the ui.controller is visible if help is displayed
|
|
ui.controller.style.display = 'block';
|
|
ui.oskButton._setSelected(true);
|
|
|
|
/* The following is probably not needed for KMW2, since OSK position is set by KMW, not by the UI
|
|
//TODO: This may not be correct - may need to refer to userLocated argument, not function???
|
|
// Check if OSK position is user-defined, return if so
|
|
if (osk['userLocated']()) return oskPosition;
|
|
|
|
// Otherwise, return the position with respect to the focussed element
|
|
var someElement = keymanweb['getLastActiveElement'](), x, y, w, h, p;
|
|
if(someElement != null)
|
|
{
|
|
p = util['getAbsolute'](someElement); x = p['x']; y = p['y'];
|
|
if(someElement.parentWindow && someElement.parentWindow.frameElement)
|
|
{
|
|
w = someElement.parentWindow.frameElement.clientWidth;
|
|
h = someElement.parentWindow.frameElement.clientHeight;
|
|
}
|
|
else if(someElement.defaultView && someElement.defaultView.frameElement)
|
|
{
|
|
w = someElement.defaultView.frameElement.clientWidth;
|
|
h = someElement.defaultView.frameElement.clientHeight;
|
|
}
|
|
else
|
|
{
|
|
w = someElement.offsetWidth;
|
|
h = someElement.offsetHeight;
|
|
}
|
|
//TODO: check the logic of this - it doesn't look right!!! Signs on top, height??
|
|
var r = osk['getRect']();
|
|
x += 32;
|
|
if(y + h + (r.height - r.top) > (window.clientHeight?window.clientHeight:window.innerHeight) + document.documentElement.scrollTop &&
|
|
y - (r.height - r.top) >= document.documentElement.scrollTop)
|
|
{
|
|
y -= (r.height - r.top);
|
|
}
|
|
else
|
|
y += h;
|
|
}
|
|
else
|
|
{
|
|
x = ui.controller.offsetLeft;
|
|
y = ui.controller.offsetTop + ui.controller.offsetHeight;
|
|
}
|
|
oskPosition['x'] = x;
|
|
oskPosition['y'] = y;
|
|
*/
|
|
return oskPosition;
|
|
});
|
|
|
|
osk['addEventListener']('hide',
|
|
function(byUser)
|
|
{
|
|
if(byUser['HiddenByUser']) ui.oskButton._setSelected(false);
|
|
});
|
|
|
|
/**
|
|
* Toggle the on screen keyboard display - KMW button control event
|
|
**/
|
|
ui.switchOsk = function()
|
|
{
|
|
// Check that user control of OSK is allowed
|
|
if((keymanweb['getActiveKeyboard']() == '') || keymanweb['isCJK']() ) return;
|
|
|
|
osk['show'](!osk['isEnabled']());
|
|
}
|
|
|
|
/**
|
|
* Toggle a single keyboard on or off - KMW button control event
|
|
**/
|
|
ui.switchSingleKbd = function()
|
|
{
|
|
var _v = (keymanweb['getActiveKeyboard']() == ''),nLastKbd=0,kbdName='',lgCode='';
|
|
if(_v)
|
|
{
|
|
if(ui.keyboards.length == 0) return;
|
|
if(ui.lastActiveKeyboard < ui.keyboards.length && ui.lastActiveKeyboard >= 0) nLastKbd = ui.lastActiveKeyboard;
|
|
kbdName = ui.keyboards[nLastKbd]._InternalName;
|
|
lgCode = ui.keyboards[nLastKbd]._LanguageCode;
|
|
keymanweb['setActiveKeyboard'](kbdName,lgCode);
|
|
ui.lastActiveKeyboard = nLastKbd;
|
|
}
|
|
else
|
|
{
|
|
keymanweb['setActiveKeyboard']('');
|
|
}
|
|
if(ui.kbdButton) ui.kbdButton._setSelected(_v);
|
|
}
|
|
|
|
/**
|
|
* Switch to the next keyboard in the list - KMW button control event
|
|
**/
|
|
ui.switchNextKbd = function()
|
|
{
|
|
var _v = (keymanweb['getActiveKeyboard']() == ''),kbdName='',lgCode='';
|
|
if(_v)
|
|
{
|
|
if(ui.keyboards.length == 0) return;
|
|
kbdName = ui.keyboards[0]._InternalName;
|
|
lgCode = ui.keyboards[0]._LanguageCode;
|
|
keymanweb['setActiveKeyboard'](kbdName,lgCode);
|
|
ui.lastActiveKeyboard = 0;
|
|
}
|
|
else
|
|
{
|
|
if(ui.lastActiveKeyboard == ui.keyboards.length-1)
|
|
{
|
|
keymanweb['setActiveKeyboard']('');
|
|
_v = false;
|
|
}
|
|
else
|
|
{
|
|
kbdName = ui.keyboards[++ui.lastActiveKeyboard]._InternalName;
|
|
lgCode = ui.keyboards[ui.lastActiveKeyboard]._LanguageCode;
|
|
keymanweb['setActiveKeyboard'](kbdName,lgCode);
|
|
_v = true;
|
|
}
|
|
}
|
|
if(ui.kbdButton) ui.kbdButton._setSelected(_v);
|
|
}
|
|
|
|
/**
|
|
* Create a button object for KeymanWeb UI buttons
|
|
*
|
|
* @constructor
|
|
* @param {string} _src
|
|
* @param {string} _caption
|
|
* @param {boolean} _selected
|
|
* @return {Object}
|
|
*
|
|
* @suppress {suspiciousCode} // Closure isn't smart enough to realize that _onmouseover
|
|
* // and the like are defined on individual instances later.
|
|
* // It thinks they're always null.
|
|
**/
|
|
ui.button = function(_src, _caption, _selected)
|
|
{
|
|
this._onclick = null;
|
|
this._onmouseover = null;
|
|
this._onmouseout = null;
|
|
this._elem = null;
|
|
this._down = false;
|
|
this._over = false;
|
|
this._selected = _selected;
|
|
|
|
/*public*/ this.getElem = function()
|
|
{
|
|
return this._owningObject._elem;
|
|
};
|
|
|
|
/*private*/ this.__updatestyle = function()
|
|
{
|
|
var ss=this._owningObject._elem.style;
|
|
if(this._owningObject._over)
|
|
{
|
|
ss.margin = '0px';
|
|
if(this._owningObject._selected) {
|
|
ss.border = 'solid 1px #ad4a28';
|
|
ss.background = '#dfb4b4';
|
|
}
|
|
else {
|
|
ss.border = 'solid 1px #dfb4b4';
|
|
ss.background = '#f3e5de';
|
|
}
|
|
}
|
|
else if(this._owningObject._selected)
|
|
{
|
|
ss.background = '#f3e5de';
|
|
ss.margin = '0px';
|
|
ss.border = 'solid 1px #ad4a28';
|
|
}
|
|
else
|
|
{
|
|
ss.background = 'none';
|
|
ss.margin = '1px';
|
|
ss.border = 'none';
|
|
}
|
|
};
|
|
|
|
/*private*/ this.__mouseover = function()
|
|
{
|
|
ui.controllerHovered = true;
|
|
this._owningObject._over = true;
|
|
if(this._owningObject._onmouseover != null) this._owningObject._onmouseover();
|
|
this._owningObject.__updatestyle();
|
|
};
|
|
|
|
/*private*/ this.__mouseout = function()
|
|
{
|
|
ui.controllerHovered = false;
|
|
this._owningObject._over = false;
|
|
if(this._owningObject._onmouseout != null) this._owningObject._onmouseout();
|
|
this._owningObject.__updatestyle();
|
|
};
|
|
|
|
/*private*/ this.__click = function()
|
|
{
|
|
keymanweb['activatingUI'](false); // Clear activating UI flag once click is acknowledged
|
|
if(this._owningObject._onclick != null)
|
|
return this._owningObject._onclick();
|
|
return false;
|
|
};
|
|
|
|
/*private*/ this.__mousedown = function()
|
|
{
|
|
keymanweb['activatingUI'](true); // Set activating UI flag (to manage focus/blur) on any UI mouse down event
|
|
this._owningObject._down = true;
|
|
this._owningObject.__updatestyle();
|
|
return false;
|
|
};
|
|
|
|
/*private*/ this.__mouseup = function()
|
|
{
|
|
this._owningObject._down = false;
|
|
this._owningObject.__updatestyle();
|
|
};
|
|
|
|
/*public*/ this._setSelected = function(_value)
|
|
{
|
|
keymanweb['activatingUI'](false); // Always clear activating UI flag after selecting UI
|
|
this._owningObject._selected = _value;
|
|
this._owningObject.__updatestyle();
|
|
};
|
|
|
|
/*public*/ this._getSelected = function()
|
|
{
|
|
return this._owningObject._selected;
|
|
};
|
|
|
|
/*public*/ this._getOver = function()
|
|
{
|
|
return this._owningObject._over;
|
|
};
|
|
|
|
/*public*/ this._getDown = function()
|
|
{
|
|
return this._owningObject._down;
|
|
};
|
|
|
|
this._owningObject = this; // simplifies meaning of 'this'
|
|
|
|
var imgPath=util['getOption']('resources') + 'ui/toggle/';
|
|
var _elemImg = util['createElement']('img');
|
|
this._elem = util['createElement']('div');
|
|
this._elem._owningObject = this;
|
|
_elemImg.style.display = 'block';
|
|
_elemImg.src = imgPath + _src;
|
|
_elemImg.id = 'KMW_Controller_Img';
|
|
this._elem.style.margin = '0px'; //display = 'inline';
|
|
this._elem.style.width = '24px';
|
|
this._elem.style.height = '24px';
|
|
this._elem.style.zIndex = '10002';
|
|
this._elem.style.lineHeight = '100%';
|
|
this._elem.style.styleFloat = this._elem.style.cssFloat = 'left';
|
|
|
|
_elemImg.title = _caption;
|
|
_elemImg.alt = _caption;
|
|
this._elem.appendChild(_elemImg);
|
|
this._elem.onmouseover = this.__mouseover;
|
|
this._elem.onmouseout = this.__mouseout;
|
|
this._elem.onmousedown = this.__mousedown;
|
|
this._elem.onmouseup = this.__mouseup;
|
|
_elemImg._owningObject = this;
|
|
_elemImg.onclick = this.__click;
|
|
|
|
this.__updatestyle();
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Function Initialize
|
|
* Scope Private
|
|
* Description Initialize Toggle User Interface
|
|
**/
|
|
ui['initialize'] = ui.Initialize = function()
|
|
{
|
|
//Never initialize before KMW!
|
|
if(!keymanweb['initialized'] || util['isTouchDevice']()) return;
|
|
|
|
if(!ui.initialized) // I2403 - Allow toggle design to be loaded twice
|
|
{
|
|
ui.controller = util['createElement']('div');
|
|
}
|
|
else
|
|
ui.controller.innerHTML = ''; // I2403 - Allow toggle design to be loaded twice
|
|
|
|
var imgPath = util['getOption']('resources')+'ui/toggle/';
|
|
ui.controller.style.background = 'url('+imgPath+'kmwcontroller2x.gif)';
|
|
ui.controller.style.padding = '1px 2px';
|
|
|
|
// Create keyboard list and OSK control buttones, and set initial styles
|
|
var v1=util['loadCookie']('KeymanWeb_Keyboard'),kbdEnabledOnLoad=false;
|
|
if(typeof(v1['current'])!='undefined') kbdEnabledOnLoad = (v1['current'].indexOf('---') < 0);
|
|
ui.kbdButton = new ui.button('kmw_logo_16.gif', 'Use Web Keyboard', kbdEnabledOnLoad);
|
|
ui.controller.appendChild(ui.kbdButton.getElem());
|
|
|
|
var v2 = util['loadCookie']('KeymanWeb_OnScreenKeyboard'),oskEnabledOnLoad=true;
|
|
if(typeof(v2['visible'])!='undefined') oskEnabledOnLoad=(v2['visible'] == 1);
|
|
|
|
// Add keyboard icon
|
|
ui.oskButton = new ui.button('kmw_osk_16.gif','Show On Screen Keyboard',oskEnabledOnLoad);
|
|
ui.oskButton._onclick = ui.switchOsk;
|
|
ui.controller.appendChild(ui.oskButton.getElem());
|
|
|
|
// Hide controller unless already initialized
|
|
if(!ui.initialized) ui.controller.style.display = 'none';
|
|
ui.controller.style.zIndex = '10001';
|
|
ui.controller.style.position = 'absolute';
|
|
|
|
// The following three lines prevent the UI from being positioned incorrectly when the page is resized,
|
|
// but don't fix the problem completely, as the kbd icon still moves. probably need to insert a DIV
|
|
// between the button and the container, and make that DIV fixed height and overflow:hidden
|
|
//ui.controller.style.maxHeight = '26px';
|
|
//ui.oskButton.getElem().style.position = 'relative';
|
|
//ui.oskButton.getElem().style.overflow = 'hidden';
|
|
|
|
if(!ui.initialized) // I2403 - Allow toggle design to be loaded more than once if necessary
|
|
document.body.appendChild(ui.controller);
|
|
|
|
// Set initialized true
|
|
ui.initialized = true; // I2403 - Allow toggle design to be loaded more than once if needed
|
|
|
|
// Then update the keyboard list if keyboards already loaded (i.e. in page script)
|
|
ui.updateKeyboardList();
|
|
|
|
}
|
|
|
|
/**
|
|
* Function updateKeyboardList
|
|
* Scope Private
|
|
* Description Rebuild the UI and keyboard list
|
|
**/
|
|
ui.updateKeyboardList=function()
|
|
{
|
|
if(!(keymanweb['initialized'] || ui.initialized)) return; //TODO: may want to restart the timer??
|
|
|
|
ui.updateList = false;
|
|
|
|
var _kbds=keymanweb['getKeyboards'](),imgPath=util['getOption']('resources') +'ui/toggle/';
|
|
|
|
// Check the number of installed keyboards to determine whether or not we will have a dropdown
|
|
if(_kbds.length > 1)
|
|
{
|
|
// Multiple keyboards
|
|
var _kmw_ctrl_img=document.getElementById('KMW_Controller_Img')
|
|
_kmw_ctrl_img.src = imgPath+'kmw_logo_16_down.gif';
|
|
_kmw_ctrl_img.style.width = '100%';
|
|
|
|
ui.controller.style.background = 'url('+imgPath+'kmwcontroller2x.gif)';
|
|
|
|
ui.kbdButton.getElem().id = 'kmwico';
|
|
ui.kbdButton.getElem().style.width = '36px';
|
|
ui.kbdButton._onmouseover = function()
|
|
{
|
|
ui.keyboardMenu.className="sfhover";
|
|
};
|
|
ui.kbdButton._onmouseout = function()
|
|
{
|
|
ui.keyboardMenu.className="sfunhover";
|
|
};
|
|
ui.kbdButton._onclick = null;
|
|
ui.createMenu();
|
|
}
|
|
// Single keyboard
|
|
else if(_kbds.length == 1)
|
|
{
|
|
var _kmw_ctrl_img=document.getElementById('KMW_Controller_Img')
|
|
_kmw_ctrl_img.src = imgPath+'kmw_logo_16.gif';
|
|
|
|
ui.kbdButton.getElem().id = 'kmwico';
|
|
ui.kbdButton.getElem().style.width = '24px';
|
|
|
|
var Lki=_kbds[0]['InternalName'];
|
|
var Lklc=_kbds[0]['LanguageCode'];
|
|
ui.controller.style.background = 'url('+imgPath+'kmwcontroller2.gif)';
|
|
ui.keyboards.push({_InternalName: Lki, _LanguageCode: Lklc, _Index: 0});
|
|
ui.kbdButton._onclick = ui.switchSingleKbd;
|
|
ui.kbdButton._onmouseover = function() { };
|
|
ui.kbdButton._onmouseout = function() { };
|
|
|
|
// We must reconstruct the ui.keyboards array, and this done by ui.createMenu.
|
|
ui.createMenu();
|
|
|
|
// Must remove menu if keyboards have been removed leaving only a single keyboard
|
|
if(typeof(ui.keyboardMenu) != 'undefined') delete ui.keyboardMenu;
|
|
}
|
|
|
|
// Highlight the last active keyboard
|
|
var sk=keymanweb['getSavedKeyboard']().split(':');
|
|
ui.updateMenu(sk[0],sk[1]);
|
|
}
|
|
|
|
/**
|
|
* Keyboard registration event handler
|
|
*
|
|
* Set a timer to update the UI keyboard list on timeout after each keyboard is registered,
|
|
* thus updating only once when only if multiple keyboards are registered together
|
|
*/
|
|
keymanweb['addEventListener']('keyboardregistered',
|
|
function(p)
|
|
{
|
|
ui.updateList = true;
|
|
if(ui.updateTimer) clearTimeout(ui.updateTimer);
|
|
ui.updateTimer = setTimeout(ui.updateKeyboardList,200);
|
|
});
|
|
|
|
|
|
/**
|
|
* Keyboard change event handler
|
|
*
|
|
* Update menu selection and control OSK display appropriately
|
|
*/
|
|
keymanweb['addEventListener']('keyboardchange',
|
|
function(p)
|
|
{
|
|
ui.updateMenu(p['internalName'],p['languageCode']);
|
|
});
|
|
|
|
/* ----------------------------------------
|
|
Drop down menu
|
|
---------------------------------------- */
|
|
|
|
// var _SelectedMenuItem;
|
|
|
|
/**
|
|
* Function selecKbd
|
|
* Scope Private
|
|
* @param {number} _kbd
|
|
* Description Select a keyboard from the drop down menu
|
|
**/
|
|
ui.selectKbd = function(_kbd)
|
|
{
|
|
var _name,_lgCode,_index;
|
|
if(_kbd < 0)
|
|
{
|
|
_name = ''; _lgCode='';_index = '';
|
|
}
|
|
else
|
|
{
|
|
_name = ui.keyboards[_kbd]._InternalName; _lgCode = ui.keyboards[_kbd]._LanguageCode; _index = ui.keyboards[_kbd]._Index;
|
|
}
|
|
keymanweb['setActiveKeyboard'](_name,_lgCode);
|
|
keymanweb['focusLastActiveElement']();
|
|
ui.kbdButton._setSelected(_name != '');
|
|
if(_kbd >= 0) ui.lastActiveKeyboard = _kbd;
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Function updateMenu
|
|
* Scope Private
|
|
* @param {string} kbdName
|
|
* @param {?string=} lgCode
|
|
* Description Updates the menu selection when a change is required
|
|
**/
|
|
ui.updateMenu = function(kbdName,lgCode)
|
|
{
|
|
var i,_k=document.getElementById('KMWSel_$');
|
|
|
|
for(i=0; i<ui.keyboards.length; i++)
|
|
{
|
|
if(ui.keyboards[i]._InternalName == kbdName && ui.keyboards[i]._LanguageCode == lgCode)
|
|
_k=document.getElementById('KMWSel_'+ui.keyboards[i]._InternalName+'$'+ui.keyboards[i]._Index);
|
|
}
|
|
|
|
if(_k)
|
|
{
|
|
if(ui.selectedMenuItem != null) ui.selectedMenuItem.className='';
|
|
_k.className='selected'; ui.selectedMenuItem=_k;
|
|
}
|
|
|
|
// Hide the OSK button for CJK keyboards (or non-mapped)
|
|
if(lgCode=='cmn' || lgCode=='jpn' || lgCode=='kor')
|
|
{
|
|
ui.oskButton.getElem().style.display='none';
|
|
//osk['show'](true);
|
|
}
|
|
else if(kbdName == '')
|
|
{
|
|
ui.oskButton.getElem().style.display='none';
|
|
}
|
|
else
|
|
{
|
|
ui.oskButton.getElem().style.display='block';
|
|
//osk['show'](osk['isEnabled']());
|
|
}
|
|
}
|
|
util['addStyleSheet'](
|
|
"#KeymanWeb_KbdList {"+
|
|
"display: block;"+
|
|
"position: absolute;"+
|
|
"width: auto;"+ ((util['getIEVersion']() < 8) ? "200px;" : "auto;")+
|
|
"line-height: 100%;"+
|
|
"margin: 0;"+
|
|
"clear: both;"+
|
|
"float: none;"+
|
|
"top: auto;"+
|
|
"border: solid 2px #ad4a28;"+
|
|
"-moz-border-radius: 4px;"+
|
|
"-webkit-border-radius: 4px;"+
|
|
"border-radius: 4px;"+
|
|
"box-shadow: 4px 4px 2px rgba(136,136,136,.5);"+
|
|
"-webkit-box-shadow: 4px 4px 2px rgba(136,136,136,.5);"+
|
|
"-moz-box-shadow: 4px 4px 2px rgba(136,136,136,.5);"+
|
|
((util['getIEVersion']() < 99) ? "filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=4,OffY=4,Color=#80646464);" : "")+
|
|
"list-style: none;"+
|
|
"padding: 0;"+
|
|
"background: white;"+
|
|
"max-height: 300px;"+
|
|
"overflow-y: scroll;"+
|
|
"overflow-x: hidden;"+
|
|
"white-space: nowrap;"+
|
|
"z-index: 10001; /* above the osk */"+
|
|
"}"+
|
|
((util['getIEVersion']() < 7) ?
|
|
"* html #KeymanWeb_KbdList {height: expression(this.scrollHeight > 299 ? '300px' : 'auto');}" : "")+
|
|
".sfunhover#KeymanWeb_KbdList {"+
|
|
"display: none; left: -999px;"+
|
|
"}"+
|
|
".sfhover#KeymanWeb_KbdList {"+
|
|
"display: block;"+
|
|
"left: auto;"+
|
|
"}"+
|
|
"#KeymanWeb_KbdList li {"+
|
|
"float: none;"+
|
|
"width: auto;"+
|
|
"padding: 0;"+
|
|
"margin: 0;"+
|
|
"text-align: left;"+
|
|
"}"+
|
|
"#KeymanWeb_KbdList li a {"+
|
|
"display: block; "+
|
|
"padding: 2px 4px;"+
|
|
"color: #404040;"+
|
|
"font-family: Tahoma,Verdana,Arial,sans-serif;"+
|
|
"font-size: 8pt;"+
|
|
"text-decoration: none;"+
|
|
"}"+
|
|
"#KeymanWeb_KbdList li a.selected {"+
|
|
"font-weight: bold;"+
|
|
"color: black;"+
|
|
"}"+
|
|
"#KeymanWeb_KbdList li a:hover {"+
|
|
"color: white;"+
|
|
"background-color: #ad4a28;"+
|
|
"text-decoration: underline;"+
|
|
"}");
|
|
|
|
/**
|
|
* Function createMenu
|
|
* Scope Private
|
|
* Description Create the drop down menu and populate with loaded KeymanWeb keyboards
|
|
**/
|
|
ui.createMenu = function()
|
|
{
|
|
if(typeof(ui.keyboardMenu) == 'undefined') // I2403 - Allow toggle design to be loaded twice
|
|
{
|
|
ui.keyboardMenu=util['createElement']('ul');
|
|
ui.keyboardMenu.id='KeymanWeb_KbdList';
|
|
ui.keyboardMenu.className='sfunhover';
|
|
}
|
|
else ui.keyboardMenu.innerHTML = ''; // I2403 - Allow toggle design to be loaded twice
|
|
|
|
var _li=util['createElement']('li');
|
|
var _a=util['createElement']('a');
|
|
_a.innerHTML='English';
|
|
_a.href="#";
|
|
_a.onclick = function() { return ui.selectKbd(-1); };
|
|
_a.id='KMWSel_$';
|
|
_a.className='selected';
|
|
_li.appendChild(_a);
|
|
|
|
ui.selectedMenuItem=_a;
|
|
ui.keyboardMenu.appendChild(_li);
|
|
|
|
var _kbds=keymanweb['getKeyboards'](), _added=[];
|
|
ui.keyboards=[];
|
|
for(var _kbd = 0; _kbd < _kbds.length; _kbd++)
|
|
{
|
|
var _li1=util['createElement']('li');
|
|
var _a1=util['createElement']('a');
|
|
_a1.innerHTML=_kbds[_kbd]['LanguageName'] + ' - ' + _kbds[_kbd]['Name'];
|
|
if(!_added[_kbds[_kbd]['InternalName']]) _added[_kbds[_kbd]['InternalName']]=0;
|
|
_added[_kbds[_kbd]['InternalName']]++;
|
|
|
|
var _n=_added[_kbds[_kbd]['InternalName']];
|
|
ui.keyboards.push({_InternalName: _kbds[_kbd]['InternalName'], _LanguageCode:_kbds[_kbd]['LanguageCode'], _Index: _n});
|
|
|
|
_a1.href="#";
|
|
_a1.onclick = (function(x) { return function() { return ui.selectKbd(x); } })(ui.keyboards.length-1);
|
|
_a1.id='KMWSel_'+_kbds[_kbd]['InternalName']+'$'+_n;
|
|
|
|
_li1.appendChild(_a1);
|
|
ui.keyboardMenu.appendChild(_li1);
|
|
}
|
|
|
|
//if(!ui.initialized) // I2403 - Allow toggle design to be loaded twice
|
|
if(ui.keyboardMenu.parentNode != ui.kbdButton.getElem()) ui.kbdButton.getElem().appendChild(ui.keyboardMenu);
|
|
};
|
|
|
|
keymanweb['addHotKey'](191,0x20,ui.switchSingleKbd);
|
|
keymanweb['addHotKey'](191,0x30,ui.switchNextKbd);
|
|
keymanweb['addHotKey'](191,0x40,ui.switchOsk);
|
|
|
|
// Initialize after KMW is fully initialized
|
|
keymanweb['addEventListener']('loaduserinterface',ui.Initialize);
|
|
|
|
// but also execute here, for asynchronous UI script loading (occurring after KMW initialization)
|
|
ui.Initialize();
|
|
|
|
} catch(ex){}
|
|
} |