Changeset 2519

Timestamp:

10/03/08 10:34:54 (5 years ago)

Author:

martinkou

Message:

Added the DOM nodes and styles of dialog resize handles.
Dialog background cover in IE7 shouldn't include an <iframe>.

Location:

CKEditor/branches/prototype/_source

Files:

• core/env.js (modified) (1 diff)
• plugins/dialog/plugin.js (modified) (4 diffs)
• skins/default/dialog.css (modified) (2 diffs)
• themes/default/theme.js (modified) (3 diffs)

CKEditor/branches/prototype/_source/core/env.js

@@ -158 +158 @@
                         false;
 
+                env.browserCssClass = 'cke_browser_' +
+                        ( env.ie && 'ie' || env.gecko && 'gecko' || env.opera && 'opera' || env.air && 'air' || env.webkit && 'webkit' || 'unknown' );
+
                 return env;
         })();

CKEditor/branches/prototype/_source/plugins/dialog/plugin.js

@@ -71 +71 @@
         this._.parts = {
                 'tl' : [0,0],
+                'tl_resize' : [0,0,0],
                 't' : [0,1],
+                't_resize' : [0,1,0],
                 'tr' : [0,2],
+                'tr_resize' : [0,2,0],
                 'l' : [1,0],
+                'l_resize' : [1,0,0],
                 'c' : [1,1],
                 'r' : [1,2],
+                'r_resize' : [1,2,0],
                 'bl' : [2,0],
+                'bl_resize' : [2,0,0],
                 'b' : [2,1],
+                'b_resize' : [2,1,0],
                 'br' : [2,2],
+                'br_resize' : [2,2,0],
                 'title' : [1,1,0],
                 'close' : [1,1,0,0],
@@ -189 +197 @@
                 {
                         var element = partName ? dialog._.parts[partName] : dialog._.element.getFirst();
-                        element.setStyles( {
-                                width : Math.max( width || 0, 0 ) + 'px',
-                                height : Math.max( height || 0, 0 ) + 'px'
-                        } );
+                        if ( width )
+                                element.setStyle( 'width', width + 'px' );
+                        if ( height )
+                                element.setStyle( 'height', height + 'px' );
                 };
 
@@ -201 +209 @@
                 return function( width, height )
                 {
+                        // TODO: Move these all to the skin.
                         setSize( this, 't', width - 32, 16 );
+                        setSize( this, 't_resize', width - 32, null );
                         setSize( this, 'l', 16, height - 67 );
+                        setSize( this, 'l_resize', null, height - 67 + 45 );
                         setSize( this, 'c', width - 32, height - 67 );
                         setSize( this, 'r', 16, height - 67 );
+                        setSize( this, 'r_resize', null, height - 67 + 45 );
                         setSize( this, 'b', width - 60, 51 );
+                        setSize( this, 'b_resize', width - 60 + 28, null );
                         setSize( this, null, width, height );
                         this._.size = { width : width, height : height };
@@ -615 +628 @@
                         ],
                         win = CKEDITOR.document.getWindow();
-                if ( CKEDITOR.env.ie )
-                {
-                        html.push( '<iframe hidefocus="true" frameborder="0" name="cke_dialog_background_iframe" ' );
-                        if ( Math.floor( CKEDITOR.env.version ) == 6 )
-                                html.push( 'src="javascript: " ' );
-                        else
-                                html.push( 'src="" ' );
-                        html.push( 'style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ',
-                                   'progid:DXImageTransform.Microsoft.Alpha(opacity=0)" ></iframe>' );
+                if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
+                {
+                        html.push( '<iframe hidefocus="true" frameborder="0" name="cke_dialog_background_iframe" src="javascript:" ',
+                                        'style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; ',
+                                        'progid:DXImageTransform.Microsoft.Alpha(opacity=0)" ></iframe>' );
                 }
                 html.push( '</div>' );

CKEditor/branches/prototype/_source/skins/default/dialog.css

@@ -264 +264 @@
         width: 0px;
         z-index: 1;
+        overflow: hidden;
 }
 
@@ -341 +342 @@
         background-position: -16px -687px;
 }
