torchv-translate 1.0.8 → 1.0.9

package/package.json

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

@@ -3080,6 +3080,19 @@ var translate = {
 					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，方便异常情况下清理
@@ -3310,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;
 	    	}
@@ -3541,6 +3561,7 @@ var translate = {
 					}
 					//处理等待同一文本的其他节点
 					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){
@@ -3562,8 +3583,12 @@ var translate = {
 							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);
+						}
 					}
 						//}
 						/*
@@ -3601,7 +3626,32 @@ var translate = {
 							}
 							var cacheHash = translate.nodeQueue[uuid]['list'][lang][splitHashes[ph]]['cacheHash'];
 							var pendingKey = translate.request.pending.key(lang, translate.to, cacheHash);
-							translate.request.pending.take(pendingKey);
+							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 = '';
@@ -9529,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);
 
@@ -9607,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');
@@ -9634,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:{
 		/* 要替换的图片队列，数组形态，其中某个数组的：
@@ -10094,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){
@@ -10138,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;
 				}
@@ -10170,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，对应的元素
@@ -10231,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);
 				    	
@@ -10247,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*/