JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
vanilla ckeditor-3.0
[ckeditor.git] / _source / plugins / floatpanel / plugin.js
diff --git a/_source/plugins/floatpanel/plugin.js b/_source/plugins/floatpanel/plugin.js
new file mode 100644 (file)
index 0000000..fb5e3a4
--- /dev/null
@@ -0,0 +1,325 @@
+/*\r
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+CKEDITOR.plugins.add( 'floatpanel',\r
+{\r
+       requires : [ 'panel' ]\r
+});\r
+\r
+(function()\r
+{\r
+       var panels = {};\r
+       var isShowing = false;\r
+\r
+       function getPanel( editor, doc, parentElement, definition, level )\r
+       {\r
+               // Generates the panel key: docId-eleId-skinName-langDir[-uiColor][-CSSs][-level]\r
+               var key =\r
+                       doc.getUniqueId() +\r
+                       '-' + parentElement.getUniqueId() +\r
+                       '-' + editor.skinName +\r
+                       '-' + editor.lang.dir +\r
+                       ( ( editor.uiColor && ( '-' + editor.uiColor ) ) || '' ) +\r
+                       ( ( definition.css && ( '-' + definition.css ) ) || '' ) +\r
+                       ( ( level && ( '-' + level ) ) || '' );\r
+\r
+               var panel = panels[ key ];\r
+\r
+               if ( !panel )\r
+               {\r
+                       panel = panels[ key ] = new CKEDITOR.ui.panel( doc, definition );\r
+                       panel.element = parentElement.append( CKEDITOR.dom.element.createFromHtml( panel.renderHtml( editor ), doc ) );\r
+\r
+                       panel.element.setStyles(\r
+                               {\r
+                                       display : 'none',\r
+                                       position : 'absolute'\r
+                               });\r
+               }\r
+\r
+               return panel;\r
+       }\r
+\r
+       CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass(\r
+       {\r
+               $ : function( editor, parentElement, definition, level )\r
+               {\r
+                       definition.forceIFrame = true;\r
+\r
+                       var doc = parentElement.getDocument(),\r
+                               panel = getPanel( editor, doc, parentElement, definition, level || 0 ),\r
+                               element = panel.element,\r
+                               iframe = element.getFirst().getFirst();\r
+\r
+                       this.element = element;\r
+\r
+                       this._ =\r
+                       {\r
+                               // The panel that will be floating.\r
+                               panel : panel,\r
+                               parentElement : parentElement,\r
+                               definition : definition,\r
+                               document : doc,\r
+                               iframe : iframe,\r
+                               children : [],\r
+                               dir : editor.lang.dir\r
+                       };\r
+               },\r
+\r
+               proto :\r
+               {\r
+                       addBlock : function( name, block )\r
+                       {\r
+                               return this._.panel.addBlock( name, block );\r
+                       },\r
+\r
+                       addListBlock : function( name, multiSelect )\r
+                       {\r
+                               return this._.panel.addListBlock( name, multiSelect );\r
+                       },\r
+\r
+                       getBlock : function( name )\r
+                       {\r
+                               return this._.panel.getBlock( name );\r
+                       },\r
+\r
+                       /*\r
+                               corner (LTR):\r
+                                       1 = top-left\r
+                                       2 = top-right\r
+                                       3 = bottom-right\r
+                                       4 = bottom-left\r
+\r
+                               corner (RTL):\r
+                                       1 = top-right\r
+                                       2 = top-left\r
+                                       3 = bottom-left\r
+                                       4 = bottom-right\r
+                        */\r
+                       showBlock : function( name, offsetParent, corner, offsetX, offsetY )\r
+                       {\r
+                               var panel = this._.panel,\r
+                                       block = panel.showBlock( name );\r
+\r
+                               this.allowBlur( false );\r
+                               isShowing = true;\r
+\r
+                               var element = this.element,\r
+                                       iframe = this._.iframe,\r
+                                       definition = this._.definition,\r
+                                       position = offsetParent.getDocumentPosition( element.getDocument() ),\r
+                                       rtl = this._.dir == 'rtl';\r
+\r
+                               var left        = position.x + ( offsetX || 0 ),\r
+                                       top             = position.y + ( offsetY || 0 );\r
+\r
+                               if ( ( rtl && ( corner == 1 || corner == 4 ) ) || ( !rtl && ( corner == 2 || corner == 3 ) ) )\r
+                                       left += offsetParent.$.offsetWidth - 1;\r
+\r
+                               if ( corner == 3 || corner == 4 )\r
+                                       top += offsetParent.$.offsetHeight - 1;\r
+\r
+                               // Memorize offsetParent by it's ID.\r
+                               this._.panel._.offsetParentId = offsetParent.getId();\r
+\r
+                               element.setStyles(\r
+                                       {\r
+                                               top : top + 'px',\r
+                                               left : '-3000px',\r
+                                               visibility : 'hidden',\r
+                                               opacity : '0',  // FF3 is ignoring "visibility"\r
+                                               display : ''\r
+                                       });\r
+\r
+                               // Configure the IFrame blur event. Do that only once.\r
+                               if ( !this._.blurSet )\r
+                               {\r
+                                       // Non IE prefer the event into a window object.\r
+                                       var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );\r
+\r
+                                       // With addEventListener compatible browsers, we must\r
+                                       // useCapture when registering the focus/blur events to\r
+                                       // guarantee they will be firing in all situations. (#3068, #3222 )\r
+                                       CKEDITOR.event.useCapture = true;\r
+\r
+                                       focused.on( 'blur', function( ev )\r
+                                               {\r
+                                                       if ( CKEDITOR.env.ie && !this.allowBlur() )\r
+                                                               return;\r
+\r
+                                                       // As we are using capture to register the listener,\r
+                                                       // the blur event may get fired even when focusing\r
+                                                       // inside the window itself, so we must ensure the\r
+                                                       // target is out of it.\r
+                                                       var target = ev.data.getTarget(),\r
+                                                               targetWindow = target.getWindow && target.getWindow();\r
+\r
+                                                       if ( targetWindow && targetWindow.equals( focused ) )\r
+                                                               return;\r
+\r
+                                                       if ( this.visible && !this._.activeChild && !isShowing )\r
+                                                               this.hide();\r
+                                               },\r
+                                               this );\r
+\r
+                                       focused.on( 'focus', function()\r
+                                               {\r
+                                                       this._.focused = true;\r
+                                                       this.hideChild();\r
+                                                       this.allowBlur( true );\r
+                                               },\r
+                                               this );\r
+\r
+                                       CKEDITOR.event.useCapture = false;\r
+\r
+                                       this._.blurSet = 1;\r
+                               }\r
+\r
+                               panel.onEscape = CKEDITOR.tools.bind( function()\r
+                                       {\r
+                                               this.onEscape && this.onEscape();\r
+                                       },\r
+                                       this );\r
+\r
+                               CKEDITOR.tools.setTimeout( function()\r
+                                       {\r
+                                               if ( rtl )\r
+                                                       left -= element.$.offsetWidth;\r
+\r
+                                               element.setStyles(\r
+                                                       {\r
+                                                               left : left + 'px',\r
+                                                               visibility      : '',\r
+                                                               opacity : '1'   // FF3 is ignoring "visibility"\r
+                                                       });\r
+\r
+                                               if ( block.autoSize )\r
+                                               {\r
+                                                       function setHeight()\r
+                                                       {\r
+                                                               var target = element.getFirst();\r
+                                                               var height = block.element.$.scrollHeight;\r
+\r
+                                                               // Account for extra height needed due to IE quirks box model bug:\r
+                                                               // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
+                                                               // (#3426)\r
+                                                               if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && height > 0 )\r
+                                                                       height += ( target.$.offsetHeight || 0 ) - ( target.$.clientHeight || 0 );\r
+\r
+                                                               target.setStyle( 'height', height + 'px' );\r
+\r
+                                                               // Fix IE < 8 visibility.\r
+                                                               panel._.currentBlock.element.setStyle( 'display', 'none' ).removeStyle( 'display' );\r
+                                                       }\r
+\r
+                                                       if ( panel.isLoaded )\r
+                                                               setHeight();\r
+                                                       else\r
+                                                               panel.onLoad = setHeight;\r
+                                               }\r
+                                               else\r
+                                                       element.getFirst().removeStyle( 'height' );\r
+\r
+                                               // Set the IFrame focus, so the blur event gets fired.\r
+                                               CKEDITOR.tools.setTimeout( function()\r
+                                                       {\r
+                                                               if ( definition.voiceLabel )\r
+                                                               {\r
+                                                                       if ( CKEDITOR.env.gecko )\r
+                                                                       {\r
+                                                                               var container = iframe.getParent();\r
+                                                                               container.setAttribute( 'role', 'region' );\r
+                                                                               container.setAttribute( 'title', definition.voiceLabel );\r
+                                                                               iframe.setAttribute( 'role', 'region' );\r
+                                                                               iframe.setAttribute( 'title', ' ' );\r
+                                                                       }\r
+                                                               }\r
+                                                               if ( CKEDITOR.env.ie && CKEDITOR.env.quirks )\r
+                                                                       iframe.focus();\r
+                                                               else\r
+                                                                       iframe.$.contentWindow.focus();\r
+\r
+                                                               // We need this get fired manually because of unfired focus() function.\r
+                                                               if ( CKEDITOR.env.ie && !CKEDITOR.env.quirks )\r
+                                                                       this.allowBlur( true );\r
+                                                       }, 0, this);\r
+                                       }, 0, this);\r
+                               this.visible = 1;\r
+\r
+                               if ( this.onShow )\r
+                                       this.onShow.call( this );\r
+\r
+                               isShowing = false;\r
+                       },\r
+\r
+                       hide : function()\r
+                       {\r
+                               if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) )\r
+                               {\r
+                                       this.hideChild();\r
+                                       this.element.setStyle( 'display', 'none' );\r
+                                       this.visible = 0;\r
+                               }\r
+                       },\r
+\r
+                       allowBlur : function( allow )   // Prevent editor from hiding the panel. #3222.\r
+                       {\r
+                               var panel = this._.panel;\r
+                               if ( allow != undefined )\r
+                                       panel.allowBlur = allow;\r
+\r
+                               return panel.allowBlur;\r
+                       },\r
+\r
+                       showAsChild : function( panel, blockName, offsetParent, corner, offsetX, offsetY )\r
+                       {\r
+                               // Skip reshowing of child which is already visible.\r
+                               if ( this._.activeChild == panel && panel._.panel._.offsetParentId == offsetParent.getId() )\r
+                                       return;\r
+\r
+                               this.hideChild();\r
+\r
+                               panel.onHide = CKEDITOR.tools.bind( function()\r
+                                       {\r
+                                               // Use a timeout, so we give time for this menu to get\r
+                                               // potentially focused.\r
+                                               CKEDITOR.tools.setTimeout( function()\r
+                                                       {\r
+                                                               if ( !this._.focused )\r
+                                                                       this.hide();\r
+                                                       },\r
+                                                       0, this );\r
+                                       },\r
+                                       this );\r
+\r
+                               this._.activeChild = panel;\r
+                               this._.focused = false;\r
+\r
+                               panel.showBlock( blockName, offsetParent, corner, offsetX, offsetY );\r
+\r
+                               /* #3767 IE: Second level menu may not have borders */\r
+                               if ( CKEDITOR.env.ie7Compat || ( CKEDITOR.env.ie8 && CKEDITOR.env.ie6Compat ) )\r
+                               {\r
+                                       setTimeout(function()\r
+                                               {\r
+                                                       panel.element.getChild( 0 ).$.style.cssText += '';\r
+                                               }, 100);\r
+                               }\r
+                       },\r
+\r
+                       hideChild : function()\r
+                       {\r
+                               var activeChild = this._.activeChild;\r
+\r
+                               if ( activeChild )\r
+                               {\r
+                                       delete activeChild.onHide;\r
+                                       delete this._.activeChild;\r
+                                       activeChild.hide();\r
+                               }\r
+                       }\r
+               }\r
+       });\r
+})();\r