Skip to content
This repository

Add an option to show the dialog at the bottom of the editor #1065

Closed
wants to merge 2 commits into from

2 participants

Yunchi Luo Marijn Haverbeke
Yunchi Luo
Collaborator

Adds a boolean argument bottom to openDialog and openConfirm to show the dialog at the bottom of the editor rather than the top. Default behavior is to show the dialog at the top, preserving original behavior.

There was a DOM structure change a few CSS changes for the dialog. I tested on Chrome, Firefox, and IE9, and as far as I could tell it behaves the same as before.

Marijn Haverbeke
Owner

See attached patch. I modified the interface because things that take a single option invariably evolve to take more, so an option object is more future-proof than a boolean parameter. Otherwise, this looks great. Merged.

Marijn Haverbeke marijnh closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
9  keymap/vim.js
@@ -1769,7 +1769,7 @@
1769 1769
     }
1770 1770
     function dialog(cm, text, shortText, callback) {
1771 1771
       if (cm.openDialog) {
1772  
-        cm.openDialog(text, callback);
  1772
+        cm.openDialog(text, callback, true /** bottom */);
1773 1773
       }
1774 1774
       else {
1775 1775
         callback(prompt(shortText, ""));
@@ -1801,7 +1801,8 @@
1801 1801
     function showConfirm(cm, text) {
1802 1802
       if (cm.openConfirm) {
1803 1803
         cm.openConfirm('<span style="color: red">' + text +
1804  
-            '</span> <button type="button">OK</button>', function() {});
  1804
+            '</span> <button type="button">OK</button>', function() {},
  1805
+            true /** bottom */);
1805 1806
       } else {
1806 1807
         alert(text);
1807 1808
       }
@@ -1809,9 +1810,9 @@
1809 1810
     function makePrompt(prefix, desc) {
1810 1811
       var raw = '';
1811 1812
       if (prefix) {
1812  
-        raw += prefix;
  1813
+        raw += '<span style="font-family: monospace">' + prefix + '</span>';
1813 1814
       }
1814  
-      raw += '<input type="text" style="width: 20em"/> ' +
  1815
+      raw += '<input type="text"/> ' +
1815 1816
           '<span style="color: #888">';
1816 1817
       if (desc) {
1817 1818
         raw += '<span style="color: #888">';
19  lib/util/dialog.css
... ...
@@ -1,18 +1,23 @@
1 1
 .CodeMirror-dialog {
2  
-  position: relative;
3  
-}
4  
-
5  
-.CodeMirror-dialog > div {
6 2
   position: absolute;
7  
-  top: 0; left: 0; right: 0;
  3
+  left: 0; right: 0;
8 4
   background: white;
9  
-  border-bottom: 1px solid #eee;
10 5
   z-index: 15;
11 6
   padding: .1em .8em;
12 7
   overflow: hidden;
13 8
   color: #333;
14 9
 }
15 10
 
  11
+.CodeMirror-dialog-top {
  12
+  border-bottom: 1px solid #eee;
  13
+  top: 0;
  14
+}
  15
+
  16
+.CodeMirror-dialog-bottom {
  17
+  border-top: 1px solid #eee;
  18
+  bottom: 0;
  19
+}
  20
+
16 21
 .CodeMirror-dialog input {
17 22
   border: none;
18 23
   outline: none;
@@ -24,4 +29,4 @@
24 29
 
25 30
 .CodeMirror-dialog button {
26 31
   font-size: 70%;
27  
-}
  32
+}
23  lib/util/dialog.js
... ...
@@ -1,16 +1,21 @@
1 1
 // Open simple dialogs on top of an editor. Relies on dialog.css.
2 2
 
3 3
 (function() {
4  
-  function dialogDiv(cm, template) {
  4
+  function dialogDiv(cm, template, bottom) {
5 5
     var wrap = cm.getWrapperElement();
6  
-    var dialog = wrap.insertBefore(document.createElement("div"), wrap.firstChild);
7  
-    dialog.className = "CodeMirror-dialog";
8  
-    dialog.innerHTML = '<div>' + template + '</div>';
  6
+    var dialog;
  7
+    dialog = wrap.appendChild(document.createElement("div"));
  8
+    if (bottom) {
  9
+      dialog.className = "CodeMirror-dialog CodeMirror-dialog-bottom";
  10
+    } else {
  11
+      dialog.className = "CodeMirror-dialog CodeMirror-dialog-top";
  12
+    }
  13
+    dialog.innerHTML = template;
9 14
     return dialog;
10 15
   }
11 16
 
12  
-  CodeMirror.defineExtension("openDialog", function(template, callback) {
13  
-    var dialog = dialogDiv(this, template);
  17
+  CodeMirror.defineExtension("openDialog", function(template, callback, bottom) {
  18
+    var dialog = dialogDiv(this, template, bottom);
14 19
     var closed = false, me = this;
15 20
     function close() {
16 21
       if (closed) return;
@@ -40,8 +45,8 @@
40 45
     return close;
41 46
   });
42 47
 
43  
-  CodeMirror.defineExtension("openConfirm", function(template, callbacks) {
44  
-    var dialog = dialogDiv(this, template);
  48
+  CodeMirror.defineExtension("openConfirm", function(template, callbacks, bottom) {
  49
+    var dialog = dialogDiv(this, template, bottom);
45 50
     var buttons = dialog.getElementsByTagName("button");
46 51
     var closed = false, me = this, blurring = 1;
47 52
     function close() {
@@ -67,4 +72,4 @@
67 72
       CodeMirror.connect(b, "focus", function() { ++blurring; });
68 73
     }
69 74
   });
70  
-})();
  75
+})();
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.