repo/sceditor: src/sceditor.js comparison

comparison src/sceditor.js @ 38:2dfdaaac9482

simplify icons

author	Franklin Schmidt <fschmidt@gmail.com>
date	Thu, 18 Aug 2022 21:36:34 -0600
parents	0c4e4b5ef40d
children	9f63c8f506d1

comparison

equal deleted inserted replaced

-:0c4e4b5ef40d
+:2dfdaaac9482
 					'<link rel="stylesheet" type="text/css" href="{style}" />' +
 				'</head>' +
 				'<body contenteditable="true" {spellcheck}><p></p></body>' +
 			'</html>',
-		toolbarButton: '<a class="sceditor-button sceditor-button-{iconName}" ' +
+		toolbarButton: '<a class="sceditor-button" ' +
 			'data-sceditor-command="{name}" unselectable="on">' +
-			'<div unselectable="on">{dispName}</div></a>',
+			'{icon}</a>',
 		emoticon: '<img src="{url}" data-sceditor-emoticon="{key}" ' +
 			'alt="{key}" title="{tooltip}" />',
 		fontOpt: '<a class="sceditor-font-option" href="#" ' +
 			}
 		}
 	}
+	function material(png) {
+		return '<img src="' + baseUrl + 'icons/material/' + png + '" width=18 height=18>';
+	}
 	/**
 	 * Map of all the commands for SCEditor
 	 * @type {Object}
 	 * @name commands
-	 * @memberOf jQuery.sceditor
 	 */
 	var defaultCmds = {
 		// START_COMMAND: Bold
 		bold: {
 			exec: 'bold',
 			tooltip: 'Bold',
-			shortcut: 'Ctrl+B'
+			shortcut: 'Ctrl+B',
+			icon: material('format-bold.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Italic
 		italic: {
 			exec: 'italic',
 			tooltip: 'Italic',
-			shortcut: 'Ctrl+I'
+			shortcut: 'Ctrl+I',
+			icon: material('format-italic.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Underline
 		underline: {
 			exec: 'underline',
 			tooltip: 'Underline',
-			shortcut: 'Ctrl+U'
+			shortcut: 'Ctrl+U',
+			icon: material('format-underline.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Strikethrough
 		strike: {
 			exec: 'strikethrough',
-			tooltip: 'Strikethrough'
+			tooltip: 'Strikethrough',
+			icon: material('format-strikethrough.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Subscript
 		subscript: {
 			exec: 'subscript',
-			tooltip: 'Subscript'
+			tooltip: 'Subscript',
+			icon: material('format-subscript.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Superscript
 		superscript: {
 			exec: 'superscript',
-			tooltip: 'Superscript'
+			tooltip: 'Superscript',
+			icon: material('format-superscript.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Left
 		left: {
 					return /left/.test(align) ||
 						align === (isLtr ? 'start' : 'end');
 				}
 			},
 			exec: 'justifyleft',
-			tooltip: 'Align left'
+			tooltip: 'Align left',
+			icon: material('format-align-left.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Centre
 		center: {
 			exec: 'justifycenter',
-			tooltip: 'Center'
+			tooltip: 'Center',
+			icon: material('format-align-center.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Right
 		right: {
 			state: function (editor, node) {
 					return /right/.test(align) ||
 						align === (isLtr ? 'end' : 'start');
 				}
 			},
 			exec: 'justifyright',
-			tooltip: 'Align right'
+			tooltip: 'Align right',
+			icon: material('format-align-right.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Justify
 		justify: {
 			exec: 'justifyfull',
-			tooltip: 'Justify'
+			tooltip: 'Justify',
+			icon: material('format-align-justify.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Font
 		font: {
 			exec: function (editor, caller) {
 				defaultCmds.font._dropDown(editor, caller, function (fontName) {
 					editor.execCommand('fontname', fontName);
 				});
 			},
-			tooltip: 'Font Name'
+			tooltip: 'Font Name',
+			icon: material('format-font.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Size
 		size: {
 			_dropDown: function (editor, caller, callback) {
 			exec: function (editor, caller) {
 				defaultCmds.size._dropDown(editor, caller, function (fontSize) {
 					editor.execCommand('fontsize', fontSize);
 				});
 			},
-			tooltip: 'Font Size'
+			tooltip: 'Font Size',
+			icon: material('format-size.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Colour
 		color: {
 			_dropDown: function (editor, caller, callback) {
 			exec: function (editor, caller) {
 				defaultCmds.color._dropDown(editor, caller, function (color) {
 					editor.execCommand('forecolor', color);
 				});
 			},
-			tooltip: 'Font Color'
+			tooltip: 'Font Color',
+			icon: material('palette.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Remove Format
 		removeformat: {
 			exec: 'removeformat',
-			tooltip: 'Remove Formatting'
+			tooltip: 'Remove Formatting',
+			icon: material('format-clear.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Cut
 		cut: {
 			exec: 'cut',
 			tooltip: 'Cut',
 			errorMessage: 'Your browser does not allow the cut command. ' +
-				'Please use the keyboard shortcut Ctrl/Cmd-X'
+				'Please use the keyboard shortcut Ctrl/Cmd-X',
+			icon: material('content-cut.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Copy
 		copy: {
 			exec: 'copy',
 			tooltip: 'Copy',
 			errorMessage: 'Your browser does not allow the copy command. ' +
-				'Please use the keyboard shortcut Ctrl/Cmd-C'
+				'Please use the keyboard shortcut Ctrl/Cmd-C',
+			icon: material('content-copy.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Paste
 		paste: {
 			exec: 'paste',
 			tooltip: 'Paste',
 			errorMessage: 'Your browser does not allow the paste command. ' +
-				'Please use the keyboard shortcut Ctrl/Cmd-V'
+				'Please use the keyboard shortcut Ctrl/Cmd-V',
+			icon: material('content-paste.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Paste Text
 		pastetext: {
 			exec: function (editor, caller) {
 					e.preventDefault();
 				});
 				editor.createDropDown(caller, 'pastetext', content);
 			},
-			tooltip: 'Paste Text'
+			tooltip: 'Paste Text',
+			icon: material('content-paste.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Bullet List
 		bulletlist: {
 			exec: function (editor) {
 				fixFirefoxListBug(editor);
 				editor.execCommand('insertunorderedlist');
 			},
-			tooltip: 'Bullet list'
+			tooltip: 'Bullet list',
+			icon: material('format-list-bulleted.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Ordered List
 		orderedlist: {
 			exec: function (editor) {
 				fixFirefoxListBug(editor);
 				editor.execCommand('insertorderedlist');
 			},
-			tooltip: 'Numbered list'
+			tooltip: 'Numbered list',
+			icon: material('format-list-numbered.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Indent
 		indent: {
 			state: function (editor, parent, firstBlock) {
 				// at least, for now.
 				if (closest(block, 'ul,ol,menu')) {
 					editor.execCommand('indent');
 				}
 			},
-			tooltip: 'Add indent'
+			tooltip: 'Add indent',
+			icon: material('format-indent-increase.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Outdent
 		outdent: {
 			state: function (editor, parents, firstBlock) {
 				var	block = editor.getRangeHelper().getFirstBlockParent();
 				if (closest(block, 'ul,ol,menu')) {
 					editor.execCommand('outdent');
 				}
 			},
-			tooltip: 'Remove one indent'
+			tooltip: 'Remove one indent',
+			icon: material('format-indent-decrease.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Table
 		table: {
 					}
 				});
 				editor.createDropDown(caller, 'inserttable', content);
 			},
-			tooltip: 'Insert a table'
+			tooltip: 'Insert a table',
+			icon: material('table.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Horizontal Rule
 		horizontalrule: {
 			exec: 'inserthorizontalrule',
-			tooltip: 'Insert a horizontal rule'
+			tooltip: 'Insert a horizontal rule',
+			icon: material('minus.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Code
 		code: {
 				editor.wysiwygEditorInsertHtml(
 					'<code>',
 					'<br /></code>'
 				);
 			},
-			tooltip: 'Code'
+			tooltip: 'Code',
+			icon: material('code-braces.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Image
 		image: {
 							'<img' + attrs + ' />'
 						);
 					}
 				);
 			},
-			tooltip: 'Insert an image'
+			tooltip: 'Insert an image',
+			icon: material('image.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: E-mail
 		email: {
 							editor.execCommand('createlink', 'mailto:' + email);
 						}
 					}
 				);
 			},
-			tooltip: 'Insert an email'
+			tooltip: 'Insert an email',
+			icon: material('email.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Link
 		link: {
 					} else {
 						editor.execCommand('createlink', url);
 					}
 				});
 			},
-			tooltip: 'Insert a link'
+			tooltip: 'Insert a link',
+			icon: material('link.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Unlink
 		unlink: {
 					}
 					remove(anchor);
 				}
 			},
-			tooltip: 'Unlink'
+			tooltip: 'Unlink',
+			icon: material('link-off.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Quote
 					end = '<br />' + end;
 				}
 				editor.wysiwygEditorInsertHtml(before, end);
 			},
-			tooltip: 'Insert a Quote'
+			tooltip: 'Insert a Quote',
+			icon: material('format-quote-close.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Emoticons
 		emoticon: {
 				);
 			},
 			txtExec: function (editor, caller) {
 				editor.commands.emoticon.exec(editor, caller);
 			},
-			tooltip: 'Insert an emoticon'
+			tooltip: 'Insert an emoticon',
+			icon: material('emoticon-outline.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: YouTube
 		youtube: {
 						id: id,
 						time: time
 					}));
 				});
 			},
-			tooltip: 'Insert a YouTube video'
+			tooltip: 'Insert a YouTube video',
+			icon: material('youtube.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Date
 		date: {
 				editor.insertText(defaultCmds.date._date(editor));
 			},
 			txtExec: function (editor) {
 				defaultCmds.date.exec(editor);
 			},
-			tooltip: 'Insert current date'
+			tooltip: 'Insert current date',
+			icon: material('calendar-today.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Time
 		time: {
 				editor.insertText(defaultCmds.time._time());
 			},
 			txtExec: function (editor) {
 				defaultCmds.time.exec(editor);
 			},
-			tooltip: 'Insert current time'
+			tooltip: 'Insert current time',
+			icon: material('clock-outline.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Ltr
 				}
 				var toggleValue = css(node, 'direction') === 'ltr' ? '' : 'ltr';
 				css(node, 'direction', toggleValue);
 			},
-			tooltip: 'Left-to-Right'
+			tooltip: 'Left-to-Right',
+			icon: material('format-pilcrow-arrow-right.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Rtl
 		rtl: {
 				}
 				var toggleValue = css(node, 'direction') === 'rtl' ? '' : 'rtl';
 				css(node, 'direction', toggleValue);
 			},
-			tooltip: 'Right-to-Left'
+			tooltip: 'Right-to-Left',
+			icon: material('format-pilcrow-arrow-left.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Print
 		print: {
 			exec: 'print',
-			tooltip: 'Print'
+			tooltip: 'Print',
+			icon: material('printer.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Maximize
 		maximize: {
 			},
 			txtExec: function () {
 				defaultCmds.maximize.exec(editor);
 			},
 			tooltip: 'Maximize',
-			shortcut: 'Ctrl+Shift+M'
+			shortcut: 'Ctrl+Shift+M',
+			icon: material('arrow-expand-all.png'),
 		},
 		// END_COMMAND
 		// START_COMMAND: Source
 		source: {
 			},
 			txtExec: function (editor) {
 				defaultCmds.source.exec(editor);
 			},
 			tooltip: 'View source',
-			shortcut: 'Ctrl+Shift+S'
+			shortcut: 'Ctrl+Shift+S',
+			icon: material('code-tags.png'),
 		},
 		// END_COMMAND
-		// this is here so that commands above can be removed
-		// without having to remove the , after the last one.
-		// Needed for IE.
-		ignore: {}
 	};
 	var plugins = {};
 	/**
 		 *
 		 * @type {!Object<string, string>}
 		 * @private
 		 */
 		var allEmoticons = {};
-		/**
-		 * Current icon set if any
-		 *
-		 * @type {?Object}
-		 * @private
-		 */
-		let icons = sceditor.icons;
-		if(!icons) {
-			let cssUrl = baseUrl + 'icons/famfamfam/famfamfam.css';
-			let html = '<style>@import "' + cssUrl + '";</style>';
-			document.head.insertAdjacentHTML('beforeend',html);
-			sceditor.icons = icons = {};
-		}
 		/**
 		 * Private functions
 		 * @private
 		 */
 					// The commandName must be a valid command and not excluded
 					if (!command || exclude.indexOf(commandName) > -1) {
 						return;
 					}
-					let iconName = command.icon || commandName
 					let shortcut = command.shortcut;
+					let icon = command.icon;
 					let button   = _tmpl('toolbarButton', {
 						name: commandName,
-						iconName: iconName,
+						icon: icon || '',
-						dispName: base._(command.name ||
-								command.tooltip || commandName)
 					}, true).firstChild;
-					if (icons.create) {
-						let icon = icons.create(iconName);
-						if (icon) {
-							insertBefore( icon, button.firstChild );
-							addClass(button, 'has-icon');
-						}
-					}
 					button._sceTxtMode = !!command.txtExec;
 					button._sceWysiwygMode = !!command.exec;
 					toggleClass(button, 'disabled', !command.exec);
 					onEvent2(button, 'click', function (e) {
 						if (!hasClass(button, 'disabled')) {
 				offEvent(globalDoc, endEvents, mouseUpFunc);
 				e.preventDefault();
 			};
-			if (icons.create) {
-				var icon = icons.create('grip');
-				if (icon) {
-					appendChild(grip, icon);
-					addClass(grip, 'has-icon');
-				}
-			}
 			appendChild(editorContainer, grip);
 			appendChild(editorContainer, cover);
 			hide(cover);
 			onEvent2(grip, 'touchstart mousedown', function (e) {
 			attr(sourceEditor, 'dir', dir);
 			removeClass(editorContainer, 'rtl');
 			removeClass(editorContainer, 'ltr');
 			addClass(editorContainer, dir);
-			if (icons.rtl) {
-				icons.rtl(rtl);
-			}
 		};
 		/**
 		 * Updates the toolbar to disable/enable the appropriate buttons
 		 * @private
 					state = stateFn(base, parent, firstBlock);
 				}
 				toggleClass(btn, 'disabled', isDisabled || state < 0);
 				toggleClass(btn, 'active', state > 0);
-			}
-			if (icons.update) {
-				icons.update(isSource, parent, firstBlock);
 			}
 		};
 		/**
 		 * Handles any key press in the WYSIWYG editor