bbfbf8a18d2c6b577f613f7684e13d4b.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. ace.define("ace/ext/textarea",["require","exports","module","ace/lib/event","ace/lib/useragent","ace/ace"], function(require, exports, module){"use strict";
  2. var event = require("../lib/event");
  3. var UA = require("../lib/useragent");
  4. var ace = require("../ace");
  5. module.exports = exports = ace;
  6. var getCSSProperty = function (element, container, property) {
  7. var ret = element.style[property];
  8. if (!ret) {
  9. if (window.getComputedStyle) {
  10. ret = window.getComputedStyle(element, '').getPropertyValue(property);
  11. }
  12. else {
  13. ret = element.currentStyle[property];
  14. }
  15. }
  16. if (!ret || ret == 'auto' || ret == 'intrinsic') {
  17. ret = container.style[property];
  18. }
  19. return ret;
  20. };
  21. function applyStyles(elm, styles) {
  22. for (var style in styles) {
  23. elm.style[style] = styles[style];
  24. }
  25. }
  26. function setupContainer(element, getValue) {
  27. if (element.type != 'textarea') {
  28. throw new Error("Textarea required!");
  29. }
  30. var parentNode = element.parentNode;
  31. var container = document.createElement('div');
  32. var resizeEvent = function () {
  33. var style = 'position:relative;';
  34. [
  35. 'margin-top', 'margin-left', 'margin-right', 'margin-bottom'
  36. ].forEach(function (item) {
  37. style += item + ':' +
  38. getCSSProperty(element, container, item) + ';';
  39. });
  40. var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
  41. var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
  42. style += 'height:' + height + ';width:' + width + ';';
  43. style += 'display:inline-block;';
  44. container.style.cssText = style;
  45. };
  46. event.addListener(window, 'resize', resizeEvent);
  47. resizeEvent();
  48. parentNode.insertBefore(container, element.nextSibling);
  49. while (parentNode !== document) {
  50. if (parentNode.tagName.toUpperCase() === 'FORM') {
  51. var oldSumit = parentNode.onsubmit;
  52. parentNode.onsubmit = function (evt) {
  53. element.value = getValue();
  54. if (oldSumit) {
  55. oldSumit.call(this, evt);
  56. }
  57. };
  58. break;
  59. }
  60. parentNode = parentNode.parentNode;
  61. }
  62. return container;
  63. }
  64. exports.transformTextarea = function (element, options) {
  65. var isFocused = element.autofocus || document.activeElement == element;
  66. var session;
  67. var container = setupContainer(element, function () {
  68. return session.getValue();
  69. });
  70. element.style.display = 'none';
  71. container.style.background = 'white';
  72. var editorDiv = document.createElement("div");
  73. applyStyles(editorDiv, {
  74. top: "0px",
  75. left: "0px",
  76. right: "0px",
  77. bottom: "0px",
  78. border: "1px solid gray",
  79. position: "absolute"
  80. });
  81. container.appendChild(editorDiv);
  82. var settingOpener = document.createElement("div");
  83. applyStyles(settingOpener, {
  84. position: "absolute",
  85. right: "0px",
  86. bottom: "0px",
  87. cursor: "nw-resize",
  88. border: "solid 9px",
  89. borderColor: "lightblue gray gray #ceade6",
  90. zIndex: 101
  91. });
  92. var settingDiv = document.createElement("div");
  93. var settingDivStyles = {
  94. top: "0px",
  95. left: "20%",
  96. right: "0px",
  97. bottom: "0px",
  98. position: "absolute",
  99. padding: "5px",
  100. zIndex: 100,
  101. color: "white",
  102. display: "none",
  103. overflow: "auto",
  104. fontSize: "14px",
  105. boxShadow: "-5px 2px 3px gray"
  106. };
  107. if (!UA.isOldIE) {
  108. settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
  109. }
  110. else {
  111. settingDivStyles.backgroundColor = "#333";
  112. }
  113. applyStyles(settingDiv, settingDivStyles);
  114. container.appendChild(settingDiv);
  115. options = options || exports.defaultOptions;
  116. var editor = ace.edit(editorDiv);
  117. session = editor.getSession();
  118. session.setValue(element.value || element.innerHTML);
  119. if (isFocused)
  120. editor.focus();
  121. container.appendChild(settingOpener);
  122. setupApi(editor, editorDiv, settingDiv, ace, options);
  123. setupSettingPanel(settingDiv, settingOpener, editor);
  124. var state = "";
  125. event.addListener(settingOpener, "mousemove", function (e) {
  126. var rect = this.getBoundingClientRect();
  127. var x = e.clientX - rect.left, y = e.clientY - rect.top;
  128. if (x + y < (rect.width + rect.height) / 2) {
  129. this.style.cursor = "pointer";
  130. state = "toggle";
  131. }
  132. else {
  133. state = "resize";
  134. this.style.cursor = "nw-resize";
  135. }
  136. });
  137. event.addListener(settingOpener, "mousedown", function (e) {
  138. e.preventDefault();
  139. if (state == "toggle") {
  140. editor.setDisplaySettings();
  141. return;
  142. }
  143. container.style.zIndex = "100000";
  144. var rect = container.getBoundingClientRect();
  145. var startX = rect.width + rect.left - e.clientX;
  146. var startY = rect.height + rect.top - e.clientY;
  147. event.capture(settingOpener, function (e) {
  148. container.style.width = e.clientX - rect.left + startX + "px";
  149. container.style.height = e.clientY - rect.top + startY + "px";
  150. editor.resize();
  151. }, function () { });
  152. });
  153. return editor;
  154. };
  155. function setupApi(editor, editorDiv, settingDiv, ace, options) {
  156. function toBool(value) {
  157. return value === "true" || value == true;
  158. }
  159. editor.setDisplaySettings = function (display) {
  160. if (display == null)
  161. display = settingDiv.style.display == "none";
  162. if (display) {
  163. settingDiv.style.display = "block";
  164. settingDiv.hideButton.focus();
  165. editor.on("focus", function onFocus() {
  166. editor.removeListener("focus", onFocus);
  167. settingDiv.style.display = "none";
  168. });
  169. }
  170. else {
  171. editor.focus();
  172. }
  173. };
  174. editor.$setOption = editor.setOption;
  175. editor.$getOption = editor.getOption;
  176. editor.setOption = function (key, value) {
  177. switch (key) {
  178. case "mode":
  179. editor.$setOption("mode", "ace/mode/" + value);
  180. break;
  181. case "theme":
  182. editor.$setOption("theme", "ace/theme/" + value);
  183. break;
  184. case "keybindings":
  185. switch (value) {
  186. case "vim":
  187. editor.setKeyboardHandler("ace/keyboard/vim");
  188. break;
  189. case "emacs":
  190. editor.setKeyboardHandler("ace/keyboard/emacs");
  191. break;
  192. default:
  193. editor.setKeyboardHandler(null);
  194. }
  195. break;
  196. case "wrap":
  197. case "fontSize":
  198. editor.$setOption(key, value);
  199. break;
  200. default:
  201. editor.$setOption(key, toBool(value));
  202. }
  203. };
  204. editor.getOption = function (key) {
  205. switch (key) {
  206. case "mode":
  207. return editor.$getOption("mode").substr("ace/mode/".length);
  208. break;
  209. case "theme":
  210. return editor.$getOption("theme").substr("ace/theme/".length);
  211. break;
  212. case "keybindings":
  213. var value = editor.getKeyboardHandler();
  214. switch (value && value.$id) {
  215. case "ace/keyboard/vim":
  216. return "vim";
  217. case "ace/keyboard/emacs":
  218. return "emacs";
  219. default:
  220. return "ace";
  221. }
  222. break;
  223. default:
  224. return editor.$getOption(key);
  225. }
  226. };
  227. editor.setOptions(options);
  228. return editor;
  229. }
  230. function setupSettingPanel(settingDiv, settingOpener, editor) {
  231. var BOOL = null;
  232. var desc = {
  233. mode: "Mode:",
  234. wrap: "Soft Wrap:",
  235. theme: "Theme:",
  236. fontSize: "Font Size:",
  237. showGutter: "Display Gutter:",
  238. keybindings: "Keyboard",
  239. showPrintMargin: "Show Print Margin:",
  240. useSoftTabs: "Use Soft Tabs:",
  241. showInvisibles: "Show Invisibles"
  242. };
  243. var optionValues = {
  244. mode: {
  245. text: "Plain",
  246. javascript: "JavaScript",
  247. xml: "XML",
  248. html: "HTML",
  249. css: "CSS",
  250. scss: "SCSS",
  251. python: "Python",
  252. php: "PHP",
  253. java: "Java",
  254. ruby: "Ruby",
  255. c_cpp: "C/C++",
  256. coffee: "CoffeeScript",
  257. json: "json",
  258. perl: "Perl",
  259. clojure: "Clojure",
  260. ocaml: "OCaml",
  261. csharp: "C#",
  262. haxe: "haXe",
  263. svg: "SVG",
  264. textile: "Textile",
  265. groovy: "Groovy",
  266. liquid: "Liquid",
  267. Scala: "Scala"
  268. },
  269. theme: {
  270. clouds: "Clouds",
  271. clouds_midnight: "Clouds Midnight",
  272. cobalt: "Cobalt",
  273. crimson_editor: "Crimson Editor",
  274. dawn: "Dawn",
  275. gob: "Green on Black",
  276. eclipse: "Eclipse",
  277. idle_fingers: "Idle Fingers",
  278. kr_theme: "Kr Theme",
  279. merbivore: "Merbivore",
  280. merbivore_soft: "Merbivore Soft",
  281. mono_industrial: "Mono Industrial",
  282. monokai: "Monokai",
  283. pastel_on_dark: "Pastel On Dark",
  284. solarized_dark: "Solarized Dark",
  285. solarized_light: "Solarized Light",
  286. textmate: "Textmate",
  287. twilight: "Twilight",
  288. vibrant_ink: "Vibrant Ink"
  289. },
  290. showGutter: BOOL,
  291. fontSize: {
  292. "10px": "10px",
  293. "11px": "11px",
  294. "12px": "12px",
  295. "14px": "14px",
  296. "16px": "16px"
  297. },
  298. wrap: {
  299. off: "Off",
  300. 40: "40",
  301. 80: "80",
  302. free: "Free"
  303. },
  304. keybindings: {
  305. ace: "ace",
  306. vim: "vim",
  307. emacs: "emacs"
  308. },
  309. showPrintMargin: BOOL,
  310. useSoftTabs: BOOL,
  311. showInvisibles: BOOL
  312. };
  313. var table = [];
  314. table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
  315. function renderOption(builder, option, obj, cValue) {
  316. if (!obj) {
  317. builder.push("<input type='checkbox' title='", option, "' ", cValue + "" == "true" ? "checked='true'" : "", "'></input>");
  318. return;
  319. }
  320. builder.push("<select title='" + option + "'>");
  321. for (var value in obj) {
  322. builder.push("<option value='" + value + "' ");
  323. if (cValue == value) {
  324. builder.push(" selected ");
  325. }
  326. builder.push(">", obj[value], "</option>");
  327. }
  328. builder.push("</select>");
  329. }
  330. for (var option in exports.defaultOptions) {
  331. table.push("<tr><td>", desc[option], "</td>");
  332. table.push("<td>");
  333. renderOption(table, option, optionValues[option], editor.getOption(option));
  334. table.push("</td></tr>");
  335. }
  336. table.push("</table>");
  337. settingDiv.innerHTML = table.join("");
  338. var onChange = function (e) {
  339. var select = e.currentTarget;
  340. editor.setOption(select.title, select.value);
  341. };
  342. var onClick = function (e) {
  343. var cb = e.currentTarget;
  344. editor.setOption(cb.title, cb.checked);
  345. };
  346. var selects = settingDiv.getElementsByTagName("select");
  347. for (var i = 0; i < selects.length; i++)
  348. selects[i].onchange = onChange;
  349. var cbs = settingDiv.getElementsByTagName("input");
  350. for (var i = 0; i < cbs.length; i++)
  351. cbs[i].onclick = onClick;
  352. var button = document.createElement("input");
  353. button.type = "button";
  354. button.value = "Hide";
  355. event.addListener(button, "click", function () {
  356. editor.setDisplaySettings(false);
  357. });
  358. settingDiv.appendChild(button);
  359. settingDiv.hideButton = button;
  360. }
  361. exports.defaultOptions = {
  362. mode: "javascript",
  363. theme: "textmate",
  364. wrap: "off",
  365. fontSize: "12px",
  366. showGutter: "false",
  367. keybindings: "ace",
  368. showPrintMargin: "false",
  369. useSoftTabs: "true",
  370. showInvisibles: "false"
  371. };
  372. }); (function() {
  373. ace.require(["ace/ext/textarea"], function(m) {
  374. if (typeof module == "object" && typeof exports == "object" && module) {
  375. module.exports = m;
  376. }
  377. });
  378. })();