jkeefe · May 10, 2011 03:15
diff --git a/dc.html b/dc.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
 <html> 
 <head><title id="maintitle">Document Viewer</title> 
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 
 	<link href="css/document-cloud.css" media="all" rel="stylesheet" type="text/css"> 
 	 
   
   <!--   
     Customized document viewer for use with DocumentCloud, at http://documentcloud.org.
     Built on a version from the Chicago Tribune team, http://blog.apps.chicagotribune.com/
     Made for use at WNYC, http://wnyc.org
     This version is also kept at: https://github.com/jfkeefe/Custom-Viewer-for-DocumentCloud/blob/master/dc.html 
     Use at your own risk, improve as you see fit, and let me know if you do!
     
     To use, see: http://johnkeefe.net/a-customized-viewer-for-documentcloud 
     
     John Keefe
     john at johnkeefe.net
     http://johnkeefe.net
     
   -->
 	 
 	 <style type="text/css">

     body { font-family:Arial,Helvetica,sans-serif; margin:0; padding:0; overflow: hidden;}
     #header {padding:5px 12px 12px;}
     #banner-logo {float:right; border:0; margin-top:3px; margin-bottom:3px;}
     #document { clear: both; width: 100%; }
     #title {margin:0; font-size:1.4em;}
     #back {margin:0; font-size:.9em; font-weight:bold;}
     #document-source {margin:1px 0 3px; font-size:.8em;}

   </style>
   
 	<script type="text/javascript" src="http://s3.documentcloud.org/viewer/loader.js"></script>
 	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
 	<script type="text/javascript" src="js/jquery.url.min.js"></script>  
  <script type="text/javascript" charset="utf-8"> 

  // function called on load
 	function init () {
 	
 	// get the document id from the url, using jquery.url.min.js
 	// so from http://s3.amazonaws.com/datadesk/dc.html?doc=29933-rahm-ruling
 	// we get '29933-rahm-ruling'
 	var documentcloud_id = $.url.param("doc");
 	
 	// build the documentcloud url
 	var documentcloud_url = "http://www.documentcloud.org/documents/" + documentcloud_id + ".js";
 	  
  // NOTE! The page doesn't make sure the document id is valid or that the document is
  // public. It probably should. If you have code to do that, let me know! 
 	  
 	// assign the document loader to varible 'viewer'
 	var viewer = DV.load(documentcloud_url, {
        container : 'div#document',
        embedded : true,
      
        // after the document loads ...
        afterLoad : function(viewer) {
        
              // ... get its title, and put it on the page and in the title bar
              var document_title = viewer.api.getTitle();
       				$('#titletext').text(document_title);
       				$('#maintitle').text(document_title);
     				
       				// ... get its source, and put it in if it exists
       				var document_source = viewer.api.getSource();
       				var document_source_html = "Source: " + document_source

       				if(document_source != null)
       				  {
       				  $('#document-source').html(document_source_html);
       				  }
     				
       				// ... show the link to the related article, if it exists
       				var related_article_url = viewer.api.getRelatedArticle();
       				var related_html = "<a id='back-link' rel='external' href='" + related_article_url + "'>&laquo; Go to the related story.</a>";
     				
       				if(related_article_url != null)
       				  {
       				  $('#article-link').html(related_html);
       				  }
     				  
     				}
      });
 	
 	}
 		
 </script>	
 	
 </head> 
 <body onload="init();"> 

 <div id="header">  
  <!-- Next up is the logo info. 
  Change the href to point to your site's url
  and the src field to point to your logo image
  It's set up to use a logo 60 pixels tall -->  
  <a rel="external" href="http://www.wnyc.org"><img id="banner-logo" src="images/logo_document_banner.png" alt="Logo"></a> 
    
 	<h1 id='title'><div id='titletext'>&nbsp;</div></h1> 
 	<p id="document-source">&nbsp;</p> 
 	<p id='back'><div id='article-link'></div></p> 
 </div>

 <!-- The document is loaded into the next line -->
 <div id="document"> 
 </div> 
 

 </body> 
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head><title id="maintitle">Document Viewer</title>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<link href="css/document-cloud.css" media="all" rel="stylesheet" type="text/css">


	<!--
	Customized document viewer for use with DocumentCloud, at http://documentcloud.org.
	Built on a version from the Chicago Tribune team, http://blog.apps.chicagotribune.com/
	Made for use at WNYC, http://wnyc.org
	This version is also kept at: https://github.com/jfkeefe/Custom-Viewer-for-DocumentCloud/blob/master/dc.html
	Use at your own risk, improve as you see fit, and let me know if you do!

	To use, see: http://johnkeefe.net/a-customized-viewer-for-documentcloud

	John Keefe
	john at johnkeefe.net
	http://johnkeefe.net

	-->

	<style type="text/css">

	body { font-family:Arial,Helvetica,sans-serif; margin:0; padding:0; overflow: hidden;}
	#header {padding:5px 12px 12px;}
	#banner-logo {float:right; border:0; margin-top:3px; margin-bottom:3px;}
	#document { clear: both; width: 100%; }
	#title {margin:0; font-size:1.4em;}
	#back {margin:0; font-size:.9em; font-weight:bold;}
	#document-source {margin:1px 0 3px; font-size:.8em;}

	</style>

	<script type="text/javascript" src="http://s3.documentcloud.org/viewer/loader.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.url.min.js"></script>
	<script type="text/javascript" charset="utf-8">

	// function called on load
	function init () {

	// get the document id from the url, using jquery.url.min.js
	// so from http://s3.amazonaws.com/datadesk/dc.html?doc=29933-rahm-ruling
	// we get '29933-rahm-ruling'
	var documentcloud_id = $.url.param("doc");

	// build the documentcloud url
	var documentcloud_url = "http://www.documentcloud.org/documents/" + documentcloud_id + ".js";

	// NOTE! The page doesn't make sure the document id is valid or that the document is
	// public. It probably should. If you have code to do that, let me know!

	// assign the document loader to varible 'viewer'
	var viewer = DV.load(documentcloud_url, {
	container : 'div#document',
	embedded : true,

	// after the document loads ...
	afterLoad : function(viewer) {

	// ... get its title, and put it on the page and in the title bar
	var document_title = viewer.api.getTitle();
	$('#titletext').text(document_title);
	$('#maintitle').text(document_title);

	// ... get its source, and put it in if it exists
	var document_source = viewer.api.getSource();
	var document_source_html = "Source: " + document_source

	if(document_source != null)
	{
	$('#document-source').html(document_source_html);
	}

	// ... show the link to the related article, if it exists
	var related_article_url = viewer.api.getRelatedArticle();
	var related_html = "<a id='back-link' rel='external' href='" + related_article_url + "'>« Go to the related story.</a>";

	if(related_article_url != null)
	{
	$('#article-link').html(related_html);
	}

	}
	});

	}

	</script>

	</head>
	<body onload="init();">

	<div id="header">
	<!-- Next up is the logo info.
	Change the href to point to your site's url
	and the src field to point to your logo image
	It's set up to use a logo 60 pixels tall -->
	<a rel="external" href="http://www.wnyc.org"><img id="banner-logo" src="images/logo_document_banner.png" alt="Logo"></a>

	<h1 id='title'><div id='titletext'> </div></h1>
	<p id="document-source"> </p>
	<p id='back'><div id='article-link'></div></p>
	</div>

	<!-- The document is loaded into the next line -->
	<div id="document">
	</div>


	</body>
	</html>