Changeset 2275 in subversion

Timestamp:

Feb 6, 2009 8:54:21 AM (4 years ago)

Author:

thomasb

Message:

Add event system to rcmail app + (almost) get rid of rcube_layer

Location:

branches/devel-api

Files:

• program/js/app.js (modified) (15 diffs)
• program/js/common.js (modified) (7 diffs)
• program/js/list.js (modified) (12 diffs)
• skins/default/functions.js (modified) (3 diffs)
• skins/default/mail.css (modified) (1 diff)

branches/devel-api/program/js/app.js

@@ -11 +11 @@
  |          Charles McNulty <charles@charlesmcnulty.com>                 |
  +-----------------------------------------------------------------------+
- | Requires: common.js, list.js                                          |
+ | Requires: jquery.js, common.js, list.js                               |
  +-----------------------------------------------------------------------+
 
@@ -19 +19 @@
 
 function rcube_webmail()
-  {
+{
   this.env = new Object();
   this.labels = new Object();
@@ -120 +120 @@
   // execute the given script on load
   this.add_onload = function(f)
-    {
-      this.onloads[this.onloads.length] = f;
-    };
+  {
+    this.onloads[this.onloads.length] = f;
+  };
 
   // initialize webmail client
@@ -524 +524 @@
       return ret !== null ? ret : (obj ? false : true);
     }
+    
+    // trigger plugin hook
+    var event_ret = this.triggerEvent('before'+command, props);
+    if (typeof event_ret != 'undefined') {
+      // abort if one the handlers returned false
+      if (event_ret === false)
+        return false;
+      else
+        props = event_ret;
+    }
 
     // process internal command
@@ -535 +545 @@
       case 'logout':
         this.goto_url('logout', '', true);
-        break;      
+        break;
 
       // commands to switch task
@@ -1085 +1095 @@
 
       }
+      
+    this.triggerEvent('after'+command, props);
 
     return obj ? false : true;
@@ -1180 +1192 @@
   this.doc_mouse_up = function(e)
   {
-    var model, li;
+    var model, list, li;
     
     if (this.message_list) {
       this.message_list.blur();
+      list = this.message_list;
       model = this.env.mailboxes;
     }
     else if (this.contact_list) {
       this.contact_list.blur();
+      list = this.contact_list;
       model = this.env.address_sources;
     }
@@ -1199 +1213 @@
       this.command('moveto', model[this.env.last_folder_target].id);
       this.env.last_folder_target = null;
+      list.draglayer.hide();
     }
   };
@@ -1254 +1269 @@
           this.env.last_folder_target = k;
         }
-        else
+        else {
           $(this.get_folder_li(k)).removeClass('droptarget');
+          this.env.last_folder_target = null;
+        }
       }
     }
@@ -2418 +2435 @@
         highlight = document.getElementById('rcmksearchSelected');
         if (!highlight)
-          highlight = this.ksearch_pane.ul.firstChild;
+          highlight = this.ksearch_pane.__ul.firstChild;
         
         if (highlight)
@@ -2494 +2511 @@
       return;
       
-    if (this.ksearch_pane && this.ksearch_pane.visible)
-      this.ksearch_pane.show(0);
+    if (this.ksearch_pane && this.ksearch_pane.is(":visible"))
+      this.ksearch_pane.hide();
 
     // get string from current cursor pos to last comma
@@ -2539 +2556 @@
       // create results pane if not present
       if (!this.ksearch_pane) {
-        ul = document.createElement('UL');
-        this.ksearch_pane = new rcube_layer('rcmKSearchpane', {vis:0, zindex:30000});
-        this.ksearch_pane.elm.appendChild(ul);
-        this.ksearch_pane.ul = ul;
-      }
-      else
-        ul = this.ksearch_pane.ul;
+        ul = $('<ul>');
+        this.ksearch_pane = $('<div>').attr('id', 'rcmKSearchpane').css({ position:'absolute', 'z-index':30000 }).append(ul).appendTo(document.body);
+        this.ksearch_pane.__ul = ul[0];
+      }
 
       // remove all search results
