Mercurial Hosting > sceditor
diff 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 |
line wrap: on
line diff
--- a/src/sceditor.js Wed Aug 17 12:00:57 2022 -0600 +++ b/src/sceditor.js Thu Aug 18 21:36:34 2022 -0600 @@ -1807,9 +1807,10 @@ '<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}" />', @@ -1939,50 +1940,59 @@ } + 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 @@ -2003,13 +2013,15 @@ } }, 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 @@ -2029,13 +2041,15 @@ } }, 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 @@ -2063,7 +2077,8 @@ editor.execCommand('fontname', fontName); }); }, - tooltip: 'Font Name' + tooltip: 'Font Name', + icon: material('format-font.png'), }, // END_COMMAND // START_COMMAND: Size @@ -2090,7 +2105,8 @@ editor.execCommand('fontsize', fontSize); }); }, - tooltip: 'Font Size' + tooltip: 'Font Size', + icon: material('format-size.png'), }, // END_COMMAND // START_COMMAND: Colour @@ -2132,13 +2148,15 @@ 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 @@ -2147,7 +2165,8 @@ 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 @@ -2155,7 +2174,8 @@ 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 @@ -2163,7 +2183,8 @@ 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 @@ -2192,7 +2213,8 @@ editor.createDropDown(caller, 'pastetext', content); }, - tooltip: 'Paste Text' + tooltip: 'Paste Text', + icon: material('content-paste.png'), }, // END_COMMAND // START_COMMAND: Bullet List @@ -2201,7 +2223,8 @@ fixFirefoxListBug(editor); editor.execCommand('insertunorderedlist'); }, - tooltip: 'Bullet list' + tooltip: 'Bullet list', + icon: material('format-list-bulleted.png'), }, // END_COMMAND // START_COMMAND: Ordered List @@ -2210,7 +2233,8 @@ fixFirefoxListBug(editor); editor.execCommand('insertorderedlist'); }, - tooltip: 'Numbered list' + tooltip: 'Numbered list', + icon: material('format-list-numbered.png'), }, // END_COMMAND // START_COMMAND: Indent @@ -2262,7 +2286,8 @@ editor.execCommand('indent'); } }, - tooltip: 'Add indent' + tooltip: 'Add indent', + icon: material('format-indent-increase.png'), }, // END_COMMAND // START_COMMAND: Outdent @@ -2276,7 +2301,8 @@ editor.execCommand('outdent'); } }, - tooltip: 'Remove one indent' + tooltip: 'Remove one indent', + icon: material('format-indent-decrease.png'), }, // END_COMMAND @@ -2315,14 +2341,16 @@ 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 @@ -2334,7 +2362,8 @@ '<br /></code>' ); }, - tooltip: 'Code' + tooltip: 'Code', + icon: material('code-braces.png'), }, // END_COMMAND @@ -2394,7 +2423,8 @@ } ); }, - tooltip: 'Insert an image' + tooltip: 'Insert an image', + icon: material('image.png'), }, // END_COMMAND @@ -2440,7 +2470,8 @@ } ); }, - tooltip: 'Insert an email' + tooltip: 'Insert an email', + icon: material('email.png'), }, // END_COMMAND @@ -2489,7 +2520,8 @@ } }); }, - tooltip: 'Insert a link' + tooltip: 'Insert a link', + icon: material('link.png'), }, // END_COMMAND @@ -2509,7 +2541,8 @@ remove(anchor); } }, - tooltip: 'Unlink' + tooltip: 'Unlink', + icon: material('link-off.png'), }, // END_COMMAND @@ -2535,7 +2568,8 @@ editor.wysiwygEditorInsertHtml(before, end); }, - tooltip: 'Insert a Quote' + tooltip: 'Insert a Quote', + icon: material('format-quote-close.png'), }, // END_COMMAND @@ -2613,7 +2647,8 @@ 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 @@ -2659,7 +2694,8 @@ })); }); }, - tooltip: 'Insert a YouTube video' + tooltip: 'Insert a YouTube video', + icon: material('youtube.png'), }, // END_COMMAND @@ -2694,7 +2730,8 @@ txtExec: function (editor) { defaultCmds.date.exec(editor); }, - tooltip: 'Insert current date' + tooltip: 'Insert current date', + icon: material('calendar-today.png'), }, // END_COMMAND @@ -2726,7 +2763,8 @@ txtExec: function (editor) { defaultCmds.time.exec(editor); }, - tooltip: 'Insert current time' + tooltip: 'Insert current time', + icon: material('clock-outline.png'), }, // END_COMMAND @@ -2756,7 +2794,8 @@ 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 @@ -2785,7 +2824,8 @@ 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 @@ -2793,7 +2833,8 @@ // START_COMMAND: Print print: { exec: 'print', - tooltip: 'Print' + tooltip: 'Print', + icon: material('printer.png'), }, // END_COMMAND @@ -2810,7 +2851,8 @@ defaultCmds.maximize.exec(editor); }, tooltip: 'Maximize', - shortcut: 'Ctrl+Shift+M' + shortcut: 'Ctrl+Shift+M', + icon: material('arrow-expand-all.png'), }, // END_COMMAND @@ -2827,14 +2869,10 @@ 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 = {}; @@ -4353,20 +4391,6 @@ 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 */ @@ -4739,23 +4763,12 @@ return; } - let iconName = command.icon || commandName let shortcut = command.shortcut; + let icon = command.icon; let button = _tmpl('toolbarButton', { name: commandName, - iconName: iconName, - dispName: base._(command.name || - command.tooltip || commandName) + icon: icon || '', }, 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); @@ -4902,14 +4915,6 @@ 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); @@ -5082,10 +5087,6 @@ removeClass(editorContainer, 'rtl'); removeClass(editorContainer, 'ltr'); addClass(editorContainer, dir); - - if (icons.rtl) { - icons.rtl(rtl); - } }; /** @@ -6394,10 +6395,6 @@ toggleClass(btn, 'disabled', isDisabled || state < 0); toggleClass(btn, 'active', state > 0); } - - if (icons.update) { - icons.update(isSource, parent, firstBlock); - } }; /**