%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
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);
Zerion Mini Shell 1.0