#11801 - Restricted Font Size Input To Only Valid Entries

src/htmlContent/themes-settings.html

@@ -30,7 +30,7 @@ <h1 class="dialog-title">{{Strings.THEMES_SETTINGS}}</h1>
             <div class="control-group">
                 <label class="control-label">{{Strings.FONT_SIZE}}:</label>
                 <div class="controls">
-                    <input type="text" data-target="fontSize" value="{{settings.fontSize}}">
+                    <input type="text" pattern="{{settings.validFontSizeRegExp}}" data-target="fontSize" value="{{settings.fontSize}}">
                 </div>
             </div>
 
@@ -44,6 +44,6 @@ <h1 class="dialog-title">{{Strings.THEMES_SETTINGS}}</h1>
     </div>
     <div class="modal-footer">
         <button class="dialog-button btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
-        <button class="dialog-button btn primary" data-button-id="save">{{Strings.DONE}}</button>
+        <button class="dialog-button btn primary" id="theme-settings-done-btn" data-button-id="save">{{Strings.DONE}}</button>
     </div>
 </div>

src/view/ThemeSettings.js

@@ -68,6 +68,7 @@ define(function (require, exports, module) {
 
         result.fontFamily = ViewCommandHandlers.getFontFamily();
         result.fontSize   = ViewCommandHandlers.getFontSize();
+        result.validFontSizeRegExp = ViewCommandHandlers.validFontSizeRegExp;
         return result;
     }
 
@@ -100,10 +101,25 @@ define(function (require, exports, module) {
                 var attr = $target.attr("data-target");
                 newSettings[attr] = $target.is(":checked");
             })
-            .on("input", "[data-target]:text", function () {
-                var $target = $(this);
-                var attr = $target.attr("data-target");
-                newSettings[attr] = $target.val();
+            .on("input", "[data-target='fontSize']", function () {
+                var target = this;
+                var targetValue = $(this).val();
+                var $btn = $("#theme-settings-done-btn")[0];
+
+                // Make sure that the font size is expressed in terms
+                // we can handle (px or em). If not, 'done' button is
+                // disabled until input has been corrected.
+
+                if (target.checkValidity() === true) {
+                    $btn.disabled = false;
+                    newSettings["fontSize"] = targetValue;
+                } else {
+                    $btn.disabled = true;
+                }
+            })
+            .on("input", "[data-target='fontFamily']", function () {
+                var targetValue = $(this).val();
+                newSettings["fontFamily"] = targetValue;
             })
             .on("change", "select", function () {
                 var $target = $(":selected", this);
@@ -126,7 +142,7 @@ define(function (require, exports, module) {
                         // Figure out if the setting is in the ViewCommandHandlers, which means it is
                         // a font setting
                         setterFn = "set" + setting[0].toLocaleUpperCase() + setting.substr(1);
-                        if (typeof ViewCommandHandlers[setterFn] === 'function') {
+                        if (typeof ViewCommandHandlers[setterFn] === "function") {
                             ViewCommandHandlers[setterFn](newSettings[setting]);
                         }
                     }

src/view/ViewCommandHandlers.js

@@ -45,7 +45,13 @@ define(function (require, exports, module) {
         _                   = require("thirdparty/lodash");
 
     var prefs = PreferencesManager.getExtensionPrefs("fonts");
-
+
+
+    /**
+     * Font sizes should be validated by this regexp
+     */
+    var validFontSizeRegExpStr = "^([0-9]+)?(\\.)?([0-9]+)(px|em)$";
+    // Need RegExp as a string to be exported for use with HTML5 pattern attribute
 
     /**
      * @private
@@ -295,16 +301,18 @@ define(function (require, exports, module) {
      * @param {number} adjustment  Negative number to make the font smaller; positive number to make it bigger
      * @return {boolean} true if adjustment occurred, false if it did not occur
      */
-    function _adjustFontSize(adjustment) {
-        var fsStyle   = prefs.get("fontSize"),
-            validFont = /^[\d\.]+(px|em)$/;
-
-        // Make sure that the font size is expressed in terms we can handle (px or em). If not, simply bail.
-        if (fsStyle.search(validFont) === -1) {
+     function _adjustFontSize(adjustment) {
+        var fsStyle    = prefs.get("fontSize");
+        var validFontSizeRegExp = new RegExp(validFontSizeRegExpStr);
+
+        // Make sure that the font size is expressed in terms we can
+        // handle (px or em). If not, simply bail.
+
+         if (fsStyle.search(validFontSizeRegExp) === -1) {
             return false;
         }
 
-        // Guaranteed to work by the validation above.
+        // Guaranteed to work by validation above.
         var fsUnits = fsStyle.substring(fsStyle.length - 2, fsStyle.length),
             delta   = fsUnits === "px" ? 1 : 0.1,
             fsOld   = parseFloat(fsStyle.substring(0, fsStyle.length - 2)),
@@ -532,7 +540,6 @@ define(function (require, exports, module) {
     // Update UI when Brackets finishes loading
     AppInit.appReady(init);
 
-
     EventDispatcher.makeEventDispatcher(exports);
 
     exports.restoreFontSize = restoreFontSize;
@@ -541,4 +548,5 @@ define(function (require, exports, module) {
     exports.setFontSize     = setFontSize;
     exports.getFontFamily   = getFontFamily;
     exports.setFontFamily   = setFontFamily;
-});
+    exports.validFontSizeRegExp = validFontSizeRegExpStr;
+});