Skip to content
This repository
Browse code

Stash work on fauxcomplete. Not finished

  • Loading branch information...
commit b899c4cc794b0127408bf5f697d2407039633bd9 1 parent affdc1d
Tom MacWright authored December 01, 2011
27  assets/css/style.css
@@ -1583,3 +1583,30 @@ tr:hover th,
1583 1583
   margin-left:20px;
1584 1584
   }
1585 1585
 
  1586
+.completions {
  1587
+  border-radius:3px;
  1588
+  border:1px solid #888;
  1589
+  overflow:hidden;
  1590
+  max-width:300px;
  1591
+  background:#fff;
  1592
+}
  1593
+
  1594
+.completions div {
  1595
+  padding:2px;
  1596
+  font-family: DroidSansMono,monospace;
  1597
+  font-size:11px;
  1598
+  line-height:16px;
  1599
+}
  1600
+
  1601
+.completions div.selected {
  1602
+  background:#476E91;
  1603
+  color:#fff;
  1604
+}
  1605
+
  1606
+.completions div span {
  1607
+  color:#aaa;
  1608
+}
  1609
+
  1610
+.completions div.selected span {
  1611
+  color:#fff;
  1612
+}
59  assets/js/codemirror.carto.complete.js
@@ -5,12 +5,15 @@
5 5
 
6 6
     function cartoCompletion(editor, reference) {
7 7
         var widget = document.createElement('div'),
8  
-            sel = widget.appendChild(document.createElement('select')),
  8
+            sel = widget.appendChild(document.createElement('div')),
  9
+            $fake = $(document.createElement('input')),
9 10
             ids = [],
10 11
             classes = [],
11 12
             $widget = $(widget),
12 13
             $sel = $(sel);
13 14
 
  15
+        $fake.appendTo(widget).hide();
  16
+
14 17
         function cancelEvent(e) {
15 18
             if (!e) return;
16 19
             e.cancelBubble = true;
@@ -25,10 +28,13 @@
25 28
             var ids = [];
26 29
             for (var i in reference.symbolizers) {
27 30
                 for (var j in reference.symbolizers[i]) {
28  
-                    ids.push(reference.symbolizers[i][j].css);
  31
+                    ids.push({
  32
+                        doc: reference.symbolizers[i][j].doc || '',
  33
+                        val: reference.symbolizers[i][j].css
  34
+                    });
29 35
                 }
30 36
             }
31  
-            return _.uniq(ids);
  37
+            return ids;
32 38
         })(reference);
33 39
 
34 40
         var valid_keywords = [];
@@ -80,7 +86,11 @@
80 86
             }
81 87
 
82 88
             return _.filter(against, function(i) {
83  
-                return i.indexOf(token.string) === 0;
  89
+                if (typeof i === 'string') {
  90
+                    return i.indexOf(token.string) === 0;
  91
+                } else {
  92
+                    return i.val.indexOf(token.string) === 0;
  93
+                }
84 94
             }).map(function(i) {
85 95
                 if (token.className === 'carto-value') {
86 96
                     return i + ';';
@@ -89,11 +99,17 @@
89 99
                 } else if (token.className === 'carto-selector') {
90 100
                     return i + ' {';
91 101
                 } else {
92  
-                    return i + ':';
  102
+                    return i.val + ': <span>' + i.doc + '</span>';
93 103
                 }
94 104
             });
95 105
         }
96 106
 
  107
+        function highlight(n) {
  108
+            for (var i = 0; i < sel.childNodes.length; i++) {
  109
+                sel.childNodes[i].className = (n == i) ? 'selected' : '';
  110
+            }
  111
+        }
  112
+
97 113
         function complete(e) {
98 114
             // We want a single cursor position.
99 115
             // Find the token at the cursor
@@ -103,6 +119,7 @@
103 119
 
104 120
             var cur = editor.getCursor(false),
105 121
                 token = editor.getTokenAt(cur),
  122
+                index = 0,
106 123
                 done = false;
107 124
 
108 125
             // If this is not on a token that's autocompletable,
@@ -157,14 +174,14 @@
157 174
             var pos = editor.cursorCoords();
158 175
 
159 176
             sel.innerHTML = '';
160  
-            sel.multiple = true;
  177
+            var completions_size = Math.min(completions.length, 10);
  178
+
161 179
             for (var i = 0; i < Math.min(completions.length, 10); ++i) {
162  
-                var opt = sel.appendChild(document.createElement('option'));
163  
-                opt.appendChild(document.createTextNode(completions[i]));
  180
+                var opt = sel.appendChild(document.createElement('div'));
  181
+                opt.className = 'completions-option';
  182
+                opt.innerHTML = completions[i];
164 183
             }
165  
-            sel.firstChild.selected = true;
166  
-            sel.selectedIndex = 0;
167  
-            sel.size = Math.min(10, completions.length);
  184
+
168 185
             sel.style.height = '100px';
169 186
 
170 187
             widget.className = 'completions';
@@ -173,15 +190,11 @@
173 190
             widget.style.left = pos.x + 'px';
174 191
             widget.style.top = pos.yBot + 'px';
175 192
 
176  
-            document.body.appendChild(widget);
  193
+            highlight(index);
177 194
 
178  
-            // Hack to hide the scrollbar.
179  
-            if (completions.length <= 10) {
180  
-                widget.style.width = (sel.clientWidth - 1) + 'px';
181  
-            }
  195
+            document.body.appendChild(widget);
182 196
 
183  
-            $sel.blur(close);
184  
-            $sel.keydown(function(event) {
  197
+            $fake.keydown(function(event) {
185 198
                 var code = event.which;
186 199
                 // Enter and space
187 200
                 if (code === 13 || code === 32) {
@@ -190,13 +203,13 @@
190 203
                 // tab forwards
191 204
                 } else if (code === 9 && !event.shiftKey) {
192 205
                     cancelEvent(event);
193  
-                    sel.selectedIndex = (++sel.selectedIndex % sel.size);
  206
+                    highlight(++index % completions_size);
194 207
                 // shift-tab backwards
195 208
                 } else if (code === 9) {
196 209
                     cancelEvent(event);
197  
-                    sel.selectedIndex = (--sel.selectedIndex === -1) ?
198  
-                        sel.size - 1 :
199  
-                        sel.selectedIndex;
  210
+                    highlight((--index === -1) ?
  211
+                        completions_size - 1 :
  212
+                        index);
200 213
                 // Escape
201 214
                 } else if (code === 27) {
202 215
                     cancelEvent(event);
@@ -214,7 +227,7 @@
214 227
             });
215 228
 
216 229
             $sel.click(pick);
217  
-            $sel.focus();
  230
+            $fake.focus();
218 231
 
219 232
             return true;
220 233
         }

0 notes on commit b899c4c

Please sign in to comment.
Something went wrong with that request. Please try again.