Changeset 4653

Timestamp:

12/10/09 19:38:27 (3 years ago)

Author:

fredck

Message:

#4228 : Introduced the Shared Spaces feature. Merged the features/sharedspaces branch.

Location:

CKEditor/branches/versions/3.1.x

Files:

• . (modified) (1 prop)
• CHANGES.html (modified) (1 diff)
• _dev/releaser/ckreleaser.release (modified) (1 prop)
• _dev/releaser/release.bat (modified) (1 prop)
• _samples/index.html (modified) (1 diff)
• _samples/sharedspaces.html (copied) (copied from CKEditor/branches/features/sharedspaces/_samples/sharedspaces.html)
• _source/skins/kama/elementspath.css (modified) (4 diffs)
• _source/skins/kama/mainui.css (modified) (3 diffs)
• _source/skins/kama/skin.js (modified) (1 diff)
• _source/skins/kama/toolbar.css (modified) (3 diffs)
• _source/skins/office2003/mainui.css (modified) (1 diff)
• _source/skins/v2/mainui.css (modified) (1 diff)
• _source/themes/default/theme.js (modified) (4 diffs)

CKEditor/branches/versions/3.1.x/CHANGES.html

@@ -52 +52 @@
                 <li><a href="http://dev.fckeditor.net/ticket/4342">#4342</a> : Introduced the bodyId and bodyClass settings to specify the id and class. to be used in the editing area at runtime.</li>
                 <li><a href="http://dev.fckeditor.net/ticket/3401">#3401</a> : Introduced the baseHref setting so it's possible to set the URL to be used to resolve absolute and relative URLs in the contents.</li>
+                <li><a href="http://dev.fckeditor.net/ticket/4228">#4228</a> : Introduced the Shared Spaces feature.</li>
         </ul>
         <p>

CKEditor/branches/versions/3.1.x/_samples/index.html

@@ -38 +38 @@
                 <li><a href="api_dialog.html">Using the JavaScript API to customize dialogs</a></li>
                 <li><a href="enterkey.html">Using the "Enter" key in CKEditor</a></li>
+                <li><a href="sharedspaces.html">Shared toolbars</a></li>
                 <li><a href="jqueryadapter.html">jQuery adapter example</a></li>
         </ul>

CKEditor/branches/versions/3.1.x/_source/skins/kama/elementspath.css

@@ -14 +14 @@
 .cke_skin_kama .cke_path
 {
-        padding: 0 5px;
         display: inline-block;
         float: left;
+        margin-top: 5px;
 }
 
@@ -24 +24 @@
 }
 
+.cke_shared .cke_skin_kama .cke_path
+{
+        margin: 0 0 5px;
+}
+
 .cke_skin_kama .cke_path a,
 .cke_skin_kama .cke_path .cke_empty
@@ -29 +34 @@
         display: inline-block;
         float: left;
-        padding-top: 1px;
-        padding-bottom: 1px;
-        padding-left: 4px;
-        padding-right: 4px;
-        margin-bottom : 3px;
+        padding: 1px 4px 0;
         color: #60676a;
 }
@@ -53 +54 @@
 {
         background-color: #dff1ff;
-        padding-top: 1px;
-        padding-bottom: 1px;
-        padding-left: 4px;
-        padding-right: 4px;
+        padding: 1px 4px 0;
         outline: none;
         color : #000;

CKEditor/branches/versions/3.1.x/_source/skins/kama/mainui.css

@@ -30 +30 @@
         background-position: 0 -1950px;
         display: block;
+        padding: 5px;
 
         /*background-color: Red;*/
+}
+
+.cke_shared .cke_skin_kama .cke_wrapper
+{
+        padding-bottom: 0;
 }
 
@@ -67 +73 @@
 {
         margin: 5px;
-        padding: 0 5px 5px;
 }
 
@@ -138 +143 @@
         top: 0;
 }
+
+.cke_skin_kama .cke_browser_ie7 .cke_editor
+{
+        display: inline-block;
+}
+
+.cke_shared .cke_skin_kama .cke_browser_ie7 .cke_wrapper
+{
+        padding-bottom: 5px;
+}
+

CKEditor/branches/versions/3.1.x/_source/skins/kama/skin.js

@@ -148 +148 @@
                                         var cssContent,
                                                 uiStyle = getStylesheet( CKEDITOR.document ),
-                                                cssId = '#cke_' + CKEDITOR.tools.escapeCssSelector( editor.name );
+                                                cssId = '.cke_editor_' + CKEDITOR.tools.escapeCssSelector( editor.name );
 
                                         var cssSelectors =

CKEditor/branches/versions/3.1.x/_source/skins/kama/toolbar.css

@@ -23 +23 @@
 {
         clear: both;
-        padding: 5px 3px 5px 6px;
-}
-
-.cke_skin_kama .cke_rtl .cke_toolbox
-{
-        padding: 5px 6px 5px 3px;
 }
 
@@ -43 +37 @@
         float: right;
         border: 1px outset #D3D3D3;
-        margin: 11px 4px 2px;
+        margin: 11px 0 2px;
         cursor: pointer;
 }
@@ -396 +390 @@
         cursor: default;
 }
+
+.cke_skin_kama .cke_browser_ie7 .cke_toolbox
+{
+        margin-bottom: 2px;
+}
+
+.cke_shared .cke_skin_kama .cke_browser_ie7 .cke_toolbox
+{
+        margin-bottom: 0;
+}
+
+.cke_skin_kama .cke_browser_gecko .cke_toolbox
+{
+        /* Define the padding-bottom otherwise the collapser button will not be clicable in FF */
+        padding-bottom: 1px;
+}

