Changeset 176
- Timestamp:
- 03/12/09 18:42:41 (4 years ago)
- Location:
- testing
- Files:
-
- 3 edited
-
files/style.css (modified) (3 diffs)
-
index.html (modified) (14 diffs)
-
settings.js (modified) (8 diffs)
Legend:
- Unmodified
- Added
- Removed
-
testing/files/style.css
r170 r176 17 17 display: block; 18 18 margin: 40px auto; 19 width: 9 60px;19 width: 940px; 20 20 } 21 21 fieldset { 22 clear: both; 22 23 border: 0; 23 24 padding: 5px 10px 10px 10px; … … 60 61 visibility: hidden; 61 62 } 63 li { 64 list-style: none; 65 display: block; 66 float: left; 67 padding: 8px 16px; 68 color: #FFF; 69 margin-right: 2px; 70 border-bottom: 2px solid #FFF; 71 font-size: 70%; 72 cursor: pointer; 73 background-color: #7A2; 74 } 75 ul { 76 display: block; 77 width: 940px; 78 padding: 0; 79 margin: 0; 80 } 62 81 63 82 … … 66 85 SPECIFIC 67 86 ------------------------------------------------------------------------*/ 68 #examplesform { 69 width: 940px; 70 } 71 #examplesform select { 72 width: 100%; 87 li.active { 88 border-bottom: 2px solid #7A2; 89 cursor: default; 73 90 } 74 91 #javascript { 92 width: 960px; 75 93 display: none; 76 94 } 77 95 #javascript form { 78 96 margin: 0 10px; 79 width: 220px;97 width: 300px; 80 98 float: left; 81 99 } 82 100 #preview { 83 padding: 1px;84 display: block;85 width: 940px;86 101 background-color: #F5F5F5; 87 102 } 88 103 #flashvarsform fieldset { 89 float: left; 90 clear: none; 91 width: 198px; 92 margin: 10px; 104 display: none; 93 105 } 94 #flashvarsform button { 95 width: 940px; 96 margin: 0 10px; 106 #flashvarsform #sources { 107 display: block; 97 108 } -
testing/index.html
r175 r176 8 8 <script type="text/javascript"> 9 9 $(document).ready(function() { 10 for (itm in settings.examples) {11 $("#examples").append("<option>"+itm+"</option>");12 }13 for (itm in settings.players) {14 $("#source").append("<option value="+settings.players[itm]+">"+itm+"</option>");15 }16 for (itm in settings.plugins) {17 $("#plugin").append("<option value="+settings.plugins[itm]+">"+itm+"</option>");18 }19 for (itm in settings.skins) {20 $("#skin").append("<option value="+settings.skins[itm]+">"+itm+"</option>");21 }22 10 $.extend({ 11 player: null, 12 plugins: 0, 13 /** Insert a new example in the page. **/ 23 14 insert: function(evt) { 24 15 evt.preventDefault(); 25 16 var obj = settings.examples[$('#examples :selected').text()]; 17 setTimeout($.fillout,500,obj); 18 var arr = []; 19 if(obj['plugins']) { 20 arr = obj['plugins'].split(','); 21 } 22 $('#plugins').val(arr); 23 $.fieldsets(); 24 }, 25 /** Fill out the flashvars with example data. **/ 26 fillout: function(obj) { 26 27 var arr = $("#flashvarsform").find('input'); 27 28 for(var i=0; i<arr.length; i++) { … … 33 34 } 34 35 } 35 if(obj['plugins']) { 36 $.fieldsets(obj); 37 } else { 38 $.reload(); 39 } 40 }, 41 fieldsets: function(obj) { 36 $("#flashvarsform").submit(); 37 }, 38 /** Set the tab functions. **/ 39 tabs: function() { 40 $('li').click(function() { 41 $('li').removeClass('active'); 42 $(this).addClass('active'); 43 $.tab($(this).html().toLowerCase()); 44 }); 45 }, 46 /** Flip to a tab. **/ 47 tab: function(itm) { 42 48 var arr = $("#flashvarsform").find('fieldset'); 43 for (var i=4; i<arr.length; i++) {44 $(arr[i]).remove();45 }46 var arr = obj['plugins'].split(',');47 49 for(var i=0; i<arr.length; i++) { 48 var itm = arr[i].substring(arr[i].lastIndexOf('/')+1,arr[i].length-4); 49 var txt = '<fieldset id="'+itm+'"><legend>'; 50 txt += itm.substr(0,1).toUpperCase()+itm.substr(1); 51 txt += '</legend><span></span></fieldset>'; 52 $('#flashvarsform').append(txt); 53 $.setPluginForm(arr[i],'#'+itm+' > span'); 54 } 55 setTimeout($.reload,300); 56 }, 50 if($(arr[i]).attr('id') == itm) { 51 $(arr[i]).css('display','block'); 52 } else { 53 $(arr[i]).css('display','none'); 54 } 55 } 56 }, 57 /** Check for inserting of fieldsets. **/ 58 fieldsets: function(evt) { 59 $("#lispan").empty(); 60 $("#fieldsetspan").empty(); 61 var str = $("#plugins").val(); 62 if(str != null) { 63 arr = str.toString().split(','); 64 for (var i=0; i<arr.length; i++) { 65 var swf = settings.plugins[arr[i]]; 66 $.fieldset(swf.substr(0,swf.length-4)+'.xml',arr[i]); 67 } 68 } 69 }, 70 /** Insert a specific plugin fieldset. **/ 71 fieldset: function(url,nam) { 72 $.get(url,{},function(xml) { 73 var arr = $('flashvars',xml).find('flashvar'); 74 if(arr.length > 0) { 75 var tit = nam.substr(0,1).toUpperCase()+nam.substr(1); 76 $("#lispan").append('<li>'+tit+'</li>'); 77 $.tabs(); 78 var set = '<fieldset id="'+nam+'">'; 79 for (var i=0; i<arr.length; i++) { 80 var val = $('name',arr[i]).text(); 81 set +='<label>'+val+'</label><input name="'+nam+'.'+val+'"'; 82 } 83 set += '</fieldset>'; 84 $('#fieldsetspan').append(set); 85 } 86 }); 87 }, 88 /** Reload the flashvars into the player. **/ 57 89 reload: function(evt) { 58 try { 59 evt.preventDefault(); 60 } catch(err) {} 90 evt.preventDefault(); 61 91 var vrs = {}; 62 92 var arr = $("#flashvarsform").find('input'); … … 66 96 } 67 97 } 68 if($("#skin").val() != '') { 69 vrs['skin'] = $("#skin").val(); 70 } 71 try { 72 vrs['tracecall'] = 'console.log'; 73 } catch (err) { 74 vrs['tracecall'] = 'arthropod'; 98 if($("#skins").val() != 'none') { 99 vrs['skin'] = settings.skins[$("#skins").val()]; 100 } 101 if($("#plugins").val() != null) { 102 var plg = ''; 103 var arr = $("#plugins").val(); 104 for(var i=0; i<arr.length; i++) { 105 plg += settings.plugins[arr[i]]+','; 106 } 107 vrs['plugins'] = plg.substr(0,plg.length-1); 75 108 } 76 109 $('#preview').css('height',vrs['height']); 77 $('#preview').html('<div id=" player"></div>');110 $('#preview').html('<div id="container"></div>'); 78 111 swfobject.embedSWF( 79 $('#source').val(),80 ' player',112 settings.players[$('#players').val()], 113 'container', 81 114 vrs['width'], 82 115 vrs['height'], … … 87 120 {id:'ply',name:'ply'} 88 121 ); 89 $.broadcast(vrs);90 },91 getVariable s: function(evt) {122 }, 123 /** Get a variable from the player. **/ 124 getVariable: function(evt) { 92 125 evt.preventDefault(); 93 126 switch($('#type').val()) { … … 102 135 break; 103 136 } 137 $.alert(obj) 138 }, 139 /** Send an event to the player. **/ 140 sendEvent: function(evt) { 141 evt.preventDefault(); 142 player.sendEvent($('#sendevent').val(),$('#sendeventdata').val()); 143 }, 144 /** Set a listener to the player. **/ 145 setListener: function(evt) { 146 evt.preventDefault(); 147 var arr = $('#eventtype').val().split('.'); 148 var sel = $('#addremove').val(); 149 var fcn = '$.alert'; 150 if(arr.length == 2 && sel == 'add') { 151 if(arr[0] == 'Model') { 152 player.addModelListener(arr[1],fcn); 153 } else { 154 player.addControllerListener(arr[1],fcn); 155 } 156 } else if(arr.length == 2 && sel == 'remove') { 157 if(arr[0] == 'Model') { 158 player.removeModelListener(arr[1],fcn); 159 } else { 160 player.removeControllerListener(arr[1],fcn); 161 } 162 } 163 }, 164 /** Alert responses from the player. **/ 165 alert: function(obj) { 104 166 var txt = ''; 105 167 $.each(obj,function(prm,val) { … … 113 175 } 114 176 }); 115 $.broadcast(txt,true); 116 }, 117 sendEvent: function(evt) { 118 evt.preventDefault(); 119 player.sendEvent($('#sendevent').val(),$('#sendeventdata').val()); 120 }, 121 setListener: function(evt) { 122 evt.preventDefault(); 123 var arr = $('#eventtype').val().split('.'); 124 var sel = $('#addremove').val(); 125 var fcn = $('#function').val(); 126 if(arr.length == 2 && sel == 'add' && fcn) { 127 if(arr[0] == 'Model') { 128 player.addModelListener(arr[1],fcn); 129 } else { 130 player.addControllerListener(arr[1],fcn); 131 } 132 } else if(arr.length == 2 && sel == 'remove' && fcn) { 133 if(arr[0] == 'Model') { 134 player.removeModelListener(arr[1],fcn); 135 } else { 136 player.removeControllerListener(arr[1],fcn); 137 } 138 } 139 }, 140 loadPluginVars: function(evt) { 141 evt.preventDefault(); 142 if($('#plugin').val() != '') { 143 $.setPluginForm($('#plugin').val(),'#pluginsspan'); 144 } else { 145 $('#pluginsspan').html(''); 146 } 147 }, 148 setPluginForm: function(swf,sel) { 149 var url = swf.substr(0,swf.length-3)+'xml'; 150 var nam = swf.substring(swf.lastIndexOf('/')+1,swf.length-4); 151 $.get(url,{},function(xml) { 152 var html = ''; 153 var arr = $('flashvars',xml).find('flashvar'); 154 var obj = settings.examples[$('#examples :selected').text()]; 155 for (var i=0; i<arr.length; i++) { 156 var val = $('name',arr[i]).text(); 157 html +='<label>'+val+'</label><input name="'+nam+'.'+val+'" value="'; 158 if(obj[nam+'.'+val]) { 159 html += obj[nam+'.'+val]; 160 } else { 161 html += $('default',arr[i]).text(); 162 } 163 html += '" />'; 164 } 165 $(sel).html(html); 166 }); 167 }, 168 loadPlugin: function(evt) { 169 evt.preventDefault(); 170 var arr = $("#pluginsform").find('input'); 171 var vrs = ''; 172 for(var i=0; i<arr.length; i++) { 173 if($(arr[i]).val() != '') { 174 vrs += $(arr[i]).attr('name')+'='+$(arr[i]).val()+'&'; 175 } 176 } 177 $.broadcast(vrs);1 178 player.loadPlugin($('#plugin').val(),vrs); 179 $('#plugin').val(''); 180 $('#pluginsspan').html(''); 181 }, 182 broadcast: function(txt,clr) { 183 try { 184 if(clr) { 185 console.clear(); 186 } 187 console.log(txt) 188 } catch (err) { 189 //alert(txt); 190 } 177 alert(txt); 191 178 } 192 179 }); 193 $("#source").change(function(evt) { $.reload(evt); });180 /** Attach handlers to all buttons and select fields. **/ 194 181 $("#examples").change(function(evt) { $.insert(evt); }); 195 $("#skin").change(function(evt) { $.reload(evt); }); 196 $("#plugin").change(function(evt) { $.loadPluginVars(evt); }); 182 $("#players").change(function(evt) { $.reload(evt); }); 183 $("#skins").change(function(evt) { $.reload(evt); }); 184 $("#plugins").change(function(evt) { $.fieldsets(evt); }); 197 185 $("#examplesform").submit(function(evt) { $.insert(evt); }); 198 186 $("#flashvarsform").submit(function(evt) { $.reload(evt); }); … … 200 188 $("#sendeventform").submit(function(evt) { $.sendEvent(evt); }); 201 189 $("#listenersform").submit(function(evt) { $.setListener(evt); }); 202 $("#pluginsform").submit(function(evt) { $.loadPlugin(evt); }); 203 $("#examplesform").submit(); 190 /** Load all settings into the player. **/ 191 for (dct in settings) { 192 for (itm in settings[dct]) { 193 $("#"+dct).append("<option>"+itm+"</option>"); 194 } 195 } 196 $.tabs(); 204 197 }); 205 var player;206 function playerReady(obj) {207 player = document.getElementById(obj['id']);208 $('#javascript').css('display','block');209 };210 198 </script> 211 199 … … 217 205 <fieldset> 218 206 <legend>Example setups</legend> 207 <label>example</label> 219 208 <select name="examples" id="examples"></select> 220 209 </fieldset> … … 272 261 <label>Event</label> 273 262 <select type="text" id="eventtype"> 274 <option>Controller .ERROR</option>275 <option>Controller .ITEM</option>276 <option>Controller .MUTE</option>277 <option>Controller .PLAY</option>278 <option>Controller .PLAYLIST</option>279 <option>Controller .RESIZE</option>280 <option>Controller .SEEK</option>281 <option>Controller .STOP</option>282 <option>Controller .VOLUME</option>263 <option>Controller: ERROR</option> 264 <option>Controller: ITEM</option> 265 <option>Controller: MUTE</option> 266 <option>Controller: PLAY</option> 267 <option>Controller: PLAYLIST</option> 268 <option>Controller: RESIZE</option> 269 <option>Controller: SEEK</option> 270 <option>Controller: STOP</option> 271 <option>Controller: VOLUME</option> 283 272 <option></option> 284 <option>Model .BUFFER</option>285 <option>Model .ERROR</option>286 <option>Model .LOADED</option>287 <option>Model .META</option>288 <option>Model .STATE</option>289 <option>Model .TIME</option>273 <option>Model: BUFFER</option> 274 <option>Model: ERROR</option> 275 <option>Model: LOADED</option> 276 <option>Model: META</option> 277 <option>Model: STATE</option> 278 <option>Model: TIME</option> 290 279 </select> 291 <label>Function</label>292 <input type="text" id="function" />293 </fieldset>294 280 </fieldset> 295 281 <button type="submit" id="listenersbutton">Update</button> 296 282 </form> 297 <form id="pluginsform">298 <fieldset>299 <legend>Load plugins</legend>300 <label>Plugin</label>301 <select type="text" id="plugin">302 <option></option>303 </select>304 <span id="pluginsspan"></span>305 </fieldset>306 <button type="submit" id="loadpluginbutton">Load</button>307 </form>308 283 <hr /> 309 284 </div> … … 313 288 314 289 <div id="preview"> 315 <a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player. 290 <a href="http://developer.longtailvideo.com/trac/FlashTesting">Learn how to use this testing page</a></div> 316 291 </div> 317 292 293 <script type="text/javascript"> 294 function playerReady(obj) { 295 $.player = document.getElementById(obj['id']); 296 $('#javascript').css('display','block'); 297 }; 298 </script> 299 300 318 301 319 302 320 303 321 304 <form id="flashvarsform"> 322 <button type="submit" id="flashvarsbutton">Reload</button> 305 <ul> 306 <li class="active">Sources</li> 307 <li>Properties</li> 308 <li>Layout</li> 309 <li>Behaviour</li> 310 <li>Miscellaneous</li> 311 <span id="lispan"></span> 312 </ul> 313 <fieldset id="sources"> 314 <label>player</label> 315 <select type="text" id="players"></select> 316 <label>skin</label> 317 <select id="skins"></select> 318 <label>plugins</label> 319 <select multiple="multiple" id="plugins"> 320 </select> 321 </fieldset> 323 322 <fieldset id="properties"> 324 <legend>Playlist</legend>325 323 <label>author</label> 326 324 <input type="text" name="date" /> … … 350 348 <input type="text" name="type" /> 351 349 </fieldset> 352 <fieldset> 353 <legend>Layout</legend> 350 <fieldset id="layout"> 354 351 <label>backcolor</label> 355 352 <input type="text" name="backcolor" /> … … 368 365 <label>screencolor</label> 369 366 <input type="text" name="screencolor" /> 370 <label>skin</label>371 <select id="skin">372 <option value=''>none</option>373 </select>374 367 <label>width</label> 375 368 <input type="text" name="width" /> 376 369 </fieldset> 377 <fieldset> 378 <legend>Behaviour</legend> 370 <fieldset id="behaviour"> 379 371 <label>autostart</label> 380 372 <input type="text" name="autostart" /> … … 409 401 </fieldset> 410 402 <fieldset id="miscellaneous"> 411 <legend>Miscellaneous</legend>412 403 <label>abouttext</label> 413 404 <input type="text" name="abouttext" /> … … 420 411 <label>linktarget</label> 421 412 <input type="text" name="linktarget" /> 422 <label>plugins</label> 423 <input type="text" name="plugins" id="plugins" /> 424 <label>source</label> 425 <select type="text" id="source"> 426 </select> 427 </fieldset> 413 </fieldset> 414 <span id="fieldsetspan"></span> 415 <button type="submit" id="flashvarsbutton">Reload</button> 428 416 </form> 429 430 417 431 418 -
testing/settings.js
r175 r176 18 18 metaviewer:'../trunk/as3/metaviewer.swf', 19 19 soundproxy:'../trunk/as3/soundproxy.swf', 20 snapshot:'../trunk/as3/snapshot.swf', 20 21 yousearch:'../trunk/as3/yousearch.swf' 21 22 }, 22 23 /** Skins to test. **/ 23 24 skins: { 25 none:'', 24 26 bright:'../skins/bright/bright.swf', 25 27 overlay:'../skins/overlay/overlay.swf', … … 27 29 stylish:'../skins/stylish/stylish.swf', 28 30 swift:'../skins/swift/swift.swf', 29 thin:'../skins/thin/thin.swf', 30 bluemetal:'skins/bluemetal.swf' 31 thin:'../skins/thin/thin.swf' 31 32 }, 32 33 /** All the setup examples with their flashvars. **/ 33 34 examples: { 35 '': {}, 34 36 'FLV video': { 35 37 file:'../../testing/files/bunny.flv', … … 172 174 height:240, 173 175 width:500, 174 plugins:' ../trunk/as3/captions.swf,../trunk/as3/audiodescription.swf',176 plugins:'captions,audiodescription', 175 177 'captions.file':'files/corrie.xml', 176 178 'audiodescription.file':'files/corrie.mp3' … … 180 182 height:240, 181 183 width:500, 182 plugins:' ../trunk/as3/hd.swf,../trunk/as3/autostarter.swf',184 plugins:'hd,autostarter', 183 185 'hd.file':'../../testing/files/bunny.flv' 184 186 }, … … 189 191 repeat:'always', 190 192 stretching:'fill', 191 plugins:' ../trunk/as3/revolt.swf,../trunk/as3/metaviewer.swf',193 plugins:'revolt,metaviewer', 192 194 'revolt.gain':2, 193 195 'revolt.position':'left', … … 202 204 playlist:'right', 203 205 playlistsize:300, 204 plugins:' ../trunk/as3/yousearch.swf'206 plugins:'yousearch' 205 207 }, 206 208 'Soundproxy and clickproxy plugins': { … … 208 210 width:800, 209 211 file:'../../testing/files/bunny.flv', 210 plugins:' ../trunk/as3/soundproxy.swf,../trunk/as3/clickproxy.swf',212 plugins:'soundproxy,clickproxy', 211 213 'clickproxy.listener':'console.log', 212 214 'soundproxy.listener':'console.log' … … 216 218 height:240, 217 219 width:600, 218 plugins:' ../trunk/as3/snapshot.swf',220 plugins:'snapshot', 219 221 'snapshot.script':'http://www.jeroenwijering.com/test/snapshot/create.php', 220 222 streamer:'lighttpd' 221 223 }, 222 224 ' ': { 223 },224 'Controlling plugin template': {225 height:260,226 width:600,227 file:'../../testing/files/bunny.flv',228 plugins:'../plugins/templates/controlling.swf'229 },230 'Listening plugin template': {231 height:260,232 width:600,233 file:'../../testing/files/bunny.flv',234 plugins:'../plugins/templates/listening.swf'235 },236 'Flashvars plugin template': {237 height:260,238 width:600,239 file:'../../testing/files/bunny.flv',240 plugins:'../plugins/templates/flashvars.swf',241 'listening.message':'Hello world'242 },243 'Positioning plugin template': {244 height:260,245 width:600,246 file:'../../testing/files/bunny.flv',247 plugins:'../plugins/templates/positioning.swf',248 'positioning.size':200,249 'positioning.position':'left',250 },251 ' ': {252 225 }, 253 226 'Playlist with streamers': {
Note: See TracChangeset
for help on using the changeset viewer.
