{"id":461,"date":"2011-07-20T17:52:22","date_gmt":"2011-07-20T17:52:22","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=461"},"modified":"2019-06-01T04:40:39","modified_gmt":"2019-06-01T04:40:39","slug":"javascript-keyboard-buffer-part-3","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/javascript-keyboard-buffer-part-3\/","title":{"rendered":"javascript keyboard buffer, part 3"},"content":{"rendered":"

Previously, we created a javascript keyboard buffer<\/a> that can edit text in a static html page. Using those functions I’d like to add a buffer replay.<\/p>\n

I would like to add an onclick event to a specified div such that it will activate the keyboard buffer and leverage the previously discussed handleKey() event handler, as well as the appendChar(el) function. E.g.,<\/p>\n

\/\/\n\/\/ onclick event handler\n\/\/ initialize this element for keyboard buffer\nfunction initEditable() {\n  selectElement(this);\n  var SPECIAL = [8, 32, 37, 39, 222];\n  document.onkeydown = handleKey(function(k) {return SPECIAL.contains(k)});\n  document.onkeypress = handleKey(function(k) {return !SPECIAL.contains(k)});\n}\n\ntargetDiv = $('target');\ntargetDiv.onclick = initEditable;\n<\/pre>\n
The function calls selectElement(this)<\/em> which will need to modify the element to add a temporary link for starting a replay.  Once selected, that div will be editable, I would like another temporary link that when pressed will remove all temporary links and remove the onkey events (making the div non-editable).<\/p>\n
The following JavaScript will enable the target div to toggle between editable and non-editable:<\/p>\n
\/\/\n\/\/ create <a> element\nfunction newA(aid, alabel, ahref, fonclick) {\n  var newA = document.createElement('a');\n  newA.appendChild(document.createTextNode(alabel));\n  newA.setAttribute('href', ahref);\n  newA.setAttribute('id', aid);\n  newA.onclick = fonclick;\n  return newA;\n}\n\n\/\/\n\/\/ prepare <div>, add 'replay' and 'save' links\nfunction selectElement(el) {\n  clearSelected();\n  origText = el.innerHTML;\n  el.innerHTML = '';\n  var newDiv = document.createElement('div');\n  newDiv.innerHTML = origText;\n  newDiv.setAttribute('id', 'editSelected');\n  el.appendChild(newDiv);\n  el.appendChild(newA('areplay', 'replay', '#', replayKeys));\n  el.appendChild(newA('aclear', 'save', 'javascript:clearSelected()', null));\n  el.onclick = null;\n}\n\n\/\/\n\/\/ clear any <div> that is intercepting onkey events\n\/\/ and clear the buffer\nfunction clearSelected() {\n  document.onkeypress = null;\n  document.onkeyup = null;\n  document.onkeydown = null;\n  BUFFER = [];\n  bp = 0;\n  var el = $('editSelected');\n  if (el) {\n    var oldText = el.innerHTML;\n    var pel = el.parentNode;\n    pel.removeChild(el);\n    pel.removeChild($('areplay'));\n    pel.removeChild($('aclear'));\n    pel.innerHTML = oldText;\n    pel.onclick = initEditable;\n  }\n}\n<\/pre>\n
When the target div is clicked it will activate the keyboard buffer such that all keystrokes will appear in the innerHTML of that div and link to a replayKeys() function. The replayKeys() function simply needs to process the BUFFER according to a timer, e.g.,<\/p>\n
TIMER = 100;\n\/\/\n\/\/ replay all keystrokes from buffer\nfunction replayKeys() {\n  el = $('editSelected');\n  el.innerHTML = origText;\n  bp = 0;\n  replaying = setInterval(replayHandler, TIMEOUT);\n}\nfunction replayHandler() {\n  el = $('editSelected');\n  if (bp < BUFFER.length) {\n    appendChar(el);\n  } else {\n    replaying ? clearInterval(replaying) : false;\n  }\n}\n<\/pre>\n
The built-in setInterval() function will call a specified function periodically according to the TIMEOUT value in milliseconds, and will continue running until the clearInterval() function is called.<\/p>\n
Next, I’d like to combine all of this into a single JavaScript include<\/a> such that it can register multiple editable div’s.<\/p>\n","protected":false},"excerpt":{"rendered":"
Previously, we created a javascript keyboard buffer that can edit text in a static html page. Using those functions I’d like to add a buffer replay. I would like to add an onclick event to a specified div such that it will activate the keyboard buffer and leverage the previously discussed handleKey() event handler, as […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/461"}],"collection":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":10,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/461\/revisions"}],"predecessor-version":[{"id":996,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/461\/revisions\/996"}],"wp:attachment":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}