Archive for javascript

notes on admin comment reply

OK, I think I’ve got a cut for the next release of Lorelle’s requested plugin. However, I have not had a chance to test this outside of my own system (where it seems to work fine), and so I would love to have any volunteers help check this out on different installations for anything I’ve overlooked.

The basic mechanics are as follows: I coded up a new link “Reply To” for each post, which you all saw in the last cut. In that one the link goes to the post page’s comment reply section, which at least cut out the intervening pages. At one point I realized the Reply To doesn’t need to be added for comments not yet approved (!) so I cleaned that up (see example).

Anyway, now the Reply To link (see example) opens up a small box with a submit button under the comment using javascript (see example). I added code to the edit-comment.php that now handles a submit query. Each “Reply To” opens up its own box/submit button for the owner’s (see example). On submission, it refreshes, staying on this comment management page (see example). Sorry, no ajaxy goodness at this step, perhaps at the next step if I can figure out how to hook into something similar as to what the approve/unapprove links are doing.

There are a few annoying points left, which I’m not entirely sure how addressable they are. For example, once you approve a post, you’ll need to refresh the page to get its Reply To link, since that part of the code is not hooked into the ajax that WP is using to do this. Ideally I’d like to tap into that, I’ll have to poke around some more. I also have a feeling I should be utilizing the Nonce security model as well.

If you’d like to test this out, please comment! I’d feel better if it were tested out on a few more sites before I release it out in the wild…

del.icio.us:notes on admin comment reply  digg:notes on admin comment reply

Comments (6)

creating another plugin: reply to from admin panel

Lorelle at Wordpress blogged about a plugin (or WordPress feature) she wants: the ability to reply directly to a comment from the Admin comments page. When I spotted that, I thought I’d give it a go, because it seems like a short and sweet plugin to have. My first concept of the design is to add a Reply To link that sends you directly to the proper spot on the post page to put in the reply. This does not resolve the “backing up” problem to return to the original Admin page; I will address that in a second version. For now the problem can be worked around simply by opening the reply to link in a new tab and then closing that tab when returning to the admin page. Since all the major browsers now have tab functionality, this seems reasonable.

However, as I looked through Wordpress’ structure, I realised that the anchor, or name for the post comment section of a post is dependent on the name that the theme’s author gave it. In other words, we don’t always know what the name/id of the reply form (comment form) is for a post in a given theme. Mine is #postcomment; the popular ones seemed to be #respond or some variation of #postcomment (including a #postComment). So the first step I need to take is to guarantee that, if a comment is allowed for the post in question, a particular anchor name exists. We’ll use this snippet to do that:


function add_admin_comment_reply_anchor() {
     <a name="admin_comment_reply_anchor"></a>
}
add_action('comment_form', 'add_admin_comment_reply_anchor');

I played around directly with the wp-admin/edit-comments.php file and confirmed that this works (provided the above anchor name exists):


<a href="<?php echo get_permalink($comment->comment_post_ID); ?>#admin_comment_reply_anchor" title="<?php echo $post_title; ?>"><?php _e('Reply to Post') ?></a> 

I tested this by directly editing my edit-comments.php file. Do not do this at home! This is for professionals only! :-) . My point in doing this was to be sure this approach would even work. There’s roadblocks ahead, though: testing this segment is how I realized that the theme is an issue, needing the above anchor hook. At this point, I’d like to note that it would be easy for WordPress to implement this: all they would need to do is add the automatic anchor as I did, and modify the base edit-comments.php file as above. But since we don’t have that, I’ll proceed with how to do the desired tweaking.

At this point, I looked at two existing plugins: Paged Comment Editing and Commenter Spy. I looked at Paged Comment Editing first since it seemed to be the most similar plugin: a plugin that somehow reworked the edit-comments.php. I was especially hoping to discover a useful WordPress hook to add the Reply To link.

But the more I looked through this plugin the less I liked the overall approach. The problem with it is two fold. First of all it’s directly incompatible with any other plugins that might affect edit-comments.php because it basically takes out edit-comments.php, and regenerates it itself. Second, this approach makes it a potential problem if there’s ever a security patch or even just plain upgrade from WordPress involving this file: the plugin will continue to put out the old code preserved within it. I don’t mean to come off completely criticizing this plugin because it’s very clever with how it reaches in and reworks the file. But I decided I didn’t really want to do it this way.

