mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-06-30 17:50:49 +02:00
Merge pull request #233 from ryan-codingintrigue/development
Add support for custom counts in statusbar
This commit is contained in:
commit
120d7e5c85
12
README.md
12
README.md
|
@ -100,6 +100,7 @@ simplemde.value("This text will appear in the editor");
|
||||||
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
|
||||||
- **status**: If set to `false`, hide the status bar. Defaults to `true`.
|
- **status**: If set to `false`, hide the status bar. Defaults to `true`.
|
||||||
- Optionally, you can set an array of status bar elements to include, and in what order.
|
- Optionally, you can set an array of status bar elements to include, and in what order.
|
||||||
|
- **statusCustom**: An object of custom elements to add to the statusbar
|
||||||
- **tabSize**: If set, customize the tab size. Defaults to `2`.
|
- **tabSize**: If set, customize the tab size. Defaults to `2`.
|
||||||
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
|
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
|
||||||
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
|
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
|
||||||
|
@ -155,6 +156,17 @@ var simplemde = new SimpleMDE({
|
||||||
spellChecker: false,
|
spellChecker: false,
|
||||||
status: false,
|
status: false,
|
||||||
status: ["autosave", "lines", "words", "cursor"], // Optional usage
|
status: ["autosave", "lines", "words", "cursor"], // Optional usage
|
||||||
|
statusCustom: {
|
||||||
|
countKeyStrokes: { // Counts the total number of keystrokes
|
||||||
|
defaultValue: function(span) {
|
||||||
|
this.keystrokes = 0;
|
||||||
|
span.innerHTML = "0 Keystrokes";
|
||||||
|
},
|
||||||
|
onUpdate: function(span) {
|
||||||
|
span.innerHTML = ++this.keystrokes + " Keystrokes";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
tabSize: 4,
|
tabSize: 4,
|
||||||
toolbar: false,
|
toolbar: false,
|
||||||
toolbarTips: false,
|
toolbarTips: false,
|
||||||
|
|
|
@ -1019,6 +1019,9 @@ function SimpleMDE(options) {
|
||||||
if(!options.hasOwnProperty("status")) {
|
if(!options.hasOwnProperty("status")) {
|
||||||
options.status = ["autosave", "lines", "words", "cursor"];
|
options.status = ["autosave", "lines", "words", "cursor"];
|
||||||
}
|
}
|
||||||
|
if(!options.hasOwnProperty("statusCustom")) {
|
||||||
|
options.statusCustom = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Add default preview rendering function
|
// Add default preview rendering function
|
||||||
|
@ -1172,7 +1175,7 @@ SimpleMDE.prototype.render = function(el) {
|
||||||
if(options.toolbar !== false) {
|
if(options.toolbar !== false) {
|
||||||
this.createToolbar();
|
this.createToolbar();
|
||||||
}
|
}
|
||||||
if(options.status !== false) {
|
if(options.status !== false || options.statusCustom) {
|
||||||
this.createStatusbar();
|
this.createStatusbar();
|
||||||
}
|
}
|
||||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||||
|
@ -1372,47 +1375,95 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
||||||
};
|
};
|
||||||
|
|
||||||
SimpleMDE.prototype.createStatusbar = function(status) {
|
SimpleMDE.prototype.createStatusbar = function(status) {
|
||||||
|
var customOptions = this.options.statusCustom;
|
||||||
status = status || this.options.status;
|
status = status || this.options.status;
|
||||||
var options = this.options;
|
var options = this.options;
|
||||||
|
|
||||||
if(!status || status.length === 0) return;
|
if(!status || status.length === 0) return;
|
||||||
|
|
||||||
|
// Copy the defaults if the status is a boolean true
|
||||||
|
if(status === true) status = ["autosave", "lines", "words", "cursor"];
|
||||||
|
|
||||||
|
// Set up the in-built actions: autosave, lines, words, cursor
|
||||||
|
var actions = {};
|
||||||
|
var i, name, onUpdate, defaultValue;
|
||||||
|
for(i = 0; i < status.length; i++) {
|
||||||
|
name = status[i];
|
||||||
|
|
||||||
|
if(name === "words") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = wordCount(cm.getValue());
|
||||||
|
};
|
||||||
|
} else if(name === "lines") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
el.innerHTML = cm.lineCount();
|
||||||
|
};
|
||||||
|
} else if(name === "cursor") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
el.innerHTML = "0:0";
|
||||||
|
};
|
||||||
|
onUpdate = function(el) {
|
||||||
|
pos = cm.getCursor();
|
||||||
|
el.innerHTML = pos.line + ":" + pos.ch;
|
||||||
|
};
|
||||||
|
} else if(name === "autosave") {
|
||||||
|
defaultValue = function(el) {
|
||||||
|
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||||
|
el.setAttribute("id", "autosaved");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
actions[name] = {
|
||||||
|
onUpdate: onUpdate,
|
||||||
|
defaultValue: defaultValue
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iterate any user-provided options
|
||||||
|
for(var key in customOptions) {
|
||||||
|
if(customOptions.hasOwnProperty(key)) {
|
||||||
|
var thisOption = customOptions[key];
|
||||||
|
|
||||||
|
// Copy the option into the combined actions
|
||||||
|
// This will allow the user to override the defaults
|
||||||
|
actions[key] = {
|
||||||
|
defaultValue: thisOption.defaultValue,
|
||||||
|
onUpdate: thisOption.onUpdate
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var bar = document.createElement("div");
|
var bar = document.createElement("div");
|
||||||
bar.className = "editor-statusbar";
|
bar.className = "editor-statusbar";
|
||||||
|
|
||||||
var pos, cm = this.codemirror;
|
var pos, cm = this.codemirror;
|
||||||
for(var i = 0; i < status.length; i++) {
|
// Create a new span for each action
|
||||||
(function(name) {
|
for(name in actions) {
|
||||||
|
if(actions.hasOwnProperty(name)) {
|
||||||
var el = document.createElement("span");
|
var el = document.createElement("span");
|
||||||
el.className = name;
|
el.className = name;
|
||||||
if(name === "words") {
|
// Ensure the defaultValue is a function
|
||||||
el.innerHTML = "0";
|
if(typeof actions[name].defaultValue === "function") {
|
||||||
cm.on("update", function() {
|
actions[name].defaultValue(el);
|
||||||
el.innerHTML = wordCount(cm.getValue());
|
|
||||||
});
|
|
||||||
} else if(name == "characters") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
|
||||||
el.innerHTML = cm.getValue().length;
|
|
||||||
});
|
|
||||||
} else if(name === "lines") {
|
|
||||||
el.innerHTML = "0";
|
|
||||||
cm.on("update", function() {
|
|
||||||
el.innerHTML = cm.lineCount();
|
|
||||||
});
|
|
||||||
} else if(name === "cursor") {
|
|
||||||
el.innerHTML = "0:0";
|
|
||||||
cm.on("cursorActivity", function() {
|
|
||||||
pos = cm.getCursor();
|
|
||||||
el.innerHTML = pos.line + ":" + pos.ch;
|
|
||||||
});
|
|
||||||
} else if(name === "autosave") {
|
|
||||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
|
||||||
el.setAttribute("id", "autosaved");
|
|
||||||
}
|
}
|
||||||
|
// Ensure the onUpdate is a function
|
||||||
|
if(typeof actions[name].onUpdate === "function") {
|
||||||
|
// Create a closure around the span and the name
|
||||||
|
// of the current action, then execute the onUpdate handler
|
||||||
|
cm.on("update", (function(el, name) {
|
||||||
|
return function() {
|
||||||
|
actions[name].onUpdate(el);
|
||||||
|
};
|
||||||
|
}(el, name)));
|
||||||
}
|
}
|
||||||
bar.appendChild(el);
|
bar.appendChild(el);
|
||||||
})(status[i]);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var cmWrapper = this.codemirror.getWrapperElement();
|
var cmWrapper = this.codemirror.getWrapperElement();
|
||||||
|
|
Loading…
Reference in a new issue