Netsyms
/
simplemde-markdown-editor
mirror of https://github.com/sparksuite/simplemde-markdown-editor.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Refactor custom status bar items

Browse Source
pull/237/head
Wes Cossick 8 years ago
parent a318e44ffe
commit 6b6bb408cf
5 changed files with 303 additions and 253 deletions
Show Stats Download Patch File Download Diff File

25
README.md
Unescape Escape View File

@ -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.

174
debug/simplemde.debug.js
View File

File diff suppressed because one or more lines are too long

172
debug/simplemde.js
Unescape Escape View File

@ -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;
// Make sure the status variable is valid
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 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
View File

File diff suppressed because one or more lines are too long

169
src/js/simplemde.js
Unescape Escape View File

@ -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;
// Make sure the status variable is valid
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 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;

Write Preview
Loading…
Cancel
Save