Show
Ignore:
Timestamp:
2007-12-15 19:44:28 (9 months ago)
Author:
fredck
Message:

Several changes to the new dialog code:

  • Merged fck_dialog_floating.css in fck_dialog.css.
  • Using the sprite image for the close button.
  • Added hover effect in the close button.

* The cover for nested dialogs is also getting the color an opacity values from the config file.

  • The "dialogId" is not needed anymore.
  • Fixed the dialog centering algorithm for Firefox.
  • The dialog is now RTL compatible.
  • Using #ffffff for the main cover color. It makes it a bit lighter and cleaner. (still to check though).
  • Code cleanup. Simplified some things. Removed a few unused functions.
  • Unused images and files have been removed.
  • Some images now have a generic name, as they could be used outside the dialog scope (sprites and loading).
Files:
1 modified

Legend:

Unmodified
Added
Removed

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

    r1210 r1213  
    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    22<!-- 
    33 * FCKeditor - The text editor for Internet - http://www.fckeditor.net 
    … …  
    2727                <meta name="robots" content="noindex, nofollow" /> 
    2828                <script type="text/javascript"> 
    29                          
     29 
     30// Get the dialog arguments and the dialog frame from parent window 
     31var dialogFrame = window.frameElement ; 
     32var args                = window.dialogArguments = dialogFrame._DialogArguments ; 
     33var editor              = args.Editor ; 
     34 
    3035// Automatically detect the correct document.domain (#123). 
    3136(function() 
    … …  
    3843                try 
    3944                { 
    40                         var parentDomain = window.parent ? window.parent.document.domain : args.Editor.document.domain ; 
    41                          
     45                        var parentDomain = window.parent ? window.parent.document.domain : editor.document.domain ; 
     46 
    4247                        if ( document.domain != parentDomain ) 
    4348                                document.domain = parentDomain ; 
    … …  
    4550                } 
    4651                catch( e ) {} 
    47                  
     52 
    4853                // Remove a domain part: www.mytest.example.com => mytest.example.com => example.com ... 
    4954                d = d.replace( /.*?(?:\.|$)/, '' ) ; 
    … …  
    5156                if ( d.length == 0 ) 
    5257                        break ;         // It was not able to detect the domain. 
    53                  
     58 
    5459                document.domain = d ; 
    5560        } 
    56 })() ;  
    57  
    58 // Get the dialog arguments and the dialog frame from parent window 
    59 var dialogId = document.location.href.match( /dialogId=([^&]*)(&|$)/ )[1] ; 
    60 window.dialogArguments = parent.FCKDialogArguments[dialogId] ; 
    61 var dialogFrame = parent.document.getElementById(dialogId) ; 
    62 var oEditor = window.dialogArguments.Editor ; 
    63  
    64 var args = window.dialogArguments ; 
    65  
    66 var FCKBrowserInfo      = args.Editor.FCKBrowserInfo ; 
    67 var FCKConfig           = args.Editor.FCKConfig ; 
     61})() ; 
     62 
     63var FCKBrowserInfo      = editor.FCKBrowserInfo ; 
     64var FCKConfig           = editor.FCKConfig ; 
    6865 
    6966// Sets the Skin CSS 
    7067document.write( '<link href="' + FCKConfig.SkinPath + 'fck_dialog.css" type="text/css" rel="stylesheet">' ) ; 
    71 document.write( '<link href="' + FCKConfig.SkinPath + 'fck_dialog_floating.css" type="text/css" rel="stylesheet">' ) ; 
    7268 
    7369// Sets the language direction. 
    74 window.document.dir = args.Editor.FCKLang.Dir ; 
     70window.document.dir = editor.FCKLang.Dir ; 
    7571 
    7672if ( FCKBrowserInfo.IsIE ) 
    … …  
    8783document.write( '<title>' + sTitle + '<\/title>' ) ; 
    8884 
    89  
    9085function Init() 
    9186{ 
    … …  
    9388        LoadInnerDialog() ; 
    9489        ShowThrobberTimer = setTimeout( ShowThrobber, 5000 ) ; 
     90 
    9591        var titleElement = document.getElementById( 'TitleArea' ) ; 
    96         titleElement.onmousedown = oEditor.FCKDialog._DragMouseDownHandler ; 
    97  
    98         if ( oEditor.FCKBrowserInfo.IsIE ) 
     92        titleElement.onmousedown = editor.FCKDialog._DragMouseDownHandler ; 
     93 
     94        if ( FCKBrowserInfo.IsIE ) 
    9995                titleElement.setAttribute( 'unselectable', 'on' ) ; 
    100         else if ( oEditor.FCKBrowserInfo.IsGecko ) 
     96        else if ( FCKBrowserInfo.IsGecko ) 
    10197                titleElement.style.MozUserSelect = 'none' ; 
    102         else if ( oEditor.FCKBrowserInfo.IsSafari ) 
     98        else if ( FCKBrowserInfo.IsSafari ) 
    10399                titleElement.style.KhtmlUserSelect = 'none' ; 
    104100        else 
    105101                titleElement.style.userSelect = 'none' ; 
    106         oEditor.FCKDialog.RegisterDragHandlers( window ) ; 
     102        editor.FCKDialog.RegisterDragHandlers( window ) ; 
    107103} 
    108104 
    … …  
    113109 
    114110        // First of all, translate the dialog box contents. 
    115         args.Editor.FCKLanguageManager.TranslatePage( document ) ; 
     111        editor.FCKLanguageManager.TranslatePage( document ) ; 
    116112        document.getElementById( 'FrameCell' ).innerHTML = '<iframe id="frmMain" src="' + args.Page + '" name="frmMain" frameborder="0" width="100%" scrolling="auto"></iframe>' ; 
    117113} 
    … …  
    120116{ 
    121117        var throbberParent = document.getElementById( 'throbberBlock' ) ; 
    122         var frm = document.getElementById( 'frmMain' ) ;  
    123         var html = '<img src="%%" width="28" height="28" border="0" /><br />Loading...'.replace( '%%', oEditor.FCKConfig.SkinPath + 'images/dialog.loading.gif' ) ; 
     118        var frm = document.getElementById( 'frmMain' ) ; 
     119        var html = '<img src="%%" width="28" height="28" border="0" />'.replace( '%%', FCKConfig.SkinPath + 'images/loading.gif' ) ; 
    124120        throbberParent.innerHTML = html ; 
    125121 
    126         var frmCoords = oEditor.FCKTools.GetDocumentPosition( window, frm ) ; 
     122        var frmCoords = editor.FCKTools.GetDocumentPosition( window, frm ) ; 
    127123        var x = frmCoords.x + ( frm.offsetWidth - throbberParent.offsetWidth ) / 2 ; 
    128124        var y = frmCoords.y + ( frm.offsetHeight - throbberParent.offsetHeight ) / 2 ; 
    … …  
    145141{ 
    146142        HideThrobber() ; 
     143 
    147144        var oInnerDoc = document.getElementById('frmMain').contentWindow.document ; 
    148145 
    149146        // Set the language direction. 
    150         oInnerDoc.dir = args.Editor.FCKLang.Dir ; 
     147        oInnerDoc.dir = editor.FCKLang.Dir ; 
    151148 
    152149        // Sets the Skin CSS. 
    153         oInnerDoc.write( '<link href="' + args.Editor.FCKConfig.SkinPath + 'fck_dialog.css" type="text/css" rel="stylesheet">' ) ; 
     150        oInnerDoc.write( '<link href="' + FCKConfig.SkinPath + 'fck_dialog.css" type="text/css" rel="stylesheet">' ) ; 
    154151 
    155152        SetOnKeyDown( oInnerDoc ) ; 
    156153        DisableContextMenu( oInnerDoc ) ; 
    157          
     154 
    158155        RefreshContainerSize(); 
    159156 
    160         args.Editor.FCKDialog.RegisterDragHandlers( document.getElementById('frmMain').contentWindow ) ; 
    161         return args.Editor ; 
    162 } 
    163  
     157        editor.FCKDialog.RegisterDragHandlers( document.getElementById('frmMain').contentWindow ) ; 
     158        return editor ; 
     159} 
    164160 
    165161function SetOkButton( showIt ) 
    … …  
    211207 
    212208                if ( iDiff > 0 ) 
    213                         oEditor.FCKDialog.ResizeDialog( window.frameElement, dialogFrame.offsetWidth, dialogFrame.offsetHeight + iDiff ) ; 
     209                        editor.FCKDialog.ResizeDialog( window.frameElement, dialogFrame.offsetWidth, dialogFrame.offsetHeight + iDiff ) ; 
    214210        } 
    215211        RefreshContainerSize() ; 
    216212} 
    217213 
    218 // Kludge for #1316: Safari seems to have a bug with the time when RefreshSize() is executed - it thinks frmMain's innerHeight  
     214// Kludge for #1316: Safari seems to have a bug with the time when RefreshSize() is executed - it thinks frmMain's innerHeight 
    219215// is 0 if we query the value too soon after the page is loaded in some circumstances. 
    220 if ( args.Editor.FCKBrowserInfo.IsSafari ) 
     216if ( FCKBrowserInfo.IsSafari ) 
    221217{ 
    222218        window.OriginalRefreshSize = RefreshSize ; 
    … …  
    247243function CloseDialog( dontFireChange ) 
    248244{ 
    249         if ( !dontFireChange && !args.Editor.FCK.EditMode ) 
     245        if ( !dontFireChange && !editor.FCK.EditMode ) 
    250246        { 
    251247                // All dialog windows, by default, will fire the "OnSelectionChange" 
    252248                // event, no matter the Ok or Cancel button has been pressed. 
    253                 args.Editor.FCK.Events.FireEvent( 'OnSelectionChange' ) ; 
    254         } 
    255         oEditor.FCKDialog.CloseDialog( window.frameElement ) ; 
     249                editor.FCK.Events.FireEvent( 'OnSelectionChange' ) ; 
     250        } 
     251        editor.FCKDialog.CloseDialog( window.frameElement ) ; 
    256252} 
    257253 
    … …  
    359355function DisableContextMenu( targetDocument ) 
    360356{ 
    361         if ( args.Editor.FCKBrowserInfo.IsIE ) return ; 
     357        if ( FCKBrowserInfo.IsIE ) return ; 
    362358 
    363359        // Disable Right-Click 
    … …  
    377373} 
    378374 
    379 if ( args.Editor.FCKBrowserInfo.IsIE ) 
     375if ( FCKBrowserInfo.IsIE ) 
    380376{ 
    381377        function Window_OnBeforeUnload() 
    … …  
    384380                        oTabs[t] = null ; 
    385381 
    386                 args.Editor = null ; 
     382                editor = null ; 
    387383        } 
    388384        window.attachEvent( "onbeforeunload", Window_OnBeforeUnload ) ; 
    … …  
    391387function Window_OnClose() 
    392388{ 
    393         args.Editor.FCKFocusManager.Unlock() ; 
     389        editor.FCKFocusManager.Unlock() ; 
    394390} 
    395391 
    … …  
    406402                                        <script type="text/javascript"> 
    407403document.write( sTitle ) ; 
    408 var closeImgHtml = '<img src="' + oEditor.FCKConfig.SkinPath + 'images/dialog.close.png' + '" id="closeButton" onclick="Cancel();" />' ; 
    409 document.write( closeImgHtml ) ; 
    410404                                        </script> 
     405                                        <div id="closeButton" onclick="Cancel();"></div> 
    411406                                </td> 
    412407                        </tr> 
    … …  
    433428                                                        <td nowrap="nowrap"> 
    434429                                                                <input id="btnOk" style="VISIBILITY: hidden;" type="button" value="Ok" class="Button" onclick="Ok();" fckLang="DlgBtnOK" /> 
    435                                                                 &nbsp;  
     430                                                                &nbsp; 
    436431                                                                <input id="btnCancel" type="button" value="Cancel" class="Button" onclick="Cancel();" fckLang="DlgBtnCancel" /> 
    437432                                                        </td> 
    … …  
    452447                <div class="cover" id="cover" style="display:none"></div> 
    453448                <div id="throbberBlock" style="position: absolute; z-index: 10; text-align: center; font-size: 9px;"></div> 
     449                <script type="text/javascript"> 
     450                        // Set the class name for language direction. 
     451                        document.body.className += ' ' + editor.FCKLang.Dir ; 
     452 
     453                        var cover = document.getElementById( 'cover' ) ; 
     454                        cover.style.backgroundColor = FCKConfig.BackgroundBlockerColor ; 
     455                        editor.FCKDomTools.SetOpacity( cover, FCKConfig.BackgroundBlockerOpacity ) ; 
     456                </script> 
    454457        </body> 
    455458</html>