Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to specify icons set, font-awesome or material #743

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Add option to specify icons set, font-awesome or material #743

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 177 additions & 30 deletions src/js/simplemde.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function fixShortcut(name) {
/**
* Create icon element for toolbar.
*/
function createIcon(options, enableTooltips, shortcuts) {
function createIcon(options, enableTooltips, shortcuts, iconsSet) {
options = options || {};
var el = document.createElement("button");
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
Expand All @@ -109,7 +109,10 @@ function createIcon(options, enableTooltips, shortcuts) {
}

el.tabIndex = -1;
el.className = options.className;
el.className = options.className[iconsSet || "fa"];
if(options.textContent) {
el.textContent = options.textContent[iconsSet || "fa"];
}
return el;
}

Expand Down Expand Up @@ -211,7 +214,7 @@ function toggleFullScreen(editor) {


// Update toolbar button
if (editor.toolbarElements.fullscreen) {
if(editor.toolbarElements.fullscreen) {
var toolbarButton = editor.toolbarElements.fullscreen;

if(!/active/.test(toolbarButton.className)) {
Expand Down Expand Up @@ -1105,58 +1108,112 @@ var toolbarBuiltInButtons = {
"bold": {
name: "bold",
action: toggleBold,
className: "fa fa-bold",
className: {
fa: "fa fa-bold",
material: "material-icons"
},
textContent: {
material: "format_bold"
},
title: "Bold",
default: true
},
"italic": {
name: "italic",
action: toggleItalic,
className: "fa fa-italic",
className: {
fa: "fa fa-italic",
material: "material-icons"
},
textContent: {
material: "format_italic"
},
title: "Italic",
default: true
},
"strikethrough": {
name: "strikethrough",
action: toggleStrikethrough,
className: "fa fa-strikethrough",
className: {
fa: "fa fa-strikethrough",
material: "material-icons"
},
textContent: {
material: "format_strikethrough"
},
title: "Strikethrough"
},
"heading": {
name: "heading",
action: toggleHeadingSmaller,
className: "fa fa-header",
className: {
fa: "fa fa-header",
material: "material-icons"
},
textContent: {
material: "title"
},
title: "Heading",
default: true
},
"heading-smaller": {
name: "heading-smaller",
action: toggleHeadingSmaller,
className: "fa fa-header fa-header-x fa-header-smaller",
className: {
fa: "fa fa-header fa-header-x fa-header-smaller",
material: "material-icons md-18"
},
textContent: {
material: "title"
},
title: "Smaller Heading"
},
"heading-bigger": {
name: "heading-bigger",
action: toggleHeadingBigger,
className: "fa fa-header fa-header-x fa-header-bigger",
className: {
fa: "fa fa-header fa-header-x fa-header-bigger",
material: "material-icons md-36"
},
textContent: {
material: "title"
},
title: "Bigger Heading"
},
"heading-1": {
name: "heading-1",
action: toggleHeading1,
className: "fa fa-header fa-header-x fa-header-1",
className: {
fa: "fa fa-header fa-header-x fa-header-1",
material: "material-icons md-18"
},
textContent: {
material: "title"
},
title: "Big Heading"
},
"heading-2": {
name: "heading-2",
action: toggleHeading2,
className: "fa fa-header fa-header-x fa-header-2",
className: {
fa: "fa fa-header fa-header-x fa-header-2",
material: "material-icons md-24"
},
textContent: {
material: "title"
},
title: "Medium Heading"
},
"heading-3": {
name: "heading-3",
action: toggleHeading3,
className: "fa fa-header fa-header-x fa-header-3",
className: {
fa: "fa fa-header fa-header-x fa-header-3",
material: "material-icons md-36"
},
textContent: {
material: "title"
},
title: "Small Heading"
},
"separator-1": {
Expand All @@ -1165,34 +1222,64 @@ var toolbarBuiltInButtons = {
"code": {
name: "code",
action: toggleCodeBlock,
className: "fa fa-code",
className: {
fa: "fa fa-code",
material: "material-icons"
},
textContent: {
material: "code"
},
title: "Code"
},
"quote": {
name: "quote",
action: toggleBlockquote,
className: "fa fa-quote-left",
className: {
fa: "fa fa-quote-left",
material: "material-icons"
},
textContent: {
material: "format_quote"
},
title: "Quote",
default: true
},
"unordered-list": {
name: "unordered-list",
action: toggleUnorderedList,
className: "fa fa-list-ul",
className: {
fa: "fa fa-list-ul",
material: "material-icons"
},
textContent: {
material: "format_list_bulleted"
},
title: "Generic List",
default: true
},
"ordered-list": {
name: "ordered-list",
action: toggleOrderedList,
className: "fa fa-list-ol",
className: {
fa: "fa fa-list-ol",
material: "material-icons"
},
textContent: {
material: "format_list_numbered"
},
title: "Numbered List",
default: true
},
"clean-block": {
name: "clean-block",
action: cleanBlock,
className: "fa fa-eraser fa-clean-block",
className: {
fa: "fa fa-eraser fa-clean-block",
material: "material-icons"
},
textContent: {
material: "backspace"
},
title: "Clean block"
},
"separator-2": {
Expand All @@ -1201,27 +1288,51 @@ var toolbarBuiltInButtons = {
"link": {
name: "link",
action: drawLink,
className: "fa fa-link",
className: {
fa: "fa fa-link",
material: "material-icons"
},
textContent: {
material: "insert_link"
},
title: "Create Link",
default: true
},
"image": {
name: "image",
action: drawImage,
className: "fa fa-picture-o",
className: {
fa: "fa fa-picture-o",
material: "material-icons"
},
textContent: {
material: "insert_photo"
},
title: "Insert Image",
default: true
},
"table": {
name: "table",
action: drawTable,
className: "fa fa-table",
className: {
fa: "fa fa-table",
material: "material-icons"
},
textContent: {
material: "table_chart"
},
title: "Insert Table"
},
"horizontal-rule": {
name: "horizontal-rule",
action: drawHorizontalRule,
className: "fa fa-minus",
className: {
fa: "fa fa-minus",
material: "material-icons"
},
textContent: {
material: "power_input"
},
title: "Insert Horizontal Line"
},
"separator-3": {
Expand All @@ -1230,21 +1341,39 @@ var toolbarBuiltInButtons = {
"preview": {
name: "preview",
action: togglePreview,
className: "fa fa-eye no-disable",
className: {
fa: "fa fa-eye no-disable",
material: "material-icons"
},
textContent: {
material: "remove_red_eye"
},
title: "Toggle Preview",
default: true
},
"side-by-side": {
name: "side-by-side",
action: toggleSideBySide,
className: "fa fa-columns no-disable no-mobile",
className: {
fa: "fa fa-columns no-disable no-mobile",
material: "material-icons no-disable no-mobile"
},
textContent: {
material: "vertical_split"
},
title: "Toggle Side by Side",
default: true
},
"fullscreen": {
name: "fullscreen",
action: toggleFullScreen,
className: "fa fa-arrows-alt no-disable no-mobile",
className: {
fa: "fa fa-arrows-alt no-disable no-mobile",
material: "material-icons no-disable no-mobile"
},
textContent: {
material: "fullscreen"
},
title: "Toggle Fullscreen",
default: true
},
Expand All @@ -1254,7 +1383,13 @@ var toolbarBuiltInButtons = {
"guide": {
name: "guide",
action: "https://simplemde.com/markdown-guide",
className: "fa fa-question-circle",
className: {
fa: "fa fa-question-circle",
material: "material-icons"
},
textContent: {
material: "help"
},
title: "Markdown Guide",
default: true
},
Expand All @@ -1264,13 +1399,25 @@ var toolbarBuiltInButtons = {
"undo": {
name: "undo",
action: undo,
className: "fa fa-undo no-disable",
className: {
fa: "fa fa-undo no-disable",
material: "material-icons no-disable"
},
textContent: {
material: "undo"
},
title: "Undo"
},
"redo": {
name: "redo",
action: redo,
className: "fa fa-repeat no-disable",
className: {
fa: "fa fa-repeat no-disable",
material: "material-icons no-disable"
},
textContent: {
material: "redo"
},
title: "Redo"
}
};
Expand Down Expand Up @@ -1582,7 +1729,7 @@ function isLocalStorageAvailable() {
try {
localStorage.setItem("smde_localStorage", 1);
localStorage.removeItem("smde_localStorage");
} catch(e) {
} catch (e) {
return false;
}
} else {
Expand Down Expand Up @@ -1755,7 +1902,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
if(item === "|") {
el = createSep();
} else {
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
el = createIcon(item, self.options.toolbarTips, self.options.shortcuts, self.options.iconsSet);
}

// bind events, special for info
Expand Down Expand Up @@ -2082,4 +2229,4 @@ SimpleMDE.prototype.toTextArea = function() {
}
};

module.exports = SimpleMDE;
module.exports = SimpleMDE;