1 2 var log_panel = null;3 var log_count = 0;4 var log_count_max = 10;5 var sel = null;6 7 window.addEventListener('load', init, true);8 //window.addEventListener('mouseup', window_selection, false);9 window.addEventListener('keyup', window_selection, false);10 window.addEventListener('keypress', window_selection, false);11 12 13 function window_selection(event) {14 //var sel = window.getSelection();15 var s = '';16 for(key in sel)17 s += key + ' = ' + sel[key] + '<br>';18 log(s);19 20 //if (sel.nextSibling != null) sel.nextSibling.style.border = 'solid';21 22 // Pruebas:23 //sel.selectAllChildren();24 }25 26 27 function init() {28 log_panel = document.getElementById('log');29 sel = window.getSelection();30 31 /*32 var p1 = document.getElementById('parte1');33 p1.contentEditable=true;34 p1.addEventListener('keydown', div_editable_keydown, true);35 */36 add_text(document.getElementById('document'));37 38 39 }40 41 var add_text = function(parent) {42 var dom = document.createElement('div');43 var comments = document.createElement('div'); comments.className = 'comments';44 var users1 = document.createElement('div'); users1.style.cssFloat = 'right'; users1.style.fontSize='10px';45 var users2 = document.createElement('div'); users2.innerHTML = 'Editando: fulanita'; users2.style.display = 'inline';46 var users3 = document.createElement('div'); users3.innerHTML = ' + '; users3.style.display = 'inline'; users3.style.color = 'blue';47 users3.addEventListener('click', function() {48 var comment = document.createElement('div');49 comment.className = 'comment';50 comment.innerHTML = 'Su comentario...';51 comment.contentEditable = true;52 comments.appendChild(comment);53 comment.focus();54 }, true);55 var editor = document.createElement('div'); editor.className = 'editor-text';56 dom.appendChild(comments);57 dom.appendChild(users1);58 dom.appendChild(editor);59 users1.appendChild(users2);60 users1.appendChild(users3);61 editor.innerHTML = '';62 editor.style.minHeight = '15px';63 64 editor.addEventListener('keydown', div_editable_keydown, true);65 editor.addEventListener('keypress', keyboard_shortcut, true);66 editor.addEventListener('blur', div_editable_blur, true);67 if(parent.parentNode.nextSibling) {68 parent.parentNode.parentNode.insertBefore(dom, parent.parentNode.nextSibling);69 } else {70 parent.appendChild(parent.parentNode);71 }72 editor.contentEditable=true; 73 editor.focus();74 }75 76 var keyboard_shortcut = function(event) {77 /*78 var s = '';79 for (key in event)80 s += key + '-'+event[key]+'<br>';81 log(s);*/82 83 if (event.ctrlKey && event.charCode == 241) {84 //log2('hola');85 //sel.collapse();86 sel.selectAllChildren();87 }88 }89 90 var div_editable_keydown = function(event) {91 if (event.keyCode == 13) {92 event.stopPropagation();93 event.preventDefault();94 add_text(this);95 }96 97 98 99 }100 101 var div_editable_blur = function (event) {102 log('Event change: '+event.target.innerHTML);103 }104 105 106 function log(txt) {107 if (log_count <= 0) {log_count = log_count_max; log_panel.innerHTML = 0;}108 if (log_panel != null) {log_panel.innerHTML = txt+'<br>'+log_panel.innerHTML; log_count--}109 }110 111 function log2(txt) {112 document.getElementById('log2').innerHTML = txt;113 }Enlace
El enlace para compartir es: