Allow drivers to append elements to calendar create/edit form

plugins/calendar/calendar.php

@@ -393,11 +393,17 @@ class calendar extends rcube_plugin
    */
   function calendar_action()
   {
-    $action = get_input_value('action', RCUBE_INPUT_POST);
+    $action = get_input_value('action', RCUBE_INPUT_GPC);
     $cal = get_input_value('c', RCUBE_INPUT_POST);
     $success = $reload = false;
     
     switch ($action) {
+      case "form-new":
+      case "form-edit":
+        $this->rc->output->reset();
+        $this->register_handler('plugin.calendarform', array($this, 'calendar_editform'));
+        $this->rc->output->send('calendar.calendarform');
+        break;
       case "new":
         $success = $this->driver->create_calendar($cal);
         $reload = true;
@@ -422,6 +428,17 @@ class calendar extends rcube_plugin
       $this->rc->output->redirect('');
   }
   
+  /**
+   * Handler for calendar form template object.
+   * Will get additional form fields from driver class
+   */
+  function calendar_editform($attrib = array())
+  {
+    $cal = get_input_value('c', RCUBE_INPUT_GPC);
+    $attrib['action'] = get_input_value('action', RCUBE_INPUT_GPC);
+    return $this->driver->calendar_form($cal, $attrib['action']);
+  }
+  
   /**
    * Dispatcher for event actions initiated by the client
    */

plugins/calendar/calendar_base.js

@@ -166,6 +166,17 @@ function rcube_calendar(settings)
 
 }
 
+// extend jQuery
+(function($){
+  $.fn.serializeJSON = function(){
+    var json = {};
+    jQuery.map($(this).serializeArray(), function(n, i) {
+      json[n['name']] = n['value'];
+    });
+    return json;
+  };
+})(jQuery);
+
 /* calendar plugin initialization (for non-calendar tasks) */
 window.rcmail && rcmail.addEventListener('init', function(evt) {
   if (rcmail.task != 'calendar') {

plugins/calendar/calendar_ui.js

@@ -638,7 +638,7 @@ function rcube_calendar_ui(settings)
 
       return false;
     };
-
+    
     // opens a jquery UI dialog with event properties (or empty for creating a new calendar)
     this.calendar_edit_dialog = function(calendar)
     {
@@ -647,14 +647,27 @@ function rcube_calendar_ui(settings)
       
       if (!calendar)
         calendar = { name:'', color:'cc0000' };
+      
+      var form, name, color;
+      
+      $dialog.html(rcmail.get_label('loading'));
+      $.ajax({
+        type: 'GET',
+        dataType: 'html',
+        url: rcmail.url('calendar'),
+        data: { action:(calendar.id ? 'form-edit' : 'form-new'), calendar:{ id:calendar.id } },
+        success: function(data){
+          // strip out body part
+          if (data.replace(/\n+/g, '').match(/<body[^>]*>(.+)<.body>/g))
+            data = RegExp.$1;
+          $dialog.html(data);
+          form = $('#calendarform > form');
+          name = $('#calendar-name').val(calendar.editname || calendar.name);
+          color = $('#calendar-color').val(calendar.color).miniColors({ value: calendar.color });
+          name.select();
+        }
+      });
 
-      // reset form first
-      var form = $('#calendarform > form');
-      form.get(0).reset();
-      
-      var name = $('#calendar-name').val(calendar.editname || calendar.name);
-      var color = $('#calendar-color').val(calendar.color).miniColors('value', calendar.color);
-      
       // dialog buttons
       var buttons = {};
       
@@ -667,10 +680,9 @@ function rcube_calendar_ui(settings)
         }
         
         // post data to server
-        var data = {
-          name: name.val(),
-          color: color.val().replace(/^#/, '')
-        };
+        var data = form.serializeJSON();
+        if (data.color)
+          data.color = data.color.replace(/^#/, '');
         if (calendar.id)
           data.id = calendar.id;
         
@@ -695,7 +707,6 @@ function rcube_calendar_ui(settings)
         width: 420
       }).show();
 
-      name.select();
     };
     
     this.calendar_remove = function(calendar)
@@ -1163,8 +1174,6 @@ function rcube_calendar_ui(settings)
         $('#recurrence-form-'+freq+', #recurrence-form-until').show();
     });
     $('#edit-recurrence-enddate').datepicker(datepicker_settings).click(function(){ $("#edit-recurrence-repeat-until").prop('checked', true) });
-    
-    $('#calendar-color').miniColors();
 
     // add proprietary css styles if not IE
     if (!bw.ie)

plugins/calendar/drivers/calendar_driver.php

@@ -279,5 +279,17 @@ abstract class calendar_driver
   {
     return array();
   }
+  
+  /**
+   * Callback function to append additional elements to the calendar create/edit form
+   *
+   * @param array Calendar properties (e.g. id)
+   * @param array Object attributes from HTML and request (e.g. action: 'form-edit|form-new')
+   * @return string HTML to be appended to form
+   */
+  public function calendar_form($calendar, $attrib)
+  {
+    return '';
+  }
 
 }

plugins/calendar/skins/default/calendar.css

@@ -277,7 +277,6 @@ a.miniColors-trigger {
 	font-size: 11px;
 }
 
-
 .attachments-list ul {
 	margin: 0px;
 	padding: 0px;
@@ -292,9 +291,6 @@ a.miniColors-trigger {
 	padding-top: 2px;
 	padding-right: 4px;
 	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	-o-text-overflow: ellipsis;
 }
 
 .attachments-list ul li img {

plugins/calendar/skins/default/templates/calendar.html

@@ -183,16 +183,7 @@
 </div>
 
 <div id="calendarform">
-  <form action="#">
-    <div class="form-section">
-      <label for="calendar-name"><roundcube:label name="calendar.name" /></label>
-      <input type="text" name="name" size="20" id="calendar-name" />
-    </div>
-    <div class="form-section">
-      <label for="calendar-color"><roundcube:label name="calendar.color" /></label>
-      <input type="text" name="color" size="6"  id="calendar-color" />
-    </div>
-  </form>
+  <roundcube:label name="loading" />
 </div>
 
 <div id="alarm-snooze-dropdown" class="popupmenu">

plugins/calendar/skins/default/templates/calendarform.html

@@ -0,0 +1,18 @@
+<html>
+<head></head>
+<body class="iframe">
+
+<form action="#" id="calendarpropform">
+  <div class="form-section">
+    <label for="calendar-name"><roundcube:label name="calendar.name" /></label>
+    <input type="text" name="name" size="20" id="calendar-name" />
+  </div>
+  <div class="form-section">
+    <label for="calendar-color"><roundcube:label name="calendar.color" /></label>
+    <input type="text" name="color" size="6"  id="calendar-color" />
+  </div>
+  <roundcube:object name="plugin.calendarform" />
+</form>
+
+</body>
+</html>