Customizing SMF > SMF Coding Discussion

[Trick] Endless topics

(1/13) > >>

emanuele:
Not that I love javascript (au contraire I hate it), but sometimes even only to learn something I find funny do something I don't like.

And so today I tried to put together a trick to create endless topics (i.e. a topic view that once reached the end of the page loads the subsequent posts.

At the moment it has few several limitations, but it works (somehow), so I decided to put it here also to gather ideas and suggestions.

The basic idea I decided to use is pretty simple: instead of having to re-create (that would be the most clean way to do it) the single post template in javascript I decided to actually retrieve the "next" page, extract the posts and inject them into the page.
Hackish, but you should know I'm lazy! :P

And here it is the list of changes.

Note: I tested it on my test forum that is quite a big mess, so I hope I reported all the changes...test it on a test-forum, I don't want to be responsible for anything! :P

First you need jQuery (lazy you know? :P), so Display.php:

--- Code: (find) --- $context['topic_last_message'] = $topicinfo['id_last_msg'];
--- End code ---

--- Code: (add after) --- $context['html_headers'] .= '
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>';
--- End code ---
And that's done. In case you already have it it's not necessary to load it again, if you prefer a local copy use the link you prefer and so on.

Second step Display.template.php:

--- Code: (find) --- <div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg', '">
--- End code ---

--- Code: (add before) --- <div class="messagearea">
--- End code ---


--- Code: (find) --- echo '
<div class="signature" id="msg_', $message['id'], '_signature">', $message['member']['signature'], '</div>';
--- End code ---

--- Code: (add after) --- $last_alternateclass = $message['alternate'] == 0 ? 'windowbg' : 'windowbg2';
--- End code ---


--- Code: (find) --- </div>
<hr class="post_separator" />';
}

echo '
</form>
--- End code ---

--- Code: (replace with) --- </div>
<hr class="post_separator" />
</div>';
}

echo '
<span id="lastPostFill"></span>
</form>
--- End code ---


--- Code: (find) --- echo '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/topic.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[';
--- End code ---

