diff options
author | Robin Appelman <icewind@owncloud.com> | 2012-11-15 03:38:46 +0400 |
---|---|---|
committer | Robin Appelman <icewind@owncloud.com> | 2012-11-15 03:38:46 +0400 |
commit | 2cc39582ee577ee0a2ddb97f9f85829ee8d8c6d3 (patch) | |
tree | 5ad523b39086264c1865f54cc6e1141db9f9010e /reader | |
parent | 2f08572adc08f60bc571c2092360d49634afd755 (diff) | |
parent | 35611c2344ef5bf7116304b1f031a5b06aa6a0f4 (diff) |
Merge branch 'master' into filesystem
Diffstat (limited to 'reader')
-rw-r--r-- | reader/ajax/canvas_saver.php | 23 | ||||
-rw-r--r-- | reader/ajax/thumbnail.php | 14 | ||||
-rw-r--r-- | reader/css/reader.css | 19 | ||||
-rw-r--r-- | reader/img/directory.jpg | bin | 0 -> 3214 bytes | |||
-rwxr-xr-x | reader/js/integrate.js | 129 | ||||
-rw-r--r-- | reader/lib/thumbnail.php | 34 | ||||
-rwxr-xr-x | reader/templates/index.php | 45 |
7 files changed, 143 insertions, 121 deletions
diff --git a/reader/ajax/canvas_saver.php b/reader/ajax/canvas_saver.php new file mode 100644 index 000000000..78fa5b5ac --- /dev/null +++ b/reader/ajax/canvas_saver.php @@ -0,0 +1,23 @@ +<?php + // Get the data + $imageData=$_POST['canv_data']; + $title = rtrim($_POST['title'],'pdf'); + $location = urldecode(dirname($_POST['location'])); + + if($location != '/') + $location = $location.'/'; + $filteredData=substr($imageData, strpos($imageData, ",")+1); + $owner = OCP\USER::getUser(); + $save_dir = OCP\Config::getSystemValue("datadirectory").'/'. $owner .'/reader'; + $save_dir .= $location; + $thumb_file = $save_dir . $title; + if (!is_dir($save_dir)) { + mkdir($save_dir, 0777, true); + } + $image = new OC_Image($filteredData); + if ($image->valid()) { + $image->centerCrop(100); + $image->fixOrientation(); + $image->save($thumb_file.'png'); + } +?> diff --git a/reader/ajax/thumbnail.php b/reader/ajax/thumbnail.php new file mode 100644 index 000000000..f1aac876e --- /dev/null +++ b/reader/ajax/thumbnail.php @@ -0,0 +1,14 @@ +<?php + + OCP\JSON::checkLoggedIn(); + OCP\JSON::checkAppEnabled('reader'); + + require_once('apps/reader/lib/thumbnail.php'); + $img = $_GET['filepath']; + $image = thumb($img); + if ($image) { + OCP\Response::enableCaching(3600 * 24); // 24 hour + $image->show(); + } + +?> diff --git a/reader/css/reader.css b/reader/css/reader.css index 484ebebbc..8edfbd55a 100644 --- a/reader/css/reader.css +++ b/reader/css/reader.css @@ -6,25 +6,18 @@ div.crumb.last { font-weight:bold; } table { white-space:normal; position:absolute; top:40px; left:5px;font-family:Arial;} -tbody tr { background:white; float:left; height:200px; width:auto; font-size:12px;} +tbody tr { background:white; float:left; height:150px;font-size:12px;} tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#ffffff; } .thumbnail:not([data-loaded]) { background-color: white; } -td.filename.svg{ background:no-repeat; vertical-align:text-bottom; height:200px; width:150px; white-space:normal; text-align:center; - color:#888; text-shadow:#fff 0 1px 0; } - +td.filename.svg{ background:no-repeat; vertical-align:text-bottom; height:150px; width:150px; white-space:normal; text-align:center; + color:#888; text-shadow:#fff 0 1px 0;} td.filename.svg:hover{ background-color:#ffffff; } -div.thumbnail { box-shadow: 5px 5px 5px #888888; border:1px solid #888888; -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */ - border-radius: 3px; } - -#dirsCanvas { border:1px solid #888888; position:absolute; margin-top:3px;box-shadow: 3px 3px 3px #888888; - -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */ border-radius: 3px; } - -center { width:150px; overflow:hidden; text-overflow:ellipsis; } +a.name img,a.dirs img { border: 1px solid #EEE; -webkit-box-shadow: 4px 4px 4px 0px grey; box-shadow: 4px 4px 4px 0px grey;} +a.dirs{ position:relative; left:5px; margin-left:5px; } +center { width:150px; overflow:hidden; text-overflow:ellipsis;} span.nametext{ font-family:Arial;font-size:15px;font-weight:normal;width:150px; white-space:nowrap; margin-left:5px; margin-right:5px; text-transform:capitalize; } -div.title{ font-family:Arial;font-size:14px;font-weight:100;opacity:0;z-index:800;color:white;position:absolute;background-color:black;padding:5px; height:auto;-webkit-transition: opacity 0.5s;border:0;-webkit-border-radius: 3px;} -div.visible{opacity:0.8;} diff --git a/reader/img/directory.jpg b/reader/img/directory.jpg Binary files differnew file mode 100644 index 000000000..93bbc2e30 --- /dev/null +++ b/reader/img/directory.jpg diff --git a/reader/js/integrate.js b/reader/js/integrate.js index 6ed40defe..aac47d8ba 100755 --- a/reader/js/integrate.js +++ b/reader/js/integrate.js @@ -5,6 +5,23 @@ $(document).ready(function() { }); $('#file_action_panel').attr('activeAction', false); + + $('td.filename.svg a.dirs').hover(function(){ + $(this).children().children('img#img2').animate({ + left: '-=60'}, 50, function(){ + }); + $(this).children().children('img#img3').animate({ + left: '+=60'}, 50, function(){ + }); + }); + $('td.filename.svg a.dirs').mouseleave(function(){ + $(this).children().children('img#img2').animate({ + left: '+=120'}, 50, function(){ + }); + $(this).children().children('img#img3').animate({ + left: '-=120'}, 50, function(){ + }); + }); }); $(function() { @@ -27,22 +44,6 @@ $(function() { action(filename); } }); - // Generate thumbnails for folders. - create_folder_thumbnails(); - - // On close of the pdf viewer, reload the page. - $('#close').live('click',function(event) { - location.reload(); - }); - // On hover over pdf thumbnails, their title should show. - $('a.name').hover(function(){ - if($(this).children().hasClass('title')) - $(this).children().addClass('visible'); - }); - $('a.name').mouseleave(function(){ - if($(this).children().hasClass('title')) - $(this).children().removeClass('visible'); - }); } }); @@ -57,7 +58,7 @@ function getAction(mime,type) { } else { name = function (filename){ - window.location=OC.linkTo('reader', 'index.php') + '&dir='+ + window.location=OC.linkTo('reader', 'index.php') + '?dir='+ encodeURIComponent($('#dir').val()).replace(/%2F/g, '/')+'/'+ encodeURIComponent(filename) + '/'; } @@ -67,10 +68,13 @@ function getAction(mime,type) { function create_thumbnails() { PDFJS.disableWorker = true; - $('td.filename a').each(function() { + $('td.filename a.name').each(function() { // Get url and title of each pdf file from anchor tags. var url = $(this).attr('href'); var title = $(this).parent().parent().attr('data-file'); + var location = $(this).attr('dir'); + var thumbnail_exists = $(this).attr('value'); + if (thumbnail_exists == "false") { if (url.indexOf('pdf') != -1) { PDFJS.getDocument(url).then(function(pdf) { // Using promise to fetch the page @@ -78,13 +82,8 @@ function create_thumbnails() { var scale = 0.2; var viewport = page.getViewport(scale); - var div = document.createElement('div'); - div.id = 'thumbnailContainer'; - div.className = 'thumbnail'; - var anchor = document.getElementById(url); // Create canvas elements for each pdf's first page. var canvas = document.createElement("canvas"); - canvas.id = 'thumbnail'; // Canvas elements should be of proper size, not too big, not too small. if (viewport.height > 170 || viewport.width > 130) { @@ -98,89 +97,37 @@ function create_thumbnails() { canvas.height = viewport.height; canvas.width = viewport.width; - div.style.height = canvas.height + 'px'; - div.style.width = canvas.width + 'px'; - div.appendChild(canvas); - anchor.appendChild(div); - - var title_div = document.createElement('div'); - title_div.className = 'title'; - title_div.innerHTML = title; - anchor.appendChild(title_div); - var ctx = canvas.getContext('2d'); ctx.save(); ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.restore(); - + ctx.restore(); + var view = page.view; var scaleX = (canvas.width / page.width); var scaleY = (canvas.height / page.height); ctx.translate(-view.x * scaleX, -view.y * scaleY); - - // Render PDF page into canvas context + + // Render PDF page into canvas context var renderContext = { canvasContext: ctx, viewport: viewport }; - page.render(renderContext); + + pageRendering = page.render(renderContext); + pageRendering.onData(function(){ + canvasSaver(canvas,title,location); + }); }); }); } - }); + } + }); } -// Function to create thumbnails for folders. -function create_folder_thumbnails() { - $('a.dirs input').each(function() { - // fetch margin, url and and directory name values for each pdf, stored in input tags. - var margin = $(this).attr('name'); - var pdf_dir = $(this).attr('value'); - var url = $(this).attr('id'); - - PDFJS.getDocument(url).then(function(pdf) { - // Using promise to fetch the page - pdf.getPage(1).then(function(page) { - var scale = 0.3; - var viewport = page.getViewport(scale); - - // Prepare canvas using PDF page dimensions - var anchor = document.getElementById(pdf_dir); - - var canvas = document.createElement("canvas"); - canvas.id = "dirsCanvas"; - // Each thumbnail in the 3-thumbnail set should be of same dimensions. - canvas.height = '168'; - canvas.width = '120'; - // Canvases should be on top of each other - $(canvas).css('z-index',100 - margin); - $(canvas).css('margin-left', margin + 'px'); - $(canvas).css('-webkit-backface-visibility', 'visible'); - $(canvas).css('-webkit-transform-origin', '0% 51%'); - $(canvas).css('-webkit-transform',' perspective(' + margin*35 + 'px) rotateY(23deg)'); - - anchor.appendChild(canvas); - - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.fillStyle = 'rgb(255, 255, 255)'; - ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.restore(); - - var view = page.view; - var scaleX = (canvas.width / page.width); - var scaleY = (canvas.height / page.height); - ctx.translate(-view.x * scaleX, -view.y * scaleY); - - // Render PDF page into canvas context - - var renderContext = { - canvasContext: ctx, - viewport: viewport - }; - page.render(renderContext); - }); - }); - }); +function canvasSaver(canvas,title,location) { + var canvas_data = canvas.toDataURL('image/png'); + $.post("apps/reader/ajax/canvas_saver.php", {canv_data:canvas_data,title:title,location:location}); } + + diff --git a/reader/lib/thumbnail.php b/reader/lib/thumbnail.php new file mode 100644 index 000000000..04dafaa06 --- /dev/null +++ b/reader/lib/thumbnail.php @@ -0,0 +1,34 @@ +<?php + + function check_thumb_exists($location,$filename) { + $image_path = rtrim($location,'.pdf').'.png'; + if(!file_exists('/opt/lampp/htdocs/owncloud/data/priyanka/reader/'.$image_path)) { + $check = "false"; + } + else + $check = "true"; + return $check; + } + + function thumb($path) { + $thumb_path = \OCP\Config::getSystemValue( 'datadirectory' ).'/'.\OC_User::getUser().'/reader'; + if (file_exists($thumb_path.$path)) { + return new \OC_Image($thumb_path.$path); + } + if (!\OC_Filesystem::file_exists($path)) { + return false; + } + } + + function check_dir_exists($current_dir,$dir) { + $owner = OCP\USER::getUser(); + $path = OCP\Config::getSystemValue("datadirectory").'/'. $owner .'/reader'; + $path .= $current_dir.$dir; + if (!is_dir($path)) { + return false; + } + else + return true; + } + +?> diff --git a/reader/templates/index.php b/reader/templates/index.php index ee9afd19c..f2c694510 100755 --- a/reader/templates/index.php +++ b/reader/templates/index.php @@ -1,16 +1,18 @@ +<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> +<META HTTP-EQUIV="Expires" CONTENT="-1"> <script type="text/javascript"> // Specify the main script used to create a new PDF.JS web worker. // In production, change this to point to the combined `pdf.js` file. PDFJS.workerSrc = 'apps/reader/js/pdf.js'; </script> - <div id = "controls"> <?php include('apps/reader/lib/dir.php'); + include('apps/reader/lib/thumbnail.php'); // Get the current directory. $current_dir = empty($_['dir'])?'/':$_['dir']; - $base_url = OCP\Util::linkTo('reader', 'index.php').'&dir='; + $base_url = OCP\Util::linkTo('reader', 'index.php').'?dir='; $curr_path = ''; $path = explode( '/', trim($current_dir,'/')); @@ -54,6 +56,7 @@ <table> <tbody id = "fileList"> <?php + // Array to store directory entries, which contain pdfs. $sub_dirs = array(); foreach ($files as $file) { @@ -65,14 +68,16 @@ if ($file['dirname'] == '.') { ?> <!-- Each tr displays a file --> - <tr id = "row" data-file="<?php echo $name;?>" data-type="<?php echo 'file'?>" data-mime="<?php echo 'application/pdf'?>" data-size="3462755" data-write="true" > + <tr id = "row" data-file="<?php echo $name;?>" data-type="<?php echo 'file'?>" data-mime="<?php echo 'application/pdf'?>" data-size="3462755" data-write="true"> <td class="filename svg"> - <a class="name" id = "http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" href="http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" title=""> + <?php $check_thumb = check_thumb_exists($directory,$name);?> + <a class="name" href="http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" title="<?php echo urldecode($name);?>" dir ="<?php echo $directory.$name?>" value = "<?php echo $check_thumb;?>"> <center> <span class = "nametext"> <?php echo htmlspecialchars($file['basename']);?> </span> </center> + <img rel ="images" src = "<?php echo \OCP\Util::linkTo('reader', 'ajax/thumbnail.php').'&filepath='.urlencode($current_dir.rtrim($file['filename'],'pdf').'png');?>"> </a> </td> </tr> @@ -95,27 +100,34 @@ * directory name to fetch any 3 pdf urls inside those directories.*/ $results = explore($current_dir,$sub_dirs); - foreach ($results as $r) {?> + foreach ($results as $r) { + ?> <!-- Display folder name--> <tr id = "row" data-file="<?php echo $r[0];?>" data-type="dir"> <td class = "filename svg"> - <a class = "dirs" id = "<?php echo $r[0];?>" href = "<?php echo OCP\Util::linkTo('reader', 'index.php').'&dir='.$current_dir.$r[0].'/';?>"> + <a class = "dirs" id = "<?php echo $r[0];?>" href = "<?php echo OCP\Util::linkTo('reader', 'index.php').'?dir='.$current_dir.$r[0].'/';?>"> <center> <span class = "nametext"> <?php echo htmlspecialchars($r[0]);?> </span> - </center> + <?php - $margin = 15; - // Display thumbnails of 3 pdf pages to show a folder. - foreach ($r[1] as $thumbs) { - // Use directory name, pdf url, margin value to be sent to javascript to generate thumbnail. - echo '<input type = "hidden" value = "'.$r[0].'" id = "http://localhost'.\OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$r[0].'/'.$thumbs.'" name = "'.$margin.'">'; - // Left Margin of each page should increase from the left to right. - $margin = $margin + 15; + // Check if sub-directory($r[0]) exists or not--> + $is_dir = check_dir_exists($current_dir,$r[0]); + if($is_dir == false) + echo '<img src= "">'; + else { + $margin = 5; + $img = 1; + // Display thumbnails of 3 pdf pages to show a folder. + foreach ($r[1] as $thumbs) { + echo '<img id = "img'.$img.'" src = "'.\OCP\Util::linkTo('reader', 'ajax/thumbnail.php').'&filepath='.urlencode($current_dir.$r[0].'/'.rtrim($thumbs,'pdf').'png').'" style = "position:absolute; top:20px; left:10px; margin-left:'.$margin.'px; z-index:'.(100-$margin).';">'; + $margin = $margin + 5; + $img = $img + 1; + } } ?> - + </center> </a> </td> </tr><?php @@ -123,5 +135,4 @@ ?> </tbody> </table> - - + |