Changeset 558

Timestamp:

08/25/06 13:45:41 (7 years ago)

Author:

mokhet

Message:

• add prototype.removeEvent and prototype.notifierRemove
  
• apply color picker IE fix and saved colors from ticket #85
  
• bring back anonymous function in events (when available) for a better diff with trunk
  
• disable patch from ticket #827 until a proper fix for IE is found
  
• fix undeclared variable used in popup.js
  
• fix undefined parameter used in listType plugin
  

Location:

branches/mokhet

Files:

• htmlarea.js (modified) (20 diffs)
• plugins/ListType/list-type.js (modified) (3 diffs)
• popups/color_picker.js (modified) (8 diffs)
• popups/popup.js (modified) (1 diff)

branches/mokhet/htmlarea.js

@@ -367 +367 @@
   this.showLoading = false;
 
+  // size of color picker cells
+  this.colorPickerCellsize = '6px';
+  // granularity of color picker cells (number per column/row)
+  this.colorPickerGranularity = 18;
+  // position of color picker from toolbar button
+  this.colorPickerPosition = 'bottom,right';
+
   /** CUSTOMIZING THE TOOLBAR
    * -------------------------
@@ -889 +896 @@
   var tb_row = null;
   var tb_objects = {};
-  // wrong case name. Should be this._toolBarObjects according to the comment 5 lines above
+  // [mokhet] wrong case name. Should be this._toolBarObjects according to the comment 5 lines above
   this._toolbarObjects = tb_objects;
 
@@ -1128 +1135 @@
         };
       
-//        editor.freeLater(obj);
         editor.freeLater(obj, ['element', 'state']);
-
         tb_objects[txt] = obj;
       break;
@@ -1159 +1164 @@
       };
 //      editor.freeLater(el);
-//      editor.freeLater(obj);
       editor.freeLater(obj, ['element', 'cmd', 'state', 'imgel', 'swapImage']);
 
@@ -1169 +1173 @@
 
       // handlers to emulate nice flat toolbar buttons
-      function el_onmouseout()
-      {
-        if ( obj.enabled )
-        {
-          //HTMLArea._removeClass(el, "buttonHover");
-          HTMLArea._removeClass(el, "buttonActive");
-          if ( obj.active )
+      editor.addEvent(
+        el,
+        "mouseout",
+        function()
+        {
+          if ( obj.enabled )
           {
-            HTMLArea._addClass(el, "buttonPressed");
+            //HTMLArea._removeClass(el, "buttonHover");
+            HTMLArea._removeClass(el, "buttonActive");
+            if ( obj.active )
+            {
+              HTMLArea._addClass(el, "buttonPressed");
+            }
           }
         }
-      }
-      function el_onmousedown(ev)
-      {
-        if ( obj.enabled )
-        {
-          HTMLArea._addClass(el, "buttonActive");
-          HTMLArea._removeClass(el, "buttonPressed");
-        }
-        HTMLArea.Events.stop(ev);
-      }
+      );
+
+      editor.addEvent(
+        el,
+        "mousedown",
+        function(ev)
+        {
+          if ( obj.enabled )
+          {
+            HTMLArea._addClass(el, "buttonActive");
+            HTMLArea._removeClass(el, "buttonPressed");
+          }
+          HTMLArea.Events.stop(ev);
+        }
+      );
+
       // when clicked, do the following:
-      function el_onclick(ev)
-      {
-        if ( obj.enabled )
-        {
-          HTMLArea._removeClass(el, "buttonActive");
-          //HTMLArea._removeClass(el, "buttonHover");
-          if ( HTMLArea.is_gecko )
+      editor.addEvent(
+        el,
+        "click",
+        function(ev)
+        {
+          if ( obj.enabled )
           {
-            editor.activateEditor();
+            HTMLArea._removeClass(el, "buttonActive");
+            //HTMLArea._removeClass(el, "buttonHover");
+            if ( HTMLArea.is_gecko )
+            {
+              editor.activateEditor();
+            }
+            obj.cmd(editor, obj.name, obj);
           }
-          obj.cmd(editor, obj.name, obj);
-        }
-        HTMLArea.Events.stop(ev);
-      }
-      editor.addEvent(el, 'mouseout', el_onmouseout);
-      editor.addEvent(el, 'mousedown', el_onmousedown);
-      editor.addEvent(el, 'click', el_onclick);
+          HTMLArea.Events.stop(ev);
+        }
+      );
 
       var i_contain = HTMLArea.makeBtnImg(btn[1]);
@@ -1433 +1448 @@
   }
 
+  if ( typeof colorPicker == 'undefined' )
+  {
+    HTMLArea._loadback(_editor_url + 'popups/color_picker.js', this.generate, this );
+    return false;
+  }
+
   if ( _editor_skin !== "" )
   {
@@ -1608 +1629 @@
 
     // update the original form.submit() function. See ticket #823
+    // disabled until a proper fix for IE is found
+/*
     if ( !textarea.form.xinha_submit )
     {
@@ -1628 +1651 @@
       };
     }
-    
-    // this variable should already be saved when the editor was generating
+*/
+    // [mokhet] this variable should already be saved when the editor was generating
     var initialTAContent = textarea.value;
 
     // onreset revert the HTMLArea content to the textarea content
