[Trick] Endless topics

[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!

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!


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

Code (find) Select Expand

$context['topic_last_message'] = $topicinfo['id_last_msg'];

Code (add after) Select Expand

$context['html_headers'] .= '
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>';
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) Select Expand

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

Code (add before) Select Expand

<div class="messagearea">

Code (find) Select Expand

echo '
<div class="signature" id="msg_', $message['id'], '_signature">', $message['member']['signature'], '</div>';

Code (add after) Select Expand

$last_alternateclass = $message['alternate'] == 0 ? 'windowbg' : 'windowbg2';

Code (find) Select Expand

</div>
<hr class="post_separator" />';
}

echo '
</form>

Code (replace with) Select Expand

</div>
<hr class="post_separator" />
</div>';
}

echo '
<span id="lastPostFill"></span>
</form>

Code (find) Select Expand

echo '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/topic.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[';

Code (replace with) Select Expand

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();
});
}';


Code (find) Select Expand

echo '
// ]]></script>';

Code (replace with) Select Expand

echo '
// ]]></script>
<span style="position:fixed;bottom:0px" id="fixed_offset"></span>';

Code (find) Select Expand

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'), '
});


Code (replace with) Select Expand

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();


[Robert.]

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.

* emanuele has already a branch whit the code applied

[Suki]

Cool!

* Suki is going to steal this for Breeze!

[Arantor]

Could make a neat plugin for Wedge too, though would have to be done a bit differently, hehe

[emanuele]

* Suki is going to steal this for Breeze!

A THIEF!! POLICE POLICE!!

Feel free of course!

[Aportadordelmix]

Trick, Very Good. But I did not change. What are the changes you make?

[Arantor]

All the changes are documented in the first post of this topic...

[Aportadordelmix]

All the changes are documented in the first post of this topic...

I know. But I made the changes, and I get nothing.

[Arantor]

So it doesn't work for you for some reason, did you edit the right theme file? Any JavaScript errors?

[Aportadordelmix]

I do not know why it appears, may not fully understand how this code.

[Arantor]

Maybe it would help if you answered the questions you were asked in case that information helps someone to help you.

[Aportadordelmix]

It is javascript error. Do not let me use the quick response.

Code Select Expand

javascript::oQuickReply.Swap()

[Arantor]

So you get a JavaScript error. What error? ANY form of JavaScript error will break the quick reply. So what error?

Specifically, what error do you get in the browser? I don't see anywhere that code is directly used normally.

[Aportadordelmix]

This is the error that appears:

Code Select Expand

javascript: oQuickReply.swap ()

That happens to me when I use the quick response.

I am using the example on localhost

[Arantor]

That's not an error. What actually is the error in the console in the browser?

[Aportadordelmix]

That's not an error. What actually is the error in the console in the browser?

You're right. How to prevent that message appears?

[Arantor]

-sigh-

WHAT IS THE ERROR RELATED TO THAT LINE! That is a line of code. It is not an error. What is the error it gives you where it says that line's wrong?

(Note that I can't find that code in any of the changes presented here so it's entirely possible you did it wrong anyway)

[Aportadordelmix]

-sigh-

WHAT IS THE ERROR RELATED TO THAT LINE! That is a line of code. It is not an error. What is the error it gives you where it says that line's wrong?

(Note that I can't find that code in any of the changes presented here so it's entirely possible you did it wrong anyway)

I never said it was a mistake in my last post. In any case, thanks for nothing.