i18n-jsautotranslate 3.12.9 → 3.13.0

package/README.md

@@ -148,16 +148,8 @@ translate.execute();//进行翻译
 [详细使用说明](https://translate.zvo.cn/4041.html) |  [Vue2 中使用 translate.js 在线 Demo](https://lruihao.github.io/vue-el-demo/#/translate-js)
 
 # 谁在使用
-截止 2023.7 月份时，本项目的后端免费翻译服务的请求量就已经达到了 1.5亿次/月 的规模，并且还在非常快速的持续增大，包括一些城投集团像是长沙城投、以及一些政府单位像是环境保障局、企业国际化经营服务平台、海外矿业产业联合、国际潮青联谊年会、人力资源和社会保障局、政务服务网、海外的一些平台如futrom智能住宅、bitheime全球区块链等等都在广泛使用。
-这里给出两个使用比较好的网站作为实际示例参考：
-  
-* [**RICE中国大米展**](https://www.cnrice.com.cn)
-* [**第十一届国际潮青联谊年会组委会**](http://ityc.org.cn)
-
-另外，很多开源框架及产品也都已将此翻译能力接入了自身系统，赋予自身系统多语言切换能力。
-
 
-## 这些开源产品已内置本功能
+开源项目：  
 * [管伊佳ERP](https://gitee.com/jishenghua/JSH_ERP) 国产开源ERP系统关注度第一，专注进销存、生产、总账
 * [FixIt](https://github.com/hugo-fixit/cmpt-translate) 一款简洁、优雅且先进的Hugo 博客主题
 * [Z-Blog](https://app.zblogcn.com/?id=49226) 易用的博客程序，功能丰富，模板多样，助轻松搭建个性博客。
@@ -172,8 +164,22 @@ translate.execute();//进行翻译
 * [phpok cms](https://gitee.com/phpok/phpok) 极其自由的企业站程序，支持各种自定义配置。
 * [RPCMS](https://app.rpcms.cn/app/149.html) 轻量型php内容管理系统，小型、轻量，但功能丰富，可扩展性强。
 * [Masuit.MyBlogs](https://gitee.com/masuit/Masuit.MyBlogs) 高性能高安全性低占用的个人博客系统
+
 ...  
-如果您有开源项目，比如文档、cms、UI 框架、后台管理框架、等等，需要采用此进行多语言切换，欢迎喊我，无偿提供全程接入讨论及遇到的问题跟随优化，希望我们的开源项目能互相产生作用一起越来越好。如果你的项目在这个列表中没有，欢迎联系我说明，我给加入进去  
+  
+|   |   | | | | 
+| ------------ | ------------ |------------ |------------ |------------ | 
+|  高校 |  清华大学 | 北京理工大学 |  西苏格兰大学 | 中国美术学院 | 亚利桑那州立大学|  
+|  集团 |  中国一汽 | 京东 | 中兴 | 中国铁建 | 长城汽车 |    
+|  政务 |  湖北省人民检察院 | 云南省药品监督管理局 | 云南省机关事务管理局 | 香港一带一路研究院 | 曲靖市生态环境局 |    
+|  科研 |  国家生物信息中心 | 德国科工创新院 | 中科能研电力技术研究院 | 国家新能源汽车技术创新中心 | 北方华创 |  
+|  云厂商 |  指点云 | 每刻云 | 雨云 | DOGSSL | 多彩云 |  
+|  协会 |  中国国际环保展览会 | 国际研发方法协会 | 中国内燃机学会 | 深圳市智慧城市产业协会 | 山东省社会组织总会 |  
+|  平台 |  东盟 | ESG国际服务平台 | 安徽省外贸综合服务平台 | 湖南企业国际化经营服务平台 | 中亚采招网 | 
+
+...
+
+如果您有开源项目，比如文档、cms、UI 框架、后台管理框架、等等，需要采用此进行多语言切换，欢迎喊我，无偿提供全程接入讨论及遇到的问题跟随优化，希望我们的开源项目能互相产生作用一起越来越好。如果你的项目在这个列表中没有，欢迎联系我说明，我给加入进去。如果您不想出现在这里，也联系我，我给隐去。
 
 
 # 哪些能力

package/index.js

@@ -12,7 +12,7 @@ var translate = {
 	 * 格式：major.minor.patch.date
 	 */
 	// AUTO_VERSION_START
-	version: '3.12.9.20250116',
+	version: '3.13.0.20250124',
 	// AUTO_VERSION_END
 	/*
 		当前使用的版本，默认使用v2. 可使用 setUseVersion2(); 
@@ -179,7 +179,7 @@ var translate = {
 					document.getElementById('translateSelectLanguage').style.width = '94px';
 				}catch(e){ console.log(e);} 
 				*/
-			});
+			}, null);
 			
 			
 		}
@@ -1121,14 +1121,6 @@ var translate = {
 										//console.log("inProgressNodes -- 减去node length: "+translate.inProgressNodes.length+', text:'+ipnode.nodeValue);
 									}
 
-									//当前已经全部翻译并渲染完毕，则将其恢复到闲置状态，闲置状态则可以进行下一轮翻译。
-									if(translate.inProgressNodes.length == 0){
-										setTimeout(function(){
-											translate.state = 0;
-										}, 50);
-										//console.log('set translate.state = 0');
-									}
-									
 									break;
 								}
 							}
@@ -1233,8 +1225,8 @@ var translate = {
 	/*
 		当前状态，执行状态
 		0 空闲(或者执行翻译完毕)
-		10 扫描要翻译的node
-		20 ajax通过文本翻译接口开始请求，在发起ajax请求前，状态变为20，然后再发起ajax请求
+		10 扫描要翻译的node，并读取浏览器缓存的翻译内容进行渲染显示
+		20 浏览器缓存渲染完毕，ajax通过文本翻译接口开始请求，在发起ajax请求前，状态变为20，然后再发起ajax请求
 		至于翻译完毕后进行渲染，这个就不单独记录了，因为如果页面存在不同的语种，不同的语种是按照不同的请求来的，是多个异步同时进行的过程
 	*/
 	state:0,
@@ -1282,9 +1274,33 @@ var translate = {
 				console.log('警告， translate.waitingExecute.get 出现异常，quque已空，但还往外取。');
 				return null;
 			}
+		},
+		//当前 translate.translateRequest[uuid] 的是否已经全部执行完毕，这里单纯只是对 translate.translateRequest[uuid] 的进行判断，这里要在 translate.json 接口触发完并渲染完毕后触发，当然接口失败时也要触发
+		isAllExecuteFinish:function(uuid){
+			
+			for(var lang in translate.translateRequest[uuid]){
+				for(var i = 0; i<translate.translateRequest[uuid][lang].length; i++){
+					if(translate.translateRequest[uuid][lang][i].executeFinish == 0){
+						//这个还没执行完，那么直接退出，不在向后执行了
+						//console.log('uuid:'+uuid+'  lang:'+lang+'  executeFinish:0  time:'+translate.translateRequest[uuid][lang][i][addtime]);
+						
+						//这里要考虑进行时间判断
+
+						return;
+					}
+				}
+			}
+
+			//都执行完了，那么设置完毕
+			translate.state = 0;
+			translate.executeNumber++;
 		}
+
 	},
 	
+	//execute() 方法已经被执行过多少次了， 只有execute() 完全执行完，也就是界面渲染完毕后，它才会+1
+	executeNumber:0,
+
 	/*
 		执行翻译操作。翻译的是 nodeQueue 中的
 		docs 如果传入，那么翻译的只是传入的这个docs的。传入如 [document.getElementById('xxx'),document.getElementById('xxx'),...]
@@ -1801,6 +1817,7 @@ var translate = {
 		if(fanyiLangs.length == 0){
 			//没有需要翻译的，直接退出
 			translate.state = 0;
+			translate.executeNumber++;
 			return;
 		}
 		
@@ -1850,6 +1867,8 @@ var translate = {
 		//状态
 		translate.state = 20;
 
+
+
 		//进行掉接口翻译
 		for(var lang_index in fanyiLangs){ //一维数组，取语言
 			var lang = fanyiLangs[lang_index];
@@ -1858,6 +1877,7 @@ var translate = {
 			if(typeof(translateTextArray[lang]) == 'undefined' || translateTextArray[lang].length < 1){
 				console.log('异常,理论上不应该存在： typeof(translateTextArray[lang]) == \'undefined\' || translateTextArray[lang].length < 1');
 				translate.state = 0;
+				translate.executeNumber++;
 				return;
 			}
 
@@ -1867,11 +1887,21 @@ var translate = {
 				console.log(translateTextArray[lang][ttr_index])
 			}*/
 
+			//将需要请求翻译接口的加入到 translate.translateRequest 中
+			if(typeof(translate.translateRequest[uuid]) == 'undefined' || translate.translateRequest[uuid] == null){
+				translate.translateRequest[uuid] = {};
+			}
+			translate.translateRequest[uuid][lang] = {};
+			translate.translateRequest[uuid][lang].executeFinish = 0; //是否执行完毕，0是执行中， 1是执行完毕（不管是失败还是成功） 而且执行完毕是指ajax请求获得响应，并且dom渲染完成之后才算完毕。当然如果ajax接口失败那也是直接算完毕
+			translate.translateRequest[uuid][lang].addtime = Math.floor(Date.now() / 1000);
+
+
 			/*** 翻译开始 ***/
 			var url = translate.request.api.translate;
 			var data = {
 				from:lang,
 				to:translate.to,
+				lowercase:translate.whole.isEnableAll? '0':'1', //首字母大写
 				//text:JSON.stringify(translateTextArray[lang])
 				text:encodeURIComponent(JSON.stringify(translateTextArray[lang]))
 			};
@@ -1880,6 +1910,10 @@ var translate = {
 				//console.log(data); 
 				//console.log(translateTextArray[data.from]);
 				if(data.result == 0){
+					translate.translateRequest[uuid][lang].result = 2;
+					translate.translateRequest[uuid][lang].executeFinish = 1; //1是执行完毕
+					translate.translateRequest[uuid][lang].stoptime = Math.floor(Date.now() / 1000);
+					translate.waitingExecute.isAllExecuteFinish();
 					console.log('=======ERROR START=======');
 					console.log(translateTextArray[data.from]);
 					//console.log(encodeURIComponent(JSON.stringify(translateTextArray[data.from])));
@@ -1887,6 +1921,7 @@ var translate = {
 					console.log('response : '+data.info);
 					console.log('=======ERROR END  =======');
 					//translate.temp_executeFinishNumber++; //记录执行完的次数
+
 					return;
 				}
 				
@@ -1950,12 +1985,49 @@ var translate = {
 				task.execute(); //执行渲染任务
 				//translate.temp_executeFinishNumber++; //记录执行完的次数
 
+				translate.translateRequest[uuid][lang].result = 1;
+				translate.translateRequest[uuid][lang].executeFinish = 1; //1是执行完毕
+				translate.translateRequest[uuid][lang].stoptime = Math.floor(Date.now() / 1000);
+				translate.waitingExecute.isAllExecuteFinish();
+			}, function(xhr){
+				translate.translateRequest[uuid][lang].executeFinish = 1; //1是执行完毕
+				translate.translateRequest[uuid][lang].stoptime = Math.floor(Date.now() / 1000);
+				translate.translateRequest[uuid][lang].result = 3;
+				translate.waitingExecute.isAllExecuteFinish();
 			});
 			/*** 翻译end ***/
-
-			
 		}
 	},
+
+	/**
+	 * 翻译请求记录
+	 * 一维：key:uuid，也就是execute每次执行都会创建一个翻译队列，这个是翻译队列的唯一标识。  这个uuid跟 nodeQueue 的uuid是一样的
+	 * 		value:对象
+	 * 二维: 对象，包含：
+	 * 		from 存放的是要翻译的源语种，比如要讲简体中文翻译为英文，这里存放的就是 chinese_simplified
+	 * 		state 是否执行完毕，0是执行中， 1是执行完毕（不管是失败还是成功） 而且执行完毕是指ajax请求获得响应，并且dom渲染完成之后才算完毕。当然如果ajax接口失败那也是直接算完毕
+	 * 		addtime 这条数据加入到本数组的时间，也就是进行ajax请求开始那一刻的时间，10位时间戳
+	 * 		stoptime 执行完毕的时间，也就是state转为2那一刻的时间
+	 * 		result 执行结果， 0 是还没执行完，等待执行完， > 0 是执行完了有结果了，  
+	 * 												  1 是执行成功
+	 * 												  2 是接口有响应，也是200响应，但是接口响应的结果返回了错误，也就是返回了 {result:0, info:'...'}
+	 * 												  3 是接口不是200响应码
+	 * 
+	 */
+	translateRequest:{
+		/* 
+		uuid:[
+			'chinese_simplified':{
+				executeFinish:0,
+				addtime:150001111,
+				stoptime:150001111,
+				result:0
+			},
+			...
+		] 
+		*/
+	},
+
 	/*
 		将已成功翻译并渲染的node节点进行缓存记录
 		key: node节点的唯一标识符，通过 nodeuuid.uuid() 生成
@@ -3955,7 +4027,7 @@ var translate = {
 				translate.selectLanguageTag
 				translate.execute(); //执行翻译
 			}
-		});
+		}, null);
 	},
 	
 	util:{
@@ -4469,7 +4541,7 @@ var translate = {
 			 * @param data 请求的参数数据
 			 * @param func 请求完成的回调，传入如 function(data){ console.log(data); }
 			 */
-			translate:function(path, data, func){
+			translate:function(path, data, func, abnormalFunc){
 				var textArray = JSON.parse(decodeURIComponent(data.text));
 				let translateTextArray = translate.util.split(textArray, 48000);
 				//console.log(translateTextArray);
@@ -4544,10 +4616,7 @@ var translate = {
 							}
 							
 							func(d);
-						}, 'post', true, {'Authorization':'Bearer '+auth, 'Content-Type':'application/json'}, function(xhr){
-							console.log('---------error--------');
-							console.log('edge translate service error, http code : '+xhr.status + ', response text : '+xhr.responseText);
-						}, true);
+						}, 'post', true, {'Authorization':'Bearer '+auth, 'Content-Type':'application/json'}, abnormalFunc, true);
 						
 
 					}