+
+.cke_skin_default .cke_dialog_tl_resize,
+.cke_skin_default .cke_dialog_t_resize,
+.cke_skin_default .cke_dialog_tr_resize,
+.cke_skin_default .cke_dialog_bl_resize,
+.cke_skin_default .cke_dialog_b_resize,
+.cke_skin_default .cke_dialog_br_resize
+{
+        position: absolute;
+        height: 5px;
+        overflow: hidden;
+        background-color: transparent;
+}
+
+.cke_skin_default .cke_dialog_l_resize,
+.cke_skin_default .cke_dialog_r_resize
+{
+        position: absolute;
+        width: 5px;
+        overflow: hidden;
+        background-color: transparent;
+}
+
+.cke_skin_default .cke_dialog_tl_resize
+{
+        width: 5px;
+        left: 11px;
+        top: -3px;
+        cursor: nw-resize;
+}
+
+.cke_skin_default .cke_dialog_t_resize
+{
+        left: 16px;
+        top: -3px;
+        cursor: n-resize;
+}
+
+.cke_skin_default .cke_dialog_tr_resize
+{
+        width: 5px;
+        right: 14px;
+        top: -3px;
+        cursor: ne-resize;
+}
+
+.cke_skin_default .cke_dialog_l_resize
+{
+        top: 2px;
+        left: 11px;
+        cursor: w-resize;
+}
+
+.cke_skin_default .cke_dialog_r_resize
+{
+        top: 2px;
+        right: 14px;
+        cursor: e-resize;
+}
+
+.cke_skin_default .cke_dialog_bl_resize
+{
+        bottom: 18px;
+        left: 11px;
+        width: 5px;
+        cursor: sw-resize;
+}
+
+.cke_skin_default .cke_dialog_b_resize
+{
+        bottom: 18px;
+        left: 16px;
+        cursor: s-resize;
+}
+
+.cke_skin_default .cke_dialog_br_resize
+{
+        bottom: 18px;
+        right: 14px;
+        width: 8px;
+        height: 8px;
+        cursor: se-resize;
+}
+
+/*
+ * Safari and Gecko on Mac actually distinguish between single-sided and
+ * double-sided resize cursors. The double-sided resize cursors should be used.
+ */
+.cke_skin_default.cke_browser_gecko .cke_dialog_tl_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_tl_resize,
+.cke_skin_default.cke_browser_gecko .cke_dialog_br_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_br_resize
+{
+        cursor: nwse-resize;
+}
+
+.cke_skin_default.cke_browser_gecko .cke_dialog_tr_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_tr_resize,
+.cke_skin_default.cke_browser_gecko .cke_dialog_bl_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_bl_resize
+{
+        cursor: nesw-resize;
+}
+
+.cke_skin_default.cke_browser_gecko .cke_dialog_l_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_l_resize,
+.cke_skin_default.cke_browser_gecko .cke_dialog_r_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_r_resize
+{
+        cursor: ew-resize;
+}
+
+.cke_skin_default.cke_browser_gecko .cke_dialog_t_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_t_resize,
+.cke_skin_default.cke_browser_gecko .cke_dialog_b_resize,
+.cke_skin_default.cke_browser_webkit .cke_dialog_b_resize
+{
+        cursor: ns-resize;
+}

CKEditor/branches/prototype/_source/themes/default/theme.js

