From b53b12e29136053eefe1c546e6a676a1d820eaaf Mon Sep 17 00:00:00 2001 From: Pluto Date: Sat, 30 Nov 2024 12:53:19 +0530 Subject: [PATCH] fix: resolved all mentioned issues --- .../CSSColorPreview/main.css | 30 -- .../CSSColorPreview/main.js | 326 +++++++++--------- src/styles/brackets.less | 32 ++ 3 files changed, 204 insertions(+), 184 deletions(-) delete mode 100644 src/extensionsIntegrated/CSSColorPreview/main.css diff --git a/src/extensionsIntegrated/CSSColorPreview/main.css b/src/extensionsIntegrated/CSSColorPreview/main.css deleted file mode 100644 index 7ff54ecf9..000000000 --- a/src/extensionsIntegrated/CSSColorPreview/main.css +++ /dev/null @@ -1,30 +0,0 @@ -/* Single color preview */ -.ico-cssColorPreview { - border: solid 1px rgba(0, 0, 0, 0.2); - display: inline-block; - height: 14px; - width: 14px; - margin-left: 6px; - position: absolute; - top: 8px; - z-index: 99999; -} - -/* Multiple colors preview container (this is a div) */ -.ico-multiple-cssColorPreview { - position: relative; - display: inline-block; - width: 14px; - height: 14px; - margin-left: 6px; - border: solid 1px rgba(0, 0, 0, 0.2); - z-index: 99999; -} - -/* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */ -.ico-multiple-cssColorPreview .color-box { - position: absolute; - width: 6px; - height: 6px; - box-sizing: border-box; -} diff --git a/src/extensionsIntegrated/CSSColorPreview/main.js b/src/extensionsIntegrated/CSSColorPreview/main.js index 09001b2ca..dfb5d957b 100644 --- a/src/extensionsIntegrated/CSSColorPreview/main.js +++ b/src/extensionsIntegrated/CSSColorPreview/main.js @@ -2,7 +2,7 @@ * GNU AGPL-3.0 License * * Copyright (c) 2021 - present core.ai . All rights reserved. - * Original work Copyright (c) 2013 - 2021 Adobe Systems Incorporated. All rights reserved. + * Original work Copyright (c) 2024 [cmgddd](https://github.com/cmgddd/Brackets-css-color-preview). All rights reserved. * * This program is free software: you can redistribute it and/or modify it * under the terms of the GNU Affero General Public License as published by @@ -21,13 +21,13 @@ /* Displays a color preview in the gutter for any file containing color values */ +/* Styles on `styles/brackets.less` file */ define(function (require, exports, module) { // Brackets modules. const _ = require("thirdparty/lodash"), EditorManager = require('editor/EditorManager'), - ExtensionUtils = require("utils/ExtensionUtils"), ColorUtils = require('utils/ColorUtils'), AppInit = require("utils/AppInit"), PreferencesManager = require("preferences/PreferencesManager"), @@ -38,8 +38,6 @@ define(function (require, exports, module) { gutterName = "CodeMirror-colorGutter"; - ExtensionUtils.loadStyleSheet(module, "main.css"); - // For preferences settings, to toggle this feature on/off const PREFERENCES_CSS_COLOR_PREVIEW = "CSSColorPreview"; let enabled = true; // by default:- on @@ -48,190 +46,210 @@ define(function (require, exports, module) { description: Strings.DESCRIPTION_CSS_COLOR_PREVIEW }); - const CssColorPreview = { + /** + * Gets all the colors that are to be displayed + * + * Makes sure that the feature is enabled and editor is active, if yes: + * Calls showGutter function to display the color marks on the gutter + */ + function showColorMarks() { + if (!enabled) { + removeColorMarks(); + return; + } - // Get editor - getEditor: function () { - return EditorManager.getActiveEditor(); - }, + const editor = EditorManager.getActiveEditor(); + if (editor) { - // show color preview - showColorMarks: function () { - // Check if the extension is enabled - if (!enabled) { - CssColorPreview.removeColorMarks(); - return; + const cm = editor._codeMirror; + const nLen = cm.lineCount(); + const aColors = []; + + // match colors and push into an array + for (let i = 0; i < nLen; i++) { + let lineText = cm.getLine(i); + + if ((lineText.indexOf('/*') !== -1) || (lineText.indexOf('*/') !== -1)) { + continue; + } else { + let regx = /:[^;]*;/g; + + lineText = lineText.match(regx); + if (lineText) { + let tempColors = lineText[0].match(COLOR_REGEX); + // Support up to 4 colors + if (tempColors && tempColors.length > 0) { + let colors = tempColors.slice(0, 4); + aColors.push({ + lineNumber: i, + colorValues: colors + }); + } + } + } } - const editor = CssColorPreview.getEditor(); - if (editor) { + showGutters(editor, aColors); + } + } - const cm = editor._codeMirror; - const nLen = cm.lineCount(); - const aColors = []; + /** + * To remove the color marks from the gutter + */ + function removeColorMarks() { + const editor = EditorManager.getActiveEditor(); + if (editor) { + const cm = editor._codeMirror; + cm.clearGutter(gutterName); + } + } - // match colors and push into an array - for (let i = 0; i < nLen; i++) { - let lineText = cm.getLine(i); + /** + * To display the color marks on the gutter + * @param {activeEditor} editor + * @param {Array.} _results An array of objects which stores + * all the line numbers and the colors to be displayed on that line. + */ + function showGutters(editor, _results) { + if (editor && enabled) { + initGutter(editor); + const cm = editor._codeMirror; + cm.clearGutter(gutterName); // clear color markers + + // Only add markers if enabled + if (enabled) { + cm.colorGutters = _.sortBy(_results, "lineNumber"); + + cm.colorGutters.forEach(function (obj) { + let $marker; - if ((lineText.indexOf('/*') !== -1) || (lineText.indexOf('*/') !== -1)) { - continue; + if (obj.colorValues.length === 1) { + // Single color preview + $marker = $("") + .addClass("ico-cssColorPreview") + .css('background-color', obj.colorValues[0]); + + cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); } else { - let regx = /:[^;]*;/g; - - lineText = lineText.match(regx); - if (lineText) { - let tempColors = lineText[0].match(COLOR_REGEX); - // Support up to 4 colors - if (tempColors && tempColors.length > 0) { - let colors = tempColors.slice(0, 4); - aColors.push({ - lineNumber: i, - colorValues: colors - }); + // Multiple colors preview + $marker = $("
").addClass("ico-multiple-cssColorPreview"); + + // Positions for up to 4 colors in grid + const positions = [ + { top: 0, left: 0 }, + { top: 0, right: 0 }, + { bottom: 0, right: 0 }, + { bottom: 0, left: 0 } + ]; + + obj.colorValues.forEach((color, index) => { + if (index < 4) { + const $colorBox = $("
") + .addClass("color-box") + .css({ + 'background-color': color, + ...positions[index] + }); + $marker.append($colorBox); } - } - } - } - - CssColorPreview.showGutters(editor, aColors); - } - }, - - onChanged: function () { - CssColorPreview.showColorMarks(); - }, - - init: function () { - CssColorPreview.showColorMarks(); - CssColorPreview.registerHandlers(); - }, - - registerHandlers: function () { - // Remove previous listeners to avoid multiple binding issue - EditorManager.off("activeEditorChange", CssColorPreview.onChanged); - - // Add listener for all editor changes - EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) { - if (newEditor) { - // Unbind the previous editor's change event if it exists - if (oldEditor) { - const oldCM = oldEditor._codeMirror; - if (oldCM) { - oldCM.off("change", CssColorPreview.onChanged); - } - } + }); - // Bind change event to the new editor - const cm = newEditor._codeMirror; - if (cm) { - cm.on("change", CssColorPreview.onChanged); + cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); } + }); + } - CssColorPreview.showColorMarks(); - } - }); + } + } - // Handle the currently active editor at initialization - const activeEditor = EditorManager.getActiveEditor(); - if (activeEditor) { - const cm = activeEditor._codeMirror; - if (cm) { - cm.on("change", CssColorPreview.onChanged); - } - CssColorPreview.showColorMarks(); - } - }, + /** + * Initialize the gutter + * @param {activeEditor} editor + */ + function initGutter(editor) { - initGutter: function (editor) { + const cm = editor._codeMirror; + const gutters = cm.getOption("gutters").slice(0); + let str = gutters.join(''); + if (str.indexOf(gutterName) === -1) { + gutters.unshift(gutterName); + cm.setOption("gutters", gutters); + } + } - const cm = editor._codeMirror; - const gutters = cm.getOption("gutters").slice(0); - let str = gutters.join(''); - if (str.indexOf(gutterName) === -1) { - gutters.unshift(gutterName); - cm.setOption("gutters", gutters); - } - }, - - showGutters: function (editor, _results) { - if (editor && enabled) { - CssColorPreview.initGutter(editor); - const cm = editor._codeMirror; - cm.clearGutter(gutterName); // clear color markers - - // Only add markers if enabled - if (enabled) { - cm.colorGutters = _.sortBy(_results, "lineNumber"); - - cm.colorGutters.forEach(function (obj) { - let $marker; - - if (obj.colorValues.length === 1) { - // Single color preview - $marker = $("") - .addClass("ico-cssColorPreview") - .css('background-color', obj.colorValues[0]); - - cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); - } else { - // Multiple colors preview - $marker = $("
").addClass("ico-multiple-cssColorPreview"); - - // Positions for up to 4 colors in grid - const positions = [ - { top: 0, left: 0 }, - { top: 0, right: 0 }, - { bottom: 0, right: 0 }, - { bottom: 0, left: 0 } - ]; - - obj.colorValues.forEach((color, index) => { - if (index < 4) { - const $colorBox = $("
") - .addClass("color-box") - .css({ - 'background-color': color, - ...positions[index] - }); - $marker.append($colorBox); - } - }); + /** + * Register all the required handlers + */ + function registerHandlers() { + // Remove previous listeners to avoid multiple binding issue + EditorManager.off("activeEditorChange", onChanged); + + // Add listener for all editor changes + EditorManager.on("activeEditorChange", function (event, newEditor, oldEditor) { + if (newEditor) { + // Unbind the previous editor's change event if it exists + if (oldEditor) { + const oldCM = oldEditor._codeMirror; + if (oldCM) { + oldCM.off("change", onChanged); + } + } - cm.setGutterMarker(obj.lineNumber, gutterName, $marker[0]); - } - }); + // Bind change event to the new editor + const cm = newEditor._codeMirror; + if (cm) { + cm.on("change", onChanged); } + showColorMarks(); } - }, - - // Method to remove colors when disabled - removeColorMarks: function () { - const editor = CssColorPreview.getEditor(); - if (editor) { - const cm = editor._codeMirror; - cm.clearGutter(gutterName); + }); + + // Handle the currently active editor at initialization + const activeEditor = EditorManager.getActiveEditor(); + if (activeEditor) { + const cm = activeEditor._codeMirror; + if (cm) { + cm.on("change", onChanged); } + showColorMarks(); } - }; + } + + /** + * Checks for preference changes, to enable/disable the feature + */ function preferenceChanged() { const value = PreferencesManager.get(PREFERENCES_CSS_COLOR_PREVIEW); enabled = value; if (!value) { - CssColorPreview.removeColorMarks(); + removeColorMarks(); } else { - CssColorPreview.showColorMarks(); + showColorMarks(); } } + /** + * Function that gets triggered when any change occurs on the editor + */ + function onChanged() { + showColorMarks(); + } + + /** + * Driver function, runs at the start of the program + */ + function init() { + showColorMarks(); + registerHandlers(); + } + // init after appReady AppInit.appReady(function () { PreferencesManager.on("change", PREFERENCES_CSS_COLOR_PREVIEW, preferenceChanged); - setTimeout(CssColorPreview.init, 1000); + init(); }); - }); diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 5ed299121..8b9fa46c0 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -3522,3 +3522,35 @@ label input { } } +// These styles are for CssColorPreview feature +// Check `extensionsIntegrated/CSSColorPreview for more reference +/* Single color preview */ +.ico-cssColorPreview { + border: solid 1px rgba(0, 0, 0, 0.2); + display: inline-block; + height: 14px; + width: 14px; + margin-left: 6px; + position: absolute; + top: 8px; + z-index: 99999; +} + +/* Multiple colors preview container (this is a div) */ +.ico-multiple-cssColorPreview { + position: relative; + display: inline-block; + width: 14px; + height: 14px; + margin-left: 6px; + border: solid 1px rgba(0, 0, 0, 0.2); + z-index: 99999; +} + +/* For individual color boxes, they will be added inside the main .ico-multiple-cssColorPreview div */ +.ico-multiple-cssColorPreview .color-box { + position: absolute; + width: 6px; + height: 6px; + box-sizing: border-box; +}