get rgba alpha channels to work

0xDaksh · Mar 14, 2019 · e4bb531 · e4bb531
1 parent 4edc798
commit e4bb531
Show file tree

Hide file tree

Showing 3 changed files with 1,538 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,53 +1,53 @@
 {
-    "name": "hex-to-rgba",
-    "displayName": "hex-to-rgba",
-    "description": "Hex-to-RGBA Allows designers to convert selected Hex Code to RGBA on VSCode easily.",
-    "version": "0.0.4",
-    "publisher": "dakshmiglani",
-    "author": "Daksh Miglani <hello@dak.sh>",
-    "license": "MIT",
-    "repository": "https://github.com/DakshMiglani/VSCode-Hex-To-RGBA.git",
-    "engines": {
-        "vscode": "^1.17.0"
-    },
-    "categories": [
-        "Other"
+  "name": "hex-to-rgba",
+  "displayName": "hex-to-rgba",
+  "description": "Hex-to-RGBA Allows designers to convert selected Hex Code to RGBA on VSCode easily.",
+  "version": "0.0.5",
+  "publisher": "dakshmiglani",
+  "author": "Daksh Miglani <hello@dak.sh>",
+  "license": "MIT",
+  "repository": "https://github.com/DakshMiglani/VSCode-Hex-To-RGBA.git",
+  "engines": {
+    "vscode": "^1.17.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "onCommand:extension.convertToRGBA"
+  ],
+  "main": "./out/extension",
+  "contributes": {
+    "commands": [
+      {
+        "command": "extension.convertToRGBA",
+        "title": "Convert Hex to RGBA"
+      }
     ],
-    "activationEvents": [
-        "onCommand:extension.convertToRGBA"
-    ],
-    "main": "./out/extension",
-    "contributes": {
-        "commands": [
-            {
-                "command": "extension.convertToRGBA",
-                "title": "Convert Hex to RGBA"
-            }
-        ],
-        "keybindings": [
-            {
-                "command": "extension.convertToRGBA",
-                "key": "ctrl+alt+h",
-                "mac": "cmd+shift+c",
-                "when": "editorTextFocus"
-            }
-        ]
-    },
-    "scripts": {
-        "vscode:prepublish": "npm run compile",
-        "compile": "tsc -p ./",
-        "watch": "tsc -watch -p ./",
-        "postinstall": "node ./node_modules/vscode/bin/install",
-        "test": "npm run compile && node ./node_modules/vscode/bin/test"
-    },
-    "devDependencies": {
-        "typescript": "^2.5.3",
-        "vscode": "^1.1.5",
-        "@types/node": "^7.0.43",
-        "@types/mocha": "^2.2.42"
-    },
-    "dependencies": {
-        "hex-rgba": "^1.0.1"
-    },
-    "icon": "icon.png"
+    "keybindings": [
+      {
+        "command": "extension.convertToRGBA",
+        "key": "ctrl+alt+h",
+        "mac": "cmd+shift+c",
+        "when": "editorTextFocus"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run compile",
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "postinstall": "node ./node_modules/vscode/bin/install",
+    "test": "npm run compile && node ./node_modules/vscode/bin/test"
+  },
+  "devDependencies": {
+    "@types/mocha": "^2.2.42",
+    "@types/node": "^7.0.43",
+    "typescript": "^2.5.3",
+    "vscode": "^1.1.5"
+  },
+  "dependencies": {
+    "hex-and-rgba": "^1.3.5"
+  },
+  "icon": "icon.png"
 }
diff --git a/src/extension.ts b/src/extension.ts
@@ -1,38 +1,55 @@
-'use strict';
+"use strict";
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
-import * as vscode from 'vscode';
-import * as HexToRGBA from 'hex-rgba'
+import * as vscode from "vscode";
+import * as HexAndRgba from "hex-and-rgba";
+
+const HexToRgba = HexAndRgba.hexToRgba;
+const converter = (hex, opacity) => {
+  let rgba = HexToRgba(hex);
+  if (opacity) {
+    rgba[rgba.length - 1] = opacity / 100;
+  }
+  return `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3].toPrecision(4)})`;
+};
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
-    // The command has been defined in the package.json file
-    // Now provide the implementation of the command with  registerCommand
-    // The commandId parameter must match the command field in package.json
-    let disposable = vscode.commands.registerCommand('extension.convertToRGBA', () => {
-        // The code you place here will be executed every time your command is executed
-        console.log('Hey Hacker, Thanks for Checking Out Hex-to-RGBA. I hope you liked it and if you did, then please checkout my other OpenSource Projects. Find me at: https://dak.sh')
-        if(typeof vscode.window.activeTextEditor != 'undefined') {
-            let editor = vscode.window.activeTextEditor
-            if(editor.document.getText(editor.selection) !== '') {
-                editor.edit((edit) => {
-                    let value =  editor.document.getText(editor.selection);
-                    let opacity = value.split('_')[1];
-                    edit.replace(editor.selection, HexToRGBA(value.split('_')[0], typeof opacity !== 'undefined' ? opacity : 100));
-                })
-            } else {
-                vscode.window.showErrorMessage('Select Something to convert to RGBA')
-            }
+  // The command has been defined in the package.json file
+  // Now provide the implementation of the command with  registerCommand
+  // The commandId parameter must match the command field in package.json
+  let disposable = vscode.commands.registerCommand(
+    "extension.convertToRGBA",
+    () => {
+      // The code you place here will be executed every time your command is executed
+      console.log(
+        "Hey Hacker, Thanks for Checking Out Hex-to-RGBA. I hope you liked it and if you did, then please checkout my other OpenSource Projects. Find me at: https://dak.sh"
+      );
+      if (typeof vscode.window.activeTextEditor != "undefined") {
+        let editor = vscode.window.activeTextEditor;
+        if (editor.document.getText(editor.selection) !== "") {
+          editor.edit(edit => {
+            let value = editor.document.getText(editor.selection);
+            let opacity = value.split("_")[1];
+            edit.replace(
+              editor.selection,
+              converter(value.split("_")[0], opacity)
+            );
+          });
         } else {
-            vscode.window.showErrorMessage('Please Open up a File to Edit.')
+          vscode.window.showErrorMessage("Select Something to convert to RGBA");
         }
-    });
+      } else {
+        vscode.window.showErrorMessage("Please Open up a File to Edit.");
+      }
+    }
+  );
 
-    context.subscriptions.push(disposable);
+  context.subscriptions.push(disposable);
 }
 
 // this method is called when your extension is deactivated
 export function deactivate() {
-    vscode.window.showInformationMessage('Hex-to-RGBA has been Deactivated!')
-}
+  vscode.window.showInformationMessage("Hex-to-RGBA has been Deactivated!");
+}