activeadmin-ckeditor 0.0.10 → 0.0.11

data/app/assets/stylesheets/ckeditor/plugins/floating-tools/plugin.js

@@ -0,0 +1,582 @@
+/**
+ * Floating-Tools
+ * Author: Philipp Stracker (2013)
+ * Project page: http://stracker-phil.github.com/Floating-Tools/
+ */
+(function() {
+
+	var floatingtools = function() {
+		this.dom = null;  // the main toolbar-object
+		this.toolbars = [];
+		this.is_visible = false;
+
+		this.hide_on_blur = true; //!TODO: Make this an configuration option
+
+		this.toolbarsize = false;
+		this.editoroffset = false;
+		this.mousepos = {x:0, y:0};
+	};
+
+
+
+
+	CKEDITOR.plugins.add( 'floating-tools', {
+		requires: 'toolbar',
+
+
+		init: function( editor ) {
+
+
+			/**
+			 * Create the UI elements required by this plugin
+			 * UI is the floating toolbar
+			 * Many parts of this function are taken from the toolbar plugin
+			 */
+			editor.on( 'uiSpace', function( event ) {
+				// Create toolbar only once...
+				event.removeListener();
+
+				editor.floatingtools = new floatingtools();
+
+				var labelId = CKEDITOR.tools.getNextId();
+
+				var output = [
+					// Did not find a nicer way to include the CSS required for the toolbar...
+					'<style>',
+					'.pos-relative {position:relative}',
+					'.cke_floatingtools{',
+						'position:absolute;',
+						'left:0;',
+						'top:-500px;',
+						'padding: 5px 0 0 6px;',
+						'border:1px solid #b1b1b1;',
+						'border-radius:3px;',
+						'box-shadow: 0 1px 10px rgba(0,0,0,0.3);',
+						'transition:opacity .1s;-o-transition:opacity .1s;-moz-transition:opacity .1s;-webkit-transition:opacity .1s;',
+					'}',
+					'</style>',
+					'<span id="', labelId, '" class="cke_voice_label">', editor.lang.toolbar.toolbars, '</span>',
+					'<span id="' + editor.ui.spaceId( 'floatingtools' ) + '" class="cke_floatingtools cke_top" role="group" aria-labelledby="', labelId, '" onmousedown="return false;">' ];
+
+				var groupStarted, pendingSeparator;
+				var toolbars = editor.floatingtools.toolbars,
+					toolbar = getFloatingToolbarConfig( editor );
+
+
+				// Build the toolbar
+				for ( var r = 0; r < toolbar.length; r++ ) {
+					var toolbarId,
+						toolbarObj = 0,
+						toolbarName,
+						row = toolbar[ r ],
+						items;
+
+					// It's better to check if the row object is really
+					// available because it's a common mistake to leave
+					// an extra comma in the toolbar definition
+					// settings, which leads on the editor not loading
+					// at all in IE. (#3983)
+					if ( !row )
+						continue;
+
+					if ( groupStarted ) {
+						output.push( '</span>' );
+						groupStarted = 0;
+						pendingSeparator = 0;
+					}
+
+					if ( row === '/' ) {
+						output.push( '<span class="cke_toolbar_break"></span>' );
+						continue;
+					}
+
+					items = row.items || row;
+
+					// Create all items defined for this toolbar.
+					for ( var i = 0; i < items.length; i++ ) {
+						var item = items[ i ],
+							canGroup;
+
+						if ( item ) {
+							if ( item.type == CKEDITOR.UI_SEPARATOR ) {
+								// Do not add the separator immediately. Just save
+								// it be included if we already have something in
+								// the toolbar and if a new item is to be added (later).
+								pendingSeparator = groupStarted && item;
+								continue;
+							}
+
+							canGroup = item.canGroup !== false;
+
+							// Initialize the toolbar first, if needed.
+							if ( !toolbarObj ) {
+								// Create the basic toolbar object.
+								toolbarId = CKEDITOR.tools.getNextId();
+								toolbarObj = { id: toolbarId, items: [] };
+								toolbarName = row.name && ( editor.lang.toolbar.toolbarGroups[ row.name ] || row.name );
+
+								// Output the toolbar opener.
+								output.push( '<span id="', toolbarId, '" class="cke_toolbar"', ( toolbarName ? ' aria-labelledby="' + toolbarId + '_label"' : '' ), ' role="toolbar">' );
+
+								// If a toolbar name is available, send the voice label.
+								toolbarName && output.push( '<span id="', toolbarId, '_label" class="cke_voice_label">', toolbarName, '</span>' );
+
+								output.push( '<span class="cke_toolbar_start"></span>' );
+
+								// Add the toolbar to the "editor.toolbox.toolbars"
+								// array.
+								var index = toolbars.push( toolbarObj ) - 1;
+
+								// Create the next/previous reference.
+								if ( index > 0 ) {
+									toolbarObj.previous = toolbars[ index - 1 ];
+									toolbarObj.previous.next = toolbarObj;
+								}
+							}
+
+							if ( canGroup ) {
+								if ( !groupStarted ) {
+									output.push( '<span class="cke_toolgroup" role="presentation">' );
+									groupStarted = 1;
+								}
+							} else if ( groupStarted ) {
+								output.push( '</span>' );
+								groupStarted = 0;
+							}
+
+							function addItem( item ) {
+								var itemObj = item.render( editor, output );
+								index = toolbarObj.items.push( itemObj ) - 1;
+
+								if ( index > 0 ) {
+									itemObj.previous = toolbarObj.items[ index - 1 ];
+									itemObj.previous.next = itemObj;
+								}
+
+								itemObj.toolbar = toolbarObj;
+
+								// No need for keyboard handlers, the toolbar is only accessibly by mouse
+								/*
+								itemObj.onkey = itemKeystroke;
+
+								// Fix for #3052:
+								// Prevent JAWS from focusing the toolbar after document load.
+								itemObj.onfocus = function() {
+									if ( !editor.toolbox.focusCommandExecuted )
+										editor.focus();
+								};
+								*/
+							}
+
+							if ( pendingSeparator ) {
+								addItem( pendingSeparator );
+								pendingSeparator = 0;
+							}
+
+							addItem( item );
+
+						}
+					}
+
+					if ( groupStarted ) {
+						output.push( '</span>' );
+						groupStarted = 0;
+						pendingSeparator = 0;
+					}
+
+					if ( toolbarObj )
+						output.push( '<span class="cke_toolbar_end"></span></span>' );
+
+				}
+
+
+				output.push( '</span>' );
+				event.data.html += output.join( '' );
+			});
+
+
+
+			/**
+			 * Do the magic: Attach eventhandlers to see if text is selected
+			 * When text is selected then show the floating toolbar, else hide it
+			 */
+			editor.on('contentDom', function( event ) {
+
+				unfocus_toolbar();
+
+				/**
+				 * Attach an eventhandler to the mouse-up event
+				 */
+				editor.document.on('mouseup', function( mouse_event ) {
+					// When user right-clicks, ctrl-clicks, etc. then do not show the toolbar
+					data = mouse_event.data.$;
+					if (data.button !== 0 || data.ctrlKey || data.altKey || data.shiftKey) return true;
+
+					// When the user clears the selection by single-clicking in the editor then this event is fired before the selection is removed
+					// So we add a short delay to give the browser a chance to remove the selection before we do anything
+					setTimeout( function() {
+						if (is_text_selected()) {
+							// Save the current mouse-position
+							set_mousepos (mouse_event.data.$);
+							// when there is text selected after mouse-up: show the toolbar
+							editor.execCommand('showFloatingTools');
+						} else {
+							// when no text is selected then hide the toolbar
+							editor.execCommand('hideFloatingTools');
+						}
+					}, 100);
+				});
+
+
+				/**
+				 * On keypress we will always hide the toolbar
+				 * The toolbar is only accessible via mouse
+				 */
+				editor.document.on('keyup', function( key_event ) {
+					editor.execCommand('hideFloatingTools');
+				});
+
+
+				/**
+				 * On blur hide the toolbar (editor looses focus)
+				 */
+				editor.on('blur', function( e ) {
+					if (editor.floatingtools.hide_on_blur) {
+						hide_toolbar();
+					}
+				});
+
+
+				/**
+				 * Attach the mouse-over event to the toolbar.
+				 * When cursor is above the toolbar then set opacity to 1
+				 */
+				toolbar = get_element();
+				toolbar.on('mouseover', function( mouse_event ) {
+					focus_toolbar();
+				});
+
+
+				/**
+				 * When the mouse moves out of the toolbar then make it transparent again
+				 */
+				toolbar.on('mouseout', function( mouse_event ) {
+					unfocus_toolbar();
+				})
+
+				editor.container.addClass('pos-relative');
+				console.log(editor.container);
+			});
+
+
+
+			/**
+			 * Display the floating toolbar
+			 */
+			editor.addCommand( 'showFloatingTools', {
+				exec : function( editor ) {
+					if (is_text_selected()) {
+						toolbar = get_element();
+						unfocus_toolbar();
+						toolbar.show();
+
+						// Get the size of the toolbar
+						size = get_toolbar_size()
+						// Get the offset of the editor
+						offset = get_editor_offset();
+						// Get the mouse position
+						pos = get_mousepos();
+
+						// Calculate the position for the toolbar
+						toolpos = calculate_position(pos, size, offset);
+
+						toolbar.setStyles({
+							'left' : toolpos.x + 'px',
+							'top' : toolpos.y + 'px'
+						});
+						editor.floatingtools.is_visible = true;
+					}
+				}
+			});
+
+
+			/**
+			 * Hide the floating toolbar
+			 */
+			editor.addCommand( 'hideFloatingTools', {
+				exec : function( editor ) {
+					hide_toolbar();
+				}
+			});
+
+
+			/**
+			 * ===== Behind the scenes. Getters, setters, calculation, etc.
+			 */
+
+
+			hide_toolbar = function() {
+				if (false != editor.floatingtools.is_visible) {
+					toolbar = get_element();
+					toolbar.hide();
+					editor.floatingtools.is_visible = false;
+				}
+			}
+
+
+			/**
+			 * Store the current mouse-position, so we can position the toolbar near the cursor
+			 */
+			set_mousepos = function(data) {
+				editor.floatingtools.mousepos = {
+					left: data.clientX,
+					top: data.clientY
+				};
+			}
+
+
+
+			/**
+			 * Store the current mouse-position, so we can position the toolbar near the cursor
+			 */
+			get_mousepos = function() {
+				return editor.floatingtools.mousepos;
+			}
+
+
+			/**
+			 * Returns the main toolbar-object (the parent of all items in the floating-toolbar)
+			 */
+			get_element = function() {
+				if (! editor.floatingtools.dom) {
+					var dom_id = editor.ui.spaceId( 'floatingtools' );
+					editor.floatingtools.dom = CKEDITOR.document.getById( dom_id );
+				}
+				return editor.floatingtools.dom;
+			}
+
+
+
+			/**
+			 * Returns the offset of the editor area (effectively the height of the top-toolbar)
+			 */
+			get_editor_offset = function() {
+				if (! editor.floatingtools.editoroffset) {
+					var editor_id = editor.ui.spaceId( 'contents' );
+					var obj = CKEDITOR.document.getById( editor_id );
+					editor.floatingtools.editoroffset = {
+						left:   obj.$.offsetLeft,
+						top:    obj.$.offsetTop,
+						width:  obj.$.offsetWidth,
+						height: obj.$.offsetHeight
+					};
+				}
+				return editor.floatingtools.editoroffset;
+			}
+
+
+			/**
+			 * Calculates the position for the toolbar
+			 */
+			calculate_position = function(pos, toolbar_size, offset) {
+				toolpos = {
+					x: pos.left + offset.left - (toolbar_size.width/2),
+					y: pos.top + offset.top - (toolbar_size.height + 20)
+				}
+
+				// make sure toolbar does not extend out of the left CKEditor border
+				if (toolpos.x < offset.left + 2) toolpos.x = offset.left + 2;
+
+				// make sure toolbar does not extend out of the right CKEditor border
+				if (pos.left + (toolbar_size.width/2) >= offset.left + offset.width-2 )
+					toolpos.x = offset.left + offset.width - toolbar_size.width - 2;
+
+				// Make sure toolbar does no go into the top toolbar area
+				if (toolpos.y < offset.top) toolpos.y = offset.top;
+
+				// make sure toolbar does not cover the mouse-cursor when text in the top line is selected
+				if (offset.top+pos.top > toolpos.y
+				&& offset.top+pos.top < toolpos.y+toolbar_size.height)
+					toolpos.y = offset.top + pos.top + 24; // display toolbar below the cursor
+
+				return toolpos;
+			}
+
+
+			/**
+			 * Returns the size of the floating toolbar
+			 */
+			get_toolbar_size = function() {
+				if (! editor.floatingtools.toolbarsize) {
+					var obj = get_element();
+					editor.floatingtools.toolbarsize = {
+						width: obj.$.offsetWidth,
+						height: obj.$.offsetHeight
+					};
+				}
+				return editor.floatingtools.toolbarsize;
+			}
+
+
+			/**
+			 * Check if text is selected.
+			 * Retrns true when there is at least 1 character selected in the editor
+			 */
+			is_text_selected = function () {
+				var text = editor.getSelection().getSelectedText();
+				return text != '';
+			}
+
+
+			/**
+			 * Make the toolbar opaque
+			 */
+			focus_toolbar = function() {
+				obj = get_element();
+				obj.setOpacity(1);
+			}
+
+
+			/**
+			 * Make the toolbar transparent
+			 */
+			unfocus_toolbar = function() {
+				obj = get_element();
+				obj.setOpacity(0.25);
+			},
+
+
+			/**
+			 * Get the plugin configuration.
+			 * Kidnapped from the toolbar-plugin...
+			 */
+			getFloatingToolbarConfig = function( editor ) {
+				var removeButtons = editor.config.removeButtons;
+
+				removeButtons = removeButtons && removeButtons.split( ',' );
+
+				function buildToolbarConfig() {
+					// Take the base for the new toolbar, which is basically a toolbar
+					// definition without items.
+					var toolbar = getPrivateFloatingToolbarGroups( editor );
+					return populateToolbarConfig( toolbar );
+
+				}
+
+				// Returns an object containing all toolbar groups used by ui items.
+				function getItemDefinedGroups() {
+					var groups = {},
+						itemName, item, itemToolbar, group, order;
+
+					for ( itemName in editor.ui.items ) {
+						item = editor.ui.items[ itemName ];
+						itemToolbar = item.toolbar || 'others';
+						if ( itemToolbar ) {
+							// Break the toolbar property into its parts: "group_name[,order]".
+							itemToolbar = itemToolbar.split( ',' );
+							group = itemToolbar[ 0 ];
+							order = parseInt( itemToolbar[ 1 ] || -1, 10 );
+
+							// Initialize the group, if necessary.
+							groups[ group ] || ( groups[ group ] = [] );
+
+							// Push the data used to build the toolbar later.
+							groups[ group ].push( { name: itemName, order: order} );
+						}
+					}
+
+					// Put the items in the right order.
+					for ( group in groups ) {
+						groups[ group ] = groups[ group ].sort( function( a, b ) {
+							return a.order == b.order ? 0 :
+								b.order < 0 ? -1 :
+								a.order < 0 ? 1 :
+								a.order < b.order ? -1 :
+								1;
+						});
+					}
+
+					return groups;
+				}
+
+				function fillGroup( toolbarGroup, uiItems ) {
+					if ( uiItems.length ) {
+						if ( toolbarGroup.items )
+							toolbarGroup.items.push( editor.ui.create( '-' ) );
+						else
+							toolbarGroup.items = [];
+
+						var item, name;
+						while ( ( item = uiItems.shift() ) ) {
+							name = typeof item == 'string' ? item : item.name;
+
+							// Ignore items that are configured to be removed.
+							if ( !removeButtons || CKEDITOR.tools.indexOf( removeButtons, name ) == -1 ) {
+								item = editor.ui.create( name );
+
+								if ( !item )
+									continue;
+
+								if ( !editor.addFeature( item ) )
+									continue;
+
+								toolbarGroup.items.push( item );
+							}
+						}
+					}
+				}
+
+				function populateToolbarConfig( config ) {
+					var toolbar = [],
+						i, group, newGroup;
+
+					for ( i = 0; i < config.length; ++i ) {
+						group = config[ i ];
+						newGroup = {};
+
+						if ( group == '/' )
+							toolbar.push( group );
+						else if ( CKEDITOR.tools.isArray( group) ) {
+							fillGroup( newGroup, CKEDITOR.tools.clone( group ) );
+							toolbar.push( newGroup );
+						}
+						else if ( group.items ) {
+							fillGroup( newGroup, CKEDITOR.tools.clone( group.items ) );
+							newGroup.name = group.name;
+							toolbar.push( newGroup);
+						}
+					}
+
+					return toolbar;
+				}
+
+				var toolbar = editor.config.floatingtools;
+
+				// If it is a string, return the relative "toolbar_name" config.
+				if ( typeof toolbar == 'string' )
+					toolbar = editor.config[ 'floatingtools_' + toolbar ];
+
+				return ( editor.toolbar = toolbar ? populateToolbarConfig( toolbar ) : buildToolbarConfig() );
+			},
+
+
+			/**
+			 * Return the default toolbar configuration.
+			 */
+			getPrivateFloatingToolbarGroups = function( editor ) {
+				return editor._.floatingToolsGroups || ( editor._.floatingToolsGroups = [
+					{ name: 'styles',    items: [ 'Font','FontSize' ]},
+					{ name: 'format',    items: [ 'Bold','Italic' ]},
+					{ name: 'paragraph', items: [ 'JustifyCenter','Outdent','Indent','NumberedList','BulletedList' ]}
+				]);
+			}
+
+		}
+
+	} );
+
+
+})();
+
+
+