-    function form_onreset()
-    {
-      editor.setHTML(editor.inwardHtml(initialTAContent));
-      editor.updateToolbar();
-      return true;
-    }
-    editor.prependDom0Event(textarea.form, 'reset', form_onreset);
+    editor.prependDom0Event(
+      textarea.form,
+      'reset',
+      function()
+      {
+        editor.setHTML(editor.inwardHtml(initialTAContent));
+        editor.updateToolbar();
+        return true;
+      }
+    );
   }
 
   // add a handler for the "back/forward" case -- on body.unload we save
   // the HTML content into the original textarea.
-  function backforward()
-  {
-    textarea.value = editor.outwardHtml(editor.getHTML());
-    return true;
-  }
-  editor.prependDom0Event(window, 'unload', backforward);
+  editor.prependDom0Event(
+    window,
+    'unload',
+    function()
+    {
+      textarea.value = editor.outwardHtml(editor.getHTML());
+      return true;
+    }
+  );
 
   // Hide textarea
@@ -1659 +1688 @@
   // Add an event to initialize the iframe once loaded.
   editor._iframeLoadDone = false;
-  function iframe_onload()
-  {
-    if ( !editor._iframeLoadDone )
-    {
-      editor._iframeLoadDone = true;
-      editor.initIframe();
-    }
-    return true;
-  }
-  editor.addEvent(iframe, 'load', iframe_onload);
+  editor.addEvent(
+    iframe,
+    'load',
+    function()
+    {
+      if ( !editor._iframeLoadDone )
+      {
+        editor._iframeLoadDone = true;
+        editor.initIframe();
+      }
+      return true;
+    }
+  );
 
   return true;
@@ -2367 +2399 @@
       var doc = editor._doc;
       // if we have multiple editors some bug in Mozilla makes some lose editing ability
-      editor.addEvent(doc, 'mousedown', editor.activateEditor, false, editor);
+      editor.addEvent(
+        doc,
+        "mousedown",
+        function()
+        {
+          editor.activateEditor();
+          return true;
+        }
+      );
 
       // intercept some events; for updating the toolbar & keyboard handlers
@@ -3090 +3130 @@
           for ( var ka = 0; ka < attrs.length; ++ka )
           {
-            // eval ???? why not using the following line instead ?
+            // [mokhet] eval ???? why not using the following line instead ?
             // if ( !ancestors[k][attrs[ka]] )
             if ( !eval("ancestors[k]." + attrs[ka]) )
@@ -3667 +3707 @@
 };
 
-// Why is this is still in the trunk ?
+// [mokhet] move to deprecated.js ticket #829
 // there's no reference to it anywhere else even in plugins
 HTMLArea.prototype._formatBlock = function(block_format)
@@ -3766 +3806 @@
     }
   }
-
+  return true;
 };
 
@@ -4247 +4287 @@
 {
   var editor = this;    // for nested functions
+  var btn = editor._toolbarObjects[cmdID].element;
   if ( cmdID == 'hilitecolor' )
   {
@@ -4262 +4303 @@
     }
   }
-  this._popupDialog(
-    editor.config.URIs.select_color,
-    function(color)
-    {
-      // selection not canceled
-      if ( color )
-      {
-        editor._doc.execCommand(cmdID, false, "#" + color);
-      }
-    },
-    HTMLArea._colorToRgb(this._doc.queryCommandValue(cmdID)));
+  var cback = function(color) { editor._doc.execCommand(cmdID, false, color); };
+  if ( HTMLArea.is_ie )
+  {
+    var range = editor._createRange(editor._getSelection());
+    cback = function(color)
+    {
+      range.select();
+      editor._doc.execCommand(cmdID, false, color);
+    };
+  }
+  var picker = new colorPicker({cellsize:editor.config.colorPickerCellsize,callback:cback,granularity:editor.config.colorPickerGranularity});
+  picker.open(editor.config.colorPickerPosition, btn);
 };
 
@@ -5297 +5339 @@
 
 // FIXME!!! this should return false for IE < 5.5
