/* * The MIT License * * Copyright (c) 2009 Alexander von Weiss * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ /* * sodInput * * Version: 1.0 * Dependency: prototype framework 1.6+ "www.prototypejs.org" * * Does replace a standard html form */ /* * Usage: * */ var sodInput; sodInput = function(id,opt) { /* * INIT VARIABLES */ // user ajustable options this.options = { "autoSuggests": true } // ul navigation behavior this.ulBehavior = { "ulTags": { "prev": { "loop": "stop", "actionIfUnSelected": "last" }, "next": { "loop": "blur", "actionIfUnSelected": false } }, "ulSuggests": { "prev": { "loop": "loop", "actionIfUnSelected": "last" }, "next": { "loop": "loop", "actionIfUnSelected": "first" } } } // internal object2html variable this.input = {}; // ul (html unordered list) liNode state. Works with the html liNode DOM order // nothing = false,

= 0, second
= 1, third
= 2, ... and so on

this.selected = { ulTags: false, ulSuggests: false }; this.deleted = { ulTags: false, ulSuggests: false }; // suggests data this.data = { "htmlId": [], "dbId": [], "text": [], "selected": [] }; // timeouts this.timeout = { "ul-mousedown": false }; // call first method this.bind(id,opt); } sodInput.prototype = { /* * PRIVATE FUNCTIONS */ // get all elements (frame,tags,input,suggests) div: function(what) { return $(this.input.id + what); }, // return internal respectively overwritten option option: function(opt) { return (this.input.options[opt]) ? this.input.options[opt] : this.options[opt]; }, // create all the html createHTML: function() { /* */ var html = ''; var id = this.input.id; /*

*/ html += '

'; /* Tags */ html += '

'; /* Input */ html += '

'; /* Suggests */ html += ' '; /*

*/ html += '

'; // replace DOM this.input.old.hide(); this.input.old.insert({"after": html}); // bind events // simulate click, focus and blur for the lFrame, as it was the properly input field this.div("lFrame"). observe("mousedown",this.eventHandler.bindAsEventListener(this, "lFrame-mousedown")); this.div("fInput"). observe("focus", this.eventHandler.bindAsEventListener(this, "fInput-focus")); this.div("fInput"). observe("blur", this.eventHandler.bindAsEventListener(this, "fInput-blur")); // assign click event from a found label for the old select id => to the new input if (this.input.label) { this.input.label. observe("click", this.eventHandler.bindAsEventListener(this, "label-click")); } // input observer this.div("fInput"). observe("keydown", this.eventHandler.bindAsEventListener(this, "fInput-keydown")); this.div("fInput"). observe("keyup", this.eventHandler.bindAsEventListener(this, "fInput-keyup")); // tag and suggests observer this.div("ulTags"). observe("click", this.eventHandler.bindAsEventListener(this, "ulTags-click")); this.div("ulSuggests").observe("click", this.eventHandler.bindAsEventListener(this, "ulSuggests-click")); // stop all fired events on mousedown on ulTags and ulSuggests (it's the fInput blur event!) // Shortly after the browser requests the click events on either ulTags or ulSuggests this.div("ulTags"). observe("mousedown",this.eventHandler.bindAsEventListener(this, "ulTags-mousedown")); this.div("ulSuggests").observe("mousedown",this.eventHandler.bindAsEventListener(this, "ulSuggests-mousedown")); }, // event Handler eventHandler: function(e) { var args = $A(arguments); args.shift(); var what = args[0]; switch (what) { // focus und blur für das lFrame simulieren, als wäre dieses div das eigentliche inputfeld case "label-click": case "lFrame-mousedown": e.stop(); this.div("fInput").activate(); break; case "fInput-focus": this.div("lFrame").addClassName('sodInput-focus'); this.lSuggests("rePosition"); this.updateSuggestsDisplay(); break; case "fInput-blur": // if no mousedown event was fired, blur fInput and hide suggests if (!this.timeout["ul-mousedown"]) { this.div("lFrame").removeClassName('sodInput-focus'); this.div("lSuggests").hide(); // deselect tags this.selected["ulTags"] = false; this.updateAllLiNodes("ulTags"); // clear fInput this.div("fInput").clear(); } break; // call keypress handler: case "fInput-keydown": return this.eventKeyDown(e); case "fInput-keyup": return this.eventKeyUp(e); case "ulTags-click": return this.eventLiNodeClick("ulTags",e); case "ulSuggests-click": return this.eventLiNodeClick("ulSuggests",e); case "ulTags-mousedown": case "ulSuggests-mousedown": e.stop(); // store the mousedown event for a while, to abort the fInput-blur event // e.stop() would have been enough for all browsers EXCEPT the internet explorer :-( // so let's use this workaround var self = this; this.timeout["ul-mousedown"] = true; window.setTimeout(function(){ self.timeout["ul-mousedown"] = false },50); return; } }, // handle mouse clicks on tags and suggests eventLiNodeClick: function(what,e) { switch(what) { case "ulTags": var tag = e.element().tagName; var liNode = (tag == "SPAN") ? e.element().parentNode : e.element(); var liNodePosition = liNode.previousSiblings().length; this.div("fInput").activate(); // delete tag if (tag == "SPAN" && e.element().innerHTML == " x ") { this.selected[what] = false; this.deleted[what] = liNodePosition; // select tag } else { this.selected[what] = liNodePosition; } this.updateAllLiNodes(what); this.updateSuggestsDisplay(); this.lSuggests("rePosition"); break; case "ulSuggests": var liNode = e.element(); if (liNode && liNode.tagName == "LI") { // add clicked suggest as a new tag this.div("fInput").activate(); this.addTagFromSuggests(liNode,e); this.lSuggests("rePosition"); } break; } }, // intercept some keyCodes to bind special functionality eventKeyDown: function(e) { var what = false; switch (e.keyCode) { /* * tag navigation */ // KEY_POS1 |<-- case 36: // KEY_LEFT <-- case 37: what = "ulTags"; // if the cursor in fInput is in the most left, // jump to first or previous tag if (this.cursorAtStart()) { e.stop(); var func = (e.keyCode == 36) ? "first" : "prev"; this.selectChange(what,func); } break; // KEY_END -->| case 35: // KEY_RIGHT --> case 39: what = "ulTags"; // if already something selected, // jump to last or next tag if (this.selected[what] !== false) { e.stop(); var func = (e.keyCode == 35) ? "last" : "next"; this.selectChange(what,func); } break; // backspace case 8: what = "ulTags"; // if the cursor in fInput is in the most left, // delete selected and jump to previous tag if (this.cursorAtStart()) { e.stop(); this.deleted[what] = this.selected[what]; // execute deletion and jump to previous item this.updateAllLiNodes(what); this.selectChange(what,"prev"); this.lSuggests("rePosition"); } break; // entf case 46: what = "ulTags"; // if the cursor in fInput is in the most left, if (this.selected[what] !== false && this.cursorAtStart()) { e.stop(); this.deleted[what] = this.selected[what]; // execute deletion and reselect the new liNode, that took place // on the deleted liNode id this.updateAllLiNodes(what); this.selectChange(what,"refresh"); this.lSuggests("rePosition"); } break; /* * suggestion navigation */ // KEY_PAGE_UP case 33: // KEY_UP case 38: e.stop(); what = "ulSuggests"; var func = (e.keyCode == 33) ? "first" : "prev"; this.selectChange(what,func); break; // KEY_PAGE_DOWN case 34: // KEY_DOWN case 40: e.stop(); what = "ulSuggests"; var func = (e.keyCode == 34) ? "last" : "next"; this.selectChange(what,func); break; /* * Other key functionality */ // + case 107: e.stop(); break; // Enter case 13: e.stop(); var input = this.div("fInput"); this.deleted["ulTags"] = false; // if suggestion selected, add the suggestion as a tag if (this.selected.ulSuggests !== false) { // find selected liNode var liNode = this.div("ulSuggests").down("li.selected"); if (!liNode) { break; } this.addTagFromSuggests(liNode,e); // else, add new tag } else { var values = {}; var val = input.getValue(); if (!val) return; values["text"] = val; input.clear(); this.addLiNode("ulTags",values); this.updateSuggestsDisplay(); } this.lSuggests("rePosition"); this.selectChange("ulTags","blur"); break; // ESC case 27: this.div("lSuggests").hide(); break; // shift, ctrl, alt case 16: case 17: case 18: break; // Other Keys default: this.selectChange("ulTags","blur"); break; } }, // Suggestions here eventKeyUp: function(e) { if ([ 35,36,37,39, 38,40,33,34, 16,17,18, 27,13 ].indexOf(e.keyCode) !== -1) { // We don't want to rebuild the ulSuggests on these keyCodes: // nav suggests: 38 KEY_UP, 40 KEY_DOWN, 33 KEY_PAGE_UP, 34 KEY_PAGE_DOWN, // nav tags: 35 KEY_END, 36 KEY_POS1, 37 KEY_LEFT, 39 KEY_RIGHT // modifier: 16 shift, 17 ctrl, 18 alt, // other: 27 ESC, 13 enter return; } // on every other key, update the suggestions this.updateSuggestsDisplay(); }, addTagFromSuggests: function(liNode,e) { var values = {}; // get values values["id"] = liNode.getAttribute("value"); values["text"] = this.dataByDbId(values["id"],"text"); // add tag this.addLiNode("ulTags",values); // remove suggestion liNode.remove(); // clear fInput this.div("fInput").activate(); this.selectChange("ulSuggests","refresh"); }, // navigate through

' + text + ' x

$1

' + text + '