From 753f60c7d4769fa72d3b910e491f37db6f130898 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 2 Aug 2013 17:19:21 -0500 Subject: dymaxion --- .../demo/flashblock/basic.html | 36 ++++++ .../demo/flashblock/flashblock.css | 99 ++++++++++++++++ .../demo/flashblock/index.html | 125 +++++++++++++++++++++ .../demo/flashblock/method1/flashblock.css | 61 ++++++++++ .../demo/flashblock/method1/flashblock.js | 90 +++++++++++++++ .../demo/flashblock/method1/index.html | 79 +++++++++++++ 6 files changed, 490 insertions(+) create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/basic.html create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/flashblock.css create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/index.html create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.css create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/flashblock.js create mode 100755 docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock/method1/index.html (limited to 'docs/dymaxion/soundmanagerv297a-20101010/demo/flashblock') 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 @@ + + + +SoundManager 2: Flash blocker handling - basic example + + + + + + + + + + + + +
+ +

SoundManager 2: Flashblock / "click to flash" handling: Basic Demo

+ +
+ +
+ +

See flashblock.css as a template for making your own SM2 + flash block implementations.

+ +
\ 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 @@ + + + +SoundManager 2: Flash Block handling examples + + + + + + + + + + + + + + + + +
+ +

SoundManager 2: Flashblock / "click to flash" handling demos

+ +

Show SWF inline, wait indefinitely for load (click-to-run or whitelist)

+ +

You can run this demo with Flash 8 (default), Flash 9 (normal mode) or Flash 9 + highPerformance mode (higher JS callback frequency).

+ +

Where (and when) to show the SWF

+ +

To handle potential flash block cases, put <div id="sm2-container"></div> in your markup where you'd like the SWF to appear in those cases. If not specified, SM2 will create and append the #sm2-container node to the document when it starts.

+ +

When soundManager.useFlashBlock is true, SM2 will not apply styles (eg. style.position.left) directly to the flash; rather, it will assign CSS classes and you can handle it as you choose. Take a look at the related CSS file you will also need if you turn this feature on.

+ +

Handling failed start-up cases

+ +

In the blocked/failed start-up case, #sm2-container will have a class name of swf_timedout applied to it.

+ +

SM2 will start its init process, and will fire onready(), onload() and onerror() handlers accordingly. Keep in mind that while onerror() may fire at first, it may be preceded by a successful onload() if the user first loads the page and then later unblocks the flash movie.

+ +

Note that flash blockers may not run when viewing offline (via file://) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also go to about:config using your address bar and change the value of flashblock.blockLocal to test while offline.

+ +

Flash Block Example

+ +

Here, Flash is appended by SM2 to the #sm2-container DIV and after a failed start attempt (if you have a blocker active), will have a swf_timedout class appended.

+ +

The SWF uses position:absolute and negative left/top values so as not to affect the normal page layout, but shifts to left:auto;top:auto (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.

+ +

SoundManager 2 load status: Loading...

+ + + +
+ +
+ +

Flash Block-related CSS

+ +

When soundManager.useFlashBlock is enabled, CSS is applied to #sm2-container depending on the progress of SM2's start-up.

+

This page + demos use the rules below, fully-defined and commented in flashblock.css. Use it as a base for your own SM2 + flash block implementations.

+ +
#sm2-container {
+ /* Initial state: position:absolute/off-screen, or left/top:0 */
+}
+#sm2-container.swf_timedout {
+  /* Didn't load before time-out, show to user.
+  Maybe highlight on-screen, red border, etc..? */
+}
+#sm2-container.swf_unblocked {
+  /* Applied if movie loads successfully
+  (flash started, so move off-screen etc.) */
+}
+#sm2-container.swf_error {
+  /* "Fatal" error case: SWF loaded,
+  but SM2 was unable to start for some reason.
+  (Flash security or other error case.) */
+}
+#sm2-container.high_performance {
+  /* Additional modifier for "high performance" mode
+  should apply position:fixed and left/bottom 0 to stay on-screen
+  at all times (better flash performance) */
+}
+#sm2-container.flash_debug {
+  /* Additional modifier for flash debug output mode
+  should use width/height 100% so you can read debug messages */
+}
+ +

Basic Demo

+ +

For a more minimal example, see the basic flashblock demo.

+ +
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 = ''+msg+''; + } + } 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 = ''+msg+''; + } + } else { + var msg = 'SM2 recovered after block (or timeout), loaded OK.'; + _sm._wD(_s.name+': '+msg); + if (oStatus) { + oStatus.innerHTML = ''+msg+''; + } + } + // 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 @@ + + + +SoundManager 2: Flash blocker handling examples + + + + + + + + + + + + + + + + +
+ +

SoundManager 2: Flashblock / "click to flash" handling demos

+ +

Show SWF inline, wait indefinitely for load

+ +

You can run this demo with Flash 8 (default), Flash 9 (normal mode) or Flash 9 + highPerformance mode (higher JS callback frequency).

+ +

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.

+

SM2 will start its init process, and will fire onready(), onload() and onerror() handlers accordingly. Keep in mind that while onerror() may fire at first, it may be preceded by a successful onload() if the user first loads the page and then later unblocks the flash movie.

+

Note that flash blockers may not run when viewing offline (via file://) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also adjust flashblock.blockLocal under about:config in the address bar to test while offline.

+ +

CSS applied to #sm2-container, depending on state:

+
#sm2-container.movieContainer {/* Initial state: position:absolute/off-screen, or inline/relative */}
+#sm2-container.swf_timedout {/* Didn't load before time-out, show to user: On-screen, red border, etc..? */}
+#sm2-container.swf_unblocked {/* Applied if a timeout followed by an unblock (flash started.) Move off-screen. */}
+#sm2-container.high_performance {/* Additional modifier for "high performance" mode, should apply position:fixed and left/bottom 0 to stay on-screen at all times (better flash performance) */}
+#sm2-container.flash_debug {/* Additional modifier for flash debug output mode, should use width/height 100% so you can read debug messages */}
+#sm2-container.swf_error {/* Additional modifier, "something really broke" (fatal: security, missing SWF etc.) */}
+ +

SoundManager 2 load status: Loading...

+ +

Take a look at flashblock.css for implementation details.

+ +
+ +
+ +
-- cgit v1.2.3-70-g09d2