Use "(function($) { /* some code that uses $ */ })(jQuery)" instead of "$(document).ready(function(){ /* some code that uses $ */ });" to invoke jQuery code.

svn path=/plone.app.discussion/trunk/; revision=40214

CHANGES.txt

@@ -4,6 +4,11 @@ Changelog
 1.0b8 (unreleased)
 ------------------
 
+- Use "(function($) { /* some code that uses $ */ })(jQuery)" instead of
+  "$(document).ready(function(){ /* some code that uses $ */ });" to invoke 
+  jQuery code.
+  [timo]
+
 - Finnish translation added.
   [saffe]
 

plone/app/discussion/browser/javascripts/comments.js

@@ -1,22 +1,22 @@
-/**************************************************************************
+/******************************************************************************
- * Remove all error messages and field values from the form that is passed
+ * 
- * to the function.
+ * jQuery functions for the plone.app.discussion comment viewlet and form.
- **************************************************************************/
+ * 
-function clearForm(form_div) {
+ ******************************************************************************/
-    form_div.find(".error").removeClass("error");
-    form_div.find(".fieldErrorBox").remove();
-    form_div.find("input[type='text']").attr("value", "");
-    form_div.find("textarea").attr("value", "");
-    /* XXX: Clean all additional form extender fields. */
-}
 
      
-/**************************************************************************
+(function ($) {
+	// This unnamed function allows us to use $ inside of a block of code 
+	// without permanently overwriting $.
+	// http://docs.jquery.com/Using_jQuery_with_Other_Libraries
+
+
+    /**************************************************************************
      * Create a reply-to-comment form right beneath the form that is passed to
      * the function. We do this by copying the regular comment form and 
      * adding a hidden in_reply_to field to the form.
      **************************************************************************/
