wp-includes/js/tinymce/plugins/media/js/media.js

   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 getVal(id) {
  12                 var elm = get(id);
  13
  14                 if (elm.nodeName == "SELECT")
  15                         return elm.options[elm.selectedIndex].value;
  16
  17                 if (elm.type == "checkbox")
  18                         return elm.checked;
  19
  20                 return elm.value;
  21         }
  22
  23         function setVal(id, value) {
  24                 if (typeof(value) != 'undefined') {
  25                         var elm = get(id);
  26
  27                         if (elm.nodeName == "SELECT")
  28                                 selectByValue(document.forms[0], id, value);
  29                         else if (elm.type == "checkbox") {
  30                                 if (typeof(value) == 'string')
  31                                         elm.checked = value.toLowerCase() === 'true' ? true : false;
  32                                 else
  33                                         elm.checked = !!value;
  34                         } else
  35                                 elm.value = value;
  36                 }
  37         }
  38
  39         window.Media = {
  40                 init : function() {
  41                         var html, editor;
  42
  43                         this.editor = editor = tinyMCEPopup.editor;
  44
  45                         // Setup file browsers and color pickers
  46                         get('filebrowsercontainer').innerHTML = getBrowserHTML('filebrowser','src','media','media');
  47                         get('qtsrcfilebrowsercontainer').innerHTML = getBrowserHTML('qtsrcfilebrowser','quicktime_qtsrc','media','media');
  48                         get('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
  49                         get('video_altsource1_filebrowser').innerHTML = getBrowserHTML('filebrowser_altsource1','video_altsource1','media','media');
  50                         get('video_altsource2_filebrowser').innerHTML = getBrowserHTML('filebrowser_altsource2','video_altsource2','media','media');
  51                         get('video_poster_filebrowser').innerHTML = getBrowserHTML('filebrowser_poster','video_poster','media','image');
  52
  53                         html = this.getMediaListHTML('medialist', 'src', 'media', 'media');
  54                         if (html == "")
  55                                 get("linklistrow").style.display = 'none';
  56                         else
  57                                 get("linklistcontainer").innerHTML = html;
  58
  59                         if (isVisible('filebrowser'))
  60                                 get('src').style.width = '230px';
  61
  62                         if (isVisible('filebrowser_altsource1'))
  63                                 get('video_altsource1').style.width = '220px';
  64
  65                         if (isVisible('filebrowser_altsource2'))
  66                                 get('video_altsource2').style.width = '220px';
  67
  68                         if (isVisible('filebrowser_poster'))
  69                                 get('video_poster').style.width = '220px';
  70
  71                         this.data = tinyMCEPopup.getWindowArg('data');
  72                         this.dataToForm();
  73                         this.preview();
  74                 },
  75
  76                 insert : function() {
  77                         var editor = tinyMCEPopup.editor;
  78
  79                         this.formToData();
  80                         editor.execCommand('mceRepaint');
  81                         tinyMCEPopup.restoreSelection();
  82                         editor.selection.setNode(editor.plugins.media.dataToImg(this.data));
  83                         tinyMCEPopup.close();
  84                 },
  85
  86                 preview : function() {
  87                         get('prev').innerHTML = this.editor.plugins.media.dataToHtml(this.data, true);
  88                 },
  89
  90                 moveStates : function(to_form, field) {
  91                         var data = this.data, editor = this.editor, data = this.data,
  92                                 mediaPlugin = editor.plugins.media, ext, src, typeInfo, defaultStates, src;
  93
  94                         defaultStates = {
  95                                 // QuickTime
  96                                 quicktime_autoplay : true,
  97                                 quicktime_controller : true,
  98
  99                                 // Flash
 100                                 flash_play : true,
 101                                 flash_loop : true,
 102                                 flash_menu : true,
 103
 104                                 // WindowsMedia
 105                                 windowsmedia_autostart : true,
 106                                 windowsmedia_enablecontextmenu : true,
 107                                 windowsmedia_invokeurls : true,
 108
 109                                 // RealMedia
 110                                 realmedia_autogotourl : true,
 111                                 realmedia_imagestatus : true
 112                         };
 113
 114                         function parseQueryParams(str) {
 115                                 var out = {};
 116
 117                                 if (str) {
 118                                         tinymce.each(str.split('&'), function(item) {
 119                                                 var parts = item.split('=');
 120
 121                                                 out[unescape(parts[0])] = unescape(parts[1]);
 122                                         });
 123                                 }
 124
 125                                 return out;
 126                         };
 127
 128                         function setOptions(type, names) {
 129                                 var i, name, formItemName, value, list;
 130
 131                                 if (type == data.type || type == 'global') {
 132                                         names = tinymce.explode(names);
 133                                         for (i = 0; i < names.length; i++) {
 134                                                 name = names[i];
 135                                                 formItemName = type == 'global' ? name : type + '_' + name;
 136
 137                                                 if (type == 'global')
 138                                                         list = data;
 139                                                 else if (type == 'video') {
 140                                                         list = data.video.attrs;
 141
 142                                                         if (!list && !to_form)
 143                                                                 data.video.attrs = list = {};
 144                                                 } else
 145                                                         list = data.params;
 146
 147                                                 if (list) {
 148                                                         if (to_form) {
 149                                                                 setVal(formItemName, list[name]);
 150                                                         } else {
 151                                                                 delete list[name];
 152
 153                                                                 value = getVal(formItemName);
 154                                                                 if (type == 'video' && value === true)
 155                                                                         value = name;
 156
 157                                                                 if (defaultStates[formItemName]) {
 158                                                                         if (value !== defaultStates[formItemName]) {
 159                                                                                 value = "" + value;
 160                                                                                 list[name] = value;
 161                                                                         }
 162                                                                 } else if (value) {
 163                                                                         value = "" + value;
 164                                                                         list[name] = value;
 165                                                                 }
 166                                                         }
 167                                                 }
 168                                         }
 169                                 }
 170                         }
 171
 172                         if (!to_form) {
 173                                 data.type = get('media_type').options[get('media_type').selectedIndex].value;
 174                                 data.width = getVal('width');
 175                                 data.height = getVal('height');
 176
 177                                 // Switch type based on extension
 178                                 src = getVal('src');
 179                                 if (field == 'src') {
 180                                         ext = src.replace(/^.*\.([^.]+)$/, '$1');
 181                                         if (typeInfo = mediaPlugin.getType(ext))
 182                                                 data.type = typeInfo.name.toLowerCase();
 183
 184                                         setVal('media_type', data.type);
 185                                 }
 186
 187                                 if (data.type == "video") {
 188                                         if (!data.video.sources)
 189                                                 data.video.sources = [];
 190
 191                                         data.video.sources[0] = {src: getVal('src')};
 192                                 }
 193                         }
 194
 195                         // Hide all fieldsets and show the one active
 196                         get('video_options').style.display = 'none';
 197                         get('flash_options').style.display = 'none';
 198                         get('quicktime_options').style.display = 'none';
 199                         get('shockwave_options').style.display = 'none';
 200                         get('windowsmedia_options').style.display = 'none';
 201                         get('realmedia_options').style.display = 'none';
 202
 203                         if (get(data.type + '_options'))
 204                                 get(data.type + '_options').style.display = 'block';
 205
 206                         setVal('media_type', data.type);
 207
 208                         setOptions('flash', 'play,loop,menu,swliveconnect,quality,scale,salign,wmode,base,flashvars');
 209                         setOptions('quicktime', 'loop,autoplay,cache,controller,correction,enablejavascript,kioskmode,autohref,playeveryframe,targetcache,scale,starttime,endtime,target,qtsrcchokespeed,volume,qtsrc');
 210                         setOptions('shockwave', 'sound,progress,autostart,swliveconnect,swvolume,swstretchstyle,swstretchhalign,swstretchvalign');
 211                         setOptions('windowsmedia', 'autostart,enabled,enablecontextmenu,fullscreen,invokeurls,mute,stretchtofit,windowlessvideo,balance,baseurl,captioningid,currentmarker,currentposition,defaultframe,playcount,rate,uimode,volume');
 212                         setOptions('realmedia', 'autostart,loop,autogotourl,center,imagestatus,maintainaspect,nojava,prefetch,shuffle,console,controls,numloop,scriptcallbacks');
 213                         setOptions('video', 'poster,autoplay,loop,preload,controls');
 214                         setOptions('global', 'id,name,vspace,hspace,bgcolor,align,width,height');
 215
 216                         if (to_form) {
 217                                 if (data.type == 'video') {
 218                                         if (data.video.sources[0])
 219                                                 setVal('src', data.video.sources[0].src);
 220
 221                                         src = data.video.sources[1];
 222                                         if (src)
 223                                                 setVal('video_altsource1', src.src);
 224
 225                                         src = data.video.sources[2];
 226                                         if (src)
 227                                                 setVal('video_altsource2', src.src);
 228                                 } else {
 229                                         // Check flash vars
 230                                         if (data.type == 'flash') {
 231                                                 tinymce.each(editor.getParam('flash_video_player_flashvars', {url : '$url', poster : '$poster'}), function(value, name) {
 232                                                         if (value == '$url')
 233                                                                 data.params.src = parseQueryParams(data.params.flashvars)[name] || data.params.src;
 234                                                 });
 235                                         }
 236
 237                                         setVal('src', data.params.src);
 238                                 }
 239                         } else {
 240                                 src = getVal("src");
 241
 242                                 // YouTube
 243                                 if (src.match(/youtube.com(.+)v=([^&]+)/)) {
 244                                         data.width = 425;
 245                                         data.height = 350;
 246                                         data.params.frameborder = '0';
 247                                         data.type = 'iframe';
 248                                         src = 'http://www.youtube.com/embed/' + src.match(/v=([^&]+)/)[1];
 249                                         setVal('src', src);
 250                                         setVal('media_type', data.type);
 251                                 }
 252
 253                                 // Google video
 254                                 if (src.match(/video.google.com(.+)docid=([^&]+)/)) {
 255                                         data.width = 425;
 256                                         data.height = 326;
 257                                         data.type = 'flash';
 258                                         src = 'http://video.google.com/googleplayer.swf?docId=' + src.match(/docid=([^&]+)/)[1] + '&hl=en';
 259                                         setVal('src', src);
 260                                         setVal('media_type', data.type);
 261                                 }
 262
 263                                 if (data.type == 'video') {
 264                                         if (!data.video.sources)
 265                                                 data.video.sources = [];
 266
 267                                         data.video.sources[0] = {src : src};
 268
 269                                         src = getVal("video_altsource1");
 270                                         if (src)
 271                                                 data.video.sources[1] = {src : src};
 272
 273                                         src = getVal("video_altsource2");
 274                                         if (src)
 275                                                 data.video.sources[2] = {src : src};
 276                                 } else
 277                                         data.params.src = src;
 278
 279                                 // Set default size
 280                                 setVal('width', data.width || 320);
 281                                 setVal('height', data.height || 240);
 282                         }
 283                 },
 284
 285                 dataToForm : function() {
 286                         this.moveStates(true);
 287                 },
 288
 289                 formToData : function(field) {
 290                         if (field == "width" || field == "height")
 291                                 this.changeSize(field);
 292
 293                         if (field == 'source') {
 294                                 this.moveStates(false, field);
 295                                 setVal('source', this.editor.plugins.media.dataToHtml(this.data));
 296                                 this.panel = 'source';
 297                         } else {
 298                                 if (this.panel == 'source') {
 299                                         this.data = this.editor.plugins.media.htmlToData(getVal('source'));
 300                                         this.dataToForm();
 301                                         this.panel = '';
 302                                 }
 303
 304                                 this.moveStates(false, field);
 305                                 this.preview();
 306                         }
 307                 },
 308
 309                 beforeResize : function() {
 310                         this.width = parseInt(getVal('width') || "320", 10);
 311                         this.height = parseInt(getVal('height') || "240", 10);
 312                 },
 313
 314                 changeSize : function(type) {
 315                         var width, height, scale, size;
 316
 317                         if (get('constrain').checked) {
 318                                 width = parseInt(getVal('width') || "320", 10);
 319                                 height = parseInt(getVal('height') || "240", 10);
 320
 321                                 if (type == 'width') {
 322                                         this.height = Math.round((width / this.width) * height);
 323                                         setVal('height', this.height);
 324                                 } else {
 325                                         this.width = Math.round((height / this.height) * width);
 326                                         setVal('width', this.width);
 327                                 }
 328                         }
 329                 },
 330
 331                 getMediaListHTML : function() {
 332                         if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0) {
 333                                 var html = "";
 334
 335                                 html += '<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;Media.formToData(\'src\');">';
 336                                 html += '<option value="">---</option>';
 337
 338                                 for (var i=0; i<tinyMCEMediaList.length; i++)
 339                                         html += '<option value="' + tinyMCEMediaList[i][1] + '">' + tinyMCEMediaList[i][0] + '</option>';
 340
 341                                 html += '</select>';
 342
 343                                 return html;
 344                         }
 345
 346                         return "";
 347                 }
 348         };
 349
 350         tinyMCEPopup.requireLangPack();
 351         tinyMCEPopup.onInit.add(function() {
 352                 Media.init();
 353         });
 354 })();