Dockable Comments: Intelligent DOM Scripting

About a month ago I wrote Browser Elitism and Browser Elitism Part 2. These posts saw fairly high traffic and got quite a few comments. So much so in fact that I didn’t find it very easy to comment properly and address the points that people were making in their comments. A few days after I set out to “solve” that problem, only to find out weeks later that Jonathan Snook had done something similar in his post Experiment with position: fixed.

Cool that we came up with similar ideas at almost the same time. Spooky that we only live about 10 minutes from each other. I love that the fixed comment form was integrated into Jonathan’s 78th redesign. I, on the other hand, am not quite ready for a full redesign, but wanted to implement the functionality right away. So, here it is – dockable comments.

(If you just want to try it out, go straight to the comment form)

Principles and Goals

I had a few guiding principles and goals in mind when I was implementing this functionality:

1. make it easier to comment on other comments using copy and paste
2. maintain my live preview
3. use JavaScript unobtrusively so that those without appropriate JavaScript support maintain their base commenting functionality
4. selective population of controls. That’s what I call using JavaScript to dynamically add elements to the DOM that will only work when JavaScript is on. Its a term of convenience, really, but I think it captures the essence of what we are aiming for.

The CSS

I implemented a few new style rules to make this happen. Unlike the days of old where we dynamically changed CSS style rules one by one, I used pre-defined styles to define a few different “states” for my dockable comment div that I wrapped around the comment box, its label, the dock control and live preview.

I defined a normal state with some default values, an “outlined” state that gives a visual clue as to how much will get docked when you click on the “Dock Comment” link, as well as a “docked” state that defines the CSS that locks the comment form to the left side of the window. My values were specifically chosen to work well with my liquid layout – when docked, my comment div takes a width of 32%, to fit nicely within the left side of my blog where it won’t obscure the content.

1. /* define styles for dockable comment in normal state */
2. div#dockableComment {
3. width: 32em;
4. padding: 0.5em;
5. border: 3px double #f5f5eb;
6. background-color: #f5f5eb;
7. }
8. /* define style for outlined state */
9. div#dockableComment.outlined {
10. border: 3px double #ddd;
11. }
12. /* define styles for docked state */
13. div#dockableComment.docked {
14. padding: 0.5em;
15. border: 3px double #ddd;
16. background-color: #f5f5eb;
17. position: fixed;
18. top: 1em;
19. left: 1em;
20. z-index: 100;
21. }
23. /* feed this style to Opera */
24. div#dockableComment.docked {
25. width: 64%;
26. }
28. /* feed this style to Gecko based browsers */
29. /* uses attribute selectors to look for the class of docked */
30. div#dockableComment[class$=”docked”] {
31. width: 32%;
32. }
34. * html div#dockableComment.docked {
35. width: 68%;
36. }
39. div#dockableComment.docked textarea {
40. width: 96%;
41. border: 1px solid #aaa;
42. }
44. span#dockcontrol {
45. float: right;
46. }
47. /* modify styles for Live Preview */
48. div#dockableComment.docked #TextDisplay {
49. width: 96%;
50. height: 20em;
51. overflow: auto;
52. }
53. /* override some styles for IE */
54. * html div#dockableComment {
55. position: static;
56. }
58. * html div#dockableComment.docked {
59. position: absolute;
60. }

The JavaScript

The final component to add is the JavaScript that controls the changes of state. Again, I wanted to make sure that everything still works when JavaScript is off, or unsupported. I won’t go through line by line, but here are the basics:

First, I want to add an event so that the script runs when the page loads – I used Scott Andrew’s addEvent script. I also need a reference to the dockable comment div that I created.

1. addEvent(window, “load”, dockable_init);
2. var dockable = document.getElementById(‘dockableComment’);

This calls the function dockable_init on page load, so now I need to define that function:

1. function dockable_init() {
2. if (!document.getElementById) return;
3. var dockcontrol = document.getElementById(‘dockcontrol’);
5. if (!dockable || !dockcontrol) return;
7. var docklink = dockcontrol.appendChild(document.createElement(‘a’));
8. docklink.href=”#commentform”;
9. var docktext = docklink.appendChild(document.createTextNode(‘Dock Comment’));
11. docklink.onclick = function() {
12. if (!/docked/i.exec(dockable.className)) {
13. dockable.className += ” docked”;
14. docktext.nodeValue = “Undock Comment”;
15. } else {
16. dockable.className = dockable.className.replace(/docked/g, “”);
17. docktext.nodeValue = “Dock Comment”;
18. }
19. }
20. }

