Release 3.0.0

latest bug fixes

Author: Mick2nd

README.md

@@ -96,14 +96,18 @@ The custom equations dialog with categories tree
 
 <img src="img/Custom-Equations-with-Categories.png" width="600" />
 
-The symbol bar with button for the Katex Input Helper (Calculator symbol)
+The symbol bar with button for the Katex Input Helper (Square Root symbol)
 
 ![Symbol Bar](./img/Symbol-Bar.png)
 
 ## Known Problems
 
 - A minor problem is a missing update of the language of the data grid paging bar in the *Custom Equations* dialog. This only appears during language change during an actual activation of the dialog.
 - The persistence of custom equations can be damaged when a filter is active. 
+- The *web* version of this app does work bad on *Firefox* and on mobile devices in that many dialogs are sized wrong. 
+This does not appear on the *Chrome* browser on desktop.
+- The sub menu items of the mobile version do show icons with the default theme only.
+- The mobile version does regularly pop-up the screen keyboard. No mechanism is known to avoid this.
 
 ## Release Notes
 
@@ -130,7 +134,7 @@ The symbol bar with button for the Katex Input Helper (Calculator symbol)
 - A dependency injection framework was introduced.
 - The handling of the information window was improved.
 - The web version of this app now supports a mobile parameter in the query string. But this is 
-  merely an experimental feature in an early stage.
+  merely an experimental feature in an early stage. Use **?mobile=true**.
 - Extensive re-factorings of the source code to improve the code structure.
 
 ### 2.0.1

img/Symbol-Bar.png

@@ -34,7 +34,9 @@
 				<div id="innerLayout" data-options="fit:true" class="easyui-layout">
 					<div id="divMathTextInput" data-options="region:'center',split:false,noheader:true">
 					</div>
-					<div id="mathVisualOutput" dir="ltr" data-options="region:'south',split:true,noheader:true" ></div>
+					<div id="mathVisualOutput" dir="ltr" data-options="region:'south',split:true,noheader:true" >
+						<div></div>
+					</div>
 				</div>
 			</div>
 

src/assets/dialog-desktop.hbs

@@ -8,16 +8,14 @@
 		{{> waitform }}
 
 		<div>
-		    <div id="myContainer" class="easyui-navpanel" data-options="fit:true,bodyCls:'mainNavPanelBody'">
+		    <div id="myContainer" class="easyui-navpanel" data-options="fit:true">
 		        <header>
 		            <div id="introduction" class="m-toolbar">
 		                <div class="m-left">
 		                    <a id="goWest" class="easyui-linkbutton" data-options="plain:true">&#x2770;</a>
 		                </div>
 		                <div class="m-title">Katex Input Helper</div>
 		                <div class="m-right">
-		                	<!-- 
-		                     -->
 		                    <a href="javascript:void(0)" class="easyui-menubutton invisible" data-options="iconCls:'',menu:'#main-menu',menuAlign:'right',hasDownArrow:false">&#9776;</a>
 		                    <a id="goMenu" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:''">&#9776;</a>
 		                    <a id="goEast" href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true">&#x2771;</a>
@@ -28,14 +26,15 @@
 					<input value="" class="keyboardInput" id="tKEYBOARD" />
 
 					<div id="innerLayout" data-options="fit:true" class="easyui-layout">
-						<!--
-						<div id="divMathTextInput" class="center" data-options="region:'center',split:false,noheader:true"></div>
-						<div id="mathVisualOutput" class="inner-south-mobile" dir="ltr" data-options="region:'south',split:true,noheader:true" ></div>
-						-->
 						<!--
 							TEST: exchange the order of INPUT and OUTPUT area, attach title to INPUT area.
+							This leads to better experience on mobile device.
 						-->
-						<div id="mathVisualOutput" class="inner-south-mobile" dir="ltr" data-options="region:'center',split:false,noheader:true" ></div>
+						<div id="mathVisualOutput" class="inner-south-mobile" dir="ltr" data-options="region:'center',split:false,noheader:true" >
+							<div>
+								
+							</div>
+						</div>
 						<div id="divMathTextInput" class="center" data-options="title:'<span locate=EDITION></span>&nbsp;',region:'south',split:true,noheader:false"></div>
 					</div>
 				</div>

src/assets/dialog-mobile.hbs

@@ -9,6 +9,20 @@
 </p>
 <table class="inline-table">
 
+<tr>
+<td valign=top>
+<b>3.0.0&nbsp;&nbsp;</b>
+</td>
+<td>
+ &raquo; Introduced a mobile version of the plug-in (experimental).
+<br/> &raquo; Divided HTML code to avoid duplication, introduced Handlebars tool for support.
+<br/> &raquo; Migrated this release to Code Mirror 6.
+<br/>
+<br/> Resizing of windows is more or less deactivated, Window size adapted to content.
+<br/>
+</td>
+</tr>
+
 <tr>
 <td valign=top>
 <b>2.1.1&nbsp;&nbsp;</b>

src/assets/information/tVERSION.html

