Mercurial > public > sg101

annotate static/js/tiny_mce/plugins/media/js/media.js @ 639:1872c8fca82a

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