mozilla#332 Fixed styling and a typos. Added _teardown function. Made…

… a unit test for _teardown. Changed timing of videos in demo and added more information in the page comments
fmaulanaa · May 18, 2011 · cf5dda4 · cf5dda4
1 parent f953dde
commit cf5dda4
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 43 deletions.
diff --git a/plugins/linkedin/popcorn.linkedin.html b/plugins/linkedin/popcorn.linkedin.html
@@ -26,7 +26,7 @@
         target: "sharediv",
         apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
         start: 1,
-        end: 3
+        end: 4
       })
       .linkedin({
         type: "recommendproduct",
@@ -35,8 +35,8 @@
         companyid: "LinkedIn",
         productid: "201714",
         apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
-        start: 4,
-        end: 7
+        start: 5,
+        end: 8
       })
       .linkedin({
         type: "memberprofile",
@@ -45,32 +45,42 @@
         target: "memberprofilediv",
         apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
         start: 9,
-        end: 11
+        end: 15
       })
       .linkedin({
         type: "companyinsider",
         companyid: "1441",
-        target: "bottomdiv",
+        target: "companyinsiderdiv",
         apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
         start: 9,
-        end: 11
+        end: 15
       })
       .linkedin({
         type: "companyprofile",
         companyid: "1441",
         format: "inline",
-        target: "bottomdiv",
+        target: "companyprofilediv",
         apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
-        start: 13,
-        end: 17
+        start: 16,
+        end: 27
       });
     }, false );
   </script>
 </head>
 <body>
 <h1 id="qunit-header">Popcorn LinkedIn Plug-in Demo</h1>
-  <p>Right of video: share button, recommend button, member profile. <br />
-     Below video: company insider, company profile.<br />
+  Right of video: 
+  <ul>
+  	 <li>share button: between 1 and 4 seconds</li> 
+  	 <li>recommend button: between 5  and 8 seconds</li> 
+  	 <li>member profile: between 9 and 15 seconds</li> 
+  </ul>
+  Below video:
+  <ul> 
+     <li>company insider: between 9 and 15 seconds</li> 
+     <li>company profile: between 16 and 27 seconds</li>
+  </ul>
+  <p>   
      For a description of each plugin's purpose, go to: <a href="http://developer.linkedin.com/community/plugins">LinkedIn Plugins</a><br/>
   </p>
 
@@ -92,9 +102,10 @@ <h1 id="qunit-header">Popcorn LinkedIn Plug-in Demo</h1>
 
     </video> 
   </div>
-  <div id="sharediv" style="position:absolute;top:150px;left:400px;"></div>
-  <div id="recommenddiv" style="position:absolute;top:175px;left:400px;"></div>
-  <div id="memberprofilediv" style="position:absolute;top:150px;left:500px;"></div>
-  <div id="bottomdiv"></div>
+  <div id="sharediv" style="position:absolute;top:400px;left:400px;"></div>
+  <div id="recommenddiv" style="position:absolute;top:400px;left:400px;"></div>
+  <div id="memberprofilediv" style="position:absolute;top:400px;left:500px;"></div>
+  <div id="companyinsiderdiv"></div>
+  <div id="companyprofilediv"></div>
 </body>
 </html>
