can3p (can3p) wrote in changelog,
can3p
can3p
changelog

[livejournal] r19824: LJSV-1729: Can't click insertion point t...

Committer: dpetrov
LJSV-1729: Can't click insertion point to end of paragraph in HTML editor in Chrome or Safari
U   trunk/htdocs/js/ck/plugins/livejournal/plugin.js
Modified: trunk/htdocs/js/ck/plugins/livejournal/plugin.js
===================================================================
--- trunk/htdocs/js/ck/plugins/livejournal/plugin.js	2011-08-24 11:01:55 UTC (rev 19823)
+++ trunk/htdocs/js/ck/plugins/livejournal/plugin.js	2011-08-25 01:59:24 UTC (rev 19824)
@@ -76,20 +76,173 @@
 	var ljUsers = {};
 	var currentNoteNode;
 
-	CKEDITOR.plugins.add('livejournal', {
-		init: function(editor) {
-			function onFindCmd(evt) {
-				var cmd;
+	function createNote(editor) {
+		var timer,
+			state,
+			currentData = {},
+			tempData = {},
+			note,
+			noteNode = document.createElement('lj-note'),
+			isIE = typeof(document.body.style.opacity) != 'string';
 
-				if (evt.name == 'mouseout') {
-					note.hide();
+		var animate = (function() {
+			var fps = 60,
+				totalTime = 100,
+				steps = totalTime * fps / 1000,
+				timeOuts = [],
+				type,
+				parentContainer = document.getElementById('draft-container') || document.body;
+
+			function apply() {
+				var data = timeOuts.shift();
+				var currentStep = (type ? data.time / totalTime : -(data.time / totalTime - 1)).toFixed(1);
+
+				if (!timeOuts.length) {
+					currentStep = type ? 1 : 0;
+				}
+
+				if (isIE) {
+					noteNode.style
+						.filter = (currentStep >= 1) ? null : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (currentStep * 100) + ')';
+				} else {
+					noteNode.style.opacity = currentStep;
+				}
+
+				if (currentStep == 0 && noteNode && noteNode.parentNode) {
+					noteNode.parentNode.removeChild(noteNode);
+				}
+			}
+
+			return function(animateType) {
+				type = animateType;
+
+				if (type && noteNode.parentNode) {
+					if (isIE) {
+						noteNode.style.filter = null;
+					} else {
+						noteNode.style.opacity = 1;
+					}
+				} else {
+					for (var i = 1; i <= steps; i++) {
+						var time = Math.floor(1000 / fps) * i;
+						timeOuts.push({
+							time: time,
+							timer: setTimeout(apply, time)
+						});
+					}
+				}
+
+				parentContainer.appendChild(noteNode);
+				noteNode.style.marginTop = -noteNode.offsetHeight / 2 + 'px';
+				noteNode.style.marginLeft = -noteNode.offsetWidth / 2 + 'px';
+			}
+		})();
+
+		noteNode.className = 'note-popup';
+
+		noteNode.onmouseout = function() {
+			if (!currentData.cmd) {
+				note.hide();
+			}
+		};
+
+		noteNode.onmouseover = function() {
+			if (timer && !state) {
+				state = 1;
+				clearTimeout(timer);
+				timer = null;
+			}
+		};
+
+		if (isIE) {
+			noteNode.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
+		} else {
+			noteNode.style.opacity = 0;
+		}
+
+		function callCmd() {
+			if (currentData.cmd) {
+				currentNoteNode = ljNoteData[currentData.cmd].node = currentData.node;
+				editor.execCommand(currentData.cmd);
+			}
+			return false;
+		}
+
+		function applyNote() {
+			if (state) {
+				currentData.cmd = tempData.cmd;
+				currentData.data = tempData.data;
+				currentData.node = tempData.node;
+
+				delete tempData.node;
+				delete tempData.cmd;
+				delete tempData.data;
+
+				noteNode.innerHTML = decodeURIComponent(currentData.data);
+
+				var link = noteNode.getElementsByTagName('a')[0];
+				if (link && currentData.cmd) {
+					link.onclick = callCmd;
+				}
+			} else {
+				delete currentData.node;
+				delete currentData.cmd;
+				delete currentData.data;
+
+				currentNoteNode = null;
+			}
+
+			animate(state);
+
+			timer = null;
+		}
+
+		note = {
+			show: function(data, cmd, node, isNow) {
+				if (!isNow && data == tempData.data && cmd == tempData.cmd && node === tempData.node) {
 					return;
 				}
+				console.log('show');
 
-				var node = evt.data.getTarget();
-				var actNode;
-				var isNoMouseOver = evt.name != 'mouseover';
+				if (timer) {
+					clearTimeout(timer);
+					timer = null;
+				}
 
+				state = 1;
+
+				tempData.data = data;
+				tempData.cmd = cmd;
+				tempData.node = node;
+
+				isNow === true ? applyNote() : timer = setTimeout(applyNote, 1000);
+			},
+			hide: function(isNow) {
+				if (state) {
+					console.log('hide');
+					state = 0;
+
+					if (timer) {
+						clearTimeout(timer);
+						timer = null;
+					}
+
+					if (noteNode.parentNode) {
+						isNow === true ? applyNote() : timer = setTimeout(applyNote, 500);
+					}
+				}
+			}
+		};
+
+		return note;
+	}
+
+	CKEDITOR.plugins.add('livejournal', {
+		init: function(editor) {
+			function onMouseOver(evt) {
+				var cmd, actNode,
+					node = evt.data.getTarget();
+
 				if (node.type != 1) {
 					node = node.getParent();
 				}
@@ -113,23 +266,10 @@
 				}
 
 				if (cmd && ljNoteData.hasOwnProperty(cmd)) {
-					if (isNoMouseOver) {
-						ljNoteData[cmd].node = actNode;
-						editor.getCommand(cmd).setState(CKEDITOR.TRISTATE_ON);
-					}
 					note.show(ljNoteData[cmd].html, cmd, actNode);
 				} else {
 					note.hide();
 				}
-
-				if (isNoMouseOver) {
-					for (var command in ljNoteData) {
-						if (ljNoteData.hasOwnProperty(command) && (!cmd || cmd != command)) {
-							delete ljNoteData[command].node;
-							editor.getCommand(command).setState(CKEDITOR.TRISTATE_OFF);
-						}
-					}
-				}
 			}
 
 			editor.dataProcessor.toHtml = function(html, fixForBody) {
@@ -203,180 +343,54 @@
 				return html;
 			};
 
-			function addLastTag() {
-				var body = editor.document.getBody();
-				var last = body.getLast();
-				if (last && last.type == 1 && !last.is('br')) {
-					body.appendHtml('<br />');
-				}
-			}
+			function onSelectionChange(ev) {
+				var cmd,
+					node,
+					actNode,
+					elements = ev.data.path.elements,
+					i = 0;
 
-			editor.on('dataReady', function() {
+				while(node = elements[i++]) {
+					var attr = node.getAttribute('lj-cmd');
 
-				editor.document.on('mouseover', onFindCmd);
-				editor.document.on('mouseout', onFindCmd);
-				editor.document.on('keyup', onFindCmd);
-				editor.document.on('click', onFindCmd);
-
-				editor.document.on('keyup', addLastTag);
-				editor.document.on('click', addLastTag);
-
-				if (!note) {
-					var timer,
-						state,
-						currentData = {},
-						tempData = {},
-						noteNode = document.createElement('lj-note'),
-						isIE = typeof(document.body.style.opacity) != 'string';
-
-					var animate = (function() {
-						var fps = 60,
-							totalTime = 100,
-							steps = totalTime * fps / 1000,
-							timeOuts = [],
-							type,
-							parentContainer = document.getElementById('draft-container') || document.body;
-
-						function apply() {
-							var data = timeOuts.shift();
-							var currentStep = (type ? data.time / totalTime : -(data.time / totalTime - 1)).toFixed(1);
-
-							if (!timeOuts.length) {
-								currentStep = type ? 1 : 0;
-							}
-
-							if (isIE) {
-								noteNode.style
-									.filter = (currentStep >= 1) ? null : 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (currentStep * 100) + ')';
-							} else {
-								noteNode.style.opacity = currentStep;
-							}
-
-							if (currentStep == 0 && noteNode && noteNode.parentNode) {
-								noteNode.parentNode.removeChild(noteNode);
-							}
+					if (!attr) {
+						if (node.type == 1 && node.is('img')) {
+							node.setAttribute('lj-cmd', 'LJImage');
+							attr = 'LJImage';
+						} else if (node.is('a')) {
+							node.setAttribute('lj-cmd', 'LJLink');
+							attr = 'LJLink';
 						}
-
-						return function(animateType) {
-							type = animateType;
-
-							if (type && noteNode.parentNode) {
-								if (isIE) {
-									noteNode.style.filter = null;
-								} else {
-									noteNode.style.opacity = 1;
-								}
-							} else {
-								for (var i = 1; i <= steps; i++) {
-									var time = Math.floor(1000 / fps) * i;
-									timeOuts.push({
-										time: time,
-										timer: setTimeout(apply, time)
-									});
-								}
-							}
-
-							parentContainer.appendChild(noteNode);
-							noteNode.style.marginTop = -noteNode.offsetHeight / 2 + 'px';
-							noteNode.style.marginLeft = -noteNode.offsetWidth / 2 + 'px';
-						}
-					})();
-
-					noteNode.className = 'note-popup';
-
-					noteNode.onmouseout = function() {
-						if (!currentData.cmd) {
-							note.hide();
-						}
-					};
-
-					noteNode.onmouseover = function() {
-						if (timer && !state) {
-							state = 1;
-							clearTimeout(timer);
-							timer = null;
-						}
-					};
-
-					if (isIE) {
-						noteNode.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
-					} else {
-						noteNode.style.opacity = 0;
 					}
 
-					function callCmd() {
-						if (currentData.cmd) {
-							currentNoteNode = ljNoteData[currentData.cmd].node = currentData.node;
-							editor.execCommand(currentData.cmd);
-						}
-						return false;
+					if (attr) {
+						cmd = attr;
+						actNode = node;
 					}
+				}
 
-					function applyNote() {
-						if (state) {
-							currentData.cmd = tempData.cmd;
-							currentData.data = tempData.data;
-							currentData.node = tempData.node;
+				if (cmd && ljNoteData.hasOwnProperty(cmd)) {
+					ljNoteData[cmd].node = actNode;
+					editor.getCommand(cmd).setState(CKEDITOR.TRISTATE_ON);
+					note.show(ljNoteData[cmd].html, cmd, actNode);
+				} else {
+					note.hide();
+				}
 
-							delete tempData.node;
-							delete tempData.cmd;
-							delete tempData.data;
-
-							noteNode.innerHTML = decodeURIComponent(currentData.data);
-
-							var link = noteNode.getElementsByTagName('a')[0];
-							if (link && currentData.cmd) {
-								link.onclick = callCmd;
-							}
-						} else {
-							delete currentData.node;
-							delete currentData.cmd;
-							delete currentData.data;
-
-							currentNoteNode = null;
-						}
-
-						animate(state);
-
-						timer = null;
+				for (var command in ljNoteData) {
+					if (ljNoteData.hasOwnProperty(command) && (!cmd || cmd != command)) {
+						delete ljNoteData[command].node;
+						editor.getCommand(command).setState(CKEDITOR.TRISTATE_OFF);
 					}
+				}
+			}
 
-					note = {
-						show: function(data, cmd, node, isNow) {
-							if (!isNow && data == tempData.data && cmd == tempData.cmd && node === tempData.node) {
-								return;
-							}
+			editor.on('dataReady', function() {
+				note = note || createNote(editor);
 
-							if (timer) {
-								clearTimeout(timer);
-								timer = null;
-							}
-
-							state = 1;
-
-							tempData.data = data;
-							tempData.cmd = cmd;
-							tempData.node = node;
-
-							isNow === true ? applyNote() : timer = setTimeout(applyNote, 1000);
-						},
-						hide: function(isNow) {
-							if (state) {
-								state = 0;
-
-								if (timer) {
-									clearTimeout(timer);
-									timer = null;
-								}
-
-								if (noteNode.parentNode) {
-									isNow === true ? applyNote() : timer = setTimeout(applyNote, 500);
-								}
-							}
-						}
-					};
-				}
-
+				editor.on('selectionChange', onSelectionChange);
+				editor.document.on('mouseout', note.hide.bind(note));
+				editor.document.on('mouseover', onMouseOver);
 			});
 
 			//////////  LJ User Button //////////////
@@ -760,17 +774,23 @@
 					} else {
 						text = prompt(top.CKLang.CutPrompt, top.CKLang.ReadMore);
 						if (text) {
-							ljNoteData.LJCut.node = editor.document.createElement('div');
+							var br = editor.document.createElement('br');
+
+							ljNoteData.LJCut.node = editor.document.createElement('p');
 							ljNoteData.LJCut.node.setAttribute('lj-cmd', 'LJCut');
 							ljNoteData.LJCut.node.setAttribute('class', 'lj-cut');
 							if (text != top.CKLang.ReadMore) {
 								ljNoteData.LJCut.node.setAttribute('text', text);
 							}
 							editor.getSelection().getRanges()[0].extractContents().appendTo(ljNoteData.LJCut.node);
-							editor.insertElement(ljNoteData.LJCut.node);
+							editor.insertElement( br );
+							ljNoteData.LJCut.node.insertBefore(br);
+
 							var range = new CKEDITOR.dom.range(editor.document);
+							range.moveToPosition( ljNoteData.LJCut.node, CKEDITOR.POSITION_AFTER_END );
 							range.selectNodeContents(ljNoteData.LJCut.node);
 							editor.getSelection().selectRanges([range]);
+
 						}
 					}
 				}

Tags: can3p, js, livejournal
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments