thomascube
2011-04-20 a9251be2f09fb5f18a85d201c67668c70980efe3
commit | author | age
a9251b 1 (function() {
T 2     var url;
d9344f 3
a9251b 4     if (url = tinyMCEPopup.getParam("media_external_list_url"))
T 5         document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
d9344f 6
a9251b 7     function get(id) {
T 8         return document.getElementById(id);
9     }
d9344f 10
a9251b 11     function getVal(id) {
T 12         var elm = get(id);
d9344f 13
a9251b 14         if (elm.nodeName == "SELECT")
T 15             return elm.options[elm.selectedIndex].value;
d9344f 16
a9251b 17         if (elm.type == "checkbox")
T 18             return elm.checked;
d9344f 19
a9251b 20         return elm.value;
T 21     }
d9344f 22
a9251b 23     function setVal(id, value) {
T 24         if (typeof(value) != 'undefined') {
25             var elm = get(id);
d9344f 26
a9251b 27             if (elm.nodeName == "SELECT")
T 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;
d9344f 36         }
S 37     }
38
a9251b 39     window.Media = {
T 40         init : function() {
41             var html, editor;
d9344f 42
a9251b 43             this.editor = editor = tinyMCEPopup.editor;
d9344f 44
a9251b 45             // Setup file browsers and color pickers
T 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');
d9344f 52
a9251b 53             html = this.getMediaListHTML('medialist', 'src', 'media', 'media');
T 54             if (html == "")
55                 get("linklistrow").style.display = 'none';
56             else
57                 get("linklistcontainer").innerHTML = html;
d9344f 58
a9251b 59             if (isVisible('filebrowser'))
T 60                 get('src').style.width = '230px';
d9344f 61
a9251b 62             if (isVisible('filebrowser_altsource1'))
T 63                 get('video_altsource1').style.width = '220px';
d9344f 64
a9251b 65             if (isVisible('filebrowser_altsource2'))
T 66                 get('video_altsource2').style.width = '220px';
d9344f 67
a9251b 68             if (isVisible('filebrowser_poster'))
T 69                 get('video_poster').style.width = '220px';
d9344f 70
a9251b 71             this.data = tinyMCEPopup.getWindowArg('data');
T 72             this.dataToForm();
73             this.preview();
74         },
d9344f 75
a9251b 76         insert : function() {
T 77             var editor = tinyMCEPopup.editor;
d9344f 78
a9251b 79             this.formToData();
T 80             editor.execCommand('mceRepaint');
81             tinyMCEPopup.restoreSelection();
82             editor.selection.setNode(editor.plugins.media.dataToImg(this.data));
83             tinyMCEPopup.close();
84         },
d9344f 85
a9251b 86         preview : function() {
T 87             get('prev').innerHTML = this.editor.plugins.media.dataToHtml(this.data, true);
88         },
d9344f 89
a9251b 90         moveStates : function(to_form, field) {
T 91             var data = this.data, editor = this.editor, data = this.data,
92                 mediaPlugin = editor.plugins.media, ext, src, typeInfo, defaultStates, src;
d9344f 93
a9251b 94             defaultStates = {
T 95                 // QuickTime
96                 quicktime_autoplay : true,
97                 quicktime_controller : true,
d9344f 98
a9251b 99                 // Flash
T 100                 flash_play : true,
101                 flash_loop : true,
102                 flash_menu : true,
d9344f 103
a9251b 104                 // WindowsMedia
T 105                 windowsmedia_autostart : true,
106                 windowsmedia_enablecontextmenu : true,
107                 windowsmedia_invokeurls : true,
d9344f 108
a9251b 109                 // RealMedia
T 110                 realmedia_autogotourl : true,
111                 realmedia_imagestatus : true
112             };
d9344f 113
a9251b 114             function parseQueryParams(str) {
T 115                 var out = {};
d9344f 116
a9251b 117                 if (str) {
T 118                     tinymce.each(str.split('&'), function(item) {
119                         var parts = item.split('=');
d9344f 120
a9251b 121                         out[unescape(parts[0])] = unescape(parts[1]);
T 122                     });
123                 }
d9344f 124
a9251b 125                 return out;
T 126             };
d9344f 127
a9251b 128             function setOptions(type, names) {
T 129                 var i, name, formItemName, value, list;
d9344f 130
a9251b 131                 if (type == data.type || type == 'global') {
T 132                     names = tinymce.explode(names);
133                     for (i = 0; i < names.length; i++) {
134                         name = names[i];
135                         formItemName = type == 'global' ? name : type + '_' + name;
d9344f 136
a9251b 137                         if (type == 'global')
T 138                             list = data;
139                         else if (type == 'video') {
140                             list = data.video.attrs;
d9344f 141
a9251b 142                             if (!list && !to_form)
T 143                                 data.video.attrs = list = {};
144                         } else
145                             list = data.params;
d9344f 146
a9251b 147                         if (list) {
T 148                             if (to_form) {
149                                 setVal(formItemName, list[name]);
150                             } else {
151                                 delete list[name];
d9344f 152
a9251b 153                                 value = getVal(formItemName);
T 154                                 if (type == 'video' && value === true)
155                                     value = name;
d9344f 156
a9251b 157                                 if (defaultStates[formItemName]) {
T 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                 }
d9344f 170             }
a9251b 171
T 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 "";
d9344f 347         }
a9251b 348     };
d9344f 349
a9251b 350     tinyMCEPopup.requireLangPack();
T 351     tinyMCEPopup.onInit.add(function() {
352         Media.init();
353     });
354 })();