From: Michael J. Rubinsky Date: Fri, 3 Apr 2009 00:45:52 +0000 (-0400) Subject: Add a pretty tag autocompleter to the ajax event edit form X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=65facce5045fd7f3de1557b815b9278d367cd0fe;p=horde.git Add a pretty tag autocompleter to the ajax event edit form --- diff --git a/kronolith/index.php b/kronolith/index.php index dab240614..aab60d2f3 100644 --- a/kronolith/index.php +++ b/kronolith/index.php @@ -65,4 +65,12 @@ require KRONOLITH_TEMPLATES . '/index/index.inc'; Kronolith::includeScriptFiles(); Kronolith::outputInlineScript(); $notification->notify(array('listeners' => array('javascript'))); +Kronolith_Imple::factory('TagAutoCompleter', + array('box' => 'kronolithTagACBox', + 'triggerId' => 'kronolithTagACTrigger', + 'tags' => 'kronolithEventTags', + 'container' => 'kronolithTagACContainer' + //'existing' => array('tag1', 'tag2'), + //'debug' => true + )); echo "\n"; diff --git a/kronolith/js/src/kronolith.js b/kronolith/js/src/kronolith.js index ad24aa63e..37f8bf621 100644 --- a/kronolith/js/src/kronolith.js +++ b/kronolith/js/src/kronolith.js @@ -1024,6 +1024,7 @@ KronolithCore = { case 'kronolithEventCancel': this._closeRedBox(); + // TODO: Need to clear the tagger fields. e.stop(); return; @@ -1105,8 +1106,7 @@ KronolithCore = { e.stop(); return; } else if (elt.hasClassName('kronolithEventTag')) { - var etags = $F('kronolithEventTags'); - $('kronolithEventTags').value = (etags ? etags + ', ' : '') + elt.getText(); + $('kronolithTagACTrigger').forceTaggerUpdate(elt.getText()); e.stop(); return; } diff --git a/kronolith/js/src/taggerAutoCompleter.js b/kronolith/js/src/taggerAutoCompleter.js index 4e1539901..d57f47d8b 100644 --- a/kronolith/js/src/taggerAutoCompleter.js +++ b/kronolith/js/src/taggerAutoCompleter.js @@ -2,19 +2,25 @@ var KronolithTagger = Class.create({ initialize: function(params) { this.p = params; - $(this.p.trigger).observe('keydown', this._onKeyDown.bindAsEventListener(this)); + trigger = $(this.p.trigger); + trigger.observe('keydown', this._onKeyDown.bindAsEventListener(this)); + trigger.forceTaggerUpdate = function(item) { + this.addNewTagNode(item); + }.bind(this); // Make sure the right dom elements are styled correctly. - $(this.p.container).addClassName('listItem tagACContainer'); - $(this.p.trigger).addClassName('showTag'); + $(this.p.container).addClassName('kronolithACListItem kronolithTagACContainer'); // Make sure the p.tags element is hidden - if (!params.debug) { + if (!this.p.debug) { $(this.p.tags).hide(); } // Set the updateElement callback - params.params.updateElement = this._updateElement.bind(this); + 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 new Ajax.Autocompleter(params.trigger, params.resultsId, params.uri, params.params); @@ -54,8 +60,8 @@ var KronolithTagger = Class.create({ addNewTagNode: function(value) { - var newTag = new Element('li', {class: 'listItem tagListItem'}).update(value); - var x = new Element('img', {class: 'tagRemove', src:this.p.URI_IMG_HORDE + "/delete-small.png"}); + var newTag = new Element('li', {class: 'kronolithACListItem kronolithTagACListItem'}).update(value); + var x = new Element('img', {class: 'kronolithTagACRemove', src:this.p.URI_IMG_HORDE + "/delete-small.png"}); x.observe('click', this._removeTag.bindAsEventListener(this)); newTag.insert(x); $(this.p.container).insert({before: newTag}); diff --git a/kronolith/lib/Imple/TagAutoCompleter.php b/kronolith/lib/Imple/TagAutoCompleter.php index 09d5eb8b0..0014c6cff 100644 --- a/kronolith/lib/Imple/TagAutoCompleter.php +++ b/kronolith/lib/Imple/TagAutoCompleter.php @@ -33,7 +33,7 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple /** * Attach the Imple object to a javascript event. - * Assume that if the 'container' parameter is empty then we want a + * Assume that if the 'box' parameter is empty then we want a * traditional autocompleter, otherwise we get a spiffy pretty one. * */ @@ -43,7 +43,7 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple parent::attach(); Horde::addScriptFile('autocomplete.js', 'horde', true); - if ($pretty = !empty($this->_params['container'])) { + if ($pretty = !empty($this->_params['box'])) { Horde::addScriptFile('taggerAutoCompleter.js', 'kronolith', true); } $this->_params['uri'] = Horde::url($GLOBALS['registry']->get('webroot', 'kronolith') . '/imple.php?imple=TagAutoCompleter/input=' . rawurlencode($this->_params['triggerId']), true); @@ -69,7 +69,8 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple $params[] = '{' . implode(',', $js_params) . '}'; if ($pretty) { - $js_vars = array('resultsId' => $this->_params['resultsId'], + $js_vars = array('box' => $this->_params['box'], + 'resultsId' => $this->_params['resultsId'], 'uri' => $this->_params['uri'], 'selectedTags' => array(), 'trigger' => $this->_params['triggerId'], @@ -77,12 +78,8 @@ class Kronolith_Imple_TagAutoCompleter extends Kronolith_Imple 'container' => $this->_params['container'], 'URI_IMG_HORDE' => $registry->getImageDir('horde'), 'params' => $params); - // These are optional - if ($this->_params['debug']) { - $js_vars['debug'] = $this->_params['debug']; - } - if ($this->_params['existing']) { + if (!empty($this->_params['existing'])) { $js_vars['existing'] = $this->_params['existing']; } diff --git a/kronolith/templates/index/index.inc b/kronolith/templates/index/index.inc index dd78e4fa9..04b231f45 100644 --- a/kronolith/templates/index/index.inc +++ b/kronolith/templates/index/index.inc @@ -174,7 +174,14 @@

- +
+
    +
    • +
+
+
+ +
diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css index 1971a34bd..80f093bf4 100644 --- a/kronolith/themes/screen.css +++ b/kronolith/themes/screen.css @@ -1245,9 +1245,64 @@ li.panel-tags { text-decoration: underline; } +#kronolithTagACBox { + background:white none repeat scroll 0 0; + border:1px solid #666699; + cursor:default; + /*overflow:hidden;*/ + text-align:left; + min-height: 58px; +} + +.kronolithTagACList { + display:block; + overflow:hidden; + width:100%; + cursor:default; + list-style-type:none; + margin:0; + padding:0; +} + +.kronolithACListItem { + display:inline-block; + font-size:90%; + padding:2px 1px 1px 2px; + height: 17px; + white-space:nowrap; +} + +.kronolithTagACListItem { + background-color:lightblue; + border:1px solid #C0C0C0; + -moz-border-radius-bottomleft:4px; + -moz-border-radius-bottomright:4px; + -moz-border-radius-topleft:4px; + -moz-border-radius-topright:4px; + margin:5px; +} + +#kronolithTagACTrigger { + background:transparent none repeat scroll 0 0; + border:0 none; + display:inline; + position:static; + width:80px; +} + +.kronolithTagACContainer { + height:18px; + margin:2px; + padding:2px 2px 2px 0; +} + +.kronolithTagACRemove:hover { + cursor:pointer; +} + #hordeAlerts div.kronolith-sticky, #hordeAlerts div.kronolith-sticky { background-color: #ebe20c; background-image: url("graphics/warning.png"); border-color: #807b00; color: #000; -} +} \ No newline at end of file