[#581] Append links to detached fragment, then to dom

plugins/flickr/popcorn.flickr.js

@@ -1,8 +1,8 @@
 // PLUGIN: Flickr
 (function (Popcorn) {
-  
+
   /**
-   * Flickr popcorn plug-in 
+   * Flickr popcorn plug-in
    * Appends a users Flickr images to an element on the page.
    * Options parameter will need a start, end, target and userid or username and api_key.
    * Optional parameters are numberofimages, height, width, padding, and border
@@ -10,10 +10,10 @@
    * End is the time that you want this plug-in to stop executing (in seconds)
    * Userid is the id of who's Flickr images you wish to show
    * Tags is a mutually exclusive list of image descriptor tags
-   * Username is the username of who's Flickr images you wish to show 
+   * Username is the username of who's Flickr images you wish to show
    *  using both userid and username is redundant
    *  an api_key is required when using username
-   * Apikey is your own api key provided by Flickr 
+   * Apikey is your own api key provided by Flickr
    * Target is the id of the document element that the images are
    *  appended to, this target element must exist on the DOM
    * Numberofimages specify the number of images to retreive from flickr, defaults to 4
@@ -21,9 +21,9 @@
    * Width the width of the image, defaults to '50px'
    * Padding number of pixels between images, defaults to '5px'
    * Border border size in pixels around images, defaults to '0px'
-   * 
+   *
    * @param {Object} options
-   * 
+   *
    * Example:
      var p = Popcorn('#video')
         .flickr({
@@ -63,19 +63,19 @@
     containerDiv.style.height = "100%";
     containerDiv.style.display = "none";
     idx++;
-    
+
     // ensure the target container the user chose exists
     if ( document.getElementById( options.target ) ) {
       document.getElementById( options.target ).appendChild( containerDiv );
-    } else { 
+    } else {
       throw ( "flickr target container doesn't exist" );
     }
-    
+
     // get the userid from Flickr API by using the username and apikey
     var isUserIDReady = function() {
       if ( !_userid ) {
 
-        _uri  = "http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&";        
+        _uri  = "http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&";
         _uri += "username=" + options.username + "&api_key=" + options.apikey + "&format=json&jsoncallback=flickr";
         Popcorn.getJSONP( _uri, function( data ) {
           _userid = data.user.nsid;
@@ -90,9 +90,9 @@
       }
     };
     // get the photos from Flickr API by using the user_id and/or tags
-    var getFlickrData = function() { 
+    var getFlickrData = function() {
       _uri  = "http://api.flickr.com/services/feeds/photos_public.gne?";
-      if ( _userid ) {       
+      if ( _userid ) {
         _uri += "id=" + _userid + "&";
       }
       if ( options.tags ) {
@@ -100,8 +100,11 @@
       }
       _uri += "lang=en-us&format=json&jsoncallback=flickr";
       Popcorn.xhr.getJSONP( _uri, function( data ) {
+
+        var fragment = document.createElement( "p" );
+
         containerDiv.innerHTML = "<p style='padding:" + _padding + ";'>" + data.title + "<p/>";
-        
+
         Popcorn.forEach( data.items, function ( item, i ) {
           if ( i < _count ) {
 
@@ -113,14 +116,16 @@
             _image.setAttribute( 'height',_height );
             _image.setAttribute( 'width', _width );
             _image.setAttribute( 'style', 'border:' + _border + ';padding:' + _padding );
-            _link.appendChild( _image );         
-            containerDiv.appendChild( _link );
+            _link.appendChild( _image );
+            fragment.appendChild( _link );
 
           } else {
 
             return false;
           }
         });
+
+        containerDiv.appendChild( fragment );
       });
     };
 
@@ -147,8 +152,8 @@
        * of the video reaches the end time provided by the
        * options variable
        */
-      end: function( event, options ) {      
-        containerDiv.style.display = "none";       
+      end: function( event, options ) {
+        containerDiv.style.display = "none";
       },
       _teardown: function( options ) {
         document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( containerDiv );
@@ -164,39 +169,39 @@
     },
     options: {
       start: {
-        elem: "input", 
-        type: "number", 
+        elem: "input",
+        type: "number",
         label: "In"
       },
       end: {
-        elem: "input", 
-        type: "number", 
+        elem: "input",
+        type: "number",
         label: "Out"
       },
       userid: {
-        elem: "input", 
+        elem: "input",
         type: "text",
         label: "UserID"
       },
       tags: {
-        elem: "input", 
+        elem: "input",
         type: "text",
         label: "Tags"
       },
       username: {
-        elem: "input", 
+        elem: "input",
         type: "text",
         label: "Username"
       },
       apikey: {
-        elem: "input", 
+        elem: "input",
         type: "text",
         label: "Api_key"
       },
       target: "flickr-container",
       height: {
-        elem: "input", 
-        type: "text", 
+        elem: "input",
+        type: "text",
         label: "Height"
       },
       width: {
@@ -205,18 +210,18 @@
         label: "Width"
       },
       padding: {
-        elem: "input", 
+        elem: "input",
         type: "text",
         label: "Padding"
       },
       border: {
-        elem: "input", 
-        type: "text", 
+        elem: "input",
+        type: "text",
         label: "Border"
       },
       numberofimages: {
-        elem: "input", 
-        type: "text", 
+        elem: "input",
+        type: "text",
         label: "Number of Images"
       }
     }