sources/plugins/Audio/dialogs/audio.js

   1 CKEDITOR.dialog.add( 'audio', function ( editor )
   2 {
   3         var lang = editor.lang.audio;
   4
   5         function commitValue( audioNode, extraStyles )
   6         {
   7                 var value=this.getValue();
   8
   9                 if ( !value && this.id=='id' )
  10                         value = generateId();
  11
  12                 audioNode.setAttribute( this.id, value);
  13
  14                 if ( !value )
  15                         return;
  16                 switch( this.id )
  17                 {
  18                         case 'poster':
  19                                 extraStyles.backgroundImage = 'url(' + value + ')';
  20                                 break;
  21                         case 'width':
  22                                 extraStyles.width = value + 'px';
  23                                 break;
  24                         case 'height':
  25                                 extraStyles.height = value + 'px';
  26                                 break;
  27                 }
  28         }
  29
  30         function commitSrc( audioNode, extraStyles, audios )
  31         {
  32                 var match = this.id.match(/(\w+)(\d)/),
  33                         id = match[1],
  34                         number = parseInt(match[2], 10);
  35
  36                 var audio = audios[number] || (audios[number]={});
  37                 audio[id] = this.getValue();
  38         }
  39
  40         function loadValue( audioNode )
  41         {
  42                 if ( audioNode )
  43                         this.setValue( audioNode.getAttribute( this.id ) );
  44                 else
  45                 {
  46                         if ( this.id == 'id')
  47                                 this.setValue( generateId() );
  48                 }
  49         }
  50
  51         function loadSrc( audioNode, audios )
  52         {
  53                 var match = this.id.match(/(\w+)(\d)/),
  54                         id = match[1],
  55                         number = parseInt(match[2], 10);
  56
  57                 var audio = audios[number];
  58                 if (!audio)
  59                         return;
  60                 this.setValue( audio[ id ] );
  61         }
  62
  63         function generateId()
  64         {
  65                 var now = new Date();
  66                 return 'audio' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
  67         }
  68
  69         // To automatically get the dimensions of the poster image
  70         var onImgLoadEvent = function()
  71         {
  72                 // Image is ready.
  73                 var preview = this.previewImage;
  74                 preview.removeListener( 'load', onImgLoadEvent );
  75                 preview.removeListener( 'error', onImgLoadErrorEvent );
  76                 preview.removeListener( 'abort', onImgLoadErrorEvent );
  77
  78                 this.setValueOf( 'info', 'width', preview.$.width );
  79                 this.setValueOf( 'info', 'height', preview.$.height );
  80         };
  81
  82         var onImgLoadErrorEvent = function()
  83         {
  84                 // Error. Image is not loaded.
  85                 var preview = this.previewImage;
  86                 preview.removeListener( 'load', onImgLoadEvent );
  87                 preview.removeListener( 'error', onImgLoadErrorEvent );
  88                 preview.removeListener( 'abort', onImgLoadErrorEvent );
  89         };
  90
  91         return {
  92                 title : lang.dialogTitle,
  93                 minWidth : 400,
  94                 minHeight : 200,
  95
  96                 onShow : function()
  97                 {
  98                         // Clear previously saved elements.
  99                         this.fakeImage = this.audioNode = null;
 100                         // To get dimensions of poster image
 101                         this.previewImage = editor.document.createElement( 'img' );
 102
 103                         var fakeImage = this.getSelectedElement();
 104                         if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'audio' )
 105                         {
 106                                 this.fakeImage = fakeImage;
 107
 108                                 var audioNode = editor.restoreRealElement( fakeImage ),
 109                                         audios = [],
 110                                         sourceList = audioNode.getElementsByTag( 'source', '' );
 111                                 if (sourceList.count()==0)
 112                                         sourceList = audioNode.getElementsByTag( 'source', 'cke' );
 113
 114                                 for ( var i = 0, length = sourceList.count() ; i < length ; i++ )
 115                                 {
 116                                         var item = sourceList.getItem( i );
 117                                         audios.push( {src : item.getAttribute( 'src' ), type: item.getAttribute( 'type' )} );
 118                                 }
 119
 120                                 this.audioNode = audioNode;
 121
 122                                 this.setupContent( audioNode, audios );
 123                         }
 124                         else
 125                                 this.setupContent( null, [] );
 126                 },
 127
 128                 onOk : function()
 129                 {
 130                         // If there's no selected element create one. Otherwise, reuse it
 131                         var audioNode = null;
 132                         if ( !this.fakeImage )
 133                         {
 134                                 audioNode = CKEDITOR.dom.element.createFromHtml( '<cke:audio></cke:audio>', editor.document );
 135                                 audioNode.setAttributes(
 136                                         {
 137                                                 controls : 'controls'
 138                                         } );
 139                         }
 140                         else
 141                         {
 142                                 audioNode = this.audioNode;
 143                         }
 144
 145                         var extraStyles = {}, audios = [];
 146                         this.commitContent( audioNode, extraStyles, audios );
 147
 148                         var innerHtml = '', links = '',
 149                                 link = lang.linkTemplate || '',
 150                                 fallbackTemplate = lang.fallbackTemplate || '';
 151                         for(var i=0; i<audios.length; i++)
 152                         {
 153                                 var audio = audios[i];
 154                                 if ( !audio || !audio.src )
 155                                         continue;
 156                                 innerHtml += '<cke:source src="' + audio.src + '" type="' + audio.type + '" />';
 157                                 links += link.replace('%src%', audio.src).replace('%type%', audio.type);
 158                         }
 159                         audioNode.setHtml( innerHtml + fallbackTemplate.replace( '%links%', links ) );
 160
 161                         // Refresh the fake image.
 162                         var newFakeImage = editor.createFakeElement( audioNode, 'cke_audio', 'audio', false );
 163                         newFakeImage.setStyles( extraStyles );
 164                         if ( this.fakeImage )
 165                         {
 166                                 newFakeImage.replace( this.fakeImage );
 167                                 editor.getSelection().selectElement( newFakeImage );
 168                         }
 169                         else
 170                         {
 171                                 // Insert it in a div
 172                                 var div = new CKEDITOR.dom.element( 'DIV', editor.document );
 173                                 editor.insertElement( div );
 174                                 div.append( newFakeImage );
 175                         }
 176                 },
 177                 onHide : function()
 178                 {
 179                         if ( this.previewImage )
 180                         {
 181                                 this.previewImage.removeListener( 'load', onImgLoadEvent );
 182                                 this.previewImage.removeListener( 'error', onImgLoadErrorEvent );
 183                                 this.previewImage.removeListener( 'abort', onImgLoadErrorEvent );
 184                                 this.previewImage.remove();
 185                                 this.previewImage = null;               // Dialog is closed.
 186                         }
 187                 },
 188
 189                 contents :
 190                 [
 191                         {
 192                                 id : 'info',
 193                                 elements :
 194                                 [
 195                                         {
 196                                                 type : 'hbox',
 197                                                 widths: [ '', '100px'],
 198                                                 children : [
 199                                                         {
 200                                                                 type : 'text',
 201                                                                 id : 'poster',
 202                                                                 label : lang.poster,
 203                                                                 commit : commitValue,
 204                                                                 setup : loadValue,
 205                                                                 onChange : function()
 206                                                                 {
 207                                                                         var dialog = this.getDialog(),
 208                                                                                 newUrl = this.getValue();
 209
 210                                                                         //Update preview image
 211                                                                         if ( newUrl.length > 0 )        //Prevent from load before onShow
 212                                                                         {
 213                                                                                 dialog = this.getDialog();
 214                                                                                 var preview = dialog.previewImage;
 215
 216                                                                                 preview.on( 'load', onImgLoadEvent, dialog );
 217                                                                                 preview.on( 'error', onImgLoadErrorEvent, dialog );
 218                                                                                 preview.on( 'abort', onImgLoadErrorEvent, dialog );
 219                                                                                 preview.setAttribute( 'src', newUrl );
 220                                                                         }
 221                                                                 }
 222                                                         },
 223                                                         {
 224                                                                 type : 'button',
 225                                                                 id : 'browse',
 226                                                                 hidden : 'true',
 227                                                                 style : 'display:inline-block;margin-top:10px;',
 228                                                                 filebrowser :
 229                                                                 {
 230                                                                         action : 'Browse',
 231                                                                         target: 'info:poster',
 232                                                                         url: editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl
 233                                                                 },
 234                                                                 label : editor.lang.common.browseServer
 235                                                         }]
 236                                         },
 237                                         {
 238                                                 type : 'hbox',
 239                                                 widths: [ '33%', '33%', '33%'],
 240                                                 children : [
 241                                                         {
 242                                                                 type : 'text',
 243                                                                 id : 'width',
 244                                                                 label : editor.lang.common.width,
 245                                                                 'default' : 400,
 246                                                                 validate : CKEDITOR.dialog.validate.notEmpty( lang.widthRequired ),
 247                                                                 commit : commitValue,
 248                                                                 setup : loadValue
 249                                                         },
 250                                                         {
 251                                                                 type : 'text',
 252                                                                 id : 'height',
 253                                                                 label : editor.lang.common.height,
 254                                                                 'default' : 300,
 255                                                                 validate : CKEDITOR.dialog.validate.notEmpty(lang.heightRequired ),
 256                                                                 commit : commitValue,
 257                                                                 setup : loadValue
 258                                                         },
 259                                                         {
 260                                                                 type : 'text',
 261                                                                 id : 'id',
 262                                                                 label : 'Id',
 263                                                                 commit : commitValue,
 264                                                                 setup : loadValue
 265                                                         }
 266                                                                 ]
 267                                         },
 268                                         {
 269                                                 type : 'hbox',
 270                                                 widths: [ '', '100px', '75px'],
 271                                                 children : [
 272                                                         {
 273                                                                 type : 'text',
 274                                                                 id : 'src0',
 275                                                                 label : lang.sourceaudio,
 276                                                                 commit : commitSrc,
 277                                                                 setup : loadSrc
 278                                                         },
 279                                                         {
 280                                                                 type : 'button',
 281                                                                 id : 'browse',
 282                                                                 hidden : 'true',
 283                                                                 style : 'display:inline-block;margin-top:10px;',
 284                                                                 filebrowser :
 285                                                                 {
 286                                                                         action : 'Browse',
 287                                                                         target: 'info:src0',
 288                                                                         url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
 289                                                                 },
 290                                                                 label : editor.lang.common.browseServer
 291                                                         },
 292                                                         {
 293                                                                 id : 'type0',
 294                                                                 label : lang.sourceType,
 295                                                                 type : 'select',
 296                                                                 'default' : 'audio/mp3',
 297                                                                 items :
 298                                                                 [
 299                                                                         [ 'MP3', 'audio/mp3' ],
 300                                                                         [ 'WAV', 'audio/wav' ]
 301                                                                 ],
 302                                                                 commit : commitSrc,
 303                                                                 setup : loadSrc
 304                                                         }]
 305                                         },
 306
 307                                         {
 308                                                 type : 'hbox',
 309                                                 widths: [ '', '100px', '75px'],
 310                                                 children : [
 311                                                         {
 312                                                                 type : 'text',
 313                                                                 id : 'src1',
 314                                                                 label : lang.sourceaudio,
 315                                                                 commit : commitSrc,
 316                                                                 setup : loadSrc
 317                                                         },
 318                                                         {
 319                                                                 type : 'button',
 320                                                                 id : 'browse',
 321                                                                 hidden : 'true',
 322                                                                 style : 'display:inline-block;margin-top:10px;',
 323                                                                 filebrowser :
 324                                                                 {
 325                                                                         action : 'Browse',
 326                                                                         target: 'info:src1',
 327                                                                         url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
 328                                                                 },
 329                                                                 label : editor.lang.common.browseServer
 330                                                         },
 331                                                         {
 332                                                                 id : 'type1',
 333                                                                 label : lang.sourceType,
 334                                                                 type : 'select',
 335                                                                 'default':'audio/wav',
 336                                                                 items :
 337                                                                 [
 338                                                                         [ 'MP3', 'audio/mp3' ],
 339                                                                         [ 'WAV', 'audio/wav' ]
 340                                                                 ],
 341                                                                 commit : commitSrc,
 342                                                                 setup : loadSrc
 343                                                         }]
 344                                         }
 345                                 ]
 346                         }
 347
 348                 ]
 349         };
 350 } );