Mixins support + color previews

README.md

@@ -1,46 +1,34 @@
-#SASShints
-> Autocompletion for SASS/SCSS variables
+# SASShints (fork by [maximmis](https://github.com/maximmis))
+#### Autocompletion for SASS/SCSS variables and mixins in [Brackets](http://brackets.io). Now with added support for color previews
 
-This extension for [Brackets](http://brackets.io) gives you hints for SASS/SCSS variables and shows what these variables actually are.
+> This is a fork of the original extension by [konstantinkobs](https://github.com/konstantinkobs/brackets-SASShints/issues/3) to add variable and mixin hinting functionality for SASS/SCSS.
+This fork and the code changes within it have been created by [DonChillow](https://github.com/DonChillow), [Systaro](https://github.com/Systaro) and [Dularion](https://github.com/Dularion). Color previews via [TinyColor](https://github.com/bgrins/TinyColor).
 
-![screenshot](screenshots/screenshot1.png)
+## Variables
 
-It even has fuzzy search capabilities, so you can for example do this:
+![screenshot](screenshots/vars.gif)
 
-![screenshot](screenshots/screenshot2.png)
+## Mixins
+> NOTE: if you start typing **@include**, the hints will be filtered by those letters (ie 'include'), meaning you might not see some of the mixins that you ought to see.
+Just type **@** followed by your mixins name, and the list will be filtered. For instance, **@vendo** will find the mixins that include that substring, such as **@mixin vendor-property()**
 
-##How to use
+![screenshot](screenshots/mixins.gif)
 
-1. Open a *SASS* or *SCSS* file
-2. Work with it
-3. Press **$** like you do when you want to insert a variable
-4. Get a list of all variables with their values
-
-##How to install
-There are three possible ways:
+## Fuzzy search capabilities
 
-1. Install the extension via the Extension Manager in Brackets: ```File -> Extension Manager -> search for 'SASShints'```
-2. Copy the url of this repository and paste it into ```File -> Extension Manager -> Install from URL```
-3. [Download the code](https://github.com/konstantinkobs/brackets-SASShints/archive/master.zip) and extract it to the Extensions Folder: ```Help -> Show Extension Folder -> user```
+![screenshot](screenshots/fuzzy-search.gif)
 
-##The MIT License (MIT)
+## How to use
 
-Copyright (c) 2014 Konstantin Kobs
+1. Open a *SASS* or *SCSS* file
+2. Write awesome code
+3. Press **$** to insert a variable or **@** to insert an @include
+4. Get a list of all variables or mixins with their values
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+## How to install
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+Three possible ways:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+1. Directly from Brackets: ```File -> Extension Manager -> search for SASS/SCSS Hints```
+2. Copy the url of this repository and paste it into ```File -> Extension Manager -> Install from URL```
+3. [Download the code](https://github.com/maximmis/brackets-SASShints/archive/master.zip) and extract it to the Extensions Folder: ```Help -> Show Extension Folder -> user```

main.js

@@ -35,6 +35,9 @@ define(function (require, exports, module) {
         FileUtils = brackets.getModule("file/FileUtils"),
         Async = brackets.getModule("utils/Async");
 
+    // Color swatch micro-framework
+    var TinyColor = require("tinycolor-min");
+
 
     // All file extensions that are supported
     var fileextensions = ["sass", "scss"];
@@ -45,13 +48,18 @@ define(function (require, exports, module) {
     function Hint() {
 
         // Some settings
-        this.implicitChar = "$";
-        this.regex = /\$([\w\-]+)\s*:\s*([^\n;]+)/ig;
-        this.chars = /[\$\w\-]/i;
+        this.implicitCharVars = "$"; //defines hintChar $ for variables
+        this.implicitCharMixins = "@"; //defines hintChar @ for mixins
+
+        this.regexVars = /\$([\w\-]+)\s*:\s*([^\n;]+)/ig; //defines regex for variables
+        this.regexMixin = /@mixin(.*)/ig; //defines regex for mixins
+        this.regex = this.regexVars; //the regex variable, which will be overwritten with one of the above depnding on the hint trigger. Defaults to variable regex
+        this.chars = /([\$\w\-]|[\@\w\-])/i;
 
         // Array with hints and the visual list in HTML
         this.hints = [];
         this.hintsHTML = [];
+        this.currentTrigger;
 
         // String which was written since the hinter is active
         this.writtenSinceStart = "";
@@ -70,14 +78,35 @@ define(function (require, exports, module) {
      */
     Hint.prototype.hasHints = function (editor, implicitChar) {
 
-        // The editor instance
-        this.editor = editor;
+        var isValidTrigger = false;
 
-        // Set the start position for calculating the written text later
-        this.startPos = editor.getCursorPos();
+        // Check if the written character is the vars trigger & set regex
+        if (implicitChar === this.implicitCharVars) {
+            isValidTrigger = true;
+            this.regex = this.regexVars;
+        }
+
+        // Check if the written character is the mixins trigger & set regex
+        else if (implicitChar === this.implicitCharMixins) {
+            isValidTrigger = true;
+            this.regex = this.regexMixin;
+        }
 
-        // Check if the written character is the trigger
-        return implicitChar ? implicitChar === this.implicitChar : false;
+
+        if (isValidTrigger) {
+            // The editor instance
+            this.editor = editor;
+
+            // Set the start position for calculating the written text later
+            this.startPos = editor.getCursorPos();
+
+            //sets currentTrigger, so that the extension knows which trigger was used
+            this.currentTrigger = implicitChar;
+
+            return true;
+        }
+
+        return false;
 
     };
 
@@ -101,17 +130,20 @@ define(function (require, exports, module) {
         // so we rename it to that.
         var that = this;
 
-        // Get the text in the file
-        this.getText().done(function (text) {
+        // Get the text in the file. Texts are returned as one array with multiple objects, each containing the files content and the file reference
+        this.getText().done(function (texts) {
+            var allMatches = [];
 
-            // Get all matches for the RegExp set earlier
-            var matches = that.getAll(that.regex, text);
+            //iterate over texts from all files
+            texts.forEach(function (elem) {
+                // Get all matches for the RegExp set earlierf
+                allMatches = allMatches.concat(that.getAll(that.regex, elem.content, elem.file._name));
+            });
 
             // Filter the results by everything the user wrote before
-            matches = that.filterHints(matches);
-
+            allMatches = that.filterHints(allMatches);
             // Prepare the hint arrays
-            that.processHints(matches);
+            that.processHints(allMatches);
 
             // Send hints to caller
             result.resolve({
@@ -217,20 +249,25 @@ define(function (require, exports, module) {
                 DocumentManager.getDocumentText(file)
                     .done(function (content) {
 
-                        texts.push(content);
 
-                    }).always(function () {
+                    //create object with content and file reference, which is returned by the getText function
+                    texts.push({
+                        content: content,
+                        file: file
+                    });
+
+                }).always(function () {
 
-                        parallelResult.resolve();
+                    parallelResult.resolve();
 
-                    });
+                });
 
                 return parallelResult.promise();
 
                 // Give the contents back to caller
             }).always(function () {
 
-                result.resolve(texts.join("\n\n"));
+                result.resolve(texts /*.join("\n\n")*/ );
 
             });
 
@@ -256,7 +293,7 @@ define(function (require, exports, module) {
      * @param   {String} text  The searchable string
      * @returns {Array}  All matches of the RegExp in the string
      */
-    Hint.prototype.getAll = function (regex, text) {
+    Hint.prototype.getAll = function (regex, text, filename) {
 
         // We start empty
         var matches = [];
@@ -265,9 +302,11 @@ define(function (require, exports, module) {
         var match;
         while ((match = regex.exec(text)) !== null) {
 
+            match.push(filename);
             // Push it to the array
             matches.push(match);
 
+
         }
 
         // Return the match array
@@ -282,6 +321,7 @@ define(function (require, exports, module) {
      * @returns {Array} the filtered Array
      */
     Hint.prototype.filterHints = function (matches) {
+        var that = this;
 
         // Split it up/convert to array for fuzzy search
         var written = this.writtenSinceStart.toLowerCase().split("");
@@ -318,7 +358,8 @@ define(function (require, exports, module) {
      *
      * @param   {Array}    matches All the matches (already filtered)
      */
-    Hint.prototype.processHints = function (matches) {
+    Hint.prototype.processHints = function (matches, file) {
+        var that = this;
 
         // Sort all filtered matches alphabetically
         matches = matches.sort(function (match1, match2) {
@@ -338,15 +379,44 @@ define(function (require, exports, module) {
 
         // Put every hint for insertion in the hints array
         this.hints = matches.map(function (match) {
-            return match[1];
+
+            //if the results are variables, just the match is needed for insertion into the dom
+            if (that.currentTrigger === that.implicitCharVars) {
+                return match[1];
+            }
+
+            //if the results are mixins, we need to add the keyword "include" before the match, and we need to remove the trailing "{"
+            if (that.currentTrigger === that.implicitCharMixins) {
+                return 'include' + match[1].replace(' {', ';');
+            }
         });
 
         // Create the hintsHTML array which will be shown to the
         // user. It has a preview of what the variable is set to.
         this.hintsHTML = matches.map(function (match) {
-            return match[1] + "<span style='color:#a0a0a0; margin-left: 10px'>" + match[2] + "</span>";
-        });
 
+            //this creates the html markup for the Variable hints. I used a rgb(111, 232, 247) color and a little label to show the user, that these are variables
+            if (that.currentTrigger === that.implicitCharVars) {
+                var matchValue = TinyColor(match[2]);
+                var colorTemplate = '';
+
+                //Check if value is a valid color
+                //Using Brackets default swatch class for styling
+                if (TinyColor(matchValue).isValid()){
+                    colorTemplate = "<span class='color-swatch' style='float:right; background-color:" + matchValue.toHexString() + ";'></span>";
+                }
+
+                return "<span style='color: rgb(111, 232, 247); font-weight: bold; font-size: 10px; margin-right: 2px;'>var</span> " + match[1] + colorTemplate + " <span style='color:#a0a0a0; margin-left: 10px'>" + match[2] + "</span>";
+            }
+
+            //this creates the html markup for the Mixin hints. I used a rgb(255, 110, 176) color and a little label to show the user, that these are mixins
+            if (that.currentTrigger === that.implicitCharMixins) {
+                return "<span style='color: rgb(255, 110, 176); font-weight: bold; font-size: 10px; margin-right: 2px;'>include</span> " + match[1].replace(' {', ';') + " <span style='color:#a0a0a0; margin-left: 10px'>" + match[2] + "</span>";
+            }
+
+            return false;
+
+        });
     };
 
     /**
@@ -356,4 +426,4 @@ define(function (require, exports, module) {
         var hints = new Hint();
         CodeHintManager.registerHintProvider(hints, fileextensions, 0);
     });
-});
+});

package.json

@@ -2,8 +2,9 @@
     "name": "sasshints",
     "title": "SASSHints",
     "author": "Konstantin Kobs",
-    "homepage": "https://github.com/konstantinkobs/brackets-SASShints",
-    "version": "1.1.0",
+    "contributors": "Max M.",
+    "homepage": "https://github.com/maximmis/brackets-SASShints",
+    "version": "1.2.0",
     "engines": { "brackets": ">=0.23" },
-    "description": "Autocompletion for SASS/SCSS variables."
-}
+    "description": "Autocompletion for SASS/SCSS variables and mixins. Color previews included. Forked and updated from: https://github.com/konstantinkobs/brackets-SASShints"
+}