inplace editing for tags

darcs-hash:20060125153416-6e07b-6f14c44030a1961fb1ed9d3cf005ddf6bb69eabd.gz

diff --git a/ajax.php b/ajax.php
index 32ffcf8e51557f56869cf1319f48543fd7be97ba..75da75ae44c7b33acaf73300056aae65e0a8190f 100644 (file)
--- a/ajax.php
+++ b/ajax.php
@@ -8,6 +8,8 @@ if($_REQUEST['taglookup']){
   ajax_taglookup($_REQUEST['taglookup']);
 }elseif($_REQUEST['addnote']){
   ajax_addnote($_REQUEST['addnote'],$_REQUEST['note']);
+}elseif($_REQUEST['settags']){
+  ajax_settags($_REQUEST['settags'],$_REQUEST['tags']);
 }
 
 /**
@@ -33,6 +35,30 @@ function ajax_addnote($dn,$note){
   print smarty_modifier_noteparser($note);
 }
 
+/**
+ * Sett tags for a contact
+ */
+function ajax_settags($dn,$tags){
+  global $conf;
+  global $LDAP_CON;
+  if(!$conf[extended]) return;
+
+  $tags = explode(',',$tags);
+  $tags = array_map('trim',$tags);
+  $tags = array_unique($tags);
+
+  $entry['marker'] = $tags;
+  ldap_modify($LDAP_CON,$dn,$entry);
+
+  foreach ($tags as $tag){
+    print '<a href="index.php?marker=';
+    print rawurlencode($tag);
+    print '" class="tag">';
+    print htmlspecialchars($tag);
+    print '</a> ';
+  }
+}
+
 /**
  * Find all tags (markers) starting with the given
  * string

diff --git a/entry.php b/entry.php
index 10d4661f0a61b637b8872ca49100814c9d60c4a1..a1db3238d1fc7cd75aea1cb08ea03ba0586bb50b 100644 (file)
--- a/entry.php
+++ b/entry.php
@@ -23,6 +23,7 @@
     $_REQUEST[entry][jpegPhoto][]=_getUploadData();
     $_REQUEST[entry][marker] = explode(',',$_REQUEST[entry][markers]);
     $_REQUEST[entry][marker] = array_map('trim',$_REQUEST[entry][marker]);
+    $_REQUEST[entry][marker] = array_unique($_REQUEST[entry][marker]);
     unset($_REQUEST[entry][markers]);
     $dn = _saveData();
   }

diff --git a/js/gui.js b/js/gui.js
index c64013a36bd0d34e922fcd6ffb2bea06d66db9f8..3d6053bb10c0859273a9b0cdaac06bddeab1d18a 100644 (file)
--- a/js/gui.js
+++ b/js/gui.js
@@ -1,26 +1,70 @@
 
+function tedit_showEditor(dn){
+  // if the editor already exists cancel it
+  if($('tedit_editor') !== null){
+    tedit_cleanUp();
+    return;
+  }
 
-/**
- * Note Editor Class
- */
+  var tags = $('tedit_out').innerHTML;
+  tags = tags.replace(/>[ \n\r]+<a/g,'>, <a');
+  tags = tags.stripTags();
+  tags = tags.replace(/[ \n\r]{2,}/g,' ');
+  tags = tags.replace(/^ /,'');
+  tags = tags.replace(/ $/,'');
+
+  var editor  = '<div id="tedit_editor"><form accept-charset="utf-8">';
+      editor += '<textarea id="tedit_edit">'+tags+'</textarea>';
+      editor += '<div id="tedit_completion" class="autocomplete"></div>';
+      editor += '<img src="pix/accept.png" width="16" height="16" id="tedit_save" class="click" alt="save" /><br />';
+      editor += '<img src="pix/cancel.png" width="16" height="16" id="tedit_cancel" class="click" alt="cancel" />';
+      editor += '</form></div>';
+
+  Element.hide('tedit_out');
+  new Insertion.Top($('tedit_insert'), editor);
+
+  new Ajax.Autocompleter('tedit_edit','tedit_completion', 'ajax.php', {paramName: 'taglookup', tokens: ','});
+
+  Event.observe('tedit_save', 'click', function(){ tedit_saveChanges(dn) }, false);
+  Event.observe('tedit_cancel', 'click', tedit_cleanUp, false);
+  $('tedit_edit').focus();
+}
+
+function tedit_cleanUp(){
+  Element.remove('tedit_editor');
+  Element.show('tedit_out');
+}
+
+function tedit_saveChanges(dn){
+  var content = encodeURI($F('tedit_edit'));
+  dn = encodeURI(dn);
 
-/*
-NoteEditor.prototype = {
+  $('tedit_editor').innerHTML = "Saving...";
 
-  initialize: function(ident,type,controlId){
-    this.type  = type;
-    this.ident = ident;
-    this.ctl   = $(controlId);
-    // add click handler to control
-    Event.observe(controlId, 'click', this.edit, false);
-  },
-*/
+  var success = function(resp){tedit_complete(resp)};
+  var failure = function(resp){tedit_failed(resp)};
+  var pars    = 'settags='+dn+'&tags='+content;
 
+  var ajax = new Ajax.Request('ajax.php', {method:'post',postBody:pars,onSuccess:success,onFailure:failure});
+}
+
+function tedit_complete(resp){
+  $('tedit_out').innerHTML = resp.responseText;
+  tedit_cleanUp();
+}
+
+function tedit_failed(resp){
+  tedit_cleanUp();
+  alert("Saving failed.");
+}
+
+
+
+// --------------------------------------------------------------------
 
 /**
  * Create the editor component
  */
