smart pocket new thumbnail display

git-svn-id: http://piwigo.org/svn/trunk@26349 68402e56-0260-453c-a942-63ccdbb3a9ee

5 files changed, 252 insertions, 37 deletions

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 '<div class="ps-toolbar-close"><div class="ps-toolbar-content"></div></di
 				}

 			}

 		});

-		$(window).bind('orientationchange', set_thumbnails_width);

-		set_thumbnails_width();

+		var spThumbs = new SPThumbs(SPThumbsOpts);

   });

 }(window, window.jQuery, window.Code.PhotoSwipe));

 

-function set_thumbnails_width() {

-	var dpr = 1 //window.devicePixelRatio>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<line.elements.length; i++) {
+			var eltObj = line.elements[i]
+				, eltW=eltObj.w
+				, eltH=eltObj.h
+				, eltToRecover;
+
+			if (i==line.elements.length-1)
+				eltToRecover = toRecover;
+			else
+				eltToRecover = Math.round(toRecover * eltW / line.elementsWidth);
+
+			toRecover -= eltToRecover;
+			line.elementsWidth -= eltW;
+
+			if (eltH > 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}

 <ul class="thumbnails">

 {foreach from=$thumbnails item=thumbnail}{strip}

-{assign var=derivative value=$pwg->derivative($thumbnail_derivative_params, $thumbnail.src_image)}

+{$derivative=$thumb_picker->pick($thumbnail.src_image)}

 {if isset($page_selection[$thumbnail.id]) and !isset($thumbnail.representative_ext)}

-  <li>

-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">

-     <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">

-    </a>

-  </li>

-{elseif isset($thumbnail.representative_ext)}

-  <li>

-    <a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">

-     <img {if !$derivative->is_cached()}data-{/if}src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}">

-    </a>

-  </li>

+	<li class="liVisible">

+{if !isset($thumbnail.representative_ext)}

+		<a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" data-picture-url="{$thumbnail.URL}" rel="external">

+{else}

+		<a href="{$thumbnail.URL}" target="_blank" onClick="window.location='{$thumbnail.URL}'">

+{/if}

+		 <img src="{$derivative->get_url()}" {$derivative->get_size_htm()} alt="{$thumbnail.TN_ALT}">

 {else}

-  <li style="display:none;">

-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external"></a>

-  </li>

+	<li class="liEmpty">

+		<a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external">

 {/if}

+	</a></li>

 {/strip}{/foreach}

 </ul>

 {/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;