[Summary view] [Print] [Text view]

   1  (function() {
   2      var url;
   3  
   4      if (url = tinyMCEPopup.getParam("media_external_list_url"))
   5          document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
   6  
   7  	function get(id) {
   8          return document.getElementById(id);
   9      }
  10  
  11  	function clone(obj) {
  12          var i, len, copy, attr;
  13  
  14          if (null == obj || "object" != typeof obj)
  15              return obj;
  16  
  17          // Handle Array

  18          if ('length' in obj) {
  19              copy = [];
  20  
  21              for (i = 0, len = obj.length; i < len; ++i) {
  22                  copy[i] = clone(obj[i]);
  23              }
  24  
  25              return copy;
  26          }
  27  
  28          // Handle Object

  29          copy = {};
  30          for (attr in obj) {
  31              if (obj.hasOwnProperty(attr))
  32                  copy[attr] = clone(obj[attr]);
  33          }
  34  
  35          return copy;
  36      }
  37  
  38  	function getVal(id) {
  39          var elm = get(id);
  40  
  41          if (elm.nodeName == "SELECT")
  42              return elm.options[elm.selectedIndex].value;
  43  
  44          if (elm.type == "checkbox")
  45              return elm.checked;
  46  
  47          return elm.value;
  48      }
  49  
  50  	function setVal(id, value, name) {
  51          if (typeof(value) != 'undefined' && value != null) {
  52              var elm = get(id);
  53  
  54              if (elm.nodeName == "SELECT")
  55                  selectByValue(document.forms[0], id, value);
  56              else if (elm.type == "checkbox") {
  57                  if (typeof(value) == 'string') {
  58                      value = value.toLowerCase();
  59                      value = (!name && value === 'true') || (name && value === name.toLowerCase());
  60                  }
  61                  elm.checked = !!value;
  62              } else
  63                  elm.value = value;
  64          }
  65      }
  66  
  67      window.Media = {
  68          init : function() {
  69              var html, editor, self = this;
  70  
  71              self.editor = editor = tinyMCEPopup.editor;
  72  
  73              // Setup file browsers and color pickers

  74              get('filebrowsercontainer').innerHTML = getBrowserHTML('filebrowser','src','media','media');
  75              get('qtsrcfilebrowsercontainer').innerHTML = getBrowserHTML('qtsrcfilebrowser','quicktime_qtsrc','media','media');
  76              get('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
  77              get('video_altsource1_filebrowser').innerHTML = getBrowserHTML('video_filebrowser_altsource1','video_altsource1','media','media');
  78              get('video_altsource2_filebrowser').innerHTML = getBrowserHTML('video_filebrowser_altsource2','video_altsource2','media','media');
  79              get('audio_altsource1_filebrowser').innerHTML = getBrowserHTML('audio_filebrowser_altsource1','audio_altsource1','media','media');
  80              get('audio_altsource2_filebrowser').innerHTML = getBrowserHTML('audio_filebrowser_altsource2','audio_altsource2','media','media');
  81              get('video_poster_filebrowser').innerHTML = getBrowserHTML('filebrowser_poster','video_poster','image','media');
  82  
  83              html = self.getMediaListHTML('medialist', 'src', 'media', 'media');
  84              if (html == "")
  85                  get("linklistrow").style.display = 'none';
  86              else
  87                  get("linklistcontainer").innerHTML = html;
  88  
  89              if (isVisible('filebrowser'))
  90                  get('src').style.width = '230px';
  91  
  92              if (isVisible('video_filebrowser_altsource1'))
  93                  get('video_altsource1').style.width = '220px';
  94  
  95              if (isVisible('video_filebrowser_altsource2'))
  96                  get('video_altsource2').style.width = '220px';
  97  
  98              if (isVisible('audio_filebrowser_altsource1'))
  99                  get('audio_altsource1').style.width = '220px';
 100  
 101              if (isVisible('audio_filebrowser_altsource2'))
 102                  get('audio_altsource2').style.width = '220px';
 103  
 104              if (isVisible('filebrowser_poster'))
 105                  get('video_poster').style.width = '220px';
 106  
 107              editor.dom.setOuterHTML(get('media_type'), self.getMediaTypeHTML(editor));
 108  
 109              self.setDefaultDialogSettings(editor);
 110              self.data = clone(tinyMCEPopup.getWindowArg('data'));
 111              self.dataToForm();
 112              self.preview();
 113  
 114              updateColor('bgcolor_pick', 'bgcolor');
 115          },
 116  
 117          insert : function() {
 118              var editor = tinyMCEPopup.editor;
 119  
 120              this.formToData();
 121              editor.execCommand('mceRepaint');
 122              tinyMCEPopup.restoreSelection();
 123              editor.selection.setNode(editor.plugins.media.dataToImg(this.data));
 124              tinyMCEPopup.close();
 125          },
 126  
 127          preview : function() {
 128              get('prev').innerHTML = this.editor.plugins.media.dataToHtml(this.data, true);
 129          },
 130  
 131          moveStates : function(to_form, field) {
 132              var data = this.data, editor = this.editor,
 133                  mediaPlugin = editor.plugins.media, ext, src, typeInfo, defaultStates, src;
 134  
 135              defaultStates = {
 136                  // QuickTime

 137                  quicktime_autoplay : true,
 138                  quicktime_controller : true,
 139  
 140                  // Flash

 141                  flash_play : true,
 142                  flash_loop : true,
 143                  flash_menu : true,
 144  
 145                  // WindowsMedia

 146                  windowsmedia_autostart : true,
 147                  windowsmedia_enablecontextmenu : true,
 148                  windowsmedia_invokeurls : true,
 149  
 150                  // RealMedia

 151                  realmedia_autogotourl : true,
 152                  realmedia_imagestatus : true
 153              };
 154  
 155  			function parseQueryParams(str) {
 156                  var out = {};
 157  
 158                  if (str) {
 159                      tinymce.each(str.split('&'), function(item) {
 160                          var parts = item.split('=');
 161  
 162                          out[unescape(parts[0])] = unescape(parts[1]);
 163                      });
 164                  }
 165  
 166                  return out;
 167              };
 168  
 169  			function setOptions(type, names) {
 170                  var i, name, formItemName, value, list;
 171  
 172                  if (type == data.type || type == 'global') {
 173                      names = tinymce.explode(names);
 174                      for (i = 0; i < names.length; i++) {
 175                          name = names[i];
 176                          formItemName = type == 'global' ? name : type + '_' + name;
 177  
 178                          if (type == 'global')
 179                          list = data;
 180                      else if (type == 'video' || type == 'audio') {
 181                              list = data.video.attrs;
 182  
 183                              if (!list && !to_form)
 184                              data.video.attrs = list = {};
 185                          } else
 186                          list = data.params;
 187  
 188                          if (list) {
 189                              if (to_form) {
 190                                  setVal(formItemName, list[name], type == 'video' || type == 'audio' ? name : '');
 191                              } else {
 192                                  delete list[name];
 193  
 194                                  value = getVal(formItemName);
 195                                  if ((type == 'video' || type == 'audio') && value === true)
 196                                      value = name;
 197  
 198                                  if (defaultStates[formItemName]) {
 199                                      if (value !== defaultStates[formItemName]) {
 200                                          value = "" + value;
 201                                          list[name] = value;
 202                                      }
 203                                  } else if (value) {
 204                                      value = "" + value;
 205                                      list[name] = value;
 206                                  }
 207                              }
 208                          }
 209                      }
 210                  }
 211              }
 212  
 213              if (!to_form) {
 214                  data.type = get('media_type').options[get('media_type').selectedIndex].value;
 215                  data.width = getVal('width');
 216                  data.height = getVal('height');
 217  
 218                  // Switch type based on extension

 219                  src = getVal('src');
 220                  if (field == 'src') {
 221                      ext = src.replace(/^.*\.([^.]+)$/, '$1');
 222                      if (typeInfo = mediaPlugin.getType(ext))
 223                          data.type = typeInfo.name.toLowerCase();
 224  
 225                      setVal('media_type', data.type);
 226                  }
 227  
 228                  if (data.type == "video" || data.type == "audio") {
 229                      if (!data.video.sources)
 230                          data.video.sources = [];
 231  
 232                      data.video.sources[0] = {src: getVal('src')};
 233                  }
 234              }
 235  
 236              // Hide all fieldsets and show the one active

 237              get('video_options').style.display = 'none';
 238              get('audio_options').style.display = 'none';
 239              get('flash_options').style.display = 'none';
 240              get('quicktime_options').style.display = 'none';
 241              get('shockwave_options').style.display = 'none';
 242              get('windowsmedia_options').style.display = 'none';
 243              get('realmedia_options').style.display = 'none';
 244              get('embeddedaudio_options').style.display = 'none';
 245  
 246              if (get(data.type + '_options'))
 247                  get(data.type + '_options').style.display = 'block';
 248  
 249              setVal('media_type', data.type);
 250  
 251              setOptions('flash', 'play,loop,menu,swliveconnect,quality,scale,salign,wmode,base,flashvars');
 252              setOptions('quicktime', 'loop,autoplay,cache,controller,correction,enablejavascript,kioskmode,autohref,playeveryframe,targetcache,scale,starttime,endtime,target,qtsrcchokespeed,volume,qtsrc');
 253              setOptions('shockwave', 'sound,progress,autostart,swliveconnect,swvolume,swstretchstyle,swstretchhalign,swstretchvalign');
 254              setOptions('windowsmedia', 'autostart,enabled,enablecontextmenu,fullscreen,invokeurls,mute,stretchtofit,windowlessvideo,balance,baseurl,captioningid,currentmarker,currentposition,defaultframe,playcount,rate,uimode,volume');
 255              setOptions('realmedia', 'autostart,loop,autogotourl,center,imagestatus,maintainaspect,nojava,prefetch,shuffle,console,controls,numloop,scriptcallbacks');
 256              setOptions('video', 'poster,autoplay,loop,muted,preload,controls');
 257              setOptions('audio', 'autoplay,loop,preload,controls');
 258              setOptions('embeddedaudio', 'autoplay,loop,controls');
 259              setOptions('global', 'id,name,vspace,hspace,bgcolor,align,width,height');
 260  
 261              if (to_form) {
 262                  if (data.type == 'video') {
 263                      if (data.video.sources[0])
 264                          setVal('src', data.video.sources[0].src);
 265  
 266                      src = data.video.sources[1];
 267                      if (src)
 268                          setVal('video_altsource1', src.src);
 269  
 270                      src = data.video.sources[2];
 271                      if (src)
 272                          setVal('video_altsource2', src.src);
 273                  } else if (data.type == 'audio') {
 274                      if (data.video.sources[0])
 275                          setVal('src', data.video.sources[0].src);
 276                      
 277                      src = data.video.sources[1];
 278                      if (src)
 279                          setVal('audio_altsource1', src.src);
 280                      
 281                      src = data.video.sources[2];
 282                      if (src)
 283                          setVal('audio_altsource2', src.src);
 284                  } else {
 285                      // Check flash vars

 286                      if (data.type == 'flash') {
 287                          tinymce.each(editor.getParam('flash_video_player_flashvars', {url : '$url', poster : '$poster'}), function(value, name) {
 288                              if (value == '$url')
 289                                  data.params.src = parseQueryParams(data.params.flashvars)[name] || data.params.src || '';
 290                          });
 291                      }
 292  
 293                      setVal('src', data.params.src);
 294                  }
 295              } else {
 296                  src = getVal("src");
 297  
 298                  // YouTube Embed

 299                  if (src.match(/youtube\.com\/embed\/\w+/)) {
 300                      data.width = 425;
 301                      data.height = 350;
 302                      data.params.frameborder = '0';
 303                      data.type = 'iframe';
 304                      setVal('src', src);
 305                      setVal('media_type', data.type);
 306                  } else {
 307                      // YouTube *NEW*

 308                      if (src.match(/youtu\.be\/[a-z1-9.-_]+/)) {
 309                          data.width = 425;
 310                          data.height = 350;
 311                          data.params.frameborder = '0';
 312                          data.type = 'iframe';
 313                          src = 'http://www.youtube.com/embed/' + src.match(/youtu.be\/([a-z1-9.-_]+)/)[1];
 314                          setVal('src', src);
 315                          setVal('media_type', data.type);
 316                      }
 317  
 318                      // YouTube

 319                      if (src.match(/youtube\.com(.+)v=([^&]+)/)) {
 320                          data.width = 425;
 321                          data.height = 350;
 322                          data.params.frameborder = '0';
 323                          data.type = 'iframe';
 324                          src = 'http://www.youtube.com/embed/' + src.match(/v=([^&]+)/)[1];
 325                          setVal('src', src);
 326                          setVal('media_type', data.type);
 327                      }
 328                  }
 329  
 330                  // Google video

 331                  if (src.match(/video\.google\.com(.+)docid=([^&]+)/)) {
 332                      data.width = 425;
 333                      data.height = 326;
 334                      data.type = 'flash';
 335                      src = 'http://video.google.com/googleplayer.swf?docId=' + src.match(/docid=([^&]+)/)[1] + '&hl=en';
 336                      setVal('src', src);
 337                      setVal('media_type', data.type);
 338                  }
 339                  
 340                  // Vimeo

 341                  if (src.match(/vimeo\.com\/([0-9]+)/)) {
 342                      data.width = 425;
 343                      data.height = 350;
 344                      data.params.frameborder = '0';
 345                      data.type = 'iframe';
 346                      src = 'http://player.vimeo.com/video/' + src.match(/vimeo.com\/([0-9]+)/)[1];
 347                      setVal('src', src);
 348                      setVal('media_type', data.type);
 349                  }
 350              
 351                  // stream.cz

 352                  if (src.match(/stream\.cz\/((?!object).)*\/([0-9]+)/)) {
 353                      data.width = 425;
 354                      data.height = 350;
 355                      data.params.frameborder = '0';
 356                      data.type = 'iframe';
 357                      src = 'http://www.stream.cz/object/' + src.match(/stream.cz\/[^/]+\/([0-9]+)/)[1];
 358                      setVal('src', src);
 359                      setVal('media_type', data.type);
 360                  }
 361                  
 362                  // Google maps

 363                  if (src.match(/maps\.google\.([a-z]{2,3})\/maps\/(.+)msid=(.+)/)) {
 364                      data.width = 425;
 365                      data.height = 350;
 366                      data.params.frameborder = '0';
 367                      data.type = 'iframe';
 368                      src = 'http://maps.google.com/maps/ms?msid=' + src.match(/msid=(.+)/)[1] + "&output=embed";
 369                      setVal('src', src);
 370                      setVal('media_type', data.type);
 371                  }
 372  
 373                  if (data.type == 'video') {
 374                      if (!data.video.sources)
 375                          data.video.sources = [];
 376  
 377                      data.video.sources[0] = {src : src};
 378  
 379                      src = getVal("video_altsource1");
 380                      if (src)
 381                          data.video.sources[1] = {src : src};
 382  
 383                      src = getVal("video_altsource2");
 384                      if (src)
 385                          data.video.sources[2] = {src : src};
 386                  } else if (data.type == 'audio') {
 387                      if (!data.video.sources)
 388                          data.video.sources = [];
 389                      
 390                      data.video.sources[0] = {src : src};
 391                      
 392                      src = getVal("audio_altsource1");
 393                      if (src)
 394                          data.video.sources[1] = {src : src};
 395                      
 396                      src = getVal("audio_altsource2");
 397                      if (src)
 398                          data.video.sources[2] = {src : src};
 399                  } else
 400                      data.params.src = src;
 401  
 402                  // Set default size

 403                  setVal('width', data.width || (data.type == 'audio' ? 300 : 320));
 404                  setVal('height', data.height || (data.type == 'audio' ? 32 : 240));
 405              }
 406          },
 407  
 408          dataToForm : function() {
 409              this.moveStates(true);
 410          },
 411  
 412          formToData : function(field) {
 413              if (field == "width" || field == "height")
 414                  this.changeSize(field);
 415  
 416              if (field == 'source') {
 417                  this.moveStates(false, field);
 418                  setVal('source', this.editor.plugins.media.dataToHtml(this.data));
 419                  this.panel = 'source';
 420              } else {
 421                  if (this.panel == 'source') {
 422                      this.data = clone(this.editor.plugins.media.htmlToData(getVal('source')));
 423                      this.dataToForm();
 424                      this.panel = '';
 425                  }
 426  
 427                  this.moveStates(false, field);
 428                  this.preview();
 429              }
 430          },
 431  
 432          beforeResize : function() {
 433              this.width = parseInt(getVal('width') || (this.data.type == 'audio' ? "300" : "320"), 10);
 434              this.height = parseInt(getVal('height') || (this.data.type == 'audio' ? "32" : "240"), 10);
 435          },
 436  
 437          changeSize : function(type) {
 438              var width, height, scale, size;
 439  
 440              if (get('constrain').checked) {
 441                  width = parseInt(getVal('width') || (this.data.type == 'audio' ? "300" : "320"), 10);
 442                  height = parseInt(getVal('height') || (this.data.type == 'audio' ? "32" : "240"), 10);
 443  
 444                  if (type == 'width') {
 445                      this.height = Math.round((width / this.width) * height);
 446                      setVal('height', this.height);
 447                  } else {
 448                      this.width = Math.round((height / this.height) * width);
 449                      setVal('width', this.width);
 450                  }
 451              }
 452          },
 453  
 454          getMediaListHTML : function() {
 455              if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0) {
 456                  var html = "";
 457  
 458                  html += '<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;Media.formToData(\'src\');">';
 459                  html += '<option value="">---</option>';
 460  
 461                  for (var i=0; i<tinyMCEMediaList.length; i++)
 462                      html += '<option value="' + tinyMCEMediaList[i][1] + '">' + tinyMCEMediaList[i][0] + '</option>';
 463  
 464                  html += '</select>';
 465  
 466                  return html;
 467              }
 468  
 469              return "";
 470          },
 471  
 472          getMediaTypeHTML : function(editor) {
 473  			function option(media_type, element) {
 474                  if (!editor.schema.getElementRule(element || media_type)) {
 475                      return '';
 476                  }
 477  
 478                  return '<option value="'+media_type+'">'+tinyMCEPopup.editor.translate("media_dlg."+media_type)+'</option>'
 479              }
 480  
 481              var html = "";
 482  
 483              html += '<select id="media_type" name="media_type" onchange="Media.formToData(\'type\');">';
 484              html += option("video");
 485              html += option("audio");
 486              html += option("flash", "object");
 487              html += option("quicktime", "object");
 488              html += option("shockwave", "object");
 489              html += option("windowsmedia", "object");
 490              html += option("realmedia", "object");
 491              html += option("iframe");
 492  
 493              if (editor.getParam('media_embedded_audio', false)) {
 494                  html += option('embeddedaudio', "object");
 495              }
 496  
 497              html += '</select>';
 498              return html;
 499          },
 500  
 501          setDefaultDialogSettings : function(editor) {
 502              var defaultDialogSettings = editor.getParam("media_dialog_defaults", {});
 503              tinymce.each(defaultDialogSettings, function(v, k) {
 504                  setVal(k, v);
 505              });
 506          }
 507      };
 508  
 509      tinyMCEPopup.requireLangPack();
 510      tinyMCEPopup.onInit.add(function() {
 511          Media.init();
 512      });
 513  })();