ss_new_ui_skin_and_page/ss/pizhu/pizhu-assist.js

console.info("assist");
// 用于记录那个录音图标正在播放
var audioId = null;
// 获取焦点
function getRange() {
	var selection = window.getSelection ? window.getSelection() :
		document.selection;
	var range = selection.createRange ? selection.createRange() : selection
		.getRangeAt(0);
	return range;
}

function saveHtml(id) {
	var html = $('#displayArea').html();
	$
		.ajax({
			type: "POST",
			url: "/service?wdService=savePiZhuNrHtml&wdtest=false",
			data: {
				'id': id,
				'html': html
			},
			async: false,
			dataType: "json",
			error: function () {
				// alert('fail');
			}
		});
}

function saveEditor(divId) {
	var element = $("#" + divId).find('#displayArea')[0];
	var html = $("#" + divId).find('#displayArea').html();
	var id = element.getAttribute('nrid');
	$.ajax({
		type: "POST",
		url: "/service?wdService=savePiZhuNrHtml&wdtest=false",
		data: {
			'id': id,
			'html': html
		},
		async: false,
		dataType: "json",
		error: function () {
			// alert('fail');
		}
	});
}

function addToDisplayArea(item) {
	$('#displayArea').focus();
	var range = getRange();
	range.insertNode(item);
	range.setStartAfter(item);
	// 为图片添加click事件
	// imageClick();
	// 为div添加ondragstart事件
	addDivDragStart();
	// 重新fouse
	cursorManager.setEndOfRange(range);
}
// 根据src创建一个图片
function createImage(src) {
	var img = new Image();
	$(img).addClass('item');
	img.src = src;
	return img;
}
// 1、为书写状态添加img
function addWritingImage(draw) {
	var canvas = draw.canvas;
	var img = createImage(canvas.toDataURL());
	draw.erase();
	draw.isDraw = false;
	addToDisplayArea(img);
}