-
 function nedit_showEditor(type,dn,name){
   // if the editor already exists cancel it
   if($('nedit_editor') !== null){
@@ -42,18 +86,16 @@ function nedit_showEditor(type,dn,name){
 
   var dt = new Date();
   editor += '//'+dt.formatDate('j. M y H:i')+' '+name+'//: ';
-  editor += '</textarea><br />';
+  editor += '</textarea>';
 
-  editor += '<input id="nedit_save" type="button" value="SAVE" />';
-  editor += '<input id="nedit_cancel" type="button" value="CANCEL" />';
+  editor += '<img src="pix/accept.png" width="16" height="16" id="nedit_save" class="click" alt="save" /><br />';
+  editor += '<img src="pix/cancel.png" width="16" height="16" id="nedit_cancel" class="click" alt="cancel" />';
   editor += '</form></div>';
 
   new Insertion.Top($('nedit_insert'), editor);
 
   Event.observe('nedit_save', 'click', function(){ nedit_saveChanges(dn) }, false);
   Event.observe('nedit_cancel', 'click', nedit_cleanUp, false);
-
-//  $('nedit_edit').scrollIntoView();
   $('nedit_edit').focus();
 };
 

diff --git a/pix/accept.png b/pix/accept.png
new file mode 100644 (file)
index 0000000..a24d605
Binary files /dev/null and b/pix/accept.png differ

diff --git a/pix/cancel.png b/pix/cancel.png
new file mode 100644 (file)
index 0000000..744df79
Binary files /dev/null and b/pix/cancel.png differ

diff --git a/pix/tag_blue_edit.png b/pix/tag_blue_edit.png
new file mode 100644 (file)
index 0000000..4824827
Binary files /dev/null and b/pix/tag_blue_edit.png differ

diff --git a/templates/entry_show.tpl b/templates/entry_show.tpl
index c1a73e4ed61710ff1a2afa2e6031bcacdabbedcc..70a0367f2016cb997e32bd2e16e7811ed1d0af96 100644 (file)
--- a/templates/entry_show.tpl
+++ b/templates/entry_show.tpl
@@ -114,13 +114,13 @@
 <b>{$lang.note}</b>
 
 {if $user}
- <img src="pix/phone.png" width="16" height="16" onclick="nedit_showEditor('call','{$entry.dn}','{$user|escape:javascript}');" />
- <img src="pix/email.png" width="16" height="16" onclick="nedit_showEditor('mail','{$entry.dn}','{$user|escape:javascript}');" />
- <img src="pix/arrow_right.png" width="16" height="16" onclick="nedit_showEditor('todo','{$entry.dn}','{$user|escape:javascript}');" />
- <img src="pix/note.png" width="16" height="16" onclick="nedit_showEditor('note','{$entry.dn}','{$user|escape:javascript}');" />
+ <img src="pix/phone.png" width="16" height="16" onclick="nedit_showEditor('call','{$entry.dn}','{$user|escape:javascript}');" class="click" />
+ <img src="pix/email.png" width="16" height="16" onclick="nedit_showEditor('mail','{$entry.dn}','{$user|escape:javascript}');" class="click" />
+ <img src="pix/arrow_right.png" width="16" height="16" onclick="nedit_showEditor('todo','{$entry.dn}','{$user|escape:javascript}');" class="click" />
+ <img src="pix/note.png" width="16" height="16" onclick="nedit_showEditor('note','{$entry.dn}','{$user|escape:javascript}');" class="click" />
 {/if}
 
-<dl><dd id="nedit_insert">
+<dl class="notes"><dd id="nedit_insert">
   {$entry.note|noteparser}
 </dd></dl>
 

diff --git a/templates/extended_show.tpl b/templates/extended_show.tpl
index 8508101447120a8ecfa204ce2bead84d3254485f..ff9089470165796661332b79fc7360601b67b93c 100644 (file)
--- a/templates/extended_show.tpl
+++ b/templates/extended_show.tpl
@@ -8,15 +8,21 @@
       <td>{$entry.anniversary|date_format:$conf.dateformat}</td>
     </tr>
     {/if}
-    {if $entry.marker}
     <tr>
-      <td valign="top" align="right">{$lang.marker}:</td>
-      <td>
+      <td valign="top" align="right">
+        {$lang.marker}:
+      </td>
+      <td id="tedit_insert">
+
+        <span id="tedit_out">
         {foreach from=$entry.marker item=marker}
           <a href="index.php?marker={$marker|escape:url}" class="tag">{$marker}</a> 
         {/foreach}
+        </span>
+        {if $user}
+          <img src="pix/tag_blue_edit.png" align="right" width="16" height="16" onclick="tedit_showEditor('{$dn}')" class="click" />
+        {/if}
       </td>
     </tr>
-    {/if}
   </table>
 </dd></dl>

diff --git a/templates/layout.css b/templates/layout.css
index 15d24cadf6b2265dfa2155dd7931de23dd14a3e3..82d6f50d49f8dd98d94516984aa2a72d5f8ebcc1 100644 (file)
--- a/templates/layout.css
+++ b/templates/layout.css
@@ -14,7 +14,18 @@ div#toolbar ul {
 }
 
 div#toolbar li.sep {
-  height: 1em;
+  margin: 0.5em 2px;
+  border-bottom: 1px solid #ccc;
+}
+
+div#toolbar img {
+  padding: 2px;
+  margin: 1px 0;
+  border: 1px solid #fff;
+}
+
+div#toolbar img:hover {
+  border: 1px solid #ccc;
 }
 
 /* top row */

diff --git a/templates/style.css b/templates/style.css
index 52e63ecf2c147d2e4dcc20531fcc502993b30949..899864e1b9b51ab65677f501d65079cd61586837 100644 (file)
--- a/templates/style.css
+++ b/templates/style.css
@@ -117,23 +117,22 @@ div.autocomplete li.selected {
 }
 
 div#nedit_editor textarea{
-  border-width:1px;
-  border-style:solid;
-  border-color:#000000;
-  margin:2px;
-  font-family:Lucida,Helvetica,Verdana,Arial,Sans-Serif;
-  font-size: 12px;
   width: 60%;
+  border: 1px solid #000;
+  margin: 2px;
+  float: left;
   height: 10em;
 }
 
-div#nedit_editor input {
-  border-width:1px;
-  border-style:solid;
-  border-color:#000000;
-  margin:2px;
-  font-family:Lucida,Helvetica,Verdana,Arial,Sans-Serif;
-  font-size: 12px;
+div#tedit_editor textarea{
+  width: 90%;
+  border: 1px solid #000;
+  margin: 2px;
+  float: left;
+}
+
+img.click {
+  cursor: pointer;
 }
 
 /* TagCloud */