From 8c6f57e5f651395a984a0094338d2b913175aeec Mon Sep 17 00:00:00 2001 From: rvelices Date: Sun, 29 Dec 2013 21:23:57 +0000 Subject: smart pocket new thumbnail display git-svn-id: http://piwigo.org/svn/trunk@26349 68402e56-0260-453c-a942-63ccdbb3a9ee --- themes/smartpocket/js/smartpocket.js | 10 +- themes/smartpocket/js/thumb.arrange.js | 170 +++++++++++++++++++++++++++++ themes/smartpocket/template/thumbnails.tpl | 44 ++++---- themes/smartpocket/theme.css | 15 ++- themes/smartpocket/themeconf.inc.php | 50 ++++++++- 5 files changed, 252 insertions(+), 37 deletions(-) create mode 100644 themes/smartpocket/js/thumb.arrange.js (limited to 'themes/smartpocket') diff --git a/themes/smartpocket/js/smartpocket.js b/themes/smartpocket/js/smartpocket.js index 8f0452672..fffb993fd 100644 --- a/themes/smartpocket/js/smartpocket.js +++ b/themes/smartpocket/js/smartpocket.js @@ -27,15 +27,7 @@ return '
1 ? window.devicePixelRatio : 1 - , nb_thumbs = Math.max(2, Math.ceil($('.thumbnails').width() / (var_thumb_width/dpr+2*5))) - , width = Math.floor(1000000 / nb_thumbs) / 10000; - $('.thumbnails li').css('width', width+'%'); -} - diff --git a/themes/smartpocket/js/thumb.arrange.js b/themes/smartpocket/js/thumb.arrange.js new file mode 100644 index 000000000..f43c5d824 --- /dev/null +++ b/themes/smartpocket/js/thumb.arrange.js @@ -0,0 +1,170 @@ + +function SPTLine(margin, rowHeight) { + this.elements = new Array; + this.margin = margin; + this.rowHeight = rowHeight; + this.maxHeight = 0; +} + +SPTLine.prototype = { + width: 0, + elementsWidth: 0, + firstThumbIndex: 0, + + add: function($elt, absIndex) { + if (this.elements.length === 0) + this.firstThumbIndex = absIndex; + if (!$elt.data("w")) + { + var w=$elt.width(), h=$elt.height(); + if (h > this.rowHeight) { + w = Math.round(w * this.rowHeight/h); + h = this.rowHeight; + } + $elt.data("w", w) + .data("h", h); + } + + var eltObj = { + $elt: $elt, + w: $elt.data("w"), + h: $elt.data("h") + }; + this.elements.push(eltObj); + + if (eltObj.h > this.maxHeight) + this.maxHeight = eltObj.h; + + this.width += this.margin + eltObj.w; + this.elementsWidth += eltObj.w; + }, + + clear: function() { + if (!this.elements.length) return; + this.width = this.elementsWidth = 0; + this.maxHeight = 0; + this.elements.length = 0; + } +} + + +function SPThumbs(options) { + this.opts = options; + + this.$thumbs = $('.thumbnails'); + if (this.$thumbs.length==0) return; + this.$thumbs.css('text-align', 'left'); + + this.opts.extraRowHeight = 0; + if (window.devicePixelRatio > 1) { + var dpr = window.devicePixelRatio; + this.opts.extraRowHeight = 6; /*loose sharpness but only for small screens when we could "almost" fit with full sharpness*/ + this.opts.rowHeight = Math.round(this.opts.rowHeight / dpr ) + this.opts.extraRowHeight; + } + this.process(); + + var that = this; + $(window).on('resize', function() { + if (Math.abs(that.$thumbs.width() - that.prevContainerWidth)>1) + that.process(); + }) + .on('RVTS_loaded', function(evt, down) { + that.process( down && that.$thumbs.width() == that.prevContainerWidth ? that.prevLastLineFirstThumbIndex : 0); + } ); +} + +SPThumbs.prototype = { + prevContainerWidth:0, + prevLastLineFirstThumbIndex: 0, + + process: function(startIndex) { + startIndex = startIndex ? startIndex : 0; + var containerWidth = this.$thumbs.width() + , maxExtraMarginPerThumb = 1; + this.prevContainerWidth = containerWidth; + + var $elts = $('li.liVisible>a>img', this.$thumbs) + , line = new SPTLine(this.opts.hMargin, this.opts.rowHeight); + + for (var i=startIndex; i<$elts.length; i++) { + var $elt = $( $elts[i] ); + + line.add($elt, i); + if (line.width >= containerWidth - maxExtraMarginPerThumb * line.elements.length) { + this.processLine(line, containerWidth); + line.clear(); + } + }; + + if(line.elements.length) + this.processLine(line, containerWidth, true); + this.prevLastLineFirstThumbIndex = line.firstThumbIndex; + }, + + processLine: function(line, containerWidth, lastLine) { + var toRecover, eltW, eltH + , rowHeight = line.maxHeight ? line.maxHeight : line.elements[0].h; + + if (line.width / containerWidth > 1.01) { + var ratio = line.elementsWidth / (line.elementsWidth + containerWidth - line.width); + var adjustedRowHeight = rowHeight / (1 + (ratio-1) * 0.95 ); + adjustedRowHeight = 6 * Math.round( adjustedRowHeight/6 ); + if (adjustedRowHeight < rowHeight / ratio ) { + adjustedRowHeight = Math.ceil( rowHeight / ratio ); + var missing = this.opts.rowHeight - this.opts.extraRowHeight - adjustedRowHeight; + if (missing>0 && missing<6) + adjustedRowHeight += missing; + } + if (adjustedRowHeight < rowHeight) + rowHeight = adjustedRowHeight; + } + else if (lastLine) + rowHeight = Math.min( rowHeight, this.opts.rowHeight - this.opts.extraRowHeight); + + toRecover = line.width - containerWidth; + if (lastLine) + toRecover = 0; + + for(var i=0; i rowHeight ) { + eltW = Math.round( eltW * rowHeight/eltObj.h ); + eltH = rowHeight; + eltToRecover -= eltObj.w - eltW; + if (lastLine) + eltToRecover = 0; + } + + this.reposition(eltObj.$elt, eltW, eltH, eltW-eltToRecover, rowHeight); + } + }, + + reposition: function($img, imgW, imgH, liW, liH) { + $img.attr("width", imgW) + .attr("height", imgH); + + $img.closest("li").css( { + width: liW+"px", + height: liH+"px" + }); + + $img.parent("a").css( { + left: Math.round((liW-imgW)/2)+"px", + top: Math.round((liH-imgH)/2)+"px" + }); + } + +} + diff --git a/themes/smartpocket/template/thumbnails.tpl b/themes/smartpocket/template/thumbnails.tpl index f4e56e570..f8d4fba6e 100644 --- a/themes/smartpocket/template/thumbnails.tpl +++ b/themes/smartpocket/template/thumbnails.tpl @@ -1,33 +1,39 @@ {if !empty($thumbnails)} +{$row_height=216} +{$hmargin=4} +{$vmargin=5} +{$container_margin=-10} + {combine_script id='klass' path='themes/smartpocket/js/klass.min.js'} {combine_script id='photoswipe' path='themes/smartpocket/js/code.photoswipe.jquery.min.js' require='klass,jquery.mobile'} {combine_script id='smartpocket' path='themes/smartpocket/js/smartpocket.js' require='photoswipe'} -{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} -{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} +{combine_script id='sp.thumb.arrange' path='themes/smartpocket/js/thumb.arrange.js' require='jquery' load='footer'} {footer_script} - var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}", var_thumb_width={$thumbnail_derivative_params->max_width()}; +var var_loop = {if $smartpocket.loop}true{else}false{/if}, var_autohide = {$smartpocket.autohide}, var_trad = "{'More Information'|@translate}"; +var SPThumbsOpts ={ hMargin:{$hmargin},rowHeight:{$row_height}}; {/footer_script} - +{$thumb_picker->init($row_height)} +{html_style} +.thumbnails .liEmpty{ display:none} +.thumbnails LI{ margin-left:{$hmargin}px; margin-bottom:{$vmargin}px} +.thumbnails { margin:0 {$container_margin}px 0 {$container_margin-$hmargin}px} +{/html_style} {/if} diff --git a/themes/smartpocket/theme.css b/themes/smartpocket/theme.css index 75a26b387..25d968a4e 100644 --- a/themes/smartpocket/theme.css +++ b/themes/smartpocket/theme.css @@ -16,11 +16,18 @@ .ui-content { overflow: hidden; } .ui-field-contain, .ui-br { padding: 5px; border: 0 !important; } -.thumbnails { list-style: none; padding: 0; margin: 0; } +.thumbnails { list-style: none; padding: 0} .thumbnails:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } -.thumbnails li { float: left; } -.thumbnails li a { display: block; margin: 5px; } -.thumbnails li img { display: block; width: 100%; height: auto; } +.thumbnails li { + float: left; + position: relative; + overflow: hidden; + display: inline; +} +.thumbnails li a { + position: absolute; +} + #more_link { color: #FFFFFF; display: table-cell; diff --git a/themes/smartpocket/themeconf.inc.php b/themes/smartpocket/themeconf.inc.php index 837fcc5b2..9fc9e614d 100644 --- a/themes/smartpocket/themeconf.inc.php +++ b/themes/smartpocket/themeconf.inc.php @@ -22,6 +22,49 @@ include(PHPWG_THEMES_PATH.'smartpocket/admin/upgrade.inc.php'); redirect(duplicate_index_url()); */ + +class SPThumbPicker +{ + var $candidates; + var $default; + var $height; + + function init($height) + { + $this->candidates = array(); + foreach( ImageStdParams::get_defined_type_map() as $params) + { + if ($params->max_height() < $height || $params->sizing->max_crop) + continue; + if ($params->max_height() > 3*$height) + break; + $this->candidates[] = $params; + } + $this->default = ImageStdParams::get_custom($height*3, $height, 1, 0, $height ); + $this->height = $height; + } + + function pick($src_image) + { + $ok = false; + foreach($this->candidates as $candidate) + { + $deriv = new DerivativeImage($candidate, $src_image); + $size = $deriv->get_size(); + if ($size[1]>=$row_height-2) + { + $ok = true; + break; + } + } + if (!$ok) + { + $deriv = new DerivativeImage($this->default, $src_image); + } + return $deriv; + } +} + //Retrive all pictures on thumbnails page add_event_handler('loc_index_thumbnails_selection', 'sp_select_all_thumbnails'); @@ -30,7 +73,7 @@ function sp_select_all_thumbnails($selection) global $page, $template; $template->assign('page_selection', array_flip($selection)); - + $template->assign('thumb_picker', new SPThumbPicker() ); return $page['items']; } @@ -48,10 +91,7 @@ $type = IMG_LARGE; if (!empty($_COOKIE['screen_size'])) { $screen_size = explode('x', $_COOKIE['screen_size']); - $derivative_params = new ImageStdParams; - $derivative_params->load_from_db(); - - foreach ($derivative_params->get_all_type_map() as $type => $map) + foreach (ImageStdParams::get_all_type_map() as $type => $map) { if (max($map->sizing->ideal_size) >= max($screen_size) and min($map->sizing->ideal_size) >= min($screen_size)) break; -- cgit v1.2.3