--- Code: (replace with) --- echo '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/topic.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var current_page = ', $context['page_info']['current_page'] - 1, ';
var possible_classes = new Array(\'windowbg\', \'windowbg2\');
var last_class = \'', $last_alternateclass, '\';
var next_class_index = possible_classes[0] == last_class ? 1 : 0;
function checkOffset ()
{
var f_offset = $("#fixed_offset").offset();
var b_offset = $("#lastPost").offset();

if (f_offset.top > b_offset.top)
{
current_page++
if (', $context['total_visible_posts'], ' > current_page * ', $context['messages_per_page'],')
{
smf_retrievePosts(', $context['current_topic'], ', current_page * ', $context['messages_per_page'],');
setTimeout("checkOffset()", 1000);
}
}
else
setTimeout("checkOffset()", 1000);
}
$(document).ready(function () {
checkOffset();
});

function smf_retrievePosts (topic_id, start)
{
var url = smf_prepareScriptUrl(smf_scripturl) + \'topic=\' + topic_id + \'.\' + start;
var new_items = false;

$.get(url, function (data) {
$(data).find(".messagearea").each(function () {
var fillHere = document.getElementById("lastPostFill");
if ($(this).children().hasClass(last_class))
$(this).children().removeClass(last_class, possible_classes[next_class_index]);

last_class = possible_classes[next_class_index];
next_class_index = next_class_index == 1 ? 0 : 1;

setOuterHTML(fillHere, $(this).html() + \'<span id="lastPostFill"></span>\');
new_items = true;
});

if (new_items)
oQuickModify = initQuickModify();
});
}';

--- End code ---


--- Code: (find) --- echo '
// ]]></script>';
--- End code ---

--- Code: (replace with) --- echo '
// ]]></script>
<span style="position:fixed;bottom:0px" id="fixed_offset"></span>';
--- End code ---


--- Code: (find) --- var oQuickModify = new QuickModify({
sScriptUrl: smf_scripturl,
bShowModify: ', $settings['show_modify'] ? 'true' : 'false', ',
iTopicId: ', $context['current_topic'], ',
sTemplateBodyEdit: ', JavaScriptEscape('
<div id="quick_edit_body_container" style="width: 90%">
<div id="error_box" style="padding: 4px;" class="error"></div>
<textarea class="editor" name="message" rows="12" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 100%; min-width: 100%' : 'width: 100%') . '; margin-bottom: 10px;" tabindex="' . $context['tabindex']++ . '">%body%</textarea><br />
<input type="hidden" name="' . $context['session_var'] . '" value="' . $context['session_id'] . '" />
<input type="hidden" name="topic" value="' . $context['current_topic'] . '" />
<input type="hidden" name="msg" value="%msg_id%" />
<div class="righttext">
<input type="submit" name="post" value="' . $txt['save'] . '" tabindex="' . $context['tabindex']++ . '" onclick="return oQuickModify.modifySave(\'' . $context['session_id'] . '\', \'' . $context['session_var'] . '\');" accesskey="s" class="button_submit" />&nbsp;&nbsp;' . ($context['show_spellchecking'] ? '<input type="button" value="' . $txt['spell_check'] . '" tabindex="' . $context['tabindex']++ . '" onclick="spellCheck(\'quickModForm\', \'message\');" class="button_submit" />&nbsp;&nbsp;' : '') . '<input type="submit" name="cancel" value="' . $txt['modify_cancel'] . '" tabindex="' . $context['tabindex']++ . '" onclick="return oQuickModify.modifyCancel();" class="button_submit" />
</div>
</div>'), ',
sTemplateSubjectEdit: ', JavaScriptEscape('<input type="text" style="width: 90%;" name="subject" value="%subject%" size="80" maxlength="80" tabindex="' . $context['tabindex']++ . '" class="input_text" />'), ',
sTemplateBodyNormal: ', JavaScriptEscape('%body%'), ',
sTemplateSubjectNormal: ', JavaScriptEscape('<a href="' . $scripturl . '?topic=' . $context['current_topic'] . '.msg%msg_id%#msg%msg_id%" rel="nofollow">%subject%</a>'), ',
sTemplateTopSubject: ', JavaScriptEscape($txt['topic'] . ': %subject% &nbsp;(' . $txt['read'] . ' ' . $context['num_views'] . ' ' . $txt['times'] . ')'), ',
sErrorBorderStyle: ', JavaScriptEscape('1px solid red'), '
});

--- End code ---

--- Code: (replace with) --- function initQuickModify ()
{
var oQuickModify = new QuickModify({
sScriptUrl: smf_scripturl,
bShowModify: ', $settings['show_modify'] ? 'true' : 'false', ',
iTopicId: ', $context['current_topic'], ',
sTemplateBodyEdit: ', JavaScriptEscape('
<div id="quick_edit_body_container" style="width: 90%">
<div id="error_box" style="padding: 4px;" class="error"></div>
<textarea class="editor" name="message" rows="12" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 100%; min-width: 100%' : 'width: 100%') . '; margin-bottom: 10px;" tabindex="' . $context['tabindex']++ . '">%body%</textarea><br />
<input type="hidden" name="' . $context['session_var'] . '" value="' . $context['session_id'] . '" />
<input type="hidden" name="topic" value="' . $context['current_topic'] . '" />
<input type="hidden" name="msg" value="%msg_id%" />
<div class="righttext">
<input type="submit" name="post" value="' . $txt['save'] . '" tabindex="' . $context['tabindex']++ . '" onclick="return oQuickModify.modifySave(\'' . $context['session_id'] . '\', \'' . $context['session_var'] . '\');" accesskey="s" class="button_submit" />&nbsp;&nbsp;' . ($context['show_spellchecking'] ? '<input type="button" value="' . $txt['spell_check'] . '" tabindex="' . $context['tabindex']++ . '" onclick="spellCheck(\'quickModForm\', \'message\');" class="button_submit" />&nbsp;&nbsp;' : '') . '<input type="submit" name="cancel" value="' . $txt['modify_cancel'] . '" tabindex="' . $context['tabindex']++ . '" onclick="return oQuickModify.modifyCancel();" class="button_submit" />
</div>
</div>'), ',
sTemplateSubjectEdit: ', JavaScriptEscape('<input type="text" style="width: 90%;" name="subject" value="%subject%" size="80" maxlength="80" tabindex="' . $context['tabindex']++ . '" class="input_text" />'), ',
sTemplateBodyNormal: ', JavaScriptEscape('%body%'), ',
sTemplateSubjectNormal: ', JavaScriptEscape('<a href="' . $scripturl . '?topic=' . $context['current_topic'] . '.msg%msg_id%#msg%msg_id%" rel="nofollow">%subject%</a>'), ',
sTemplateTopSubject: ', JavaScriptEscape($txt['topic'] . ': %subject% &nbsp;(' . $txt['read'] . ' ' . $context['num_views'] . ' ' . $txt['times'] . ')'), ',
sErrorBorderStyle: ', JavaScriptEscape('1px solid red'), '
});
return oQuickModify;
}
initQuickModify();

--- End code ---

Doctor Deejay:
Sounds awesome, haven't tried it out yet but it sounds cool :) Thanks for the trick :)

vbgamer45:
Awesome thinking about making a mod?

emanuele:
For 2.1, when jQuery will be available by default. :P

* emanuele has already a branch whit the code applied

Suki:
Cool!

* Suki is going to steal this for Breeze!

Navigation

[0] Message Index

[#] Next page

Go to full version