mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-05 16:35:33 +00:00
1217 lines
No EOL
40 KiB
TypeScript
1217 lines
No EOL
40 KiB
TypeScript
// Includes KMW-added property declaration extensions for HTML elements.
|
|
/// <reference path="kmwexthtml.ts" />
|
|
// Includes the Device definition set.
|
|
/// <reference path="kmwdevice.ts" />
|
|
// Includes the DOM utils, since our UI modules need access to certain methods here.
|
|
/// <reference path="dom/utils.ts" />
|
|
|
|
namespace com.keyman {
|
|
class DOMEventTracking {
|
|
Pelem: EventTarget;
|
|
Peventname: string;
|
|
Phandler: (Object) => boolean;
|
|
PuseCapture?: boolean
|
|
|
|
constructor(Pelem: EventTarget, Peventname: string, Phandler: (Object) => boolean, PuseCapture?: boolean) {
|
|
this.Pelem = Pelem;
|
|
this.Peventname = Peventname.toLowerCase();
|
|
this.Phandler = Phandler;
|
|
this.PuseCapture = PuseCapture;
|
|
}
|
|
|
|
equals(other: DOMEventTracking): boolean {
|
|
return this.Pelem == other.Pelem && this.Peventname == other.Peventname &&
|
|
this.Phandler == other.Phandler && this.PuseCapture == other.PuseCapture;
|
|
}
|
|
};
|
|
|
|
export class Util {
|
|
// Generalized component event registration
|
|
device: Device;
|
|
activeDevice: Device;
|
|
physicalDevice: Device;
|
|
|
|
linkedStylesheets: (HTMLLinkElement|HTMLStyleElement)[] = [];
|
|
|
|
waiting: HTMLDivElement; // The element displayed for util.wait and util.alert.
|
|
|
|
// An object mapping event names to individual event lists. Maps strings to arrays.
|
|
private events: { [name: string]: ((Object) => boolean)[];} = {};
|
|
private currentEvents: string[] = []; // The event messaging call stack.
|
|
|
|
private domEvents: DOMEventTracking[] = [];
|
|
|
|
private embeddedFonts: any[] = []; // Array of currently embedded font descriptor entries. (Is it just a string?)
|
|
|
|
// Consider refactoring keymanweb.options to within Util.
|
|
|
|
private keyman: KeymanBase; // Closure doesn't like relying on the global object from within a class def.
|
|
|
|
constructor(keyman: any) {
|
|
this.initDevices();
|
|
|
|
this.keyman = keyman;
|
|
}
|
|
|
|
// Possible alternative: https://www.npmjs.com/package/language-tags
|
|
// This would necessitate linking in a npm module into compiled KeymanWeb, though.
|
|
['getLanguageCodes'](lgCode: string): string[] {
|
|
if(lgCode.indexOf('-')==-1) {
|
|
return [lgCode];
|
|
} else {
|
|
return lgCode.split('-');
|
|
}
|
|
}
|
|
|
|
initDevices(): void {
|
|
this.device = new Device();
|
|
this.physicalDevice = new Device();
|
|
this.activeDevice = this.device;
|
|
|
|
// Initialize the true device values.
|
|
this.device.detect();
|
|
|
|
/* DEBUG: Force touch device (Build 360)
|
|
|
|
device.touchable = true;
|
|
device.browser = 'safari';
|
|
device.formFactor = 'tablet';
|
|
device.OS = 'iOS';
|
|
|
|
END DEBUG */
|
|
|
|
/* If we've made it to this point of initialization and aren't anything else, KeymanWeb assumes
|
|
* we're a desktop. Since we don't yet support desktops with touch-based input, we disable it here.
|
|
*/
|
|
if(this.device.formFactor == 'desktop') {
|
|
this.device.touchable = false;
|
|
}
|
|
|
|
/**
|
|
* Represents hardware-based keystrokes regardless of the 'true' device, facilitating hardware keyboard input
|
|
* whenever touch-based input is available.
|
|
*/
|
|
this.physicalDevice = new Device();
|
|
this.physicalDevice.touchable = false;
|
|
this.physicalDevice.browser = this.device.browser;
|
|
this.physicalDevice.formFactor = 'desktop';
|
|
this.physicalDevice.OS = this.device.OS;
|
|
}
|
|
|
|
/**
|
|
* Function arrayFromNodeList
|
|
* Scope Public
|
|
* @param {Object} nl a node list, as returned from getElementsBy_____ methods.
|
|
* Description Transforms a node list into an array. *
|
|
* @return {Array<Element>}
|
|
*/
|
|
arrayFromNodeList(nl: NodeList|HTMLCollectionOf<Element>): HTMLElement[] {
|
|
var res = [];
|
|
for(var i=0; i < nl.length; i++) {
|
|
res.push(nl[i]);
|
|
}
|
|
return res;
|
|
}
|
|
|
|
/**
|
|
* Function addEventListener
|
|
* Scope Private
|
|
* @param {string} event name of event prefixed by module, e.g. osk.touchmove
|
|
* @param {function(Object)} func event handler
|
|
* @return {boolean}
|
|
* Description Add (or replace) an event listener for this component
|
|
*/
|
|
addEventListener(event: string, func: (Object) => boolean): boolean {
|
|
this.removeEventListener(event, func);
|
|
this.events[event].push(func);
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Function removeEventListener
|
|
* Scope Private
|
|
* @param {string} event name of event prefixed by module, e.g. osk.touchmove
|
|
* @param {function(Object)} func event handler
|
|
* @return {boolean}
|
|
* Description Remove the specified function from the listeners for this event
|
|
*/
|
|
removeEventListener(event: string, func: (Object) => boolean): boolean {
|
|
if(typeof this.events[event] == 'undefined') {
|
|
this.events[event] = [];
|
|
}
|
|
|
|
for(var i=0; i<this.events[event].length; i++) {
|
|
if(this.events[event][i] == func) {
|
|
this.events[event].splice(i, 1);
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Function callEvent
|
|
* Scope Private
|
|
* @param {string} event name of event prefixed by module, e.g. osk.touchmove
|
|
* @param {Array} params parameter array for function
|
|
* @return {boolean}
|
|
* Description Invoke an event using any function with up to four arguments
|
|
*/
|
|
callEvent(event: string, params: Object|Object[]): boolean {
|
|
if(typeof this.events[event] == 'undefined') {
|
|
return true;
|
|
}
|
|
|
|
if(this.currentEvents.indexOf(event) != -1) {
|
|
return false; // Avoid event messaging recursion!
|
|
}
|
|
|
|
this.currentEvents.push(event);
|
|
|
|
for(var i=0; i<this.events[event].length; i++) {
|
|
var func=this.events[event][i], result=false;
|
|
try {
|
|
result=func(params);
|
|
} catch(strExcept) {
|
|
console.error(strExcept);
|
|
result=false;
|
|
} //don't know whether to use true or false here
|
|
if(result === false) {
|
|
this.currentEvents.pop();
|
|
return false;
|
|
}
|
|
}
|
|
this.currentEvents.pop();
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Function attachDOMEvent: Note for most browsers, adds an event to a chain, doesn't stop existing events
|
|
* Scope Public
|
|
* @param {Object} Pelem Element (or IFrame-internal Document) to which event is being attached
|
|
* @param {string} Peventname Name of event without 'on' prefix
|
|
* @param {function(Object)} Phandler Event handler for event
|
|
* @param {boolean=} PuseCapture True only if event to be handled on way to target element
|
|
* Description Attaches event handler to element DOM event
|
|
*/
|
|
attachDOMEvent(Pelem: EventTarget, Peventname: string, Phandler: (Object) => boolean, PuseCapture?: boolean): void {
|
|
this.detachDOMEvent(Pelem, Peventname, Phandler, PuseCapture);
|
|
Pelem.addEventListener(Peventname, Phandler, PuseCapture?true:false);
|
|
|
|
// Since we're attaching to the DOM, these events should be tracked for detachment during shutdown.
|
|
var event = new DOMEventTracking(Pelem, Peventname, Phandler, PuseCapture);
|
|
this.domEvents.push(event);
|
|
}
|
|
|
|
/**
|
|
* Function detachDOMEvent
|
|
* Scope Public
|
|
* @param {Object} Pelem Element from which event is being detached
|
|
* @param {string} Peventname Name of event without 'on' prefix
|
|
* @param {function(Object)} Phandler Event handler for event
|
|
* @param {boolean=} PuseCapture True if event was being handled on way to target element
|
|
* Description Detaches event handler from element [to prevent memory leaks]
|
|
*/
|
|
detachDOMEvent(Pelem: EventTarget, Peventname: string, Phandler: (Object) => boolean, PuseCapture?: boolean): void {
|
|
Pelem.removeEventListener(Peventname, Phandler, PuseCapture);
|
|
|
|
// Since we're detaching, we should drop the tracking data from the old event.
|
|
var event = new DOMEventTracking(Pelem, Peventname, Phandler, PuseCapture);
|
|
for(var i = 0; i < this.domEvents.length; i++) {
|
|
if(this.domEvents[i].equals(event)) {
|
|
this.domEvents.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Function getOption
|
|
* Scope Public
|
|
* @param {string} optionName Name of option
|
|
* @param {*=} dflt Default value of option
|
|
* @return {*}
|
|
* Description Returns value of named option
|
|
*/
|
|
getOption(optionName:string, dflt:any): any {
|
|
if(optionName in this.keyman.options) {
|
|
return this.keyman.options[optionName];
|
|
} else if(arguments.length > 1) {
|
|
return dflt;
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* More reliable way of identifying element class
|
|
* @param {Object} e HTML element
|
|
* @param {string} name class name
|
|
* @return {boolean}
|
|
*/
|
|
hasClass(e: HTMLElement, name: string): boolean {
|
|
var className = " " + name + " ";
|
|
return (" " + e.className + " ").replace(/[\n\t\r\f]/g, " ").indexOf(className) >= 0;
|
|
}
|
|
|
|
/**
|
|
* Function setOption
|
|
* Scope Public
|
|
* @param {string} optionName Name of option
|
|
* @param {*=} value Value of option
|
|
* Description Sets value of named option
|
|
*/
|
|
setOption(optionName,value) {
|
|
this.keyman.options[optionName] = value;
|
|
}
|
|
|
|
// Unofficial API used by our desktop UIs.
|
|
getAbsoluteX(Pobj: HTMLElement): number {
|
|
return dom.Utils.getAbsoluteX(Pobj);
|
|
}
|
|
|
|
// Unofficial API used by our desktop UIs.
|
|
getAbsoluteY(Pobj: HTMLElement): number {
|
|
return dom.Utils.getAbsoluteY(Pobj);
|
|
}
|
|
|
|
/**
|
|
* Function getAbsolute
|
|
* Scope Public
|
|
* @param {Object} Pobj HTML element
|
|
* @return {Object.<string,number>}
|
|
* Description Returns absolute position of Pobj element with respect to page
|
|
*/
|
|
getAbsolute(Pobj: HTMLElement) {
|
|
var p={
|
|
/* @ export */
|
|
x: this.getAbsoluteX(Pobj),
|
|
/* @ export */
|
|
y: this.getAbsoluteY(Pobj)
|
|
};
|
|
return p;
|
|
}
|
|
|
|
// Unofficial API used by our desktop UIs.
|
|
_GetAbsolute = this.getAbsolute;
|
|
|
|
/**
|
|
* Select start handler (to replace multiple inline handlers) (Build 360)
|
|
*/
|
|
selectStartHandler = function() {
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Default mouse down event handler (to replace multiple inline handlers) (Build 360)
|
|
*/
|
|
mouseDownPreventDefaultHandler(e: MouseEvent) {
|
|
if(e) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
// Found a bit of magic formatting that allows dynamic return typing for a specified element tag!
|
|
_CreateElement<E extends "p"|"style"|"script"|"div"|"canvas"|"span">(nodeName:E) {
|
|
var e = document.createElement<E>(nodeName);
|
|
|
|
// Make element unselectable (Internet Explorer)
|
|
if (typeof e.onselectstart != 'undefined') { //IE route
|
|
e.onselectstart=this.selectStartHandler; // Build 360
|
|
} else { // And for well-behaved browsers (may also work for IE9+, but not necessary)
|
|
e.style.MozUserSelect="none";
|
|
e.style.KhtmlUserSelect="none";
|
|
e.style.UserSelect="none";
|
|
e.style.WebkitUserSelect="none";
|
|
}
|
|
return e;
|
|
}
|
|
|
|
/**
|
|
* Function _CancelMouse
|
|
* Scope Private
|
|
* @param {Object} e event
|
|
* @return {boolean} always false
|
|
* Description Closes mouse click event
|
|
*/
|
|
_CancelMouse=function(e: MouseEvent) {
|
|
e = com.keyman.singleton._GetEventObject(e); // I2404 - Manage IE events in IFRAMEs
|
|
if(e && e.preventDefault) {
|
|
e.preventDefault();
|
|
}
|
|
if(e) {
|
|
e.cancelBubble=true;
|
|
e.returnValue=false;
|
|
} // I2409 - Avoid focus loss for visual keyboard events
|
|
|
|
return false;
|
|
}
|
|
|
|
createElement = this._CreateElement;
|
|
|
|
/**
|
|
* Function getIEVersion
|
|
* Scope Public
|
|
* @return {number}
|
|
* Description Return IE version number (or 999 if browser not IE)
|
|
*/
|
|
getIEVersion() {
|
|
return Device._GetIEVersion();
|
|
}
|
|
|
|
getFontSizeStyle(e: HTMLElement|string): {val: number, absolute: boolean} {
|
|
var val: number;
|
|
var fs: string;
|
|
|
|
if(typeof e == 'string') {
|
|
fs = e;
|
|
} else {
|
|
fs = e.style.fontSize;
|
|
}
|
|
|
|
if(fs.indexOf('em') != -1) {
|
|
val = parseFloat(fs.substr(0, fs.indexOf('em')));
|
|
return {val: val, absolute: false};
|
|
} else if(fs.indexOf('px') != -1) {
|
|
val = parseFloat(fs.substr(0, fs.indexOf('px')));
|
|
return {val: val, absolute: true};
|
|
} else if(fs.indexOf('pt') != -1) {
|
|
// 16 px ~= 12 pt.
|
|
// Reference: https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
|
|
val = parseFloat(fs.substr(0, fs.indexOf('pt')));
|
|
return {val: (4 * val / 3), absolute: true};
|
|
} else if(fs.indexOf('%') != -1) {
|
|
val = parseFloat(fs.substr(0, fs.indexOf('%')));
|
|
return {val: val/100, absolute: false};
|
|
} else if(!isNaN(val = Number(fs))) {
|
|
// Note: this one is NOT natively handled by browsers!
|
|
// We'll treat it as if it were 'pt', since that's likely the user's
|
|
// most familiar font size unit.
|
|
return {val: (4 * val / 3), absolute: true};
|
|
} else {
|
|
// Cannot parse.
|
|
console.error("Could not properly parse specified fontsize info: '" + fs + "'.");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get browser-independent computed style value for element
|
|
*
|
|
* @param {Element} e HTML element
|
|
* @param {string} s CSS style name
|
|
* @return {*}
|
|
*/
|
|
getStyleValue(e:HTMLElement, s:string) {
|
|
// Build 349: error trap added, since on iOS, getPropertyValue may fail
|
|
// and crash in some cases, possibly if passed a text node
|
|
try
|
|
{
|
|
if(e && (typeof(window.getComputedStyle) != 'undefined')) {
|
|
return window.getComputedStyle(e,'').getPropertyValue(s);
|
|
}
|
|
}
|
|
catch(ex){}
|
|
|
|
// Return empty string if unable to get style value
|
|
return '';
|
|
}
|
|
|
|
/**
|
|
* Get browser-independent computed style integer value for element (Build 349)
|
|
*
|
|
* @param {Element} e HTML element
|
|
* @param {string} s CSS style name
|
|
* @param {number=} d default value if NaN
|
|
* @return {number} integer value of style
|
|
*/
|
|
getStyleInt(e: HTMLElement, s: string, d?: number): number {
|
|
var x=parseInt(this.getStyleValue(e,s),10);
|
|
if(!isNaN(x)) {
|
|
return x;
|
|
}
|
|
|
|
// Return the default value if numeric, else 0
|
|
if(typeof(d) == 'number') {
|
|
return d;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Expose the touchable state for UIs - will disable external UIs entirely
|
|
**/
|
|
isTouchDevice(): boolean {
|
|
return this.device.touchable;
|
|
}
|
|
|
|
/**
|
|
* Get orientation of tablet or phone display
|
|
*
|
|
* @return {boolean}
|
|
*/
|
|
portraitView() { // new for I3363 (Build 301)
|
|
return !this.landscapeView();
|
|
}
|
|
|
|
/**
|
|
* Get orientation of tablet or phone display
|
|
*
|
|
* @return {boolean}
|
|
*/
|
|
landscapeView(): boolean { // new for I3363 (Build 301)
|
|
var orientation: number;
|
|
|
|
// Assume portrait mode if orientation undefined
|
|
if(typeof window.orientation != 'undefined') { // Used by iOS Safari
|
|
// Else landscape for +/-90, portrait for 0, +/-180
|
|
orientation = window.orientation as number;
|
|
} else if(typeof window.screen.orientation != 'undefined') { // Used by Firefox, Chrome
|
|
orientation = window.screen.orientation.angle;
|
|
}
|
|
|
|
if(orientation !== undefined) {
|
|
return (Math.abs(orientation/90) == 1);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get viewport scale factor for this document
|
|
*
|
|
* @return {number}
|
|
*/
|
|
getViewportScale(): number {
|
|
// This can sometimes fail with some browsers if called before document defined,
|
|
// so catch the exception
|
|
try {
|
|
// Get viewport width
|
|
var viewportWidth = document.documentElement.clientWidth;
|
|
|
|
// Return a default value if screen width is greater than the viewport width (not fullscreen).
|
|
if(screen.width > viewportWidth) {
|
|
return 1;
|
|
}
|
|
|
|
// Get the orientation corrected screen width
|
|
var screenWidth = screen.width;
|
|
if(this.landscapeView()) {
|
|
// Take larger of the two dimensions
|
|
if(screen.width < screen.height) {
|
|
screenWidth = screen.height;
|
|
}
|
|
} else {
|
|
// Take smaller of the two dimensions
|
|
if(screen.width > screen.height) {
|
|
screenWidth = screen.height;
|
|
}
|
|
}
|
|
// Calculate viewport scale
|
|
return Math.round(100*screenWidth / window.innerWidth)/100;
|
|
} catch(ex) {
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return height of URL bar on mobile devices, if visible
|
|
* TODO: This does not seem to be right, so is not currently used
|
|
*
|
|
* @return {number}
|
|
*/
|
|
barHeight(): number {
|
|
var dy=0;
|
|
if(this.device.formFactor == 'phone') {
|
|
dy=screen.height/2-window.innerHeight-(this.landscapeView() ? this.device.dyLandscape: this.device.dyPortrait);
|
|
}
|
|
return dy;
|
|
}
|
|
|
|
/**
|
|
* Function _EncodeEntities
|
|
* Scope Private
|
|
* @param {string} P_txt string to be encoded
|
|
* @return {string} encoded (html-safe) string
|
|
* Description Encode angle brackets and ampersand in text string
|
|
*/
|
|
_EncodeEntities(P_txt: string): string {
|
|
return P_txt.replace('&','&').replace('<','<').replace('>','>'); // I1452 part 2
|
|
}
|
|
|
|
/**
|
|
* Function createShim
|
|
* Scope Public
|
|
* Description [Deprecated] Create an IFRAME element to go between KMW and drop down (to fix IE6 bug)
|
|
* @deprecated
|
|
*/
|
|
createShim(): void { // I1476 - Handle SELECT overlapping BEGIN
|
|
console.warn("The util.createShim function is deprecated, as its old functionality is no longer needed. " +
|
|
"It and references to its previously-produced shims may be safely removed.");
|
|
return;
|
|
}
|
|
|
|
// I1476 - Handle SELECT overlapping BEGIN
|
|
|
|
/**
|
|
* Function showShim
|
|
* Scope Public
|
|
* @param {Object} Pvkbd Visual keyboard DIV element
|
|
* @param {Object} Pframe IFRAME shim element
|
|
* @param {Object} Phelp OSK Help DIV element
|
|
* Description [Deprecated] Display iFrame under OSK at its currently defined position, to allow OSK to overlap SELECT elements (IE6 fix)
|
|
* @deprecated
|
|
*/
|
|
showShim(Pvkbd: HTMLElement, Pframe: HTMLElement, Phelp: HTMLElement) {
|
|
console.warn("The util.showShim function is deprecated, as its old functionality is no longer needed. It may be safely removed.");
|
|
}
|
|
|
|
/**
|
|
* Function hideShim
|
|
* Scope Public
|
|
* @param {Object} Pframe IFRAME shim element
|
|
* Description [Deprecated] Hide iFrame shim containing OSK
|
|
* @deprecated
|
|
*/
|
|
hideShim(Pframe: HTMLElement) {
|
|
console.warn("The util.hideShim function is deprecated, as its old functionality is no longer needed. It may be safely removed.");
|
|
}
|
|
|
|
/**
|
|
* Function rgba
|
|
* Scope Public
|
|
* @param {Object} s element style object
|
|
* @param {number} r red value, 0-255
|
|
* @param {number} g green value, 0-255
|
|
* @param {number} b blue value, 0-255
|
|
* @param {number} a opacity value, 0-1.0
|
|
* @return {string} background colour style string
|
|
* Description Browser-independent alpha-channel management
|
|
*/
|
|
rgba(s: HTMLStyleElement, r:number, g:number, b:number, a:number): string {
|
|
var bgColor='transparent';
|
|
try {
|
|
bgColor='rgba('+r+','+g+','+b+','+a+')';
|
|
} catch(ex) {
|
|
bgColor='rgb('+r+','+g+','+b+')';
|
|
}
|
|
|
|
return bgColor;
|
|
}
|
|
|
|
/**
|
|
* Add a stylesheet to a page programmatically, for use by the OSK, the UI or the page creator
|
|
*
|
|
* @param {string} s style string
|
|
* @return {Object} returns the object reference
|
|
**/
|
|
addStyleSheet(s: string): HTMLStyleElement {
|
|
var _ElemStyle: HTMLStyleElement = <HTMLStyleElement>document.createElement<'style'>('style');
|
|
|
|
_ElemStyle.type = 'text/css';
|
|
_ElemStyle.appendChild(document.createTextNode(s));
|
|
|
|
var _ElemHead=document.getElementsByTagName('HEAD');
|
|
if(_ElemHead.length > 0) {
|
|
_ElemHead[0].appendChild(_ElemStyle);
|
|
} else {
|
|
document.body.appendChild(_ElemStyle); // Won't work on Chrome, ah well
|
|
}
|
|
|
|
this.linkedStylesheets.push(_ElemStyle);
|
|
|
|
return _ElemStyle;
|
|
}
|
|
|
|
/**
|
|
* Remove a stylesheet element
|
|
*
|
|
* @param {Object} s style sheet reference
|
|
* @return {boolean} false if element is not a style sheet
|
|
**/
|
|
removeStyleSheet(s: HTMLStyleElement) {
|
|
if(s == null || typeof(s) != 'object') {
|
|
return false;
|
|
}
|
|
|
|
if(s.nodeName != 'STYLE') {
|
|
return false;
|
|
}
|
|
|
|
if(typeof(s.parentNode) == 'undefined' || s.parentNode == null) {
|
|
return false;
|
|
}
|
|
|
|
s.parentNode.removeChild(s);
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Add a reference to an external stylesheet file
|
|
*
|
|
* @param {string} s path to stylesheet file
|
|
*/
|
|
linkStyleSheet(s: string): void {
|
|
var headElements=document.getElementsByTagName('head');
|
|
if(headElements.length > 0) {
|
|
var linkElement=document.createElement('link');
|
|
linkElement.type='text/css';
|
|
linkElement.rel='stylesheet';
|
|
linkElement.href=s;
|
|
this.linkedStylesheets.push(linkElement);
|
|
headElements[0].appendChild(linkElement);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add a stylesheet with a font-face CSS descriptor for the embedded font appropriate
|
|
* for the browser being used
|
|
*
|
|
* @param {Object} fd keymanweb font descriptor
|
|
**/
|
|
addFontFaceStyleSheet(fd: any) { // TODO: Font descriptor object needs definition!
|
|
// Test if a valid font descriptor
|
|
if(typeof(fd) == 'undefined') return;
|
|
|
|
if(typeof(fd['files']) == 'undefined') fd['files']=fd['source'];
|
|
if(typeof(fd['files']) == 'undefined') return;
|
|
|
|
var i,ttf='',woff='',eot='',svg='',fList=[];
|
|
|
|
// TODO: 22 Aug 2014: check that font path passed from cloud is actually used!
|
|
|
|
// Do not add a new font-face style sheet if already added for this font
|
|
for(i=0; i<this.embeddedFonts.length; i++) {
|
|
if(this.embeddedFonts[i] == fd['family']) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if(typeof(fd['files']) == 'string') {
|
|
fList[0]=fd['files'];
|
|
} else {
|
|
fList=fd['files'];
|
|
}
|
|
|
|
for(i=0;i<fList.length;i++) {
|
|
if(fList[i].toLowerCase().indexOf('.ttf') > 0) ttf=fList[i];
|
|
if(fList[i].toLowerCase().indexOf('.woff') > 0) woff=fList[i];
|
|
if(fList[i].toLowerCase().indexOf('.eot') > 0) eot=fList[i];
|
|
if(fList[i].toLowerCase().indexOf('.svg') > 0) svg=fList[i];
|
|
}
|
|
|
|
// Font path qualified to support page-relative fonts (build 347)
|
|
if(ttf != '' && (ttf.indexOf('/') < 0)) {
|
|
ttf = this.keyman.options['fonts']+ttf;
|
|
}
|
|
|
|
if(woff != '' && (woff.indexOf('/') < 0)) {
|
|
woff = this.keyman.options['fonts']+woff;
|
|
}
|
|
|
|
if(eot != '' && (eot.indexOf('/') < 0)) {
|
|
eot = this.keyman.options['fonts']+eot;
|
|
}
|
|
|
|
if(svg != '' && (svg.indexOf('/') < 0)) {
|
|
svg = this.keyman.options['fonts']+svg;
|
|
}
|
|
|
|
// Build the font-face definition according to the browser being used
|
|
var s='@font-face {\nfont-family:'
|
|
+fd['family']+';\nfont-style:normal;\nfont-weight:normal;\n';
|
|
|
|
// Detect if Internet Explorer and version if so
|
|
var IE=Device._GetIEVersion();
|
|
|
|
// Build the font source string according to the browser,
|
|
// but return without adding the style sheet if the required font type is unavailable
|
|
|
|
// Modern browsers: use WOFF, TTF and fallback finally to SVG. Don't provide EOT
|
|
if(IE >= 9) {
|
|
if(this.device.OS == 'iOS') {
|
|
if(ttf != '') {
|
|
// Modify the url if required to prevent caching
|
|
ttf = this.unCached(ttf);
|
|
s=s+'src:url(\''+ttf+'\') format(\'truetype\');';
|
|
} else {
|
|
return;
|
|
}
|
|
} else {
|
|
var s0 = [];
|
|
|
|
if(this.device.OS == 'Android') {
|
|
// Android 4.2 and 4.3 have bugs in their rendering for some scripts
|
|
// with embedded ttf or woff. svg mostly works so is a better initial
|
|
// choice on the Android browser.
|
|
if(svg != '') {
|
|
s0.push("url('"+svg+"') format('svg')");
|
|
}
|
|
|
|
if(woff != '') {
|
|
s0.push("url('"+woff+"') format('woff')");
|
|
}
|
|
|
|
if(ttf != '') {
|
|
s0.push("url('"+ttf+"') format('truetype')");
|
|
}
|
|
} else {
|
|
if(woff != '') {
|
|
s0.push("url('"+woff+"') format('woff')");
|
|
}
|
|
|
|
if(ttf != '') {
|
|
s0.push("url('"+ttf+"') format('truetype')");
|
|
}
|
|
|
|
if(svg != '') {
|
|
s0.push("url('"+svg+"') format('svg')");
|
|
}
|
|
}
|
|
|
|
if(s0.length == 0) {
|
|
return;
|
|
}
|
|
|
|
s += 'src:'+s0.join(',')+';';
|
|
}
|
|
} else { // IE 6-8
|
|
if(eot != '') {
|
|
s=s+'src:url(\''+eot+'\');';
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
s=s+'\n}\n';
|
|
|
|
this.addStyleSheet(s);
|
|
this.embeddedFonts.push(fd['family']);
|
|
}
|
|
|
|
/**
|
|
* Allow forced reload if necessary (stub only here)
|
|
*
|
|
* @param {string} s unmodified URL
|
|
* @return {string} modified URL
|
|
*/
|
|
unCached(s: string): string {
|
|
// var t=(new Date().getTime());
|
|
// s = s + '?v=' + t;
|
|
return s;
|
|
}
|
|
|
|
/**
|
|
* Document cookie parsing for use by kernel, OSK, UI etc.
|
|
*
|
|
* @param {string=} cn cookie name (optional)
|
|
* @return {Object} array of names and strings, or array of variables and values
|
|
*/
|
|
loadCookie(cn?: string) {
|
|
var v={};
|
|
if(arguments.length > 0) {
|
|
var cx = this.loadCookie();
|
|
for(var t in cx) {
|
|
if(t == cn) {
|
|
var d = decodeURIComponent(cx[t]).split(';');
|
|
for(var i=0; i<d.length; i++) {
|
|
var xc = d[i].split('=');
|
|
if(xc.length > 1) {
|
|
v[xc[0]] = xc[1];
|
|
} else {
|
|
v[xc[0]] = '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if(typeof(document.cookie) != 'undefined' && document.cookie != '') {
|
|
var c = document.cookie.split(/;\s*/);
|
|
for(var i = 0; i < c.length; i++) {
|
|
var d = c[i].split('=');
|
|
if(d.length == 2) {
|
|
v[d[0]] = d[1];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return v;
|
|
}
|
|
|
|
/**
|
|
* Standard cookie saving for use by kernel, OSK, UI etc.
|
|
*
|
|
* @param {string} cn name of cookie
|
|
* @param {Object} cv object with array of named arguments and values
|
|
*/
|
|
saveCookie(cn: string, cv) {
|
|
var s='';
|
|
for(var v in cv) {
|
|
s = s + v+'='+cv[v]+";";
|
|
}
|
|
|
|
var d = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24 * 30).toUTCString();
|
|
document.cookie = cn+'='+encodeURIComponent(s)+'; path=/; expires='+d;//Fri, 31 Dec 2099 23:59:59 GMT;';
|
|
}
|
|
|
|
/**
|
|
* Function toNumber
|
|
* Scope Public
|
|
* @param {string} s numeric string
|
|
* @param {number} dflt default value
|
|
* @return {number}
|
|
* Description Return string converted to integer or default value
|
|
*/
|
|
toNumber(s: string, dflt: number): number {
|
|
var x = parseInt(s,10);
|
|
return isNaN(x) ? dflt : x;
|
|
}
|
|
|
|
/**
|
|
* Function toNumber
|
|
* Scope Public
|
|
* @param {string} s numeric string
|
|
* @param {number} dflt default value
|
|
* @return {number}
|
|
* Description Return string converted to real value or default value
|
|
*/
|
|
toFloat(s: string, dflt: number): number {
|
|
var x = parseFloat(s);
|
|
return isNaN(x) ? dflt : x;
|
|
}
|
|
|
|
/**
|
|
* Function toNzString
|
|
* Scope Public
|
|
* @param {*} item variable to test
|
|
* @param {?*=} dflt default value
|
|
* @return {*}
|
|
* Description Test if a variable is null, false, empty string, or undefined, and return as string
|
|
*/
|
|
nzString(item: any, dflt: any): string {
|
|
var dfltValue = '';
|
|
if(arguments.length > 1) {
|
|
dfltValue = dflt;
|
|
}
|
|
|
|
if(typeof(item) == 'undefined') {
|
|
return dfltValue;
|
|
}
|
|
|
|
if(item == null) {
|
|
return dfltValue;
|
|
}
|
|
|
|
if(item == 0 || item == '') {
|
|
return dfltValue;
|
|
}
|
|
|
|
return ''+item;
|
|
}
|
|
|
|
/**
|
|
* Function deepCopy
|
|
* Scope Private
|
|
* @param {Object} p object to copy
|
|
* @param {Array=} c0 array member being copied
|
|
* @return {Object} clone ('deep copy') of object
|
|
* Description Makes an actual copy (not a reference) of an object, copying simple members,
|
|
* arrays and member objects but not functions, so use with care!
|
|
*/
|
|
deepCopy<T>(p:T, c0?): T {
|
|
var c = c0 || {};
|
|
for (var i in p) {
|
|
if(typeof p[i] === 'object') {
|
|
c[i] = (p[i].constructor === Array ) ? [] : {};
|
|
this.deepCopy(p[i],c[i]);
|
|
}
|
|
else {
|
|
c[i] = p[i];
|
|
}
|
|
}
|
|
|
|
return c;
|
|
}
|
|
|
|
/**
|
|
* Return the event target for any browser
|
|
*
|
|
* @param {Event} e event
|
|
* @return {Object} HTML element
|
|
*/
|
|
eventTarget(e: Event): EventTarget {
|
|
if(!e) {
|
|
return null;
|
|
} else if (e.target) { // most browsers
|
|
return e.target;
|
|
} else if (e.srcElement) {
|
|
return e.srcElement;
|
|
} else if(window.event) { //IE 8 (and earlier)
|
|
return window.event.srcElement;
|
|
} else {
|
|
return null; // shouldn't happen!
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return the event type for any browser
|
|
*
|
|
* @param {Event} e event
|
|
* @return {string} type of event
|
|
*/
|
|
eventType(e: Event): string {
|
|
if(e && e.type) { // most browsers
|
|
return e.type;
|
|
} else if(window.event) { // IE 8 (and earlier)
|
|
return window.event.type;
|
|
} else {
|
|
return ''; // shouldn't happen!
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Customized alert
|
|
*
|
|
* @param {string} s alert text
|
|
* @param {function()=} fn function to call when alert dismissed
|
|
*/
|
|
alert(s: string, fn?: () => void): void {
|
|
var bg = this.waiting, nn=bg.firstChild.childNodes;
|
|
(nn[0] as HTMLElement).style.display='block';
|
|
(nn[1] as HTMLElement).className='kmw-alert-text';
|
|
(nn[1] as HTMLElement).innerHTML=s;
|
|
(nn[2] as HTMLElement).style.display='none';
|
|
bg.style.display='block';
|
|
if(arguments.length > 1) {
|
|
bg.dismiss=fn;
|
|
} else {
|
|
bg.dismiss=null;
|
|
}
|
|
}
|
|
|
|
// Stub definition to be fleshed out depending upon native/embedded mode.
|
|
wait(s: string|boolean): void {
|
|
|
|
}
|
|
|
|
/**
|
|
* Prepare the background and keyboard loading wait message box
|
|
* Should not be called before options are defined during initialization
|
|
**/
|
|
prepareWait(): void {
|
|
var bg: HTMLDivElement = <HTMLDivElement>document.createElement('DIV'),
|
|
lb=document.createElement('DIV'),
|
|
lt=document.createElement('DIV'),
|
|
gr=document.createElement('DIV'),
|
|
bx=document.createElement('DIV');
|
|
|
|
bg.className='kmw-wait-background';
|
|
lb.className='kmw-wait-box';
|
|
bg.dismiss=null;
|
|
lt.className='kmw-wait-text';
|
|
gr.className='kmw-wait-graphic';
|
|
bx.className='kmw-alert-close';
|
|
|
|
// Close alert if anywhere in box is touched, since close box is too small on mobiles
|
|
lb.onmousedown=lb.onclick=function(e) {
|
|
// Ignore if waiting, only handle for alert
|
|
if(bx.style.display == 'block') {
|
|
bg.style.display='none';
|
|
if(bg.dismiss) {
|
|
bg.dismiss();
|
|
}
|
|
}
|
|
};
|
|
|
|
lb.addEventListener('touchstart', lb.onclick, false);
|
|
bg.onmousedown=bg.onclick=function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
}
|
|
bg.addEventListener('touchstart', bg.onclick, false);
|
|
lb.appendChild(bx);
|
|
lb.appendChild(lt);
|
|
lb.appendChild(gr);
|
|
bg.appendChild(lb);
|
|
document.body.appendChild(bg);
|
|
this.waiting=bg;
|
|
}
|
|
|
|
shutdown() {
|
|
// Remove all event-handler references rooted in KMW events.
|
|
this.events = {};
|
|
|
|
// Remove all events linking to elements of the original, unaltered page.
|
|
// This should sever any still-existing page ties to this instance of KMW,
|
|
// allowing browser GC to do its thing.
|
|
for(let event of this.domEvents) {
|
|
this.detachDOMEvent(event.Pelem, event.Peventname, event.Phandler, event.PuseCapture);
|
|
}
|
|
|
|
// Remove any KMW-added DOM element clutter.
|
|
this.waiting.parentNode.removeChild(this.waiting);
|
|
|
|
for(let ss of this.linkedStylesheets) {
|
|
if(ss.remove) {
|
|
ss.remove();
|
|
} else if(ss.parentNode) {
|
|
ss.parentNode.removeChild(ss);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get path of keymanweb script, for relative references
|
|
*
|
|
* *** This is not currently used, but may possibly be needed if ***
|
|
* *** script identification during loading proves unreliable. ***
|
|
*
|
|
* @param {string} sName filename prefix
|
|
* @return {string} path to source, with trailing slash
|
|
**/
|
|
myPath(sName: string): string {
|
|
var i, scripts=document.getElementsByTagName('script'), ss;
|
|
|
|
for(i=0; i<scripts.length; i++) {
|
|
ss=scripts[i];
|
|
if(ss.src.indexOf(sName) >= 0) {
|
|
return ss.src.substr(0,ss.src.lastIndexOf('/')+1);
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
// Prepend the appropriate protocol if not included in path
|
|
prependProtocol(path: string): string {
|
|
var pattern = new RegExp('^https?:');
|
|
|
|
if(pattern.test(path)) {
|
|
return path;
|
|
} else if(path.substr(0,2) == '//') {
|
|
return this.keyman.protocol+path;
|
|
} else if(path.substr(0,1) == '/') {
|
|
return this.keyman.protocol+'/'+path;
|
|
} else {
|
|
return this.keyman.protocol+'//'+path;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return the appropriate test string for a given font
|
|
*
|
|
* TODO: Tidy up and remove arrays once 'sample' included in font metadata
|
|
*
|
|
* @param {Object} fd font meta-data object
|
|
* @return {string} string to compare width
|
|
*
|
|
*/
|
|
testString(fd): string {
|
|
var fontName=fd['family'],
|
|
i,s='BESbswy';
|
|
|
|
if('sample' in fd && typeof(fd['sample']) == 'string') {
|
|
return s+fd['sample'];
|
|
}
|
|
|
|
var f=['TamilWeb','TibetanWeb','LatinWeb','CherokeeWeb',
|
|
'EgyptianWeb','SinhalaWeb','KhmerWeb','ArabicWeb',
|
|
'BurmeseWeb','LaoWeb','OriyaWeb','GeezWeb'],
|
|
t=['\u0BBE\u0BF5','\u0F7F\u0FD0','\u02B0\u02A4','\u13D0\u13C9',
|
|
'\uA723\uF7D3','\u0DD8\u0DA3','\u17D6\u178E','\u0639\u06B3',
|
|
'\u1038\u1024','\u0EC0\u0EDD','\u0B03\u0B06','\u1361\u132C'];
|
|
|
|
for(i=0; i<f.length; i++) {
|
|
if(fontName == f[i]) {
|
|
return s+t[i];
|
|
}
|
|
}
|
|
|
|
return s;
|
|
}
|
|
|
|
/**
|
|
* Test if a font is installed (or available) on the target platform
|
|
*
|
|
* @param {Object} fd font structure
|
|
* @return {boolean} true if font available
|
|
*/
|
|
checkFont(fd): boolean {
|
|
var fontReady=false, fontName=fd['family'];
|
|
|
|
// Create an absolute positioned div and two paragraph elements with spans for the test string.
|
|
// The paragraph elements ensure that the spans are measured from the same point, otherwise
|
|
// pixel rounding can result in different widths for the same string and styles.
|
|
// Using a separate invisible DIV is more reliable than other positioning.
|
|
var d=document.createElement('DIV'), ds=d.style,
|
|
p1=document.createElement('P'),
|
|
p2=document.createElement('P'),
|
|
t1=document.createElement('SPAN'), s1=t1.style,
|
|
t2=document.createElement('SPAN'), s2=t2.style;
|
|
|
|
ds.position='absolute';
|
|
ds.top='10px';
|
|
ds.left='10px';
|
|
ds.visibility='hidden';
|
|
document.body.appendChild(d);
|
|
d.appendChild(p1);
|
|
d.appendChild(p2);
|
|
p1.appendChild(t1);
|
|
p2.appendChild(t2);
|
|
|
|
// Firefox fails without the !important prefix on the fallback font,
|
|
// apparently applying the same font to both elements.
|
|
// But it also fails to distinguish the two if !important is added to the test font!
|
|
// *** TODO: See if still true after changes Dec 2013 ***
|
|
// Must apply !important tag to font-family, but must apply it to the CSS style, not the JS object member
|
|
// c.f. http://stackoverflow.com/questions/462537/overriding-important-style-using-javascript
|
|
t1.setAttribute('style','font-family:monospace !important');
|
|
s2.fontFamily=fontName+',monospace';
|
|
s1.fontSize=s2.fontSize='24px'; // Not too large, to avoid wrapping or overflow
|
|
|
|
// Include narrow and wide characters from each unique script
|
|
t1.innerHTML=t2.innerHTML=this.testString(fd);
|
|
|
|
// Compare the actual width of each span. Checking monospace, serif,
|
|
// and sans-serif helps to avoid falsely reporting the font as ready
|
|
// The width must be different for all three tests.
|
|
if(t1.offsetWidth != t2.offsetWidth) {
|
|
t1.setAttribute('style','font-family:sans-serif !important');
|
|
s2.fontFamily=fontName+',sans-serif';
|
|
if(t1.offsetWidth != t2.offsetWidth) {
|
|
t1.setAttribute('style','font-family:serif !important');
|
|
s2.fontFamily=fontName+',serif';
|
|
}
|
|
}
|
|
|
|
fontReady=(t1.offsetWidth != t2.offsetWidth);
|
|
|
|
// Delete test elements
|
|
p1.removeChild(t1);
|
|
p2.removeChild(t2);
|
|
d.removeChild(p1);
|
|
d.removeChild(p2);
|
|
document.body.removeChild(d);
|
|
|
|
return fontReady;
|
|
}
|
|
|
|
/**
|
|
* Check a font descriptor for font availability, returning true if undefined
|
|
*
|
|
* @param {Object} fd font descriptor member of keyboard stub
|
|
* @return {boolean}
|
|
**/
|
|
checkFontDescriptor(fd): boolean {
|
|
if(typeof(fd) == 'undefined' || typeof(fd['family']) != 'string') {
|
|
return true;
|
|
}
|
|
|
|
return this.checkFont(fd);
|
|
}
|
|
}
|
|
}
|
|
|
|
import Util = com.keyman.Util; |