sources/plugins/html5video/plugin.js

   1 CKEDITOR.plugins.add( 'html5video', {
   2     requires: 'widget',
   3     lang: 'de,en,eu,es,ru,uk,fr',
   4     icons: 'html5video',
   5     init: function( editor ) {
   6         editor.widgets.add( 'html5video', {
   7             button: editor.lang.html5video.button,
   8             template: '<div class="ckeditor-html5-video"></div>',
   9             /*
  10              * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
  11              *  - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
  12              *  - video tags with src, controls, width and height attributes.
  13              */
  14             allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',
  15             requiredContent: 'div(ckeditor-html5-video); video[src,controls];',
  16             upcast: function( element ) {
  17                 return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );
  18             },
  19             dialog: 'html5video',
  20             init: function() {
  21                 var src = '';
  22                 var autoplay = '';
  23                 var align = this.element.getStyle( 'text-align' );
  24
  25                 var width = '';
  26                 var height = '';
  27
  28                 // If there's a child (the video element)
  29                 if ( this.element.getChild( 0 ) ) {
  30                     // get it's attributes.
  31                     src = this.element.getChild( 0 ).getAttribute( 'src' );
  32                     width = this.element.getChild( 0 ).getAttribute( 'width' );
  33                     height = this.element.getChild( 0 ).getAttribute( 'height' );
  34                     autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );
  35                                                                                 responsive = this.element.getAttribute( 'data-responsive' );
  36                 }
  37
  38                 if ( src ) {
  39                     this.setData( 'src', src );
  40
  41                     if ( align ) {
  42                         this.setData( 'align', align );
  43                     } else {
  44                         this.setData( 'align', 'none' );
  45                     }
  46
  47                     if ( width ) {
  48                         this.setData( 'width', width );
  49                     }
  50
  51                     if ( height ) {
  52                         this.setData( 'height', height );
  53                     }
  54
  55                     if ( autoplay ) {
  56                         this.setData( 'autoplay', 'yes' );
  57                     }
  58
  59                     if ( responsive ) {
  60                         this.setData( 'responsive', responsive );
  61                     }
  62                 }
  63             },
  64             data: function() {
  65                 // If there is an video source
  66                 if ( this.data.src ) {
  67                     // and there isn't a child (the video element)
  68                     if ( !this.element.getChild( 0 ) ) {
  69                         // Create a new <video> element.
  70                         var videoElement = new CKEDITOR.dom.element( 'video' );
  71                         // Set the controls attribute.
  72                         videoElement.setAttribute( 'controls', 'controls' );
  73                         // Append it to the container of the plugin.
  74                         this.element.append( videoElement );
  75                     }
  76                     this.element.getChild( 0 ).setAttribute( 'src', this.data.src );
  77                     if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width );
  78                     if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height );
  79
  80                     if ( this.data.responsive ) {
  81                             this.element.setAttribute("data-responsive", this.data.responsive);
  82                             this.element.getChild( 0 ).setStyle( 'max-width', '100%' );
  83                             this.element.getChild( 0 ).setStyle( 'height', 'auto' );
  84                     } else {
  85                             this.element.getChild( 0 ).removeStyle( 'max-width' );
  86                             this.element.getChild( 0 ).removeStyle( 'height' );
  87                     }
  88                 }
  89
  90                 this.element.removeStyle( 'float' );
  91                 this.element.removeStyle( 'margin-left' );
  92                 this.element.removeStyle( 'margin-right' );
  93
  94                 if ( this.data.align === 'none' ) {
  95                     this.element.removeStyle( 'text-align' );
  96                 } else {
  97                     this.element.setStyle( 'text-align', this.data.align );
  98                 }
  99
 100                 if ( this.data.align === 'left' ) {
 101                     this.element.setStyle( 'float', this.data.align );
 102                     this.element.setStyle( 'margin-right', '10px' );
 103                 } else if ( this.data.align === 'right' ) {
 104                     this.element.setStyle( 'float', this.data.align );
 105                     this.element.setStyle( 'margin-left', '10px' );
 106                 }
 107
 108                 if ( this.element.getChild( 0 ) ) {
 109                     if ( this.data.autoplay === 'yes' ) {
 110                         this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
 111                     } else {
 112                         this.element.getChild( 0 ).removeAttribute( 'autoplay' );
 113                     }
 114                 }
 115             }
 116         } );
 117
 118         if ( editor.contextMenu ) {
 119             editor.addMenuGroup( 'html5videoGroup' );
 120             editor.addMenuItem( 'html5videoPropertiesItem', {
 121                 label: editor.lang.html5video.videoProperties,
 122                 icon: 'html5video',
 123                 command: 'html5video',
 124                 group: 'html5videoGroup'
 125             });
 126
 127             editor.contextMenu.addListener( function( element ) {
 128                 if ( element &&
 129                      element.getChild( 0 ) &&
 130                      element.getChild( 0 ).hasClass &&
 131                      element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
 132                     return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };
 133                 }
 134             });
 135         }
 136
 137         CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );
 138     }
 139 } );