Changeset 1369

Timestamp:

2008-01-19 16:27:03 (2 years ago)

Author:

fredck

Message:

• Various small code fixes.
• Throbber code simplification, including changes for the CSS requirements for it, and usage of skins color scheme for the boxes.

Location:

FCKeditor/branches/features/floating_dialog/editor

Files:

• fckdialog.html (modified) (25 diffs)
• skins/default/fck_dialog.css (modified) (2 diffs)
• skins/office2003/fck_dialog.css (modified) (1 diff)
• skins/silver/fck_dialog.css (modified) (1 diff)

FCKeditor/branches/features/floating_dialog/editor/fckdialog.html

@@ -28 +28 @@
                 <meta name="robots" content="noindex, nofollow" />
                 <script type="text/javascript">
+
 // It seems referencing to frameElement._DialogArguments directly would lead to memory leaks in IE.
 // So let's use functions to access its members instead.
@@ -37 +38 @@
 function Editor()
 {
-        return Args().Editor ;
+        return frameElement._DialogArguments.Editor ;
 }
 
 function ParentDialog( dialog )
 {
-        if ( !dialog )
-                return frameElement._ParentDialog ;
-        else
-                return dialog._ParentDialog ;
+        return dialog ? dialog._ParentDialog : frameElement._ParentDialog ;
 }
 
@@ -58 +56 @@
                 try
                 {
-                        var parentDomain = Args().TopWindow ? Args().TopWindow.document.domain : Editor().document.domain ;
+                        var parentDomain = ( Args().TopWindow || Editor() ).document.domain ;
 
                         if ( document.domain != parentDomain )
                                 document.domain = parentDomain ;
+
                         break ;
                 }
@@ -76 +75 @@
 })() ;
 
-var FCK                 = Editor().FCK ;
+var FCK                         = Editor().FCK ;
 var FCKTools            = Editor().FCKTools ;
 var FCKDomTools         = Editor().FCKDomTools ;
@@ -90 +89 @@
 
 // Sets the language direction.
-window.document.dir = Editor().FCKLang.Dir ;
-
-if ( FCKBrowserInfo.IsIE )
-{
-        // IE does not set the window name in showModalDialog(), let's set it here.
-        window.name = Args().DialogName ;
-
-        // For IE6-, the fck_dialog_ie6.js is loaded, used to fix limitations in the browser.
-        if ( !FCKBrowserInfo.IsIE7 )
-                document.write( '<' + 'script type="text/javascript" src="' + FCKConfig.SkinPath + 'fck_dialog_ie6.js"><' + '\/script>' ) ;
-}
+var langDir = window.document.dir = Editor().FCKLang.Dir ;
+
+// For IE6-, the fck_dialog_ie6.js is loaded, used to fix limitations in the browser.
+if ( FCKBrowserInfo.IsIE && !FCKBrowserInfo.IsIE7 )
+        document.write( '<' + 'script type="text/javascript" src="' + FCKConfig.SkinPath + 'fck_dialog_ie6.js"><' + '\/script>' ) ;
 
 FCKTools.RegisterDollarFunction( window ) ;