@@ -4844,8 +4913,9 @@ var translate = {
 		 * 		}
 		 * 		
 		 * @param func 请求完成的回调，传入如 function(data){ console.log(data); }
+		 * @param abnormalFunc 响应异常所执行的方法，响应码不是200就会执行这个方法 ,传入如 function(xhr){}  另外这里的 xhr 会额外有个参数  xhr.requestURL 返回当前请求失败的url
 		 */
-		post:function(path, data, func){
+		post:function(path, data, func, abnormalFunc){
 			var headers = {
 				'content-type':'application/x-www-form-urlencoded',
 			};
@@ -4861,7 +4931,7 @@ var translate = {
 			//if(url.indexOf('edge') > -1 && path == translate.request.api.translate){
 			if(translate.service.name == 'client.edge'){	
 				if(path == translate.request.api.translate){
-					translate.service.edge.translate(path, data, func);
+					translate.service.edge.translate(path, data, func, abnormalFunc);
 					return;
 				}
 				if(path == translate.request.api.language){
@@ -4877,7 +4947,7 @@ var translate = {
 			}
 			// ------- edge end --------
 
-			this.send(path, data, func, 'post', true, headers, null, true);
+			this.send(path, data, func, 'post', true, headers, abnormalFunc, true);
 		},
 		/**
 		 * 发送请求
@@ -5096,7 +5166,7 @@ var translate = {
 				}
 
 				func(data);
-			});
+			}, null);
 		},
 		listener:{
 			minIntervalTime:800, // 两次触发的最小间隔时间，单位是毫秒，这里默认是800毫秒。最小填写时间为 200毫秒
@@ -5447,7 +5517,7 @@ var translate = {
 				curTooltipEle.style.top =selectionY+20+"px";
 				curTooltipEle.style.left = selectionX+50+"px" ;
 				curTooltipEle.style.display = "";
-			});
+			}, null);
 		},
 		start:function () {
 			//新建一个tooltip元素节点用于显示翻译
@@ -5618,6 +5688,22 @@ var nodeuuid = {
 		}
 		return uuid;
 	},
+	/*
+		开启远程调试能力，当你使用中遇到问题，需要向开源作者求助时，可以在你项目中主动调用这个方法，也就是 translate.enableRemoteDebug(); 即可启动远程调试能力
+		开源项目作者就可以对你当前出错的页面进行远程调试排查问题所在。当然前提是你的页面要保持别关闭。
+
+		这个能力是通过开源项目 https://github.com/HuolalaTech/page-spy-web 来实现的
+		
+	*/
+	enableRemoteDebug:function(){
+
+		/*
+
+			待同事实现
+		*/
+
+	}
+
 
 }
 console.log('------ translate.js ------\nTwo lines of js html automatic translation, page without change, no language configuration file, no API Key, SEO friendly! Open warehouse : https://github.com/xnx3/translate \n两行js实现html全自动翻译。 无需改动页面、无语言配置文件、无API Key、对SEO友好！完全开源，代码仓库：https://gitee.com/mail_osc/translate');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-jsautotranslate",
-  "version": "3.12.9",
+  "version": "3.13.0",
   "description": "Two lines of js realize automatic html translation. No need to change the page, no language configuration file, no API key, SEO friendly!",
   "main": "index.js",
   "scripts": {