-function createReplyForm(comment_div) {
+    $.createReplyForm = function (comment_div) {
         
         var comment_id = comment_div.attr("id");
     
@@ -51,11 +51,13 @@ function createReplyForm(comment_div) {
         /* Fetch the reply form inside the reply div */
         var reply_form = reply_div.find("form");
     
-    /* Populate the hidden 'in_reply_to' field with the correct comment id */
+        /* Populate the hidden 'in_reply_to' field with the correct comment 
+           id */
         reply_form.find("input[name='form.widgets.in_reply_to']")
                   .val(comment_id);
     
-    /* Add a remove-reply-to-comment Javascript function to remove the form */
+        /* Add a remove-reply-to-comment Javascript function to remove the 
+           form */
         var cancel_reply_button = reply_div.find(".cancelreplytocomment");
         cancel_reply_button.attr("id", comment_id);
     
@@ -68,60 +70,60 @@ function createReplyForm(comment_div) {
     
         /* Show the cancel button in the reply-to-comment form */
         cancel_reply_button.css("display", "inline");
-}
+    }
-
-
-$(document).ready(function () {
 
 
     /**************************************************************************
-     * By default, hide the reply and the cancel button for the regular add
+     * Remove all error messages and field values from the form that is passed
-     * comment form.
+     * to the function.
      **************************************************************************/
-    $(".reply").find("input[name='form.buttons.reply']")
+    $.clearForm = function (form_div) {
-		        .css("display", "none");
+        form_div.find(".error").removeClass("error");
-    $(".reply").find("input[name='form.buttons.cancel']")
+        form_div.find(".fieldErrorBox").remove();
-	            .css("display", "none");
+        form_div.find("input[type='text']").attr("value", "");
+        form_div.find("textarea").attr("value", "");
+        /* XXX: Clean all additional form extender fields. */
+    }
 
+    //#JSCOVERAGE_IF 0
 
     /**************************************************************************
-     * By default, show the reply button only when Javascript is enabled.
+     * Window Load Function: Executes when complete page is fully loaded, 
-     * Otherwise hide it, since the reply functions only work with JS enabled.
+     * including all frames,
      **************************************************************************/  
-    $(".reply-to-comment-button").css("display" , "inline");
+    $(window).load(function () {
 		
-    
+	    /**********************************************************************
-    /**************************************************************************
+	     * If the user has hit the reply button of a reply-to-comment form 
-     * If the user has hit the reply button of a reply-to-comment form (form was 
+	     * (form was submitted with a value for the "in_reply_to" field in the 
-     * submitted with a value for the "in_reply_to" field in the request), 
+	     * request), create a reply-to-comment form right under this comment.
-     * create a reply-to-comment form right under this comment.
+	     **********************************************************************/
-     **************************************************************************/
 	    var post_comment_div = $("#commenting");
 	    var in_reply_to_field = 
 	        post_comment_div.find("input[name='form.widgets.in_reply_to']");
 	    if (in_reply_to_field.val() !== "") {
 	        var current_reply_id = "#" + in_reply_to_field.val();
 	        var current_reply_to_div = $(".discussion").find(current_reply_id);
-        createReplyForm(current_reply_to_div);
+	        $.createReplyForm(current_reply_to_div);
-        clearForm(post_comment_div);
+	        $.clearForm(post_comment_div);
 	    }
 	    	
 	    
-	/**************************************************************************
+		/**********************************************************************
 	     * If the user hits the "reply" button of an existing comment, create a 
 	     * reply form right beneath this comment.
-     **************************************************************************/
+	     **********************************************************************/
 	    $(".reply-to-comment-button").bind("click", function (e) {
 	        var comment_div = $(this).parents().filter(".comment");
-        createReplyForm(comment_div);
+	        $.createReplyForm(comment_div);
-        clearForm(comment_div);
+	        $.clearForm(comment_div);
 	    });
 	
 	
-    /**************************************************************************
+	    /**********************************************************************
 	     * If the user hits the "clear" button of an open reply-to-comment form,
 	     * remove the form and show the "reply" button again.
-     **************************************************************************/
+	     **********************************************************************/
 	    $("#form-buttons-cancel").bind("click", function (e) {
 	        e.preventDefault();
 	        var reply_to_comment_button = $(this).
@@ -140,5 +142,28 @@ $(document).ready(function () {
 	
 	    });
 	
-});
+
+
+	    /**********************************************************************
+	     * By default, hide the reply and the cancel button for the regular add
+	     * comment form.
+	     **********************************************************************/
+	    $(".reply").find("input[name='form.buttons.reply']")
+	                .css("display", "none");
+	    $(".reply").find("input[name='form.buttons.cancel']")
+	                .css("display", "none");
+	
+	
+	    /**********************************************************************
+	     * By default, show the reply button only when Javascript is enabled.
+	     * Otherwise hide it, since the reply functions only work with JS 
+	     * enabled.
+	     **********************************************************************/
+	    $(".reply-to-comment-button").css("display" , "inline");
+	
+	});
+
+    //#JSCOVERAGE_ENDIF
+
+}(jQuery));
  

plone/app/discussion/browser/javascripts/moderation.js

@@ -1,25 +1,24 @@
 
-jq(document).ready(function () {
+(function ($) {
-
 
     /**************************************************************************
      * Delete a single comment.
      **************************************************************************/
-    jq("input[name='form.button.Delete']").click(function (e) {
+    $("input[name='form.button.Delete']").click(function (e) {
         e.preventDefault();
-        var button = jq(this);
+        var button = $(this);
-        var row = jq(this).parent().parent();
+        var row = $(this).parent().parent();
-        var form = jq(row).parents("form");
+        var form = $(row).parents("form");
-        var path = jq(row).find("input:checkbox").attr("value");
+        var path = $(row).find("input:checkbox").attr("value");
         var target = path + "/@@moderate-delete-comment";
-        var comment_id = jq(this).attr("id");
+        var comment_id = $(this).attr("id");
-        jq.ajax({
+        $.ajax({
             type: "GET",
             url: target,
             success: function (msg) {
                 // fade out row
-                jq(row).fadeOut("normal", function () {
+                $(row).fadeOut("normal", function () {
-                    jq(this).remove();
+                    $(this).remove();
                 });
             },
             error: function (msg) {
@@ -32,21 +31,21 @@ jq(document).ready(function () {
     /**************************************************************************
      * Publish a single comment.
      **************************************************************************/
-    jq("input[name='form.button.Publish']").click(function (e) {
+    $("input[name='form.button.Publish']").click(function (e) {
         e.preventDefault();
-        var button = jq(this);
+        var button = $(this);
-        var row = jq(this).parent().parent();
+        var row = $(this).parent().parent();
-        var form = jq(row).parents("form");
+        var form = $(row).parents("form");
-        var path = jq(row).find("input:checkbox").attr("value");
+        var path = $(row).find("input:checkbox").attr("value");
         var target = path + "/@@moderate-publish-comment";
-        jq.ajax({
+        $.ajax({
             type: "GET",
             url: target,
             data: "workflow_action=publish",
             success: function (msg) {
                 // fade out row
-                jq(row).fadeOut("normal", function () {
+                $(row).fadeOut("normal", function () {
-                    jq(this).remove();
+                    $(this).remove();
                 });
             },
             error: function (msg) {
@@ -59,24 +58,25 @@ jq(document).ready(function () {
     /**************************************************************************
      * Bulk actions for comments (delete, publish)
      **************************************************************************/
-    jq("input[name='form.button.BulkAction']").click(function (e) {
+    $("input[name='form.button.BulkAction']").click(function (e) {
         e.preventDefault();
-        var form = jq(this).parents("form");
+        var form = $(this).parents("form");
-        var target = jq(form).attr('action');
+        var target = $(form).attr('action');
-        var params = jq(form).serialize();
+        var params = $(form).serialize();
-        var valArray = jq('input:checkbox:checked');
+        var valArray = $('input:checkbox:checked');
-        var selectField = jq(form).find("[name='form.select.BulkAction']");
+        var selectField = $(form).find("[name='form.select.BulkAction']");
         if (selectField.val() === '-1') {
             // XXX: translate message
             alert("You haven't selected a bulk action. Please select one.");
         } else if (valArray.length === 0) {
             // XXX: translate message
-            alert("You haven't selected any comment for this bulk action. Please select at least one comment.");
+            alert("You haven't selected any comment for this bulk action." +
+			      "Please select at least one comment.");
         } else {
-            jq.post(target, params, function (data) {
+            $.post(target, params, function (data) {
                 valArray.each(function () {
                     /* Remove all selected lines. */
-                    var row = jq(this).parent().parent();
+                    var row = $(this).parent().parent();
                     row.fadeOut("normal", function () {
                         row.remove();
                     });
@@ -91,17 +91,17 @@ jq(document).ready(function () {
     /**************************************************************************
      * Check or uncheck all checkboxes from the batch moderation page.
      **************************************************************************/
-    jq("input[name='check_all']").click(function () {
+    $("input[name='check_all']").click(function () {
-        if (jq(this).val() === 0) {
+        if ($(this).val() === 0) {
-            jq(this).parents("table")
+            $(this).parents("table")
                    .find("input:checkbox")
                    .attr("checked", "checked");
-            jq(this).val("1");
+            $(this).val("1");
         } else {
-            jq(this).parents("table")
+            $(this).parents("table")
                    .find("input:checkbox")
                    .attr("checked", "");
-            jq(this).val("0");
+            $(this).val("0");
         }
     });
 		
@@ -109,11 +109,11 @@ jq(document).ready(function () {
     /**************************************************************************
      * Show full text of a comment in the batch moderation page.
      **************************************************************************/
-    jq(".show-full-comment-text").click(function (e) {    
+    $(".show-full-comment-text").click(function (e) {    
         e.preventDefault();
-        var target = jq(this).attr("href");
+        var target = $(this).attr("href");
-        var td = jq(this).parent();
+        var td = $(this).parent();
-        jq.ajax({
+        $.ajax({
             type: "GET",
             url: target,
             data: "",
@@ -127,4 +127,5 @@ jq(document).ready(function () {
         });        
     });
 
-});
+}(jQuery));
+

plone/app/discussion/tests/javascripts/test_comments.html

@@ -6,22 +6,20 @@
   <head>
     <title>plone.app.discussion comments Test Suite</title>
     
-    <!-- pad js -->
+    <!-- qUnit -->
+    <link rel="stylesheet" href="../qunit/qunit.css" type="text/css" 
+          media="screen" />
+    <script type="text/javascript" src="../qunit/qunit.js"></script>
+	
+    <!-- jQuery -->
+    <script type="text/javascript" src="jquery.js"></script>
+	
+    <!-- plone.app.discussion -->
     <script type="text/javascript" src="../../browser/javascripts/comments.js">
     </script>
 
-    <!-- QUnit -->
-    <link rel="stylesheet" href="../qunit/qunit.css" type=
-          "text/css" media="screen" />
-    <script type="text/javascript" src="../qunit/qunit.js">
-    </script>
-    <!-- Scripts -->
-    <script type="text/javascript" src="jquery.js">
-    </script>
-
     <!-- Tests -->
-    <script type="text/javascript" src="test_comments.js">
+    <script type="text/javascript" src="test_comments.js"></script>
-    </script>
 
   </head>
 

plone/app/discussion/tests/javascripts/test_comments.js

@@ -115,26 +115,24 @@ $(document).ready(function () {
 	test("Create a comment reply form.", function() {
 	    expect(2);
 	    var comment_div = $("#1282720906349675");
-		var reply_button = comment_div.find(".reply-to-comment-button");
+		var reply_button = comment_div.children(".reply-to-comment-button");
-		// Hit the reply button
+	    $.createReplyForm(comment_div);
-		reply_button.trigger("click");
+	    var reply_form = comment_div.children(".reply");
-	    createReplyForm(comment_div);
+	    ok(reply_form.find("input[name='form.widgets.in_reply_to']"), "Reply form has been copied");
-	    var reply_form = comment_div.find(".reply");
-	    ok(reply_form, "Reply form has been copied");
 	    same(reply_form.find("input[name='form.widgets.in_reply_to']").val(), "1282720906349675", "The reply for should have the id of the comment in the in_reply_to field");
 	});
 	
 	test("Clear all form values from a form.", function() {
 	    // Create a reply form with some values
 	    var comment_div = $("#1282720906349675");
-	    createReplyForm(comment_div);
+	    $.createReplyForm(comment_div);
 	    var reply_form = comment_div.find(".reply");
 	    var author = reply_form.find("input[name='form.widgets.author']");
 	    var text = comment_div.find("input[name='form.widgets.text']");
 	    author.val("my author");
 	    text.val("my text");
 	    // Call the clearForm function to clear the form
-	    clearForm(comment_div);
+	    $.clearForm(comment_div);
 	    // Check if all form fields have been cleared
 	    var author = comment_div.find("input[name='form.widgets.author']");
 	    var text = comment_div.find("input[name='form.widgets.text']");