[Discussion] Recent topics table with hover over previews.

[Freddy]

Here try this out.  I made it so you can configure it to display/not display both the message icon and the class icon.

Took me a while but that was quite interesting, I found out some more about SMF doing that one.  I used some of the SMF code for reference and adapted it to suit our needs.  It should show the whole range of class icons - like sticky, locked, hot, hot that you posted in....etc etc.

I've tested it quite a lot and it doesn't seem to throw any errors.

Code Select Expand

// *********************************************************************
// A PHP block by Freddy888 and MrCare
// !!Modified to show icon, number of views and replies.!!
// !!Modified to show or not show icon & show or not show message class!!
// Used alongside the NiceToolTips mod, will show
// recent topics in a table with tool tip previews.

// @SMF Mods : http://custom.simplemachines.org/mods/index.php?mod=2115
// @Tiny Portal : http://www.tinyportal.net/index.php?topic=31642

// This version : 18 April 2010
// Note that this version is ONLY for SMF2.
// *********************************************************************

// Configuration

// set the number of posts to show:
$num_recent = 8;

// Show class ?  Hot topic, locked etc.. (true or false)
$show_class_icon = true;

// Show the icon for type of message ? Lamp, thumbs up, smiley etc (true or false)
$show_message_icon = true;

// Config end.


global $scripturl, $settings, $modSettings, $db_prefix, $user_info;

// First get all the NiceToolTip javascript in place if it's needed.
// The javascript is not needed when we are in a board as the NiceToolTip module
// will already have loaded it.  We just need to add it if we are elsewhere...

// So add the code if we are not in a board
// OR When viewing a topic the board is also set,
// so we need to add the javascript then too...

if (!isset($_GET['board']) || isset($_GET['topic']))
echo '
<style type="text/css">
.nice_tooltip_fgclass {
background-color: ' . $modSettings['NiceTooltips_FGCOLOR'] . ';
opacity: ' . $modSettings['NiceTooltips_OPACITY'] / 100 . ';
}
.nice_tooltip_bgclass {
background-color: ' . $modSettings['NiceTooltips_BGCOLOR'] . ';
opacity: ' . $modSettings['NiceTooltips_OPACITY'] / 100 . ';
}
</style>

<script language="JavaScript" type="text/javascript" src="' . $settings['default_theme_url'] . (!empty($modSettings['NiceTooltips_scripturl']) ? '/' . $modSettings['NiceTooltips_scripturl'] : '') . '/overlib_mini.js"></script>

<script language="JavaScript" type="text/javascript" src="' . $settings['default_theme_url'] . (!empty($modSettings['NiceTooltips_scripturl']) ? '/' . $modSettings['NiceTooltips_scripturl'] : '') . '/overlib_adaptive_width.js"></script>
';


// leave out the recycle board, if any
if(isset($modSettings['recycle_board']))
$exclude = array($modSettings['recycle_board']);
else
$exclude = array();

$ex_aeva = empty($modSettings['aeva_enable']) ? 0 : 1;
$modSettings['aeva_enable'] = 0;
   
if ($exclude === null && !empty($modSettings['recycle_enable']) && $modSettings['recycle_board'] > 0)
$exclude = array($modSettings['recycle_board']);
else
$exclude = empty($exclude) ? array() : $exclude;

// Icons...
$stable_icons = array('xx', 'thumbup', 'thumbdown', 'exclamation', 'question', 'lamp', 'smiley', 'angry', 'cheesy', 'grin', 'sad', 'wink', 'moved', 'recycled', 'wireless');
$icon_sources = array();
foreach ($stable_icons as $icon)
$icon_sources[$icon] = 'images_url';


// Find all the posts in distinct topics.  Newer ones will have higher IDs.
// Stripped down from SSI.php ssi_recentTopics() function.

