From 508e38f8d9c46de496065e334c009709420c501d Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sun, 5 Mar 2017 15:15:01 -0800 Subject: [PATCH 01/17] #7723 - Beginning to put together patch --- .../Getting Started/coloreditortesting.css | 3 ++ .../default/InlineColorEditor/ColorEditor.js | 49 +++++++++++++++++-- .../ColorEditorTemplate.html | 1 + src/nls/root/strings.js | 1 + src/utils/ColorUtils.js | 4 +- 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 samples/root/Getting Started/coloreditortesting.css diff --git a/samples/root/Getting Started/coloreditortesting.css b/samples/root/Getting Started/coloreditortesting.css new file mode 100644 index 00000000000..e818c75836b --- /dev/null +++ b/samples/root/Getting Started/coloreditortesting.css @@ -0,0 +1,3 @@ +#object { + border: 1px solid #FFAACC 0xFFAACC; +} \ No newline at end of file diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 79d1dee616e..787c9646259 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -64,8 +64,31 @@ define(function (require, exports, module) { this._handleHueDrag = this._handleHueDrag.bind(this); this._handleSelectionFieldDrag = this._handleSelectionFieldDrag.bind(this); - this._color = tinycolor(color); + // + //STYLING IS MESSY AND OUT OF ORDER ONLY UNTIL I GET THE BELOW WORKING: + var that = this; + //MUST CONVERT 0X TO HEX6 NOTATION AND BACK IN ORDER TO BE ABLE TO USE COLOR W/ TINYCOLOR(COLOR). TINYCOLOR DOESN'T SUPPORT 0x NOTATION! + function checkIf0xNotation(color,that){ + if((/0x/).test(color)){ //Is input in 0x Notation? + //IF YES, THEN CHANGE/UPDATE SETTINGS: + var thatColor = color.replace("0x","#") //CONVERT 0x TO HEX6, ie 0xFFAACC => #FFAACC + var that_Color = tinycolor(thatColor); //SWAPPED COLOR OUT TO RETURN RGBA VALUES INSTEAD OF _r=0, _g=0, etc. + that_Color._originalInput = that._originalColor; //RESTORE HEX6 TO 0x NOTATION INPUT FOR O.G. COLOR INPUT + that_Color._format = "0x"; //CHANGE _FORMAT TO '0x' SO THAT RESULT WORKS WITH .getFormat() et al; + return that_Color; //EXIT + }else{ + return tinycolor(color); //SIMPLY RETURN AS USUAL IF NOT + } + + } + this._originalColor = color; + this._color = checkIf0xNotation(color,this); + //console.log(this._color); + //output => tinycolor {_originalInput: "#e282a8", _r: 255, _g: 170, _b: 204, _a: 1…} -- THIS WORKS NOW, EXCEPT STILL DOES NOT CHANGE COLOR SWATCH OR MOVE COLOR SELECTOR BECAUSE SWATCHES ARE 0x NOTATION + // + // + this._redoColor = null; this._isUpperCase = PreferencesManager.get("uppercaseColors"); PreferencesManager.on("change", "uppercaseColors", function () { @@ -77,6 +100,7 @@ define(function (require, exports, module) { this.$rgbaButton = this.$element.find(".rgba"); this.$hexButton = this.$element.find(".hex"); this.$hslButton = this.$element.find(".hsla"); + this.$0xButton = this.$element.find(".0x"); this.$currentColor = this.$element.find(".current-color"); this.$originalColor = this.$element.find(".original-color"); this.$selection = this.$element.find(".color-selection-field"); @@ -88,9 +112,15 @@ define(function (require, exports, module) { this.$opacitySlider = this.$element.find(".opacity-slider"); this.$opacitySelector = this.$element.find(".opacity-slider .selector-base"); this.$swatches = this.$element.find(".swatches"); + console.log(this.$swatches); + console.log("-------------") + //ERROR: INNERHTML OF SWATCH FOR '0xFFAACC" = "
" + //SHOULD CONVERT TO HEX // Create quick-access color swatches this._addSwatches(swatches); + console.log(swatches) + console.log("------") // Attach event listeners to main UI elements this._addListeners(); @@ -137,6 +167,7 @@ define(function (require, exports, module) { this._bindColorFormatToRadioButton("rgba"); this._bindColorFormatToRadioButton("hex"); this._bindColorFormatToRadioButton("hsla"); + this._bindColorFormatToRadioButton("0x"); this._bindInputHandlers(); @@ -228,6 +259,9 @@ define(function (require, exports, module) { case "hsl": this.$buttonList.find(".hsla").parent().addClass("selected"); break; + case "0x": + this.$buttonList.find(".0x").parent().addClass("selected"); + break; } }; @@ -254,6 +288,9 @@ define(function (require, exports, module) { newColor = colorObject.toHexString(); self._hsv.a = 1; break; + case "0x": + newColor = colorObject.toHexString(); + newColor.replace("#","0x"); } // We need to run this again whenever RGB/HSL/Hex conversions @@ -407,8 +444,9 @@ define(function (require, exports, module) { */ ColorEditor.prototype.setColorAsHsv = function (hsv) { var colorVal, newColor, - oldFormat = tinycolor(this.getColor()).getFormat(); - + oldFormat = tinycolor(this.getColor()).getFormat() || "0x"; + //IF UNDETECTABLE VIA TINYCOLORS .getFormat(), THEN FORMAT IS OF '0x' NOTATION + // Set our state to the new color $.extend(this._hsv, hsv); newColor = tinycolor(this._hsv); @@ -427,6 +465,9 @@ define(function (require, exports, module) { case "name": colorVal = this._hsv.a < 1 ? newColor.toRgbString() : newColor.toHexString(); break; + case "0x": + colorVal = newColor.toHexString().to0xString(); + //NEED TO IMPLEMENT .to0xString() method } colorVal = this._isUpperCase ? colorVal.toUpperCase() : colorVal; this._commitColor(colorVal, false); @@ -709,4 +750,4 @@ define(function (require, exports, module) { }); exports.ColorEditor = ColorEditor; -}); +}); \ No newline at end of file diff --git a/src/extensions/default/InlineColorEditor/ColorEditorTemplate.html b/src/extensions/default/InlineColorEditor/ColorEditorTemplate.html index 60566a8631e..eda86a7aa6d 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditorTemplate.html +++ b/src/extensions/default/InlineColorEditor/ColorEditorTemplate.html @@ -27,6 +27,7 @@
  • RGBa
  • Hex
  • HSLa
    • +
  • 0x
    • diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 6e15cfaf9f8..381c8baf044 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -651,6 +651,7 @@ define({ "COLOR_EDITOR_RGBA_BUTTON_TIP" : "RGBa Format", "COLOR_EDITOR_HEX_BUTTON_TIP" : "Hex Format", "COLOR_EDITOR_HSLA_BUTTON_TIP" : "HSLa Format", + "COLOR_EDITOR_0X_BUTTON_TIP" : "Hex (0x) Format", "COLOR_EDITOR_USED_COLOR_TIP_SINGULAR" : "{0} (Used {1} time)", "COLOR_EDITOR_USED_COLOR_TIP_PLURAL" : "{0} (Used {1} times)", diff --git a/src/utils/ColorUtils.js b/src/utils/ColorUtils.js index cacca39948b..12de3f3ebce 100644 --- a/src/utils/ColorUtils.js +++ b/src/utils/ColorUtils.js @@ -37,13 +37,13 @@ define(function (require, exports, module) { /** * Regular expression that matches reasonably well-formed colors in hex format (3 or 6 digits), - * rgb()/rgba() function format, hsl()/hsla() function format, + * rgb()/rgba() function format, hsl()/hsla() function format, 0x notation format, * or color name format according to CSS Color Module Level 3 (http://www.w3.org/TR/css3-color/) * or "rebeccapurple" from CSS Color Module Level 4. * @const @type {RegExp} */ // use RegExp.source of the RegExp literal to avoid doubled backslashes - var COLOR_REGEX = new RegExp(/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|\brgb\(\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*\)|\brgb\(\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*\)|\brgba\(\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\brgba\(\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\bhsl\(\s*(?:[0-9]{1,3})\b\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:[0-9]{1,2}|100)\b%\s*\)|\bhsla\(\s*(?:[0-9]{1,3})\b\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\b/.source + COLOR_NAMES.join("\\b|\\b") + "\\b", "gi"); + var COLOR_REGEX = new RegExp(/0x([a-f0-9]{6})\b|#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|\brgb\(\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*\)|\brgb\(\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*\)|\brgba\(\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:[0-9]{1,2}|1[0-9]{2}|2[0-4][0-9]|25[0-5])\b\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\brgba\(\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:[0-9]{1,2}%|100%)\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\bhsl\(\s*(?:[0-9]{1,3})\b\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:[0-9]{1,2}|100)\b%\s*\)|\bhsla\(\s*(?:[0-9]{1,3})\b\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:[0-9]{1,2}|100)\b%\s*,\s*(?:1|1\.0|0|0?\.[0-9]{1,3})\s*\)|\b/.source + COLOR_NAMES.join("\\b|\\b") + "\\b", "gi"); /* * Adds a color swatch to code hints where this is supported. From 84f7863b933923f0ba734f03656a509daf77879f Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 6 Mar 2017 17:04:47 -0800 Subject: [PATCH 02/17] #7723 - Removed my test CSS document from build --- samples/root/Getting Started/coloreditortesting.css | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 samples/root/Getting Started/coloreditortesting.css diff --git a/samples/root/Getting Started/coloreditortesting.css b/samples/root/Getting Started/coloreditortesting.css deleted file mode 100644 index e818c75836b..00000000000 --- a/samples/root/Getting Started/coloreditortesting.css +++ /dev/null @@ -1,3 +0,0 @@ -#object { - border: 1px solid #FFAACC 0xFFAACC; -} \ No newline at end of file From bd18fc1a99b01ba10017e22cc152c7d0ed57279a Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 6 Mar 2017 17:27:13 -0800 Subject: [PATCH 03/17] #7723 - Added missing semicolons --- .../default/InlineColorEditor/ColorEditor.js | 12 ++++++------ src/utils/ColorUtils.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 787c9646259..734f6c6e274 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -71,7 +71,7 @@ define(function (require, exports, module) { function checkIf0xNotation(color,that){ if((/0x/).test(color)){ //Is input in 0x Notation? //IF YES, THEN CHANGE/UPDATE SETTINGS: - var thatColor = color.replace("0x","#") //CONVERT 0x TO HEX6, ie 0xFFAACC => #FFAACC + var thatColor = color.replace("0x","#"); //CONVERT 0x TO HEX6, ie 0xFFAACC => #FFAACC var that_Color = tinycolor(thatColor); //SWAPPED COLOR OUT TO RETURN RGBA VALUES INSTEAD OF _r=0, _g=0, etc. that_Color._originalInput = that._originalColor; //RESTORE HEX6 TO 0x NOTATION INPUT FOR O.G. COLOR INPUT that_Color._format = "0x"; //CHANGE _FORMAT TO '0x' SO THAT RESULT WORKS WITH .getFormat() et al; @@ -113,14 +113,14 @@ define(function (require, exports, module) { this.$opacitySelector = this.$element.find(".opacity-slider .selector-base"); this.$swatches = this.$element.find(".swatches"); console.log(this.$swatches); - console.log("-------------") + console.log("-------------"); //ERROR: INNERHTML OF SWATCH FOR '0xFFAACC" = "
    " //SHOULD CONVERT TO HEX // Create quick-access color swatches this._addSwatches(swatches); - console.log(swatches) - console.log("------") + console.log(swatches); + console.log("------"); // Attach event listeners to main UI elements this._addListeners(); @@ -444,8 +444,8 @@ define(function (require, exports, module) { */ ColorEditor.prototype.setColorAsHsv = function (hsv) { var colorVal, newColor, - oldFormat = tinycolor(this.getColor()).getFormat() || "0x"; - //IF UNDETECTABLE VIA TINYCOLORS .getFormat(), THEN FORMAT IS OF '0x' NOTATION + oldFormat = tinycolor(this.getColor()).getFormat(); //|| "0x"; + //IF STILL UNDETECTABLE VIA TINYCOLOR .getFormat(), METHOD, THEN FORMAT IS SET TO '0x' NOTATION // Set our state to the new color $.extend(this._hsv, hsv); diff --git a/src/utils/ColorUtils.js b/src/utils/ColorUtils.js index 12de3f3ebce..04000684567 100644 --- a/src/utils/ColorUtils.js +++ b/src/utils/ColorUtils.js @@ -37,7 +37,7 @@ define(function (require, exports, module) { /** * Regular expression that matches reasonably well-formed colors in hex format (3 or 6 digits), - * rgb()/rgba() function format, hsl()/hsla() function format, 0x notation format, + * rgb()/rgba() function format, hsl()/hsla() function format, 0x notation format * or color name format according to CSS Color Module Level 3 (http://www.w3.org/TR/css3-color/) * or "rebeccapurple" from CSS Color Module Level 4. * @const @type {RegExp} From 05ee335ea588616e7952f0219a8706106cbe89c3 Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 6 Mar 2017 17:31:32 -0800 Subject: [PATCH 04/17] #7723 - Corrected comment --- src/extensions/default/InlineColorEditor/ColorEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 734f6c6e274..25ab5a1e164 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -73,7 +73,7 @@ define(function (require, exports, module) { //IF YES, THEN CHANGE/UPDATE SETTINGS: var thatColor = color.replace("0x","#"); //CONVERT 0x TO HEX6, ie 0xFFAACC => #FFAACC var that_Color = tinycolor(thatColor); //SWAPPED COLOR OUT TO RETURN RGBA VALUES INSTEAD OF _r=0, _g=0, etc. - that_Color._originalInput = that._originalColor; //RESTORE HEX6 TO 0x NOTATION INPUT FOR O.G. COLOR INPUT + that_Color._originalInput = that._originalColor; //RESTORE HEX6 FORMAT TO 0x NOTATION FORMAT INPUT FOR ORIGINAL INPUT that_Color._format = "0x"; //CHANGE _FORMAT TO '0x' SO THAT RESULT WORKS WITH .getFormat() et al; return that_Color; //EXIT }else{ @@ -85,7 +85,7 @@ define(function (require, exports, module) { this._originalColor = color; this._color = checkIf0xNotation(color,this); //console.log(this._color); - //output => tinycolor {_originalInput: "#e282a8", _r: 255, _g: 170, _b: 204, _a: 1…} -- THIS WORKS NOW, EXCEPT STILL DOES NOT CHANGE COLOR SWATCH OR MOVE COLOR SELECTOR BECAUSE SWATCHES ARE 0x NOTATION + //output => tinycolor {_originalInput: "0xE282A8", _r: 255, _g: 170, _b: 204, _a: 1…} -- THIS WORKS NOW, EXCEPT STILL DOES NOT CHANGE COLOR SWATCH OR MOVE COLOR SELECTOR BECAUSE SWATCHES ARE 0x NOTATION // // From cf3582a0887de4e642bfd981724df99fe145bcee Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 6 Mar 2017 17:34:39 -0800 Subject: [PATCH 05/17] #7723 - Corrected comment --- src/extensions/default/InlineColorEditor/ColorEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 25ab5a1e164..4b4c7a58021 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -115,7 +115,7 @@ define(function (require, exports, module) { console.log(this.$swatches); console.log("-------------"); //ERROR: INNERHTML OF SWATCH FOR '0xFFAACC" = "
    " - //SHOULD CONVERT TO HEX + //SHOULD CONVERT TO CSS COLOR SO SWATCH WORKS? // Create quick-access color swatches this._addSwatches(swatches); From c7471d6d78040981fcf578f936b7452d3eb4bf3d Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sat, 11 Mar 2017 15:26:15 -0800 Subject: [PATCH 06/17] #7723 - Finalized implementation of conversion functions, spell checked error message --- src/command/KeyBindingManager.js | 2 +- .../default/InlineColorEditor/ColorEditor.js | 116 ++++++++++-------- .../InlineColorEditor/InlineColorEditor.js | 1 + src/extensions/default/QuickView/main.js | 9 +- 4 files changed, 70 insertions(+), 58 deletions(-) diff --git a/src/command/KeyBindingManager.js b/src/command/KeyBindingManager.js index 8a2b95e070e..0f9b991cb29 100644 --- a/src/command/KeyBindingManager.js +++ b/src/command/KeyBindingManager.js @@ -575,7 +575,7 @@ define(function (require, exports, module) { var normalizedKey = normalizeKeyDescriptorString(key); if (!normalizedKey) { - console.log("Fail to nomalize " + key); + console.log("Failed to normalize " + key); } else if (_isKeyAssigned(normalizedKey)) { var binding = _keyMap[normalizedKey], command = CommandManager.get(binding.commandID), diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 4b4c7a58021..726329f5f0f 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -40,6 +40,29 @@ define(function (require, exports, module) { * @const @type {number} */ var STEP_MULTIPLIER = 5; + + /** + * Convert 0x notation into hex6 format: ("0xFFAACC" => "#FFAACC") + */ + function color0xToHex(color,str){ + var format0xToHexColor = color.replace("0x","#"); + var hexColor = tinycolor(format0xToHexColor); + hexColor._format = "0x"; + + if(str){ + hexColor.toString(); + } + return hexColor; + } + + function checkSetFormat(color,str){ + if((/^0x/).test(color)){ + var colorRes = color0xToHex(color,str); + return colorRes; + }else{ + return tinycolor(color); + } + } /** * Color picker control; may be used standalone or within an InlineColorEditor inline widget. @@ -64,30 +87,8 @@ define(function (require, exports, module) { this._handleHueDrag = this._handleHueDrag.bind(this); this._handleSelectionFieldDrag = this._handleSelectionFieldDrag.bind(this); - // - //STYLING IS MESSY AND OUT OF ORDER ONLY UNTIL I GET THE BELOW WORKING: - var that = this; - //MUST CONVERT 0X TO HEX6 NOTATION AND BACK IN ORDER TO BE ABLE TO USE COLOR W/ TINYCOLOR(COLOR). TINYCOLOR DOESN'T SUPPORT 0x NOTATION! - function checkIf0xNotation(color,that){ - if((/0x/).test(color)){ //Is input in 0x Notation? - //IF YES, THEN CHANGE/UPDATE SETTINGS: - var thatColor = color.replace("0x","#"); //CONVERT 0x TO HEX6, ie 0xFFAACC => #FFAACC - var that_Color = tinycolor(thatColor); //SWAPPED COLOR OUT TO RETURN RGBA VALUES INSTEAD OF _r=0, _g=0, etc. - that_Color._originalInput = that._originalColor; //RESTORE HEX6 FORMAT TO 0x NOTATION FORMAT INPUT FOR ORIGINAL INPUT - that_Color._format = "0x"; //CHANGE _FORMAT TO '0x' SO THAT RESULT WORKS WITH .getFormat() et al; - return that_Color; //EXIT - }else{ - return tinycolor(color); //SIMPLY RETURN AS USUAL IF NOT - } - - } - this._originalColor = color; - this._color = checkIf0xNotation(color,this); - //console.log(this._color); - //output => tinycolor {_originalInput: "0xE282A8", _r: 255, _g: 170, _b: 204, _a: 1…} -- THIS WORKS NOW, EXCEPT STILL DOES NOT CHANGE COLOR SWATCH OR MOVE COLOR SELECTOR BECAUSE SWATCHES ARE 0x NOTATION - // - // + this._color = checkSetFormat(color); this._redoColor = null; this._isUpperCase = PreferencesManager.get("uppercaseColors"); @@ -112,22 +113,15 @@ define(function (require, exports, module) { this.$opacitySlider = this.$element.find(".opacity-slider"); this.$opacitySelector = this.$element.find(".opacity-slider .selector-base"); this.$swatches = this.$element.find(".swatches"); - console.log(this.$swatches); - console.log("-------------"); - //ERROR: INNERHTML OF SWATCH FOR '0xFFAACC" = "
    " - //SHOULD CONVERT TO CSS COLOR SO SWATCH WORKS? - + // Create quick-access color swatches this._addSwatches(swatches); - console.log(swatches); - console.log("------"); // Attach event listeners to main UI elements this._addListeners(); - - // Initially selected color - this.$originalColor.css("background-color", this._originalColor); + this._commitColor(color); + this.$originalColor.css("background-color", checkSetFormat(this._originalColor)); } /** @@ -189,14 +183,14 @@ define(function (require, exports, module) { * Update all UI elements to reflect the selected color (_color and _hsv). It is usually * incorrect to call this directly; use _commitColor() or setColorAsHsv() instead. */ - ColorEditor.prototype._synchronize = function () { - var colorValue = this.getColor().getOriginalInput(), - colorObject = tinycolor(colorValue), - hueColor = "hsl(" + this._hsv.h + ", 100%, 50%)"; + ColorEditor.prototype._synchronize = function () { + var colorValue = this.getColor().getOriginalInput(); + var colorObject = checkSetFormat(colorValue); + var hueColor = "hsl(" + this._hsv.h + ", 100%, 50%)"; this._updateColorTypeRadioButtons(colorObject.getFormat()); this.$colorValue.val(colorValue); - this.$currentColor.css("background-color", colorValue); + this.$currentColor.css("background-color", checkSetFormat(colorValue,"toStr")); this.$selection.css("background-color", hueColor); this.$hueBase.css("background-color", hueColor); @@ -271,8 +265,9 @@ define(function (require, exports, module) { self = this; handler = function (event) { var newFormat = $(event.currentTarget).html().toLowerCase().replace("%", "p"), - newColor = self.getColor().toString(), - colorObject = tinycolor(newColor); + newColor = self.getColor().toString(); + + var colorObject = checkSetFormat(newColor); switch (newFormat) { case "hsla": @@ -289,8 +284,10 @@ define(function (require, exports, module) { self._hsv.a = 1; break; case "0x": - newColor = colorObject.toHexString(); - newColor.replace("#","0x"); + newColor = colorObject.toHexString().replace("#","0x"); + self._hsv.a = 1; + self._format = "0x"; + break; } // We need to run this again whenever RGB/HSL/Hex conversions @@ -354,9 +351,9 @@ define(function (require, exports, module) { /** Handle changes in text field */ ColorEditor.prototype._handleTextFieldInput = function (losingFocus) { var newColor = $.trim(this.$colorValue.val()), - newColorObj = tinycolor(newColor), + newColorObj = checkSetFormat(newColor), newColorOk = newColorObj.isValid(); - + // TinyColor will auto correct an incomplete rgb or hsl value into a valid color value. // eg. rgb(0,0,0 -> rgb(0, 0, 0) // We want to avoid having TinyColor do this, because we don't want to sync the color @@ -365,7 +362,8 @@ define(function (require, exports, module) { // TinyColor actually generates to see if it's different. If so, then we assume the color // was incomplete to begin with. if (newColorOk) { - newColorOk = (newColorObj.toString() === this._normalizeColorString(newColor)); + var colorStr = newColor.replace("0x","#") || newColor; + newColorOk = (newColorObj.toString() === this._normalizeColorString(colorStr)); } // Restore to the previous valid color if the new color is invalid or incomplete. @@ -400,10 +398,12 @@ define(function (require, exports, module) { // Create swatches swatches.forEach(function (swatch) { + var swatchValue = swatch.value.replace("0x","#") || swatch.value; var stringFormat = (swatch.count > 1) ? Strings.COLOR_EDITOR_USED_COLOR_TIP_PLURAL : Strings.COLOR_EDITOR_USED_COLOR_TIP_SINGULAR, usedColorTip = StringUtils.format(stringFormat, swatch.value, swatch.count); + self.$swatches.append("
  • " + swatch.value + "
    • "); }); @@ -413,6 +413,7 @@ define(function (require, exports, module) { event.keyCode === KeyEvent.DOM_VK_ENTER || event.keyCode === KeyEvent.DOM_VK_SPACE) { // Enter/Space is same as clicking on swatch + self._commitColor($(event.currentTarget).find(".value").html()); } else if (event.keyCode === KeyEvent.DOM_VK_TAB) { // Tab on last swatch loops back to color square @@ -444,9 +445,8 @@ define(function (require, exports, module) { */ ColorEditor.prototype.setColorAsHsv = function (hsv) { var colorVal, newColor, - oldFormat = tinycolor(this.getColor()).getFormat(); //|| "0x"; - //IF STILL UNDETECTABLE VIA TINYCOLOR .getFormat(), METHOD, THEN FORMAT IS SET TO '0x' NOTATION - + oldFormat = tinycolor(this.getColor()).getFormat(); + // Set our state to the new color $.extend(this._hsv, hsv); newColor = tinycolor(this._hsv); @@ -466,8 +466,8 @@ define(function (require, exports, module) { colorVal = this._hsv.a < 1 ? newColor.toRgbString() : newColor.toHexString(); break; case "0x": - colorVal = newColor.toHexString().to0xString(); - //NEED TO IMPLEMENT .to0xString() method + colorVal = newColor.toHexString().replace("#","0x"); + break; } colorVal = this._isUpperCase ? colorVal.toUpperCase() : colorVal; this._commitColor(colorVal, false); @@ -480,11 +480,19 @@ define(function (require, exports, module) { * @param {boolean=} resetHsv Pass false ONLY if hsv set already been modified to match colorVal. Default: true. */ ColorEditor.prototype._commitColor = function (colorVal, resetHsv) { + // + // + //TO-DO: WORKS. NEED TO ADD EXPORTED FUNCTION TO CHECK IF 0x + // + // if (resetHsv === undefined) { resetHsv = true; - } + } this._callback(colorVal); - this._color = tinycolor(colorVal); + + var colorObj = checkSetFormat(colorVal); + colorObj._originalInput = colorVal; + this._color = colorObj; if (resetHsv) { this._hsv = this._color.toHsv(); @@ -499,7 +507,7 @@ define(function (require, exports, module) { * format determines the new selected color's format. * @param {!string} colorVal */ - ColorEditor.prototype.setColorFromString = function (colorVal) { + ColorEditor.prototype.setColorFromString = function (colorVal) { this._commitColor(colorVal, true); // TODO (#2204): make this less entangled with setColorAsHsv() }; diff --git a/src/extensions/default/InlineColorEditor/InlineColorEditor.js b/src/extensions/default/InlineColorEditor/InlineColorEditor.js index d3cf335ab2b..b54c0eef161 100644 --- a/src/extensions/default/InlineColorEditor/InlineColorEditor.js +++ b/src/extensions/default/InlineColorEditor/InlineColorEditor.js @@ -131,6 +131,7 @@ define(function (require, exports, module) { var self = this; if (colorString !== this._color) { var range = this.getCurrentRange(); + if (!range) { return; } diff --git a/src/extensions/default/QuickView/main.js b/src/extensions/default/QuickView/main.js index e8c57773bd1..6c63049d670 100644 --- a/src/extensions/default/QuickView/main.js +++ b/src/extensions/default/QuickView/main.js @@ -400,15 +400,18 @@ define(function (require, exports, module) { } } else if (pos.ch <= match.index + match[0].length) { // build the css for previewing the gradient from the regex result - var previewCSS = gradientMatch.prefix + (gradientMatch.colorValue || match[0]); + var previewCSS = gradientMatch.prefix + (gradientMatch.colorValue || match[0]); + + if((/^0x/).test(previewCSS)){ + previewCSS = previewCSS.replace("0x","#"); + }; // normalize the arguments to something that we can display to the user // NOTE: we need both the div and the popover's _previewCSS member // (used by unit tests) to match so normalize the css for both previewCSS = normalizeGradientExpressionForQuickview(previewCSS); - var preview = "
    " + - "
    "; + var preview = "
    " + "
    "; var startPos = {line: pos.line, ch: match.index}, endPos = {line: pos.line, ch: match.index + match[0].length}, startCoords = cm.charCoords(startPos), From fa0bb466fe9b21dd1b91189caaf8aa634a830e7e Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sun, 12 Mar 2017 01:35:49 -0800 Subject: [PATCH 07/17] #7723 - Cleaned up code as best I could --- .../default/InlineColorEditor/ColorEditor.js | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 726329f5f0f..22645d8a784 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -40,29 +40,34 @@ define(function (require, exports, module) { * @const @type {number} */ var STEP_MULTIPLIER = 5; - + /** - * Convert 0x notation into hex6 format: ("0xFFAACC" => "#FFAACC") + * Convert 0x notation into hex6 format for tinycolor + * compatibility: ("0xFFAACC" => "#FFFFFF") */ - function color0xToHex(color,str){ + function color0xToHex(color,toStr){ var format0xToHexColor = color.replace("0x","#"); var hexColor = tinycolor(format0xToHexColor); hexColor._format = "0x"; - - if(str){ + + if(toStr !== null){ hexColor.toString(); } return hexColor; } - - function checkSetFormat(color,str){ + + function as0xString(color){ + return color.toHexString().replace("#","0x"); + } + + function checkSetFormat(color,toStr){ if((/^0x/).test(color)){ - var colorRes = color0xToHex(color,str); + var colorRes = color0xToHex(color,toStr); return colorRes; }else{ return tinycolor(color); - } } + } /** * Color picker control; may be used standalone or within an InlineColorEditor inline widget. @@ -89,7 +94,6 @@ define(function (require, exports, module) { this._originalColor = color; this._color = checkSetFormat(color); - this._redoColor = null; this._isUpperCase = PreferencesManager.get("uppercaseColors"); PreferencesManager.on("change", "uppercaseColors", function () { @@ -113,13 +117,13 @@ define(function (require, exports, module) { this.$opacitySlider = this.$element.find(".opacity-slider"); this.$opacitySelector = this.$element.find(".opacity-slider .selector-base"); this.$swatches = this.$element.find(".swatches"); - + // Create quick-access color swatches this._addSwatches(swatches); // Attach event listeners to main UI elements this._addListeners(); - + this._commitColor(color); this.$originalColor.css("background-color", checkSetFormat(this._originalColor)); } @@ -186,7 +190,7 @@ define(function (require, exports, module) { ColorEditor.prototype._synchronize = function () { var colorValue = this.getColor().getOriginalInput(); - var colorObject = checkSetFormat(colorValue); + var colorObject = checkSetFormat(colorValue); var hueColor = "hsl(" + this._hsv.h + ", 100%, 50%)"; this._updateColorTypeRadioButtons(colorObject.getFormat()); this.$colorValue.val(colorValue); @@ -266,7 +270,7 @@ define(function (require, exports, module) { handler = function (event) { var newFormat = $(event.currentTarget).html().toLowerCase().replace("%", "p"), newColor = self.getColor().toString(); - + var colorObject = checkSetFormat(newColor); switch (newFormat) { @@ -284,7 +288,7 @@ define(function (require, exports, module) { self._hsv.a = 1; break; case "0x": - newColor = colorObject.toHexString().replace("#","0x"); + newColor = as0xString(colorObject); self._hsv.a = 1; self._format = "0x"; break; @@ -353,7 +357,7 @@ define(function (require, exports, module) { var newColor = $.trim(this.$colorValue.val()), newColorObj = checkSetFormat(newColor), newColorOk = newColorObj.isValid(); - + // TinyColor will auto correct an incomplete rgb or hsl value into a valid color value. // eg. rgb(0,0,0 -> rgb(0, 0, 0) // We want to avoid having TinyColor do this, because we don't want to sync the color @@ -401,7 +405,7 @@ define(function (require, exports, module) { var swatchValue = swatch.value.replace("0x","#") || swatch.value; var stringFormat = (swatch.count > 1) ? Strings.COLOR_EDITOR_USED_COLOR_TIP_PLURAL : Strings.COLOR_EDITOR_USED_COLOR_TIP_SINGULAR, usedColorTip = StringUtils.format(stringFormat, swatch.value, swatch.count); - + self.$swatches.append("
  • " + swatch.value + "
    • "); @@ -466,7 +470,7 @@ define(function (require, exports, module) { colorVal = this._hsv.a < 1 ? newColor.toRgbString() : newColor.toHexString(); break; case "0x": - colorVal = newColor.toHexString().replace("#","0x"); + colorVal = as0xString(newColor); break; } colorVal = this._isUpperCase ? colorVal.toUpperCase() : colorVal; @@ -480,16 +484,12 @@ define(function (require, exports, module) { * @param {boolean=} resetHsv Pass false ONLY if hsv set already been modified to match colorVal. Default: true. */ ColorEditor.prototype._commitColor = function (colorVal, resetHsv) { - // - // - //TO-DO: WORKS. NEED TO ADD EXPORTED FUNCTION TO CHECK IF 0x - // - // + if (resetHsv === undefined) { resetHsv = true; - } + } this._callback(colorVal); - + var colorObj = checkSetFormat(colorVal); colorObj._originalInput = colorVal; this._color = colorObj; @@ -507,7 +507,7 @@ define(function (require, exports, module) { * format determines the new selected color's format. * @param {!string} colorVal */ - ColorEditor.prototype.setColorFromString = function (colorVal) { + ColorEditor.prototype.setColorFromString = function (colorVal) { this._commitColor(colorVal, true); // TODO (#2204): make this less entangled with setColorAsHsv() }; @@ -758,4 +758,4 @@ define(function (require, exports, module) { }); exports.ColorEditor = ColorEditor; -}); \ No newline at end of file +}); From f8cd91172ba2e1935f8a17564a854e3cb46aff64 Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sun, 12 Mar 2017 01:43:47 -0800 Subject: [PATCH 08/17] #7723 - Restored original whitespace --- src/extensions/default/InlineColorEditor/ColorEditor.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 22645d8a784..de72113a05e 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -94,6 +94,7 @@ define(function (require, exports, module) { this._originalColor = color; this._color = checkSetFormat(color); + this._redoColor = null; this._isUpperCase = PreferencesManager.get("uppercaseColors"); PreferencesManager.on("change", "uppercaseColors", function () { From 9c7187ada784ffb6ade5c980a62be92f188cfe4b Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sun, 12 Mar 2017 22:45:18 -0700 Subject: [PATCH 09/17] #7723 - Completed change requests of @zaggino and @petetnt --- .../default/InlineColorEditor/ColorEditor.js | 16 +++++++--------- src/extensions/default/QuickView/main.js | 4 ++-- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index de72113a05e..c9d28b7da42 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -45,13 +45,13 @@ define(function (require, exports, module) { * Convert 0x notation into hex6 format for tinycolor * compatibility: ("0xFFAACC" => "#FFFFFF") */ - function color0xToHex(color,toStr){ + function color0xToHex(color,convertToStr){ var format0xToHexColor = color.replace("0x","#"); var hexColor = tinycolor(format0xToHexColor); hexColor._format = "0x"; - if(toStr !== null){ - hexColor.toString(); + if(convertToStr){ + return hexColor.toString(); } return hexColor; } @@ -60,13 +60,11 @@ define(function (require, exports, module) { return color.toHexString().replace("#","0x"); } - function checkSetFormat(color,toStr){ - if((/^0x/).test(color)){ - var colorRes = color0xToHex(color,toStr); - return colorRes; - }else{ - return tinycolor(color); + function checkSetFormat(color,convertToStr){ + if ((/^0x/).test(color)) { + return color0xToHex(color,convertToStr); } + return tinycolor(color); } /** diff --git a/src/extensions/default/QuickView/main.js b/src/extensions/default/QuickView/main.js index 6c63049d670..fda3b03eac2 100644 --- a/src/extensions/default/QuickView/main.js +++ b/src/extensions/default/QuickView/main.js @@ -402,9 +402,9 @@ define(function (require, exports, module) { // build the css for previewing the gradient from the regex result var previewCSS = gradientMatch.prefix + (gradientMatch.colorValue || match[0]); - if((/^0x/).test(previewCSS)){ + if ((/^0x/).test(previewCSS)) { previewCSS = previewCSS.replace("0x","#"); - }; + }; // normalize the arguments to something that we can display to the user // NOTE: we need both the div and the popover's _previewCSS member From c08ceb383f83b7ab49d27bf457894c1694abbe72 Mon Sep 17 00:00:00 2001 From: nyteksf Date: Sun, 12 Mar 2017 23:16:40 -0700 Subject: [PATCH 10/17] #7723 - Modified function '_normalizeColorString' to include prior externalized code fragment --- .../default/InlineColorEditor/ColorEditor.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index c9d28b7da42..841ff8018f3 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -92,7 +92,7 @@ define(function (require, exports, module) { this._originalColor = color; this._color = checkSetFormat(color); - + this._redoColor = null; this._isUpperCase = PreferencesManager.get("uppercaseColors"); PreferencesManager.on("change", "uppercaseColors", function () { @@ -193,7 +193,7 @@ define(function (require, exports, module) { var hueColor = "hsl(" + this._hsv.h + ", 100%, 50%)"; this._updateColorTypeRadioButtons(colorObject.getFormat()); this.$colorValue.val(colorValue); - this.$currentColor.css("background-color", checkSetFormat(colorValue,"toStr")); + this.$currentColor.css("background-color", checkSetFormat(colorValue,true)); this.$selection.css("background-color", hueColor); this.$hueBase.css("background-color", hueColor); @@ -339,6 +339,10 @@ define(function (require, exports, module) { ColorEditor.prototype._normalizeColorString = function (color) { var normalizedColor = color; + // Convert from 0x notation into hex format string + if (color.match(/^0x[0-9a-fA-F]{6}/)) { + return color.replace("0x","#") || color; + } // Convert 6-digit hex to 3-digit hex as TinyColor (#ffaacc -> #fac) if (color.match(/^#[0-9a-fA-F]{6}/)) { return tinycolor(color).toString(); @@ -365,8 +369,7 @@ define(function (require, exports, module) { // TinyColor actually generates to see if it's different. If so, then we assume the color // was incomplete to begin with. if (newColorOk) { - var colorStr = newColor.replace("0x","#") || newColor; - newColorOk = (newColorObj.toString() === this._normalizeColorString(colorStr)); + newColorOk = (newColorObj.toString() === this._normalizeColorString(newColor)); } // Restore to the previous valid color if the new color is invalid or incomplete. From 738a6d91f8dcd2735e582a269ce4497b7d9496c4 Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 13 Mar 2017 02:59:16 -0700 Subject: [PATCH 11/17] #7723 - Another round of change requests handled --- .../default/InlineColorEditor/ColorEditor.js | 32 ++++++++----------- src/extensions/default/QuickView/main.js | 11 ++++--- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 841ff8018f3..837e810cd14 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -45,24 +45,23 @@ define(function (require, exports, module) { * Convert 0x notation into hex6 format for tinycolor * compatibility: ("0xFFAACC" => "#FFFFFF") */ - function color0xToHex(color,convertToStr){ - var format0xToHexColor = color.replace("0x","#"); - var hexColor = tinycolor(format0xToHexColor); + function as0xString(color) { + return color.toHexString().replace("#", "0x"); + } + + function _0xColorToHex(color, convertToStr) { + var hexColor = tinycolor(color.replace("0x", "#")); hexColor._format = "0x"; - if(convertToStr){ + if (convertToStr) { return hexColor.toString(); } return hexColor; } - function as0xString(color){ - return color.toHexString().replace("#","0x"); - } - - function checkSetFormat(color,convertToStr){ + function checkSetFormat(color, convertToStr) { if ((/^0x/).test(color)) { - return color0xToHex(color,convertToStr); + return _0xColorToHex(color, convertToStr); } return tinycolor(color); } @@ -193,7 +192,7 @@ define(function (require, exports, module) { var hueColor = "hsl(" + this._hsv.h + ", 100%, 50%)"; this._updateColorTypeRadioButtons(colorObject.getFormat()); this.$colorValue.val(colorValue); - this.$currentColor.css("background-color", checkSetFormat(colorValue,true)); + this.$currentColor.css("background-color", checkSetFormat(colorValue, true)); this.$selection.css("background-color", hueColor); this.$hueBase.css("background-color", hueColor); @@ -339,10 +338,6 @@ define(function (require, exports, module) { ColorEditor.prototype._normalizeColorString = function (color) { var normalizedColor = color; - // Convert from 0x notation into hex format string - if (color.match(/^0x[0-9a-fA-F]{6}/)) { - return color.replace("0x","#") || color; - } // Convert 6-digit hex to 3-digit hex as TinyColor (#ffaacc -> #fac) if (color.match(/^#[0-9a-fA-F]{6}/)) { return tinycolor(color).toString(); @@ -369,7 +364,7 @@ define(function (require, exports, module) { // TinyColor actually generates to see if it's different. If so, then we assume the color // was incomplete to begin with. if (newColorOk) { - newColorOk = (newColorObj.toString() === this._normalizeColorString(newColor)); + newColorOk = (newColorObj.toString() === this._normalizeColorString(checkSetFormat(newColor, true))); } // Restore to the previous valid color if the new color is invalid or incomplete. @@ -404,7 +399,7 @@ define(function (require, exports, module) { // Create swatches swatches.forEach(function (swatch) { - var swatchValue = swatch.value.replace("0x","#") || swatch.value; + var swatchValue = checkSetFormat(swatch.value, true); var stringFormat = (swatch.count > 1) ? Strings.COLOR_EDITOR_USED_COLOR_TIP_PLURAL : Strings.COLOR_EDITOR_USED_COLOR_TIP_SINGULAR, usedColorTip = StringUtils.format(stringFormat, swatch.value, swatch.count); @@ -582,9 +577,8 @@ define(function (require, exports, module) { */ ColorEditor.prototype.undo = function () { if (this._originalColor.toString() !== this._color.toString()) { - var curColor = this._color.toString(); this._commitColor(this._originalColor, true); - this._redoColor = curColor; + this._redoColor = this._color.toString(); } }; diff --git a/src/extensions/default/QuickView/main.js b/src/extensions/default/QuickView/main.js index fda3b03eac2..4e5b483e5f8 100644 --- a/src/extensions/default/QuickView/main.js +++ b/src/extensions/default/QuickView/main.js @@ -325,6 +325,11 @@ define(function (require, exports, module) { function hasLengthInPixels(args) { return (args.length > 1 && args[1].indexOf("px") > 0); } + + // Ensures that input is in usable hex format + function ensureHexFormat(str) { + return (/^0x/).test(str) ? str.replace("0x","#") : str; + } // Normalizes px color stops to % function normalizeGradientExpressionForQuickview(expression) { @@ -401,15 +406,11 @@ define(function (require, exports, module) { } else if (pos.ch <= match.index + match[0].length) { // build the css for previewing the gradient from the regex result var previewCSS = gradientMatch.prefix + (gradientMatch.colorValue || match[0]); - - if ((/^0x/).test(previewCSS)) { - previewCSS = previewCSS.replace("0x","#"); - }; // normalize the arguments to something that we can display to the user // NOTE: we need both the div and the popover's _previewCSS member // (used by unit tests) to match so normalize the css for both - previewCSS = normalizeGradientExpressionForQuickview(previewCSS); + previewCSS = normalizeGradientExpressionForQuickview(ensureHexFormat(previewCSS)); var preview = "
    " + "
    "; var startPos = {line: pos.line, ch: match.index}, From fd6e7d8a8a479b3ea22c3146e8c5fdb1b215b321 Mon Sep 17 00:00:00 2001 From: nyteksf Date: Mon, 13 Mar 2017 05:54:12 -0700 Subject: [PATCH 12/17] #7723 - Fixed nits & added ensureHexFormat() --- .../default/InlineColorEditor/ColorEditor.js | 16 ++++++++++++---- .../InlineColorEditor/InlineColorEditor.js | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 837e810cd14..f32bff069e7 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -45,10 +45,14 @@ define(function (require, exports, module) { * Convert 0x notation into hex6 format for tinycolor * compatibility: ("0xFFAACC" => "#FFFFFF") */ + function ensureHexFormat(str) { + return (/^0x/).test(str) ? str.replace("0x","#") : str; + } + function as0xString(color) { return color.toHexString().replace("#", "0x"); } - + function _0xColorToHex(color, convertToStr) { var hexColor = tinycolor(color.replace("0x", "#")); hexColor._format = "0x"; @@ -63,6 +67,9 @@ define(function (require, exports, module) { if ((/^0x/).test(color)) { return _0xColorToHex(color, convertToStr); } + if (convertToStr) { + return tinycolor(color).toString(); //HAD NO .TOSTRING() BEFORE. WITHOUT IT BLOCKS HEX3. + } return tinycolor(color); } @@ -351,11 +358,12 @@ define(function (require, exports, module) { }; /** Handle changes in text field */ - ColorEditor.prototype._handleTextFieldInput = function (losingFocus) { + ColorEditor.prototype._handleTextFieldInput = function (losingFocus) { var newColor = $.trim(this.$colorValue.val()), newColorObj = checkSetFormat(newColor), newColorOk = newColorObj.isValid(); + // TinyColor will auto correct an incomplete rgb or hsl value into a valid color value. // eg. rgb(0,0,0 -> rgb(0, 0, 0) // We want to avoid having TinyColor do this, because we don't want to sync the color @@ -364,7 +372,7 @@ define(function (require, exports, module) { // TinyColor actually generates to see if it's different. If so, then we assume the color // was incomplete to begin with. if (newColorOk) { - newColorOk = (newColorObj.toString() === this._normalizeColorString(checkSetFormat(newColor, true))); + newColorOk = (newColorObj.toString() === this._normalizeColorString(ensureHexFormat(newColor))); } // Restore to the previous valid color if the new color is invalid or incomplete. @@ -402,7 +410,7 @@ define(function (require, exports, module) { var swatchValue = checkSetFormat(swatch.value, true); var stringFormat = (swatch.count > 1) ? Strings.COLOR_EDITOR_USED_COLOR_TIP_PLURAL : Strings.COLOR_EDITOR_USED_COLOR_TIP_SINGULAR, usedColorTip = StringUtils.format(stringFormat, swatch.value, swatch.count); - +//#f44fe4 self.$swatches.append("
  • " + swatch.value + "
    • "); diff --git a/src/extensions/default/InlineColorEditor/InlineColorEditor.js b/src/extensions/default/InlineColorEditor/InlineColorEditor.js index b54c0eef161..b40410c1886 100644 --- a/src/extensions/default/InlineColorEditor/InlineColorEditor.js +++ b/src/extensions/default/InlineColorEditor/InlineColorEditor.js @@ -131,7 +131,7 @@ define(function (require, exports, module) { var self = this; if (colorString !== this._color) { var range = this.getCurrentRange(); - + if (!range) { return; } From e71807cb6fdaf4c5b396d9613b5b9d1eb842df4f Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 13 Mar 2017 12:19:11 -0700 Subject: [PATCH 13/17] Update ColorEditor.js #7723 - Removed stray comment, restored proper indentation of function --- src/extensions/default/InlineColorEditor/ColorEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index f32bff069e7..075d6c1297e 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -358,7 +358,7 @@ define(function (require, exports, module) { }; /** Handle changes in text field */ - ColorEditor.prototype._handleTextFieldInput = function (losingFocus) { + ColorEditor.prototype._handleTextFieldInput = function (losingFocus) { var newColor = $.trim(this.$colorValue.val()), newColorObj = checkSetFormat(newColor), newColorOk = newColorObj.isValid(); @@ -410,7 +410,7 @@ define(function (require, exports, module) { var swatchValue = checkSetFormat(swatch.value, true); var stringFormat = (swatch.count > 1) ? Strings.COLOR_EDITOR_USED_COLOR_TIP_PLURAL : Strings.COLOR_EDITOR_USED_COLOR_TIP_SINGULAR, usedColorTip = StringUtils.format(stringFormat, swatch.value, swatch.count); -//#f44fe4 + self.$swatches.append("
  • " + swatch.value + "
    • "); From e67b8983f4db4f8076bce24517a4e564ebcedf10 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 13 Mar 2017 12:22:31 -0700 Subject: [PATCH 14/17] #7723 - Restored explanatory comment back to feature --- src/extensions/default/InlineColorEditor/ColorEditor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 075d6c1297e..6603cbba177 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -129,8 +129,10 @@ define(function (require, exports, module) { // Attach event listeners to main UI elements this._addListeners(); - this._commitColor(color); + // Initially selected color this.$originalColor.css("background-color", checkSetFormat(this._originalColor)); + + this._commitColor(color); } /** From 1bacc513c9e5de8789291834b546144d34458a94 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 13 Mar 2017 12:28:38 -0700 Subject: [PATCH 15/17] #7723 - Unnecessary comment removed --- src/extensions/default/InlineColorEditor/ColorEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 6603cbba177..fd8ca577b58 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -68,7 +68,7 @@ define(function (require, exports, module) { return _0xColorToHex(color, convertToStr); } if (convertToStr) { - return tinycolor(color).toString(); //HAD NO .TOSTRING() BEFORE. WITHOUT IT BLOCKS HEX3. + return tinycolor(color).toString(); } return tinycolor(color); } From e83621fa7be14490c301576f436dcc8f9f77384e Mon Sep 17 00:00:00 2001 From: nyteksf Date: Tue, 14 Mar 2017 05:09:20 -0700 Subject: [PATCH 16/17] #7723 - Fixed indentation error --- src/extensions/default/QuickView/main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/extensions/default/QuickView/main.js b/src/extensions/default/QuickView/main.js index 4e5b483e5f8..0a647bba433 100644 --- a/src/extensions/default/QuickView/main.js +++ b/src/extensions/default/QuickView/main.js @@ -327,9 +327,9 @@ define(function (require, exports, module) { } // Ensures that input is in usable hex format - function ensureHexFormat(str) { - return (/^0x/).test(str) ? str.replace("0x","#") : str; - } + function ensureHexFormat(str) { + return (/^0x/).test(str) ? str.replace("0x","#") : str; + } // Normalizes px color stops to % function normalizeGradientExpressionForQuickview(expression) { From 1dccc61c1373e6bbaf4382b90284c5c0f2b31efa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= Date: Tue, 14 Mar 2017 13:21:32 +0200 Subject: [PATCH 17/17] Add JSDoc for new functions --- .../default/InlineColorEditor/ColorEditor.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index fd8ca577b58..d62e4871bda 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -44,15 +44,30 @@ define(function (require, exports, module) { /** * Convert 0x notation into hex6 format for tinycolor * compatibility: ("0xFFAACC" => "#FFFFFF") + * @param {string} str - String to ensure hex format for + * @returns {string} - str in hex format */ function ensureHexFormat(str) { return (/^0x/).test(str) ? str.replace("0x","#") : str; } + /** + * Converts a color to a 0x-prefixed string + * @param {tinycolor} color - color to convert + * @returns {string} - color as 0x-prefixed string + */ function as0xString(color) { return color.toHexString().replace("#", "0x"); } + /** + * Converts 0x-prefixed color to hex + * @param {string} color - Color to convert + * @param {boolean} convertToString - true if color should + * be returned as string + * @returns {tinycolor|string} - Hex color as a Tinycolor object + * or a hex string + */ function _0xColorToHex(color, convertToStr) { var hexColor = tinycolor(color.replace("0x", "#")); hexColor._format = "0x"; @@ -63,6 +78,14 @@ define(function (require, exports, module) { return hexColor; } + /** + * Ensures that a string is in Tinycolor supported format + * @param {string} color - Color to check the format for + * @param {boolean} convertToString - true if color should + * be returned as string + * @returns {tinycolor|string} - Color as a Tinycolor object + * or a hex string + */ function checkSetFormat(color, convertToStr) { if ((/^0x/).test(color)) { return _0xColorToHex(color, convertToStr);