Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Made some improvements to the TinyMCE plugin, with regards to the ove…

…rlay

button.

Worked around a problem which caused the overlay button to no longer show up in
Opera 10 final. The Opera bug is related to losing image selection, due to the
use of queryCommandState, DOM changes, and mouse events. See Opera bug
DSK-265135 and TC: http://www.robodesign.ro/coding/0064/

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40130
  • Loading branch information...
commit 31138d5072ca9f49a7855c642b3f0011562d64d7 1 parent 63a4c3e
authored September 10, 2009
10  CHANGES
... ...
@@ -1,3 +1,13 @@
  1
+2009-09-10:
  2
+===========
  3
+
  4
+- Made some improvements to the TinyMCE plugin, with regards to the overlay 
  5
+button.
  6
+- Worked around a problem which caused the overlay button to no longer show up 
  7
+in Opera 10 final. The Opera bug is related to losing image selection, due to 
  8
+the use of queryCommandState, DOM changes, and mouse events. See Opera bug 
  9
+DSK-265135 and TC: http://www.robodesign.ro/coding/0064/
  10
+
1 11
 2009-08-27:
2 12
 ===========
3 13
 
115  ext/tinymce-plugin/paintweb/editor_plugin_src.js
@@ -17,7 +17,7 @@
17 17
  * along with PaintWeb.  If not, see <http://www.gnu.org/licenses/>.
18 18
  *
19 19
  * $URL: http://code.google.com/p/paintweb $
20  
- * $Date: 2009-08-23 16:30:16 +0300 $
  20
+ * $Date: 2009-09-10 20:53:06 +0300 $
21 21
  */
22 22
 
23 23
 /**
@@ -594,14 +594,21 @@ function paintwebEditCommand () {
594 594
     return;
595 595
   }
596 596
 
597  
-  var n = this.selection.getNode();
  597
+  var n = this.selection.getNode(),
  598
+      tag = n.nodeName.toLowerCase();
  599
+
  600
+  if (tag !== 'img' && overlayButton && overlayButton.parentNode && 
  601
+      overlayButton._targetImage) {
  602
+    n = overlayButton._targetImage;
  603
+    tag = n.nodeName.toLowerCase();
  604
+  }
598 605
 
599 606
   targetEditor    = this;
600 607
   targetContainer = this.getContainer();
601 608
   targetImage     = n;
602 609
 
603 610
   // If PaintWeb won't start, then we create a new image.
604  
-  if (!paintwebEditStart() && n.nodeName.toLowerCase() !== 'img') {
  611
+  if (!paintwebEditStart() && tag !== 'img') {
605 612
     this.windowManager.open(
606 613
       {
607 614
         file:   pluginUrl + '/newimage.html',
@@ -673,13 +680,22 @@ function overlayButtonCleanup (ed) {
673 680
     return;
674 681
   }
675 682
 
676  
-  var iframe = ed.getDoc();
  683
+  var iframe, elems, pNode;
  684
+
  685
+  if (overlayButton) {
  686
+    if (overlayButton.parentNode) {
  687
+      pNode = overlayButton.parentNode;
  688
+      pNode.removeChild(overlayButton);
  689
+    }
  690
+    overlayButton._targetImage = null;
  691
+  }
  692
+
  693
+  iframe = ed.getDoc();
677 694
   if (!iframe || !iframe.getElementsByClassName) {
678 695
     return;
679 696
   }
680 697
 
681  
-  var elems = iframe.getElementsByClassName(overlayButton.className),
682  
-      pNode;
  698
+  elems = iframe.getElementsByClassName(overlayButton.className);
683 699
 
684 700
   for (var i = 0; i < elems.length; i++) {
685 701
     pNode = elems[i].parentNode;
@@ -701,6 +717,8 @@ tinymce.create('tinymce.plugins.paintweb', {
701 717
    * @param {String} url Absolute URL to where the plugin is located.
702 718
    */