@@ -108 +101 @@
 {
         var bAutoSize = false ;
+
         var retval = {
                 // Sets whether the dialog should auto-resize according to its content's height.
@@ -120 +114 @@
                 {
                         var frmMain = $( 'frmMain' ) ;
-                        
+
                         if ( frmMain )
                         {
                                 // Get the container size.
                                 var height = $( 'contents' ).offsetHeight ;
-                                
+
                                 // Subtract the size of other elements.
                                 height -= $( 'TitleArea' ).offsetHeight ;
                                 height -= $( 'TabsRow' ).offsetHeight ;
                                 height -= $( 'DialogButtons' ).offsetHeight ;
-                                
+
                                 frmMain.style.height = Math.max( height, 0 ) + 'px' ;
                         }
@@ -168 +162 @@
                                 // Get the current frame size.
                                 var frameSize = FCKTools.GetViewPaneSize( frmMain.contentWindow ) ;
-                                
+
                                 var deltaWidth  = innerWidth - frameSize.Width ;
                                 var deltaHeight = innerHeight - frameSize.Height ;
 
-                                // If the contents fits the current size.               
+                                // If the contents fits the current size.
                                 if ( deltaWidth <= 0 && deltaHeight <= 0 )
                                         return ;
-                                
+
                                 var dialogWidth         = frameElement.offsetWidth + Math.max( deltaWidth, 0 ) ;
                                 var dialogHeight        = frameElement.offsetHeight + Math.max( deltaHeight, 0 ) ;
@@ -185 +179 @@
         }
 
-        /** 
+        /**
          * Safari seems to have a bug with the time when RefreshSize() is executed - it
          * thinks frmMain's innerHeight is 0 if we query the value too soon after the
@@ -207 +201 @@
 
         window.SetAutoSize = FCKTools.Bind( retval, retval.SetAutoSize ) ;
+
         return retval ;
 }() ;
@@ -213 +208 @@
 var Throbber = function()
 {
-        var timer = null ;
-        var baseIndex = 0 ;
+        var timer ;
+
         var updateThrobber = function()
         {
                 var throbberParent = $( 'throbberBlock' ) ;
                 var throbberBlocks = throbberParent.childNodes ;
-                for ( var i = 0 ; i < throbberBlocks.length ; i++ )
-                {
-                        var classes = throbberBlocks[i].className.split( ' ' ) ;
-                        classes.pop() ;
-                        classes.push( 'throbber_' + ( baseIndex + i ) % 10 ) ;
-                        throbberBlocks[i].className = classes.join( ' ' ) ;
-                }
-                baseIndex-- ;
-                if ( baseIndex < 0 )
-                        baseIndex += 10 ;
-                timer = FCKTools.SetTimeout( arguments.callee, 100, this, null, window ) ;
-        }
-
-        FCKTools.AddEventListener( window, 'beforeunload', function()
-                {
-                        if ( timer )
-                                clearTimeout( timer ) ;
-                } ) ;
+                var lastClass = throbberParent.lastChild.className ;
+
+                // From the last to the second one, copy the class from the previous one.
+                for ( var i = throbberBlocks.length - 1 ; i > 0 ; i-- )
+                        throbberBlocks[i].className = throbberBlocks[i-1].className ;
+
+                // For the first one, copy the last class (rotation).
+                throbberBlocks[0].className = lastClass ;
+        }
 
         return {
                 Show : function( waitMilliseconds )
                 {
+                        // Auto-setup the Show function to be called again after the
+                        // requested amount of time.
                         if ( waitMilliseconds && waitMilliseconds > 0 )
                         {
@@ -248 +236 @@
 
                         var throbberParent = $( 'throbberBlock' ) ;
-                        for ( var i = 0 ; i < 10 ; i++)
-                                throbberParent.appendChild( document.createElement( 'div' ) ).className = 'throbber_' + ( i > 0 ? 'right' : 'left' ) 
-                                        + ' throbber_' + i ;
-                        baseIndex = 9 ;
-
+
+                        // Create the throbber blocks.
+                        var classIds = [ 1,2,3,4,5,4,3,2 ] ;
+                        while ( classIds.length > 0 )
+                                throbberParent.appendChild( document.createElement( 'div' ) ).className = ' throbber_' + classIds.shift() ;
+
+                        // Center the throbber.
                         var frm = $( 'contents' ) ;
                         var frmCoords = FCKTools.GetDocumentPosition( window, frm ) ;
@@ -260 +250 @@
                         throbberParent.style.top = parseInt( y, 10 ) + 'px' ;
 
-                        timer = FCKTools.SetTimeout( updateThrobber, 100, this, null, window ) ;
+                        // Show it.
+                        throbberParent.style.visibility = ''  ;
+
+                        // Setup the animation interval.
+                        timer = setInterval( updateThrobber, 100 ) ;
                 },
 
@@ -267 +261 @@
                         if ( timer )
                         {
-                                clearTimeout( timer ) ;
+                                clearInterval( timer ) ;
                                 timer = null ;
                         }
@@ -284 +278 @@
         var lastCoords ;
         var currentPos ;
-        
+
         var cleanUpHandlers = function()
         {
@@ -353 +347 @@
                                 return ;
 
-                        lastCoords = 
-                        {
-                                x : evt.screenX, 
+                        lastCoords =
+                        {
+                                x : evt.screenX,
                                 y : evt.screenY
                         } ;
 
                         // Save the current IFRAME position.
-                        currentPos = 
+                        currentPos =
                         {
                                 x : parseInt( FCKDomTools.GetCurrentElementStyle( Args().TopWindow, frameElement, 'left' ) ),
@@ -507 +501 @@
 }() ;
 
-// readystatechange handler for registering drag and drop handlers in cover iframes, defined out here to avoid memory leak.
-// Do NOT put this function as a private function as it will induce memory leak in IE and it's not detectable with Drip or 
-// sIEve and undetectable leaks are really nasty (sigh).
+// readystatechange handler for registering drag and drop handlers in cover
+// iframes, defined out here to avoid memory leak.
+// Do NOT put this function as a private function as it will induce memory leak
+// in IE and it's not detectable with Drip or sIEve and undetectable leaks are
+// really nasty (sigh).
 var onReadyRegister = function()
 {
@@ -517 +513 @@
 } ;
 
-// The business logic of the dialog, dealing with operational things like dialog open/dialog close/enable/disable/etc.
+// The business logic of the dialog, dealing with operational things like
+// dialog open/dialog close/enable/disable/etc.
 (function()
 {
@@ -632 +629 @@
                 // First of all, translate the dialog box contents.
                 Editor().FCKLanguageManager.TranslatePage( document ) ;
-                
+
                 // Create the IFRAME that holds the dialog contents.
                 $( 'innerContents' ).innerHTML = '<iframe id="frmMain" src="' + Args().Page + '" name="frmMain" frameborder="0" width="100%" height="100%" scrolling="auto" style="visibility: hidden;" allowtransparency="true"></iframe>' ;
         } ;
-        
+
         window.InnerDialogLoaded = function()
         {
@@ -653 +650 @@
 
                 // Set the language direction.
-                innerDoc.dir = Editor().FCKLang.Dir ;
+                innerDoc.dir = langDir ;
 
                 // Sets the Skin CSS.
@@ -664 +661 @@
 
                 DragAndDrop.RegisterHandlers( innerWindow ) ;
-                
+
                 innerWindow.focus() ;
 
@@ -678 +675 @@
         {
                 Selection.EnsureSelection() ;
-                
+
                 var frmMain = window.frames["frmMain"] ;
 
@@ -694 +691 @@
         window.CloseDialog = function( dontFireChange )
         {
+                Throbber.Hide() ;
+
                 Selection.EnsureSelection() ;
 
@@ -761 +760 @@
                                                 <td width="100%">&nbsp;</td>
                                                 <td nowrap="nowrap">
-                                                        <input id="btnOk" style="VISIBILITY: hidden;" type="button" value="Ok" class="Button" onclick="Ok();" fckLang="DlgBtnOK" />
+                                                        <input id="btnOk" style="visibility: hidden;" type="button" value="Ok" class="Button" onclick="Ok();" fckLang="DlgBtnOK" />
                                                         &nbsp;
                                                         <input id="btnCancel" type="button" value="Cancel" class="Button" onclick="Cancel();" fckLang="DlgBtnCancel" />
@@ -778 +777 @@
                 <div class="br"></div>
                 <div class="cover" id="cover" style="display:none"></div>
-                <div id="throbberBlock" style="position: absolute; z-index: 10; text-align: center; font-size: 9px;"></div>
+                <div id="throbberBlock" style="position: absolute; visibility: hidden"></div>
                 <script type="text/javascript">
                         // Set the class name for language direction.
-                        document.body.className += ' ' + Editor().FCKLang.Dir ;
+                        document.body.className += ' ' + langDir ;
 
                         var cover = $( 'cover' ) ;

FCKeditor/branches/features/floating_dialog/editor/skins/default/fck_dialog.css

@@ -166 +166 @@
         right: 16px;
         bottom: 20px;
-        background-color: #e3e3c7;
+        background-color: #f1f1e3;
         overflow: hidden;
         z-index: 1;
@@ -355 +355 @@
 }
 
-.throbber_left, .throbber_right
-{
-        position: relative;
+#throbberBlock 
+{
+        z-index: 10; 
+}
+
+#throbberBlock div
+{
+        float: left;
         width: 8px;
-        height: 10px;
-        float: left;
-}
-
-.throbber_right
-{
-        margin-left: 3px;
-}
-
-.throbber_0
-{
-        background-color: #555;
-}
+        height: 9px;
+        margin-left: 2px;
+        margin-right: 2px;
+        font-size: 1px; /* IE6 */
+}
+
+/* 
+        Color Gradient Generator:
+        http://www.herethere.net/~samson/php/color_gradient/?cbegin=737357&cend=E3E3C7&steps=4
+*/
 
 .throbber_1
 {
-        background-color: #666;
+        background-color: #737357;
 }
 
 .throbber_2
 {
-        background-color: #777;
+        background-color: #8f8f73;
 }
 
 .throbber_3
 {
-        background-color: #888;
+        background-color: #abab8f;
 }
 
 .throbber_4
 {
-        background-color: #999;
+        background-color: #c7c7ab;
 }
 
 .throbber_5
 {
-        background-color: #AAA;
-}
-
-.throbber_6
-{
-        background-color: #999;
-}
-
-.throbber_7
-{
-        background-color: #888;
-}
-
-.throbber_8
-{
-        background-color: #777;
-}
-
-.throbber_9
-{
-        background-color: #666;
-}
+        background-color: #e3e3c7;
+}