function addRecorderImage(index) {
	var img = createImage('/nr/image/py/mobileIcon-voiceMsg.png');
	$(img).addClass('audio');
	$(img).data('index', index);
	// 新增音频内容到服务器中
	addToService(index, img, id);
	// 为div添加图标
	addToDisplayArea(img);
	// 为录音图标添加事件
	addAudioEvent('.audio');
}
// 将数据上传到服务器,index用于命名,img用于为该元素添加属性
function addToService(index, img, id) {
	console.info("进入");
	var fd = new FormData();
	fd.append("audioData", recorders[index].getBlob());
	fd.append('parentId', id);
	fd.append('index', index);
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4 && xhr.status == 200) {
			console.info(xhr.responseText);
			var result = JSON.parse(xhr.responseText);
			if (result['result']) {
				$(img).attr('data-id', result['id']);
			}
		}
	}
	xhr
		.open(
		"POST",
		"/service?wdService=uploadWAV&wdtest=false",
		false);
	xhr.send(fd);
	console.info("离开");
}
// 为音频图标添加点击事件
function addAudioEvent(selector) {
	$(selector).on('click', function (event) {
		var target = event.target;
		var playFlag = $(event.target).data('palyFlag');
		//播放器
		var audio = document.getElementById('player');
		if (playFlag == null || '' == playFlag || 'stoping' == playFlag) {
			//播放内容的index
			var index = $(target).data('index');
			if (index != audioId) {
				audio = null;
			}
			$(event.target).data('palyFlag', 'playing');
			event.target.src = 'nr/image/py/mobileIcon-playVoice.gif';
			//audio == null证明需要重新播放录音
			if (audio == null) {
				audio = document.getElementById('player');
				/* 设置audio的url */
				playRecording(index);
			} else { //继续播放audio中的内容
				audio.play();
			}
			/* 为audio添加结束事件 */
			$(audio).on('ended', function (e) {
				$(target).data('palyFlag', 'stoping');
				target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
				audio = null;
				audioId = null;
			});
		} else {
			event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
			audio.pause();
			$(target).data('palyFlag', 'stoping');
			audioId = $(target).data('index');
		}
	})
}
// 2、为canvas添加mousedown和mouseup事件
// 如果鼠标离开该canvas且该该画板有书写内容，调用createImage方法
function canvasAddEvent(draw) {
	$(draw.canvas).on('mousedown', function (event) {
		if (draw.timeoutObject) {

			clearTimeout(draw.timeoutObject);
		}
	});
	$(draw.canvas).on('mouseup', function (event) {
		if (draw.isDraw) {

			var timeoutObject = setTimeout(_addWritingImage(draw), 1000);
			draw.timeoutObject = timeoutObject;
		}
	});
	$(draw.canvas).bind('touchstart', function (event) {
		if (draw.timeoutObject) {

			clearTimeout(draw.timeoutObject);
		}
	});
	$(draw.canvas).bind('touchend', function (event) {
		if (draw.isDraw) {

			var timeoutObject = setTimeout(_addWritingImage(draw), 1000);
			draw.timeoutObject = timeoutObject;
		}
	});
}
// setTimeout使用的闭包
function _addWritingImage(draw) {
	return function () {
		addWritingImage(draw);
	}
}
function GetUrlRelativePath(url) {
	var url = url;
	var arrUrl = url.split("//");

	var start = arrUrl[1].indexOf("/");
	var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

	// if (relUrl.indexOf("?") != -1) {
	// 	relUrl = relUrl.split("?")[0];
	// }
	return relUrl;
}
function pizhuInit(id,resDesign) {
	// 1、加载displayArea
	$('#displayArea')
		.load("/service?wdService=getCommonNrDataFile&wdtest=false&id=" + id,
		null,
		function () {
			console.log("pizhuInit");
			console.log(resDesign);
			//显示音频数据
			if(resDesign.privateData&&resDesign.privateData.children){
				for(var i=0;i<resDesign.privateData.children.length;i++){
					var childData=resDesign.privateData.children[i];
					$('#displayArea').append("<div class=\"audio\" data-id=\""+childData.ID+"\"></div>");
				}
			}
			
			
			
			var audios = document.querySelectorAll('.audio');
			//初始化样式
			$('#displayArea > .audio').addClass('vLine-dashed');
			$('#displayArea > .audio').removeClass("mobileIcon-voiceMsg").addClass("icon-voiceMsg");
			$('#displayArea > .audio').removeClass("mobileIcon-playVoice").addClass("icon-voiceMsg");
			$('#displayArea > .audio').removeClass("icon-playVoice").addClass("icon-voiceMsg");
			$('#displayArea > .audio').removeClass("icon-pauseVoice").addClass("icon-voiceMsg");
			if (audios.length > 0) {
				$(".audio-box").show();
				var nowTime = $(".nowTime");
				var audioE = $("#audioE");
				var drag = false;
				var startX = 0;
				var startmoveOffsetX = 0;
				var moveingOffsetX = 0;
				var endmoveOoffsetX = 0;
				var doneW = 0;
				var doneLeft = 0;
				var progressW = 0;
				var nowTimeLeft = 0;
				var nowTimeW = parseFloat($(".nowTime").width());
				console.log("nowTimeW---" + nowTimeW);
				var duration = 0;
				var doneWP = 0;
				var imgItemIndex = 0;
				var initAudio = function () {
					var url = null;
					var id = $('#displayArea > .audio').eq(0).attr('data-id');
					/* 获取url */
					$.ajax({
						type: "POST",
						url: "/service?wdService=getCommonNrDataFilePath&wdtest=false",
						data: {
							'id': id
						},
						async: false,
						success: function (data) {
							url = data;
						},
						error: function () {
							console.info('fail');
						}
					});
					audioE.get(0).src = '/service?wdService=getData&wdtest=false&path=' + url;
				}
				initAudio();
				//设置时间
				var setTime = function (timelong, domElement) {
					var m = Math.floor(timelong / 60);
					if (m < 10) {
						m = "0" + m;
					}
					var s = Math.floor(timelong % 60);
					if (s < 10) {
						s = "0" + s;
					}
					var timeStr = m + ":" + s;

					$("." + domElement).html(timeStr);
				}

				//设置nowTime位置
				var setnowTimeLeft = function (setClassName, left) {
					var audioBoxLeft = $(".audio-box").offset().left;
					left = parseFloat(left - audioBoxLeft);
					$("." + setClassName).css({
						"left": left + "px"
					})
				}
				// $('#displayArea').css("display","block");
				// $('#displayArea').css("background","#fff");
				// $('#displayArea > .item').css("height","50px");
				// $('#displayArea > .item').css("width","50px");
				// $('#displayArea > .item').css("margin","0px");
				// $('#displayArea > .item').css("border","solid 0px #CCCCCC");
				// 2、为音频图标添加事件
				$('#displayArea > .audio').on('click', function (event) {
					imgItemIndex = $(this).index();
					var target = event.target;
					/* 变换图片 */
					// var playFlag = $(event.target).data('palyFlag');
					// console.log("playFlag:"+playFlag);
					// 播放器
					// var audio = document.getElementById('player');
					// if (playFlag == null || '' == playFlag || 'stoping' == playFlag) {
					if ($(this).hasClass('icon-voiceMsg')||$(this).hasClass('icon-pauseVoice')) {
						var id = $(event.target).attr('data-id');
						if (id != audioId) {
							audio = null;
						}
						// $(event.target).data('palyFlag', 'playing');
						$('#displayArea > .audio').each(function () {
							if ($(this).hasClass('icon-playVoice')||$(this).hasClass('icon-pauseVoice')) {
								$(this).addClass('icon-voiceMsg').removeClass('icon-pauseVoice').removeClass('icon-playVoice');
							}
						});
						$(event.target).removeClass('icon-pauseVoice').removeClass("icon-voiceMsg").addClass("icon-playVoice");
						// event.target.src = 'nr/image/py/mobileIcon-playVoice.gif';
						var url = null;
						/* 获取url */
						$.ajax({
							type: "POST",
							url: "/service?wdService=getCommonNrDataFilePath&wdtest=false",
							data: {
								'id': id
							},
							async: false,
							success: function (data) {
								url = data;
							},
							error: function () {
								console.info('fail');
							}
						});
						if (GetUrlRelativePath(audioE.get(0).src) != '/service?wdService=getData&wdtest=false&path=' + url) {
							audioE.get(0).src = '/service?wdService=getData&wdtest=false&path=' + url;
						}
						if ($(".control-button").hasClass('icon-play')) {
							$(".control-button").removeClass('icon-play').addClass('icon-pause');
						}
						audioE.get(0).play();
						// if (audioE == null) {
						// 	audio = document.getElementById('player');
						// 	/* 设置audio的url */
						// 	audio.src = '/service?wdService=getData&wdtest=false&path=' + url;
						// 	audio.onloadedmetadata = function (e) {
						// 		audio.play();
						// 	};
						// } else {
						// 	audio.play();
						// }
						/* 为audio添加结束事件 */
						// audioE.on('ended', function (e) {
						// 	// target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
						// 	audio = null;
						// 	audioId = null;
						// });
					} else {
						if ($(".control-button").hasClass('icon-pause')) {
							$(".control-button").removeClass('icon-pause').addClass('icon-play');
						}
						//event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
						$(event.target).removeClass("icon-playVoice").removeClass('icon-voiceMsg').addClass("icon-pauseVoice");
						audioE.get(0).pause();
						// $(target).data('palyFlag', 'stoping');
						audioId = $(target).attr('data-id');
					}
					// event.cancelBubble = true;
					// if (event.stopPropagation) {
					// 	event.stopPropagation();
					// }
				});
				//播放暂停功能
				$(".control-button").on("click", function () {
					if ($(".control-button").hasClass('icon-play')) {
						$(".control-button").removeClass('icon-play').addClass('icon-pause');
						audioE.get(0).play();
						$('#displayArea > .audio').eq(imgItemIndex).removeClass('icon-pauseVoice').removeClass('icon-voiceMsg').addClass('icon-playVoice');
					} else {
						$(".control-button").removeClass('icon-pause').addClass('icon-play');
						audioE.get(0).pause();
						$('#displayArea > .audio').each(function () {
							if ($(this).hasClass('icon-playVoice')) {
								$(this).addClass('icon-pauseVoice').removeClass('icon-voiceMsg').removeClass('icon-playVoice');
							}
						});
					}
				})

				//元数据加载完，设置总时长和当前播放时间
				audioE.on("loadedmetadata", function () {
					duration = audioE.get(0).duration
					setTime(duration, "time");
					setTime(audioE.get(0).currentTime, "nowTime");
					doneW = parseFloat($(".progress-done").width());
					doneLeft = parseFloat($(".progress-done").offset().left);
					nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2);
					setnowTimeLeft("nowTime", nowTimeLeft);
				})

				//当前播放时间改变时
				audioE.on("timeupdate", function () {
					if (!drag) {
						var currentTime = audioE.get(0).currentTime;
						var percent = parseFloat(currentTime / duration) * 100;
						$(".progress-done").css({
							"width": percent + "%"
						});
						setTime(audioE.get(0).currentTime, "nowTime");
						doneW = parseFloat($(".progress-done").width());
						nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2);
						setnowTimeLeft("nowTime", nowTimeLeft);
						
					}
				})
				audioE.on("ended", function () {
					audioE.get(0).currentTime = 0;
					$('#displayArea > .audio').each(function () {
						if ($(this).hasClass('icon-playVoice')) {
							// $(this).data('palyFlag', 'stoping');
							$(this).addClass('icon-voiceMsg').removeClass('icon-pauseVoice').removeClass('icon-playVoice');
						}
					});
					$(".control-button").removeClass('icon-pause').addClass('icon-play');

				})

				//鼠标按下nowTime时
				$(".nowTime").on("mousedown", function (e) {
					startmoveOffsetX = e.pageX;
					drag = true;
					doneW = parseFloat($(".progress-done").width());
					progressW = parseFloat($(".audioprogress-div").width());
					doneW = parseFloat($(".progress-done").width());
				})

				//鼠标在页面滑动时
				$("html").on("mousemove", function (e) {
					if (drag) {
						moveingOffsetX = e.pageX - startmoveOffsetX;
						if (parseFloat(doneW + moveingOffsetX) > progressW) {
							$(".progress-done").css({
								"width": "100%"
							});
							doneW = parseFloat($(".progress-done").width());
							nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2);
							setnowTimeLeft("nowTime", nowTimeLeft);
						} else if (parseFloat(doneW + moveingOffsetX) < 0) {
							$(".progress-done").css({
								"width": "0%"
							});
							nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2);
							setnowTimeLeft("nowTime", nowTimeLeft);
						} else {
							doneWP = parseFloat(parseFloat(doneW + moveingOffsetX) / progressW) * 100;
							$(".progress-done").css({
								"width": doneWP + "%"
							});
							var doneNW = parseFloat($(".progress-done").width());
							nowTimeLeft = parseFloat(doneNW + doneLeft - nowTimeW / 2);
							setnowTimeLeft("nowTime", nowTimeLeft);
						}
					}
				});
				//松开鼠标时
				$("html").on("mouseup", function (e) {
					if (drag) {
						audioE.get(0).currentTime = parseFloat(doneWP / 100 * duration);
					}
					drag = false;
				})
			}
		});
	$('#ssEditor').load("/service?wdService=getCommonNrDataFile&wdtest=false&id=" + id,
		null,
		function () {
			var audios = document.querySelectorAll('.audio');
			// $('#ssEditor').css("display","block");
			// $('#ssEditor').css("background","#fff");
			$('#ssEditor > .item').css("height", "50px");
			$('#ssEditor > .item').css("width", "50px");
			$('#ssEditor > .item').css("margin", "0px");
			$('#ssEditor > .item').css("border", "solid 0px #CCCCCC");
			$("#ss").click();
			// 2、为音频图标添加事件
			$('#ssEditor > .audio')
				.on(
				'click',
				function (event) {

					var target = event.target;
					/* 变换图片 */
					var playFlag = $(event.target)
						.data('palyFlag');
					// 播放器
					var audio = document
						.getElementById('player');
					if (playFlag == null ||
						'' == playFlag ||
						'stoping' == playFlag) {
						var id = $(event.target).attr(
							'data-id');
						if (id != audioId) {
							audio = null;
						}
						$(event.target).data(
							'palyFlag', 'playing');
						event.target.src = 'nr/image/py/mobileIcon-playVoice.gif';
						var url = null;
						/* 获取url */
						$.ajax({
							type: "POST",
							url: "/service?wdService=getCommonNrDataFilePath&wdtest=false",
							data: {
								'id': id
							},
							async: false,
							success: function (
								data) {
								url = data;
							},
							error: function () {
								console
									.info('fail');
							}
						});
						if (audio == null) {
							audio = document
								.getElementById('player');
							/* 设置audio的url */
							audio.src = '/service?wdService=getData&wdtest=false&path=' +
								url;
							audio.onloadedmetadata = function (
								e) {
								audio.play();
							};
						} else {
							audio.play();
						}
						/* 为audio添加结束事件 */
						$(audio).on('ended', function (e) {
							$(target)
								.data(
								'palyFlag',
								'stoping');
							target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
							audio = null;
							audioId = null;
						});
					} else {
						event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png';
						audio.pause();
						$(target).data('palyFlag',
							'stoping');
						audioId = $(target).attr(
							'data-id');
					}
					event.cancelBubble = true;
					if (event.stopPropagation) {
						event.stopPropagation();
					}

				});
		});
}

/*打开录音页面*/
function openRecordWindow(id) {
	var url = window.location.protocol + '//' + window.location.host + '/main/editor/record.jsp' + '?id=' + id;
	window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}

function openWriteWindow(id) {
	var url = window.location.protocol + '//' + window.location.host + '/main/editor/handwritten.jsp' + '?id=' + id;
	window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=700, height=600");
}