Changeset 26349 for trunk

Timestamp:

Dec 29, 2013, 10:23:57 PM (10 years ago)

Author:

rvelices

Message:

smart pocket new thumbnail display

Location:

trunk/themes/smartpocket

Files:

• js/smartpocket.js (modified) (1 diff)
• js/thumb.arrange.js (added)
• template/thumbnails.tpl (modified) (1 diff)
• theme.css (modified) (1 diff)
• themeconf.inc.php (modified) (3 diffs)

trunk/themes/smartpocket/js/smartpocket.js

@@ -28 +28 @@
                         }
                 });
-                $(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+'%');
-}
-

trunk/themes/smartpocket/template/thumbnails.tpl

@@ -1 +1 @@
 {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}
-  <li style="display:none;">
-    <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external"></a>
-  </li>
+                <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 class="liEmpty">
+                <a href="{$pwg->derivative_url($picture_derivative_params, $thumbnail.src_image)}" rel="external">
+{/if}
+        </a></li>
 {/strip}{/foreach}
 </ul>

trunk/themes/smartpocket/theme.css

@@ -17 +17 @@
 .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;

trunk/themes/smartpocket/themeconf.inc.php

@@ -23 +23 @@
 */
 
+
+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');
@@ -31 +74 @@
 
   $template->assign('page_selection', array_flip($selection));
-
+  $template->assign('thumb_picker', new SPThumbPicker() );
   return $page['items'];
 }
@@ -49 +92 @@
 {
   $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))