There are a number of basic points to note in this function:

• Line 2 of the function uses DOM capability detection rather than old school DHTML browser sniffing. The code if (!document.getElementById) return; basically says, if the browser doesn’t support document.getElementById, leave the function.
• Line 3 of the function gets a reference to our dock control – where we will dynamically add a link with an href so that we have a link that toggles the state of our dockable comment (seen in lines 7, 8 and 9).
• Line 4 is a safety net: if (!dockable || !dockcontrol) return; If we don’t have a reference to either our control or our dockable comment div, we return and go no further.
• on line 11 we define our function to respond to the click on the dock control link we created with docklink.onclick = function() {

Lines 12 through 18 perform most of the work that needs to be done to switch state, simply by changing the class of the dockable comment div:

• Line 12: if (!/docked/i.exec(dockable.className)) { uses the regular expression engine to see if the class “docked” is found anywhere in the className DOM attribute of the dockable comment div. Note that the DOM attribute className gives you a string that lists the current CSS classes that are defined for that node. This line basically says that if it isn’t already docked, execute the next few lines of code.
• Line 13: dockable.className += " docked"; This appends the string ” docked” to any current classes that already exist for the dockable div. You could also use dockable.className = "docked";, but I prefer to append the class so that you don’t completely override other classes that may be defined on that div now, or in the future.
• Line 14 and 17: toggles the text in the dockcontrol link between “Undock Comment” and “Dock Comment”
• Line 16: in the other case (i.e., when the div is already docked and we want to undock it), instead of simply changing the className to be nothing to return to the normal state, we use the regular expression engine again to replace any instances of “docked” with the empty string “”. Again, I prefer this so that we can maintain any existing classes that we’ve added to that div with other scripts.

That’s it for the basic script. The final script includes the ability to toggle to an “outlined” state by adding the following to the dockable_init function, using the same principles as above. This state occurs when you mouseover or focus on the “Dock Comment” control link. Note the filter that only turns on the outline state when the comment isn’t already docked:

1. docklink.onmouseover = function() {
2. if (/docked/i.exec(dockable.className)) return;
3. dockable.className += ” outlined”;
4. }
6. docklink.onmouseout = function() {
7. if (/docked/i.exec(dockable.className)) return;
8. dockable.className = dockable.className.replace(/outlined/g,””);
9. }
11. docklink.onfocus = docklink.onmouseover;
12. docklink.onblur = docklink.onmouseout;

Finally, I added support for IE since it doesn’t support position: fixed. (C’mon – after I wrote those Browser Elitism articles, you couldn’t possibly have thought I’d leave IE out, could you?) I did this with a function that gets called using the addEvent script again.

1. addEvent(window, “scroll”, calcIEPosition);

And then the calcIEPosition function itself. Note that I’m not 100% sure I like it yet – it isn’t smooth for in IE, and it uses a DOM based filter that I haven’t fully investigated yet, but that I found a while ago. Note that line 2 in the listing below starts a try {...} catch () {...} structure that returns if the DOM function getComputedStyle is not supported. IE doesn’t support it and better browsers do. So, if I get into the catch portion of the structure, I can calculate the offset amount that the IE user has scrolled and position the dockable comment div accordingly.

1. function calcIEPosition() {
2. try {
3. if (getComputedStyle) return;
4. } catch (e) {
6. if( document.documentElement) {
7. topY = document.documentElement.scrollTop;
8. } else {
9. return;
10. }
11. dockable.style.top = topY;
12. }
13. }

Not quite finished

Here is the final version of the script – feel free to use it and/or modify it as you wish. I would appreciate a link back or attribution in the comment of your script, but I won’t require it.

I’m not quite done with it yet, as I’m sure I’ll find some other things that I want to tweak, but there it is – a dockable comment that hopefully makes commenting on blog posts easier.