diff options
Diffstat (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock')
6 files changed, 490 insertions, 0 deletions
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/basic.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/basic.html new file mode 100755 index 0000000..39b768b --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/basic.html @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> +<head> +<title>SoundManager 2: Flash blocker handling - basic example</title> +<meta name="description" content="Demo of SoundManager 2 handling flashblock / "click to flash" blockers gracefully" /> +<meta name="keywords" content="javascript sound, javascript audio, DHTML sound, flashblock, flash blocker, handling flashblock, click to flash, click2flash" /> +<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> + +<!-- actual flashblock demo stuff, this is for you --> +<link rel="stylesheet" type="text/css" href="flashblock.css" /> +<script type="text/javascript" src="../../script/soundmanager2.js"></script> + +<script type="text/javascript"> +// enable flash block handling +soundManager.useFlashBlock = true; + +// custom demo options, not for your needs +soundManager.debugMode = true; +soundManager.url = '../../swf/'; + +</script> +</head> +<body> + +<div> + + <h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling: Basic Demo</h1> + + <div id="sm2-container"> + <!-- flash movie will be placed here --> + </div> + + <p>See <a href="flashblock.css">flashblock.css</a> as a template for making your own SM2 + flash block implementations.</p> + +</div>
\ No newline at end of file diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/flashblock.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/flashblock.css new file mode 100755 index 0000000..6733a08 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/flashblock.css @@ -0,0 +1,99 @@ +/*
+ SoundManager 2 + useFlashBlock
+ Flash positioning and flashblock / clicktoflash handling
+*/
+
+#sm2-container {
+ /*
+ where the SM2 flash movie goes. by default, relative container.
+ set relative or absolute here, and don't touch it later or bad things will happen (see below comments.)
+ */
+ position:relative;
+ width:1px;
+ height:1px;
+ _overflow:hidden; /* screw IE 6, just make it display nice */
+}
+
+#sm2-container object,
+#sm2-container embed {
+ /*
+ the actual movie bit.
+ SWF needs to be able to be moved off-screen without display: or position: changes. important.
+ changing display: or position: or overflow: here or on parent can cause SFW reload or other weird issues after unblock,
+ eg. SM2 starts but strange errors, no whileplaying() etc.
+ */
+ position:absolute;
+}
+
+#sm2-container object,
+#sm2-container embed,
+#sm2-container.swf_timedout,
+#sm2-container.swf_timedout object,
+#sm2-container.swf_timedout embed {
+ /*
+ when SM2 didn't start normally, time-out case. flash blocked, missing SWF, no flash?
+ 48px square flash placeholder is typically used by blockers.
+ */
+ left:auto;
+ top:auto;
+ width:48px;
+ height:48px;
+}
+
+#sm2-container.swf_unblocked {
+ /* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */
+ width:1px;
+ height:1px;
+}
+
+#sm2-container.swf_unblocked object,
+#sm2-container.swf_unblocked embed {
+ /* hide flash off-screen (relative to container) when it has loaded OK */
+ left:-9999em;
+ top:-9999em;
+}
+
+#sm2-container.swf_error {
+ /* when there is a fatal error (flash loaded, but SM2 failed) */
+ display:none;
+}
+
+#sm2-container.high_performance {
+ /* "high performance" case: keep on-screen at all times */
+ position:absolute;
+ position:fixed;
+ _top:-9999px; /* IE 6 hax, no position:fixed */
+ _left:-9999px;
+ bottom:0px;
+ left:0px;
+ /*
+ special case: show at first with w/h, hide when unblocked.
+ might be bad/annoying.
+ */
+ width:48px;
+ height:48px;
+ z-index:99; /* try to stay on top */
+}
+
+#sm2-container.high_performance.swf_unblocked {
+ z-index:auto;
+}
+
+#sm2-container.high_performance.swf_unblocked,
+#sm2-container.high_performance.swf_unblocked object,
+#sm2-container.high_performance.swf_unblocked embed {
+ /* 8x8px is required minimum to load in fx/win32 in some cases(?), 6x6+ good for fast performance, even better when on-screen via position:fixed */
+ width:8px;
+ height:8px;
+}
+
+#sm2-container.high_performance.swf_unblocked object,
+#sm2-container.high_performance.swf_unblocked embed {
+ /* high-performance case must stay on-screen */
+ left:auto;
+ top:auto;
+}
+
+#sm2-container.high_performance.swf_timedout {
+ z-index:99; /* try to stay on top */
+}
\ No newline at end of file diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/index.html new file mode 100755 index 0000000..796308e --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/index.html @@ -0,0 +1,125 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>SoundManager 2: Flash Block handling examples</title> +<meta name="robots" content="noindex" />
+<meta name="description" content="Demo of SoundManager 2 handling flashblock / "click to flash" blockers gracefully" />
+<meta name="keywords" content="javascript sound, javascript audio, DHTML sound, flashblock, flash blocker, handling flashblock, click to flash, click2flash" />
+<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
+<!-- design template, you don't need this -->
+<link rel="stylesheet" type="text/css" href="../index.css" />
+<link rel="stylesheet" type="text/css" href="../debug.css" />
+
+<!-- actual flashblock demo stuff, this is for you -->
+<link rel="stylesheet" type="text/css" href="flashblock.css" />
+<script type="text/javascript" src="../../script/soundmanager2.js"></script>
+
+<script type="text/javascript">
+// enable flash block handling
+soundManager.useFlashBlock = true; // make sure you check and use flashblock.css too, as that is used to position the SWF with this feature on!
+
+// custom demo options, not for your needs
+soundManager.debugMode = true;
+soundManager.url = '../../swf/';
+
+// flash version URL switch (for this demo page)
+var winLoc = window.location.toString();
+if (winLoc.match(/flash9/i)) {
+ soundManager.flashVersion = 9;
+ if (winLoc.match(/highperformance/i)) {
+ soundManager.useHighPerformance = true;
+ }
+} else if (winLoc.match(/flash8/i)) {
+ soundManager.flashVersion = 8;
+}
+
+soundManager.onready(function(){
+ var ok = soundManager.supported();
+ var loaded = soundManager.getMoviePercent();
+ var msg = null;
+ if (!ok) {
+ // loaded, or no?
+ msg = 'No response (yet), flash movie '+(loaded?'loaded OK (likely security/error case)':'has not loaded (likely flash-blocked.)')+' Waiting indefinitely ...';
+ } else {
+ msg = 'SoundManager load OK';
+ }
+ document.getElementById('sm2-status').innerHTML = msg;
+});
+
+</script>
+</head>
+<body>
+
+<div style="margin:1em;max-width:60em;font-size:110%">
+
+ <h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling demos</h1>
+
+ <h3>Show SWF inline, wait indefinitely for load (click-to-run or whitelist)</h3>
+
+ <p class="note">You can run this demo with <a href="#flash8" onclick="window.location.replace(this.href);window.location.reload()">Flash 8</a> (default), <a href="#flash9" onclick="window.location.replace(this.href);window.location.reload()">Flash 9</a> (normal mode) or <a href="#flash9-highperformance" onclick="window.location.replace(this.href);window.location.reload()">Flash 9 + highPerformance mode</a> (higher JS callback frequency).</p>
+
+ <h4>Where (and when) to show the SWF</h4>
+
+ <p>To handle potential flash block cases, put <code><div id="sm2-container"></div></code> in your markup where you'd like the SWF to appear in those cases. If not specified, SM2 will create and append the <code>#sm2-container</code> node to the document when it starts.</p>
+
+ <p>When <code>soundManager.useFlashBlock</code> is true, SM2 will not apply styles (eg. <code>style.position.left</code>) directly to the flash; rather, it will assign CSS classes and you can handle it as you choose. Take a look at <a href="#flashblock-css">the related CSS</a> file you will also need if you turn this feature on.</p>
+
+ <h4>Handling failed start-up cases</h4>
+
+ <p>In the blocked/failed start-up case, <code>#sm2-container</code> will have a class name of <code>swf_timedout</code> applied to it.</p>
+
+ <p>SM2 will start its init process, and will fire <code>onready()</code>, <code>onload()</code> and <code>onerror()</code> handlers accordingly. Keep in mind that while <code>onerror()</code> may fire at first, it may be preceded by a successful <code>onload()</code> if the user first loads the page and then later unblocks the flash movie.</p>
+
+ <p>Note that flash blockers may not run when viewing offline (via <code>file://</code>) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also go to <code>about:config</code> using your address bar and change the value of <code>flashblock.blockLocal</code> to test while offline.</p>
+
+ <h3>Flash Block Example</h3>
+
+ <p>Here, Flash is appended by SM2 to the <code>#sm2-container</code> DIV and after a failed start attempt (if you have a blocker active), will have a <code>swf_timedout</code> class appended.</p>
+
+ <p>The SWF uses <code>position:absolute</code> and negative left/top values so as not to affect the normal page layout, but shifts to <code>left:auto;top:auto</code> (effectively left/top:0) in the blocked case, and becomes visible to the user. On a successful unblock, the movie goes back to left/top:-9999em and is hidden from view.</p>
+
+ <p>SoundManager 2 load status: <b id="sm2-status">Loading...</b></p>
+
+ <!-- here is where the SWF is shown in the blocked / failed start-up case. -->
+
+ <div id="sm2-container">
+ <!-- flash is appended here -->
+ </div>
+
+ <h3 id="flashblock-css">Flash Block-related CSS</h3>
+
+ <p>When <code>soundManager.useFlashBlock</code> is enabled, CSS is applied to <code>#sm2-container</code> depending on the progress of SM2's start-up.</p>
+ <p>This page + demos use the rules below, fully-defined and commented in <a href="flashblock.css">flashblock.css</a>. Use it as a base for your own SM2 + flash block implementations.</p>
+
+<pre class="block"><code>#sm2-container {
+ <span><span>/* Initial state: position:absolute/off-screen, or left/top:0 */</span></span>
+}
+#sm2-container.swf_timedout {
+ <span><span>/* Didn't load before time-out, show to user.
+ Maybe highlight on-screen, red border, etc..? */</span></span>
+}
+#sm2-container.swf_unblocked {
+ <span><span>/* Applied if movie loads successfully
+ (flash started, so move off-screen etc.) */</span></span>
+}
+#sm2-container.swf_error {
+ <span><span>/* "Fatal" error case: SWF loaded,
+ but SM2 was unable to start for some reason.
+ (Flash security or other error case.) */</span></span>
+}
+#sm2-container.high_performance {
+ <span><span>/* Additional modifier for "high performance" mode
+ should apply position:fixed and left/bottom 0 to stay on-screen
+ at all times (better flash performance) */</span></span>
+}
+#sm2-container.flash_debug {
+ <span><span>/* Additional modifier for flash debug output mode
+ should use width/height 100% so you can read debug messages */</span></span>
+}</code></pre>
+
+ <h3>Basic Demo</h3>
+
+ <p>For a more minimal example, see the <a href="basic.html" title="SoundManager 2: Basic Flashblock handling demo">basic flashblock demo</a>.</p>
+
+</div> diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.css b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.css new file mode 100755 index 0000000..d8a9e69 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.css @@ -0,0 +1,61 @@ +#sm2-container {
+ /* where the SM2 flash movie goes. */
+ position:relative;
+}
+
+#sm2-container,
+#sm2-container embed,
+#sm2-container.swf_timedout {
+ /* 48px square flash placeholder is typically used by blockers */
+ width:48px;
+ height:48px;
+}
+
+#sm2-container.swf_timedout {
+ /* likely a flash block situation. Maybe make it more bold, red, show descriptive nested elements? */
+ border:1px solid red;
+}
+
+#sm2-container object,
+#sm2-container embed {
+ /* hide flash off-screen by default */
+ position:absolute;
+ left:-9999em;
+ top:-9999em;
+}
+
+#sm2-container.swf_timedout object,
+#sm2-container.swf_timedout embed {
+ /* when blocked, make visible inside container */
+ left:auto;
+ top:auto;
+}
+
+#sm2-container object,
+#sm2-container embed {
+ /* 6x6 is small enough to be "invisible" and not blocked by click2flash if allowed, also enough to be really fast/performant on-screen */
+ width:48px;
+ height:48px;
+}
+
+#sm2-container.swf_unblocked,
+#sm2-container.swf_unblocked object,
+#sm2-container.swf_unblocked embed {
+ width:6px;
+ height:6px;
+}
+
+#sm2-container.high_performance {
+ position:absolute;
+ position:fixed;
+ _top:0px; /* IE 6 hax */
+ bottom:0px;
+ left:0px;
+}
+
+#sm2-container.high_performance object,
+#sm2-container.high_performance embed {
+ position:absolute;
+ left:0px;
+ top:0px;
+}
\ No newline at end of file diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.js b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.js new file mode 100755 index 0000000..f96cf46 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.js @@ -0,0 +1,90 @@ +/*
+
+ FlashBlock handler for SoundManager 2
+ -------------------------------------------------------------------
+ Attempt to handle and gracefully recover from flashblock conditions
+ Requires SoundManger v2.95a.20090717+
+
+ http://schillmania.com/projects/soundmanager2/
+
+*/
+soundManager._flashBlock = new function() {
+
+ var _s = this;
+ this.name = 'soundManager._flashblock';
+ this.didTimeout = false; // did initial attempt fail?
+ this.timer = null; // for setTimeout call
+
+ this.startTimer = function(nMsec) {
+ // soundManager._wD(_s.name+'_.starttimer()');
+ _s.timer = window.setTimeout(_s.checkFlashStatus,nMsec);
+ };
+
+ this.stopTimer = function() {
+ // soundManager._wD(_s.name+'.stoptimer()');
+ if (_s.timer) {
+ window.clearTimeout(_s.timer);
+ _s.timer = null;
+ }
+ };
+
+ this.checkFlashStatus = function() {
+ // soundManager._wD(_s.name+'.checkflashstatus()');
+ var _sm = soundManager;
+ var oMC = _sm.oMC; // DIV (default: #sm2-container) for .SWF
+ var oStatus = document.getElementById('sm2-status'); // demo-only
+
+ if (!_sm.supported()) {
+ // make the movie more visible, so user can fix
+ oMC.className = 'swf-timedout';
+ _s.didTimeout = true;
+ var msg = 'No flash response, applying .swf-timedout CSS..';
+ _sm._wD(_s.name+': '+msg);
+ if (oStatus) {
+ oStatus.innerHTML = '<span style="color:#996633">'+msg+'</span>';
+ }
+ } else {
+ // SM2 loaded OK
+ // move the movie container to its proper place
+ oMC.className = 'swf-loaded';
+ if (!_s.didTimeout) {
+ // SM2 didn't previously fail, no blocker active
+ var msg = 'SM2 loaded OK (before timeout), fast unblock or no blocker.';
+ _sm._writeDebug(_s.name+'.checkFlashStatus: '+msg,1);
+ if (oStatus) {
+ oStatus.innerHTML = '<span style="color:green">'+msg+'</span>';
+ }
+ } else {
+ var msg = 'SM2 recovered after block (or timeout), loaded OK.';
+ _sm._wD(_s.name+': '+msg);
+ if (oStatus) {
+ oStatus.innerHTML = '<span style="color:#996633">'+msg+'</span>';
+ }
+ }
+ // stop timer, if applicable
+ _s.stopTimer();
+ return false;
+ }
+ };
+
+ soundManager.flashLoadTimeout = 0; // wait forever for flash to load - we'll set our own timeout via oninitmovie()
+
+ soundManager.oninitmovie = function() {
+ // when SWF is written (or ready to start), wait and make SWF visible (time-out case)
+ soundManager._flashBlock.startTimer(750);
+ };
+
+ soundManager.onready(function(oStatus) {
+ // SM2 has now initialized, either no blocking OR blocked movie was allowed/whitelisted
+ var fb = soundManager._flashBlock;
+ if (oStatus.success) {
+ // Yay! recovered OK.
+ fb.checkFlashStatus();
+ } else {
+ // Blocking was passed (or no blocking), but then something *else* went wrong.
+ }
+ // stop timer, if applicable
+ fb.stopTimer();
+ });
+
+}();
diff --git a/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/index.html b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/index.html new file mode 100755 index 0000000..c8acee7 --- /dev/null +++ b/docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/index.html @@ -0,0 +1,79 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>SoundManager 2: Flash blocker handling examples</title> +<meta name="robots" content="noindex" />
+<meta name="description" content="Demo of SoundManager 2 handling flashblock / "click to flash" blockers gracefully" />
+<meta name="keywords" content="javascript sound, javascript audio, DHTML sound, flashblock, flash blocker, handling flashblock, click to flash" />
+<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
+<!-- design template, you don't need this -->
+<link rel="stylesheet" type="text/css" href="../../index.css" />
+<link rel="stylesheet" type="text/css" href="../../debug.css" />
+
+<!-- actual flashblock demo stuff, this is for you -->
+<link rel="stylesheet" type="text/css" href="flashblock.css" />
+<script type="text/javascript" src="../../../script/soundmanager2.js"></script>
+
+<script type="text/javascript">
+// custom demo options, not for your needs
+soundManager.debugMode = true;
+soundManager.url = '../../../swf/';
+
+// flash version URL switch (for this demo page)
+var winLoc = window.location.toString();
+if (winLoc.match(/flash9/i)) {
+ soundManager.flashVersion = 9;
+ if (winLoc.match(/highperformance/i)) {
+ soundManager.useHighPerformance = true;
+ }
+} else if (winLoc.match(/flash8/i)) {
+ soundManager.flashVersion = 8;
+}
+
+soundManager.onready(function(){
+ var ok = soundManager.supported();
+ var loaded = soundManager.getMoviePercent();
+ var msg = null;
+ if (!ok) {
+ // loaded, or no?
+ msg = 'No response (yet), flash movie '+(loaded?'loaded OK (likely security/error case)':'has not loaded (likely flash-blocked.)')+' Waiting indefinitely ...';
+ } else {
+ msg = 'SoundManager load OK';
+ }
+ document.getElementById('sm2-status').innerHTML = msg;
+});
+
+</script>
+</head>
+<body>
+
+<div style="margin:1em;max-width:60em;font-size:110%">
+
+ <h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling demos</h1>
+
+ <h3>Show SWF inline, wait indefinitely for load</h3>
+
+ <p class="note">You can run this demo with <a href="#flash8" onclick="window.location.replace(this.href);window.location.reload()">Flash 8</a> (default), <a href="#flash9" onclick="window.location.replace(this.href);window.location.reload()">Flash 9</a> (normal mode) or <a href="#flash9-highperformance" onclick="window.location.replace(this.href);window.location.reload()">Flash 9 + highPerformance mode</a> (higher JS callback frequency).</p>
+
+ <p>Typically SM2 appends a DIV and hides the SWF off-screen. To handle potential flash block cases, a flash container DIV with an ID of "sm2-container" is placed in the HTML. SM2 will find and append the flash movie to this element. In this case, the SWF can be targeted with CSS and is not positioned off-screen as it normally would be.</p>
+ <p>SM2 will start its init process, and will fire <code>onready()</code>, <code>onload()</code> and <code>onerror()</code> handlers accordingly. Keep in mind that while <code>onerror()</code> may fire at first, it may be preceded by a successful <code>onload()</code> if the user first loads the page and then later unblocks the flash movie.</p>
+ <p>Note that flash blockers may not run when viewing offline (via <code>file://</code>) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also adjust <code>flashblock.blockLocal</code> under <code>about:config</code> in the address bar to test while offline.</p>
+
+ <p>CSS applied to <code>#sm2-container</code>, depending on state:</p>
+<pre class="block"><code>#sm2-container.movieContainer {<span><span>/* Initial state: position:absolute/off-screen, or inline/relative */</span></span>}
+#sm2-container.swf_timedout {<span><span>/* Didn't load before time-out, show to user: On-screen, red border, etc..? */</span></span>}
+#sm2-container.swf_unblocked {<span><span>/* Applied if a timeout followed by an unblock (flash started.) Move off-screen. */</span></span>}
+#sm2-container.high_performance {<span><span>/* Additional modifier for "high performance" mode, should apply position:fixed and left/bottom 0 to stay on-screen at all times (better flash performance) */</span></span>}
+#sm2-container.flash_debug {<span><span>/* Additional modifier for flash debug output mode, should use width/height 100% so you can read debug messages */</span></span>}
+#sm2-container.swf_error {<span><span>/* Additional modifier, "something really broke" (fatal: security, missing SWF etc.) */</span></span>}</code></pre>
+
+ <p>SoundManager 2 load status: <b id="sm2-status">Loading...</b></p>
+
+ <p>Take a look at <a href="flashblock.css">flashblock.css</a> for implementation details.</p>
+
+ <div id="sm2-container">
+ <!-- flash is appended here -->
+ </div>
+
+</div> |