*5642* Reading tools: Fixed PDF resize and implemented full screen mo…

…de for PDF view
pkp · Sep 23, 2010 · fe4cb75 · fe4cb75
1 parent 4f83649
commit fe4cb75
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 23 deletions.
diff --git a/js/articleView.js b/js/articleView.js
@@ -9,16 +9,6 @@
  * $Id:
  */
 
-/**
- * initPdfResize
- * Initializes the resizer control for the embedded PDF view
- */
-function initPdfResize() {
-	$(document).ready(function(){
-	    $("#articlePdf").resizable({ containment: 'parent' });
-	});
-}
-
 /**
  * initRelatedItems
  * Initializes the related items block's roll-up feature
@@ -38,4 +28,38 @@ function initRelatedItems() {
 			$("#hideRelatedItems").show();
 		});
 	});
-}
+}
+
+/**
+* Initialize the reading tool javascript (resizable and fullscreen mode)
+*/
+$(document).ready(function(){
+	var inlineStyle = ''; // Store the inline style that resizable creates, and reassign it when done with fullscreen
+
+	if($("#pluginMissing").is(":hidden")) {
+		$('#fullscreenShow').show();
+		$("#articlePdf").resizable({ containment: 'parent', handles: 'se' });
+	}
+
+	$('#sidebarToggle').click(function() {
+		$('#sidebar').toggle().toggleClass("sidebar-hidden");
+		$('#main').toggleClass("main-full");
+	});
+
+	$('#fullscreenShow').click(function() {
+		inlineStyle = $("#articlePdf").attr("style");
+		$("#articlePdf").removeAttr("style");  // Resizable doesn't work in fullscreen
+		$("#articlePdf").resizable("destroy");  // Resizable doesn't work in fullscreen
+		$("#articlePdf").addClass('fullscreen');
+		$("#fullscreenHide").show();
+		return false;
+	});
+
+	$('#fullscreenHide').click(function() {
+		$("#articlePdf").attr("style", inlineStyle);
+		$("#articlePdf").removeClass('fullscreen');
+		$("#fullscreenHide").hide();
+		$("#articlePdf").resizable({ containment: 'parent', handles: 'se' }); // Reinitialize resizable
+		return false;
+	});
+});
diff --git a/styles/articleView.css b/styles/articleView.css
@@ -29,6 +29,26 @@
 	padding: 1px 0px 1px 1px;
 }
 
+#articlePdf.fullscreen {
+	position: fixed;
+	width: 95%;
+	height: 95%;
+	left: 20px;
+	top: 10px;
+}
+
+#fullscreenShow {
+	display: none;
+	float: right;
+}
+
+#fullscreenHide {
+	display: none;
+	position: fixed;
+	bottom: 3px;
+	right: 3px;
+}
+
 #main h2 {
 	font-size: 1.0em;
 }

diff --git a/templates/article/article.tpl b/templates/article/article.tpl
@@ -10,23 +10,23 @@
  *}
 {include file="article/header.tpl"}
 
-<script type="text/javascript">
-	{literal}initPdfResize();{/literal}
-</script>
-
 {if $galley}
 	{if $galley->isHTMLGalley()}
 		{$galley->getHTMLContents()}
 	{elseif $galley->isPdfGalley()}
 		<div id="articlePdf" class="ui-widget-content">
-		{url|assign:"pdfUrl" op="viewFile" path=$articleId|to_array:$galley->getBestGalleyId($currentJournal)}
-		<object type="application/pdf" data="{$pdfUrl}" width="99%" height="99%">
-			{translate key="article.pdf.pluginMissing"}
-		</object>
-		<br /><br />
-		{* The target="_parent" is for the sake of iphones, which present scroll problems otherwise. *}
+			{url|assign:"pdfUrl" op="viewFile" path=$articleId|to_array:$galley->getBestGalleyId($currentJournal)}
+			<object id="pdfObject" type="application/pdf" data="{$pdfUrl}" width="99%" height="99%">
+				<div id="pluginMissing">{translate key="article.pdf.pluginMissing"}</div>
+			</object>
+			<br /><br />
+			{* The target="_parent" is for the sake of iphones, which present scroll problems otherwise. *}
 		</div>{* articlePdf *}
-		<p><a class="action" target="_parent" href="{url op="download" path=$articleId|to_array:$galley->getBestGalleyId($currentJournal)}">{translate key="article.pdf.download"}</a></p>
+		<p>
+			<a class="action" target="_parent" href="{url op="download" path=$articleId|to_array:$galley->getBestGalleyId($currentJournal)}">{translate key="article.pdf.download"}</a>
+			<a class="action" href="#" id="fullscreenShow">{translate key="common.fullscreen"}</a>
+			<a class="action" href="#" id="fullscreenHide">{translate key="common.fullscreenOff"}</a>
+		</p>
 	{/if}
 {else}
 	<div id="topBar">

diff --git a/templates/article/header.tpl b/templates/article/header.tpl
@@ -24,6 +24,7 @@
 	{include file="article/googlescholar.tpl"}
 	{call_hook name="Templates::Article::Header::Metadata"}
 
+	<link rel="stylesheet" href="http://localhost/dev/ojs/lib/pkp/styles/pkp.css" type="text/css" />
 	<link rel="stylesheet" href="{$baseUrl}/lib/pkp/styles/common.css" type="text/css" />
 	<link rel="stylesheet" href="{$baseUrl}/styles/common.css" type="text/css" />
 	<link rel="stylesheet" href="{$baseUrl}/styles/articleView.css" type="text/css" />
@@ -104,7 +105,6 @@
 	</div>
 {/if}
 
-
 <div id="main">
 
 {include file="common/navbar.tpl"}