+// @todo : this should check for objects existence and NOT on useragent strings
 HTMLArea.checkSupportedBrowser = function()
 {
@@ -5388 +5431 @@
   }
 };
+
+/**
+ * Remove the notifier for the couple ev / fn
+ * @param {string} ev EventNotifier type to remove
+ * @param {object} fn Function to remove
+ * @return {boolean} true if the removing was successfull
+ * @public
+ */
+HTMLArea.prototype.notifyRemove = function(ev, fn)
+{
+  if ( this._notifyListeners[ev] )
+  {
+    var index = this._notifyListeners[ev].indexOf(fn);
+    if ( index != -1 )
+    {
+      this._notifyListeners[ev].splice(index, 1);
+      return true;
+    }
+  }
+  return false;
+};
+
 
 /*
@@ -6607 +6672 @@
   if ( returnValue )
   {
-    this.notifyOn('dispose', function() { HTMLArea.Events.remove(element, type, handler, scope); });
+    function notifier() { HTMLArea.Events.remove(element, type, handler, scope); }
+    function notifierRemove()
+    {
+      // call the notifier to actually remove the listener
+      notifier();
+      // remove the notifiers
+      this.notifyRemove('dispose', notifier);
+      this.notifyRemove('remove_event_autodisposer', notifierRemove);
+    }
+    this.notifyOn('dispose', notifier);
+    this.notifyOn('remove_event_autodisposer', notifierRemove);
   }
   return returnValue;
@@ -6632 +6707 @@
 {
   return this.addEvent(element, type, handler, 'prepend', scope, arbitraryObj);
+};
+
+/**
+ * Remove an event listener and remove the associated dispose notifier
+ * @see HTMLArea.Events.remove, @see HTMLArea.prototype.addEvent
+ * @public
+ */
+HTMLArea.prototype.removeEvent = function(element, type, handler, scope)
+{
+  this.notifyOf('remove_event_autodisposer');
 };
 
@@ -7224 +7309 @@
 /*
 ---------------------------------------------------------------------------
-  COMPATIBILITY ALIAS
+  EVENT COMPATIBILITY ALIAS
 ---------------------------------------------------------------------------
 */

branches/mokhet/plugins/ListType/list-type.js

@@ -37 +37 @@
   {
     editor._ListType = editor.addPanel( 'right' );
-    HTMLArea.freeLater( editor, '_ListType' );
+    editor.freeLater( editor, '_ListType' );
     HTMLArea.addClass( editor._ListType, 'ListType' );
     // hurm, ok it's pretty to use the background color for the whole panel,
@@ -46 +46 @@
       function(e,args)
       {
-        if ( args.mode == 'text' ) editor.hidePanel( editor._ListType );
+        if ( args.mode == 'text' ) { editor.hidePanel( editor._ListType ); }
       }
     );
@@ -130 +130 @@
 ListType.prototype.onUpdateToolbar = function()
 {
-  if ( this.editor.config.ListType.mode == 'toolbar' ) return ;
+  if ( this.editor.config.ListType.mode == 'toolbar' ) { return ; }
   var parent = this.editor.getParentElement();
-  while ( parent && !/^[o|u]l$/i.test( parent.tagName ) )
+  while ( parent && parent.tagName && !/^[o|u]l$/i.test( parent.tagName ) )
+  {
     parent = parent.parentNode;
-  if (parent && /^[o|u]l$/i.test( parent.tagName ) )
+  }
+  if (parent && parent.tagName && /^[o|u]l$/i.test( parent.tagName ) )
   {
     this.showPanel( parent );
   }
-  else if (this.editor._ListType.style.display != 'none')
+  else if ( this.editor._ListType.style.display != 'none' )
   {
     this.editor.hidePanel( this.editor._ListType );

branches/mokhet/popups/color_picker.js

@@ -75 +75 @@
   function colorPicker(params)
   {
+    // if the savedColors is empty, try to read the savedColors from cookie
+    if ( colorPicker.savedColors.length == 0 )
+    {
+      colorPicker.loadColors();
+    }
     var picker = this;
     this.callback = params.callback?params.callback:function(color){alert('You picked ' + color )};
 
+    this.websafe  = params.websafe?params.websafe:false;
     this.cellsize = params.cellsize?params.cellsize:'10px';
     this.side     = params.granularity?params.granularity:18;
@@ -289 +295 @@
         this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px';
       }
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      this.iframe.style.top = this.table.style.top;
+      this.iframe.style.left = this.table.style.left;
+      @*/
     };
 
@@ -339 +350 @@
               }
             }
