ITS HERE!!! Yahoo styled tabbed content

[marsd]

Using Yahoo UI's tabbed content for retrieving latest 5 topics from board(s) (http://blipy.net)

Hi, no offense to Akubear for reposting his SSI function from here (http://www.tinyportal.net/index.php?topic=7596.0), and also giving me the inspiration for expanding your idea. Reason why I used YUI for reusability for the content tabbing was because I have some more features I'd like to incorporate with it.




Creating the tabbed content (demo at http://blipy.net):
1. Create a phpbox anywhere you want it to be, I used upper block visible only on front page.
2. I didn't want to edit the SSI functions php, so I added it into the same php block together with the following code:

Add this to the rest of the javascript in your theme's index.template.php

Code Select Expand


echo '<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/connection/connection-min.js&2.5.2/build/tabview/tabview-min.js"></script>

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("newreleases");
</script>';


This is the SSI function from Akubear that you can put either into SSI.php or together with your phpbox

Code Select Expand

// Recent topic list reversed:   [board] Subject by Poster Date
function ssi_recentTopicsINC($num_recent = 8, $include_boards = null, $output_method = 'echo')
{
global $context, $settings, $scripturl, $txt, $db_prefix, $ID_MEMBER, $user_info, $modSettings;

$include_boards = empty($include_boards) ? array() : $include_boards;

$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.
$request = db_query("
SELECT
m.posterTime, ms.subject, m.ID_TOPIC, m.ID_MEMBER, m.ID_MSG, b.ID_BOARD, b.name AS bName,
IFNULL(mem.realName, m.posterName) AS posterName, " . ($user_info['is_guest'] ? '1 AS isRead, 0 AS new_from' : '
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, 0)) >= m.ID_MSG_MODIFIED AS isRead,
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, -1)) + 1 AS new_from') . ", LEFT(m.body, 384) AS body, m.smileysEnabled, 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 = $ID_MEMBER)
LEFT JOIN {$db_prefix}log_mark_read AS lmr ON (lmr.ID_BOARD = b.ID_BOARD AND lmr.ID_MEMBER = $ID_MEMBER)" : '') . "
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($include_boards) ? '' : "
AND b.ID_BOARD IN (" . implode(', ', $include_boards) . ")") . "
" . ((!empty($modSettings['recycle_enable']) && $modSettings['recycle_board'] > 0) ? "
AND b.ID_BOARD != '$modSettings[recycle_board]'" : '') . "
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__);
$posts = array();
while ($row = mysql_fetch_assoc($request))
{
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileysEnabled'], $row['ID_MSG']), array('<br />' => '
')));
if (strlen($row['body']) > 128)
$row['body'] = substr($row['body'], 0, 128) . '...';

// Censor the subject.
censorText($row['subject']);
censorText($row['body']);

if (empty($modSettings['messageIconChecks_disable']) && !isset($icon_sources[$row['icon']]))
$icon_sources[$row['icon']] = file_exists($settings['theme_dir'] . '/images/post/' . $row['icon'] . '.gif') ? 'images_url' : 'default_images_url';

// Build the array.
$posts[] = array(
'board' => array(
'id' => $row['ID_BOARD'],
'name' => $row['bName'],
'href' => $scripturl . '?board=' . $row['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['bName'] . '</a>'
),
'topic' => $row['ID_TOPIC'],
'poster' => array(
'id' => $row['ID_MEMBER'],
'name' => $row['posterName'],
'href' => empty($row['ID_MEMBER']) ? '' : $scripturl . '?action=profile;u=' . $row['ID_MEMBER'],
'link' => empty($row['ID_MEMBER']) ? $row['posterName'] : '<a href="' . $scripturl . '?action=profile;u=' . $row['ID_MEMBER'] . '">' . $row['posterName'] . '</a>'
),
'subject' => $row['subject'],
'short_subject' => shorten_subject($row['subject'], 25),
'preview' => $row['body'],
'time' => timeformat($row['posterTime']),
'timestamp' => forum_time(true, $row['posterTime']),
'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['isRead']),
'new_from' => $row['new_from'],
'icon' => '<img src="' . $settings[$icon_sources[$row['icon']]] . '/post/' . $row['icon'] . '.gif" align="middle" alt="' . $row['icon'] . '" border="0" />',
);
}
mysql_free_result($request);

// Just return it.
if ($output_method != 'echo' || empty($posts))
return $posts;
}



Actual code that will display the tabbed content.

Code Select Expand


echo '<div id="newreleases" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Releases</em></a></li>
<li><a href="#tab2"><em>Translations</em></a></li>
</ul>             
<div class="yui-content">
    <div><p><font face="Verdana">';

