X-Git-Url: https://git.immae.eu/?p=perso%2FImmae%2FProjets%2Fpackagist%2Fludivine-ckeditor-component.git;a=blobdiff_plain;f=sources%2Fplugins%2Fhtml5video%2Fplugin.js;fp=sources%2Fplugins%2Fhtml5video%2Fplugin.js;h=1bfff7f9b518c6236b3354d3335318b54ad4b463;hp=0000000000000000000000000000000000000000;hb=7183f6a6a21ad9124e70c997e0168459f377a9f2;hpb=d1844275460a3e3a32e199326f6b36938a329091

diff --git a/sources/plugins/html5video/plugin.js b/sources/plugins/html5video/plugin.js
new file mode 100644
index 0000000..1bfff7f
--- /dev/null
+++ b/sources/plugins/html5video/plugin.js
@@ -0,0 +1,129 @@
+CKEDITOR.plugins.add( 'html5video', {
+    requires: 'widget',
+    lang: 'de,en,eu,es,ru,uk,fr',
+    icons: 'html5video',
+    init: function( editor ) {
+        editor.widgets.add( 'html5video', {
+            button: editor.lang.html5video.button,
+            template: '<div class="ckeditor-html5-video"></div>',
+            /*
+             * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
+             *  - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
+             *  - video tags with src and controls attributes.
+             */
+            allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',
+            requiredContent: 'div(ckeditor-html5-video); video[src,controls];',
+            upcast: function( element ) {
+                return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );
+            },
+            dialog: 'html5video',
+            init: function() {
+                var src = '';
+                var autoplay = '';
+                var align = this.element.getStyle( 'text-align' );
+
+                var width = '';
+                var height = '';
+
+                // If there's a child (the video element)
+                if ( this.element.getChild( 0 ) ) {
+                    // get it's attributes.
+                    src = this.element.getChild( 0 ).getAttribute( 'src' );
+                    width = this.element.getChild( 0 ).getAttribute( 'width' );
+                    height = this.element.getChild( 0 ).getAttribute( 'height' );
+                    autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );
+                }
+
+                if ( src ) {
+                    this.setData( 'src', src );
+
+                    if ( align ) {
+                        this.setData( 'align', align );
+                    } else {
+                        this.setData( 'align', 'none' );
+                    }
+
+                    if ( width ) {
+                        this.setData( 'width', width );
+                    } else {
+                        this.setData( 'width', '400' );
+                    }
+
+                    if ( height ) {
+                        this.setData( 'height', height );
+                    } else {
+                        this.setData( 'height', '300' );
+                    }
+
+                    if ( autoplay ) {
+                        this.setData( 'autoplay', 'yes' );
+                    }
+                }
+            },
+            data: function() {
+                // If there is an video source
+                if ( this.data.src ) {
+                    // and there isn't a child (the video element)
+                    if ( !this.element.getChild( 0 ) ) {
+                        // Create a new <video> element.
+                        var videoElement = new CKEDITOR.dom.element( 'video' );
+                        // Set the controls attribute.
+                        videoElement.setAttribute( 'controls', 'controls' );
+                        // Append it to the container of the plugin.
+                        this.element.append( videoElement );
+                    }
+                    this.element.getChild( 0 ).setAttribute( 'src', this.data.src )
+                        .setAttribute( 'width', this.data.width )
+                        .setAttribute( 'height', this.data.height );
+                }
+
+                this.element.removeStyle( 'float' );
+                this.element.removeStyle( 'margin-left' );
+                this.element.removeStyle( 'margin-right' );
+
+                if ( this.data.align === 'none' ) {
+                    this.element.removeStyle( 'text-align' );
+                } else {
+                    this.element.setStyle( 'text-align', this.data.align );
+                }
+
+                if ( this.data.align === 'left' ) {
+                    this.element.setStyle( 'float', this.data.align );
+                    this.element.setStyle( 'margin-right', '10px' );
+                } else if ( this.data.align === 'right' ) {
+                    this.element.setStyle( 'float', this.data.align );
+                    this.element.setStyle( 'margin-left', '10px' );
+                }
+
+                if ( this.element.getChild( 0 ) ) {
+                    if ( this.data.autoplay === 'yes' ) {
+                        this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
+                    } else {
+                        this.element.getChild( 0 ).removeAttribute( 'autoplay' );
+                    }
+                }
+            }
+        } );
+
+        if ( editor.contextMenu ) {
+            editor.addMenuGroup( 'html5videoGroup' );
+            editor.addMenuItem( 'html5videoPropertiesItem', {
+                label: editor.lang.html5video.videoProperties,
+                icon: 'html5video',
+                command: 'html5video',
+                group: 'html5videoGroup'
+            });
+
+            editor.contextMenu.addListener( function( element ) {
+                if ( element &&
+                     element.getChild( 0 ) &&
+                     element.getChild( 0 ).hasClass &&
+                     element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
+                    return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };
+                }
+            });
+        }
+
+        CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );
+    }
+} );