-            td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+            td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
             td.appendChild(document.createTextNode(' '));
             td.style.cursor = 'pointer';
@@ -414 +425 @@
             }
           }
-          td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
+          td.onclick = function() { colorPicker.remember(this.colorCode); picker.callback(this.colorCode); picker.close(); }
           td.appendChild(document.createTextNode(' '));
           td.style.cursor = 'pointer';
@@ -430 +441 @@
         td.style.padding = '3px';
 
+        if ( this.websafe )
+        {
         var div = document.createElement('div');
         var label = document.createElement('label');
@@ -440 +453 @@
         div.appendChild(label);
         td.appendChild(div);
+        }
 
         var div = document.createElement('div');
@@ -467 +481 @@
         td.appendChild(sampleTable);
 
+        var savedColors = document.createElement('div');
+        savedColors.style.clear = 'both';
+
+        function createSavedColors(color)
+        {
+          var is_ie = false;
+          /*@cc_on is_ie = true; @*/
+          var div = document.createElement('div');
+          div.style.width = '13px';
+          div.style.height = '13px';
+          div.style.margin = '1px';
+          div.style.border = '1px solid black';
+          div.style.cursor = 'pointer';
+          div.style.backgroundColor = color;
+          div.style[ is_ie ? 'styleFloat' : 'cssFloat'] = 'left';
+          div.onclick = function() { picker.callback(color); picker.close(); };
+          div.onmouseover = function()
+          {
+            picker.chosenColor.value = color;
+            picker.backSample.style.backgroundColor = color;
+            picker.foreSample.style.color = color;
+          };
+          savedColors.appendChild(div);
+        }
+        for ( var savedCols = 0; savedCols < colorPicker.savedColors.length; savedCols++ )
+        {
+          createSavedColors(colorPicker.savedColors[savedCols]);
+        }
+        td.appendChild(savedColors);
 
         this.tbody.appendChild(tr);
         document.body.appendChild(this.table);
-
+        // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+        /*@cc_on
+        if ( !this.iframe )
+        {
+          this.iframe = document.createElement('iframe');
+          this.iframe.style.zIndex = 999;
+          this.table.style.zIndex = 1000;
+          this.iframe.style.position = 'absolute';
+          this.iframe.style.width = this.table.offsetWidth;
+          this.iframe.style.height = this.table.offsetHeight;
+          this.iframe.border = 0;
+          this.iframe.frameBorder = 0;
+          this.iframe.frameSpacing = 0;
+          this.iframe.marginWidth = 0;
+          this.iframe.marginHeight = 0;
+          this.iframe.hspace = 0;
+          this.iframe.vspace = 0;
+          document.body.appendChild(this.iframe);
+        }
+        this.iframe.style.display = '';
+        @*/
       }
       else
@@ -496 +559 @@
     {
       this.table.style.display = 'none';
+      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker
+      /*@cc_on
+      if ( this.iframe ) { this.iframe.style.display = 'none'; }
+      @*/
     };
-
   }
+
+// array of the saved colors
+colorPicker.savedColors = [];
+
+// add the color to the savedColors
+colorPicker.remember = function(color)
+{
+  // check if this color is known
+  for ( var i = colorPicker.savedColors.length; i--; )
+  {
+    if ( colorPicker.savedColors[i] == color )
+    {
+      return false;
+    }
+  }
+  // insert the new color
+  colorPicker.savedColors.splice(0, 0, color);
+  // limit elements
+  colorPicker.savedColors = colorPicker.savedColors.slice(0, 21);
+  //[mokhet] probably some more parameters to send to the cookie definition
+  // like domain, secure and such, especially with https connection i presume
+  // save the cookie
+  var expdate = new Date();
+  expdate.setMonth(expdate.getMonth() + 1);
+
+  document.cookie = 'XinhaColorPicker=' + escape (colorPicker.savedColors.join('-')) + ';expires=' + expdate.toGMTString();
+  return true;
+};
+
+// try to read the colors from the cookie
+colorPicker.loadColors = function()
+{
+  var index = document.cookie.indexOf('XinhaColorPicker');
+  if ( index != -1 )
+  {
+    var begin = (document.cookie.indexOf('=', index) + 1);
+    var end = document.cookie.indexOf(';', index);
+    if ( end == -1 ) { end = document.cookie.length; }
+    colorPicker.savedColors = unescape(document.cookie.substring(begin, end)).split('-');
+  }
+};

branches/mokhet/popups/popup.js

@@ -11 +11 @@
 //
 // $Id$
-HTMLArea = window.opener.HTMLArea;
+var HTMLArea = window.opener.HTMLArea;
 
 function getAbsolutePos(el) {