From a05a4bbea231ab54e552bb75335ba7dcec11b796 Mon Sep 17 00:00:00 2001 From: "Michael J. Rubinsky" Date: Thu, 23 Apr 2009 16:29:25 -0400 Subject: [PATCH] Use prettyautocomplete.js from horde --- kronolith/js/src/taggerAutoCompleter.js | 190 ------------------------------- kronolith/lib/Imple/TagAutoCompleter.php | 4 +- 2 files changed, 2 insertions(+), 192 deletions(-) delete mode 100644 kronolith/js/src/taggerAutoCompleter.js diff --git a/kronolith/js/src/taggerAutoCompleter.js b/kronolith/js/src/taggerAutoCompleter.js deleted file mode 100644 index b9cc122f1..000000000 --- a/kronolith/js/src/taggerAutoCompleter.js +++ /dev/null @@ -1,190 +0,0 @@ -var KronolithTagger = Class.create({ - initialize: function(params) - { - this.p = params; - - // Array to hold the currently selected tags to ease with removing - // them, assuring no duplicates etc.. - this.selectedTags = []; - - // The outter most box, the "fake" input element. - if (typeof this.p.box == 'undefined') { - this.p.box = this.p.box = 'HordeACBox'; - } - if (typeof this.p.boxClass == 'undefined') { - this.p.boxClass = 'hordeACBox'; - } - - // The class for the ul. li will have a *Item and *Member class - // added to them. - if (typeof this.p.listClass == 'undefined') { - this.p.listClass = 'hordeACList'; - } - - // Class for the actual input element. - if (typeof this.p.growingInputClass == 'undefined') { - this.p.growingInputClass = 'hordeACTrigger'; - } - if (typeof this.p.triggerContainer == 'undefined') { - this.p.triggerContainer = 'hordeACTriggerContainer'; - } - - // p.tags is now the hidden input field, while p.trigger will - // contain the "real" input element's name attribute. - this.p.tags = this.p.trigger; - this.p.trigger = this.p.trigger + 'real'; - - this.buildStructure(); - - var trigger = $(this.p.trigger); - trigger.observe('keydown', this._onKeyDown.bindAsEventListener(this)); - - // Bind this object to the trigger so we can call it's methods - // from client code. - //trigger.kronolithTagger = this; - $(this.p.tags).tagger = this; - - // Make sure the p.tags element is hidden - if (!this.p.debug) { - $(this.p.tags).hide(); - } - - // Set the updateElement callback - this.p.params.updateElement = this._updateElement.bind(this); - - // Look for clicks on the box to simulate clicking in an input box - $(this.p.box).observe('click', function() {$(this.p.trigger).focus()}.bindAsEventListener(this)); - - // Create the underlaying Autocompleter - this.p.uri = this.p.uri + '/input=' + this.p.trigger; - new Ajax.Autocompleter(this.p.trigger, this.p.trigger + '_results', this.p.uri, this.p.params); - - // Prepopulate the tags and the container elements? - if (typeof this.p.existing != 'undefined') { - this.init(this.p.existing); - } - - }, - - init: function(existing) - { - // TODO: Resize the trigger field to fill the current line? - // Clear any existing values - if (this.selectedTags.length) { - $(this.p.box).select('li.' + this.p.listClass + 'Item').each(function(item) {this.removeTagNode(item) }.bind(this)); - } - - // Clear the hidden tags field - $(this.p.tags).value = ''; - - // Add any initial values - if (typeof existing != 'undefined' && existing.length) { - for (var i = 0, l = existing.length; i < l; i++) { - this.addNewTagNode(existing[i]); - } - } - - }, - - buildStructure: function() - { - // Build the outter box - var box = new Element('div', {id: this.p.box, 'class': this.p.boxClass}); - - // The results div - where the autocomplete choices are placed. - var results = new Element('div', {id: this.p.trigger + '_results', 'class': 'autocomplete'}); - - // The list - where the choosen items are placed as
  • nodes - var list = new Element('ul', {'class': this.p.listClass}); - - // The input element and the
  • wraper - var inputListItem = new Element('li', {'class': this.p.listClass + 'Member', - 'id': this.p.triggerContainer}); - - var growingInput = new Element('input', {'class': this.p.growingInputClass, - 'id': this.p.trigger, - 'name': this.p.trigger, - 'autocomplete':'off'}); - - inputListItem.update(growingInput); - list.update(inputListItem); - box.update(list); - box.insert(results); - - // Replace the single input element with the new structure and - // move the old element into the structure while making sure it's - // hidden. (Use the long form to play nice with Opera) - oldTrigger = Element.replace($(this.p.tags), box); - box.insert(oldTrigger); - - }, - - _onKeyDown: function(e) - { - // Check for a comma - if (e.keyCode == 188) { - //Strip off leading commas - value = $F(this.p.trigger).replace(/^,/, ''); - if (value.length) { - if (value.match(/^[^"]?"[^"]+$/)) { - // Unclosed quote - return; - } - this.addNewTagNode(value); - } - e.stop(); - } - }, - - // Used as the updateElement callback. - _updateElement: function(item) - { - var value = item.collectTextNodesIgnoreClass('informal'); - this.addNewTagNode(value); - }, - - addNewTagNode: function(value) - { - // Don't add if it's already present. - for (var x = 0, len = this.selectedTags.length; x < len; x++) { - if (this.selectedTags[x] == value) { - return; - } - } - - var newTag = new Element('li', {class: this.p.listClass + 'Member ' + this.p.listClass + 'Item'}).update(value); - var x = new Element('img', {class: 'hordeACItemRemove', src:this.p.URI_IMG_HORDE + "/delete-small.png"}); - x.observe('click', this._removeTagHandler.bindAsEventListener(this)); - newTag.insert(x); - $(this.p.triggerContainer).insert({before: newTag}); - $(this.p.trigger).value = ''; - - // Add to hidden input field. - if ($(this.p.tags).value) { - $(this.p.tags).value = $(this.p.tags).value + ', ' + value; - } else { - $(this.p.tags).value = value; - } - - // ...and keep the selectedTags array up to date. - this.selectedTags.push(value); - }, - - removeTagNode: function(item) - { - var value = item.collectTextNodesIgnoreClass('informal'); - for (var x = 0, len = this.selectedTags.length; x < len; x++) { - if (this.selectedTags[x] == value) { - this.selectedTags.splice(x, 1); - } - } - item.remove(); - }, - - _removeTagHandler: function(e) - { - item = Event.element(e).up(); - this.removeTagNode(item); - $(this.p.tags).value = this.selectedTags.join(','); - } -}); \ No newline at end of file diff --git a/kronolith/lib/Imple/TagAutoCompleter.php b/kronolith/lib/Imple/TagAutoCompleter.php index 638d85383..0a1f46708 100644 --- a/kronolith/lib/Imple/TagAutoCompleter.php +++ b/kronolith/lib/Imple/TagAutoCompleter.php @@ -44,7 +44,7 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple Horde::addScriptFile('autocomplete.js', 'horde', true); if ($pretty = !empty($this->_params['pretty'])) { - Horde::addScriptFile('taggerAutoCompleter.js', 'kronolith', true); + Horde::addScriptFile('prettyautocomplete.js', 'horde', true); $this->_params['uri'] = Horde::url($GLOBALS['registry']->get('webroot', 'kronolith') . '/imple.php?imple=TagAutoCompleter', true); } else { $this->_params['uri'] = Horde::url($GLOBALS['registry']->get('webroot', 'kronolith') . '/imple.php?imple=TagAutoCompleter/input=' . rawurlencode($this->_params['triggerId']), true); @@ -81,7 +81,7 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple $js_vars['existing'] = $this->_params['existing']; } - $script = array('new KronolithTagger(' . Horde_Serialize::serialize($js_vars, Horde_Serialize::JSON, NLS::getCharset()) . ')'); + $script = array('new PrettyAutocompleter(' . Horde_Serialize::serialize($js_vars, Horde_Serialize::JSON, NLS::getCharset()) . ')'); } else { $script = array('new Ajax.Autocompleter(' . implode(',', $params) . ')'); } -- 2.11.0