Pre v2.0.1 commit

- fix context menu crash
- new easyui version
- adapt to mobile version

Author: Mick2nd

README.md

@@ -102,9 +102,16 @@ The custom equations dialog with categories tree
 **New features**
 
 - The language switcher is now equipped with country flags.
-- The functionality of this plug-in is now also available as [Web app](https://mick2nd.github.io/Katex-Input-Helper/index.html) hosted on Github.
-This can be used as Demo or to have a look at pre-published versions.
+- The functionality of this plug-in is now also available as [Web app](https://mick2nd.github.io/Katex-Input-Helper/index.html) 
+hosted on Github. This can be used as Demo or to have a look at pre-published versions. 
+It's also running on mobile devices.
 - Made the production version working hereby reducing the size of the plug-in.
+- The browser version (see above) is also adapted for mobile devices.
+
+**Bug fixes**
+
+- The context menus crashed on the trial to invoke and click them. A workaround helps here.
+But this is not fully satisfying as you might see.
 
 ### 2.0.0
 

package-lock.json

@@ -13,7 +13,7 @@
     "build-assets-prod": "webpack --config webpack.assets.config.js --env kihmode=production",
     "serve": "webpack serve --config webpack.assets.config.js",
     "stop-serve": "npx kill-port 9000",
-    "deploy": "webpack --config webpack.assets.config.js --env ghpages && gh-pages -d dist/assets"
+    "deploy": "webpack --config webpack.assets.config.js --env ghpages --env kihmode=production && gh-pages -d dist/assets"
   },
   "license": "MIT",
   "keywords": [
@@ -45,9 +45,11 @@
     "inversify": "^7.5.1",
     "jest": "^29.7.0",
     "jquery": "^3.7.1",
+    "jquery-contextmenu": "^2.9.2",
     "json-loader": "^0.5.7",
     "katex": "^0.16.22",
     "mini-css-extract-plugin": "^2.9.2",
+    "node-device-detector": "^2.2.2",
     "path": "^0.12.7",
     "raw-loader": "^4.0.2",
     "style-loader": "^4.0.0",

package.json

@@ -41,7 +41,7 @@ <h3>Katex Input Helper</h3>
 
 				<div id="menu">				
 					<a class="easyui-menubutton" data-options="iconCls:'icon-file',menu:'#mFILE'"><span locate="FILE"></span></a> 
-					<a class="easyui-menubutton" data-options="iconCls:'icon-insert',menu:'#mINSERT'"><span locate="INSERT"></span></a> 
+					<a id="mbINSERT" class="easyui-menubutton" data-options="iconCls:'icon-insert',menu:'#mINSERT'"><span locate="INSERT"></span></a> 
 					<a class="easyui-menubutton" data-options="iconCls:'icon-plugin',menu:'#mTOOLS'"><span locate="TOOLS"></span> </a>
 					<a class="easyui-menubutton" data-options="iconCls:'icon-watch',menu:'#mVIEW'"><span locate="VIEW"></span></a> 
 					<a class="easyui-menubutton" data-options="iconCls:'icon-option',menu:'#mOPTIONS'"><span locate="OPTIONS"></span></a> 
@@ -58,7 +58,7 @@ <h3>Katex Input Helper</h3>
 					</div>
 					<input type="file" id="fOPEN_EQUATION" style="display: none" />
 				</div>
-				<div id="mINSERT" class="easyui-menu menus">
+				<div id="mINSERT" class="menus">
 					<div iconcls="icon-char" id="mCHARS">
 						<span class='rtl-menu-item' locate="CHAR"></span>
 						<div style="width: 200px;">
@@ -259,8 +259,9 @@ <h3>Katex Input Helper</h3>
 						id="f_SUM_PROD_SYMBOLS"></div>
 
 					<!-- THIS MAY CAUSE FILE NOT FOUND : replacement see below
-					<div title="<span information='MATRIX_SYMBOLS' class='rtl-title-withicon'><img class='symbol_btn icon-matrix_13_black' src='jquery-easyui/themes/default/images/blank.gif' width='15' height='20' />  &nbsp;&nbsp; 
-						<img class='symbol_btn icon-matrix_33_black' src='js/jquery-easyui/themes/default/images/blank.gif' width='15' height='20' /></span>"
+					<div title="<span information='MATRIX_SYMBOLS' class='rtl-title-withicon'>
+						<img class='symbol_btn icon-matrix_13_black' src='./icons/blank.gif' width='15' height='20' />  &nbsp;&nbsp; 
+						<img class='symbol_btn icon-matrix_33_black' src='./icons/blank.gif' width='15' height='20' /></span>"
 						id="f_MATRIX_SYMBOLS">
 					</div>
 					 -->

src/assets/dialog.html

@@ -46,7 +46,7 @@
 <td><a href="#" class=s lbegin="\left\Updownarrow" lend="\right\Updownarrow ">$\left\Updownarrow□\right\Updownarrow$</a></td>
 </tr>
 <tr style="font-size:100%">
-<td><a href="#" class="more"><img src="icons/mini_add.png" width=15 height=20 /></a></td>
+<td><a href="#" class="more"><img src="icons/mini_add.png" /></a></td>
 <td colspan=4></td>
 </tr>
 </table>

src/assets/formulas/f_BRACKET_SYMBOLS.html

@@ -90,7 +90,22 @@ export class BootLoader {
 	 */
 	async setTimeoutAsync(delay) {
 		return this.promisify(setTimeout, delay);
-	}	
+	}
+	
+	/**
+	 * @abstract Checks if running device is mobile device.
+	 */
+	get isMobile() {
+		// Solution from Internet ... does not work
+		// Check for Samsung device ... good enough to detect Samsung Internet Browser
+		// var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+		// var mobile = /Samsung/i.test(navigator.userAgent);
+		// var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent)) || mobile ;
+		var mobile = 
+			navigator.userAgentData?.mobile || 
+			/mobi|ios|arm/i.test(navigator.platform); 
+		return mobile ? true : false;
+	}
 
 	/**
 	 * @abstract Initializes the app.
@@ -99,9 +114,9 @@ export class BootLoader {
 	 * 
 	 * @async implements the Promise contract
 	 */
-	async initApp(useEasyLoader) {
+	async initApp(mobile) {
 		try {
-			this.vme = new KatexInputHelper(useEasyLoader);
+			this.vme = new KatexInputHelper(mobile);
 			window.vme = this.vme;											// prevents garbage collection?
 			await this.vme.initialise();
 			$('#myContainer').layout({fit: true});
@@ -119,7 +134,15 @@ export class BootLoader {
 
 		this.katex = await import('katex/dist/katex');
 		await import('katex/dist/contrib/mhchem');
+		var mobile = this.isMobile;
 
+		if (mobile) {
+			var opts = { with: { 
+				type: 'css',
+			} };
+			await import('./jquery-easyui/jquery.easyui.mobile');
+			await import('./jquery-easyui/themes/mobile.css', opts);
+		}		
 		var counter = 20;
 		while (!this.presenceCheck(counter) && --counter >= 0) {
 			await this.setTimeoutAsync(100);
@@ -129,7 +152,7 @@ export class BootLoader {
 		await this.readyAsync();
 		console.debug('Promise check : document ready.');
 
-		await this.initApp(false);
+		await this.initApp(mobile);
 		console.debug('Promise check : app started.');
 		this.check();
 	}

src/assets/js/bootLoader.js

@@ -73,10 +73,10 @@ h3 {
 }
 
 #westRegion {
-	width: 210px;
+	width: 230px;
 
 	.easyui-accordion > div {
-		overflow: auto !important;
+		overflow: hidden !important;
 	}
 }
 
@@ -132,10 +132,10 @@ h3 {
 }
 
 #eastRegion {
-	width: 210px;
+	width: 250px;
 
 	.easyui-accordion > div {
-		overflow: auto !important;
+		overflow: hidden !important;
 	}
 }