From 4fa6f6cd4fd89e7b5f601f3f18e53601276e48af Mon Sep 17 00:00:00 2001 From: Christopher De Cairos Date: Thu, 14 Feb 2013 16:41:47 -0500 Subject: [PATCH 1/2] [#3157] Dry out on/off class toggling and Safari iframe hack --- cornfield/config/default.json | 1 + src/core/page.js | 7 +++++++ src/default-config.json | 3 ++- src/util/butterOnOff.js | 16 ++++++++++++++++ .../plugins/googlemap/popcorn.googlemap.js | 11 ++--------- templates/assets/plugins/image/popcorn.image.js | 16 +++------------- templates/assets/plugins/text/popcorn.text.js | 14 +++----------- .../assets/plugins/twitter/popcorn.twitter.js | 16 +++------------- .../plugins/wikipedia/popcorn.wikipedia.js | 16 +++------------- 9 files changed, 40 insertions(+), 60 deletions(-) create mode 100644 src/util/butterOnOff.js diff --git a/cornfield/config/default.json b/cornfield/config/default.json index 7493a1d10..d8bf89f77 100644 --- a/cornfield/config/default.json +++ b/cornfield/config/default.json @@ -55,6 +55,7 @@ "exportAssets": [ "../external/popcorn-js/ie8/popcorn.ie8.js", "../external/popcorn-js/popcorn.js", + "../src/util/butterOnOff.js", "../external/popcorn-js/wrappers/common/popcorn._MediaElementProto.js", "../external/popcorn-js/wrappers/html5/popcorn.HTMLMediaElement.js", "../external/popcorn-js/wrappers/null/popcorn.HTMLNullVideoElement.js", diff --git a/src/core/page.js b/src/core/page.js index 069cfe7ec..c1085ceb3 100644 --- a/src/core/page.js +++ b/src/core/page.js @@ -30,6 +30,13 @@ define( [ "core/logger", "core/eventmanager" ], function( Logger, EventManager ) return !!window.Popcorn; } }, + { + type: "js", + url: "{util}butterOnOff.js", + check: function() { + return !!Popcorn.toggleOn && Popcorn.toggleOff; + } + }, { type: "js", url: "{popcorn-js}/modules/player/popcorn.player.js", diff --git a/src/default-config.json b/src/default-config.json index 97ecd1a01..a36f96550 100644 --- a/src/default-config.json +++ b/src/default-config.json @@ -136,7 +136,8 @@ "popcorn-js": "{{baseDir}}external/popcorn-js/", "css": "{{baseDir}}css/", "resources": "{{baseDir}}resources/", - "tools": "{{baseDir}}tools/" + "tools": "{{baseDir}}tools/", + "util": "{{baseDir}}src/util/" }, "icons": { "default": "popcorn-icon.png", diff --git a/src/util/butterOnOff.js b/src/util/butterOnOff.js new file mode 100644 index 000000000..48635adf4 --- /dev/null +++ b/src/util/butterOnOff.js @@ -0,0 +1,16 @@ +(function() { + Popcorn.toggleOn = function( container ) { + container.classList.remove( "off" ) + container.classList.add( "on" ); + + container.style.display = "none"; + var junk = container.offsetHeight; + container.style.display = ""; + }; + + Popcorn.toggleOff = function( container ) { + container.classList.remove( "on" ); + container.classList.add( "off" ); + }; + +})(); \ No newline at end of file diff --git a/templates/assets/plugins/googlemap/popcorn.googlemap.js b/templates/assets/plugins/googlemap/popcorn.googlemap.js index 96b2f2f3c..f3b82778f 100755 --- a/templates/assets/plugins/googlemap/popcorn.googlemap.js +++ b/templates/assets/plugins/googlemap/popcorn.googlemap.js @@ -412,13 +412,7 @@ var googleCallback; } } else if ( ranOnce ) { - outerdiv.classList.remove( "off" ); - outerdiv.classList.add( "on" ); - - // Safari Redraw hack - #3066 - outerdiv.style.display = "none"; - redrawBug = outerdiv.offsetHeight; - outerdiv.style.display = ""; + Popcorn.toggleOn( outerdiv ); } else { setTimeout(function () { isMapSetup(); @@ -438,8 +432,7 @@ var googleCallback; // if the map exists hide it do not delete the map just in // case the user seeks back to time b/w start and end if ( map ) { - outerdiv.classList.remove( "on" ); - outerdiv.classList.add( "off" ); + Popcorn.toggleOff( outerdiv ); } }, _teardown: function ( options ) { diff --git a/templates/assets/plugins/image/popcorn.image.js b/templates/assets/plugins/image/popcorn.image.js index 5e25c70e1..91608f7ae 100644 --- a/templates/assets/plugins/image/popcorn.image.js +++ b/templates/assets/plugins/image/popcorn.image.js @@ -259,21 +259,12 @@ }, start: function( event, options ) { - var container = options._container, - redrawBug; - - if ( container ) { + if ( options._container ) { if ( options._updateImage ) { this.on( "timeupdate", options._updateImage ); } - container.classList.add( "on" ); - container.classList.remove( "off" ); - - // Safari Redraw hack - #3066 - container.style.display = "none"; - redrawBug = container.offsetHeight; - container.style.display = ""; + Popcorn.toggleOn( options._container ); } }, @@ -283,8 +274,7 @@ this.off( "timeupdate", options._updateImage ); } - options._container.classList.add( "off" ); - options._container.classList.remove( "on" ); + Popcorn.toggleOff( options._container ); } }, diff --git a/templates/assets/plugins/text/popcorn.text.js b/templates/assets/plugins/text/popcorn.text.js index 1c8060e67..eca977f23 100644 --- a/templates/assets/plugins/text/popcorn.text.js +++ b/templates/assets/plugins/text/popcorn.text.js @@ -281,24 +281,16 @@ }, start: function( event, options ) { - var transitionContainer = options._transitionContainer, - redrawBug; + var transitionContainer = options._transitionContainer; if ( transitionContainer ) { - transitionContainer.classList.add( "on" ); - transitionContainer.classList.remove( "off" ); - - // Safari Redraw hack - #3066 - transitionContainer.style.display = "none"; - redrawBug = transitionContainer.offsetHeight; - transitionContainer.style.display = ""; + Popcorn.toggleOn( transitionContainer ); } }, end: function( event, options ) { if ( options._transitionContainer ) { - options._transitionContainer.classList.remove( "on" ); - options._transitionContainer.classList.add( "off" ); + Popcorn.toggleOff( options._transitionContainer ); } }, diff --git a/templates/assets/plugins/twitter/popcorn.twitter.js b/templates/assets/plugins/twitter/popcorn.twitter.js index 529ceb62b..4bf72c9cc 100644 --- a/templates/assets/plugins/twitter/popcorn.twitter.js +++ b/templates/assets/plugins/twitter/popcorn.twitter.js @@ -278,23 +278,13 @@ }; }, start: function( event, options ) { - var container = options._container, - redrawBug; - - if ( container ) { - container.classList.add( "on" ); - container.classList.remove( "off" ); - - // Safari Redraw hack - #3066 - container.style.display = "none"; - redrawBug = container.offsetHeight; - container.style.display = ""; + if ( options._container ) { + Popcorn.toggleOn( options._container ); } }, end: function( event, options ) { if ( options._container ) { - options._container.classList.add( "off" ); - options._container.classList.remove( "on" ); + Popcorn.toggleOff( options._container ); } }, _teardown: function( options ) { diff --git a/templates/assets/plugins/wikipedia/popcorn.wikipedia.js b/templates/assets/plugins/wikipedia/popcorn.wikipedia.js index 9799a8779..98454afb6 100644 --- a/templates/assets/plugins/wikipedia/popcorn.wikipedia.js +++ b/templates/assets/plugins/wikipedia/popcorn.wikipedia.js @@ -170,24 +170,14 @@ }, start: function( event, options ){ - var container = options._container, - redrawBug; - - if ( container ) { - container.classList.add( "on" ); - container.classList.remove( "off" ); - - // Safari Redraw hack - #3066 - container.style.display = "none"; - redrawBug = container.offsetHeight; - container.style.display = ""; + if ( options._container ) { + Popcorn.toggleOn( options._container ); } }, end: function( event, options ){ if ( options._container ) { - options._container.classList.add( "off" ); - options._container.classList.remove( "on" ); + Popcorn.toggleOff( options._container ); } }, From fbd166be53afc33994228115da81892b5a3e673f Mon Sep 17 00:00:00 2001 From: Christopher De Cairos Date: Tue, 19 Feb 2013 11:56:51 -0500 Subject: [PATCH 2/2] [#3157] add hack to butteredPopcorn, so it wont break prod --- make.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/make.js b/make.js index 5ccde82c7..1e8eec89f 100755 --- a/make.js +++ b/make.js @@ -476,6 +476,9 @@ function butteredPopcorn() { // popcorn.js popcornFiles.push( popcornDir + '/popcorn.js' ); + // Safari iframe fix + popcornFiles.push( './src/util/butterOnOff.js' ); + // plugins if ( defaultConfig.plugin && defaultConfig.plugin.plugins ) { defaultConfig.plugin.plugins.forEach( function( plugin ){