[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','media','image');
  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 *NEW*
 299                  if (src.match(/youtu.be\/[a-z1-9.-_]+/)) {
 300                      data.width = 425;
 301                      data.height = 350;
 302                      data.params.frameborder = '0';
 303                      data.type = 'iframe';
 304                      src = 'http://www.youtube.com/embed/' + src.match(/youtu.be\/([a-z1-9.-_]+)/)[1];
 305                      setVal('src', src);
 306                      setVal('media_type', data.type);
 307                  }
 308  
 309                  // YouTube
 310                  if (src.match(/youtube.com(.+)v=([^&]+)/)) {
 311                      data.width = 425;
 312                      data.height = 350;
 313                      data.params.frameborder = '0';
 314                      data.type = 'iframe';
 315                      src = 'http://www.youtube.com/embed/' + src.match(/v=([^&]+)/)[1];
 316                      setVal('src', src);
 317                      setVal('media_type', data.type);
 318                  }
 319  
 320                  // Google video
 321                  if (src.match(/video.google.com(.+)docid=([^&]+)/)) {
 322                      data.width = 425;
 323                      data.height = 326;
 324                      data.type = 'flash';
 325                      src = 'http://video.google.com/googleplayer.swf?docId=' + src.match(/docid=([^&]+)/)[1] + '&hl=en';
 326                      setVal('src', src);
 327                      setVal('media_type', data.type);
 328                  }
 329  
 330                  if (data.type == 'video') {
 331                      if (!data.video.sources)
 332                          data.video.sources = [];
 333  
 334                      data.video.sources[0] = {src : src};
 335  
 336                      src = getVal("video_altsource1");
 337                      if (src)
 338                          data.video.sources[1] = {src : src};
 339  
 340                      src = getVal("video_altsource2");
 341                      if (src)
 342                          data.video.sources[2] = {src : src};
 343                  } else if (data.type == 'audio') {
 344                      if (!data.video.sources)
 345                          data.video.sources = [];
 346                      
 347                      data.video.sources[0] = {src : src};
 348                      
 349                      src = getVal("audio_altsource1");
 350                      if (src)
 351                          data.video.sources[1] = {src : src};
 352                      
 353                      src = getVal("audio_altsource2");
 354                      if (src)
 355                          data.video.sources[2] = {src : src};
 356                  } else
 357                      data.params.src = src;
 358  
 359                  // Set default size
 360                  setVal('width', data.width || (data.type == 'audio' ? 300 : 320));
 361                  setVal('height', data.height || (data.type == 'audio' ? 32 : 240));
 362              }
 363          },
 364  
 365          dataToForm : function() {
 366              this.moveStates(true);
 367          },
 368  
 369          formToData : function(field) {
 370              if (field == "width" || field == "height")
 371                  this.changeSize(field);
 372  
 373              if (field == 'source') {
 374                  this.moveStates(false, field);
 375                  setVal('source', this.editor.plugins.media.dataToHtml(this.data));
 376                  this.panel = 'source';
 377              } else {
 378                  if (this.panel == 'source') {
 379                      this.data = clone(this.editor.plugins.media.htmlToData(getVal('source')));
 380                      this.dataToForm();
 381                      this.panel = '';
 382                  }
 383  
 384                  this.moveStates(false, field);
 385                  this.preview();
 386              }
 387          },
 388  
 389          beforeResize : function() {
 390              this.width = parseInt(getVal('width') || (this.data.type == 'audio' ? "300" : "320"), 10);
 391              this.height = parseInt(getVal('height') || (this.data.type == 'audio' ? "32" : "240"), 10);
 392          },
 393  
 394          changeSize : function(type) {
 395              var width, height, scale, size;
 396  
 397              if (get('constrain').checked) {
 398                  width = parseInt(getVal('width') || (this.data.type == 'audio' ? "300" : "320"), 10);
 399                  height = parseInt(getVal('height') || (this.data.type == 'audio' ? "32" : "240"), 10);
 400  
 401                  if (type == 'width') {
 402                      this.height = Math.round((width / this.width) * height);
 403                      setVal('height', this.height);
 404                  } else {
 405                      this.width = Math.round((height / this.height) * width);
 406                      setVal('width', this.width);
 407                  }
 408              }
 409          },
 410  
 411          getMediaListHTML : function() {
 412              if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0) {
 413                  var html = "";
 414  
 415                  html += '<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;Media.formToData(\'src\');">';
 416                  html += '<option value="">---</option>';
 417  
 418                  for (var i=0; i<tinyMCEMediaList.length; i++)
 419                      html += '<option value="' + tinyMCEMediaList[i][1] + '">' + tinyMCEMediaList[i][0] + '</option>';
 420  
 421                  html += '</select>';
 422  
 423                  return html;
 424              }
 425  
 426              return "";
 427          },
 428  
 429          getMediaTypeHTML : function(editor) {
 430  			function option(media_type, element) {
 431                  if (!editor.schema.getElementRule(element || media_type)) {
 432                      return '';
 433                  }
 434  
 435                  return '<option value="'+media_type+'">'+tinyMCEPopup.editor.translate("media_dlg."+media_type)+'</option>'
 436              }
 437  
 438              var html = "";
 439  
 440              html += '<select id="media_type" name="media_type" onchange="Media.formToData(\'type\');">';
 441              html += option("video");
 442              html += option("audio");
 443              html += option("flash", "object");
 444              html += option("quicktime", "object");
 445              html += option("shockwave", "object");
 446              html += option("windowsmedia", "object");
 447              html += option("realmedia", "object");
 448              html += option("iframe");
 449  
 450              if (editor.getParam('media_embedded_audio', false)) {
 451                  html += option('embeddedaudio', "object");
 452              }
 453  
 454              html += '</select>';
 455              return html;
 456          },
 457  
 458          setDefaultDialogSettings : function(editor) {
 459              var defaultDialogSettings = editor.getParam("media_dialog_defaults", {});
 460              tinymce.each(defaultDialogSettings, function(v, k) {
 461                  setVal(k, v);
 462              });
 463          }
 464      };
 465  
 466      tinyMCEPopup.requireLangPack();
 467      tinyMCEPopup.onInit.add(function() {
 468          Media.init();
 469      });
 470  })();