Refactor default toolbar organization; Allow showIcons setting (#170)

src/js/simplemde.js

@@ -666,19 +666,20 @@ function wordCount(data) {
 	return count;
 }
 
-
 var toolbarBuiltInButtons = {
 	"bold": {
 		name: "bold",
 		action: toggleBold,
 		className: "fa fa-bold",
-		title: "Bold (Ctrl+B)"
+		title: "Bold (Ctrl+B)",
+		default: true
 	},
 	"italic": {
 		name: "italic",
 		action: toggleItalic,
 		className: "fa fa-italic",
-		title: "Italic (Ctrl+I)"
+		title: "Italic (Ctrl+I)",
+		default: true
 	},
 	"strikethrough": {
 		name: "strikethrough",
@@ -690,7 +691,8 @@ var toolbarBuiltInButtons = {
 		name: "heading",
 		action: toggleHeadingSmaller,
 		className: "fa fa-header",
-		title: "Heading (Ctrl+H)"
+		title: "Heading (Ctrl+H)",
+		default: true
 	},
 	"heading-smaller": {
 		name: "heading-smaller",
@@ -722,6 +724,9 @@ var toolbarBuiltInButtons = {
 		className: "fa fa-header fa-header-x fa-header-3",
 		title: "Small Heading"
 	},
+	"separator-1": {
+		name: "separator-1"
+	},
 	"code": {
 		name: "code",
 		action: toggleCodeBlock,
@@ -732,31 +737,39 @@ var toolbarBuiltInButtons = {
 		name: "quote",
 		action: toggleBlockquote,
 		className: "fa fa-quote-left",
-		title: "Quote (Ctrl+')"
+		title: "Quote (Ctrl+')",
+		default: true
 	},
 	"unordered-list": {
 		name: "unordered-list",
 		action: toggleUnorderedList,
 		className: "fa fa-list-ul",
-		title: "Generic List (Ctrl+L)"
+		title: "Generic List (Ctrl+L)",
+		default: true
 	},
 	"ordered-list": {
 		name: "ordered-list",
 		action: toggleOrderedList,
 		className: "fa fa-list-ol",
-		title: "Numbered List (Ctrl+Alt+L)"
+		title: "Numbered List (Ctrl+Alt+L)",
+		default: true
+	},
+	"separator-2": {
+		name: "separator-2"
 	},
 	"link": {
 		name: "link",
 		action: drawLink,
 		className: "fa fa-link",
-		title: "Create Link (Ctrl+K)"
+		title: "Create Link (Ctrl+K)",
+		default: true
 	},
 	"image": {
 		name: "image",
 		action: drawImage,
 		className: "fa fa-picture-o",
-		title: "Insert Image (Ctrl+Alt+I)"
+		title: "Insert Image (Ctrl+Alt+I)",
+		default: true
 	},
 	"table": {
 		name: "table",
@@ -770,29 +783,36 @@ var toolbarBuiltInButtons = {
 		className: "fa fa-minus",
 		title: "Insert Horizontal Line"
 	},
+	"separator-3": {
+		name: "separator-3"
+	},
 	"preview": {
 		name: "preview",
 		action: togglePreview,
 		className: "fa fa-eye no-disable",
-		title: "Toggle Preview (Ctrl+P)"
+		title: "Toggle Preview (Ctrl+P)",
+		default: true
 	},
 	"side-by-side": {
 		name: "side-by-side",
 		action: toggleSideBySide,
 		className: "fa fa-columns no-disable no-mobile",
-		title: "Toggle Side by Side (F9)"
+		title: "Toggle Side by Side (F9)",
+		default: true
 	},
 	"fullscreen": {
 		name: "fullscreen",
 		action: toggleFullScreen,
 		className: "fa fa-arrows-alt no-disable no-mobile",
-		title: "Toggle Fullscreen (F11)"
+		title: "Toggle Fullscreen (F11)",
+		default: true
 	},
 	"guide": {
 		name: "guide",
 		action: "http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide",
 		className: "fa fa-question-circle",
-		title: "Markdown Guide"
+		title: "Markdown Guide",
+		default: true
 	}
 };
 
@@ -857,10 +877,28 @@ function SimpleMDE(options) {
 	}
 
 
-	// Handle toolbar and status bar
+	// Handle toolbar
-	if(options.toolbar !== false)
+	if(options.toolbar === undefined) {
-		options.toolbar = options.toolbar || SimpleMDE.toolbar;
+		// Initialize
+		options.toolbar = [];
 
+
+		// Loop over the built in buttons, to get the preferred order
+		for(var key in toolbarBuiltInButtons) {
+			if(toolbarBuiltInButtons.hasOwnProperty(key)) {
+				if(key.indexOf("separator-") != -1) {
+					options.toolbar.push("|");
+				}
+
+				if(toolbarBuiltInButtons[key].default === true || (options.showIcons && options.showIcons.constructor === Array && options.showIcons.indexOf(key) != -1)) {
+					options.toolbar.push(key);
+				}
+			}
+		}
+	}
+
+
+	// Handle status bar
 	if(!options.hasOwnProperty("status")) {
 		options.status = ["autosave", "lines", "words", "cursor"];
 	}
@@ -908,11 +946,6 @@ function SimpleMDE(options) {
 	}
 }
 
-/**
- * Default toolbar elements.
- */
-SimpleMDE.toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen", "guide"];
-
 /**
  * Default markdown render.
  */