+      ul = this.ksearch_pane.__ul;
       ul.innerHTML = '';
             
@@ -2578 +2593 @@
       // move the results pane right under the input box and make it visible
       var pos = $(this.ksearch_input).offset();
-      this.ksearch_pane.move(pos.left, pos.top + this.ksearch_input.offsetHeight);
-      this.ksearch_pane.show(1);
+      this.ksearch_pane.css({ left:pos.left+'px', top:(pos.top + this.ksearch_input.offsetHeight)+'px' }).show();
     }
     // hide results pane
@@ -2612 +2626 @@
     
     if (this.ksearch_pane)
-      this.ksearch_pane.show(0);
+      this.ksearch_pane.hide();
     };
 
@@ -3965 +3979 @@
     };
     
-  }  // end object rcube_webmail
-
+}  // end object rcube_webmail
+
+
+// copy event engine prototype
+rcube_webmail.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
+rcube_webmail.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
+rcube_webmail.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;
+

branches/devel-api/program/js/common.js

@@ -94 +94 @@
 
 
-// static functions for event handling
+// static functions for DOM event handling
 var rcube_event = {
 
@@ -235 +235 @@
 
 
-var rcube_layer_objects = new Array();
+/**
+ * rcmail objects event interface
+ */
+function rcube_event_engine()
+{
+  this._events = {};
+}
+
+rcube_event_engine.prototype = {
+
+/**
+ * Setter for object event handlers
+ *
+ * @param {String}   Event name
+ * @param {Function} Handler function
+ * @return Listener ID (used to remove this handler later on)
+ */
+addEventListener: function(evt, func, obj)
+{
+  if (!this._events)
+    this._events = {};
+  if (!this._events[evt])
+    this._events[evt] = [];
+    
+  var e = {func:func, obj:obj ? obj : window};
+  this._events[evt][this._events[evt].length] = e;
+},
+
+/**
+ * Removes a specific event listener
+ *
+ * @param {String} Event name
+ * @param {Int}    Listener ID to remove
+ */
+removeEventListener: function(evt, func, obj)
+{
+  if (typeof obj == 'undefined')
+    obj = window;
+    
+  for (var h,i=0; this._events && this._events[evt] && i < this._events[evt].length; i++)
+    if ((h = this._events[evt][i]) && h.func == func && h.obj == obj)
+      this._events[evt][i] = null;
+},
+
+/**
+ * This will execute all registered event handlers
+ *
+ * @param {String} Event to trigger
+ * @param {Object} Event object/arguments
+ */
+triggerEvent: function(evt, e)
+{
+  var ret, h;
+  if (typeof e == 'undefined')
+    e = {};
+  if (typeof e == 'object')
+    e.event = evt;
+  
+  if (this._events && this._events[evt] && !this._event_exec) {
+    this._event_exec = true;
+    for (var i=0; i < this._events[evt].length; i++) {
+      if ((h = this._events[evt][i])) {
+        if (typeof h.func == 'function')
+          ret = h.func.call ? h.func.call(h.obj, this, e) : h.func(this, e);
+        else if (typeof h.obj[h.func] == 'function')
+          ret = h.obj[h.func](this, e);
+              
+        // cancel event execution
+        if (typeof ret != 'undefined' && !ret)
+          break;
+      }
+    }
+  }
+
+  this._event_exec = false;
+  return ret;
+}
+
+}  // end rcube_event_engine.prototype
+
 
 
@@ -244 +323 @@
  */
 function rcube_layer(id, attributes)
-  {
+{
   this.name = id;
   
@@ -311 +390 @@
   this.visible = (this.css.visibility=='visible' || this.css.visibility=='show' || this.css.visibility=='inherit') ? true : false;
 
-  this.id = rcube_layer_objects.length;
-  this.obj = 'rcube_layer_objects['+this.id+']';
-  rcube_layer_objects[this.id] = this;
-
 
   // ********* layer object methods *********
@@ -328 +403 @@
     }
 
-
-  // move the layer for a specific step
-  this.shift = function(x,y)
-    {
-    x = Math.round(x*100)/100;
-    y = Math.round(y*100)/100;
-    this.move(this.x+x, this.y+y);
-    }
-
-
   // change the layers width and height
   this.resize = function(w,h)
@@ -345 +410 @@
     this.width = w;
     this.height = h;
-    }
-
-
-  // cut the layer (top,width,height,left)
-  this.clip = function(t,w,h,l)
-    {
-    this.css.clip='rect('+t+' '+w+' '+h+' '+l+')';
-    this.clip_height = h;
-    this.clip_width = w;
     }
 
@@ -384 +440 @@
     }
 
