index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. /// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
  2. define(['require', './samples'], function(require, SAMPLES) {
  3. var domutils = require('vs/base/browser/dom');
  4. var WRAPPING_COLUMN = 300;
  5. var model = monaco.editor.createModel('', 'plaintext');
  6. var editor = monaco.editor.create(document.getElementById('container'), {
  7. model: model,
  8. readOnly: false,
  9. glyphMargin: true,
  10. wrappingColumn: WRAPPING_COLUMN,
  11. outlineMarkers: false,
  12. renderWhitespace: true,
  13. // scrollbar: {
  14. // verticalHasArrows: true,
  15. // horizontalHasArrows: true
  16. // }
  17. });
  18. editor.addCommand({
  19. ctrlCmd: true,
  20. key: 'F9'
  21. }, function(ctx, args) {
  22. alert('Command Running!!');
  23. console.log(ctx);
  24. });
  25. editor.addAction({
  26. id: 'my-unique-id',
  27. label: 'My Label!!!',
  28. keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
  29. contextMenuGroupId: 'navigation',
  30. contextMenuOrder: 2.5,
  31. run: function(ed) {
  32. console.log("i'm running => " + ed.getPosition());
  33. }
  34. });
  35. var currentSamplePromise = null;
  36. var samplesData = {};
  37. SAMPLES.sort(function(a,b) {
  38. return a.name.localeCompare(b.name);
  39. }).forEach(function(sample) {
  40. samplesData[sample.name] = function() {
  41. if (currentSamplePromise !== null) {
  42. currentSamplePromise.cancel();
  43. currentSamplePromise = null;
  44. }
  45. currentSamplePromise = sample.loadText().then(function(modelText) {
  46. currentSamplePromise = null;
  47. updateEditor(sample.mimeType, modelText, sample.name);
  48. });
  49. }
  50. });
  51. var examplesComboBox = new ComboBox('Template', samplesData);
  52. var modesData = {};
  53. monaco.languages.getLanguages().forEach(function(language) {
  54. modesData[language.id] = updateEditor.bind(this, language.id);
  55. });
  56. var modesComboBox = new ComboBox ('Mode', modesData);
  57. // Do it in a timeout to simplify profiles
  58. window.setTimeout(function () {
  59. var START_SAMPLE = 'Y___DefaultJS';
  60. var url_matches = location.search.match(/sample=([^?&]+)/i);
  61. if (url_matches) {
  62. START_SAMPLE = url_matches[1];
  63. }
  64. if (location.hash) {
  65. START_SAMPLE = location.hash.replace(/^\#/, '');
  66. }
  67. samplesData[START_SAMPLE]();
  68. examplesComboBox.set(START_SAMPLE);
  69. createOptions(editor);
  70. createToolbar(editor);
  71. }, 0);
  72. function updateEditor(mode, value, sampleName) {
  73. if (sampleName) {
  74. window.location.hash = sampleName;
  75. }
  76. if (typeof value !== 'undefined') {
  77. var oldModel = model;
  78. model = monaco.editor.createModel(value, mode);
  79. editor.setModel(model);
  80. if (oldModel) {
  81. oldModel.dispose();
  82. }
  83. } else {
  84. monaco.editor.setModelLanguage(model, mode);
  85. }
  86. modesComboBox.set(mode);
  87. }
  88. function createToolbar(editor) {
  89. var bar = document.getElementById('bar');
  90. bar.appendChild(examplesComboBox.domNode);
  91. bar.appendChild(modesComboBox.domNode);
  92. bar.appendChild(createButton("Dispose all", function (e) {
  93. editor.dispose();
  94. editor = null;
  95. if (model) {
  96. model.dispose();
  97. model = null;
  98. }
  99. }));
  100. bar.appendChild(createButton("Remove Model", function(e) {
  101. editor.setModel(null);
  102. }));
  103. bar.appendChild(createButton("Dispose Model", function(e) {
  104. if (model) {
  105. model.dispose();
  106. model = null;
  107. }
  108. }));
  109. bar.appendChild(createButton('Ballistic scroll', (function() {
  110. var friction = 1000; // px per second
  111. var speed = 0; // px per second
  112. var isRunning = false;
  113. var lastTime;
  114. var r = 0;
  115. var scroll = function() {
  116. var currentTime = new Date().getTime();
  117. var ellapsedTimeS = (currentTime - lastTime) / 1000;
  118. lastTime = currentTime;
  119. speed = speed - friction * ellapsedTimeS;
  120. r = r + speed * ellapsedTimeS;
  121. editor.setScrollTop(r);
  122. if (speed >= 0) {
  123. domutils.scheduleAtNextAnimationFrame(scroll);
  124. } else {
  125. isRunning = false;
  126. }
  127. }
  128. return function (e) {
  129. speed += 2000;
  130. if (!isRunning) {
  131. isRunning = true;
  132. r = editor.getScrollTop();
  133. lastTime = new Date().getTime();
  134. domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll);
  135. }
  136. };
  137. })()));
  138. bar.appendChild(createButton("Colorize", function(e) {
  139. var out = document.getElementById('colorizeOutput');
  140. monaco.editor.colorize(editor.getModel().getValue(), editor.getModel().getMode().getId(), { tabSize: 4 }).then(function(r) {
  141. out.innerHTML = r;
  142. });
  143. }));
  144. }
  145. function createButton(label, onClick) {
  146. var result = document.createElement("button");
  147. result.innerHTML = label;
  148. result.onclick = onClick;
  149. return result;
  150. }
  151. function createOptions(editor) {
  152. var options = document.getElementById('options');
  153. options.appendChild(createOptionToggle(editor, 'lineNumbers', function(config) {
  154. return config.viewInfo.lineNumbers;
  155. }, function(editor, newValue) {
  156. editor.updateOptions({ lineNumbers: newValue });
  157. }));
  158. options.appendChild(createOptionToggle(editor, 'glyphMargin', function(config) {
  159. return config.viewInfo.glyphMargin;
  160. }, function(editor, newValue) {
  161. editor.updateOptions({ glyphMargin: newValue });
  162. }));
  163. options.appendChild(createOptionToggle(editor, 'roundedSelection', function(config) {
  164. return config.viewInfo.roundedSelection;
  165. }, function(editor, newValue) {
  166. editor.updateOptions({ roundedSelection: newValue });
  167. }));
  168. options.appendChild(createOptionToggle(editor, 'dark', function(config) {
  169. return config.viewInfo.theme === 'vs-dark';
  170. }, function(editor, newValue) {
  171. editor.updateOptions({ theme: newValue ? 'vs-dark' : 'vs' });
  172. }));
  173. options.appendChild(createOptionToggle(editor, 'hc-black', function(config) {
  174. return config.viewInfo.theme === 'hc-black';
  175. }, function(editor, newValue) {
  176. editor.updateOptions({ theme: newValue ? 'hc-black' : 'vs' });
  177. }));
  178. options.appendChild(createOptionToggle(editor, 'readOnly', function(config) {
  179. return config.readOnly;
  180. }, function(editor, newValue) {
  181. editor.updateOptions({ readOnly: newValue });
  182. }));
  183. options.appendChild(createOptionToggle(editor, 'hideCursorInOverviewRuler', function(config) {
  184. return config.viewInfo.hideCursorInOverviewRuler;
  185. }, function(editor, newValue) {
  186. editor.updateOptions({ hideCursorInOverviewRuler: newValue });
  187. }));
  188. options.appendChild(createOptionToggle(editor, 'scrollBeyondLastLine', function(config) {
  189. return config.viewInfo.scrollBeyondLastLine;
  190. }, function(editor, newValue) {
  191. editor.updateOptions({ scrollBeyondLastLine: newValue });
  192. }));
  193. options.appendChild(createOptionToggle(editor, 'wordWrap', function(config) {
  194. return config.wrappingInfo.isViewportWrapping;
  195. }, function(editor, newValue) {
  196. editor.updateOptions({ wrappingColumn: newValue ? 0 : WRAPPING_COLUMN });
  197. }));
  198. options.appendChild(createOptionToggle(editor, 'quickSuggestions', function(config) {
  199. return config.contribInfo.quickSuggestions;
  200. }, function(editor, newValue) {
  201. editor.updateOptions({ quickSuggestions: newValue });
  202. }));
  203. options.appendChild(createOptionToggle(editor, 'iconsInSuggestions', function(config) {
  204. return config.contribInfo.iconsInSuggestions;
  205. }, function(editor, newValue) {
  206. editor.updateOptions({ iconsInSuggestions: newValue });
  207. }));
  208. options.appendChild(createOptionToggle(editor, 'autoClosingBrackets', function(config) {
  209. return config.autoClosingBrackets;
  210. }, function(editor, newValue) {
  211. editor.updateOptions({ autoClosingBrackets: newValue });
  212. }));
  213. options.appendChild(createOptionToggle(editor, 'formatOnType', function(config) {
  214. return config.contribInfo.formatOnType;
  215. }, function(editor, newValue) {
  216. editor.updateOptions({ formatOnType: newValue });
  217. }));
  218. options.appendChild(createOptionToggle(editor, 'suggestOnTriggerCharacters', function(config) {
  219. return config.contribInfo.suggestOnTriggerCharacters;
  220. }, function(editor, newValue) {
  221. editor.updateOptions({ suggestOnTriggerCharacters: newValue });
  222. }));
  223. options.appendChild(createOptionToggle(editor, 'acceptSuggestionOnEnter', function(config) {
  224. return config.contribInfo.acceptSuggestionOnEnter;
  225. }, function(editor, newValue) {
  226. editor.updateOptions({ acceptSuggestionOnEnter: newValue });
  227. }));
  228. options.appendChild(createOptionToggle(editor, 'selectionHighlight', function(config) {
  229. return config.contribInfo.selectionHighlight;
  230. }, function(editor, newValue) {
  231. editor.updateOptions({ selectionHighlight: newValue });
  232. }));
  233. options.appendChild(createOptionToggle(editor, 'folding', function(config) {
  234. return config.contribInfo.folding;
  235. }, function(editor, newValue) {
  236. editor.updateOptions({ folding: newValue });
  237. }));
  238. options.appendChild(createOptionToggle(editor, 'renderWhitespace', function(config) {
  239. return config.viewInfo.renderWhitespace;
  240. }, function(editor, newValue) {
  241. editor.updateOptions({ renderWhitespace: newValue });
  242. }));
  243. }
  244. function createOptionToggle(editor, labelText, stateReader, setState) {
  245. var domNode = document.createElement('div');
  246. domNode.className = 'option toggle';
  247. var input = document.createElement('input');
  248. input.type = 'checkbox';
  249. var label = document.createElement('label');
  250. label.appendChild(input);
  251. label.appendChild(document.createTextNode(labelText));
  252. domNode.appendChild(label);
  253. var renderState = function() {
  254. input.checked = stateReader(editor.getConfiguration());
  255. };
  256. renderState();
  257. editor.onDidChangeConfiguration(function() {
  258. renderState();
  259. });
  260. input.onchange = function() {
  261. setState(editor, !stateReader(editor.getConfiguration()));
  262. };
  263. return domNode;
  264. }
  265. function ComboBox(label, externalOptions) {
  266. this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-');
  267. this.domNode = document.createElement('div');
  268. this.domNode.setAttribute('style', 'display: inline; margin-right: 5px;');
  269. this.label = document.createElement('label');
  270. this.label.innerHTML = label;
  271. this.label.setAttribute('for', this.id);
  272. this.domNode.appendChild(this.label);
  273. this.comboBox = document.createElement('select');
  274. this.comboBox.setAttribute('id', this.id);
  275. this.comboBox.setAttribute('name', this.id);
  276. this.comboBox.onchange =(function (e) {
  277. var target = e.target || e.srcElement;
  278. this.options[target.options[target.selectedIndex].value].callback();
  279. }).bind(this);
  280. this.domNode.appendChild(this.comboBox);
  281. this.options = [];
  282. for (var name in externalOptions) {
  283. if (externalOptions.hasOwnProperty(name)) {
  284. var optionElement = document.createElement('option');
  285. optionElement.value = name;
  286. optionElement.innerHTML = name;
  287. this.options[name] = {
  288. element: optionElement,
  289. callback: externalOptions[name]
  290. };
  291. this.comboBox.appendChild(optionElement);
  292. }
  293. }
  294. }
  295. ComboBox.prototype.set = function (name) {
  296. if (this.options[name]) {
  297. this.options[name].element.selected = true;
  298. }
  299. };
  300. });