Changeset 1169

Timestamp:

09/03/10 16:00:42 (17 months ago)

Author:

zeank

Message:

fixed toggling comments (expand/collapse) (refs #203)

Files:

• HelpIM3/htdocs/functions.js (modified) (4 diffs)

HelpIM3/htdocs/functions.js

@@ -51 +51 @@
     },
 
-    expandAll: function(className) {
-        document.getElementsByClassName(className).forEach(HIM.el.show);
-    },
-
-    colapseAll: function(className) {
-        document.getElementsByClassName(className).forEach(HIM.el.hide);
+    toArray: function(list) {
+        /* some things in javascript look like arrays but aren't
+         * this is to make sure we do have an array after all
+         */
+        var arr = [];
+        if (!list.length) {
+            // it's an object - iterate its properties
+            for (var i in list)
+                if (list.hasOwnProperty(i))
+                    arr.push(list[i]);
+        } else if (list instanceof Array) {
+            // nothing to do
+            return list;
+        } else {
+            for (var i=0; i<list.length; i++)
+                arr.push(list[i]);
+        }
+        return arr;
     },
 
@@ -522 +534 @@
 function unhideCommentInput(id)
 {
-    show(id);
     if (previousHiddenComment && previousHiddenComment != id)
         hide(previousHiddenComment);
+    if (id)
+        show(id);
     previousHiddenComment=id;
+    return false; // stop bubbling
 }
 
+function expandComments(toggleButton) {
+    _toggleComments(
+        toggleButton,
+        function(comment_row) {
+            HIM.el.show(comment_row);
+            toggleButton.innerHTML = '-';
+            toggleButton.title = 'collapse comments';
+        });
+}
+
+function collapseComments(toggleButton) {
+    _toggleComments(
+        toggleButton,
+        function(comment_row) {
+            HIM.el.hide(comment_row);
+            toggleButton.innerHTML = '+';
+            toggleButton.title = 'expand comments';
+        });
+}
+
+function _toggleComments(toggleButton, fun) {
+    /* navigate to comment row like
+     * <tr><td>..</td><td>{toggleButton}</td></tr>
+     * <tr><td>...</td></tr>
+     * <tr>{comment_row}</tr>
+     */
+    var comment_row = 
+        HIM.el.next(
+            HIM.el.next(
+                HIM.el.parentNode(toggleButton, 'tr'),
+                'tr'),
+            'tr');
+    fun(comment_row);
+}
+
+function toggleComments(toggleButton) {
+    if (toggleButton.innerHTML == '+')
+        expandComments(toggleButton);
+    else
+        collapseComments(toggleButton);
+}
 
 HIM.registerHandler('onload', function() {
     // make comments collapsible
 
-    var comments = document.getElementsByClassName('comment_row');
-
-    if (comments.length>0) {
+    var comment_rows = document.getElementsByClassName('comment_row');
+
+    if (comment_rows.length>0) {
         var header = document.createElement('th')
         var linkp = document.createElement('a');
-        linkp.setAttribute('href', 'javascript:HIM.expandAll("comment_row")');
+        linkp.setAttribute('href', '#');
+        linkp.onclick = function() {
+            document.getElementsByClassName('comments_toggleButton').forEach(expandComments);
+            return false;
+        }
         linkp.appendChild(document.createTextNode('+'));
         var linkm = document.createElement('a');
-        linkm.setAttribute('href', 'javascript:HIM.colapseAll("comment_row")');
+        linkm.setAttribute('href', '#');
+        linkm.onclick = function() {
+            document.getElementsByClassName('comments_toggleButton').forEach(collapseComments);
+            return false;
+        }
         linkm.appendChild(document.createTextNode('-'));
         header.appendChild(linkp);
@@ -546 +609 @@
         header.appendChild(linkm);
         HIM.el.firstChild(
-            HIM.el.parentNode(comments[0], 'tbody'),
+            HIM.el.parentNode(comment_rows[0], 'tbody'),
             'tr'
         ).appendChild(header);
     }
-    comments.forEach(
-        function(comment) {
-            var logMessage = HIM.el.prev(HIM.el.prev(comment, 'tr'), 'tr');
+
+    comment_rows.forEach(
+        function(comment_row) {
+            var logMessage = HIM.el.prev(HIM.el.prev(comment_row, 'tr'), 'tr');
             if (!logMessage)
                 return;
 
-            var comment_input_form = 
+            var comment_row_input_form = 
                 HIM.el.firstChild(
                     HIM.el.firstChild(
-                        'input_'+comment.id,
+                        'input_'+comment_row.id,
                         'td'),
                     'form');
 
             logMessage.onmouseover = function() {
-                unhideCommentInput(comment_input_form.id);
+                unhideCommentInput(comment_row_input_form.id);
             }
            
             // create new td with text
             var td = logMessage.appendChild(document.createElement('td'));
+            td.className = 'comments_toggleButton';
             var text = td.appendChild(document.createTextNode('+'));
 
-            // hide comment
-            HIM.el.hide(comment);
+            // hide comment_row
+            HIM.el.hide(comment_row);
 
             // add click handler to new td element
-            td.onclick = function() { 
-                HIM.el.toggle(comment, 
-                              function() {
-                                  td.innerHTML = '-';
-                                  td.title = 'collapse comments';
-                              },
-                              function() {
-                                  td.innerHTML = '+';
-                                  td.title = 'expand comments';
-                              });
+            td.onclick = function() {
+                toggleComments(td);
             };
 
@@ -592 +649 @@
 
             // fix colspan
-            var commentTD = HIM.el.firstChild(comment, 'td');
-            if (commentTD) {
-                commentTD.setAttribute('colspan','4');
+            var comment_rowTD = HIM.el.firstChild(comment_row, 'td');
+            if (comment_rowTD) {
+                comment_rowTD.setAttribute('colspan','4');
             }
         }