703 719
   init: function (ed, url) {
  720
+    var t = this;
  721
+
704 722
     pluginUrl = url;
705 723
 
706 724
     // Register the command so that it can be invoked by using 
@@ -715,8 +733,10 @@ tinymce.create('tinymce.plugins.paintweb', {
715 733
     });
716 734
 
717 735
     // Add a node change handler which enables the PaintWeb button in the UI 
718  
-    // when an image is selected.
719  
-    ed.onNodeChange.add(this.edNodeChange);
  736
+    // when an image is selected. This method should only be invoked for the 
  737
+    // keyup and click events.
  738
+    ed.onKeyUp.add(this.edNodeChange);
  739
+    ed.onClick.add(this.edNodeChange);
720 740
 
721 741
     var config = ed.getParam('paintweb_config') || {};
722 742
     if (!config.tinymce) {
@@ -735,11 +755,19 @@ tinymce.create('tinymce.plugins.paintweb', {
735 755
 
736 756
     // Create the overlay button element if the configuration allows so.
737 757
     if (config.tinymce.overlayButton) {
738  
-      ed.onClick.add(this.edClick);
739  
-      ed.onPreProcess.add(this.edPreProcess);
740  
-      ed.onBeforeGetContent.add(this.edPreProcess);
741  
-      ed.onRemove.add(this.edPreProcess);
742  
-      ed.onInit.add(overlayButtonCleanup);
  758
+      // Make sure the button doesn't show up in the article.
  759
+      ed.onPreProcess.add(overlayButtonCleanup);
  760
+      ed.onBeforeGetContent.add(overlayButtonCleanup);
  761
+      ed.onRemove.add(overlayButtonCleanup);
  762
+
  763
+      ed.onInit.add(function () {
  764
+        // Cleanup after initialization. Firefox remembers the content between 
  765
+        // page reloads.
  766
+        overlayButtonCleanup(ed);
  767
+
  768
+        ed.onKeyDown.addToTop(overlayButtonCleanup);
  769
+        ed.onMouseDown.addToTop(t.overlayButtonMouseDown);
  770
+      });
743 771
 
744 772
       overlayButton = tinymce.DOM.create('input', {
745 773
           'type':  'button',
@@ -788,39 +816,22 @@ tinymce.create('tinymce.plugins.paintweb', {
788 816
   },
789 817
 
790 818
   /**
791  
-   * The <code>preProcess</code> and <code>beforeGetContent</code> event 
792  
-   * handler. This method removes the PaintWeb overlay button.
793  
-   *
794  
-   * @param {tinymce.Editor} ed The editor instance that the plugin is 
795  
-   * initialized in.
796  
-   */
797  
-  edPreProcess: function (ed) {
798  
-    // Remove the overlay button.
799  
-    if (overlayButton && overlayButton.parentNode) {
800  
-      overlayButton._targetImage = null;
801  
-
802  
-      pNode = overlayButton.parentNode;
803  
-      pNode.removeChild(overlayButton);
804  
-    }
805  
-
806  
-    overlayButtonCleanup(ed);
807  
-  },
808  
-
809  
-  /**
810  
-   * The <code>nodeChange</code> event handler for the TinyMCE editor. This 
811  
-   * method provides visual feedback for editable image elements.
  819
+   * The <code>keyup</code> and <code>click</code> event handler for the TinyMCE 
  820
+   * editor. This method provides visual feedback for editable image elements.
812 821
    *
813 822
    * @private
814 823
    *
815 824
    * @param {tinymce.Editor} ed The editor instance that the plugin is 
816 825
    * initialized in.
817  
-   * @param {tinymce.ControlManager} cm The control manager.
818  
-   * @param {Node} n The DOM node for which the event is fired.
  826
+   * @param {Event} ev The DOM Event object.
819 827
    */
820  
-  edNodeChange: function (ed, cm, n) {
  828
+  edNodeChange: function (ed, ev) {
  829
+    var cm = ed.controlManager,
  830
+        n = ed.selection.getNode();
  831
+
821 832
     // Do not do anything inside the overlay button.
822  
-    if (overlayButton && overlayButton._targetImage && n && n.className === 
823  
-        overlayButton.className) {
  833
+    if (!n || overlayButton && overlayButton._targetImage && n && n.className 
  834
+        === overlayButton.className) {
824 835
       return;
825 836
     }
826 837
 
@@ -839,24 +850,6 @@ tinymce.create('tinymce.plugins.paintweb', {
839 850
       return;
840 851
     }
841 852
 
842  
-    // Remove the overlay button.
843  
-    if (overlayButton.parentNode) {
844  
-      overlayButton._targetImage = null;
845  
-
846  
-      pNode = overlayButton.parentNode;
847  
-      pNode.removeChild(overlayButton);
848  
-    }
849  
-
850  
-    if (n.nextSibling && n.nextSibling.className === overlayButton.className) {
851  
-      pNode = n.parentNode;
852  
-      pNode.removeChild(n.nextSibling);
853  
-    }
854  
-
855  
-    if (n.className === overlayButton.className) {
856  
-      pNode = n.parentNode;
857  
-      pNode.removeChild(n);
858  
-    }
859  
-
860 853
     if (!disabled) {
861 854
       var offsetTop  = 5,
862 855
           offsetLeft = 5,
@@ -886,13 +879,13 @@ tinymce.create('tinymce.plugins.paintweb', {
886 879
   },
887 880
 
888 881
   /**
889  
-   * The <code>click</code> event handler for the editor. This method starts 
  882
+   * The <code>mousedown</code> event handler for the editor. This method starts 
890 883
    * PaintWeb when the user clicks the "Edit" overlay button.
891 884
    *
892 885
    * @param {tinymce.Editor} ed The TinyMCE editor instance.
893 886
    * @param {Event} ev The DOM Event object.
894 887
    */
895  
-  edClick: function (ed, ev) {
  888
+  overlayButtonMouseDown: function (ed, ev) {
896 889
     // If the user clicked the Edit overlay button, then we consider the user 
897 890
     // wants to start PaintWeb.
898 891
     if (!targetImage && overlayButton && ev.target && ev.target.className === 
@@ -902,6 +895,10 @@ tinymce.create('tinymce.plugins.paintweb', {
902 895
       targetImage = overlayButton._targetImage;
903 896
 
904 897
       paintwebEditStart();
  898
+
  899
+    } else if (ev.target && ev.target.nodeName.toLowerCase() !== 'img') {
  900
+      // ... otherwise make sure the document is clean.
  901
+      overlayButtonCleanup(ed);
905 902
     }
906 903
   },
907 904
 

0 notes on commit 31138d5

Please sign in to comment.
Something went wrong with that request. Please try again.