CKEditor/branches/versions/3.1.x/_source/skins/office2003/mainui.css

@@ -19 +19 @@
 }
 
-.cke_skin_office2003 .cke_top, .cke_skin_office2003 .cke_bottom
+.cke_skin_office2003 .cke_top,
+.cke_skin_office2003 .cke_bottom,
+ .cke_shared .cke_skin_office2003
 {
         background-color: #f7f8fd;

CKEditor/branches/versions/3.1.x/_source/skins/v2/mainui.css

@@ -28 +28 @@
 }
 
-.cke_skin_v2 .cke_top, .cke_skin_v2 .cke_bottom
+.cke_skin_v2 .cke_top,
+.cke_skin_v2 .cke_bottom,
+ .cke_shared .cke_skin_v2
 {
         background-color: #efefde;

CKEditor/branches/versions/3.1.x/_source/themes/default/theme.js

@@ -6 +6 @@
 CKEDITOR.themes.add( 'default', (function()
 {
+        function checkSharedSpace( editor, spaceName )
+        {
+                var container,
+                        element;
+
+                // Try to retrieve the target element from the sharedSpaces settings. 
+                element = editor.config.sharedSpaces;
+                element = element && element[ spaceName ];
+                element = element && CKEDITOR.document.getById( element );
+
+                // If the element is available, we'll then create the container for
+                // the space.                   
+                if ( element )
+                {
+                        // Creates an HTML structure that reproduces the editor class hierarchy.
+                        var html = 
+                                '<span class="cke_shared">' +
+                                '<span class="' + editor.skinClass + ' cke_editor_' + editor.name + '">' +
+                                '<span class="' + CKEDITOR.env.cssClass + '">' +
+                                '<span class="cke_wrapper cke_' + editor.lang.dir + '">' +
+                                '<span class="cke_editor">' +
+                                '<div class="cke_' + spaceName + '">' +
+                                '</div></span></span></span></span></span>';
+
+                        var mainContainer = element.append( CKEDITOR.dom.element.createFromHtml( html, element.getDocument() ) );
+
+                        // Only the first container starts visible. Others get hidden.
+                        if ( element.getCustomData( 'cke_hasshared' ) )
+                                mainContainer.hide();
+                        else
+                                element.setCustomData( 'cke_hasshared', 1 );
+                        
+                        // Get the deeper inner <div>.
+                        container = mainContainer.getChild( [0,0,0,0] );
+
+                        // When the editor gets focus, we show the space container, hiding others.
+                        editor.on( 'focus', function()
+                                {
+                                        for ( var i = 0, sibling, children = element.getChildren() ; ( sibling = children.getItem( i ) ) ; i++ )
+                                        {
+                                                if ( sibling.type == CKEDITOR.NODE_ELEMENT 
+                                                        && !sibling.equals( mainContainer ) 
+                                                        && sibling.hasClass( 'cke_shared' ) )
+                                                {
+                                                        sibling.hide();
+                                                }
+                                        }
+
+                                        mainContainer.show();
+                                });
+
+                        editor.on( 'destroy', function()
+                                {
+                                        mainContainer.remove();
+                                });
+                }
+
+                return container;
+        }
+
         return {
                 build : function( editor, themePath )
@@ -45 +105 @@
                         }
 
+                        var sharedTop           = topHtml && checkSharedSpace( editor, 'top' ),
+                                sharedBottoms   = checkSharedSpace( editor, 'bottom' );
+                                
+                        sharedTop               && ( sharedTop.setHtml( topHtml )               , topHtml = '' );
+                        sharedBottoms   && ( sharedBottoms.setHtml( bottomHtml ), bottomHtml = '' );
+
                         var container = CKEDITOR.dom.element.createFromHtml( [
                                 '<span' +
                                         ' id="cke_', name, '"' +
                                         ' onmousedown="return false;"' +
-                                        ' class="', editor.skinClass, '"' +
+                                        ' class="', editor.skinClass, ' cke_editor_', name, '"' +
                                         ' dir="', editor.lang.dir, '"' +
                                         ' title="', ( CKEDITOR.env.gecko ? ' ' : '' ), '"' +
@@ -99 +165 @@
 
                         var element = CKEDITOR.dom.element.createFromHtml( [
-                                        '<div id="cke_' + editor.name.replace('.', '\\.') + '_dialog" class="cke_skin_', editor.skinName,
+                                        '<div class="cke_editor_' + editor.name.replace('.', '\\.') + '_dialog cke_skin_', editor.skinName,
                                                 '" dir="', editor.lang.dir, '"' +
                                                 ' lang="', editor.langCode, '"' +
@@ -234 +300 @@
         return this.container.getChild( [ 0, 0 ] );
 };
+
+/**
+ * Makes it possible to place some of the editor UI blocks, like the toolbar
+ * and the elements path, into any element in the page.
+ * The elements used to hold the UI blocks can be shared among several editor
+ * instances. In that case, only the blocks of the active editor instance will
+ * display.
+ * @name CKEDITOR.config.sharedSpaces
+ * @type Object
+ * @default undefined
+ * @example
+ * // Place the toolbar inside the element with ID "someElementId" and the
+ * // elements path into the element with ID "anotherId".
+ * config.sharedSpaces =
+ * {
+ *     top : 'someElementId',
+ *     bottom : 'anotherId'
+ * };
+ * @example
+ * // Place the toolbar inside the element with ID "someElementId". The
+ * // elements path will remain attached to the editor UI.
+ * config.sharedSpaces =
+ * {
+ *     top : 'someElementId'
+ * };
+ */