diff options
author | Bartek Przybylski <bart.p.pl@gmail.com> | 2011-10-01 13:26:47 +0400 |
---|---|---|
committer | Bartek Przybylski <bart.p.pl@gmail.com> | 2011-10-01 13:26:47 +0400 |
commit | 83e7f9d54a7275d88880419e7a3f36b1d39cdc14 (patch) | |
tree | 7d74ed17c0af8297fe81cf242534f3bafb727a48 /apps | |
parent | bcf92badd1dae888fec85c1b3615a924a2e6a859 (diff) |
showing galleries bahaviour change
Diffstat (limited to 'apps')
-rw-r--r-- | apps/gallery/ajax/getAlbums.php | 22 | ||||
-rw-r--r-- | apps/gallery/ajax/getCovers.php | 62 | ||||
-rw-r--r-- | apps/gallery/css/styles.css | 11 | ||||
-rw-r--r-- | apps/gallery/js/album_cover.js | 37 | ||||
-rw-r--r-- | apps/gallery/js/albums.js | 80 | ||||
-rw-r--r-- | apps/gallery/templates/index.php | 12 |
6 files changed, 180 insertions, 44 deletions
diff --git a/apps/gallery/ajax/getAlbums.php b/apps/gallery/ajax/getAlbums.php new file mode 100644 index 00000000000..3fc1b7467e8 --- /dev/null +++ b/apps/gallery/ajax/getAlbums.php @@ -0,0 +1,22 @@ +<? +require_once('../../../lib/base.php'); + +if (!OC_User::IsLoggedIn()) { + echo json_encode(array('status' => 'error', 'message' => 'You need to log in')); + exit(); +} + +$a = array(); +$stmt = OC_DB::prepare('SELECT * FROM *PREFIX*gallery_albums WHERE uid_owner = ?'); +$result = $stmt->execute(array(OC_User::getUser())); + +while ($r = $result->fetchRow()) { + $album_name = $r['album_name']; + $stmt = OC_DB::prepare('SELECT * FROM *PREFIX*gallery_photos WHERE album_id = ?'); + $tmp_res = $stmt->execute(array($r['album_id'])); + $a[] = array('name' => $album_name, 'numOfItems' => min($tmp_res->numRows(), 10)); +} + +echo json_encode(array('status'=>'success', 'albums'=>$a)); + +?> diff --git a/apps/gallery/ajax/getCovers.php b/apps/gallery/ajax/getCovers.php index 69c03d3a446..d649edaf140 100644 --- a/apps/gallery/ajax/getCovers.php +++ b/apps/gallery/ajax/getCovers.php @@ -1,16 +1,66 @@ <? - require_once('../../../lib/base.php'); -$album_name = $_GET['album']; +function CroppedThumbnail($imgSrc,$thumbnail_width,$thumbnail_height, $tgtImg, $shift) { + //getting the image dimensions + list($width_orig, $height_orig) = getimagesize($imgSrc); + switch (strtolower(substr($imgSrc, strrpos($imgSrc, '.')+1))) { + case "jpeg": + case "jpg": + case "tiff": + $myImage = imagecreatefromjpeg($imgSrc); + break; + case "png": + $myImage = imagecreatefrompng($imgSrc); + break; + default: + exit(); + } + $ratio_orig = $width_orig/$height_orig; + + if ($thumbnail_width/$thumbnail_height > $ratio_orig) { + $new_height = $thumbnail_width/$ratio_orig; + $new_width = $thumbnail_width; + } else { + $new_width = $thumbnail_height*$ratio_orig; + $new_height = $thumbnail_height; + } + + $x_mid = $new_width/2; //horizontal middle + $y_mid = $new_height/2; //vertical middle + + $process = imagecreatetruecolor(round($new_width), round($new_height)); + + imagecopyresampled($process, $myImage, 0, 0, 0, 0, $new_width, $new_height, $width_orig, $height_orig); + imagecopyresampled($tgtImg, $process, $shift, 0, ($x_mid-($thumbnail_width/2)), ($y_mid-($thumbnail_height/2)), $thumbnail_width, $thumbnail_height, $thumbnail_width, $thumbnail_height); + + imagedestroy($process); + imagedestroy($myImage); +} + +// Check if we are a user +if( !OC_User::isLoggedIn()){ + echo json_encode( array( 'status' => 'error', 'data' => array( 'message' => 'You need to log in.'))); + exit(); +} +$box_size = 200; +$album_name= $_GET['album_name']; $stmt = OC_DB::prepare('SELECT file_path FROM *PREFIX*gallery_photos,*PREFIX*gallery_albums WHERE *PREFIX*gallery_albums.uid_owner = ? AND album_name = ? AND *PREFIX*gallery_photos.album_id == *PREFIX*gallery_albums.album_id'); $result = $stmt->execute(array(OC_User::getUser(), $album_name)); -$images = array(); -while ($i = $result->fetchRow()) { - $images[] = $i['file_path']; + +$numOfItems = min($result->numRows(),10); + +$targetImg = imagecreatetruecolor($numOfItems*$box_size, $box_size); +$counter = 0; +while (($i = $result->fetchRow()) && $counter < $numOfItems) { + $imagePath = OC::$CONFIG_DATADIRECTORY . $i['file_path']; + CroppedThumbnail($imagePath, $box_size, $box_size, $targetImg, $counter*$box_size); + $counter++; } -echo json_encode(array('status' => 'success', 'imageCount' => $result->numRows(), 'images' => $images)); +header('Content-Type: image/png'); +imagepng($targetImg); +imagedestroy($targetImg); ?> diff --git a/apps/gallery/css/styles.css b/apps/gallery/css/styles.css index 8ce31c9e4a3..03b179138e6 100644 --- a/apps/gallery/css/styles.css +++ b/apps/gallery/css/styles.css @@ -2,7 +2,7 @@ div#gallery_list { margin: 90pt 20pt; } -div.gallery_album_box { +div#gallery_album_box { width: 200px; text-align: center; border: 0; @@ -10,13 +10,14 @@ div.gallery_album_box { margin: 5pt; } -div.gallery_album_box h1 { +div#gallery_album_box h1 { font-size: 12pt; font-family: Arial; } -img.gallery_album_cover { - width: 200px; - height: 200px; +div#gallery_album_cover { + width: 199px; + height: 199px; border: solid 1px black; } + diff --git a/apps/gallery/js/album_cover.js b/apps/gallery/js/album_cover.js index d4fb1f0475e..776feae32cc 100644 --- a/apps/gallery/js/album_cover.js +++ b/apps/gallery/js/album_cover.js @@ -1,27 +1,20 @@ var actual_cover; -$('body').ready(function() { - $('div[class=gallery_album_box]').each(function(i, e) { - $.getJSON('ajax/getCovers.php', { album: $(e).children('h1:last').text() }, function(a) { - if (a.status == "success") { - e.ic = a.imageCount; - e.images = a.images; - if (e.ic > 0) { - $(e).find('img[class=gallery_album_cover]').attr('src', 'ajax/thumbnail.php?img=' + e.images[0]); - actual_cover = 0; - } - } - }); - }); - $('img[class=gallery_album_cover]').each(function(i, e) { - $(e).mousemove(function(a) { - if (e.parentNode.parentNode.ic!=0) { - var x = Math.min(Math.floor((a.clientX - this.offsetLeft)/(200/e.parentNode.parentNode.ic)), e.parentNode.parentNode.ic-1); - if (actual_cover != x) { - $(e).attr('src', 'ajax/thumbnail.php?img=' + e.parentNode.parentNode.images[x]); - actual_cover = x; - } +$(document).ready(function() { + $.getJSON('ajax/getAlbums.php', function(r) { + if (r.status == 'success') { + for (var i in r.albums) { + var a = r.albums[i]; + Albums.add(a.name, a.numOfItems); } - }); + var targetDiv = document.getElementById('gallery_list'); + if (targetDiv) { + Albums.display(targetDiv); + } else { + alert('Error occured: no such layer `gallery_list`'); + } + } else { + alert('Error occured: ' + r.message); + } }); }); diff --git a/apps/gallery/js/albums.js b/apps/gallery/js/albums.js new file mode 100644 index 00000000000..7ab243ededf --- /dev/null +++ b/apps/gallery/js/albums.js @@ -0,0 +1,80 @@ +Albums={ + // album item in this array should look as follow + // {name: string, + // numOfCovers: int} + // + // previews array should be an array of base64 decoded images + // to display to user as preview picture when scrolling throught + // the album cover + albums:new Array(), + // add simply adds new album to internal structure + // however albums names must be unique so other + // album with the same name wont be insered, + // and false will be returned + // true on success + add: function(album_name, num) { + for (var a in Albums.albums) { + if (a.name == album_name) { + return false; + } + } + Albums.albums.push({name: album_name, numOfCovers: num}); + return true; + }, + // remove element with given name + // returns remove element or undefined if no such element was present + remove: function(name) { + var i = -1, tmp = 0; + for (var a in Albums.albums) { + if (a.name == name) { + i = tmp; + break; + } + tmp++; + } + if (i != -1) { + return Albums.albums.splice(i,1); + } + return undefined; + }, + // return element which match given name + // of undefined if such element do not exist + find: function(name) { + var i = -1, tmp = 0; + for (var k in Albums.albums) { + var a = Albums.albums[k]; + if (a.name == name) { + i = tmp; + break; + } + tmp++; + } + if (i != -1) { + return Albums.albums[i]; + } + return undefined; + }, + // displays gallery in linear representation + // on given element, and apply default styles for gallery + display: function(element) { + var displayTemplate = '<div id="gallery_album_box" title="*NAME*"><a href="?view=*NAME*"><div id="gallery_album_cover"></div></a><h1>*NAME*</h1></div></div>'; + for (var i in Albums.albums) { + var a = Albums.albums[i]; + var local = $(displayTemplate.replace(/\*NAME\*/g, a.name)); + local.css('background-repeat', 'no-repeat'); + local.css('background-position', '0 0'); + local.css('background-image','url("ajax/getCovers.php?album_name='+a.name+'")'); + local.mousemove(function(e) { + var albumMetadata = Albums.find(this.title); + if (albumMetadata == undefined) { + return; + } + var x = Math.min(Math.floor((e.clientX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers)), albumMetadata.numOfCovers-1); + x *= this.offsetWidth; + $(this).css('background-position', -x+'px 0'); + }); + $(element).append(local); + } + } + +} diff --git a/apps/gallery/templates/index.php b/apps/gallery/templates/index.php index 45f70daa2e0..fc92479e3bf 100644 --- a/apps/gallery/templates/index.php +++ b/apps/gallery/templates/index.php @@ -1,5 +1,6 @@ <? OC_Util::addStyle('gallery', 'styles'); +OC_Util::addScript('gallery', 'albums'); OC_Util::addScript('gallery', 'album_cover'); ?> @@ -8,15 +9,4 @@ OC_Util::addScript('gallery', 'album_cover'); <input type="button" value="Rescan" onclick="javascript:scanForAlbums();" /><br/> </div> <div id="gallery_list"> -<? -require_once('base.php'); -foreach ($_['r'] as $r) { -?> - <div class="gallery_album_box"> - <a href="?view=<? echo $r['album_name']; ?>"><img class="gallery_album_cover"></a> - <h1><? echo $r['album_name']; ?></h1> - </div> -<? -} -?> </div> |