%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/editors/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/editors/editor-codemirror.js |
/*========================================================================================= File Name: editor-codemirror.js Description: Code Mirror JS for code editor ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: GeeksLabs Author URL: http://www.themeforest.net/user/geekslabs ==========================================================================================*/ (function(window, document, $) { 'use strict'; // Basic CodeMirror var code = document.getElementById("codemirror"); var editor = CodeMirror.fromTextArea(code, { lineNumbers: true, mode: "javascript", theme: "monokai" }); //Theme var input = document.getElementById("select"); var theme = input.options[input.selectedIndex].textContent; code = document.getElementById("codemirror-theme"); var editor1 = CodeMirror.fromTextArea(code, { lineNumbers: true, styleActiveLine: true, mode: "javascript", matchBrackets: true, }); $('#select').change(function () { var selectedTheme = $(':selected').val(); var stylesheet = $('[title="theme"]'); stylesheet.attr('href','../../../app-assets/vendors/css/editors/theme/'+selectedTheme.toLowerCase()+'.css'); editor1.setOption("theme", selectedTheme); }); function selectTheme() { var theme = input.options[input.selectedIndex].textContent; editor1.setOption("theme", theme); location.hash = "#" + theme; } var choice = (location.hash && location.hash.slice(1)) || (document.location.search && decodeURIComponent(document.location.search.slice(1))); if (choice) { input.value = choice; editor1.setOption("theme", choice); } CodeMirror.on(window, "hashchange", function() { var theme = location.hash.slice(1); if (theme) { input.value = theme; selectTheme(); } }); // LoadMode code = document.getElementById("codemirror-loadmode"); CodeMirror.modeURL = "../../../app-assets/vendors/js/editors/codemirror/mode/*/*.js"; var editorMode = CodeMirror.fromTextArea(code, { lineNumbers: true }); var modeInput = document.getElementById("mode"); CodeMirror.on(modeInput, "keypress", function(e) { if (e.keyCode == 13) change(); }); // function change() { $('#change').on('click', function(){ var val = modeInput.value, m, mode, spec; if(m = /.+\.([^.]+)$/.exec(val)){ var info = CodeMirror.findModeByExtension(m[1]); if (info) { mode = info.mode; spec = info.mime; } } else if (/\//.test(val)) { var info = CodeMirror.findModeByMIME(val); if (info) { mode = info.mode; spec = val; } } else { mode = spec = val; } if (mode) { editorMode.setOption("mode", spec); CodeMirror.autoLoadMode(editorMode, mode); document.getElementById("modeinfo").textContent = spec; } else { alert("Could not find a mode corresponding to " + val); } // } }); // Sublime Text bindings var value = document.getElementById("codemirror-sublime").value; var map = CodeMirror.keyMap.sublime; for (var key in map) { var val = map[key]; if (key != "fallthrough" && val != "..." && (!/find/.test(val) || /findUnder/.test(val))) value += " \"" + key + "\": \"" + val + "\",\n"; } value += "}\n\n// The implementation of joinLines\n"; value += CodeMirror.commands.joinLines.toString().replace(/^function\s*\(/, "function joinLines(").replace(/\n /g, "\n") + "\n"; code = document.getElementById("codemirror-sublime"); var editor = CodeMirror.fromTextArea(code, { value: value, lineNumbers: true, theme: "monokai", mode: "javascript", keyMap: "sublime", autoCloseBrackets: true, matchBrackets: true, showCursorWhenSelecting: true, theme: "monokai", tabSize: 2 }); // Code Folding Demo code = document.getElementById("codemirror-js"); var code_html = document.getElementById("codemirror-html"); var code_markdown = document.getElementById("codemirror-markdown"); window.editor = CodeMirror.fromTextArea(code, { mode: "javascript", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); editor.foldCode(CodeMirror.Pos(13, 0)); window.editor_html = CodeMirror.fromTextArea(code_html, { mode: "text/html", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); editor_html.foldCode(CodeMirror.Pos(0, 0)); editor_html.foldCode(CodeMirror.Pos(21, 0)); window.editor_markdown = CodeMirror.fromTextArea(code_markdown, { mode: "markdown", lineNumbers: true, lineWrapping: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, foldGutter: true, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] }); // Marker code = document.getElementById("codemirror-marker"); var editor = new CodeMirror.fromTextArea(code, { lineNumbers: true, styleSelectedText: true, highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true} }); editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"}); // Initialize CodeMirror editor with a nice html5 canvas demo. var delay; var editor = new CodeMirror.fromTextArea(document.getElementById('codemirror-preview'), { mode: 'text/html' }); editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 300); }); function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 300); // Ruler var nums = "0123456789", space = " "; var colors = ["#967ADC", "#37BC9B", "#F6BB42", "#3BAFDA", "#DA4453", "#3f51b5","#2196F3","#ff9800","#e91e63"]; var rulers = []; value = ""; for (var i = 1; i <= 9; i++) { rulers.push({color: colors[i], column: i * 10, lineStyle: "dashed"}); for (var j = 1; j < i; j++) value += space; value += nums + "\n"; } code = document.getElementById('codemirror-ruler'); editor = new CodeMirror(code, { rulers: rulers, value: value + value + value, lineNumbers: true }); // Visible Tabs code = document.getElementById('codemirror-tabs'); editor = CodeMirror.fromTextArea(code, { lineNumbers: true, tabSize: 4, indentUnit: 4, indentWithTabs: true, mode: "text/html" }); })(window, document, jQuery);