global $context, $scripturl;
$result=ssi_recentTopicsINC(5,array(3),'return');
foreach($result as $my){

  echo ''.$my['link'];
  // is this topic new? (assume they are logged in)
if (!$my['new'] && $context['user']['is_logged'])
echo '
                                                <a href="', $scripturl, '?topic=', $my['topic'], '.from', $my['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '<hr>';
}
echo '</font><a href="http://feeds.feedburner.com/Blipy-Releases"><img src="http://blipy.net/rss.PNG" border="0" alt="Releases RSS" /></a></p></div>';

echo '<div><p><font face="Verdana">';

global $context, $scripturl;
$result=ssi_recentTopicsINC(5,array(2),'return');
foreach($result as $my){

  echo ''.$my['link'];
  // is this topic new? (assume they are logged in)
if (!$my['new'] && $context['user']['is_logged'])
echo '
                                                <a href="', $scripturl, '?topic=', $my['topic'], '.from', $my['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '<hr>';
}
echo '</font><a href="http://feeds.feedburner.com/Blipy-Translations"><img src="http://blipy.net/rss.PNG" border="0" alt="Translations RSS" /></a></p></div>';
echo '</div></div>';




You might also notice I have XML feeds for both these boards. Many thanks to Oldiesmann from SMF for explaining XML/RSS/RSS2. (http://www.simplemachines.org/community/index.php?topic=25009.0)

Here's a really quick breakdown on how you can create your own RSS/RSS2/Atom feed RIGHT FROM SMF itself!

This is how mine looks like: http://blipy.net/index.php/action,.xml/sa,news/board,3/limit,10/type,rss2
First enable xml feeds creation (Admin -> News and Newsletters -> Settings -> Check "Enable XML/RSS News")

Parameters  : Explanation
action,.xml : Switches to the XML output format
sa,news     : Feed will only use the latest updated threads from the board you specify
board,3     : This is the board id that will be output, adding more would be like so: 3,4,5,6,7,etc
limit,10    : Number of latest topics to display
type,rss2   : I prefer using RSS2 feed

[marsd]

Oh, please note my above feature fetches the content only when the entire page is loaded and is not ajax-enabled.

[Heero]

*bump*

I would also be interested in incorporating php snippets into tabs so perhaps it could show recent topics, recent posts, etc etc..

just echo it.

[IchBin]

I think doing PHP into this would require Ajax. I don't know anyone here that knows much about ajax. You'll be lucky if this gets done IMO, so just giving you a heads up.

[FERNSIDEâ„¢]

@ marsd

What am I looking for buddy?
The box named  "Scanlations" ??

[Heero]

I think doing PHP into this would require Ajax. I don't know anyone here that knows much about ajax. You'll be lucky if this gets done IMO, so just giving you a heads up.

No it works without AJAX, I'm creating something out of it by myself using php.
It would be done like this :

Code Select Expand


echo'
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.config.js"></script>
<link href="http://yoursite.com/folder/template_css.css" rel="stylesheet" type="text/css"/>


<div id="spotlight">

      <ul class="headtab-wrapper">
                <li class="headtab" id="headtab-1">
          <a>Your Tab 1</a>
        </li>
                <li class="headtab" id="headtab-2">
          <a>Your Tab 2</a>
        </li>
                <li class="headtab" id="headtab-3">

          <a>Your Tab 3</a>
        </li>
                <li class="headtab" id="headtab-4">
          <a>Your Tab 4</a>
        </li>
      </ul>


      <div class="sl-wrapper">

                <div class="stretcher" id="stretcher-1">
<div class="moduletable">
 
Content 1 Goes here

</div>
</div>
                <div class="stretcher" id="stretcher-2">
          <div class="moduletable">


Content 2 Goes here


</div>
</div>
       
                <div class="stretcher" id="stretcher-3">
<div class="moduletable">

Content 3 Goes here

                </div>
                </div>

                <div class="stretcher" id="stretcher-4">
          <div class="moduletable">

Content 4 Goes here

                </div>
</div>
      <script language="javascript" type="text/javascript">init();</script>
</div>
</div>';


[marsd]

@ Sabre

Yeah it's that Scanlations box there, I was still tinkering with the styles so the tabs graphics aren't there, but you can see it in action when you click on the Releases / Translations links.

[IchBin]

Sure it works if you're echo'ing out some plain old PHP. BUT, what if you put in a call to a function that is located in another file such as recentTopics() ? It has to be processed, which means you have to reload the page or use Ajax to call it. A call like that will work on the default tab that you have set to display when the page loads, but it won't call the code if its not the tab in focus.

[Heero]

Well, actualy that works too.
I'm using boardNews() which is working perfectly

[IchBin]

even if you put it in a different tab than the one that loads on the original page load?