mirror of
https://github.com/sparksuite/simplemde-markdown-editor.git
synced 2024-05-17 05:06:49 +02:00
Refactor custom status bar items
This commit is contained in:
parent
a318e44ffe
commit
6b6bb408cf
25
README.md
25
README.md
|
@ -100,7 +100,7 @@ simplemde.value("This text will appear in the editor");
|
|||
- **spellChecker**: If set to `false`, disable the spell checker. 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.
|
||||
- **statusCustom**: An object of custom elements to add to the statusbar
|
||||
- **statusCustom**: An object of custom elements to add to the status bar.
|
||||
- **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).
|
||||
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
|
||||
|
@ -156,17 +156,16 @@ var simplemde = new SimpleMDE({
|
|||
spellChecker: false,
|
||||
status: false,
|
||||
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";
|
||||
}
|
||||
}
|
||||
},
|
||||
status: ["autosave", "lines", "words", "cursor", {
|
||||
className: "keystrokes",
|
||||
defaultValue: function(el) {
|
||||
this.keystrokes = 0;
|
||||
el.innerHTML = "0 Keystrokes";
|
||||
},
|
||||
onUpdate: function(el) {
|
||||
el.innerHTML = ++this.keystrokes + " Keystrokes";
|
||||
}
|
||||
}], // Another optional usage, with a custom status item that counts keystrokes
|
||||
tabSize: 4,
|
||||
toolbar: false,
|
||||
toolbarTips: false,
|
||||
|
@ -175,7 +174,7 @@ var simplemde = new SimpleMDE({
|
|||
|
||||
#### Toolbar icons
|
||||
|
||||
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Note that shortcut hints are added automatically and reflect the specified "action" if it has a keybind assigned to it (ie. with the value of "action" set to `bold` and that of "tootip" set to "Bold", the final text the user will see - assuming the default shortcuts are unchanged - would be "Bold (Ctrl-B)").
|
||||
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)").
|
||||
|
||||
Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -13884,9 +13884,6 @@ function SimpleMDE(options) {
|
|||
if(!options.hasOwnProperty("status")) {
|
||||
options.status = ["autosave", "lines", "words", "cursor"];
|
||||
}
|
||||
if(!options.hasOwnProperty("statusCustom")) {
|
||||
options.statusCustom = {};
|
||||
}
|
||||
|
||||
|
||||
// Add default preview rendering function
|
||||
|
@ -14040,7 +14037,7 @@ SimpleMDE.prototype.render = function(el) {
|
|||
if(options.toolbar !== false) {
|
||||
this.createToolbar();
|
||||
}
|
||||
if(options.status !== false || options.statusCustom) {
|
||||
if(options.status !== false) {
|
||||
this.createStatusbar();
|
||||
}
|
||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||
|
@ -14240,97 +14237,118 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
|||
};
|
||||
|
||||
SimpleMDE.prototype.createStatusbar = function(status) {
|
||||
var customOptions = this.options.statusCustom;
|
||||
// Initialize
|
||||
status = status || this.options.status;
|
||||
var options = this.options;
|
||||
var cm = this.codemirror;
|
||||
|
||||
if(!status || status.length === 0) return;
|
||||
|
||||
// Copy the defaults if the status is a boolean true
|
||||
if(status === true) status = ["autosave", "lines", "words", "cursor"];
|
||||
// Make sure the status variable is valid
|
||||
if(!status || status.length === 0)
|
||||
return;
|
||||
|
||||
|
||||
// Set up the built-in items
|
||||
var items = [];
|
||||
var i, onUpdate, defaultValue;
|
||||
|
||||
// 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];
|
||||
// Reset some values
|
||||
onUpdate = undefined;
|
||||
defaultValue = undefined;
|
||||
|
||||
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];
|
||||
// Handle if custom or not
|
||||
if(typeof status[i] === "object") {
|
||||
items.push({
|
||||
className: status[i].className,
|
||||
defaultValue: status[i].defaultValue,
|
||||
onUpdate: status[i].onUpdate
|
||||
});
|
||||
} else {
|
||||
var name = status[i];
|
||||
|
||||
// Copy the option into the combined actions
|
||||
// This will allow the user to override the defaults
|
||||
actions[key] = {
|
||||
defaultValue: thisOption.defaultValue,
|
||||
onUpdate: thisOption.onUpdate
|
||||
};
|
||||
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) {
|
||||
var 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");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
items.push({
|
||||
className: name,
|
||||
defaultValue: defaultValue,
|
||||
onUpdate: onUpdate
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Create element for the status bar
|
||||
var bar = document.createElement("div");
|
||||
bar.className = "editor-statusbar";
|
||||
|
||||
var pos, cm = this.codemirror;
|
||||
// Create a new span for each action
|
||||
for(name in actions) {
|
||||
if(actions.hasOwnProperty(name)) {
|
||||
var el = document.createElement("span");
|
||||
el.className = name;
|
||||
// Ensure the defaultValue is a function
|
||||
if(typeof actions[name].defaultValue === "function") {
|
||||
actions[name].defaultValue(el);
|
||||
}
|
||||
// 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);
|
||||
|
||||
// Create a new span for each item
|
||||
for(i = 0; i < items.length; i++) {
|
||||
// Store in temporary variable
|
||||
var item = items[i];
|
||||
|
||||
|
||||
// Create span element
|
||||
var el = document.createElement("span");
|
||||
el.className = item.className;
|
||||
|
||||
|
||||
// Ensure the defaultValue is a function
|
||||
if(typeof item.defaultValue === "function") {
|
||||
item.defaultValue(el);
|
||||
}
|
||||
|
||||
|
||||
// Ensure the onUpdate is a function
|
||||
if(typeof item.onUpdate === "function") {
|
||||
// Create a closure around the span of the current action, then execute the onUpdate handler
|
||||
this.codemirror.on("update", (function(el, item) {
|
||||
console.log(el);
|
||||
console.log(item);
|
||||
console.log("---------------");
|
||||
return function() {
|
||||
item.onUpdate(el);
|
||||
};
|
||||
}(el, item)));
|
||||
}
|
||||
|
||||
|
||||
// Append the item to the status bar
|
||||
bar.appendChild(el);
|
||||
}
|
||||
|
||||
|
||||
// Insert the status bar into the DOM
|
||||
var cmWrapper = this.codemirror.getWrapperElement();
|
||||
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
||||
return bar;
|
||||
|
|
16
dist/simplemde.min.js
vendored
16
dist/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1019,9 +1019,6 @@ function SimpleMDE(options) {
|
|||
if(!options.hasOwnProperty("status")) {
|
||||
options.status = ["autosave", "lines", "words", "cursor"];
|
||||
}
|
||||
if(!options.hasOwnProperty("statusCustom")) {
|
||||
options.statusCustom = {};
|
||||
}
|
||||
|
||||
|
||||
// Add default preview rendering function
|
||||
|
@ -1175,7 +1172,7 @@ SimpleMDE.prototype.render = function(el) {
|
|||
if(options.toolbar !== false) {
|
||||
this.createToolbar();
|
||||
}
|
||||
if(options.status !== false || options.statusCustom) {
|
||||
if(options.status !== false) {
|
||||
this.createStatusbar();
|
||||
}
|
||||
if(options.autosave != undefined && options.autosave.enabled === true) {
|
||||
|
@ -1375,97 +1372,115 @@ SimpleMDE.prototype.createToolbar = function(items) {
|
|||
};
|
||||
|
||||
SimpleMDE.prototype.createStatusbar = function(status) {
|
||||
var customOptions = this.options.statusCustom;
|
||||
// Initialize
|
||||
status = status || this.options.status;
|
||||
var options = this.options;
|
||||
var cm = this.codemirror;
|
||||
|
||||
if(!status || status.length === 0) return;
|
||||
|
||||
// Copy the defaults if the status is a boolean true
|
||||
if(status === true) status = ["autosave", "lines", "words", "cursor"];
|
||||
// Make sure the status variable is valid
|
||||
if(!status || status.length === 0)
|
||||
return;
|
||||
|
||||
|
||||
// Set up the built-in items
|
||||
var items = [];
|
||||
var i, onUpdate, defaultValue;
|
||||
|
||||
// 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];
|
||||
// Reset some values
|
||||
onUpdate = undefined;
|
||||
defaultValue = undefined;
|
||||
|
||||
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];
|
||||
// Handle if custom or not
|
||||
if(typeof status[i] === "object") {
|
||||
items.push({
|
||||
className: status[i].className,
|
||||
defaultValue: status[i].defaultValue,
|
||||
onUpdate: status[i].onUpdate
|
||||
});
|
||||
} else {
|
||||
var name = status[i];
|
||||
|
||||
// Copy the option into the combined actions
|
||||
// This will allow the user to override the defaults
|
||||
actions[key] = {
|
||||
defaultValue: thisOption.defaultValue,
|
||||
onUpdate: thisOption.onUpdate
|
||||
};
|
||||
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) {
|
||||
var 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");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
items.push({
|
||||
className: name,
|
||||
defaultValue: defaultValue,
|
||||
onUpdate: onUpdate
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Create element for the status bar
|
||||
var bar = document.createElement("div");
|
||||
bar.className = "editor-statusbar";
|
||||
|
||||
var pos, cm = this.codemirror;
|
||||
// Create a new span for each action
|
||||
for(name in actions) {
|
||||
if(actions.hasOwnProperty(name)) {
|
||||
var el = document.createElement("span");
|
||||
el.className = name;
|
||||
// Ensure the defaultValue is a function
|
||||
if(typeof actions[name].defaultValue === "function") {
|
||||
actions[name].defaultValue(el);
|
||||
}
|
||||
// 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);
|
||||
|
||||
// Create a new span for each item
|
||||
for(i = 0; i < items.length; i++) {
|
||||
// Store in temporary variable
|
||||
var item = items[i];
|
||||
|
||||
|
||||
// Create span element
|
||||
var el = document.createElement("span");
|
||||
el.className = item.className;
|
||||
|
||||
|
||||
// Ensure the defaultValue is a function
|
||||
if(typeof item.defaultValue === "function") {
|
||||
item.defaultValue(el);
|
||||
}
|
||||
|
||||
|
||||
// Ensure the onUpdate is a function
|
||||
if(typeof item.onUpdate === "function") {
|
||||
// Create a closure around the span of the current action, then execute the onUpdate handler
|
||||
this.codemirror.on("update", (function(el, item) {
|
||||
return function() {
|
||||
item.onUpdate(el);
|
||||
};
|
||||
}(el, item)));
|
||||
}
|
||||
|
||||
|
||||
// Append the item to the status bar
|
||||
bar.appendChild(el);
|
||||
}
|
||||
|
||||
|
||||
// Insert the status bar into the DOM
|
||||
var cmWrapper = this.codemirror.getWrapperElement();
|
||||
cmWrapper.parentNode.insertBefore(bar, cmWrapper.nextSibling);
|
||||
return bar;
|
||||
|
|
Loading…
Reference in a new issue