diff --git a/src/js/simplemde.js b/src/js/simplemde.js index 2de43f3..92d3501 100644 --- a/src/js/simplemde.js +++ b/src/js/simplemde.js @@ -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; @@ -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; } @@ -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)) { @@ -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": { @@ -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": { @@ -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": { @@ -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 }, @@ -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 }, @@ -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" } }; @@ -1582,7 +1729,7 @@ function isLocalStorageAvailable() { try { localStorage.setItem("smde_localStorage", 1); localStorage.removeItem("smde_localStorage"); - } catch(e) { + } catch (e) { return false; } } else { @@ -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 @@ -2082,4 +2229,4 @@ SimpleMDE.prototype.toTextArea = function() { } }; -module.exports = SimpleMDE; +module.exports = SimpleMDE; \ No newline at end of file