move query-string-passing to JS rather than embedding in the HTML, so that the HTML can be commonised and cached better

This commit is contained in:
Shish 2013-07-05 22:32:01 +01:00
parent e4bfa7df70
commit 47c1b5d094
9 changed files with 36 additions and 16 deletions

View file

@ -37,7 +37,7 @@ class BaseThemelet {
* Generic thumbnail code; returns HTML rather than adding
* a block since thumbs tend to go inside blocks...
*/
public function build_thumb_html(Image $image, $query=null) {
public function build_thumb_html(Image $image) {
global $config;
$i_id = (int) $image->id;
$h_view_link = make_link('post/view/'.$i_id, $query);
@ -55,7 +55,7 @@ class BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a href='$h_view_link' class='thumb shm-thumb' data-tags='$h_tags' data-post-id='$i_id'>".
return "<a href='$h_view_link' class='thumb shm-thumb shm-thumb-link' data-tags='$h_tags' data-post-id='$i_id'>".
"<img id='thumb_$i_id' title='$h_tip' alt='$h_tip' height='{$tsize[1]}' width='{$tsize[0]}' class='lazy' data-original='$h_thumb_link' src='$base/lib/static/grey.gif'>".
"<noscript><img id='thumb_$i_id' title='$h_tip' alt='$h_tip' height='{$tsize[1]}' width='{$tsize[0]}' src='$h_thumb_link'></noscript>".
"</a>\n";

View file

@ -95,9 +95,10 @@ and of course start organising your images :-)
}
protected function build_table($images, $query) {
$table = "<div class='shm-image-list'>";
$h_query = html_escape($query);
$table = "<div class='shm-image-list' data-query='$h_query'>";
foreach($images as $image) {
$table .= $this->build_thumb_html($image, $query);
$table .= $this->build_thumb_html($image);
}
$table .= "</div>";
return $table;

View file

@ -86,6 +86,23 @@ $(document).ready(function() {
a = document.getElementById("nextlink");
a.href = a.href + '?' + query;
}
/*
* If an image list has a data-query attribute, append
* that query string to all thumb links inside the list.
* This allows us to cache the same thumb for all query
* strings, adding the query in the browser.
*/
$(".shm-image-list").each(function(idx, elm) {
var query = $(this).data("query");
if(query) {
if(window.console) {console.log("Found list with query: "+query);}
$(this).find(".shm-thumb-link").each(function(idx2, elm2) {
if(window.console) {console.log("Appending to url: "+$(this).attr("href"));}
$(this).attr("href", $(this).attr("href") + query);
});
}
});
});

View file

@ -49,9 +49,10 @@ class CustomIndexTheme extends IndexTheme {
}
protected function build_table($images, $query) {
$table = "<div class='shm-image-list'>";
$h_query = html_escape($query);
$table = "<div class='shm-image-list' data-query='$h_query'>";
foreach($images as $image) {
$table .= "\t<span class=\"thumb\">" . $this->build_thumb_html($image, $query) . "</span>\n";
$table .= "\t<span class=\"thumb\">" . $this->build_thumb_html($image) . "</span>\n";
}
$table .= "</div>";
return $table;

View file

@ -1,6 +1,6 @@
<?php
class Themelet extends BaseThemelet {
public function build_thumb_html(Image $image, $query=null) {
public function build_thumb_html(Image $image) {
global $config;
$h_view_link = make_link("post/view/{$image->id}", $query);
$h_thumb_link = $image->get_thumb_link();
@ -16,7 +16,7 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a href='$h_view_link' class='shm-thumb' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
return "<a href='$h_view_link' class='shm-thumb shm-thumb-link' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
"width='{$tsize[0]}' height='{$tsize[1]}' src='$h_thumb_link' /></a>";
}

View file

@ -49,9 +49,10 @@ class CustomIndexTheme extends IndexTheme {
}
protected function build_table($images, $query) {
$table = "<div class='shm-image-list'>";
$h_query = html_escape($query);
$table = "<div class='shm-image-list' data-query='$h_query'>";
foreach($images as $image) {
$table .= "\t<span class=\"thumb\">" . $this->build_thumb_html($image, $query) . "</span>\n";
$table .= "\t<span class=\"thumb\">" . $this->build_thumb_html($image) . "</span>\n";
}
$table .= "</div>";
return $table;

View file

@ -1,6 +1,6 @@
<?php
class Themelet extends BaseThemelet {
public function build_thumb_html(Image $image, $query=null) {
public function build_thumb_html(Image $image) {
global $config;
$h_view_link = make_link("post/view/{$image->id}", $query);
$h_thumb_link = $image->get_thumb_link();
@ -16,7 +16,7 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a href='$h_view_link' class='shm-thumb' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
return "<a href='$h_view_link' class='shm-thumb shm-thumb-link' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
"width='{$tsize[0]}' height='{$tsize[1]}' src='$h_thumb_link' /></a>";
}

View file

@ -4,7 +4,7 @@ class Themelet extends BaseThemelet {
* Generic thumbnail code; returns HTML rather than adding
* a block since thumbs tend to go inside blocks...
*/
public function build_thumb_html(Image $image, $query=null) {
public function build_thumb_html(Image $image) {
global $config;
$h_view_link = make_link("post/view/{$image->id}", $query);
$h_thumb_link = $image->get_thumb_link();
@ -20,7 +20,7 @@ class Themelet extends BaseThemelet {
$tsize = get_thumbnail_size($image->width, $image->height);
}
return "<a href='$h_view_link' class='thumb shm-thumb' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
return "<a href='$h_view_link' class='thumb shm-thumb shm-thumb-link' data-tags='$h_tags' data-post-id='$i_id'><img title='$h_tip' alt='$h_tip' ".
"width='{$tsize[0]}' height='{$tsize[1]}' src='$h_thumb_link' /></a>";
}

View file

@ -4,7 +4,7 @@ class Themelet extends BaseThemelet {
* Generic thumbnail code; returns HTML rather than adding
* a block since thumbs tend to go inside blocks...
*/
public function build_thumb_html(Image $image, $query=null) {
public function build_thumb_html(Image $image) {
global $config;
$i_id = (int) $image->id;
$h_view_link = make_link('post/view/'.$i_id, $query);
@ -22,7 +22,7 @@ class Themelet extends BaseThemelet {
}
return '<center class="shm-thumb" data-tags="'.$h_tags.'" data-post-id="'.$i_id.'"><div class="thumbblock">'.
'<a href="'.$h_view_link.'" class="thumb">'.
'<a href="'.$h_view_link.'" class="thumb shm-thumb-link">'.
'<img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" class="lazy" data-original="'.$h_thumb_link.'" src="'.$base.'/lib/static/grey.gif">'.
'<noscript><img id="thumb_'.$i_id.'" title="'.$h_tip.'" alt="'.$h_tip.'" height="'.$tsize[1].'" width="'.$tsize[0].'" src="'.$h_thumb_link.'"></noscript>'.
"</a></div></center>\n";