Merge 55dfe2faf8 into e32fe3f91c

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;