So it was back to Commenter Spy. This one’s not without its pitfalls either, of course. Since it uses javascript to modify the page output on the fly I had originally rejected it because it won’t work if the user has disabled javascript. However, javascript is ubiquitous enough it seems reasonable to use especially given the alternatives above. The premise of this plugin is as follows: Scan through the DOM of the given page, and do a regular expression substitution in order to sneak in the desired new link. So I put together the following snippets:

Define the desired text (and then escape it; since I’m localizing the term, I have no idea what this might become, so I protect it by escaping the text first).


        $admincommenttext = __('View Post');
        $eadmincommenttext = str_replace('/', '\/', preg_quote($admincommenttext));

Plus, define the Reply To to add in:


        $admincommentreply = __('Reply to Post');
        $eadmincommentreply = str_replace('/', '\/', preg_quote($admincommentreply));

Now define the regular expression to search on:


        $ViewPostBaseURLEscaped = "(<a[ \\n\\r]*href=\"([^\"]*)\"([^>]*)>$eadmincommenttext<\/a>)";

With these pieces in place, I can now use the following snippet of javascript:


<script type="text/javascript">
//<![CDATA[

        var links;
        links = document.getElementsByTagName('p');
        for (var i = 0; i < links.length; i++) {
                var curr;
                curr = links[i];
                curr.innerHTML = curr.innerHTML.replace(/<?php echo $ViewPostBaseURLEscaped; ?>/, "$1 | <a  href=\"$2#admin_comment_reply_anchor\" $3><?php echo $eadmincommentreply; ?></a>");
        }

//]]>
</script>

Now, to wrap this all up and to make sure it gets added into the output HTML of the proper page (edit-comments.php), I put the above code into a function called adminCommentReplyModifyViewPostURLs and hooked it in as follows:


/* activate only on correct page */
if (basename($_SERVER['SCRIPT_FILENAME']) === 'edit-comments.php')
{
        add_action('admin_footer', 'adminCommentReplyModifyViewPostURLs');
}

In the next version of this plugin, I would like to change the Reply To link to open up an inline text area for the reply which then adds it in properly, without ever leaving the page. However, I need to dig in more deeply to see how comments are added, so I’ve left this for a future improvement. It would also mean not seeing the full content of the comment being replied to although presumably the admin of the site has already seen that in the email notification. (Perhaps a button to expand the excerpt to a full version and back?)

You might be wondering how do I do this, how do I know what filters to apply, where to look. The answer is really I don’t. I do know that I can add in actions and filters, and I peruse the WordPress Codex site’s list of hooks for anything that looks like it might do the trick. I also browse the various files in the themes and in the wp-admin directories: I actually found the the comment form hook in the theme’s comment.php file. I also look for plugins that do something similar to what I want to do, or at least knock about in the same general area. In this case, I found two, one of which gave me the bulk of my material.

Thank god for GPL ;-)

OK, at this point, I’m using it on my installation and it seems to work. It is, however still fairly rough. I’ve got the download page set up here.

del.icio.us:creating another plugin: reply to from admin panel  digg:creating another plugin: reply to from admin panel

Comments (25)

flickr api tip

In another quick and simple process, I personalized my About page a little with a bit of flickr html/java that they supply. Of course I’ve worked directly with their API, but in this case that’d be using a sledgehammer, since the good folks at flickr also provide a nice little javascript snippet to randomly select a couple of pictures/thumbnails to drop right in. I went to flickr’s badge generation page (logged in as moi, of course) to get started.

First I chose HTML. This is because I have serious issues with flash, although I admit the boxy thing it comes up with is pretty cool. On the next page, I was asked to choose which pictures to display. I chose to display any of my public photos although it’s possible to choose one or more tags or a particular set from which to select pictures for display. That could be useful for something fairly strong-themed: animal pictures for an animal focused blog, for example. Since I don’t have sexy computer photo shoots, I didn’t use either of those options. In the third step, flickr asked me questions about the layout: usage of buddy icon, number of photos, the size of the photos, and vertical or horizontal (or other, using personal style options) orientations. Finally flickr allowed me to specify colours and background for the snippet and gave me the code, which I dropped into my About page.

From there I made two modifications. The first was to add display:inline; and float:right; attributes to the table wrapper around the pictures so that it would display as I wished on the page. But I also cut out the <style> included with the snippet and put it in my css style file. That last is optional, and possibly not what someone else would want to do because changing the theme could lose the styling in that page. (Of course, I have my own workaround this situation, since I use a common.css that’s independent of theme styling which I accomplish via a private plugin that I should clean up and make available one of these days.)

del.icio.us:flickr  api tip  digg:flickr  api tip

