I got a bit bored many times this week, and the bits of time I could get I decided to mess around with some front-end stuff. This quick trick will show you how to implement a cool jQuery animation effect on common controls. This is focused on SMF 2.0.2, but can work with any other SMF version with a minimal amount of effort.
This trick will show you how to create a jQuery fadeout effect when deleting posts or PMs. Let's begin.
Now head into index.template.php in your theme's directory.
If you don't have jQuery accessible already, we are going to add it. If you do, skip this step. Look for,
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
And under it add,
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Now in the same file, find,
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
And under it, place the following function,
function jQueryRemoveMessage(messageInfo) {
if ($ === undefined || !confirm("' . $txt['remove_message'] . '?"))
return false;
var headers = {};
var callback = undefined;
if (messageInfo.messageType == "post") {
headers = {
action : "deletemsg",
topic : messageInfo.topic,
msg : messageInfo.messageId,
"' . $context['session_var'] . '" : "' . $context['session_id'] . '",
xml : 1
};
callback = function(data, textStatus, jqXHR) {
$("#msgBlock" + messageInfo.messageId).fadeOut("slow");
};
} else if (messageInfo.messageType == "pm") {
var pmActions = "pm_actions[" + messageInfo.pmId + "]";
headers = {
action : "pm",
sa : "pmactions",
"pms[]" : messageInfo.pmId,
del_selected : "",
"' . $context['session_var'] . '" : "' . $context['session_id'] . '",
xml : 1
};
callback = function(data, textStatus, jqXHR) {
$("#pmBlock" + messageInfo.pmId).fadeOut("slow");
$("#pmSubjectBlock" + messageInfo.pmId).fadeOut("slow");
};
} // Add more here
// Send off the data!
$.get("index.php", headers, callback);
return true;
}
This function also utilizes jQuery's AJAX features, meaning the controls which will be editted will now use AJAX in order to communicate back to the server. If you wish to add more controls here, add on to the else-ifs. :)
Now we need to modify some buttons and add some new element id's. In the default Curve theme (SMF 2.0.2), the element needed to be faded out have no distinct identifier to them, so to ensure the correct elements are manipulated, this requires us to add some identifiers to the blocks of these elements. This sure would be handy to have by default...
Since this tutorial covers posts and PMs, if you add more controls using this/similar effect, you may need to add a unique identifier as well.
In Display.template.php, search for,
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg', '">
And replace it with,
<div id="msgBlock' . $message['id'] . '" class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg', '">
We have now created a unique identifier for each post block. NOTE: if you are doing this for a custom theme which already uniquely identifies these blocks, simply modify the jQueryRemoveMessage we added earlier!
Next, we must edit the remove button. In the same file, find,
// How about... even... remove it entirely?!
if ($message['can_remove'])
echo '
<li class="remove_button"><a href="', $scripturl, '?action=deletemsg;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['remove_message'], '?\');">', $txt['remove'], '</a></li>';
Replace that with,
// How about... even... remove it entirely?!
if ($message['can_remove'])
echo ($message['id'] != $context['topic_first_message']) ? '
<li class="remove_button"><a href="javascript: void(0);" onclick="return jQueryRemoveMessage({ messageType : \'post\', messageId : ' . $message['id'] . ', topic : ' . $context['current_topic'] . '});">' . $txt['remove'] . '</a></li>' : '
<li class="remove_button"><a href="' . $scripturl . '?action=deletemsg;topic=' . $context['current_topic'] . '.' . $context['start'] . ';msg=' . $message['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" onclick="return confirm(\'' . $txt['remove_message'] . '?\');">' . $txt['remove'] . '</a></li>';
Now posts are finished! You can test this out.
Onto private messages! In PersonalMessage.template.php find,
<tr class="', $next_alternate ? 'windowbg' : 'windowbg2', '">
And replace it with,
<tr id="pmSubjectBlock' . $message['id'] . '" class="', $next_alternate ? 'windowbg' : 'windowbg2', '">
Again, not necessary if the theme you are working with already has an id associated with it, just modify the JS function.
Next, look for (in the template_folder function),
<div class="', $window_class, ' clear">
And replace it with,
<div id="pmBlock' . $message['id'] . '" class="', $window_class, ' clear">
Find,
echo '
<li class="remove_button"><a href="', $scripturl, '?action=pm;sa=pmactions;pm_actions[', $message['id'], ']=delete;f=', $context['folder'], ';start=', $context['start'], $context['current_label_id'] != -1 ? ';l=' . $context['current_label_id'] : '', ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', addslashes($txt['remove_message']), '?\');">', $txt['delete'], '</a></li>';
Replace it with,
echo '
<li class="remove_button"><a href="javascript: void(0);" onclick="return jQueryRemoveMessage({ messageType : \'pm\', pmId : ' . $message['id'] . '});">', $txt['delete'], '</a></li>';
Congratulations, you're done! :)
Nice quality mod. Sad to see that it got no attention.
Quote from: Rich` on January 04, 2013, 10:18:58 PM
Nice quality mod. Sad to see that it got no attention.
It didn't get any replies besides yours, but it was read over 1,400 times :)
Very nice trick, as a theme designer would it be okay if I implement this in my themes?
Quote from: NBK*Twitch on April 06, 2013, 10:36:51 PM
Very nice trick, as a theme designer would it be okay if I implement this in my themes?
Of course! :)
Might as well mention Anthony and or this topic in the theme description too, eh, for his work? :)
Quote from: Labradoodle-360 on April 07, 2013, 01:49:58 AM
Might as well mention Anthony and or this topic in the theme description too, eh, for his work? :)
Ofcourse I always give credit where credit is due :).
doesn't seem very simple to me ! :P then again i'm a newbie when it comes to js/ajax
Im gonna try this sometime today