Permalink
Browse files

Add guideColor preference

  • Loading branch information...
1 parent 63a6bdc commit 2c0c8123bd3d6b2006eb2ccd7bf867b914e50f7d @lkcampbell committed Sep 22, 2014
Showing with 101 additions and 52 deletions.
  1. BIN .DS_Store
  2. +7 −4 README.md
  3. +0 −4 indent-guide-dotted.svg
  4. +0 −4 indent-guide.svg
  5. +0 −11 main.css
  6. +73 −28 main.js
  7. +1 −1 package.json
  8. +20 −0 snap.svg-min.js
View
Binary file not shown.
View
@@ -15,14 +15,17 @@ Toggle the extension with **View > Indent Guides**.
If the value of this preference is `true`, Indent Guides will be visible.
If the value is `false`, Indent Guides will be hidden.
+**`brackets-indent-guides.guideColor`** *(string)*<br/>
+The color of the indent guides. Can be any valid CSS Color value.
+
+**`brackets-indent-guides.guideStyle`** *(string)*<br/>
+This value determines the style of the guide: "solid" or "dotted".
+
**`brackets-indent-guides.hideFirst`** *(boolean)*<br/>
If the value of this preference is `true` the first Indent Guide will not be drawn.
This is useful if you are using a Brackets Theme that has a vertical border separating
the line numbers from the code. Set the value to `false` to draw all Indent Guides.
-**`brackets-indent-guides.guideStyle`** *(string)*<br/>
-This value determines the style of the guide: "solid" or "dotted".
-
For more information on setting preferences see [How to Use Brackets - Preferences](https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences)
### Known Issues
@@ -42,4 +45,4 @@ issue list.
MIT-licensed -- see `main.js` for details.
### Compatibility
-Tested on Brackets Sprint 37 Mac OSX (Mavericks).
+Tested on Brackets Release 0.43 Mac OSX (Mavericks).
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1px" height="2px">
- <rect width="1" height="1" style="fill:rgba(128, 128, 128, 0.5);" />
-</svg>
View
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1px" height="1px">
- <rect width="1" height="1" style="fill:rgba(128, 128, 128, 0.5);" />
-</svg>
View
@@ -1,11 +0,0 @@
-.cm-lkcampbell-indent-guides {
- position: relative;
- background-image: url(indent-guide.svg);
- background-repeat: repeat-y;
-}
-
-.cm-lkcampbell-indent-guides-dotted {
- position: relative;
- background-image: url(indent-guide-dotted.svg);
- background-repeat: repeat-y;
-}
View
@@ -35,23 +35,70 @@ define(function (require, exports, module) {
EditorManager = brackets.getModule("editor/EditorManager"),
AppInit = brackets.getModule("utils/AppInit"),
CommandManager = brackets.getModule("command/CommandManager"),
- DocumentManager = brackets.getModule("document/DocumentManager"),
- ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
+ DocumentManager = brackets.getModule("document/DocumentManager");
+
+ // SVG support
+ var Snap = require("snap.svg-min");
// Constants
var COMMAND_NAME = "Indent Guides",
- COMMAND_ID = "lkcampbell.toggleIndentGuides";
+ COMMAND_ID = "lkcampbell.toggleIndentGuides",
+ GUIDE_CLASS = "lkcampbell-indent-guides";
+
+ var guideSVG = null,
+ guideRect = null;
+ // Define extension preferences
var enabled = false,
hideFirst = false,
+ guideColor = "rgba(128, 128, 128, 0.5)",
guideStyle = "solid",
- styleClass = "lkcampbell-indent-guides",
prefs = PreferencesManager.getExtensionPrefs("brackets-indent-guides");
-
- // Define extension preferences
- prefs.definePreference("enabled", "boolean", false);
- prefs.definePreference("hideFirst", "boolean", false);
- prefs.definePreference("guideStyle", "string", "solid");
+
+ prefs.definePreference("enabled", "boolean", enabled);
+ prefs.definePreference("hideFirst", "boolean", hideFirst);
+ prefs.definePreference("guideColor", "string", guideColor);
+ prefs.definePreference("guideStyle", "string", guideStyle);
+
+ function updateStyleRules() {
+ var svgStr = "",
+ imgStr = "",
+ cssStr = "";
+
+ if ($("#lkcampbell-indent-guides-css").length) {
+ $("#lkcampbell-indent-guides-css").remove();
+ }
+
+ svgStr = window.btoa(guideSVG.toString());
+ imgStr = "url(data:image/svg+xml;base64," + svgStr + ")";
+
+ cssStr = ".cm-lkcampbell-indent-guides { ";
+ cssStr += "position: relative; ";
+ cssStr += "background-repeat: repeat-y; ";
+ cssStr += "background-image: " + imgStr + "; ";
+ cssStr += "}";
+
+ $("<style id='lkcampbell-indent-guides-css'>").text(cssStr).appendTo("head");
+ }
+
+ function setGuideColor(color) {
+ guideRect.attr({ style: "fill:" + color + ";" });
+ updateStyleRules();
+ }
+
+ function setGuideStyle(style) {
+ switch (style) {
+ case "solid":
+ guideSVG.attr({ height: "1px" });
+ break;
+ case "dotted":
+ guideSVG.attr({ height: "2px" });
+ break;
+ default:
+ }
+
+ updateStyleRules();
+ }
// CodeMirror overlay code
var indentGuidesOverlay = {
@@ -70,7 +117,7 @@ define(function (require, exports, module) {
}
if (char === "\t") {
- return styleClass;
+ return GUIDE_CLASS;
}
if (char !== " ") {
@@ -82,7 +129,7 @@ define(function (require, exports, module) {
isTabStart = (colNum % spaceUnits) ? false : true;
if ((char === " ") && (isTabStart)) {
- return styleClass;
+ return GUIDE_CLASS;
} else {
return null;
}
@@ -93,18 +140,11 @@ define(function (require, exports, module) {
function applyPreferences() {
enabled = prefs.get("enabled");
hideFirst = prefs.get("hideFirst");
+ guideColor = prefs.get("guideColor");
guideStyle = prefs.get("guideStyle");
- switch (guideStyle) {
- case "solid":
- styleClass = "lkcampbell-indent-guides";
- break;
- case "dotted":
- styleClass = "lkcampbell-indent-guides-dotted";
- break;
- default:
- styleClass = "lkcampbell-indent-guides";
- }
+ setGuideColor(guideColor);
+ setGuideStyle(guideStyle);
}
function updateUI() {
@@ -116,6 +156,7 @@ define(function (require, exports, module) {
cm.removeOverlay(indentGuidesOverlay);
if (enabled) {
cm.addOverlay(indentGuidesOverlay);
+ updateStyleRules();
}
cm.refresh();
}
@@ -133,7 +174,7 @@ define(function (require, exports, module) {
// Initialize extension
AppInit.appReady(function () {
- // Register toggle command and add it to View menu
+ // Register command and add to menu
CommandManager.register(COMMAND_NAME, COMMAND_ID, handleToggleGuides);
Menus.getMenu(Menus.AppMenuBar.VIEW_MENU).addMenuItem(COMMAND_ID);
@@ -145,11 +186,15 @@ define(function (require, exports, module) {
$(DocumentManager).on("currentDocumentChange", updateUI);
- // Load style sheet, then update the UI
- ExtensionUtils.loadStyleSheet(module, "main.css")
- .done(function () {
- applyPreferences();
- updateUI();
- });
+ // Initialize guide SVG
+ guideSVG = new Snap();
+ guideRect = guideSVG.rect(0, 0, 1, 1);
+
+ guideSVG.attr({ height: "1px", width: "1px" });
+ guideRect.attr({ style: "fill:" + guideColor + ";" });
+
+ // Apply preferences and draw indent guides
+ applyPreferences();
+ updateUI();
});
});
View
@@ -1,7 +1,7 @@
{
"name": "brackets-indent-guides",
"title": "Indent Guides",
- "version": "1.2.2",
+ "version": "1.3.0",
"description": "Show indent guides in the code editor.",
"homepage": "https://github.com/lkcampbell/brackets-indent-guides",
"author": "Lance Campbell lkcampbell@gmail.com (https://github.com/lkcampbell)",
View
Oops, something went wrong.

0 comments on commit 2c0c812

Please sign in to comment.