@@ -102,16 +102,29 @@ export class CodeMirrorProxy implements ICodeMirror {
 
 	/**
 	 * Sets the focus to the editor view.
+	 * TODO: Problem: we cannot avoid automatic screen keyboard pop-ups on Android
+	 * -> deactivate mechanism, because it does not work
+	 * 
+	 * @param [disableKeyboard = false] - true switches the screen keyboard off 
 	 */
-	focus() : void { 
+	focus(disableKeyboard: boolean = false) : void { 
 
 		this.view.focus();
+
+		/*		
+		if (disableKeyboard) {
+			this.makeEditable(false);					// hope: this should switch the keyboard OFF
+			this.makeEditable(true);
+		}
+		*/
 	}
 
 	/**
 	 * Not implemented.
 	 */
-	refresh() : void { }
+	refresh() : void { 
+		
+	}
 
 	/**
 	 * Returns the number of the last line (zero based)
@@ -225,13 +238,17 @@ export class CodeMirrorProxy implements ICodeMirror {
 				event.preventDefault(); 								// Verhindert Zoom
 
 				this.editable = !this.editable;							// toggle the editable state
-				this.view.dispatch({ 
-					effects: this.editableCompartment.reconfigure(EditorView.editable.of(this.editable)) 
-				});
+				this.makeEditable(this.editable);
 			}
 		}
 	}
 
+	makeEditable(editable: boolean) {
+		this.view.dispatch({ 
+			effects: this.editableCompartment.reconfigure(EditorView.editable.of(editable)) 
+		});
+	}
+	
 
 	isMobile: boolean = false;
 	version?: string = "6.x" ;

src/assets/js/codeMirrorProxy.ts

@@ -169,6 +169,7 @@ export class KatexInputHelper implements IKatexInputHelper {
 	sidemenuData: any = { };
 	customEquationsToggler = null;
 	unicodeToggler = null;
+	cursorAtInsertionPoint = false;
 
 	/**
 	 * Constructor
@@ -285,7 +286,8 @@ export class KatexInputHelper implements IKatexInputHelper {
 	}
 
 	/**
-	 * A Prefetch cycle to load the required HTML document.
+	 * A Prefetch cycle to load the required HTML document. The intent is to 
+	 * load the mobile or desktop version depending on configuration.
 	 * 
 	 * @returns true, if a document could be loaded
 	 */
@@ -334,6 +336,14 @@ export class KatexInputHelper implements IKatexInputHelper {
 		this.codeMirrorEditor = this.math.codeMirror;			// lazy injection
 		console.debug(`Document check : ${document.URL}.`);
 
+		// TEST to set app window size
+		// This works but not on Android !!!
+		// TODO: make it work on Android and only Android
+		/*
+		const containerElement = window.frames.top.top.document.getElementsByClassName('user-webview-dialog')[0];
+		$(containerElement).css("--content-height", "80vh");
+		*/
+		
 		return true;
 	}
 
@@ -384,7 +394,9 @@ export class KatexInputHelper implements IKatexInputHelper {
 		this.themes.subscribe(this.onStyleChanged.bind(this));
 		await this.themes.initialiseThemeChoice(this.style, this.rtlStyle); // RTL STYLE defined after locale language
 
-		$('#myContainer').layout({fit: true});
+		if (!this.platformInfo.isMobile) {
+			$('#myContainer').layout({fit: true});
+		}
 		$('#innerLayout').layout({fit: true});
 		vme.endWait();
 	}
@@ -438,6 +450,7 @@ export class KatexInputHelper implements IKatexInputHelper {
 
 		// Intent: to restore original web page structure (required by Joplin plugin).
 		// Here: the viewport
+		// TODO: required?
 		const content = $("body meta[name='viewport']").attr('content');
 		if (content) {
 			const html = `<meta name="viewport" content="${content}" ></meta>`;
@@ -497,61 +510,13 @@ export class KatexInputHelper implements IKatexInputHelper {
 			$('#myContainer').panel({
 				fit: true,
 				onOpen: function() {
-					inst.codeMirrorEditor.focus();
-				}
-			});
-			
-			// I'm struggling with getting the correct initial display, but nothing works. 
-			/* This TRIAL also does not work: switch forth and back during program start.
-			let switchForth = true;
-			let switchBack = true;
-			$('#myContainer').panel({
-				fit: true, 
-				onOpen: function() {
-					if (switchForth) {
-						switchForth = false;
-						$.mobile.go('#eastRegion');
-					}
-				}
-			});
-			$('#eastRegion').panel({
-				fit: true, 
-				onOpen: function() {
-					if (switchBack && !switchForth) {
-						switchBack = false;
-						$.mobile.go('#myContainer');
-					}
+					inst.codeMirrorEditor.focus(!inst.cursorAtInsertionPoint);
+					inst.cursorAtInsertionPoint = false;
 				}
 			});
-			*/
-			
-			// RESERVED.
-			let height = getHeightFooter();
-			function heightChanged() {
-				const oldHeight = height;
-				const newHeight = getHeightFooter();
-				height = newHeight; 
-				return newHeight != oldHeight;
-			}
-			let cycle = 0;
-			const timerFunc = () => {
-				cycle ++;
-				if (heightChanged() || cycle >= 10) {
-					console.info(`Changed Footer Height : ${getHeightFooter()} after ${cycle} cycles yields ${getHeightCenterVh()}`);
-					
-					// Both solutions have no effect. Initial display does not display footer.
-					// NavPanel to large
-					//$('#myContainer').attr('style', { height: `${getHeightCenterVh()} !important` });
-					//$('#myContainer').navpanel('resize');
-					
-				} else {
-					setTimeout(timerFunc, 100);
-				}
-			}
 
 			defineProportions('#innerLayout', 'south', 50);
-			timerFunc();
-			
+						
 			this.sidemenuData = this.getSidemenuData();
 			console.log(`Sidemenu data : %O`, this.sidemenuData);
 			this.populateSidemenu(this.sidemenuData);
@@ -1125,7 +1090,8 @@ export class KatexInputHelper implements IKatexInputHelper {
 		pos.ch = pos.ch - a.length; 
 		this.codeMirrorEditor.setCursor(pos); 
 		if (this.menuupdateType) this.updateOutput(); 
-		this.setFocus();
+		this.setFocus();		
+		this.cursorAtInsertionPoint = true;				// used in mobile only
 	}
 
 	/**
@@ -1405,10 +1371,6 @@ export class KatexInputHelper implements IKatexInputHelper {
 			.join('/')
 			.replace(/ /g, '%20') + '/';			
 		}
-		// TEST CODE to check path OR mobile detection
-		// $('h3').text(bundlePath);
-		// let heading = $('h3').text();
-		// $('h3').text(`${heading} on ${this.mobile ? 'mobile' : 'desktop'} device`);
 
 		console.info(`Base location is : ${bundlePath}`);
 

src/assets/js/dialog.ts

@@ -195,7 +195,8 @@ class RegionToggler {
 		$(this.layout).layout('panel', this.firstRegion).panel('resize', { width: width });
 		$(this.layout).layout('resize');		
 
-		$(this.id).html(text);
+		text = ` ${text} `;
+		$(`${this.id} span`).html(text);
 		this.parent.localizer.notify();						// updates the tooltip text
 	}
 
@@ -284,7 +285,7 @@ class ContainerToggler {
 
 		$(this.uiId)
 		.css('display', this.active ? 'inline-block' : 'none');
-		$(this.btnId).html(this.active ? this.secondIcon : this.firstIcon);
+		$(`${this.btnId} span`).html(this.active ? this.secondIcon : this.firstIcon);
 		this.parent.localizer.notify();						// updates the tooltip text
 	}
 

src/assets/js/helpers.ts

@@ -60,7 +60,7 @@ export interface IMath {
 	insert(b: any) : void;
 	insertMath(text: string, element: any, multiple?: boolean, displayMode?: boolean) : void;
 	codeMirror: any;
-	setFocus() : void;
+	setFocus(disableKeyboard?: boolean) : void;
 	updateAnchor(a: any) : void;
 	updateTableAnchor(a: any) : void;
 	updateHeaders(selector: string) : void;
@@ -74,7 +74,7 @@ export interface ICodeMirror {
 	getSelection() : string;
 	setValue(val: string|ArrayBuffer) : void;
 	getValue() : string;
-	focus() : void;
+	focus(disableKeyboard?: boolean) : void;
 	refresh() : void;
 	lastLine() : number;
 	setCursor(cursor: any) : void;

src/assets/js/interfaces.ts

@@ -122,6 +122,11 @@
 	"TTREMOVECATEGORY": "استخدم أمر القائمة هذا لإزالة العقدة الطرفية (الفئة) وجميع المعادلات التابعة لها.",
 	"TTREMOVEFOLDER": "استخدم أمر القائمة هذا لإزالة عقدة المجلد (الفئة الفائقة) وجميع المعادلات والمجلدات الفرعية التابعة لها.",
 	"TTCUTPASTE": "استخدم أمر القائمة هذا لقص ولصق المعادلات من فئة إلى أخرى. للقيام بذلك، تحقق من المعادلات المطلوبة في شبكة البيانات واستدعاء هذا الأمر.",
+	"TTREGION_FIRST": "انقر للتبديل إلى عرض الفئات",
+	"TTREGION_SECOND": "انقر للتبديل إلى عرض المعادلات",
+	"TTREGION_BOTH": "انقر للتبديل إلى عرض كل من: الفئات والمعادلات",
+	"TTCONTAINER_ACTIVATE": "انقر لعرض نافذة قائمة يونيكود",
+	"TTCONTAINER_DEACTIVATE": "انقر لإخفاء نافذة قائمة يونيكود",
 
 	"RESET": "إعادة ضبط",
 	"RESET_WINDOW_POSITIONS": "مواضع النافذة",