Add oembed

[perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git] / sources / plugins / html5video / plugin.js

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