Skip to main content
Topic: Post javascript question. (Read 15905 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Post javascript question.

Looking  at this:

Code: [Select]
		var ignored_replies = new Array(), ignoring;
var newPosts = XMLDoc.getElementsByTagName('smf')[0].getElementsByTagName('new_posts')[0] ? XMLDoc.getElementsByTagName('smf')[0].getElementsByTagName('new_posts')[0].getElementsByTagName('post') : {length: 0};
var numNewPosts = newPosts.length;

if (numNewPosts != 0)
{
var newPostsHTML = '<span id="new_replies"><' + '/span>';
for (var i = 0; i < numNewPosts; i++)
{
new_replies[new_replies.length] = newPosts[i].getAttribute("id");

ignoring = false;
if (newPosts[i].getElementsByTagName("is_ignored")[0].firstChild.nodeValue != 0)
ignored_replies[ignored_replies.length] = ignoring = newPosts[i].getAttribute("id");

newPostsHTML += '<div class="windowbg' + (++reply_counter % 2 == 0 ? '2' : '') + ' core_posts"><div class="content" id="msg' + newPosts[i].getAttribute("id") + '"><div class="floatleft"><h5>' + txt_posted_by + ': ' + newPosts[i].getElementsByTagName("poster")[0].firstChild.nodeValue + '</h5><span class="smalltext">«&nbsp;<strong>' + txt_on + ':</strong> ' + newPosts[i].getElementsByTagName("time")[0].firstChild.nodeValue + '&nbsp;»</span> <span class="new_posts" id="image_new_' + newPosts[i].getAttribute("id") + '">' + txt_new + '</span></div>';

I want to deprecate all the span class="new_posts" everywhere. There seem to be a lot of them, but they're mostly only used for putting "New" text inside an anchor. This is bloat, since the anchor will do the job nicely without any need for a span inside it, and the span adds nothing to semantics. That means we can trim both markup and CSS (yay!).

The post.js stuff has me a bit hesitant though, since js isn't my forte. I'm not sure what it's doing, since id="image_new_..." doesn't make sense to me (why is there an image to indicate new posts?).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Post javascript question.

Reply #1

Might as well add a related question here. Another tag I'd like to deprecate is the div that wraps the buttonlist class.

Code: [Select]
	// No buttons? No button strip either.
if (empty($buttons))
return;

echo '
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '

Getting rid of it is fine, since the ul is just as good as a wrapper. There aren't many files to go through, so this is an easy one rather than a major revision (much like the span.new_posts).

Again, there's a slight worry about a piece of javascript, this time in topic.js.
Code: [Select]
		// Make sure it can go somewhere.
if (typeof(oButtonStripDisplay) == 'object' && oButtonStripDisplay != null)
oButtonStripDisplay.style.display = "";
else
{
var oNewDiv = document.createElement('div');
var oNewList = document.createElement('ul');

oNewDiv.id = this.opt.sButtonStripDisplay;
oNewDiv.className = this.opt.sButtonStripClass ? this.opt.sButtonStripClass : 'buttonlist floatbottom';

I assume we could just change the tag name there to ul instead of div. If that's gonna work, no worries. I'm perplexed by the floatbottom bit though. That is not valid CSS, so unless it's jQuery or something it's redundant too.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Post javascript question.

Reply #2

 emanuele has no clue. lol

But I post just to try to keep up with Ant's post count. :P
Bugs creator.
Features destroyer.
Template killer.

Re: Post javascript question.

Reply #3

QuoteThe post.js stuff has me a bit hesitant though, since js isn't my forte. I'm not sure what it's doing, since id="image_new_..." doesn't make sense to me (why is there an image to indicate new posts?).
I don't think there is ... thats just a left over name from when we did use the new image ... the important thing is that its creating a unique ID so it can be found again.  As you noted if you start to change markup in the templates, and those templates have associated JS then there is extra work to do to prevent breaking the JS (and having chased quite a few of these down, its not fun)

QuoteThat is not valid CSS, so unless it's jQuery or something it's redundant too.
Its not jQuery, looks like a left over class, maybe 1.1?  Should be able to change the div to ul, but look for where those objects are called (template and js) since it accepts a passed class that presumably ( ::) ) is designed for a div not a ul ... then again it may not be used at all

Re: Post javascript question.

Reply #4

Quote from: Antechinus – The post.js stuff has me a bit hesitant though, since js isn't my forte. I'm not sure what it's doing, since id="image_new_..." doesn't make sense to me (why is there an image to indicate new posts?).

Post preview doesn't reload the page but uses JavaScript. When you hit the preview button, it'll update the Topic Summary part which displays latest replies to the topic you're posting to. To be able to identify the new replies posted to the topic while you are on the post reply page and clicked the preview button, it adds the "new" image to them. However, if you hit the preview button again, that means they won't be new anymore, so it uses those "image_new..." ids to get rid of those "new" images of posts that are no longer new. The code for that is here:

Code: [Select]
				// Remove the new image from old-new replies!
for (i = 0; i < new_replies.length; i++)
document.getElementById(\'image_new_\' + new_replies[i]).style.display = \'none\';


Quote from: Antechinus – Might as well add a related question here. Another tag I'd like to deprecate is the div that wraps the buttonlist class.

Code: [Select]
	// No buttons? No button strip either.
if (empty($buttons))
return;

echo '
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '

Getting rid of it is fine, since the ul is just as good as a wrapper. There aren't many files to go through, so this is an easy one rather than a major revision (much like the span.new_posts).

Again, there's a slight worry about a piece of javascript, this time in topic.js.
Code: [Select]
		// Make sure it can go somewhere.
if (typeof(oButtonStripDisplay) == 'object' && oButtonStripDisplay != null)
oButtonStripDisplay.style.display = "";
else
{
var oNewDiv = document.createElement('div');
var oNewList = document.createElement('ul');

oNewDiv.id = this.opt.sButtonStripDisplay;
oNewDiv.className = this.opt.sButtonStripClass ? this.opt.sButtonStripClass : 'buttonlist floatbottom';

I assume we could just change the tag name there to ul instead of div. If that's gonna work, no worries. I'm perplexed by the floatbottom bit though. That is not valid CSS, so unless it's jQuery or something it's redundant too.

The second bit of JavaScript there is to add the missing container for users without any moderation permission. If a user does not have moderation permission, there won't be any buttons to display for them, so template_button_strip() will return nothing. However, if the user has chosen quick moderation as checkboxes, then they will have one button to display there: deleting selected posts in a topic. What makes this button special is that it is not there when you generate the page HTML but added only after that user selects a post to delete. However, since template_button_strip() returned nothing (meaning did not add <div><ul></ul></div>) you don't have the container to insert that delete selected posts button. floatbottom is not a CSS value or attribute but a class name. That line there assigns 'buttonlist floatbottom' class to the <div> generated by JavaScript. It is so that the divs generated by both template_button_strip() and this piece of JavaScript are the same. I have no idea why that class is assigned to that div but it's still there to this day. If you want to get rid of the <div> there, just make sure the code generates only a <ul> with correct attributes.

Re: Post javascript question.

Reply #5

Ok thanks. I might just try removing the redundant classes where they wont affect anything else, and put off the js-related stuff until later. Will see.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P