-
-  // set the given color to the layer background
-  this.set_bgcolor = function(c)
-    {
-    if(!c || c=='#')
-      c = 'transparent';
-
-    this.css.backgroundColor = c;
-    }
-
-
-  // set the opacity of a layer to the given ammount (in %)
-  this.set_opacity = function(v)
-    {
-    if(!bw.opacity)
-      return;
-
-    var op = v<=1 ? Math.round(v*100) : parseInt(v);
-
-    if(bw.ie)
-      this.css.filter = 'alpha(opacity:'+op+')';
-    else if(bw.safari)
-      {
-      this.css.opacity = op/100;
-      this.css.KhtmlOpacity = op/100;
-      }
-    else if(bw.mz)
-      this.css.MozOpacity = op/100;
-    }
-  }
+}
 
 

branches/devel-api/program/js/list.js

@@ -52 +52 @@
   this.dblclick_time = 600;
   this.row_init = function(){};
-  this.events = { click:[], dblclick:[], select:[], keypress:[], dragstart:[], dragmove:[], dragend:[] };
   
   // overwrite default paramaters
@@ -306 +305 @@
   // row was double clicked
   if (this.rows && dblclicked && this.in_selection(id))
-    this.trigger_event('dblclick');
+    this.triggerEvent('dblclick');
   else
-    this.trigger_event('click');
+    this.triggerEvent('click');
 
   if (!this.drag_active)
@@ -406 +405 @@
   // trigger event if selection changed
   if (this.selection.join(',') != select_before)
-    this.trigger_event('select');
+    this.triggerEvent('select');
 
   if (this.last_selected != 0 && this.rows[this.last_selected])
@@ -518 +517 @@
   // trigger event if selection changed
   if (this.selection.join(',') != select_before)
-    this.trigger_event('select');
+    this.triggerEvent('select');
 
   this.focus();
@@ -554 +553 @@
 
   if (num_select && !this.selection.length)
-    this.trigger_event('select');
+    this.triggerEvent('select');
 },
 
@@ -634 +633 @@
       this.shiftkey = e.shiftKey;
       this.key_pressed = keyCode;
-      this.trigger_event('keypress');
+      this.triggerEvent('keypress');
       
       if (this.key_pressed == this.BACKSPACE_KEY)
@@ -719 +718 @@
   
     if (!this.draglayer)
-      this.draglayer = new rcube_layer('rcmdraglayer', {x:0, y:0, vis:0, zindex:2000});
+      this.draglayer = $('<div>').attr('id', 'rcmdraglayer').css({ position:'absolute', display:'none', 'z-index':2000 }).appendTo(document.body);
   
     // get subjects of selectedd messages
@@ -734 +733 @@
       if (this.rows[this.selection[n]].obj)
       {
+        if (n == 0)
+          this.drag_start_pos = $(this.rows[this.selection[n]].obj).offset();
+        
         obj = this.rows[this.selection[n]].obj;
         subject = '';
@@ -754 +756 @@
     }
 
-    this.draglayer.write(names);
-    this.draglayer.show(1);
+    this.draglayer.html(names);
+    this.draglayer.show();
 
     this.drag_active = true;
-    this.trigger_event('dragstart');
+    this.triggerEvent('dragstart');
   }
 