Comments

delicious linkroll api tip

I just discovered a very quick and easy way to have a live list of delicous bookmarks on a Wordpress blog; although this will work anywhere that javascript can be dropped in.

First, I went to Delicious’ javascript generator page. I checked off the options I wanted, including showing the notes that I attach with each entry I make. This resulted in the following javascript (spacing and line breaks added for visibility):


< script type="text/javascript" src="http://del.icio.us/feeds/js/digitalramble?
extended;
title=my%20del.icio.us;
icon=s;
name">< /script>
<noscript><a href="http://del.icio.us/digitalramble">my del.icio.us</a></noscript>

I then opened up my WP’s admin pages, and started a Write->Write Page session (not Write Post). Then I copied the javascript generated by delicious into this page, with the title that I wanted, and saved the page. This now creates a static page (similar to the about page) but which will show my last 15 entries to delicious at any given time.

I tweaked the styles by finding the css styles used by delicious listed on style page, and adding that to my style.css file, with appropriate modifications. For the curious, this is what I wound up using:



.delicious-posts {
        margin: 1em;
        padding: 0.5em;
        font-family: sans-serif;
        font-size: 120%;
}
.delicious-posts ul, .delicious-posts li, .delicious-banner {
        margin: 0;
        padding: 0.25em;
}
.delicious-post {
        border-top: 1px solid #eee;
        padding: 0.25em;
}
.delicious-odd {
        background-color: #f8f8f8;
}
.delicious-posts a:hover {
        text-decoration: underline;
}
.delicious-posts a {
        text-decoration: none;
}

No further need for the plugin I used to use… If I wanted a quick list for the sidebar, I’d go back to the javascript page, and choose something like 5 entries, no notes, no titles or afterwards to make it as short and quick as possible, and then drop that into my sidebar.php file. Easy.

del.icio.us:delicious linkroll api tip  digg:delicious linkroll api tip

Comments

fun with browsers and javascript

Since javascript is a client side implementation (meaning that it is the browser and not the host site (such as is the case with php/perl/other cgi scripting) that actually runs the script) this means I can have endless fun finding out the many ways in which javascript gets completely hosed up.

I mean, take a pretty simple bit of javascripting:
document.getElementById('cleanslate').innerHTML = s;
where s is a nice little list of selectable (checkbox) items in a list to be output.

And then of course, in the html we have:
<span id = "cleanslate"></span>

How much simpler does it get?

Well. It worked beautifully in Firefox.
Didn’t do a single thing in IE6.

And it’s hard to figure out where to even start. In no amount of googling have I found a book, or a faq, or any kind of documentation that extensively details the ways in which Javascript differs from browser to browser. I would think this would be a huge niche. I certainly found many many questions on this stuff. Even if the differences are under constant change, I would still expect at least some online resources to be out there. (Anyone know of any?)

I did find another site that demonstrated a very similar problem: Chameleon but which offered no solution, only the illustration.

After much experimenting, I finally figured out that the issue was really this:


<p>
<span id = "cleanslate"></span>

There is something about the unclosed <p> that IE6 does not like. This actually kind of makes sense — since it’s not closed (yes, I know, slap my hands already), the question is what is the actual DOM? Firefox obviously defaults to something reasonable to handle it, IE6 takes the novel approach of displaying nothing at all. Well the “Sun Java Console” (now there’s a misnomer if there ever was) does come up with the every helpful:
"Unknown run time error on line..."

As an aside: I just gotta love this “Sun Java Console” for its utter uselessness. It’s not even possible to copy and paste the message somewhere for future reference. I can’t make use of IE6 until I close the window. It offers no means of running anything, debugging, tracing, etc. There’s an extension available at Microsoft but even after I jumped through the WGA hoops to download it, when I ran it to install it, it said “No Installation Data available.” It’s particularly annoying after using so many lovely Firefox extensions that enable extensive Javascript debugging.

But here’s the odd part. Removing the <p> altogether fixed IE6. Finishing it off before the opening <span> worked, as well. But enclosing the span within the paragraph did not work. Throughout all these variations, Firefox worked throughout.

Opera, unfortunately, is an entirely different story…! It looks fine, on the first pass. But it’s clearly not actually getting the checkboxed items into its form when the form button on that page is pressed. Ugh.

del.icio.us:fun with browsers and javascript  digg:fun with browsers and javascript

Comments (1)

« Previous entries Next Page » Next Page »

Bad Behavior has blocked 453 access attempts in the last 7 days.