@@ -61 +61 @@
                 // differently by the browsers ("semi-inline").
                 var container = CKEDITOR.dom.element.createFromHtml( [
-                        '<span id="cke_', name, '" onmousedown="return false;" class="cke_container cke_skin_', editor.config.skin, ' cke_', editor.lang.dir, '" dir="', editor.lang.dir, '">' +
+                        '<span id="cke_', name, '" onmousedown="return false;" class="cke_container cke_skin_', editor.config.skin, ' ', CKEDITOR.env.browserCssClass,
+                                ' cke_', editor.lang.dir, '" dir="', editor.lang.dir, '">' +
                                 '<table class="cke_editor" border="0" cellspacing="0" cellpadding="0" style="width:', width, ';height:', height, '"><tbody>' +
                                         '<tr', topHtml          ? '' : ' style="display:none"', '><td id="cke_top_'             , name, '" class="cke_top">'            , topHtml               , '</td></tr>' +
@@ -105 +106 @@
 
                 var container = CKEDITOR.dom.element.createFromHtml( [
-                                '<span class="cke_skin_' + editor.config.skin + '"><div id="cke_dialog_%d" class="cke_dialog">',
+                                '<span class="cke_skin_' + editor.config.skin + ' ' + CKEDITOR.env.browserCssClass + '"><div id="cke_dialog_%d" class="cke_dialog">',
                                         '<div>',
-                                                '<div id="cke_dialog_tl_%d" class="cke_dialog_tl"></div>',
-                                                '<div id="cke_dialog_t_%d" class="cke_dialog_t"></div>',
-                                                '<div id="cke_dialog_tr_%d" class="cke_dialog_tr"></div>',
+                                                '<div id="cke_dialog_tl_%d" class="cke_dialog_tl">',
+                                                        '<div id="cke_dialog_tl_resize_%d" class="cke_dialog_tl_resize"></div>',
+                                                '</div>',
+                                                '<div id="cke_dialog_t_%d" class="cke_dialog_t">',
+                                                        '<div id="cke_dialog_t_resize_%d" class="cke_dialog_t_resize"></div>',
+                                                '</div>',
+                                                '<div id="cke_dialog_tr_%d" class="cke_dialog_tr">',
+                                                        '<div id="cke_dialog_tr_resize_%d" class="cke_dialog_tr_resize"></div>',
+                                                '</div>',
                                         '</div>',
                                         '<div>',
-                                                '<div id="cke_dialog_l_%d" class="cke_dialog_l"></div>',
+                                                '<div id="cke_dialog_l_%d" class="cke_dialog_l">',
+                                                        '<div id="cke_dialog_l_resize_%d" class="cke_dialog_l_resize"></div>',
+                                                '</div>',
                                                 '<div id="cke_dialog_c_%d" class="cke_dialog_c">',
                                                         '<div id="cke_dialog_title_%d" class="cke_dialog_title">',
@@ -122 +131 @@
                                                         '<div id="cke_dialog_footer_%d" class="cke_dialog_footer"></div>',
                                                 '</div>',
-                                                '<div id="cke_dialog_r_%d" class="cke_dialog_r"></div>',
+                                                '<div id="cke_dialog_r_%d" class="cke_dialog_r">',
+                                                        '<div id="cke_dialog_r_resize_%d" class="cke_dialog_r_resize"></div>',
+                                                '</div>',
                                         '</div>',
                                         '<div>',
-                                                '<div id="cke_dialog_bl_%d" class="cke_dialog_bl"></div>',
-                                                '<div id="cke_dialog_b_%d" class="cke_dialog_b"></div>',
-                                                '<div id="cke_dialog_br_%d" class="cke_dialog_br"></div>',
+                                                '<div id="cke_dialog_bl_%d" class="cke_dialog_bl">',
+                                                        '<div id="cke_dialog_bl_resize_%d" class="cke_dialog_bl_resize"></div>',
+                                                '</div>',
+                                                '<div id="cke_dialog_b_%d" class="cke_dialog_b">',
+                                                        '<div id="cke_dialog_b_resize_%d" class="cke_dialog_b_resize"></div>',
+                                                '</div>',
+                                                '<div id="cke_dialog_br_%d" class="cke_dialog_br">',
+                                                        '<div id="cke_dialog_br_resize_%d" class="cke_dialog_br_resize"></div>',
+                                                '</div>',
                                         '</div>',
                                 '</div></span>'