From 8eed8634eed759a3074ba48aeed750dde734db60 Mon Sep 17 00:00:00 2001 From: Dmitry Mazurov Date: Wed, 18 Mar 2020 17:02:17 +0300 Subject: [PATCH] Added status texts Signed-off-by: Dmitry Mazurov --- README.md | 28 +++++++++++++++++--------- src/css/easymde.css | 4 ++-- src/js/easymde.js | 49 ++++++++++++++++++++++++++++++++++++--------- 3 files changed, 60 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 44b4fd9..821ca95 100644 --- a/README.md +++ b/README.md @@ -25,18 +25,18 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr - [Install EasyMDE](#install-easymde) - [How to use](#how-to-use) - - [Loading the editor](#loading-the-editor) - - [Editor functions](#editor-functions) + - [Loading the editor](#loading-the-editor) + - [Editor functions](#editor-functions) - [Configuration](#configuration) - - [Options list](#options-list) - - [Options example](#options-example) - - [Toolbar icons](#toolbar-icons) - - [Toolbar customization](#toolbar-customization) - - [Keyboard shortcuts](#keyboard-shortcuts) + - [Options list](#options-list) + - [Options example](#options-example) + - [Toolbar icons](#toolbar-icons) + - [Toolbar customization](#toolbar-customization) + - [Keyboard shortcuts](#keyboard-shortcuts) - [Advanced use](#advanced-use) - - [Event handling](#event-handling) - - [Removing EasyMDE from text area](#removing-easymde-from-text-area) - - [Useful methods](#useful-methods) + - [Event handling](#event-handling) + - [Removing EasyMDE from text area](#removing-easymde-from-text-area) + - [Useful methods](#useful-methods) - [How it works](#how-it-works) - [SimpleMDE fork](#simplemde-fork) - [Hacking EasyMDE](#hacking-easymde) @@ -122,6 +122,7 @@ easyMDE.value('New input for **EasyMDE**'); - **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s). - **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s). - **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website. + - **timeFormat**: Time format 12/24. Defaults to 12. - **blockStyles**: Customize how certain buttons that style blocks of text behave. - **bold**: Can be set to `**` or `__`. Defaults to `**`. - **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````. @@ -186,6 +187,7 @@ easyMDE.value('New input for **EasyMDE**'); - **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`. - **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items. - Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items. +- **statusTexts**: Customize the text used to status bar. - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`. - **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`. - **tabSize**: If set, customize the tab size. Defaults to `2`. @@ -206,6 +208,7 @@ var editor = new EasyMDE({ uniqueId: "MyUniqueID", delay: 1000, submit_delay: 5000, + timeFormat: 24, }, blockStyles: { bold: "__", @@ -274,6 +277,11 @@ var editor = new EasyMDE({ el.innerHTML = ++this.keystrokes + " Keystrokes"; }, }], // Another optional usage, with a custom status bar item that counts keystrokes + statusTexts: { + lines: "lines", + words: "words", + autosave: "Autosaved: ", + }, styleSelectedText: false, syncSideBySidePreviewScroll: false, tabSize: 4, diff --git a/src/css/easymde.css b/src/css/easymde.css index 92cf821..4adcff1 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -202,11 +202,11 @@ } .editor-statusbar .lines:before { - content: 'lines: ' + content: attr(data-status-bar-before) ': '; } .editor-statusbar .words:before { - content: 'words: ' + content: attr(data-status-bar-before) ': '; } .editor-statusbar .characters:before { diff --git a/src/js/easymde.js b/src/js/easymde.js index 761f604..2ca3658 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1479,6 +1479,12 @@ var promptTexts = { image: 'URL of the image:', }; +var statusTexts = { + lines: 'lines', + words: 'words', + autosave: 'Autosaved: ' +}; + var blockStyles = { 'bold': '**', 'code': '```', @@ -1614,6 +1620,9 @@ function EasyMDE(options) { // Merging the promptTexts, with the given options options.promptTexts = extend({}, promptTexts, options.promptTexts || {}); + // Merging the statusTexts, with the given options + options.statusTexts = extend({}, statusTexts, options.statusTexts || {}); + // Merging the blockStyles, with the given options options.blockStyles = extend({}, blockStyles, options.blockStyles || {}); @@ -2004,16 +2013,27 @@ EasyMDE.prototype.autosave = function () { var m = d.getMinutes(); var dd = 'am'; var h = hh; - if (h >= 12) { - h = hh - 12; - dd = 'pm'; - } - if (h == 0) { - h = 12; - } + var html = ''; + var save = this.options.statusTexts.autosave; + m = m < 10 ? '0' + m : m; - el.innerHTML = 'Autosaved: ' + h + ':' + m + ' ' + dd; + if (this.options.autosave.timeFormat == undefined || this.options.autosave.timeFormat == 12) { + if (h >= 12) { + h = hh - 12; + dd = 'pm'; + } + if (h == 0) { + h = 12; + } + + html = save + h + ':' + m + ' ' + dd; + } + if (this.options.autosave.timeFormat == 24) { + html = save + h + ':' + m; + } + + el.innerHTML = html; } this.autosaveTimeoutId = setTimeout(function () { @@ -2358,18 +2378,20 @@ EasyMDE.prototype.createStatusbar = function (status) { // Set up the built-in items var items = []; - var i, onUpdate, defaultValue; + var i, onUpdate, defaultValue, dataSet; for (i = 0; i < status.length; i++) { // Reset some values onUpdate = undefined; defaultValue = undefined; + dataSet = undefined; // Handle if custom or not if (typeof status[i] === 'object') { items.push({ className: status[i].className, + dataSet: status[i].dataSet, defaultValue: status[i].defaultValue, onUpdate: status[i].onUpdate, }); @@ -2377,6 +2399,8 @@ EasyMDE.prototype.createStatusbar = function (status) { var name = status[i]; if (name === 'words') { + dataSet = options.statusTexts[name]; + defaultValue = function (el) { el.innerHTML = wordCount(cm.getValue()); }; @@ -2384,6 +2408,8 @@ EasyMDE.prototype.createStatusbar = function (status) { el.innerHTML = wordCount(cm.getValue()); }; } else if (name === 'lines') { + dataSet = options.statusTexts[name]; + defaultValue = function (el) { el.innerHTML = cm.lineCount(); }; @@ -2412,6 +2438,7 @@ EasyMDE.prototype.createStatusbar = function (status) { items.push({ className: name, + dataSet: dataSet, defaultValue: defaultValue, onUpdate: onUpdate, }); @@ -2434,6 +2461,10 @@ EasyMDE.prototype.createStatusbar = function (status) { var el = document.createElement('span'); el.className = item.className; + if (item.dataSet != undefined) { + el.dataset.statusBarBefore = item.dataSet; + } + // Ensure the defaultValue is a function if (typeof item.defaultValue === 'function') {