From: Michael Tremer Date: Tue, 27 Aug 2019 14:09:33 +0000 (+0100) Subject: wiki: editor: Indent everything using tabs X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7b5802bbefb0db15e5a5a1d2155383086c25c7da;p=ipfire.org.git wiki: editor: Indent everything using tabs Signed-off-by: Michael Tremer --- diff --git a/src/static/js/editor.js b/src/static/js/editor.js index 7e478eee..beb3413e 100644 --- a/src/static/js/editor.js +++ b/src/static/js/editor.js @@ -1,47 +1,47 @@ class Editor { - constructor(parent) { - this.parent = $(parent); - this.data = this.parent.data(); + constructor(parent) { + this.parent = $(parent); + this.data = this.parent.data(); - // Hide the preview here + // Hide the preview here this.preview = $("#preview"); this.preview.hide(); - // Get the textarea - this.textarea = this.parent.find("textarea"); + // Get the textarea + this.textarea = this.parent.find("textarea"); - // Initialise selection - this.selection = { - start : 0, - end : 0, - text : "", - length : 0, - }; + // Initialise selection + this.selection = { + start : 0, + end : 0, + text : "", + length : 0, + }; - // Make the textarea magic - this.activateTextArea(); + // Make the textarea magic + this.activateTextArea(); - // Bind all keys - this.bindKeys(); + // Bind all keys + this.bindKeys(); - // Change timer for preview - var update = null; + // Change timer for preview + var update = null; - console.log("Editor initialised for " + this.parent); + console.log("Editor initialised for " + this.parent); - // Set focus on the textarea - this.textarea.focus(); - } + // Set focus on the textarea + this.textarea.focus(); + } - activateTextArea() { - var editor = this; + activateTextArea() { + var editor = this; - // Render preview when content has changed - this.textarea.on("keyup change", function(e) { - if (editor.update) - clearTimeout(editor.update); + // Render preview when content has changed + this.textarea.on("keyup change", function(e) { + if (editor.update) + clearTimeout(editor.update); - var content = editor.textarea.val(); + var content = editor.textarea.val(); // If the field is all empty, we will hide it if (content) @@ -52,7 +52,7 @@ class Editor { // Go into update mode editor.preview.addClass("updating"); - // Render content and show it + // Render content and show it editor.update = setTimeout(function() { var c = $("#preview-content"); @@ -65,181 +65,181 @@ class Editor { } ); }, 750); - }); - - // Remember any selected text - this.textarea.on("select keyup click", function(e) { - // Ignore any keyboard shortcuts - if (e.ctrlKey) - return; - - // Save selected text - editor.selection = { - start : this.selectionStart, - end : this.selectionEnd, - text : this.value.slice(this.selectionStart, this.selectionEnd), - length: this.selectionEnd - this.selectionStart, - }; - - console.debug("Something got selected:"); - console.debug(editor.selection); - }) - - // Bind keyboard shortcuts - this.textarea.on("keyup", function(e) { - // If Ctrl wasn't pressed this isn't for us - if (!e.ctrlKey) - return; - - switch (e.which) { - // B - Bold - case 66: - editor.bold(); - break; - - // I - Italic - case 73: - editor.italic(); - break; - - // C - Code - case 67: - editor.code(); - break; - - // H - Headline - case 72: - editor.headline(); - break; - - // L - Link - case 76: - editor.link(); - break; - } - }); - } - - bindKeys() { - // Typography - this.parent.find("#bold").click(this.bold.bind(this)); - this.parent.find("#italic").click(this.italic.bind(this)); - this.parent.find("#code").click(this.code.bind(this)); - - // Headlines - this.parent.find("#headline").click(this.headline.bind(this)); - this.parent.find("#headline-down").click(this.headline_down.bind(this)); - this.parent.find("#headline-up").click(this.headline_up.bind(this)); - - // Links - this.parent.find("#link").click(this.link.bind(this)); - } - - // Functions to modify the text - - replaceSelection(replacement) { - // Get the DOM element - var textarea = this.textarea.get(0); - - // Write text to textarea and move the cursor to the end - textarea.setRangeText(replacement, - this.selection.start, this.selection.end, "end"); - } - - insertAtCursor(insertion) { - this.replaceSelection(insertion); - } - - bold() { - console.debug("Converting into bold: " + this.selection.text); - this.replaceSelection("**" + this.selection.text + "**"); - } - - italic() { - console.debug("Converting into italic: " + this.selection.text); - this.replaceSelection("*" + this.selection.text + "*"); - } - - code() { - var multiline = this.selection.text.indexOf("\n"); - - if (multiline >= 0) { - this.replaceSelection("```\n" + this.selection.text + "\n```\n\n"); - } else { - this.replaceSelection("`" + this.selection.text + "`"); - } - } - - link() { - // Handle URLs - if (this.selection.text.startsWith("https://") || this.selection.text.startsWith("http://")) { - this.replaceSelection("[" + this.selection.text + "](" + this.selection.text + ")"); - // Handle selected text - } else { - this.replaceSelection("[" + this.selection.text + "]()") - } - } - - // Headlines - - findLevel() { - // Get all text between start and cursor position - var text = this.textarea.val().slice(0, this.selection.start); - - // Split it in lines and reverse - var lines = text.split("\n"); - lines.reverse(); - - for (var line of lines) { - console.debug(line); - - // Return the number of # found in the nearest headline - var match = line.match("^(#+)"); - if (match) { - return match[1].length; - } - } - - // If nothing was found, we are on level one - return 1; - } - - insertHeadline(offset) { - // Find level of headlines - var level = Math.max(this.findLevel() + offset, 1); - - console.debug("Adding headline (" + level + ")"); - var headline = "#".repeat(level); - - if (this.selection.length == 0) { - headline += " ..."; - } else { - // Add some space if we don't have any, yet - if (!this.selection.text.startsWith(" ")) - headline += " "; - - headline += this.selection.text + "\n\n"; - } - - this.replaceSelection(headline); - } - - headline() { - return this.insertHeadline(0); - } - - headline_down() { - return this.insertHeadline(1); - } - - headline_up() { - return this.insertHeadline(-1); - } + }); + + // Remember any selected text + this.textarea.on("select keyup click", function(e) { + // Ignore any keyboard shortcuts + if (e.ctrlKey) + return; + + // Save selected text + editor.selection = { + start : this.selectionStart, + end : this.selectionEnd, + text : this.value.slice(this.selectionStart, this.selectionEnd), + length: this.selectionEnd - this.selectionStart, + }; + + console.debug("Something got selected:"); + console.debug(editor.selection); + }) + + // Bind keyboard shortcuts + this.textarea.on("keyup", function(e) { + // If Ctrl wasn't pressed this isn't for us + if (!e.ctrlKey) + return; + + switch (e.which) { + // B - Bold + case 66: + editor.bold(); + break; + + // I - Italic + case 73: + editor.italic(); + break; + + // C - Code + case 67: + editor.code(); + break; + + // H - Headline + case 72: + editor.headline(); + break; + + // L - Link + case 76: + editor.link(); + break; + } + }); + } + + bindKeys() { + // Typography + this.parent.find("#bold").click(this.bold.bind(this)); + this.parent.find("#italic").click(this.italic.bind(this)); + this.parent.find("#code").click(this.code.bind(this)); + + // Headlines + this.parent.find("#headline").click(this.headline.bind(this)); + this.parent.find("#headline-down").click(this.headline_down.bind(this)); + this.parent.find("#headline-up").click(this.headline_up.bind(this)); + + // Links + this.parent.find("#link").click(this.link.bind(this)); + } + + // Functions to modify the text + + replaceSelection(replacement) { + // Get the DOM element + var textarea = this.textarea.get(0); + + // Write text to textarea and move the cursor to the end + textarea.setRangeText(replacement, + this.selection.start, this.selection.end, "end"); + } + + insertAtCursor(insertion) { + this.replaceSelection(insertion); + } + + bold() { + console.debug("Converting into bold: " + this.selection.text); + this.replaceSelection("**" + this.selection.text + "**"); + } + + italic() { + console.debug("Converting into italic: " + this.selection.text); + this.replaceSelection("*" + this.selection.text + "*"); + } + + code() { + var multiline = this.selection.text.indexOf("\n"); + + if (multiline >= 0) { + this.replaceSelection("```\n" + this.selection.text + "\n```\n\n"); + } else { + this.replaceSelection("`" + this.selection.text + "`"); + } + } + + link() { + // Handle URLs + if (this.selection.text.startsWith("https://") || this.selection.text.startsWith("http://")) { + this.replaceSelection("[" + this.selection.text + "](" + this.selection.text + ")"); + // Handle selected text + } else { + this.replaceSelection("[" + this.selection.text + "]()") + } + } + + // Headlines + + findLevel() { + // Get all text between start and cursor position + var text = this.textarea.val().slice(0, this.selection.start); + + // Split it in lines and reverse + var lines = text.split("\n"); + lines.reverse(); + + for (var line of lines) { + console.debug(line); + + // Return the number of # found in the nearest headline + var match = line.match("^(#+)"); + if (match) { + return match[1].length; + } + } + + // If nothing was found, we are on level one + return 1; + } + + insertHeadline(offset) { + // Find level of headlines + var level = Math.max(this.findLevel() + offset, 1); + + console.debug("Adding headline (" + level + ")"); + var headline = "#".repeat(level); + + if (this.selection.length == 0) { + headline += " ..."; + } else { + // Add some space if we don't have any, yet + if (!this.selection.text.startsWith(" ")) + headline += " "; + + headline += this.selection.text + "\n\n"; + } + + this.replaceSelection(headline); + } + + headline() { + return this.insertHeadline(0); + } + + headline_down() { + return this.insertHeadline(1); + } + + headline_up() { + return this.insertHeadline(-1); + } } $(document).ready(function() { - // Initialise all editors - $(".editor").each(function(i, e) { - new Editor(e); - }); + // Initialise all editors + $(".editor").each(function(i, e) { + new Editor(e); + }); });