sources/plugins/html5audio/plugin.js

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