[#447] Update to ninja in for #475

players/baseplayer/popcorn.baseplayer.html

@@ -37,9 +37,9 @@
               document.getElementById( "btnPlay" ).addEventListener( "click", function() { popcorn.play(); }, false );
               document.getElementById( "btnPause" ).addEventListener( "click", function() { popcorn.pause(); }, false );
               
-              player.resource = document.getElementById('player_1');
+              player._resource = document.getElementById('player_1');
               
-              player.resource.innerHTML += '<br />Width and Height: '+player.getStyle( 'width' ) + ' by ' + player.getStyle( 'height' )
+              player._resource.innerHTML += '<br />Width and Height: '+player.getStyle( 'width' ) + ' by ' + player.getStyle( 'height' )
                                             + '<br /> Positioned at: '+player.getStyle( 'left' ) + ',' + player.getStyle( 'top' );
               
               dimensions = player.getBoundingClientRect();

players/baseplayer/popcorn.baseplayer.js

@@ -18,10 +18,10 @@
     this.loop;
     
     // List of events
-    this.events = {};
+    this._events = {};
     
     // The underlying player resource. May be <canvas>, <iframe>, <object>, array, etc
-    this.resource;
+    this._resource;
     // The container div of the resource
     this._container;
     
@@ -29,7 +29,7 @@
     this.offsetHeight = this.height = 0;
     this.offsetLeft = 0;
     this.offsetTop = 0;
-    this.offsetParent = 0;
+    this.offsetParent;
   }
 
   Popcorn.baseplayer.init.prototype = {
@@ -66,8 +66,8 @@
       var b,
           self = this;
           
-      if ( this.resource ) {
-        b = this.resource.getBoundingClientRect();
+      if ( this._resource ) {
+        b = this._resource.getBoundingClientRect();
         
         return {
           bottom: b.bottom,
@@ -94,31 +94,13 @@
       }
     },
     
-    // By default, assumes this.resource is a DOM Element
-    // Changing the type of this.resource requires this method to be overridden
-    // Returns the computed value for CSS style 'prop' as computed by the browser
-    getStyle: function( prop ) {
-      var elem = this.resource;
-      
-      if ( elem.currentStyle ) {
-        // IE syntax
-        return elem.currentStyle[prop];
-      } else if ( global.getComputedStyle ) {
-        // Firefox, Chrome et. al
-        return doc.defaultView.getComputedStyle( elem, null ).getPropertyValue( prop );
-      } else {
-        // Fallback, just in case
-        return elem.style[prop];
-      }
-    },
-    
     // Add an event listener to the object
     addEventListener: function( evtName, fn ) {
-      if ( !this.events[evtName] ) {
-        this.events[evtName] = [];
+      if ( !this._events[evtName] ) {
+        this._events[evtName] = [];
       }
       
-      this.events[evtName].push( fn );
+      this._events[evtName].push( fn );
       return fn;
     },
     
@@ -140,9 +122,46 @@
         }
       }
       
-      Popcorn.forEach( this.events[eventName], function( val ) {
+      Popcorn.forEach( this._events[eventName], function( val ) {
         val.call( self, evt, self );
       });
+    },
+    
+    // Extracts values from container onto this object
+    extractContainerValues: function( id ) {
+      this._container = document.getElementById( id );
+      
+      if ( !this._container ) {
+        return;
+      }
+      
+      var bounds = this._container.getBoundingClientRect();
+      
+      this.offsetWidth = this.width = container.getAttribute( "width" ) || getStyle( "width" ) || 0;
+      this.offsetHeight = this.height = container.getAttribute( "height" ) || getStyle( "height" ) || 0;
+      this.offsetLeft = bounds.left;
+      this.offsetTop = bound.top;
+      this.offsetParent = this._container.offsetParent;
+      
+      return this._container;
+    },
+    
+    // By default, assumes this.resource is a DOM Element
+    // Changing the type of this.resource requires this method to be overridden
+    // Returns the computed value for CSS style 'prop' as computed by the browser
+    getStyle: function( prop ) {
+      var elem = this._resource;
+      
+      if ( elem.currentStyle ) {
+        // IE syntax
+        return elem.currentStyle[prop];
+      } else if ( global.getComputedStyle ) {
+        // Firefox, Chrome et. al
+        return doc.defaultView.getComputedStyle( elem, null ).getPropertyValue( prop );
+      } else {
+        // Fallback, just in case
+        return elem.style[prop];
+      }
     }
   };
 })( window, document );

players/baseplayer/popcorn.baseplayer.unit.js

@@ -25,11 +25,20 @@ test( "API", function () {
         'addEventListener' : 'function',
         'dispatchEvent' : 'function',
         'getBoundingClientRect' : 'function',
+        'width' : 'number',
+        'height' : 'number',
+        'offsetWidth' : 'number',
+        'offsetHeight' : 'number',
+        'offsetTop' : 'number',
+        'offsetLeft' : 'number',
+        'offsetParent' : 'undefined',
         
         // Helper functions and members
-        'events' : 'object',
-        'resource' : 'undefined',
-        'getStyle' : 'function'
+        '_events' : 'object',
+        '_resource' : 'undefined',
+        '_container' : 'undefined',
+        'getStyle' : 'function',
+        'extractContainerValues' : 'function'
       };
       
   function plus() {
@@ -69,7 +78,7 @@ test( "Default Functionality", function () {
     }
   }
   
-  player.resource = document.getElementById('player_1');
+  player._resource = document.getElementById('player_1');
   dimensions = player.getBoundingClientRect();
   
   Popcorn.forEach( expectedVals, function() {