FCKeditor/branches/features/floating_dialog/editor/skins/office2003/fck_dialog.css

@@ -355 +355 @@
 }
 
-.throbber_left, .throbber_right
-{
-        position: relative;
+#throbberBlock 
+{
+        z-index: 10; 
+}
+
+#throbberBlock div
+{
+        float: left;
         width: 8px;
-        height: 10px;
-        float: left;
-}
-
-.throbber_right
-{
-        margin-left: 3px;
-}
-
-.throbber_0
-{
-        background-color: #555;
-}
+        height: 9px;
+        margin-left: 2px;
+        margin-right: 2px;
+        font-size: 1px; /* IE6 */
+}
+
+/* 
+        Color Gradient Generator:
+        http://www.herethere.net/~samson/php/color_gradient/?cbegin=0E3460&cend=8cb2fd&steps=4
+*/
 
 .throbber_1
 {
-        background-color: #666;
+        background-color: #0E3460;
 }
 
 .throbber_2
 {
-        background-color: #777;
+        background-color: #2D5387;
 }
 
 .throbber_3
 {
-        background-color: #888;
+        background-color: #4D73AE;
 }
 
 .throbber_4
 {
-        background-color: #999;
+        background-color: #6C92D5;
 }
 
 .throbber_5
 {
-        background-color: #AAA;
-}
-
-.throbber_6
-{
-        background-color: #999;
-}
-
-.throbber_7
-{
-        background-color: #888;
-}
-
-.throbber_8
-{
-        background-color: #777;
-}
-
-.throbber_9
-{
-        background-color: #666;
-}
+        background-color: #8CB2FD;
+}

