codeArea.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. //初始化文本编辑器
  2. function initCode() {
  3. var mylink;
  4. var href = window.location.toString();
  5. var mapUrl = href.substr(0, href.lastIndexOf('/') + 1);
  6. if (href.indexOf("#") == -1) {
  7. mylink = mapUrl + "3857Map.html";
  8. } else {
  9. mylink = mapUrl + href.split("#")[1] + ".html";
  10. }
  11. var html = $.ajax({url: mylink, async: false}).responseText; //获取网页文本内容
  12. if (html && html != "") {
  13. $('#code').val(html);
  14. }
  15. initEditor();
  16. }
  17. function initEditor() {
  18. if (!editor) {
  19. editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  20. lineWrapping: true, //是否换行
  21. foldGutter: true, //是否折叠
  22. gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
  23. lineNumbers: true, //是否显示行号
  24. styleActiveLine: true,
  25. matchBrackets: true,
  26. selectionPointer: true,
  27. mode: "htmlmixed",
  28. extraKeys: { //自动补全
  29. "Ctrl": "autocomplete"
  30. },
  31. viewportMargin: Infinity
  32. });
  33. //自动补全
  34. CodeMirror.commands.autocomplete = function (cm) {
  35. cm.showHint({hint: CodeMirror.hint.anyword});
  36. };
  37. } else {
  38. editor.setValue($("#code").val());
  39. }
  40. }
  41. /**将用户修改过的代码加载到iframe中**/
  42. function run() {
  43. var iframeContent = $("#code").val();
  44. if (editor) {
  45. iframeContent = editor.getValue();
  46. }
  47. var iFrame = document.getElementById("examplesIframe").contentWindow;
  48. iFrame.document.open();
  49. iFrame.document.write(iframeContent);
  50. iFrame.document.close();
  51. }
  52. //开关代码编辑器
  53. function toggleFooter() {
  54. var code_area = $('#code_area');
  55. var map = $('#mapContent');
  56. if (code_area[0].offsetWidth <= 2) {//如果已经关闭,则打开
  57. code_area.animate({
  58. width: "37%"
  59. }, 200);
  60. map.animate({
  61. width: "62%"
  62. }, 200);
  63. } else {
  64. code_area.animate({
  65. width: 0
  66. }, 200);
  67. map.animate({
  68. width: "99.8%"
  69. }, 200);
  70. }
  71. setTimeout(function () {
  72. codeChange()
  73. }, 200);
  74. }
  75. //显示隐藏代码打开关闭按钮
  76. function codeChange() {
  77. if ($("#code_area")[0].offsetWidth > 2) {
  78. $("#code_open").hide();
  79. $("#code_close").show();
  80. $('#container-main').css("border", "1px solid #3473b7");
  81. $('#drag').css("display", "block");
  82. } else {
  83. $("#code_close").hide();
  84. $("#code_open").show();
  85. $('#container-main').css("border", "0");
  86. $('#drag').css("display", "none");
  87. }
  88. }
  89. //重置
  90. function refresh() {
  91. initEditor();
  92. run();
  93. }
  94. //复制
  95. function copy() {
  96. $('#foo').val(editor.getValue());
  97. var clipboard = new Clipboard('.copy');
  98. clipboard.on('success', function (e) {
  99. console.info('Action:', e.action);
  100. console.info('Text:', e.text);
  101. console.info('Trigger:', e.trigger);
  102. e.clearSelection();
  103. $(".copy-success").fadeIn("fast");
  104. setTimeout(function(){
  105. $(".copy-success").fadeOut("slow");
  106. },2000);
  107. });
  108. clipboard.on('error', function (e) {
  109. console.error('Action:', e.action);
  110. console.error('Trigger:', e.trigger);
  111. });
  112. }
  113. //拖拽效果
  114. function dragCode() {
  115. $("#drag").mousedown(function () {
  116. var myWidth = $('#container-main').width();
  117. //使目标对象“禁止变蓝”
  118. document.onselectstart = function () {
  119. return false;
  120. };
  121. document.onmousemove = function (e) {
  122. var bottomX = (e || window.event).clientX - 0.3 * myWidth;
  123. if ($("#overiframe").is(":hidden") == true) {
  124. $("#overiframe").show();
  125. }
  126. if (bottomX <= 0) {
  127. bottomX = 0;
  128. }
  129. if (bottomX >= myWidth * 0.6) {
  130. bottomX = myWidth * 0.6;
  131. }
  132. $("#code_area").width(bottomX);
  133. $("#mapContent").width(myWidth * 0.99 - bottomX);
  134. $("#overiframe").width(myWidth * 0.99 - bottomX);
  135. };
  136. document.onmouseup = function () {
  137. document.onmousemove = null;
  138. $("#overiframe").hide();
  139. codeChange();
  140. };
  141. });
  142. }