[#3157] Dry out on/off class toggling and Safari iframe hack

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",

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 ){

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",

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",

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" );
+  };
+
+})();

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 ) {

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 );
       }
     },
 

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 );
       }
     },
 

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 ) {

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 );
       }
     },