ss_new_ui_skin_and_page/ss/instructor/instructor-assist.js

console.info("assist");
// 用于记录那个录音图标正在播放
var audioId = null;
var btnMargin = 16;

var instructor_assist = instructor_assist || function (maxHeight, btns, buttons) {
		//初始化按钮（编辑器宽度）
		var that = this;
		this.mainEditor = document.getElementById("outCont");	// .getElementById("displayArea")。Lin
		var $me = $(this.mainEditor);

		var before = this.mainEditor;
		this.editors = {};

		$me.parent().find('.button').each(function () {
				var $b = $(this),
				btnid = $b.attr("id"),
				editorid = $b.attr("editor");
				if ($("#" + editorid).length > 0) {
						that.editors[editorid] = that.editors[editorid] || {
								id: editorid,
								btns: []
						};
						that.editors[editorid].btns.push($b.attr("id"));
						if ($b.attr("default-show") != "false") {
								$b.show();
								$me.show();
								var width = $me.width() - $b.width() - 31 + "px";
								$me.css({
										width: width
								});
								$me.parent().find(".editor").each(function () {
										$(this).css({
												width: width
										})
								});
								$me.hide()
						}
				} else {
						$b.remove();
				}
		});

		//初始化编辑器的groeHeight
		for (var key in that.editors) {
				var ed = that.editors[key],
				$e = $("#" + ed.id),
				e = $e[0];
				$e.show();
				var _editor = getGrowHeight(ed.id, maxHeight, buttons, parseInt(e.getAttribute("editorType")),true);
				_editor.setOnInput(function () {
						$("#outCont").html(this.val());	// $("#displayArea").。Lin
				});
				$e.parent().hide();
				for (var i = 0; i < ed.btns.length; i++) {
						var btnId = ed.btns[i];
						switch (btnId) {
						case 'cmnWord':	// 'cyy':。Lin
								this.initCyy(btnId, key);
								break;
						case 'spkByHtml':	// 'yy':。Lin
								this.initRecorder(btnId, key);
								break;
						case 'wrByHtml':	// 'ss':。Lin
								ed.editor = this.initWriter(btnId, key);
								break;
						case 'delByHtml':	// 'ss-del':。Lin
								this.initWriterDel(btnId, key);
								break;
						default:
								break;
						}
				}
				cursorManager.setCursorListener(_editor.container);
		}

		var checkFirstEditor = this.checkFirstEditor = function () {
				for (var key in that.editors) {
						that.switchEditor(key);
						break;
				}
		}
		var checkContent = this.checkContent = function () {
				if (!that.currentEdit || that.currentEdit.val() == "") {
						checkFirstEditor();
						$(that.mainEditor).parent().find("[type='button'][default-show!='false']").show();
				} else if (that.mainEditor.childNodes.length == 1) {
						that.switchEditor(that.currentEdit.name);
				}
		}
		this.mainEditor.addEventListener("DOMSubtreeModified", checkContent);
		this.checkContent()
};
instructor_assist.prototype = {
		currentEdit: null,
		buttons: [],
		switchEditor: function (name) {
				if (growHeightList)
						for (var key in this.editors) {
								var ed = this.editors[key],
								gh = growHeightList[ed.id];
								if (gh) {
										if (gh.name == name) {
												this.currentEdit = gh;
												$(gh.wrapper).css({
														display: "inline-block"
												})
												$.each(ed.btns, function () {
														$("#" + this).show();
														this.reset && this.reset();
												});
										} else {
												ed.editor && ed.editor.reset();
												gh.hide();
												$(gh.wrapper).hide();
												$.each(ed.btns, function () {
														$("#" + this).hide();
														this.reset && this.reset();
												});
										}
								}
						}
		},
		saveEditor: function () {
				var element = this.mainEditor;
/* 改，改为从 <div id="txtEditor" / <div id="htmlEditor" 里取 -- 优先 "htmlEditor"。Lin
 * this.mainEditor = <div id="displayArea"
 * 原，不能取得手写的 HTML
				var html = element.innerHTML;
*/
/* 再改回，又能取到了。Lin
 * 期间
 *    打断点调试时，$("#htmlEditor").html() 能取到。运行时，取不到(= null)。
 *    后发现，chgChk.ss.jsp 的 "同意"、"退回" 按钮调用的是 wd.display.reset(，即 <varServ.ss resize="true"
 *       addChk.ss.jsp 的是 wd.display.changeFormAction(，即 <varServ.ss subm="true"
 * chgChk.ss.jsp 的 "同意"、"退回" 按钮改为 <varServ.ss subm="true" 后，element.innerHTML 又能取到手写的 HTML 了
 *    进入审核界面，直接录入文本 "aaa"，$("#displayArea").html() = "aaa"。同时，$("#htmlEditor").html()、$("#txtEditor").html() 均为 ""
 *    点击 "手写" 按钮并手写，$("#displayArea").html() 和 $("#htmlEditor").html() 均为手写的 "<img ..."。同时，$("#txtEditor").html() 为 ""
 *       进入手写后，不能录入文本
 *    删除所有手写内容，并点击 "手写" 按钮切换回文本录入时，"aaa" 出现在录入框(保存在哪？)
				var html = $("#htmlEditor").html();
				if (!html)
					html = $("#txtEditor").html();
*/
/* 再改，又不能取到了。Lin
 * 另，$("#txtEditor").html() 一直为空 -- 不知是否 "常用语" 时才会有值？？？
				var html = element.innerHTML;
*/
			var html = $("#htmlEditor").html();
			if (!html)
				html = $("#outCont").html();

			var id = element.getAttribute('nrid');
				var shid = element.getAttribute('shid');	// 增加，解决 "每次进入办理页都会产生一个 CMS 内容(最后一次仍会垃圾)" 的问题。Lin
console.log("saveEditor() shid: "+ shid);
				$.ajax({
						type: "POST",
						url: "/service?ssServ=savePsCont",
						data: {
								'id': id,
								'html': html,
				'shid': shid	// 增加，解决 "每次进入办理页都会产生一个 CMS 内容(最后一次仍会垃圾)" 的问题。Lin
						},
						async: false,
						dataType: "json",
/// 再增加，增加错误处理 -- 统一 Ajax 返回标准 -- .ssCode、.ssMsg、.ssData。Lin
						success: function (data) {
							if (data.ssCode != 0) {
								alert(data.ssMsg);
								return;
							}
						},
///
						error: function () {}
				});
		},
		createImage: function (src) {
				var img = new Image();
				$(img).addClass('item');
				img.src = src;
				return img;
		},
		addRecorderImage: function (index) {
				var img = createImage('/nr/image/py/yinpin.png');
				$(img).addClass('audio');
				$(img).data('index', index);
				// 新增音频内容到服务器中
				addToService(index, img, id);
				// 为div添加图标
				// addToDisplayArea(img);
				// 为录音图标添加事件
				addAudioEvent('.audio');
		},
		reloadText: function (nrid) {
				/*回显*/
				var this_ = this;
				$(this_.editor).load("/service?ssServ=getCommonNrDataFile", {
						id: nrid
				},
						function () {
						var audios = document.querySelectorAll('.audio');
						$(this_.editor).children('.audio').on('click', function (event) {
								showRecord(event); //显示
						});
						// cursorManager.focus($(editor));
				});
		},
		initRecorder: function (button) {
				if ($(button).length == 0)
						return;
				var this_ = this;
				$(button)[0].editMode = "record";
				$(button)[0].showBtn = function () {
						this.style.display = "";
				};
				$(button)[0].hideBtn = function () {
						this.style.display = "none";
				};
				this.buttons.push($(button)[0]);
		},
		initWriterDel: function (button, editorid) {
				var $button = $("#" + button),
				button = $button[0],
				$editor = $("#" + editorid),
				editor = $editor[0],
				that = this;
				editor.addEventListener("click", function () {});
				this.mainEditor.addEventListener("DOMSubtreeModified", function () {
						if (this.children.length > 0) {
								$button.show();
						} else {
								$button.hide();
						}
				});
				$button.mouseenter(function () {
						//获取光标位置

				});
				$button.click(function () {
						that.switchEditor(editor.id);
						var childrens = editor.children;
						if (childrens.length > 0) {
								try {
										editor.removeChild(childrens[childrens.length - 1]);
								} catch (e) {}
						}
				});
				button.reset = function () {
						$button.hide()
				};
		},
		initWriter: function (button, editorid) {
				button = "#" + button;
				editorid = "#" + editorid;
				if ($(button).length == 0 || $(editorid).length == 0)
						return;
				var this_ = this;
				$(button)[0].editMode = "handWrite";
				// var canvasField = this.createWriter(null, editor);
				var editor = document.querySelector(editorid);
				var writer = new instructor_writer(editor, $(button)[0]);
				editor.GrowHeight.setOnfocus(function () {
						if (!writer.isshow)
								writer.show();
				});
				$(button).click(function (e) {
						if (!writer.isshow) {
								this_.switchEditor($(this).attr("editor"));
								writer.show();
						} else {
								writer.hide();
								if (editor.GrowHeight.container.children.length == 0) {
										this_.checkContent();
								}
						}
				});
				$(button)[0].showBtn = function () {
						this.style.display = "";
						$(this).show();
				};
				$(button)[0].hideBtn = function () {
						this.style.display = "none";
						writer.hide();
						$(this).hide();
				};
				this.buttons.push($(button)[0]);
				return {
						reset: function () {
								writer.hide();
						}
				}
		},
		initCyy: function (button, editorid) {
				button = "#" + button;
				if ($(button).length == 0)
						return;
				var this_ = this;
				var ul;
				$(button)[0].editMode = "planText";
				$(button).click(function () {
						this_.switchEditor(editorid);
						var that = this;
						if (this.isshow) {
								that.isshow = false;
								that.ul.parentNode.removeChild(that.ul);
								this_.checkContent();
						} else {
								$.ajax({
										url: '/service?ssServ=gryy_cx',
										dataType: 'json',
										success: function (data) {
												ul = that.ul = document.createElement("div");
												ul.className = "popup-div";
												var cyy_li = that.cyy_li = document.createElement("div");
												cyy_li.className = "scrollbar";
												cyy_li.style.cssText = "max-height: 150px;max-width: 400px;min-width: 180px;";
												that.ul.appendChild(cyy_li);
												var add_li = document.createElement("div");
												add_li.style.cssText = "text-align: right;padding-right: 6px;height: 40px;line-height: 30px;font-size: 14px;color: #000;margin-right: 4px;";
												add_li.innerHTML = '<div class="icon-add button cursor-click" style="float: right;margin-right: 0px;height:36px;margin-top:2px;background-position-y:center;" onclick="addCyy()"></div>';
												that.cyy_li.appendChild(add_li);
												if (data.length) {
														var editor__ = $(this_.currentEdit.container)[0];
														for (var i = 0; i < data.length; i++) {
																var item = data[i];
																var li = (function (item, index) {
																		var li = document.createElement("div");
																		li.className = "popupList";
																		li.style.cssText = "text-align: right;padding-right: 16px;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
																		li.innerHTML = item.yy;	// 这里的 .yy，是服务 gryy_cx 的返回结果。Lin
																		li.onclick = function () {
																				var str = li.innerHTML.trim();
																				if (editor__.tagName === "TEXTAREA") {
																						if (document.selection) {
																								var sel = document.selection.createRange();
																								sel.text = str;
																						} else if (typeof editor__.selectionStart === 'number' && typeof editor__.selectionEnd === 'number') {
																								var startPos = editor__.selectionStart;
																								var endPos = editor__.selectionEnd;
																								var cursorPos = startPos;
																								var tmpStr = editor__.value;
																								var newCyy = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
																								getGrowHeight(editor__.id)&&getGrowHeight(editor__.id).val(newCyy);
																								editor__.value = newCyy;
																								cursorPos += str.length;
																								editor__.selectionStart = editor__.selectionEnd = cursorPos;
																						} else {
																								editor__.value += str;
																						}
																				} else {
																						cursorManager.focus(editor__);
																						var range = getRange(),
																						// span = document.createElement("span"),
																						txt = document.createTextNode(str);
																						range.deleteContents();

																						range.insertNode(txt);
																						// }
																						range.setStartAfter(txt);
																				}
																				cursorManager.focus(editor__);
																				ul.style.display = "none";
																				that.isshow = false;
																				//修改常用语次数
																				this_.updateCyySycs(item);
																		}
																		return li;
																})(item, i);
																that.cyy_li.appendChild(li);
														}
												}
												$(button).before(that.ul);
												document.body.appendChild(ul);
												var $area = $(editor__);
												var $cyy = $(button);
												(function (ofs_) {
														var bodyHeight = $(document.body).height();
														var startBottom = bodyHeight - ofs_.top - $cyy.height();
														do {
																cyy_li.scrollTop = cyy_li.scrollHeight;
																$(ul).css({
																		bottom: startBottom += 1,
																		right: $(document.body).width() - ofs_.left - $cyy.width()
																});
														} while ($(ul).offset().top + $(ul).height() + 5 > ofs_.top);
												}
														($cyy.offset()));

												try{
														//伪滚动条
														loadScorll($(".scrollbar"));
												}catch(e){
														console.log(e)
												}
												that.isshow = true;
										},
										context: that,
								});
						}
				});
				$(button)[0].showBtn = function () {
						this.style.display = "";
				};
				$(button)[0].hideBtn = function () {
						this.style.display = "none";
						ul && ul.parentNode && ul.parentNode.removeChild(ul);
				};
				this.buttons.push($(button)[0]);
		},
		//修改常用语次数
		updateCyySycs:function(item){
				console.log(item);
				$.ajax({
								url: '/service?ssServ=p_gryy_sycs',
								dataType: 'json',
								type:"post",
								data:{gryyid:item.gryyid},
								success: function (data) {
										console.log(data);
								}
				});
		},
		destroy: function () {
				$(this.mainEditor).parent().remove();
		}
}
// 获取焦点
function getRange() {
		var selection = window.getSelection ? window.getSelection() :
				document.selection;
		var range = selection.createRange ? selection.createRange() : selection
				.getRangeAt(0);
		return range;
}

