├── InlineUnitHelper.html ├── InlineUnitHelper.js ├── LICENSE ├── README.md ├── UnitUtils.js ├── css └── main.css ├── main.js └── package.json /InlineUnitHelper.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Values

5 |
    6 | {{#units}} 7 |
  1. {{{calc}}}
    2. 8 | {{/units}} 9 |
10 | 11 |
12 |
13 | 14 |
15 |

Inline Units Conversion

16 |

Click the value you want to change from the left side.

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
UnitDescription
pxpixels (a dot on the computer screen)
em1em is equal to the current font size. 2em means 2 times 30 | the size of the current font. E.g., if an element is displayed with a font 31 | of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since 32 | it can adapt automatically to the font that the reader uses 33 | (ems, the height of the element's font)
rem
exone ex is the x-height of a font (x-height is usually 42 | about half the font-size)
%percentage
ininch (inches; 1in=2.54cm)
cmcentimeter (centimeters; 1cm=10mm)
mmmillimeter
ptpoint (1 pt is the same as 1/72 inch)
pcpica (1 pc is the same as 12 points)
70 | 71 |
72 |
73 |
74 |
75 |
76 |
77 | -------------------------------------------------------------------------------- /InlineUnitHelper.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014 Yasin Kuyu - All rights reserved 3 | * twitter.com/yasinkuyu & github.com/yasinkuyu 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a 6 | * copy of this software and associated documentation files (the "Software"), 7 | * to deal in the Software without restriction, including without limitation 8 | * the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | * and/or sell copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following conditions: 11 | * 12 | * The above copyright notice and this permission notice shall be included in 13 | * all copies or substantial portions of the Software. 14 | * 15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | * DEALINGS IN THE SOFTWARE. 22 | * 23 | */ 24 | 25 | 26 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */ 27 | /*global define, brackets, $, window, Mustache */ 28 | 29 | define(function (require, exports, module) { 30 | 'use strict'; 31 | 32 | // Load Brackets modules 33 | var EditorManager = brackets.getModule("editor/EditorManager"), 34 | DocumentManager = brackets.getModule("document/DocumentManager"), 35 | InlineWidget = brackets.getModule("editor/InlineWidget").InlineWidget; 36 | 37 | // Load tempalte 38 | var inlineEditorTemplate = require("text!InlineUnitHelper.html"), 39 | UnitUtils = require("UnitUtils"); 40 | 41 | /** 42 | * @constructor 43 | */ 44 | function InlineUnitHelper(value, unit, startBookmark, endBookmark) { 45 | 46 | this._value = value; 47 | this._unit = unit; 48 | this._startBookmark = startBookmark; 49 | this._endBookmark = endBookmark; 50 | 51 | InlineWidget.call(this); 52 | 53 | } 54 | 55 | InlineUnitHelper.prototype = Object.create(InlineWidget.prototype); 56 | InlineUnitHelper.prototype.constructor = InlineUnitHelper; 57 | InlineUnitHelper.prototype.parentClass = InlineWidget.prototype; 58 | 59 | InlineUnitHelper.prototype._value = null; 60 | InlineUnitHelper.prototype._unit = null; 61 | 62 | /** 63 | * Start of the range of code we're attached to; _startBookmark.find() may by null if sync is lost. 64 | * @type {!CodeMirror.Bookmark} 65 | */ 66 | InlineUnitHelper.prototype._startBookmark = null; 67 | 68 | /** 69 | * End of the range of code we're attached to; _endBookmark.find() may by null if sync is lost or even 70 | * in some cases when it's not. Call getCurrentRange() for the definitive text range we're attached to. 71 | * @type {!CodeMirror.Bookmark} 72 | */ 73 | InlineUnitHelper.prototype._endBookmark = null; 74 | 75 | InlineUnitHelper.prototype.$wrapperDiv = null; 76 | InlineUnitHelper.prototype.$image = null; 77 | 78 | InlineUnitHelper.prototype.load = function (hostEditor) { 79 | 80 | InlineUnitHelper.prototype.parentClass.load.apply(this, arguments); 81 | 82 | var _this = this; 83 | 84 | var templateVars = { 85 | units : { 86 | "units": [ 87 | { "unit": "px", "value": convert(_this._value, _this._unit, "px") }, 88 | { "unit": "em", "value": convert(_this._value, _this._unit, "em") }, 89 | { "unit": "rem", "value": convert(_this._value, _this._unit, "rem") }, 90 | { "unit": "%", "value": convert(_this._value, _this._unit, "%") }, 91 | { "unit": "in", "value": convert(_this._value, _this._unit, "in") }, 92 | { "unit": "cm", "value": convert(_this._value, _this._unit, "cm") }, 93 | { "unit": "mm", "value":convert(_this._value, _this._unit, "mm") }, 94 | { "unit": "pt", "value": convert(_this._value, _this._unit, "pt") }, 95 | { "unit": "pc", "value": convert(_this._value, _this._unit, "pc") } 96 | ], 97 | "name": function () { 98 | return _this._value + _this._unit +" = "+ this.value + "" + this.unit; 99 | }, 100 | "calc": function () { 101 | return this.value; 102 | } 103 | } 104 | }; 105 | 106 | var html = Mustache.render(inlineEditorTemplate, templateVars.units); 107 | 108 | this.$wrapperDiv = $(html); 109 | 110 | $(this.$wrapperDiv.find(".btnUnit")).on("click", function(){ 111 | 112 | var getValue = $(this).attr("data-value"); 113 | 114 | _handleUnitChange(getValue); 115 | 116 | }); 117 | 118 | this.$htmlContent.append(this.$wrapperDiv); 119 | this.$htmlContent.click(this.close.bind(this)); 120 | 121 | }; 122 | 123 | InlineUnitHelper.prototype.onAdded = function () { 124 | InlineUnitHelper.prototype.parentClass.onAdded.apply(this, arguments); 125 | window.setTimeout(this._sizeEditorToContent.bind(this)); 126 | }; 127 | 128 | InlineUnitHelper.prototype._sizeEditorToContent = function () { 129 | this.hostEditor.setInlineWidgetHeight(this, this.$wrapperDiv.height() + 20, true); 130 | }; 131 | 132 | /** 133 | * Editor set select area or all text. 134 | * @param result content 135 | */ 136 | var _handleUnitChange = function(result){ 137 | 138 | var editor = EditorManager.getCurrentFullEditor(); 139 | 140 | if (editor) { 141 | var isSelection = false; 142 | var selectedText = editor.getSelectedText(); 143 | var selection = editor.getSelection(); 144 | 145 | if (selectedText.length > 0) { 146 | isSelection = true; 147 | } else { 148 | } 149 | 150 | var doc = DocumentManager.getCurrentDocument(); 151 | 152 | doc.batchOperation(function () { 153 | 154 | if (isSelection) { 155 | doc.replaceRange(result, selection.start, selection.end); 156 | } else { 157 | doc.setText(result); 158 | } 159 | 160 | }); 161 | } 162 | }; 163 | 164 | /** 165 | * Round Function 166 | * @param number int 167 | * @param decimals decimal 168 | */ 169 | var round = function (number, decimals) { 170 | return Math.round(number * Math.pow(10, decimals)) / Math.pow(10, decimals); 171 | }; 172 | 173 | // Test it, ctrl+e 174 | // 18.75em 175 | // 200pc 176 | // .10em 177 | // 602.25rem 178 | // 720px 179 | 180 | /** 181 | * Convert function 182 | * @param value int 183 | * @param from unit string 184 | * @param to unit string 185 | */ 186 | var convert = function (value, from, to) { 187 | var units = from + '-' + to, 188 | base = 16, dpi = 72, decimals = 2, 189 | result, 190 | formulas = { 191 | 192 | 'px-cm': value * 2.54 / dpi, 193 | 'px-em': value / base, 194 | 'px-rem': value / 100, // ok 195 | 'px-in': value / dpi, 196 | 'px-mm': value * 2.54 / dpi * 10, 197 | 'px-pc': value / base, 198 | 'px-pt': value * 72 / 96, 199 | 'px-%': value / base * 100, 200 | 201 | 'em-cm': value * 0.42175176, 202 | 'em-rem': value, 203 | 'em-in': value * 0.166044, 204 | 'em-mm': value / 0.237106301584, 205 | 'em-pc': value, 206 | 'em-pt': value * 11.955168, 207 | 'em-%': value * 100, 208 | 'em-px': value * base, 209 | 210 | '%-cm': value * base / 100 * 2.54 / dpi, 211 | '%-em': value / 100, 212 | '%-rem': value / 100, 213 | '%-in': value * base / 100 / dpi, 214 | '%-mm': value * base / 100 * 2.54 / dpi * 10, 215 | '%-pc': value / 100, 216 | '%-pt': value * (base - 4) / 100, 217 | '%-px': value * base / 100, 218 | 219 | 'in-cm': value * 2.54, 220 | 'in-em': value / 0.166044, 221 | 'in-rem': value / 0.166044, 222 | 'in-mm': value * 2.54 * 10, 223 | 'in-pc': value / 0.166044, 224 | 'in-pt': value / 0.014842519685, 225 | 'in-%': value / base * 100 * dpi, 226 | 'in-px': value * dpi, 227 | 228 | 'cm-em': value / 0.42175176, 229 | 'cm-in': value * 0.39, 230 | 'cm-mm': value * 10, 231 | 'cm-pc': value / 0.42175176, 232 | 'cm-pt': value * 28.3464566929, 233 | 'cm-%': value / base * 100 / 2.54 * dpi, 234 | 'cm-px': value / 2.54 * dpi, 235 | 236 | 'mm-cm': value / 10, 237 | 'mm-em': value * 0.237106301584, 238 | 'mm-rem': value * 0.237106301584, 239 | 'mm-in': value * 0.39 / 10, 240 | 'mm-pc': value / 4.42175176, 241 | 'mm-pt': value / 0.352777777778, 242 | 'mm-%': value / base * 100 / 2.54 * dpi / 10, 243 | 'mm-px': value / 2.54 * dpi / 10, 244 | 'mm-ex': value / 2.54 * dpi / 10, 245 | 246 | 'pt-cm': value / 28.3464566929, 247 | 'pt-em': value / 11.955168, 248 | 'pt-rem': value * 96 / 72, 249 | 'pt-in': value * 0.014842519685, 250 | 'pt-mm': value * 0.352777777778, 251 | 'pt-pc': value * 0.0836458341698, 252 | 'pt-%': value / (base - 4) * 100, 253 | 'pt-px': value * 96 / 72, 254 | 255 | 'pc-cm': value * 0.42175176, 256 | 'pc-em': value, 257 | 'pc-rem': value, 258 | 'pc-in': value * 0.166044, 259 | 'pc-mm': value * 4.42175176, 260 | 'pc-pt': value / 0.0836458341698, 261 | 'pc-%': value * 100, 262 | 'pc-px': value * base, 263 | 264 | 'rem-cm': value * 0.42175176, 265 | 'rem-em': value, 266 | 'rem-in': value * 0.166044, 267 | 'rem-mm': value * 4.42175176, 268 | 'rem-pt': value / 0.0836458341698, 269 | 'rem-%': value * 100, 270 | 'rem-px': value * 100 271 | 272 | }; 273 | 274 | result = formulas[units]; 275 | 276 | return (isNaN(result) ? 'N/A ' + to : round(result, decimals) + to); 277 | }; 278 | 279 | var _handleTooltip = function (e) { 280 | 281 | e.preventDefault(); 282 | 283 | var $target = $(e.target); 284 | 285 | var unitRegEx = new RegExp(UnitUtils.UNITS_REGEX), 286 | match; 287 | 288 | match = unitRegEx.exec($target.text()); 289 | 290 | if (match) { 291 | 292 | $($target).attr("data-tooltip", match[0]); 293 | $($target).trigger("mousemove"); 294 | } 295 | }; 296 | 297 | // ToDo handle tooltip 298 | //$(window.document).on("mousemove", _handleTooltip); 299 | 300 | module.exports = InlineUnitHelper; 301 | }); 302 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Yasin Kuyu - All rights reserved 4 | twitter.com/yasinkuyu & github.com/yasinkuyu 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Insya Brackets Units 2 | =========== 3 | 4 | Brackets Inline `Units Conversion` Extension (px to em / em to px etc.) 5 | 6 | ### Installation 7 | * Method 1: Open the Brackets Extension Manager and search for `brackets units` 8 | * Method 2: Download directly from GitHub using either the latest release and install the contents to `extensions/user/insya-units` folder. 9 | 10 | ### Units 11 | 12 | % percentage 13 | in inch 14 | cm centimeter 15 | mm millimeter 16 | em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses 17 | ex one ex is the x-height of a font (x-height is usually about half the font-size) 18 | pt point (1 pt is the same as 1/72 inch) 19 | pc pica (1 pc is the same as 12 points) 20 | px pixels (a dot on the computer screen) 21 | 22 | ### Using 23 | 24 | Select & `CTRL+E` 25 | 26 | ### Screencast 27 | 28 | ![Brackets Inline Units Conversion Extension](http://i58.tinypic.com/nmn6t1.gif) 29 | 30 | 31 | ### Roadmap 32 | 33 | ### Brackets Tools 34 | 35 | https://github.com/yasinkuyu/brackets-tools 36 | 37 | ### License 38 | 39 | The MIT License 40 | 41 | Created 2014 Yasin Kuyu - [@yasinkuyu](https://twitter.com/yasinkuyu) -------------------------------------------------------------------------------- /UnitUtils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014 Yasin Kuyu - All rights reserved 3 | * twitter.com/yasinkuyu & github.com/yasinkuyu 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a 6 | * copy of this software and associated documentation files (the "Software"), 7 | * to deal in the Software without restriction, including without limitation 8 | * the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | * and/or sell copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following conditions: 11 | * 12 | * The above copyright notice and this permission notice shall be included in 13 | * all copies or substantial portions of the Software. 14 | * 15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | * DEALINGS IN THE SOFTWARE. 22 | * 23 | */ 24 | 25 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */ 26 | /*global define */ 27 | 28 | define(function (require, exports) { 29 | "use strict"; 30 | 31 | /* 32 | * @Test & Contribution Pattern -> http://www.regexr.com/39424 33 | * Javascript, Html, CSS etc. units matches 34 | * @const @type {RegExp} 35 | */ 36 | var UNITS_REGEX = /(\d*\.?\d+)\s?(px|em|rem|ex|%|in|cm|mm|pt|pc+)/igm; 37 | 38 | // Define public API 39 | exports.UNITS_REGEX = UNITS_REGEX; 40 | }); 41 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014 Yasin Kuyu - All rights reserved 3 | * twitter.com/yasinkuyu & github.com/yasinkuyu 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a 6 | * copy of this software and associated documentation files (the "Software"), 7 | * to deal in the Software without restriction, including without limitation 8 | * the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | * and/or sell copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following conditions: 11 | * 12 | * The above copyright notice and this permission notice shall be included in 13 | * all copies or substantial portions of the Software. 14 | * 15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | * DEALINGS IN THE SOFTWARE. 22 | * 23 | */ 24 | 25 | /** 26 | * Units value list 27 | */ 28 | 29 | ol.css-unit-values{ 30 | color: #333; 31 | } 32 | ol.css-unit-values li{ 33 | padding:0 0 0 15px; 34 | } 35 | ol.css-unit-values li a{ 36 | line-height: 23px; 37 | display: block; 38 | } 39 | 40 | /** 41 | * Units referances table 42 | */ 43 | 44 | table.css-reference{ 45 | width: 80%; 46 | background: transparent; 47 | text-align: left; 48 | vertical-align: top; 49 | } 50 | 51 | /** 52 | * Tooltips! 53 | */ 54 | 55 | /* Base styles for the element that has a tooltip */ 56 | [data-tooltip], 57 | .tooltip { 58 | position: relative; 59 | cursor: pointer; 60 | } 61 | 62 | /* Base styles for the entire tooltip */ 63 | [data-tooltip]:before, 64 | [data-tooltip]:after, 65 | .tooltip:before, 66 | .tooltip:after { 67 | position: absolute; 68 | visibility: hidden; 69 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 70 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 71 | opacity: 0; 72 | -webkit-transition: 73 | opacity 0.2s ease-in-out, 74 | visibility 0.2s ease-in-out, 75 | -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 76 | -moz-transition: 77 | opacity 0.2s ease-in-out, 78 | visibility 0.2s ease-in-out, 79 | -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 80 | transition: 81 | opacity 0.2s ease-in-out, 82 | visibility 0.2s ease-in-out, 83 | transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 84 | -webkit-transform: translate3d(0, 0, 0); 85 | -moz-transform: translate3d(0, 0, 0); 86 | transform: translate3d(0, 0, 0); 87 | pointer-events: none; 88 | } 89 | 90 | /* Show the entire tooltip on hover and focus */ 91 | [data-tooltip]:hover:before, 92 | [data-tooltip]:hover:after, 93 | [data-tooltip]:focus:before, 94 | [data-tooltip]:focus:after, 95 | .tooltip:hover:before, 96 | .tooltip:hover:after, 97 | .tooltip:focus:before, 98 | .tooltip:focus:after { 99 | visibility: visible; 100 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 101 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 102 | opacity: 1; 103 | } 104 | 105 | /* Base styles for the tooltip's directional arrow */ 106 | .tooltip:before, 107 | [data-tooltip]:before { 108 | z-index: 1001; 109 | border: 6px solid transparent; 110 | background: transparent; 111 | content: ""; 112 | } 113 | 114 | /* Base styles for the tooltip's content area */ 115 | .tooltip:after, 116 | [data-tooltip]:after { 117 | z-index: 1000; 118 | padding: 8px; 119 | width: 160px; 120 | background-color: #000; 121 | background-color: hsla(0, 0%, 20%, 0.9); 122 | color: #fff; 123 | content: attr(data-tooltip); 124 | font-size: 14px; 125 | line-height: 1.2; 126 | } 127 | 128 | /* Directions */ 129 | 130 | /* Top (default) */ 131 | [data-tooltip]:before, 132 | [data-tooltip]:after, 133 | .tooltip:before, 134 | .tooltip:after, 135 | .tooltip-top:before, 136 | .tooltip-top:after { 137 | bottom: 100%; 138 | left: 50%; 139 | } 140 | 141 | [data-tooltip]:before, 142 | .tooltip:before, 143 | .tooltip-top:before { 144 | margin-left: -6px; 145 | margin-bottom: -12px; 146 | border-top-color: #000; 147 | border-top-color: hsla(0, 0%, 20%, 0.9); 148 | } 149 | 150 | /* Horizontally align top/bottom tooltips */ 151 | [data-tooltip]:after, 152 | .tooltip:after, 153 | .tooltip-top:after { 154 | margin-left: -80px; 155 | } 156 | 157 | [data-tooltip]:hover:before, 158 | [data-tooltip]:hover:after, 159 | [data-tooltip]:focus:before, 160 | [data-tooltip]:focus:after, 161 | .tooltip:hover:before, 162 | .tooltip:hover:after, 163 | .tooltip:focus:before, 164 | .tooltip:focus:after, 165 | .tooltip-top:hover:before, 166 | .tooltip-top:hover:after, 167 | .tooltip-top:focus:before, 168 | .tooltip-top:focus:after { 169 | -webkit-transform: translateY(-12px); 170 | -moz-transform: translateY(-12px); 171 | transform: translateY(-12px); 172 | } 173 | 174 | /* Left */ 175 | .tooltip-left:before, 176 | .tooltip-left:after { 177 | right: 100%; 178 | bottom: 50%; 179 | left: auto; 180 | } 181 | 182 | .tooltip-left:before { 183 | margin-left: 0; 184 | margin-right: -12px; 185 | margin-bottom: 0; 186 | border-top-color: transparent; 187 | border-left-color: #000; 188 | border-left-color: hsla(0, 0%, 20%, 0.9); 189 | } 190 | 191 | .tooltip-left:hover:before, 192 | .tooltip-left:hover:after, 193 | .tooltip-left:focus:before, 194 | .tooltip-left:focus:after { 195 | -webkit-transform: translateX(-12px); 196 | -moz-transform: translateX(-12px); 197 | transform: translateX(-12px); 198 | } 199 | 200 | /* Bottom */ 201 | .tooltip-bottom:before, 202 | .tooltip-bottom:after { 203 | top: 100%; 204 | bottom: auto; 205 | left: 50%; 206 | } 207 | 208 | .tooltip-bottom:before { 209 | margin-top: -12px; 210 | margin-bottom: 0; 211 | border-top-color: transparent; 212 | border-bottom-color: #000; 213 | border-bottom-color: hsla(0, 0%, 20%, 0.9); 214 | } 215 | 216 | .tooltip-bottom:hover:before, 217 | .tooltip-bottom:hover:after, 218 | .tooltip-bottom:focus:before, 219 | .tooltip-bottom:focus:after { 220 | -webkit-transform: translateY(12px); 221 | -moz-transform: translateY(12px); 222 | transform: translateY(12px); 223 | } 224 | 225 | /* Right */ 226 | .tooltip-right:before, 227 | .tooltip-right:after { 228 | bottom: 50%; 229 | left: 100%; 230 | } 231 | 232 | .tooltip-right:before { 233 | margin-bottom: 0; 234 | margin-left: -12px; 235 | border-top-color: transparent; 236 | border-right-color: #000; 237 | border-right-color: hsla(0, 0%, 20%, 0.9); 238 | } 239 | 240 | .tooltip-right:hover:before, 241 | .tooltip-right:hover:after, 242 | .tooltip-right:focus:before, 243 | .tooltip-right:focus:after { 244 | -webkit-transform: translateX(12px); 245 | -moz-transform: translateX(12px); 246 | transform: translateX(12px); 247 | } 248 | 249 | /* Move directional arrows down a bit for left/right tooltips */ 250 | .tooltip-left:before, 251 | .tooltip-right:before { 252 | top: 3px; 253 | } 254 | 255 | /* Vertically center tooltip content for left/right tooltips */ 256 | .tooltip-left:after, 257 | .tooltip-right:after { 258 | margin-left: 0; 259 | margin-bottom: -16px; 260 | } 261 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2014 Yasin Kuyu - All rights reserved 3 | * twitter.com/yasinkuyu & github.com/yasinkuyu 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a 6 | * copy of this software and associated documentation files (the "Software"), 7 | * to deal in the Software without restriction, including without limitation 8 | * the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | * and/or sell copies of the Software, and to permit persons to whom the 10 | * Software is furnished to do so, subject to the following conditions: 11 | * 12 | * The above copyright notice and this permission notice shall be included in 13 | * all copies or substantial portions of the Software. 14 | * 15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | * DEALINGS IN THE SOFTWARE. 22 | * 23 | */ 24 | 25 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */ 26 | /*global define, brackets, $, window */ 27 | 28 | define(function (require, exports, module) { 29 | "use strict"; 30 | 31 | // Brackets modules 32 | var EditorManager = brackets.getModule("editor/EditorManager"), 33 | ExtensionUtils = brackets.getModule("utils/ExtensionUtils"); 34 | 35 | // Local modules 36 | var InlineUnitHelper = require("InlineUnitHelper"), 37 | UnitUtils = require("UnitUtils"); 38 | 39 | /** 40 | * Prepare hostEditor for an InlineUnitEditor at pos if possible. Return 41 | * editor context if so; otherwise null. 42 | */ 43 | function prepareEditorForProvider(hostEditor, pos) { 44 | var unitRegEx, cursorLine, match, sel, start, end, startBookmark, endBookmark; 45 | 46 | sel = hostEditor.getSelection(); 47 | if (sel.start.line !== sel.end.line) { 48 | return null; 49 | } 50 | 51 | unitRegEx = new RegExp(UnitUtils.UNITS_REGEX); 52 | //unitRegEx = new RegExp(/(\d*\.?\d+)\s?(\w+)/igm); 53 | 54 | cursorLine = hostEditor.document.getLine(pos.line); 55 | 56 | // Loop through each match of unitRegEx and stop when the one that contains pos is found. 57 | do { 58 | match = unitRegEx.exec(cursorLine); 59 | if (match) { 60 | start = match.index; 61 | end = start + match[0].length; 62 | }else{ 63 | } 64 | } while (match && (pos.ch < start || pos.ch > end)); 65 | 66 | if (!match) { 67 | return null; 68 | } 69 | 70 | // Adjust pos to the beginning of the match so that the inline editor won't get 71 | pos.ch = start; 72 | 73 | startBookmark = hostEditor._codeMirror.setBookmark(pos); 74 | endBookmark = hostEditor._codeMirror.setBookmark({ line: pos.line, ch: end }); 75 | 76 | hostEditor.setSelection(pos, { line: pos.line, ch: end }); 77 | 78 | return { 79 | value: match[1], 80 | unit: match[2], 81 | start: startBookmark, 82 | end: endBookmark 83 | }; 84 | } 85 | 86 | /** 87 | * This function is registered with EditManager as an inline editor provider. It creates an inline editor 88 | * when cursor is on a JavaScript function name, find all functions that match the name 89 | * and show (one/all of them) in an inline editor. 90 | * 91 | * @param {!Editor} editor 92 | * @param {!{line:Number, ch:Number}} pos 93 | * @return {$.Promise} a promise that will be resolved with an InlineWidget 94 | * or null if we're not going to provide anything. 95 | */ 96 | function inlineUnitHelperProvider(hostEditor, pos) { 97 | 98 | var context = prepareEditorForProvider(hostEditor, pos), 99 | inlineUnitEditor, 100 | result; 101 | 102 | if (!context) { 103 | return null; 104 | } else { 105 | inlineUnitEditor = new InlineUnitHelper(context.value, context.unit, context.start, context.end); 106 | inlineUnitEditor.load(hostEditor); 107 | 108 | result = new $.Deferred(); 109 | result.resolve(inlineUnitEditor); 110 | return result.promise(); 111 | } 112 | 113 | } 114 | 115 | // Initialize extension 116 | ExtensionUtils.loadStyleSheet(module, "css/main.css"); 117 | EditorManager.registerInlineEditProvider(inlineUnitHelperProvider); 118 | 119 | // for use by other InlineColorEditors 120 | exports.inlineUnitHelperProvider = inlineUnitHelperProvider; 121 | 122 | }); 123 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "insya.units", 3 | "title": "Inline Units Conversion", 4 | "description": "Brackets Inline Units Conversion Extension (px to em / em to px etc.)", 5 | "homepage": "https://github.com/yasinkuyu/brackets-units", 6 | "version": "0.0.7", 7 | "author": "Yasin Kuyu ", 8 | "keywords": [ 9 | "unit convert", "unit helper", "em to px", "px to em", "rem to px" 10 | ], 11 | "license": "MIT", 12 | "engines": { 13 | "brackets": ">=0.24.0" 14 | } 15 | } 16 | --------------------------------------------------------------------------------