torchv-translate 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torchv-translate",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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",
   "exports": {

package/translate.js/translate.js

@@ -2243,6 +2243,10 @@ var translate = {
 		translate.cancelVersion = translate.cancelVersion + 1;
 		//清空等待队列
 		translate.waitingExecute.clear();
+		//清空翻译请求去重缓存
+		if(typeof(translate.request) === 'object' && typeof(translate.request.pending) === 'object'){
+			translate.request.pending.clear();
+		}
 		//终止当前执行状态
 		translate.state = 0;
 		//中断未完成的翻译请求
@@ -2562,6 +2566,7 @@ var translate = {
 		var uuid = translate.util.uuid();
 		translate.time.log('创建uuid:'+uuid);
 		var executeCancelVersion = translate.cancelVersion;
+		var pendingKeysCreated = [];
 
 		//如果页面打开第一次使用，先判断缓存中有没有上次使用的语种，从缓存中取出
 		if(translate.to == null || translate.to == ''){
@@ -2977,12 +2982,12 @@ var translate = {
 				//console.log(originalWord);
 
 				//根据hash，判断本地是否有缓存了
-				var cacheHash = originalWord == translateText ? hash:translate.util.hash(translateText); //如果匹配到了自定义术语库，那翻译前的hash是被改变了
-				translate.nodeQueue[uuid]['list'][lang][hash]['cacheHash'] = cacheHash; //缓存的hash。 缓存时，其hash跟翻译的语言是完全对应的，缓存的hash就是翻译的语言转换来的
-				var cache = translate.storage.get('hash_'+translate.to+'_'+cacheHash);
-
-				//缓存是否有拿到具体缓存内容
-				if(cache != null && cache.length > 0){
+				var cacheHash = originalWord == translateText ? hash:translate.util.hash(translateText); //如果匹配到了自定义术语库，那翻译前的hash是被改变了
+				translate.nodeQueue[uuid]['list'][lang][hash]['cacheHash'] = cacheHash; //缓存的hash。 缓存时，其hash跟翻译的语言是完全对应的，缓存的hash就是翻译的语言转换来的
+				var cache = translate.storage.get('hash_'+translate.to+'_'+cacheHash);
+
+				//缓存是否有拿到具体缓存内容
+				if(cache != null && cache.length > 0){
 					for(var node_index = 0; node_index < translate.nodeQueue[uuid]['list'][lang][hash]['nodes'].length; node_index++){
 						//console.log(translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]);
 
@@ -3065,14 +3070,40 @@ var translate = {
 					}
 
 
-
-					continue;	//跳出，不用在传入下面的翻译接口了
-				}
-				
-				/*
-				//取出数组
-				var queueNodes = this.nodeQueue[lang][hash];
-				if(queueNodes.length > 0){
+
+					continue;	//跳出，不用在传入下面的翻译接口了
+				}
+
+				//避免虚拟滚动等场景重复请求：如果同一文本正在翻译中，则加入等待队列
+				if(typeof(translate.request) === 'object' && typeof(translate.request.pending) === 'object'){
+					var pendingKey = translate.request.pending.key(lang, translate.to, cacheHash);
+					var pendingItem = translate.request.pending.get(pendingKey);
+					if(pendingItem != null){
+						translate.request.pending.add(pendingKey, {uuid:uuid, lang:lang, hash:hash});
+						//加入loading提示
+						if(typeof(translate.progress) === 'object' && typeof(translate.progress.api) === 'object'){
+							if(translate.progress.api.autoStart && !translate.progress.api.use){
+								translate.progress.api.startUITip();
+							}
+							if(translate.progress.api.use){
+								var pendingNodes = [];
+								for(var pni = 0; pni < translate.nodeQueue[uuid]['list'][lang][hash]['nodes'].length; pni++){
+									pendingNodes.push(translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][pni].node);
+								}
+								translate.progress.api.applyLoadingByNodes(pendingNodes);
+							}
+						}
+						continue;
+					}
+					//记录本次创建的pending，方便异常情况下清理
+					translate.request.pending.add(pendingKey, {uuid:uuid, lang:lang, hash:hash});
+					pendingKeysCreated.push(pendingKey);
+				}
+				
+				/*
+				//取出数组
+				var queueNodes = this.nodeQueue[lang][hash];
+				if(queueNodes.length > 0){
 					//因为在这个数组中的值都是一样的，那么只需要取出第一个就行了
 					var valueStr = queueNodes[0].nodeValue;
 					valueStr = this.util.charReplace(valueStr);
@@ -3100,13 +3131,20 @@ var translate = {
 		//console.log(translateTextArray);
 		//return;
 
-		if(typeof(translate.request.api.translate) != 'string' || translate.request.api.translate == null || translate.request.api.translate.length < 1){
-			//用户已经设置了不掉翻译接口进行翻译
-			translate.state = 0;
-			
-			//生命周期触发事件
-			translate.lifecycle.execute.renderFinish_Trigger(uuid, translate.to);
-			translate.executeNumber++;
+		if(typeof(translate.request.api.translate) != 'string' || translate.request.api.translate == null || translate.request.api.translate.length < 1){
+			//用户已经设置了不掉翻译接口进行翻译
+			translate.state = 0;
+
+			//清理本次创建的pending记录
+			if(pendingKeysCreated.length > 0 && typeof(translate.request) === 'object' && typeof(translate.request.pending) === 'object'){
+				for(var pk = 0; pk < pendingKeysCreated.length; pk++){
+					translate.request.pending.take(pendingKeysCreated[pk]);
+				}
+			}
+			
+			//生命周期触发事件
+			translate.lifecycle.execute.renderFinish_Trigger(uuid, translate.to);
+			translate.executeNumber++;
 
 			//钩子
 			translate.lifecycle.execute.finally_Trigger({
@@ -3285,14 +3323,21 @@ var translate = {
 							texts: 当前网络请求有哪些文本进行翻译，值为 [text1, text2, ...]
 
 		*/
-		translate.request.data[uuid] = {
-			time:Date.now(),
-			list:{}
-		};
-
-
-		//进行掉接口翻译
-		for(var lang_index in fanyiLangs){ //一维数组，取语言
+		translate.request.data[uuid] = {
+			time:Date.now(),
+			list:{}
+		};
+
+		//自动启用翻译loading提示
+		if(typeof(translate.progress) === 'object' && typeof(translate.progress.api) === 'object'){
+			if(translate.progress.api.autoStart && !translate.progress.api.use){
+				translate.progress.api.startUITip();
+			}
+		}
+
+
+		//进行掉接口翻译
+		for(var lang_index in fanyiLangs){ //一维数组，取语言
 			if (!fanyiLangs.hasOwnProperty(lang_index)) {
 	    		continue;
 	    	}
@@ -3486,14 +3531,19 @@ var translate = {
 						}
 
 
-						//翻译前的hash对应下标
-						var hash = splitHashes[i];	
-						var cacheHash = translate.nodeQueue[uuid]['list'][lang][hash]['cacheHash'];
+					//翻译前的hash对应下标
+					var hash = splitHashes[i];	
+					var cacheHash = translate.nodeQueue[uuid]['list'][lang][hash]['cacheHash'];
+					var pendingItem = null;
+					if(typeof(translate.request) === 'object' && typeof(translate.request.pending) === 'object'){
+						var pendingKey = translate.request.pending.key(lang, responseData.to, cacheHash);
+						pendingItem = translate.request.pending.take(pendingKey);
+					}
 
 
-						
-						//取原始的词，还未经过翻译的，需要进行翻译的词
-						var originalWord = '';
+					
+					//取原始的词，还未经过翻译的，需要进行翻译的词
+					var originalWord = '';
 						try{
 							originalWord = translate.nodeQueue[uuid]['list'][lang][hash]['original'];
 							//console.log('bef:'+translate.nodeQueue[uuid]['list'][lang][hash]['beforeText']);
@@ -3504,11 +3554,42 @@ var translate = {
 						}
 						
 						//for(var index = 0; index < translate.nodeQueue[lang][hash].length; index++){
-						for(var node_index = 0; node_index < translate.nodeQueue[uuid]['list'][lang][hash]['nodes'].length; node_index++){
-							//translate.nodeQueue[lang][hash]['nodes'][node_index].nodeValue = translate.nodeQueue[lang][hash]['nodes'][node_index].nodeValue.replace(new RegExp(originalWord,'g'), text);
-							//加入任务
-							task.add(translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['node'], originalWord, translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['beforeText']+text+translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['afterText'], translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['attribute']);
+					for(var node_index = 0; node_index < translate.nodeQueue[uuid]['list'][lang][hash]['nodes'].length; node_index++){
+						//translate.nodeQueue[lang][hash]['nodes'][node_index].nodeValue = translate.nodeQueue[lang][hash]['nodes'][node_index].nodeValue.replace(new RegExp(originalWord,'g'), text);
+						//加入任务
+						task.add(translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['node'], originalWord, translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['beforeText']+text+translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['afterText'], translate.nodeQueue[uuid]['list'][lang][hash]['nodes'][node_index]['attribute']);
+					}
+					//处理等待同一文本的其他节点
+					if(pendingItem != null && typeof(pendingItem.waits) === 'object'){
+						var waitLoadingNodes = [];
+						for(var wi = 0; wi < pendingItem.waits.length; wi++){
+							var waitItem = pendingItem.waits[wi];
+							if(waitItem.uuid === uuid && waitItem.lang === lang && waitItem.hash === hash){
+								continue;
+							}
+							if(typeof(translate.nodeQueue[waitItem.uuid]) === 'undefined'){
+								continue;
+							}
+							if(typeof(translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang]) === 'undefined'){
+								continue;
+							}
+							if(typeof(translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang][waitItem.hash]) === 'undefined'){
+								continue;
+							}
+							var waitQueue = translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang][waitItem.hash];
+							if(typeof(waitQueue) === 'undefined' || typeof(waitQueue.nodes) === 'undefined'){
+								continue;
+							}
+							var waitOriginal = waitQueue.original;
+							for(var wni = 0; wni < waitQueue.nodes.length; wni++){
+								task.add(waitQueue.nodes[wni]['node'], waitOriginal, waitQueue.nodes[wni]['beforeText']+text+waitQueue.nodes[wni]['afterText'], waitQueue.nodes[wni]['attribute']);
+								waitLoadingNodes.push(waitQueue.nodes[wni]['node']);
+							}
 						}
+						if(waitLoadingNodes.length > 0 && typeof(translate.progress) === 'object' && typeof(translate.progress.api) === 'object' && translate.progress.api.use){
+							translate.progress.api.removeLoadingByNodes(waitLoadingNodes);
+						}
+					}
 						//}
 						/*
 						for(var index = 0; index < translate.nodeQueue[data.from][hash].length; index++){
@@ -3531,6 +3612,48 @@ var translate = {
 					if(translate.cancelVersion != executeCancelVersion){
 						return;
 					}
+					//请求异常，清理pending，允许后续重试
+					if(typeof(translate.request) === 'object' && typeof(translate.request.pending) === 'object'){
+						for(var ph = 0; ph < splitHashes.length; ph++){
+							if(typeof(translate.nodeQueue[uuid]) === 'undefined'){
+								break;
+							}
+							if(typeof(translate.nodeQueue[uuid]['list'][lang]) === 'undefined'){
+								break;
+							}
+							if(typeof(translate.nodeQueue[uuid]['list'][lang][splitHashes[ph]]) === 'undefined'){
+								continue;
+							}
+							var cacheHash = translate.nodeQueue[uuid]['list'][lang][splitHashes[ph]]['cacheHash'];
+							var pendingKey = translate.request.pending.key(lang, translate.to, cacheHash);
+							var pendingItem = translate.request.pending.take(pendingKey);
+							if(pendingItem != null && typeof(pendingItem.waits) === 'object' && typeof(translate.progress) === 'object' && typeof(translate.progress.api) === 'object' && translate.progress.api.use){
+								var waitNodes = [];
+								for(var wi = 0; wi < pendingItem.waits.length; wi++){
+									var waitItem = pendingItem.waits[wi];
+									if(typeof(translate.nodeQueue[waitItem.uuid]) === 'undefined'){
+										continue;
+									}
+									if(typeof(translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang]) === 'undefined'){
+										continue;
+									}
+									if(typeof(translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang][waitItem.hash]) === 'undefined'){
+										continue;
+									}
+									var waitQueue = translate.nodeQueue[waitItem.uuid]['list'][waitItem.lang][waitItem.hash];
+									if(typeof(waitQueue) === 'undefined' || typeof(waitQueue.nodes) === 'undefined'){
+										continue;
+									}
+									for(var wni = 0; wni < waitQueue.nodes.length; wni++){
+										waitNodes.push(waitQueue.nodes[wni]['node']);
+									}
+								}
+								if(waitNodes.length > 0){
+									translate.progress.api.removeLoadingByNodes(waitNodes);
+								}
+							}
+						}
+					}
 					var info = '';
 					if(typeof(xhr.status) != 'undefined'){
 						if(xhr.status < 1){
@@ -8291,6 +8414,49 @@ var translate = {
 			//单条文本达到该长度后单独成组，避免与其它文本拼接，0则使用 size/2
 			singleTextMinSize:0
 		},
+		/*
+			翻译请求去重（处理中）
+		*/
+		pending:{
+			map:new Map(),
+			key:function(from, to, cacheHash){
+				return from+'|'+to+'|'+cacheHash;
+			},
+			get:function(key){
+				if(this.map == null){
+					this.map = new Map();
+				}
+				return this.map.get(key) || null;
+			},
+			add:function(key, waitItem){
+				if(this.map == null){
+					this.map = new Map();
+				}
+				var item = this.map.get(key);
+				if(item == null){
+					item = {waits:[]};
+					this.map.set(key, item);
+				}
+				if(waitItem != null){
+					item.waits.push(waitItem);
+				}
+				return item;
+			},
+			take:function(key){
+				if(this.map == null){
+					this.map = new Map();
+					return null;
+				}
+				var item = this.map.get(key) || null;
+				if(item != null){
+					this.map.delete(key);
+				}
+				return item;
+			},
+			clear:function(){
+				this.map = new Map();
+			}
+		},
 		/*
 			将翻译文本数组拆分为多个请求，避免一次请求过大导致超时
 			注意：不会拆分单条文本，避免破坏段落/语义
@@ -9413,19 +9579,33 @@ var translate = {
 			
 		}
 	},
-	//存储，本地缓存
-	storage:{
-		/*js translate.storage.IndexedDB start*/
-		//对浏览器的 IndexedDB 操作
-		IndexedDB:{
-			db: null,
-			// 初始化数据库
-			initDB: function () {
-				const self = this;
-				return new Promise((resolve, reject) => {
-					const DB_NAME = 'translate.js';
-					const STORE_NAME = 'kvStore';
-					const DB_VERSION = 1;
+	//存储，本地缓存
+	storage:{
+		//是否启用 IndexedDB 作为额外持久化缓存（默认启用）
+		useIndexedDB:true,
+		//IndexedDB 的内存级缓存，避免频繁异步回填
+		indexedDBCache:new Map(),
+		//IndexedDB 读取中的 key，避免重复请求
+		indexedDBCachePending:new Map(),
+		//设置是否启用 IndexedDB 缓存
+		setUseIndexedDB:function(use){
+			translate.storage.useIndexedDB = use ? true : false;
+		},
+		/*js translate.storage.IndexedDB start*/
+		//对浏览器的 IndexedDB 操作
+		IndexedDB:{
+			db: null,
+			// 初始化数据库
+			initDB: function () {
+				const self = this;
+				return new Promise((resolve, reject) => {
+					if(typeof(indexedDB) == 'undefined'){
+						reject('IndexedDB not supported');
+						return;
+					}
+					const DB_NAME = 'translate.js';
+					const STORE_NAME = 'kvStore';
+					const DB_VERSION = 1;
 
 					const request = indexedDB.open(DB_NAME, DB_VERSION);
 
@@ -9491,8 +9671,8 @@ var translate = {
 					const users = await translate.storage.IndexedDB.list("*us*r*");
 					其中传入的key可以模糊搜索，其中的 * 标识另个或多个
 			*/
-			list: async function (key = '') {
-				if (!this.db) await this.initDB();
+			list: async function (key = '') {
+				if (!this.db) await this.initDB();
 
 				return new Promise((resolve, reject) => {
 					const tx = this.db.transaction('kvStore', 'readonly');
@@ -9518,18 +9698,68 @@ var translate = {
 
 					request.onerror = () => reject('游标读取失败');
 				});
-			}
-		},
-		/*js translate.storage.IndexedDB end*/
-
-		set:function(key,value){
-			localStorage.setItem(key,value);
-		},
-		get:function(key){
-			return localStorage.getItem(key);
-		}
-
-	},
+			}
+		},
+		/*js translate.storage.IndexedDB end*/
+
+		set:function(key,value){
+			try{
+				localStorage.setItem(key,value);
+			}catch(e){}
+			if(translate.storage.useIndexedDB && typeof(indexedDB) != 'undefined'){
+				try{
+					if(translate.storage.indexedDBCache instanceof Map){
+						translate.storage.indexedDBCache.set(key, value);
+					}
+					translate.storage.IndexedDB.set(key, value);
+				}catch(e){}
+			}
+		},
+		get:function(key){
+			var value = null;
+			try{
+				value = localStorage.getItem(key);
+			}catch(e){
+				value = null;
+			}
+			if(value != null){
+				return value;
+			}
+
+			//尝试从 IndexedDB 读取并回填（异步）
+			if(translate.storage.useIndexedDB && typeof(indexedDB) != 'undefined'){
+				if(translate.storage.indexedDBCache instanceof Map && translate.storage.indexedDBCache.has(key)){
+					return translate.storage.indexedDBCache.get(key);
+				}
+				if(translate.storage.indexedDBCachePending instanceof Map && translate.storage.indexedDBCachePending.has(key)){
+					return value;
+				}
+				if(translate.storage.indexedDBCachePending instanceof Map){
+					translate.storage.indexedDBCachePending.set(key, 1);
+				}
+				translate.storage.IndexedDB.get(key).then(function(v){
+					if(translate.storage.indexedDBCachePending instanceof Map){
+						translate.storage.indexedDBCachePending.delete(key);
+					}
+					if(typeof(v) == 'undefined' || v == null){
+						return;
+					}
+					try{
+						localStorage.setItem(key, v);
+					}catch(e){}
+					if(translate.storage.indexedDBCache instanceof Map){
+						translate.storage.indexedDBCache.set(key, v);
+					}
+				}).catch(function(){
+					if(translate.storage.indexedDBCachePending instanceof Map){
+						translate.storage.indexedDBCachePending.delete(key);
+					}
+				});
+			}
+			return value;
+		}
+
+	},
 	//针对图片进行相关的语种图片替换
 	images:{
 		/* 要替换的图片队列，数组形态，其中某个数组的：
@@ -9978,12 +10208,13 @@ var translate = {
 		/*
 			通过文本翻译API进行的
 		 */
-		api:{
-			isTip:true,//是否显示ui的提示，true显示，false不显示
-			use: false, //默认不使用，translate.progress.api.startUITip(); 可以设置为启用
-			setUITip:function(tip){
-				translate.progress.api.isTip = tip;
-			},
+		api:{
+			isTip:true,//是否显示ui的提示，true显示，false不显示
+			use: false, //默认不使用，translate.progress.api.startUITip(); 可以设置为启用
+			autoStart:true, //是否在触发翻译时自动启用loading
+			setUITip:function(tip){
+				translate.progress.api.isTip = tip;
+			},
 			//移除子元素（无限级别）中的所有 class name 的loading 遮罩
 			//level 层级，数字，比如第一次调用，传入1， 第一次里面产生的第二次调用，这里就是2
 			removeChildClass:function(node, level){
@@ -10022,12 +10253,15 @@ var translate = {
 
 				
 			*/
-			startUITip:function(config){
-				translate.progress.api.use = true;
-
-				if(typeof(config) === 'undefined'){
-					config = {};
-				}
+			startUITip:function(config){
+				if(translate.progress.api.use){
+					return;
+				}
+				translate.progress.api.use = true;
+
+				if(typeof(config) === 'undefined'){
+					config = {};
+				}
 				if(typeof(config.maskLayerMinWidth) !== 'number'){
 					config.maskLayerMinWidth = 10;
 				}
@@ -10054,10 +10288,10 @@ var translate = {
 			        document.head.appendChild(style);
 				}
 		        
-
-				if(translate.progress.api.isTip){
-					//translate.listener.execute.renderStartByApi.push(function(uuid, from, to){
-					translate.lifecycle.execute.translateNetworkBefore.push(function(data){
+
+				if(translate.progress.api.isTip){
+					//translate.listener.execute.renderStartByApi.push(function(uuid, from, to){
+					translate.lifecycle.execute.translateNetworkBefore.push(function(data){
 						var startTime = new Date().getTime();
 
 						//取出当前变动的node，对应的元素
@@ -10115,7 +10349,7 @@ var translate = {
 						//console.log('计算+渲染耗时：'+(new Date().getTime() - startTime));
 					});
 					
-					translate.lifecycle.execute.translateNetworkAfter.push(function(data){
+					translate.lifecycle.execute.translateNetworkAfter.push(function(data){
 						//取出当前变动的node，对应的元素
 						var elements = translate.element.nodeToElement(data.nodes);
 				    	
@@ -10131,12 +10365,48 @@ var translate = {
 				    	}
 						
 						
-					});
-
-				}
-			}
-		}
-	},
+					});
+
+				}
+			},
+			//对指定nodes应用loading样式
+			applyLoadingByNodes:function(nodes){
+				if(typeof(nodes) == 'undefined' || nodes == null || nodes.length < 1){
+					return;
+				}
+				var elements = translate.element.nodeToElement(nodes);
+				for(var r = 0; r<elements.length; r++){
+					if(typeof(elements[r].className) !== 'string'){
+						continue;
+					}
+					if(elements[r].className.indexOf('translate_api_in_progress') < 0){
+						elements[r].className = elements[r].className+' translate_api_in_progress';
+					}
+					if(translate.progress.api.isTip && elements[r].className.indexOf('translatejs-text-element-hidden') < 0){
+						elements[r].className = elements[r].className+' translatejs-text-element-hidden';
+					}
+				}
+			},
+			//移除指定nodes的loading样式
+			removeLoadingByNodes:function(nodes){
+				if(typeof(nodes) == 'undefined' || nodes == null || nodes.length < 1){
+					return;
+				}
+				var elements = translate.element.nodeToElement(nodes);
+				for(var r = 0; r<elements.length; r++){
+					if(typeof(elements[r].className) !== 'string'){
+						continue;
+					}
+					if(elements[r].className.indexOf('translate_api_in_progress') > -1){
+						elements[r].className = elements[r].className.replace(/translate_api_in_progress/g, '');
+					}
+					if(elements[r].className.indexOf('translatejs-text-element-hidden') > -1){
+						elements[r].className = elements[r].className.replace(/translatejs-text-element-hidden/g, '');
+					}
+				}
+			}
+		}
+	},
 	/*js translate.progress end*/
 
 	/*js dispose start*/