FCKeditor/branches/features/floating_dialog/editor/skins/silver/fck_dialog.css

@@ -355 +355 @@
 }
 
-.throbber_left, .throbber_right
-{
-        position: relative;
+#throbberBlock 
+{
+        z-index: 10; 
+}
+
+#throbberBlock div
+{
+        float: left;
         width: 8px;
-        height: 10px;
-        float: left;
-}
-
-.throbber_right
-{
-        margin-left: 3px;
-}
-
-.throbber_0
-{
-        background-color: #555;
-}
+        height: 9px;
+        margin-left: 2px;
+        margin-right: 2px;
+        font-size: 1px; /* IE6 */
+}
+
+/* 
+        Color Gradient Generator:
+        http://www.herethere.net/~samson/php/color_gradient/?cbegin=504845&cend=DEDEDE&steps=4
+*/
 
 .throbber_1
 {
-        background-color: #666;
+        background-color: #504845;
 }
 
 .throbber_2
 {
-        background-color: #777;
+        background-color: #736D6B;
 }
 
 .throbber_3
 {
-        background-color: #888;
+        background-color: #979391;
 }
 
 .throbber_4
 {
-        background-color: #999;
+        background-color: #BAB8B7;
 }
 
 .throbber_5
 {
-        background-color: #AAA;
-}
-
-.throbber_6
-{
-        background-color: #999;
-}
-
-.throbber_7
-{
-        background-color: #888;
-}
-
-.throbber_8
-{
-        background-color: #777;
-}
-
-.throbber_9
-{
-        background-color: #666;
-}
+        background-color: #DEDEDE;
+}