$request = tp_query("
SELECT
m.poster_time, ms.subject, m.id_topic, m.id_member, m.id_msg, b.id_board, b.name AS board_name, t.num_replies, t.num_views, t.is_sticky, t.locked, t.id_poll,
IFNULL(mem.real_name, m.poster_name) AS poster_name, " . ($user_info['is_guest'] ? '1 AS is_read, 0 AS new_from' : '
IFNULL(lt.id_msg, IFNULL(lmr.id_msg, 0)) >= m.id_msg_MODIFIED AS is_read,
IFNULL(lt.id_msg, IFNULL(lmr.id_msg, -1)) + 1 AS new_from') . ",
LEFT(m.body, ". (!empty($modSettings['NiceTooltips_lenght']) ? $modSettings['NiceTooltips_lenght'] : 384) .") AS body, m.smileys_enabled, m.icon
FROM ({$db_prefix}messages AS m, {$db_prefix}topics AS t, {$db_prefix}boards AS b, {$db_prefix}messages AS ms)
LEFT JOIN {$db_prefix}members AS mem ON (mem.id_member = m.id_member)" . (!$user_info['is_guest'] ? "
LEFT JOIN {$db_prefix}log_topics AS lt ON (lt.id_topic = t.id_topic AND lt.id_member = {$context['user']['id']})
LEFT JOIN {$db_prefix}log_mark_read AS lmr ON (lmr.id_board = b.id_board AND lmr.id_member = {$context['user']['id']})" : '') . "
WHERE t.id_last_msg >= " . ($modSettings['maxMsgID'] - 35 * min($num_recent, 5)) . "
AND t.id_last_msg = m.id_msg
AND b.id_board = t.id_board" . (empty($exclude) ? '' : "
AND b.id_board NOT IN (" . implode(', ', $exclude) . ")") . "
AND $user_info[query_see_board]
AND ms.id_msg = t.id_first_msg
ORDER BY t.id_last_msg DESC
LIMIT $num_recent", __FILE__, __LINE__);


// An array to hold all the posts/new topics in.
$posts = array();

// use a counter for topics so we can track the index of the $posts array - if needed.
$topic_count = 0;

// Keeps track of topic ids found so we can see if the user posted in a topic - if needed.
$topic_ids = array();


while ($row = tpdb_fetch_assoc($request))
{
// Build the array.
$posts[] = array(
'board' => array(
'link' => '<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0">' . $row['board_name'] . '</a>'
),
'topic' => $row['id_topic'],
'poster' => array(
'link' => empty($row['id_member']) ? $row['poster_name'] : '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['poster_name'] . '</a>'
),
'subject' => $row['subject'],
'preview' => $row['body'],
'time' => timeformat($row['poster_time']),
'href' => $scripturl . '?topic=' . $row['id_topic'] . '.msg' . $row['id_msg'] . ';topicseen#new',
'link' => '<a href="' . $scripturl . '?topic=' . $row['id_topic'] . '.msg' . $row['id_msg'] . '#new">' . $row['subject'] . '</a>',
'new' => !empty($row['is_read']),
'icon' => '<img src="' . $settings[$icon_sources[$row['icon']]] . '/post/' . $row['icon'] . '.gif" align="middle" alt="' . $row['icon'] . '" border="0" />',
'views_replies' => $row['num_views'] . '/' . $row['num_replies'],
'is_sticky' => !empty($modSettings['enableStickyTopics']) && !empty($row['is_sticky']),
'is_locked' => !empty($row['locked']),
'is_poll' => $modSettings['pollMode'] == '1' && $row['id_poll'] > 0,
'is_hot' => $row['num_replies'] >= $modSettings['hotTopicPosts'],
'is_very_hot' => $row['num_replies'] >= $modSettings['hotTopicVeryPosts'],
);

// Are we showing the icon for class of topic ?  Otherwise ignore this part as it's not needed.
if ($show_class_icon == true)
{
// Use the SMF function that works out what icon class we need to show.
determineTopicClass($posts[$topic_count]);

// Add this topic to our array of topics being found.
$topic_ids[] = $row['id_topic'];

$topic_count++;
}
}

tpdb_free_result($request);

// Again, are we showing the message/topic class icon ?  Otherwise don't bother with this bit.
if ($show_class_icon == true)
{
// See if the user posted in any of the topics found.
$request = tp_query("
SELECT id_topic
FROM {$db_prefix}messages
WHERE id_topic
IN (" . implode(', ',$topic_ids) . ")
AND id_member = {$context['user']['id']}
GROUP BY id_topic
LIMIT " . count($topic_ids), __FILE__, __LINE__);

// Now we know what topics the user posted in we can put them in an array
// and refer to it when we do the output.
$posted_in = array();

while ($row = tpdb_fetch_assoc($request))
{
$posted_in[] = $row['id_topic'];
}
tpdb_free_result($request);
}


// Now for the output...

// Set the cell span for subject depending on the number of icons we have to show.
$col_span = 1;

if ($show_class_icon == true)
$col_span++;
if ($show_message_icon == true)
$col_span++;


echo '
<table border="0" width="100%" cellspacing="1" cellpadding="3" class="bordercolor">
<tr class="titlebg">
<td align="center" colspan="' , $col_span , '">Subject</td>
<td align="center">Board</td>
<td align="center">Views/Replies</td>
<td align="center">Member</td>
<td align="center">Date & Time</td>
</tr>';

$bg=false;

foreach ($posts as $topic)
{
// Generate the popup.
$popup = NiceTooltip($topic['preview'], $topic['subject']);

echo '
<tr class="windowbg' , $bg ? '2' : '' , '">';

$bg = !$bg;

if ($show_class_icon == true)
echo '
<td valign="middle">
<img src="' , $settings['images_url'] , '/topic/' , (in_array($topic['topic'], $posted_in) ? 'my_' : '') , $topic['class'] , '.gif" alt="" />
</td>';

if ($show_message_icon == true)
echo '
<td valign="middle">
' , $topic['icon'] , '
</td>';

echo '
<td>
<a href="' , $topic['href'] , '"' , $popup , '>' , $topic['subject'] , '</a>';

    // Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt['new'], '" border="0" align="right", valign="absmiddle" /></a>';

echo '
</td>
<td valign="middle">' , $topic['board']['link'], '</td>';

echo '
<td valign="middle" align="center">' , $topic['views_replies'] , '</td>';

echo '
<td valign="middle" >', $topic['poster']['link'], '</td>
<td valign="middle" >';

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt['last_post'], '" title="', $txt['last_post'], '" border="0" style="float: right;" /></a>';

echo '
<span class="smalltext">', $topic['time'], '</span>
</td>
</tr>';
}

echo '
</table>';

[alhaudhie]

< Edit by Freddy - there's no need to quote me when my response is directly above your post - quote removed >


Nothing to say.. but
Working greatest like before.. you are champs!!! tq

[Blue Steel]

sorry to bother.. but heres my wish list for this great block

1. can/does it also show if theres an attachment ?
2. can you make it that the colums are sortable on user clicking title ASC/DESC ?
3. make Views/Replies Ccolum header smaller .. its taking up too much screen realestate just dead space in colum except for the header. (with the extra colums screen real estate is at a must to reduce where ever possible.. at least on my page)

Thanks for a great block

[Freddy]

No problem, some good suggestions...

1. No it doesn't show attachments, but that could probably be added, it just means changing the database query I think, after glancing at it.

2. Sortable - not sure how useful that would be, how many topics are you planning to show ?  I guessed most people would display a max of around 12 topics... and to me that wouldn't need sorting.  How many are you thinking of ?  Other thoughts - this would mean a page refresh too and each page refresh means a new database call not just for the block but the whole page too.

3. View/Replies, yes I had noticed that myself.  I could apply a style to it I suppose so it is smaller text ? Or split the words over two lines with a line break - meaning the headings would get a little taller...probably not a big problem as height is less of a concern most of the time.   Consider also that I only used styling I found quickly in SMF 2, I don't know all the new CSS yet - so you could use a different class for the headings (which do appear a little large to me) as you see fit, or just apply your own in-line style.

[Freddy]

Actually I just found it can show attachments without modifying the SQL.

Change this line :

Code Select Expand

$stable_icons = array('xx', 'thumbup', 'thumbdown', 'exclamation', 'question', 'lamp', 'smiley', 'angry', 'cheesy', 'grin', 'sad', 'wink', 'moved', 'recycled', 'wireless');

To this :

Code Select Expand

$stable_icons = array('xx', 'thumbup', 'thumbdown', 'exclamation', 'question', 'lamp', 'smiley', 'angry', 'cheesy', 'grin', 'sad', 'wink', 'moved', 'recycled', 'wireless', 'clip');

I just added 'clip' on the end so it picks up the clip gif.

If you have message icons set to display then it will show a paper clip icon.

[Blue Steel]

Members on my site use this block the most. its my main block on the front page . as my site is a coding site, members like to see messages in there that have been modified in at least the last week so i have mine set to show about 20-50 (I keep adjussting the number manually as the block can't show by age of message which would also be great if you could add that feature.
eg: instead on last xx messages .. messages altered within 7 days (configurable)

thanks for your new line of code.

At the moment i've put spaces between "Views/Replies" to "Views / Replies" to make it split over 2 lines this allowing wordwrap in there , but now the header bg isn't deep enough.. so i'm getting a little overflow

[Freddy]

At the moment i've put spaces between "Views/Replies" to "Views / Replies" to make it split over 2 lines this allowing wordwrap in there , but now the header bg isn't deep enough.. so i'm getting a little overflow

I can't really think of any words to put in there that will do the same job.  Splitting it so it wraps is probably the best compromise.  For your overflow you could make a new longer graphic for the background and make a new CSS class for it.  Alternatively you could set the background just to use a colour.

I will look into the posts from x amount of days, that does sound useful

I can probably do the sortable columns, as long as you understand it will mean a lot more overhead.

[Freddy]

Okay I had a lot of fun with this, I think I have something usable now.

I got it to show topics from a set number of days.  So you can for example configure it to show topics from the last 7 days etc.  It uses the forum time too, so assuming your users are set up right with their time zones it should be accurate.  Even if they are not I think there is enough tolerance there.

Also, and this pleased me, I found some javascript made by a nice helpful guy that sorts HTML tables - so I managed to eliminate further page loads and refreshes.

One thing we can't do now is have alternating backgrounds for posts - that's because when the items get reordered it screws up the system for changing the background which was previously done with PHP.

I've tested this the best I can on a test forum and it hasn't been throwing any errors for me.

I reduced the size of the heading text, maybe that will help with that overflow problem.  I couldn't find a suitable SMF CSS class to use there; everything I found would only work for one line of text.  So if folks are not happy with it I suggest they make a new graphic and class for it like I said above.

One more thing - this particular version needs the javascript to work obviously.  I have zipped and attached the sorttable.js file you need.  Unzip that and drop the javascript file into your ....Themes/default/scripts folder with all the other scripts.

Image attached shows the table being sorted by topic subject.  All columns are sortable...

Have fun and let me know how you get on

Edit : Code removed...

Updated code with bug fix is a few pages ahead...click here...

Same drill as before 

[Ken.]

Freddy, is this designed to be used just in a 'center' type of block?

Having it in a left block is giving me a scroll bar, of course I may have missed some of the discussion... Me is just now reading through the whole topic again.   
http://www.ourfamilyforum.org/SMF2.0/index.php


EDIT: for spelling and context.

[Freddy]

Yeah it needs a big block.  Really too big for a side block...