@@ -764 +766 @@
   {
     var pos = rcube_event.get_mouse_pos(e);
-    this.draglayer.move(pos.x+20, pos.y-5);
-    this.trigger_event('dragmove', e);
+    this.draglayer.css({ left:(pos.x+20)+'px', top:(pos.y-5)+'px' });
+    this.triggerEvent('dragmove', e);
   }
 
@@ -781 +783 @@
   document.onmousemove = null;
 
-  if (this.draglayer && this.draglayer.visible)
-    this.draglayer.show(0);
+  if (this.draglayer && this.draglayer.is(':visible')) {
+    if (this.drag_start_pos)
+      this.draglayer.animate(this.drag_start_pos, 300, 'swing').hide(20);
+    else
+      this.draglayer.hide();
+  }
 
   this.drag_active = false;
-  this.trigger_event('dragend');
+  this.triggerEvent('dragend');
 
   rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'drag_mouse_move'});
@@ -817 +823 @@
   
   return rcube_event.cancel(e);
-},
-
-
-
-/**
- * Setter for object event handlers
- *
- * @param {String}   Event name
- * @param {Function} Handler function
- * @return Listener ID (used to remove this handler later on)
- */
-addEventListener: function(evt, handler)
-{
-  if (this.events[evt]) {
-    var handle = this.events[evt].length;
-    this.events[evt][handle] = handler;
-    return handle;
-  }
-  else
-    return false;
-},
-
-
-/**
- * Removes a specific event listener
- *
- * @param {String} Event name
- * @param {Int}    Listener ID to remove
- */
-removeEventListener: function(evt, handle)
-{
-  if (this.events[evt] && this.events[evt][handle])
-    this.events[evt][handle] = null;
-},
-
-
-/**
- * This will execute all registered event handlers
- * @private
- */
-trigger_event: function(evt, p)
-{
-  if (this.events[evt] && this.events[evt].length) {
-    for (var i=0; i<this.events[evt].length; i++)
-      if (typeof(this.events[evt][i]) == 'function')
-        this.events[evt][i](this, p);
-  }
 }
 
-
 };
 
+rcube_list_widget.prototype.addEventListener = rcube_event_engine.prototype.addEventListener;
+rcube_list_widget.prototype.removeEventListener = rcube_event_engine.prototype.removeEventListener;
+rcube_list_widget.prototype.triggerEvent = rcube_event_engine.prototype.triggerEvent;

branches/devel-api/skins/default/functions.js

@@ -129 +129 @@
 function rcube_mail_ui()
 {
-  this.markmenu = new rcube_layer('markmessagemenu');
+  this.markmenu = $('#markmessagemenu');
 }
 
@@ -137 +137 @@
 {
   if (typeof show == 'undefined')
-    show = this.markmenu.visible ? false : true;
+    show = this.markmenu.is(':visible') ? false : true;
   
   var ref = rcube_find_object('markreadbutton');
   if (show && ref)
-    this.markmenu.move(ref.offsetLeft, ref.offsetTop + ref.offsetHeight);
+    this.markmenu.css({ left:ref.offsetLeft, top:(ref.offsetTop + ref.offsetHeight) });
   
-  this.markmenu.show(show);
+  this.markmenu[show?'show':'hide']();
 },
 
 body_mouseup: function(evt, p)
 {
-  if (this.markmenu && this.markmenu.visible && rcube_event.get_target(evt) != rcube_find_object('markreadbutton'))
+  if (this.markmenu && this.markmenu.is(':visible') && rcube_event.get_target(evt) != rcube_find_object('markreadbutton'))
     this.show_markmenu(false);
 },
@@ -154 +154 @@
 body_keypress: function(evt, p)
 {
-  if (rcube_event.get_keycode(evt) == 27 && this.markmenu && this.markmenu.visible)
+  if (rcube_event.get_keycode(evt) == 27 && this.markmenu && this.markmenu.is(':visible'))
     this.show_markmenu(false);
 }

branches/devel-api/skins/default/mail.css

@@ -50 +50 @@
   left: 90px;
   width: auto;
-  visibility: hidden;
+  display: none;
   background-color: #F9F9F9;
   border: 1px solid #CCC;