render.js

render.js

define(['require','jq','project/ads/request','core/log'],function(require, jq, adRequest, log) {
  return {
    adRenderStack: [],
    processRenderStack: function(){
      var self = require('project/ads/render');
      while(self.adRenderStack.length > 0){
        log.display('Loader: Rendering Won Unit');
        var winData = self.adRenderStack.pop();
        self.render(winData.bid);
      }
    },
    renderFromUrl: function(container, bid){
      var self = require('project/ads/render');
      bid.ad = '<iframe src="'+bid.adUrl+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" allowtransparency="true" width="'+bid.width+'" height="'+bid.height+'"><\/iframe>';
      self.renderFromHTML(container, bid);
    },
    renderFromHTML: function(container, bid){

      if(log.isDebugMode()){
        
        var infoClose = jq('<div>')
          .css('float','right')
          .css('margin-right',5)
          .css('margin-top',5)
          .css('color', log.getTextColor())
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','12px')
          .css('letter-spacing','2px')
          .css('cursor', 'pointer')
          .on('click', function(){
            jq(this).parent().remove();
          })
          .html('[x]');
        
        var infoContainer = jq('<div>')
          .css('border-left','10px solid '+log.getTextColor())
          .css('width',bid.width-10)
          .css('height',bid.height)
          .css('overflow-y','scroll')
          .css('position','absolute')
          .css('top',0)
          .css('left',0)
          .css('z-index','10000')
          .css('text-align','left')
          .css('background-color','rgba(255, 255, 255, 0.9)')
          .append(infoClose);
          
        infoContainer.append(jq('<div>')
          .css('padding','2px')
          .css('color', '#000000')
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','10px')
          .css('font-weight','bold')
          .css('letter-spacing','1px')
          .html('Win from '+bid.bidder+' @ $'+bid.cpm.toFixed(2)));
        
        infoContainer.append(jq('<div>')
          .css('padding','2px')
          .css('color', '#000000')
          .css('font-family','Tahoma, Geneva, sans-serif')
          .css('font-size','10px')
          .css('letter-spacing','1px')
          .html('Placement ID: '+bid.placementId+' | Win Type: '+bid.winType));
        
        if(bid.creative_id){
          infoContainer.append(jq('<div>')
            .css('padding','2px')
            .css('color', '#000000')
            .css('font-family','Tahoma, Geneva, sans-serif')
            .css('font-size','10px')
            .css('letter-spacing','1px')
            .html('Creative ID: '+bid.creative_id));
        }

        for(var i=0; i<bid.landscape.length; i++){
          var landscapeBid = bid.landscape[i];
          var infoPart = jq('<div>')
            .css('padding','2px')
            .css('color', '#000000')
            .css('font-family','Tahoma, Geneva, sans-serif')
            .css('font-size','10px')
            .css('letter-spacing','1px')
            .html('- Bid ['+landscapeBid.bid_width+'x'+landscapeBid.bid_height+'] '+landscapeBid.bidder+' @ $'+landscapeBid.n_cpm.toFixed(2)+' | RT: '+landscapeBid.latency+'ms');
          infoContainer.append(infoPart);
        }

        container
          .css('position','relative')
          .append(infoContainer);

      }
      
      container.css('width', bid.width);
      container.css('height', bid.height);
      container.css('margin', '0px auto');
      
      var loadingFrame = container.find('iframe')
        .attr('width',bid.width)
        .attr('height',bid.height);
      var loadingFrameWindow = (loadingFrame[0].contentWindow) ? loadingFrame[0].contentWindow : (loadingFrame[0].contentDocument.document) ? loadingFrame[0].contentDocument.document : loadingFrame[0].contentDocument;
    
      try{
        if(loadingFrameWindow.parent.frameElement){
          var parentFrameId = jq(loadingFrameWindow.parent.frameElement).attr('id');
          if(parentFrameId.match(/google\_ads/)){
            jq(loadingFrameWindow.parent.frameElement).attr('width',bid.width).attr('height',bid.height);
          }
        }
      } catch(err) { }
    
      var adFrame = jq(loadingFrameWindow.document).find('iframe')
        .attr('width',bid.width)
        .attr('height',bid.height);
      var adFrameWindow = (adFrame[0].contentWindow) ? adFrame[0].contentWindow : (adFrame[0].contentDocument.document) ? adFrame[0].contentDocument.document : adFrame[0].contentDocument;
      adFrameWindow.document.open();
      adFrameWindow.document.write(bid.ad);
      adFrameWindow.document.close();
      
    },
    render: function(bid){
      var self = require('project/ads/render');
      var placementMatch = adRequest.placements[bid.adUnitCode] || null;
      if(placementMatch == null){
        log.display('Loader: Failed to find placement match for: '+bid.adUnitCode);
      } else {
        var container = jq(placementMatch.placementContainer);
        if(container.exists()){
          if(bid.adUrl){
            self.renderFromUrl(container, bid);
          } else if(bid.ad){
            self.renderFromHTML(container, bid);
          } else {
            log.display('Loader: Unsupported rendering type for: '+bid.bidder);
          }
        } else {
          log.display('Loader: Failed to find container for: '+bid.adUnitCode);
        }
      }
    }
  }
});

n00b Question: How's this used with Prebid.js?