Editor.js

/**
 * ckeditor4 for QUIQQER
 *
 * @module package/quiqqer/ckeditor4/bin/Editor
 * @author www.pcsg.de (Henning Leutz)
 *
 * @require require
 * @require controls/editors/Editor
 * @require Locale
 * @require Ajax
 * @require qui/utils/Math
 * @require css!package/quiqqer/ckeditor4/bin/Editor.css
 */

define('package/quiqqer/ckeditor4/bin/Editor', [

    'require',
    'controls/editors/Editor',
    'Locale',
    'Ajax',
    'qui/utils/Math',
    'qui/utils/Elements',

    'css!package/quiqqer/ckeditor4/bin/Editor.css'

], function(require, Editor, Locale, Ajax, QUIMath, QUIElements)
{
    "use strict";

    return new Class({

        Extends : Editor,
        Type    : 'package/quiqqer/ckeditor4/bin/Editor',

        Binds : [
            '$onLoad',
            '$onDestroy',
            '$onSetContent',
            '$onGetContent',
            '$onDrop',
            '$onResize',
            '$onAddCSS',
            '$onInstanceReadyListener'
        ],

        initialize : function(Manager, options)
        {
            this.parent( Manager, options );

            this.$cssFiles = {};

            this.addEvents({
                onLoad       : this.$onLoad,
                onResize     : this.$onResize,
                onDestroy    : this.$onDestroy,
                onSetContent : this.$onSetContent,
                onGetContent : this.$onGetContent,
                onDrop       : this.$onDrop,
                onAddCSS     : this.$onAddCSS
            });
        },

        /**
         * Editor onLoad Event
         * if the editor is to be drawn and inserted
         *
         * @param {Object} data - Editor data
         */
        $onLoad : function(data)
        {
            var self = this;

            // load CKEDITOR
            require([ URL_OPT_DIR +'bin/package-ckeditor4/ckeditor.js' ], function()
            {
                window.CKEDITOR.on('instanceReady', self.$onInstanceReadyListener );

                self.$loadInstance( data );
            });
        },

        /**
         * Load the CKEditor Instance into an Textarea or DOMNode Element
         *
         * @param {Object} data - Editor settings data
         */
        $loadInstance : function(data)
        {
            if ( typeof window.CKEDITOR === 'undefined' ) {
                return;
            }

            var self      = this,
                Container = this.getContainer(),
                Textarea  = false,
                size      = Container.getSize();

            if ( !Container.getElement( 'textarea' ) )
            {
                Textarea = new Element('textarea', {
                    id : this.getId(),
                    styles : {
                        height : size.y,
                        width : size.x
                    }
                }).inject( Container );
            }

            if ( !Textarea ) {
                Textarea = Container.getElement( 'textarea' );
            }

            var instance = Textarea.get( 'id' );

            if ( window.CKEDITOR.instances[ instance ] ) {
                window.CKEDITOR.instances[ instance ].destroy( true );
            }

            self.setAttribute( 'instancename', instance );

            // http://docs.ckeditor.com/#!/guide/dev_howtos_dialog_windows
            window.CKEDITOR.on( 'dialogDefinition', function( ev )
            {
                self.$imageDialog( ev );
                self.$linkDialog( ev );
            });


            // parse the buttons for the ckeditor
            var b, g, i, len, blen, glen, group, items,
                buttonEntry, lineEntry, groupEntry;

            var buttons = data.toolbar,
                lines   = buttons.lines || [],
                toolbar = [];

            for ( i = 0, len = lines.length; i < len; i++ )
            {
                items     = [];
                lineEntry = lines[ i ];

                // groups
                for ( g = 0, glen = lineEntry.length; g < glen; g++ )
                {
                    group      = [];
                    groupEntry = lineEntry[ g ];

                    // buttons
                    for ( b = 0, blen = groupEntry.length; b < blen; b++ )
                    {
                        buttonEntry = groupEntry[ b ];

                        if ( buttonEntry.type == 'seperator' )
                        {
                            group.push( '-' );
                            continue;
                        }

                        group.push( buttonEntry.button );
                    }

                    toolbar.push( group );
                }

                toolbar.push( '/' );
            }

            var height = size.y,
                width  = size.x;

            if ( self.getAttribute( 'width' ) ) {
                width = self.getAttribute( 'width' );
            }

            if ( self.getAttribute( 'height' ) ) {
                height = self.getAttribute( 'height' );
            }

            var zIndex = QUIElements.getComputedZIndex( Container );

            // parse styles to fckedit styles
            var entry, styles = [];

            for ( i = 0, len = data.styles.length; i < len; i++ )
            {
                entry = data.styles[ i ];

                styles.push({
                    name : entry.text,
                    element : entry.element,
                    attributes : entry.attributes
                });
            }

            window.CKEDITOR.replace(instance, {
                language : Locale.getCurrent(),
                baseHref : URL_DIR,
                basePath : URL_DIR,
                height   : height,
                width    : width,
                toolbar  : toolbar,

                allowedContent      : true,
                extraAllowedContent : 'div(*)[*]{*}, iframe(*)[*]{*}',

                stylesSet    : styles,
                contentsCss  : data.cssFiles,
                bodyClass    : data.bodyClass,
                // plugins      : CKEDITOR_NEXGAM_PLUGINS,
                // templates_files : [URL_OPT_DIR +'base/bin/pcsgEditorPlugins/templates.php'],
                baseFloatZIndex : zIndex
                //extraPlugins : 'panel,button,menu,floatpanel,menubutton,htmlbuttons'
            });

        },

        /**
         * Editor onDestroy Event
         *
         * @param {Object} Editor - controls/editors/Editor
         */
        $onDestroy : function(Editor)
        {
            var Instance = Editor.getInstance();

            if ( window.CKEDITOR.instances[ Instance.name ] )
            {
                try
                {
                    window.CKEDITOR.instances[ Instance.name ].destroy( true );

                } catch ( e ) {

                }

                window.CKEDITOR.instances[ Instance.name ] = null;
                delete window.CKEDITOR.instances[ Instance.name ];


                window.CKEDITOR.removeListener(
                    'instanceReady',
                    this.$onInstanceReadyListener
                );
            }
        },

        /**
         * event : instance ready
         * @param instance
         */
        $onInstanceReadyListener : function(instance)
        {
            if ( typeof instance.editor === 'undefined' ||
                 typeof instance.editor.name  === 'undefined' ||
                 instance.editor.name !== this.getAttribute( 'instancename' ) )
            {
                return;
            }

            // resize the editor
            var Container = this.getContainer(),
                containerSize = Container.getSize();

            // fckeditor resize, setHeight is sooooooooooo mysterious
            instance.editor.resize( containerSize.x, containerSize.y );

            this.setInstance( instance.editor );
            this.fireEvent( 'loaded', [ this, instance.editor ] );

            instance.editor.focus();
        },

        /**
         * event : on resize
         */
        $onResize : function()
        {
            var Container = this.getContainer(),
                Instance = this.getInstance(),
                containerSize = Container.getSize();

            Instance.resize( containerSize.x, containerSize.y );
        },

        /**
         * Editor onSetContent Event
         *
         * @param {String} content
         * @param {Object} Editor - controls/editors/Editor
         */
        $onSetContent : function(content, Editor)
        {
            if ( Editor.getInstance() ) {
                Editor.getInstance().setData( content );
            }
        },

        /**
         * Editor onGetContent Event
         *
         * @param {Object} Editor - controls/editors/Editor
         */
        $onGetContent : function(Editor)
        {
            if ( Editor.getInstance() ) {
                Editor.setAttribute( 'content', Editor.getInstance().getData() );
            }
        },

        /**
         * Set the focus to the editor
         */
        focus : function()
        {
            if ( this.getInstance() ) {
                this.getInstance().focus();
            }
        },

        /**
         * Switch to source mode
         */
        switchToSource : function()
        {
            if ( this.getInstance() ) {
                this.getInstance().setMode( 'source' );
            }
        },

        /**
         * Switch to wysiwyg editor
         */
        switchToWYSIWYG : function()
        {
            if ( this.getInstance() ) {
                this.getInstance().setMode( 'wysiwyg' );
            }
        },

        /**
         * Hide the toolbar
         */
        hideToolbar : function()
        {
            var Toolbar = this.getElm().getElement( '.cke_top' );

            if ( Toolbar ) {
                Toolbar.setStyle( 'display', 'none' );
            }
        },

        /**
         * show the toolbar
         */
        showToolbar : function()
        {
            var Toolbar = this.getElm().getElement( '.cke_top' );

            if ( Toolbar ) {
                Toolbar.setStyle( 'display', null );
            }
        },

        /**
         * Set the height of the instance
         *
         * @param {Number} height
         */
        setHeight : function(height)
        {
            if ( this.getInstance() ) {
                this.getInstance().resize( false, height );
            }

            this.setAttribute( 'height', height );
        },

        /**
         * Set the height of the instance
         *
         * @param {Number} width
         */
        setWidth : function(width)
        {
            if ( this.getInstance() ) {
                this.getInstance().resize( width, false );
            }

            this.setAttribute( 'width', width );
        },

        /**
         * event : on add css
         *
         * @param {String} file - path to the css file
         * @param {Object} Editor - controls/editor/Editor
         */
        $onAddCSS : function(file, Editor)
        {
            var Instance = this.getInstance();

            this.$cssFiles[ file ] = true;

            if ( Instance )
            {
                var Doc  = Editor.getDocument(),
                    Link = Doc.createElement('link');

                Link.href = file;
                Link.rel  = "stylesheet";
                Link.type = "text/css";

                Doc.head.appendChild( Link );
            }
        },

        /**
         * event : on Drop
         * @param {Object} params
         */
        $onDrop : function(params)
        {
            var Instance = this.getInstance();

            for ( var i = 0, len = params.length; i < len; i++ ) {
                Instance.insertHtml( "<img src="+ params[ i ].url +" />" );
            }
        },

        /**
         * edit the image dialog
         *
         * @param {DOMEvent} ev - CKEvent
         * @return {DOMEvent} ev (CKEvent)
         */
        $imageDialog : function(ev)
        {
            // Take the dialog name and its definition from the event data.
            var self             = this,
                dialogName       = ev.data.name,
                dialogDefinition = ev.data.definition;

            /**
             * Image dialog
             */
            if ( dialogName != 'image' ) {
                return ev;
            }

            var oldOnShow = dialogDefinition.onShow;

            // Get a reference to the "Link Info" tab.
            dialogDefinition.onShow = function()
            {
                var Button;

                oldOnShow.bind( this )();

                // image button
                var UrlGroup = this.getContentElement('info', 'txtUrl' )
                                   .getElement()
                                   .$;

                var UrlInput = UrlGroup.getElement( 'input[type="text"]' );

                var HeightInput = this.getContentElement('info', 'txtHeight' )
                                      .getElement().$
                                      .getElement( 'input[type="text"]' );

                var WidthInput = this.getContentElement('info', 'txtWidth' )
                                     .getElement().$
                                     .getElement( 'input[type="text"]' );


                if ( !UrlGroup.getElement( '.qui-button' ) )
                {
                    Button = new Element('button', {
                        'class' : 'qui-button',
                        html : '<span class="icon-picture"></span>',
                        events :
                        {
                            click : function()
                            {
                                self.openMedia({
                                    events :
                                    {
                                        onSubmit : function(Win, data)
                                        {
                                            UrlInput.value = data.url;

                                            Ajax.get('ajax_media_details', function(fileData)
                                            {
                                                if ( fileData.image_height > 500 ||
                                                     fileData.image_width > 500 )
                                                {
                                                    var result = QUIMath.resizeVar(
                                                        fileData.image_height,
                                                        fileData.image_width,
                                                        500
                                                    );

                                                    HeightInput.value = result.var1;
                                                    WidthInput.value  = result.var2;

                                                } else
                                                {
                                                    HeightInput.value = fileData.image_height;
                                                    WidthInput.value  = fileData.image_width;
                                                }

                                            }, {
                                                project : data.project,
                                                fileid  : data.id
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    }).inject( UrlGroup );

                    Button.getPrevious().setStyles({
                        'float' : 'left'
                    });
                }


                // link button
                var LinkGroup = this.getContentElement('Link', 'txtUrl' )
                                   .getElement()
                                   .$;


                if ( LinkGroup.getElement( '.qui-button' ) ) {
                    return;
                }

                var LinkInput = LinkGroup.getElement( 'input[type="text"]' );

                Button = new Element('button', {
                    'class' : 'qui-button',
                    html : '<span class="icon-home"></span>',
                    events :
                    {
                        click : function()
                        {
                            self.openProject({
                                events :
                                {
                                    onSubmit : function(Win, data) {
                                        LinkInput.value = data.urls[ 0 ];
                                    }
                                }
                            });
                        }
                    }
                }).inject( LinkGroup );

                var Prev = Button.getPrevious();

                Prev.setStyles({
                    'float' : 'left',
                    width : Prev.getSize().x - 100
                });
            };

            return ev;
        },

        /**
         * edit the link dialog
         *
         * @param {DOMEvent} ev - CKEvent
         * @return {DOMEvent} ev - CKEvent
         */
        $linkDialog : function(ev)
        {
            // Take the dialog name and its definition from the event data.
            var dialogName = ev.data.name;

            /**
             * Link dialog
             */
            if ( dialogName != 'link' ) {
                return ev;
            }

            // remove protokoll dropdown
            //dialogDefinition.getContents( 'info' ).remove( 'protocol');

            // remove protokoll at insertion
            var Protokoll;

            var dialogDefinition = ev.data.definition,
                Url       = dialogDefinition.getContents( 'info' ).get( 'url' ),
                orgCommit = Url.commit;

            Url.commit = function( data )
            {
                orgCommit.call( this, data );

                Protokoll = dialogDefinition.dialog
                                            .getContentElement('info', 'protocol' )
                                            .getElement()
                                            .$
                                            .getElement('select');

                data.url = {
                    protocol : Protokoll.value,
                    url      : this.getValue()
                };
            };

            var self      = this,
                oldOnShow = dialogDefinition.onShow;

            // Get a reference to the "Link Info" tab.
            dialogDefinition.onShow = function()
            {
                oldOnShow.bind( this )();

                var UrlGroup = this.getContentElement('info', 'url' )
                                   .getElement()
                                   .$;

                if ( UrlGroup.getElement( '.qui-button' ) ) {
                    return;
                }

                var UrlInput  = UrlGroup.getElement( 'input[type="text"]' );

                Protokoll = this.getContentElement('info', 'protocol' )
                                .getElement()
                                .$
                                .getElement('select');

                UrlInput.setStyles({
                    'float' : 'left',
                    width   : UrlInput.getSize().x - 100
                });

                var Links = new Element('button', {
                    'class' : 'qui-button',
                    html    : '<span class="icon-home"></span>',
                    events  :
                    {
                        click : function()
                        {
                            self.openProject({
                                events :
                                {
                                    onSubmit : function(Win, data)
                                    {
                                        UrlInput.value  = data.urls[ 0 ];
                                        Protokoll.value = '';
                                    }
                                }
                            });
                        }
                    }
                }).inject( UrlInput, 'after' );

                // image button
                new Element('button', {
                    'class' : 'qui-button',
                    html    : '<span class="icon-picture"></span>',
                    events  :
                    {
                        click : function()
                        {
                            self.openMedia({
                                events :
                                {
                                    onSubmit : function(Win, data)
                                    {
                                        UrlInput.value = data.url;
                                        Protokoll.value = '';
                                    }
                                }
                            });
                        }
                    }
                }).inject( Links, 'after' );
            };

            return ev;
        }
    });
});