diff --git a/plugins/linkedin/popcorn.linkedin.js b/plugins/linkedin/popcorn.linkedin.js
@@ -2,7 +2,7 @@
 
 (function (Popcorn){
 
-/**
+  /**
    * LinkedIn Popcorn plug-in
    * Places a  LinkedIn plugin inside a div ( http://developers.facebook.com/docs/plugins/ )
    * Options parameter will need a start, end, target, type, and an api key
@@ -15,7 +15,7 @@
    * Url is the desired url to share via LinkedIn. Defaults to the current page if no url is specified
    * Counter is the position where the counter will be positioned. This is used if the type is "share" or "recommendproduct"
    *  The options are right and top (don't include this option if you do not want a counter)
-   * Format is is the data format of the member and company profile plugins. The options are inlined, hover, and click. Defaults to inline 
+   * Format is the data format of the member and company profile plugins. The options are inlined, hover, and click. Defaults to inline 
    * Companyid must be specified if the type is "companyprofile," "companyinsider," or "recommendproduct"
    * Productid must be specified if the type is "recommendproduct"
    * 
@@ -33,7 +33,7 @@
    *       apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
    *       start: 1,
    *       end: 3
-   *     } )
+   *     })
    *
    * This plugin will be displayed between 1 and 3 seconds, inclusive, in the video. This will show how many people have "shared" Google via LinkedIn,
    * with the number of people (counter) displayed to the right of the share plugin.
@@ -58,14 +58,16 @@
     _setup: function( options ) {
 
       var apikey = options.apikey,
-          target = document.getElementById( options.target );
+          target = document.getElementById( options.target ),
+          script = document.createElement( "script" );
 
       Popcorn.getScript("http://platform.linkedin.com/in.js");
 
-      options._container = document.createElement( "script" );
+      options._container = document.createElement( "div" );
+      options._container.appendChild( script );
 
       if ( apikey ) {
-        options._container.innerHTML = "api_key: " + apikey;
+        script.innerHTML = "api_key: " + apikey;
       }
 
       options.type = options.type.toLowerCase();
@@ -83,55 +85,55 @@
         return {
           share: function () {
 
-            options._container.setAttribute( "type", "IN/Share" );
+            script.setAttribute( "type", "IN/Share" );
 
             if ( options.counter ) {
-              options._container.setAttribute( "data-counter", options.counter );
+              script.setAttribute( "data-counter", options.counter );
             }
             if ( options.url ) {
-              options._container.setAttribute( "data-url", options.url );
+              script.setAttribute( "data-url", options.url );
             }
           },
           memberprofile: function () {
 
-            options._container.setAttribute( "type", "IN/MemberProfile" );
-            options._container.setAttribute( "data-id", ( options.memberid ) );
-            options._container.setAttribute( "data-format", ( options.format || "inline" ) );
+            script.setAttribute( "type", "IN/MemberProfile" );
+            script.setAttribute( "data-id", ( options.memberid ) );
+            script.setAttribute( "data-format", ( options.format || "inline" ) );
 
             if ( options.text && options.format.toLowerCase() !== "inline" ) {
-              options._container.setAttribute( "data-text", options.text );
+              script.setAttribute( "data-text", options.text );
             }
           },
           companyinsider: function () {
 
-            options._container.setAttribute( "type", "IN/CompanyInsider" );
-            options._container.setAttribute( "data-id", options.companyid );
+            script.setAttribute( "type", "IN/CompanyInsider" );
+            script.setAttribute( "data-id", options.companyid );
 
             if( options.modules ) {
               options._container.setAttribute( "data-modules", options.modules );
             }
           },
           companyprofile: function () {
 
-            options._container.setAttribute( "type", "IN/CompanyProfile" );
-            options._container.setAttribute( "data-id", ( options.companyid ) );
-            options._container.setAttribute( "data-format", ( options.format || "inline" ) );
+            script.setAttribute( "type", "IN/CompanyProfile" );
+            script.setAttribute( "data-id", ( options.companyid ) );
+            script.setAttribute( "data-format", ( options.format || "inline" ) );
 
             if ( options.text && options.format.toLowerCase() !== "inline" ) {
-              options._container.setAttribute( "data-text", options.text );
+              script.setAttribute( "data-text", options.text );
             }
             if ( options.related !== undefined ) {
-              options._container.setAttribute( "data-related", options.related );
+              script.setAttribute( "data-related", options.related );
             }
           },
           recommendproduct: function () {
 
-            options._container.setAttribute( "type", "IN/RecommendProduct" );
-            options._container.setAttribute( "data-company", ( options.companyid || "LinkedIn" ) );
-            options._container.setAttribute( "data-product", ( options.productid || "201714" ) );
+            script.setAttribute( "type", "IN/RecommendProduct" );
+            script.setAttribute( "data-company", ( options.companyid || "LinkedIn" ) );
+            script.setAttribute( "data-product", ( options.productid || "201714" ) );
 
             if ( options.counter ) {
-              options._container.setAttribute( "data-counter", options.counter );
+              script.setAttribute( "data-counter", options.counter );
             }
           }
         };
@@ -166,6 +168,10 @@
      */    
     end: function( event, options ) {
       options._container.parentNode.style.display = "none";
+    },
+    _teardown: function( options ) {
+      var tar = document.getElementById( options.target );
+      tar && tar.removeChild( options._container );
     }
   });
 })( Popcorn );
diff --git a/plugins/linkedin/popcorn.linkedin.unit.html b/plugins/linkedin/popcorn.linkedin.unit.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Popcorn API</title>
+  <title>Popcorn LinkedIn Plugin Test</title>
   <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
   <script src="../../test/qunit/qunit.js"></script>
   <!-- 
@@ -14,7 +14,7 @@
   <script src="popcorn.linkedin.unit.js"></script>
 </head>
 <body>
-  <h1 id="qunit-header">Popcorn Image Plugin</h1>
+  <h1 id="qunit-header">Popcorn LinkedIn Plugin Test</h1>
   <h2 id="qunit-banner"></h2>
   <div id="qunit-testrunner-toolbar"></div>
   <h2 id="qunit-userAgent"></h2>

diff --git a/plugins/linkedin/popcorn.linkedin.unit.js b/plugins/linkedin/popcorn.linkedin.unit.js
@@ -4,8 +4,9 @@ test("Popcorn LinkedIn Plugin", function () {
 
     // run tests on localhost
     var popped = Popcorn("#video"),
-        expects = 5,
+        expects = 6,
         count = 0,
+        setupId,
         linkedin = document.getElementById( "linkedindiv" );
 
     expect( expects );
@@ -36,6 +37,8 @@ test("Popcorn LinkedIn Plugin", function () {
       end: 3
     });
 
+    setupId = popped.getLastTrackEventId();
+
     popped.exec( 2, function() {
 
       ok( /block/.test( linkedin.style.display ), "Div contents are displayed" );
@@ -48,11 +51,15 @@ test("Popcorn LinkedIn Plugin", function () {
 
       ok( /none/.test( linkedin.style.display ), "Div contents are hidden again" );
       plus();
+
+      popped.pause().removeTrackEvent( setupId );
+      ok( !linkedin.children[1], "removed linkedin was properly destroyed"  );
+      plus();
     });
 
     popped.volume( 0 ).play();
   } else {
-
+    
     // tests must be run on localhost
     ok( false, "LinkedIn apikey will only work under localhost" );
   }