Changeset 1213

Show
Ignore:
Timestamp:
2007-12-15 19:44:28 (7 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).
Location:
FCKeditor/branches/features/floating_dialog
Files:
3 added
7 removed
7 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> 

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

    r1207 r1213  
    2222 */ 
    2323 
     24html, body 
     25{ 
     26        background-color: transparent; 
     27        margin: 0px; 
     28        padding: 0px; 
     29} 
     30 
    2431body 
    2532{ 
    26         margin: 0px; 
    2733        padding: 10px; 
    2834} 
    … …  
    3743{ 
    3844        background-color: #f1f1e3; 
     45} 
     46 
     47.DialogBody 
     48{ 
     49        height: 100%; 
     50        width: 100%; 
     51        overflow: hidden; 
     52        background-color: transparent; 
     53        padding: 0px; 
    3954} 
    4055 
    … …  
    95110.DialogTabEmptyArea 
    96111{ 
    97         padding-left: 10px ; 
     112        padding-left: 10px; 
    98113        border-bottom: #d5d59d 1px solid; 
    99114} 
    … …  
    118133.DialogTabSelected 
    119134{ 
    120         font-weight:bold; 
     135        font-weight: bold; 
    121136        cursor: default; 
    122137        padding-top: 4px; 
    … …  
    133148} 
    134149 
    135 #tdBrowse  
     150#tdBrowse 
    136151{ 
    137152        vertical-align: bottom; 
    138153} 
    139154 
     155/** 
     156 * Dialog frame related styles. 
     157 */ 
     158 
     159.contents 
     160{ 
     161        position: absolute; 
     162        top: 2px; 
     163        left: 16px; 
     164        right: 16px; 
     165        bottom: 20px; 
     166        background-color: #e3e3c7; 
     167        overflow: hidden; 
     168        z-index: 1; 
     169} 
     170 
     171.tl, .tr, .tc, .bl, .br, .bc 
     172{ 
     173        position: absolute; 
     174        background-image: url(images/sprites.png); 
     175        background-repeat: no-repeat; 
     176} 
     177 
     178* html .tl, * html .tr, * html .tc, * html .bl, * html .br, * html .bc 
     179{ 
     180        background-image: url(images/sprites.gif); 
     181} 
     182 
     183.ml, .mr 
     184{ 
     185        position: absolute; 
     186        background-image: url(images/dialog.sides.png); 
     187        background-repeat: repeat-y; 
     188} 
     189 
     190* html .ml, * html .mr 
     191{ 
     192        background-image: url(images/dialog.sides.gif); 
     193} 
     194 
     195.rtl .ml, .rtl .mr 
     196{ 
     197        position: absolute; 
     198        background-image: url(images/dialog.sides.rtl.png); 
     199        background-repeat: repeat-y; 
     200} 
     201 
     202* html .rtl .ml, * html .rtl .mr 
     203{ 
     204        background-image: url(images/dialog.sides.gif); 
     205} 
     206 
     207.tl 
     208{ 
     209        top: 0px; 
     210        left: 0px; 
     211        width: 16px; 
     212        height: 16px; 
     213        background-position: -16px -16px; 
     214} 
     215 
     216.rtl .tl 
     217{ 
     218        background-position: -16px -397px; 
     219} 
     220 
     221.tr 
     222{ 
     223        top: 0px; 
     224        right: 0px; 
     225        width: 16px; 
     226        height: 16px; 
     227        background-position: -16px -76px; 
     228} 
     229 
     230.rtl .tr 
     231{ 
     232        background-position: -16px -457px; 
     233} 
     234 
     235.tc 
     236{ 
     237        top: 0px; 
     238        right: 16px; 
     239        left: 16px; 
     240        height: 16px; 
     241        background-position: 0px -136px; 
     242        background-repeat: repeat-x; 
     243} 
     244 
     245.ml 
     246{ 
     247        top: 16px; 
     248        left: 0px; 
     249        width: 16px; 
     250        bottom: 51px; 
     251        background-position: 0px 0px; 
     252} 
     253 
     254.mr 
     255{ 
     256        top: 16px; 
     257        right: 0px; 
     258        width: 16px; 
     259        bottom: 51px; 
     260        background-position: -16px 0px; 
     261} 
     262 
     263.bl 
     264{ 
     265        bottom: 0px; 
     266        left: 0px; 
     267        width: 30px; 
     268        height: 51px; 
     269        background-position: -16px -196px; 
     270} 
     271 
     272.rtl .bl 
     273{ 
     274        background-position: -16px -517px; 
     275} 
     276 
     277.br 
     278{ 
     279        bottom: 0px; 
     280        right: 0px; 
     281        width: 30px; 
     282        height: 51px; 
     283        background-position: -16px -263px; 
     284} 
     285 
     286.rtl .br 
     287{ 
     288        background-position: -16px -584px; 
     289} 
     290 
     291.bc 
     292{ 
     293        bottom: 0px; 
     294        right: 30px; 
     295        left: 30px; 
     296        height: 51px; 
     297        background-position: 0px -330px; 
     298        background-repeat: repeat-x; 
     299} 
     300 
     301/* For IE6. Do not change it. */ 
     302* html .blocker 
     303{ 
     304        position: absolute; 
     305        width: 100%; 
     306        height: 100%; 
     307        z-index: 12; 
     308        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
     309} 
     310 
     311/* The layer used to cover the dialog when opening a child dialog. */ 
     312.cover 
     313{ 
     314        position: absolute; 
     315        top: 0px; 
     316        left: 14px; 
     317        right: 14px; 
     318        bottom: 18px; 
     319        z-index: 11; 
     320} 
     321 
    140322#closeButton 
    141323{ 
    142         position: absolute ; 
    143         right: 0px ; 
    144         top: 0px ; 
    145         margin-top : 8px ; 
    146         margin-right: 10px ; 
    147         cursor: pointer ; 
    148 } 
    149  
     324        position: absolute; 
     325        right: 0px; 
     326        top: 0px; 
     327        margin-top: 5px; 
     328        margin-right: 10px; 
     329        width: 20px; 
     330        height: 20px; 
     331        cursor: pointer; 
     332        background-image: url(images/sprites.png); 
     333        background-repeat: no-repeat; 
     334        background-position: -16px -651px; 
     335} 
     336 
     337* html #closeButton 
     338{ 
     339        cursor: hand; 
     340        background-image: url(images/sprites.gif); 
     341} 
     342 
     343.rtl #closeButton 
     344{ 
     345        right: auto; 
     346        left: 0px; 
     347        margin-left: 10px; 
     348} 
     349 
     350#closeButton:hover 
     351{ 
     352        background-position: -16px -687px; 
     353} 
     354 

  • FCKeditor/branches/features/floating_dialog/editor/skins/default/fck_dialog_ie6.js

    r1208 r1213  
    7979        } 
    8080         
     81        var closeButtonOver = function() 
     82        { 
     83                this.style.backgroundPosition = '-16px -687px' ; 
     84        } ; 
     85         
     86        var closeButtonOut = function() 
     87        { 
     88                this.style.backgroundPosition = '-16px -651px' ; 
     89        } ; 
     90         
     91        var fixCloseButton = function() 
     92        { 
     93                var closeButton = document.getElementById ( 'closeButton' ) ; 
     94 
     95                closeButton.onmouseover = closeButtonOver ; 
     96                closeButton.onmouseout  = closeButtonOut ; 
     97        } 
     98         
    8199        var onLoad = function() 
    82100        { 
    83101                fixSizes() ; 
     102                fixCloseButton() ; 
    84103                 
    85104                window.attachEvent( 'onresize', fixSizes ) ; 

  • FCKeditor/branches/features/floating_dialog/editor/_source/internals/fckdialog.js

    r1209 r1213  
    2222 */ 
    2323 
    24 var FCKDialog =  
    25 { 
    26         BaseZIndex : 10000, 
    27         LastSelectionData : null, 
    28         DialogStack : [] 
     24var FCKDialog = 
     25{ 
     26        _BaseZIndex : FCKConfig.FloatingPanelsZIndex + 1, 
     27        _DialogStack : [], 
     28        LastSelectionData : null 
    2929} ; 
    3030 
    … …  
    3333{ 
    3434        // Setup the dialog info. 
    35         var oDialogInfo = new Object() ; 
    36         oDialogInfo.Title = dialogTitle ; 
    37         oDialogInfo.Page = dialogPage ; 
    38         oDialogInfo.Editor = window ; 
    39         oDialogInfo.CustomValue = customValue ;         // Optional 
    40         oDialogInfo.SelectionData = null ; 
     35        var dialogInfo = 
     36        { 
     37                Title : dialogTitle, 
     38                Page : dialogPage, 
     39                Editor : window, 
     40                CustomValue : customValue,              // Optional 
     41                SelectionData : null 
     42        } 
    4143 
    4244        if ( FCKBrowserInfo.IsIE ) 
    … …  
    5759 
    5860                if ( bInvalidRange ) 
    59                         oDialogInfo.SelectionData = this.LastSelectionData ; 
    60                 else 
    61                 { 
    62                         oDialogInfo.SelectionData = oRange ; 
     61                        dialogInfo.SelectionData = this.LastSelectionData ; 
     62                else 
     63                { 
     64                        dialogInfo.SelectionData = oRange ; 
    6365                        this.LastSelectionData = oRange ; 
    6466                } 
    6567        } 
    6668 
    67         var sUrl = FCKConfig.BasePath + 'fckdialog.html' ; 
    68         this.Show( oDialogInfo, dialogName, sUrl, width, height, parentWindow, resizable ) ; 
     69        var url = FCKConfig.BasePath + 'fckdialog.html' ; 
     70        this.Show( dialogInfo, dialogName, url, width, height, parentWindow, resizable ) ; 
    6971} 
    7072 
    … …  
    7375        var ownerWindow = FCK.ToolbarSet.CurrentInstance.Window.parent ; 
    7476        var ownerDocument = ownerWindow.document ; 
    75         var scrollTop = ownerDocument.body.scrollTop ; 
    76         var scrollLeft = ownerDocument.body.scrollLeft ; 
    77         var innerWidth = FCKBrowserInfo.IsIE ? ownerDocument.documentElement.offsetWidth : ownerWindow.innerWidth ; 
    78         var innerHeight = FCKBrowserInfo.IsIE ? ownerDocument.documentElement.offsetHeight : ownerWindow.innerHeight ; 
    79         var iTop  = Math.max( scrollTop + ( innerHeight - dialogHeight - 20 ) / 2, 0 ) ; 
    80         var iLeft = Math.max( scrollLeft + ( innerWidth - dialogWidth - 20 )  / 2, 0 ) ; 
    81         if ( ! ownerWindow.FCKDialogArguments ) 
    82                 ownerWindow.FCKDialogArguments = {} ; 
    83         var dialogId = parseInt( Math.random() * 0x10000000, 10 ) ; 
    84         ownerWindow.FCKDialogArguments[dialogId] = dialogInfo ; 
    85          
     77 
     78        var viewSize = FCKTools.GetViewPaneSize( ownerWindow ) ; 
     79        var scrollPosition = FCKTools.GetScrollPosition( ownerWindow ) ; 
     80 
     81        // Calculate the dialog position, centering it on the screen. 
     82        var iTop  = Math.max( scrollPosition.Y + ( viewSize.Height - dialogHeight - 20 ) / 2, 0 ) ; 
     83        var iLeft = Math.max( scrollPosition.X + ( viewSize.Width - dialogWidth - 20 )  / 2, 0 ) ; 
     84