123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- //初始化文本编辑器
- function initCode() {
- var mylink;
- var href = window.location.toString();
- var mapUrl = href.substr(0, href.lastIndexOf('/') + 1);
- if (href.indexOf("#") == -1) {
- mylink = mapUrl + "3857Map.html";
- } else {
- mylink = mapUrl + href.split("#")[1] + ".html";
- }
- var html = $.ajax({url: mylink, async: false}).responseText; //获取网页文本内容
- if (html && html != "") {
- $('#code').val(html);
- }
- initEditor();
- }
- function initEditor() {
- if (!editor) {
- editor = CodeMirror.fromTextArea(document.getElementById("code"), {
- lineWrapping: true, //是否换行
- foldGutter: true, //是否折叠
- gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
- lineNumbers: true, //是否显示行号
- styleActiveLine: true,
- matchBrackets: true,
- selectionPointer: true,
- mode: "htmlmixed",
- extraKeys: { //自动补全
- "Ctrl": "autocomplete"
- },
- viewportMargin: Infinity
- });
- //自动补全
- CodeMirror.commands.autocomplete = function (cm) {
- cm.showHint({hint: CodeMirror.hint.anyword});
- };
- } else {
- editor.setValue($("#code").val());
- }
- }
- /**将用户修改过的代码加载到iframe中**/
- function run() {
- var iframeContent = $("#code").val();
- if (editor) {
- iframeContent = editor.getValue();
- }
- var iFrame = document.getElementById("examplesIframe").contentWindow;
- iFrame.document.open();
- iFrame.document.write(iframeContent);
- iFrame.document.close();
- }
- //开关代码编辑器
- function toggleFooter() {
- var code_area = $('#code_area');
- var map = $('#mapContent');
- if (code_area[0].offsetWidth <= 2) {//如果已经关闭,则打开
- code_area.animate({
- width: "37%"
- }, 200);
- map.animate({
- width: "62%"
- }, 200);
- } else {
- code_area.animate({
- width: 0
- }, 200);
- map.animate({
- width: "99.8%"
- }, 200);
- }
- setTimeout(function () {
- codeChange()
- }, 200);
- }
- //显示隐藏代码打开关闭按钮
- function codeChange() {
- if ($("#code_area")[0].offsetWidth > 2) {
- $("#code_open").hide();
- $("#code_close").show();
- $('#container-main').css("border", "1px solid #3473b7");
- $('#drag').css("display", "block");
- } else {
- $("#code_close").hide();
- $("#code_open").show();
- $('#container-main').css("border", "0");
- $('#drag').css("display", "none");
- }
- }
- //重置
- function refresh() {
- initEditor();
- run();
- }
- //复制
- function copy() {
- $('#foo').val(editor.getValue());
- var clipboard = new Clipboard('.copy');
- clipboard.on('success', function (e) {
- console.info('Action:', e.action);
- console.info('Text:', e.text);
- console.info('Trigger:', e.trigger);
- e.clearSelection();
- $(".copy-success").fadeIn("fast");
- setTimeout(function(){
- $(".copy-success").fadeOut("slow");
- },2000);
- });
- clipboard.on('error', function (e) {
- console.error('Action:', e.action);
- console.error('Trigger:', e.trigger);
- });
- }
- //拖拽效果
- function dragCode() {
- $("#drag").mousedown(function () {
- var myWidth = $('#container-main').width();
- //使目标对象“禁止变蓝”
- document.onselectstart = function () {
- return false;
- };
- document.onmousemove = function (e) {
- var bottomX = (e || window.event).clientX - 0.3 * myWidth;
- if ($("#overiframe").is(":hidden") == true) {
- $("#overiframe").show();
- }
- if (bottomX <= 0) {
- bottomX = 0;
- }
- if (bottomX >= myWidth * 0.6) {
- bottomX = myWidth * 0.6;
- }
- $("#code_area").width(bottomX);
- $("#mapContent").width(myWidth * 0.99 - bottomX);
- $("#overiframe").width(myWidth * 0.99 - bottomX);
- };
- document.onmouseup = function () {
- document.onmousemove = null;
- $("#overiframe").hide();
- codeChange();
- };
- });
- }
|