collect
drop
ContextJS\nWord Completion Demo
\n$world.withAllSubmorphsDo(function(m) {\n var p = m._Position\n if (p && p.x === undefined) p.x = 0;\n if (p && p.y === undefined) p.y = 0;\n})\n\n
![](\"http://lively-kernel.org/repository/webwerkstatt/media/hpi_logo.png\"){kind=logo}
Word Completion Example
■ While typing a word, the word is looked up in a dictionary\n\n■ If a word matches a preview is displayed \n\n■ If the user presses enter the word is replaced with \n the previewed word\n
1. Intercepting the Keyboard Events
Evaluate workspace by pressing CMD+S and see how the green example morph behaves during typing
cop.create('WordCompletionLayer').refineClass(lively.morphic.Text, {\n\tonKeyPress: function(evt) {\n\t\t\tvar c = evt.getKeyChar();\n\t\t\talert('pressed \"' + c +'\"')\n\t\t\tcop.proceed(evt)\n\t}\n})
// create new morph\nm = new lively.morphic.Text(new Rectangle(0,0,100,30), \"Hello\")\nm.setPosition(pt(70,370))\n\nthis.owner.addMorph(m)\n\n// activate the layer for that morph\nm.setWithLayers([WordCompletionLayer])
Example TextMorph instance with instance specific activated WordCompletionLayer
Hello World
2. Finding the Last Word
cop.create('WordCompletionLayer').refineClass(lively.morphic.Text, {\n onKeyPress: function(evt) {\n var range = this.getSelectionRange()\n var cursor = range[0];\n if (cursor > 0) {\n var lastWordRange = this.selectWord(this.textString, cursor - 1)\n var lastWord = this.textString.slice(lastWordRange[0], lastWordRange[1] + 1)\n alertOK(\"last word: \" + lastWord)\n }\n return cop.proceed(evt)\n }\n})
Hello World
3. The Word Completion Logic
Object.subclass('WordCompletion', {\n\tcompleteAll: function(prefix) {\n\t\tif (this.wordList === undefined) return [];\n\t\treturn this.wordList.select(function(ea) { return ea.startsWith(prefix) });\n\t},\n\tcomplete: function(prefix) {\n\t\tvar lowerCasePrefix = prefix.toLowerCase(),\n\t\t\tlist = this.completeAll(lowerCasePrefix).sort(function(a,b) {\n\t\t\t\treturn a.length == b.length ? (a < b ? -1 : +1) : a.length - b.length;\n\t\t\t});\n\t\tif (list.length === 0) return undefined;\n\t\treturn lowerCasePrefix != prefix ? list[0].capitalize() : list[0];\n\n\t},\n\tloadWordList: function() {\n\t\tvar dictUrl = 'http://lively-kernel.org/repository/webwerkstatt/marko/res/combinedWords.json',\n\t\t\twordResource = new WebResource(dictUrl);\n\t\tthis.wordList = JSON.unserialize(wordResource.get().content)\n\t}\n});\nObject.extend(WordCompletion, {\n\tcurrent: function() {\n\t\t// offline support\n\t\tvar world = WorldMorph.current();\n\t\tif (world.wordCompletion === undefined)\n\t\t\tworld.wordCompletion = new WordCompletion();\n\t\treturn world.wordCompletion;\t\n\t}\n});\n// WordCompletion.current().loadWordList()\nWordCompletion.current().wordList.length \nWordCompletion.current().complete(\"diff\")\nWordCompletion.current().completeAll(\"diff\")\n
4. Show preview in separate text morph
H
H
\ncop.create('WordCompletionLayer').refineClass(lively.morphic.Text, {\n showWordCompletionMorph: function() {\n if (this.wordCompletionMorph === undefined) {\n var m = new lively.morphic.Text(new Rectangle(), '').beLabel();\n this.wordCompletionMorph = m;\n }\n this.wordCompletionMorph.applyStyle({textColor: Color.gray.darker(), fill: Color.white});\n this.wordCompletionMorph.setFontSize(this.getFontSize());\n this.addMorph(this.wordCompletionMorph);\n return this.wordCompletionMorph;\n }, \n hideWordCompletionMorph: function() {\n if (this.wordCompletionMorph) \n this.wordCompletionMorph.remove();\n }, \n isShowingWordCompletionMorph: function() {\n return this.wordCompletionMorph && (this.wordCompletionMorph.owner === this);\n },\n onKeyPress: function(evt) {\n var key = evt.getKeyChar();\n if (!key.match(/\\w/)) {\n this.hideWordCompletionMorph();\n return;\n }\n var range = this.getSelectionRange()\n var cursor = range[0];\n if (cursor > 0) {\n var lastWordRange = this.selectWord(this.textString, cursor - 1),\n lastWord = this.textString.slice(lastWordRange[0], lastWordRange[1] + 1)\n previewWord = WordCompletion.current().complete(lastWord);\n if (previewWord) {\n var m = this.showWordCompletionMorph();\n m.setTextString(previewWord); \n m.setPosition(this.getCharBounds(lastWordRange[0]).bottomLeft());\n }\n }\n return cop.proceed(evt)\n }\n});
5. Insert Previewed Word When Pressing Return
cop.create('WordCompletionLayer').refineClass(TextMorph, {\n onKeyDown: function(evt) {\n if (this.isShowingWordCompletionMorph() && evt.getKeyCode() == Event.KEY_RETURN) {\n var wordRange = this.locale.selectWord(this.textString, this.getCursorPos() - 1)\n var m = this.showWordCompletionMorph();\n this.setSelectionRange(wordRange[0], wordRange[1] + 1);\n this.replaceSelectionWith(m.textString + \" \") \n m.remove()\n return; // without proceed\n }\n return cop.proceed(evt)\n },\n})\n
Hello World
6. Using new the new Feature
activate layer for all TextMorphs
\nWordCompletionLayer.beGlobal()\n
deactivate layer again
WordCompletionLayer.beNotGlobal()\n
PresentationContainer
X
M
–