Merge pull request #3689 from WebsiteDeveloper/Issue-3338

Replaced toggleClass with add/removeClass where appropriate

Author: peterflynn

src/command/Menus.js

@@ -34,7 +34,8 @@ define(function (require, exports, module) {
         KeyBindingManager   = require("command/KeyBindingManager"),
         StringUtils         = require("utils/StringUtils"),
         CommandManager      = require("command/CommandManager"),
-        PopUpManager        = require("widgets/PopUpManager");
+        PopUpManager        = require("widgets/PopUpManager"),
+        ViewUtils           = require("utils/ViewUtils");
 
     /**
      * Brackets Application Menu Constants
@@ -694,13 +695,7 @@ define(function (require, exports, module) {
                 }
             });
         } else {
-            // Note, checked can also be undefined, so we explicitly check
-            // for truthiness and don't use toggleClass().
-            if (checked) {
-                $(_getHTMLMenuItem(this.id)).addClass("checked");
-            } else {
-                $(_getHTMLMenuItem(this.id)).removeClass("checked");
-            }
+            ViewUtils.toggleClass($(_getHTMLMenuItem(this.id)), "checked", checked);
         }
     };
 
@@ -717,7 +712,7 @@ define(function (require, exports, module) {
                 }
             });
         } else {
-            $(_getHTMLMenuItem(this.id)).toggleClass("disabled", !this._command.getEnabled());
+            ViewUtils.toggleClass($(_getHTMLMenuItem(this.id)), "disabled", !this._command.getEnabled());
         }
     };
 

src/editor/MultiRangeInlineEditor.js

@@ -208,14 +208,14 @@ define(function (require, exports, module) {
         var $previousItem = (this._selectedRangeIndex >= 0) ? this._ranges[this._selectedRangeIndex].$listItem : null;
 
         if ($previousItem) {
-            $previousItem.toggleClass("selected", false);
+            $previousItem.removeClass("selected");
         }
 
         this._selectedRangeIndex = newIndex;
 
         var $rangeItem = this._ranges[this._selectedRangeIndex].$listItem;
 
-        this._ranges[this._selectedRangeIndex].$listItem.toggleClass("selected", true);
+        this._ranges[this._selectedRangeIndex].$listItem.addClass("selected");
 
         // Remove previous editors
         this.editors.forEach(function (editor) {

src/project/WorkingSetView.js

@@ -321,9 +321,8 @@ define(function (require, exports, module) {
 
         // Set icon's class
         if ($fileStatusIcon) {
-            // cast to Boolean needed because toggleClass() distinguishes true/false from truthy/falsy
-            $fileStatusIcon.toggleClass("dirty", Boolean(isDirty));
-            $fileStatusIcon.toggleClass("can-close", Boolean(canClose));
+            ViewUtils.toggleClass($fileStatusIcon, "dirty", isDirty);
+            ViewUtils.toggleClass($fileStatusIcon, "can-close", canClose);
         }
     }
 
@@ -336,8 +335,7 @@ define(function (require, exports, module) {
     function _updateListItemSelection(listItem, selectedDoc) {
         var shouldBeSelected = (selectedDoc && $(listItem).data(_FILE_KEY).fullPath === selectedDoc.file.fullPath);
 
-        // cast to Boolean needed because toggleClass() distinguishes true/false from truthy/falsy
-        $(listItem).toggleClass("selected", Boolean(shouldBeSelected));
+        ViewUtils.toggleClass($(listItem), "selected", shouldBeSelected);
     }
 
     function isOpenAndDirty(file) {

src/search/FindReplace.js

@@ -40,7 +40,8 @@ define(function (require, exports, module) {
         StringUtils         = require("utils/StringUtils"),
         Editor              = require("editor/Editor"),
         EditorManager       = require("editor/EditorManager"),
-        ModalBar            = require("widgets/ModalBar").ModalBar;
+        ModalBar            = require("widgets/ModalBar").ModalBar,
+        ViewUtils           = require("utils/ViewUtils");
 
     var modalBar,
         isFindFirst = false;
@@ -221,7 +222,7 @@ define(function (require, exports, module) {
                 var foundAny = findNext(editor, rev);
 
                 if (modalBar) {
-                    getDialogTextField().toggleClass("no-results", !foundAny);
+                    ViewUtils.toggleClass(getDialogTextField(), "no-results", !foundAny);
                 }
             });
             isFindFirst = false;

src/search/QuickOpen.js

@@ -51,7 +51,8 @@ define(function (require, exports, module) {
         LanguageManager     = require("language/LanguageManager"),
         KeyEvent            = require("utils/KeyEvent"),
         ModalBar            = require("widgets/ModalBar").ModalBar,
-        StringMatch         = require("utils/StringMatch");
+        StringMatch         = require("utils/StringMatch"),
+        ViewUtils           = require("utils/ViewUtils");
 
 
     /** @type Array.<QuickOpenPlugin> */
@@ -402,8 +403,9 @@ define(function (require, exports, module) {
     QuickNavigateDialog.prototype._handleResultsReady = function (e, results) {
         // Give visual clue when there are no results (unless we're in "Go To Line" mode, where there
         // are never results, or we're in file search mode and waiting for the index to get rebuilt)
-        var isNoResults = (results.length === 0 && (fileList || currentPlugin) && !this._isValidLineNumberQuery(this.$searchField.val()));
-        this.$searchField.toggleClass("no-results", Boolean(isNoResults));
+        var hasNoResults = (results.length === 0 && (fileList || currentPlugin) && !this._isValidLineNumberQuery(this.$searchField.val()));
+        
+        ViewUtils.toggleClass(this.$searchField, "no-results", hasNoResults);
     };
 
     /**

src/utils/ViewUtils.js

@@ -154,6 +154,20 @@ define(function (require, exports, module) {
         $displayElement.off("contentChanged.scroller-shadow");
     }
 
+    /**
+     * Utility function to replace jQuery.toggleClass when used with the second argument, which needs to be a true boolean for jQuery
+     * @param {!jQueryObject} $domElement The jQueryObject to toggle the Class on
+     * @param {!string} className Class name or names (separated by spaces) to toggle
+     * @param {!boolean} addClass A truthy value to add the class and a falsy value to remove the class
+     */
+    function toggleClass($domElement, className, addClass) {
+        if (addClass) {
+            $domElement.addClass(className);
+        } else {
+            $domElement.removeClass(className);
+        }
+    }
+    
     /** 
      * Within a scrolling DOMElement, creates and positions a styled selection
      * div to align a single selected list item from a ul list element.
@@ -202,8 +216,8 @@ define(function (require, exports, module) {
 
             $selectionTriangle.css("top", triangleTop);
             $selectionTriangle.css("left", $sidebar.width() - $selectionTriangle.outerWidth());
-            $selectionTriangle.toggleClass("triangle-visible", showTriangle);
-            
+            toggleClass($selectionTriangle, "triangle-visible", showTriangle);
+                
             var triangleClipOffsetYBy = Math.floor((selectionMarkerHeight - triangleHeight) / 2),
                 triangleBottom = triangleTop + triangleHeight + triangleClipOffsetYBy;
 
@@ -351,4 +365,5 @@ define(function (require, exports, module) {
     exports.sidebarList             = sidebarList;
     exports.scrollElementIntoView   = scrollElementIntoView;
     exports.getFileEntryDisplay     = getFileEntryDisplay;
+    exports.toggleClass             = toggleClass;
 });