/*打开录音页面*/
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");
}
getAbsPoint = function (e) {
		try {

				var x = e.offsetLeft;
				var y = e.offsetTop;
				var w = e.offsetWidth;
				var h = e.offsetHeight;

				/**
				 * OffsetParent为从中计算偏移量的元素。 如果某个元素的父级或此元素层次结构中的其他元素使用相对或绝对定位， 则 OffsetParent
				 * 将成为当前元素嵌套到的第一个相对或绝对定位元素。如果当前元素以上的任何元素都不是绝对 或相对定位的，则 OffsetParent 将是文档的
				 * BODY 标记。
				 *
				 * obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj
				 * 距离左方或上层控件的位置，整型，单位像素。
				 *
				 * offsetTop与offsetLeft均为相对偏移量，但是下面不断地拿offsetParent的偏移量来累加，
				 * 直至拿到offsetParent为body之后，就没有offsetParent了，此时循环才终止。
				 * 最终计算出来的x,y为e相对body的绝对坐标。
				 */
				while (e = e.offsetParent) { // 只要对象的offsetParent存在，则继续累加XY，

						x += e.offsetLeft;
						y += e.offsetTop;
				}

				return {
						"x": x,
						"y": y,
						"w": w,
						"h": h
				};

		} catch (e) {
				if (this.debug)
						//alert('方法getAbsPoint执行异常:'+e);
						console.log('方法getAbsPoint执行异常:' + e);
		}
}
var recursionIframe = function (win) {

		if (!win) {
				win = this.wins;
		}

		function getTop(e) {
				var offset = e.offsetTop;
				if (e.offsetParent != null)
						offset += getTop(e.offsetParent);
				return offset;
		}

		function getLeft(e) {
				var offset = e.offsetLeft;
				if (e.offsetParent != null)
						offset += getLeft(e.offsetParent);
				return offset;
		}

		if (win.parent == top && win.parent == win) {
				// var xy = this.getAbsPoint(win);

				return {
						"left": 0,
						"top": 0
				};
		}
		var winPar = win.parent; // .opener
		var iframeArr = winPar.document.getElementsByTagName('IFRAME');
		var targetIframe;
		for (var i = 0; i < iframeArr.length; i++) {
				var iframeElem = iframeArr[i];
				if (iframeElem.contentWindow == win) {
						targetIframe = iframeElem;
						break;
				}
		}
		// alert(targetIframe==null)
		//  var xy = this.getAbsPoint(targetIframe);
		var xy = {
				left: getLeft(targetIframe),
				top: getTop(targetIframe)
		}

		if (winPar.parent != winPar) {
				var xy2 = this.recursionIframe(winPar);
				xy.left += xy2.left;
				xy.top += xy2.top;
		}

		return xy
}