Mercurial Hosting > sceditor

changeset 15:ea930990b601

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add optional "icon" to command spec
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 07 Aug 2022 17:00:41 -0600
parents 0cb206904499
children 8bd52902156a
files src/changes.txt src/icons/famfamfam/famfamfam.css src/sceditor.js
diffstat 3 files changed, 62 insertions(+), 60 deletions(-) [+]
line wrap: on
line diff
--- a/src/changes.txt	Sun Aug 07 14:58:42 2022 -0600
+++ b/src/changes.txt	Sun Aug 07 17:00:41 2022 -0600
@@ -1,6 +1,8 @@
 changes, most recent at top
 
 
+Add optional "icon" to command spec.
+
 Formats set default format so the "format" option isn't needed.
 
 Allow selector for textarea.
--- a/src/icons/famfamfam/famfamfam.css	Sun Aug 07 14:58:42 2022 -0600
+++ b/src/icons/famfamfam/famfamfam.css	Sun Aug 07 17:00:41 2022 -0600
@@ -10,136 +10,137 @@
  */
 div.sceditor-grip,
 .sceditor-button div {
-  background-image: url("famfamfam.png");
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 16px;
+	background-image: url("famfamfam.png");
+	background-repeat: no-repeat;
+	width: 16px;
+	height: 16px;
+	background-position: 0px 16px;
 }
 .sceditor-button-youtube div {
-  background-position: 0px 0px;
+	background-position: 0px 0px;
 }
 .sceditor-button-link div {
-  background-position: 0px -16px;
+	background-position: 0px -16px;
 }
 .sceditor-button-unlink div {
-  background-position: 0px -32px;
+	background-position: 0px -32px;
 }
 .sceditor-button-underline div {
-  background-position: 0px -48px;
+	background-position: 0px -48px;
 }
 .sceditor-button-time div {
-  background-position: 0px -64px;
+	background-position: 0px -64px;
 }
 .sceditor-button-table div {
-  background-position: 0px -80px;
+	background-position: 0px -80px;
 }
 .sceditor-button-superscript div {
-  background-position: 0px -96px;
+	background-position: 0px -96px;
 }
 .sceditor-button-subscript div {
-  background-position: 0px -112px;
+	background-position: 0px -112px;
 }
 .sceditor-button-strike div {
-  background-position: 0px -128px;
+	background-position: 0px -128px;
 }
 .sceditor-button-source div {
-  background-position: 0px -144px;
+	background-position: 0px -144px;
 }
 .sceditor-button-size div {
-  background-position: 0px -160px;
+	background-position: 0px -160px;
 }
 .sceditor-button-rtl div {
-  background-position: 0px -176px;
+	background-position: 0px -176px;
 }
 .sceditor-button-right div {
-  background-position: 0px -192px;
+	background-position: 0px -192px;
 }
 .sceditor-button-removeformat div {
-  background-position: 0px -208px;
+	background-position: 0px -208px;
 }
 .sceditor-button-quote div {
-  background-position: 0px -224px;
+	background-position: 0px -224px;
 }
 .sceditor-button-print div {
-  background-position: 0px -240px;
+	background-position: 0px -240px;
 }
 .sceditor-button-pastetext div {
-  background-position: 0px -256px;
+	background-position: 0px -256px;
 }
 .sceditor-button-paste div {
-  background-position: 0px -272px;
+	background-position: 0px -272px;
 }
 .sceditor-button-outdent div {
-  background-position: 0px -288px;
+	background-position: 0px -288px;
 }
 .sceditor-button-orderedlist div {
-  background-position: 0px -304px;
+	background-position: 0px -304px;
 }
 .sceditor-button-maximize div {
-  background-position: 0px -320px;
+	background-position: 0px -320px;
 }
 .sceditor-button-ltr div {
-  background-position: 0px -336px;
+	background-position: 0px -336px;
 }
 .sceditor-button-left div {
-  background-position: 0px -352px;
+	background-position: 0px -352px;
 }
 .sceditor-button-justify div {
-  background-position: 0px -368px;
+	background-position: 0px -368px;
 }
 .sceditor-button-italic div {
-  background-position: 0px -384px;
+	background-position: 0px -384px;
 }
 .sceditor-button-indent div {
-  background-position: 0px -400px;
+	background-position: 0px -400px;
 }
 .sceditor-button-image div {
-  background-position: 0px -416px;
+	background-position: 0px -416px;
 }
 .sceditor-button-horizontalrule div {
-  background-position: 0px -432px;
+	background-position: 0px -432px;
 }
 .sceditor-button-format div {
-  background-position: 0px -448px;
+	background-position: 0px -448px;
 }
 .sceditor-button-font div {
-  background-position: 0px -464px;
+	background-position: 0px -464px;
 }
 .sceditor-button-emoticon div {
-  background-position: 0px -480px;
+	background-position: 0px -480px;
 }
 .sceditor-button-email div {
-  background-position: 0px -496px;
+	background-position: 0px -496px;
 }
 .sceditor-button-date div {
-  background-position: 0px -512px;
+	background-position: 0px -512px;
 }
 .sceditor-button-cut div {
-  background-position: 0px -528px;
+	background-position: 0px -528px;
 }
 .sceditor-button-copy div {
-  background-position: 0px -544px;
+	background-position: 0px -544px;
 }
 .sceditor-button-color div {
-  background-position: 0px -560px;
+	background-position: 0px -560px;
 }
 .sceditor-button-code div {
-  background-position: 0px -576px;
+	background-position: 0px -576px;
 }
 .sceditor-button-center div {
-  background-position: 0px -592px;
+	background-position: 0px -592px;
 }
 .sceditor-button-bulletlist div {
-  background-position: 0px -608px;
+	background-position: 0px -608px;
 }
 .sceditor-button-bold div {
-  background-position: 0px -624px;
+	background-position: 0px -624px;
 }
 div.sceditor-grip {
-  background-position: 0px -640px;
-  width: 10px;
-  height: 10px;
+	background-position: 0px -640px;
+	width: 10px;
+	height: 10px;
 }
 .rtl div.sceditor-grip {
-  background-position: 0px -650px;
+	background-position: 0px -650px;
 }
--- a/src/sceditor.js	Sun Aug 07 14:58:42 2022 -0600
+++ b/src/sceditor.js	Sun Aug 07 17:00:41 2022 -0600
@@ -1800,7 +1800,7 @@
 				'<body contenteditable="true" {spellcheck}><p></p></body>' +
 			'</html>',
 
-		toolbarButton: '<a class="sceditor-button sceditor-button-{name}" ' +
+		toolbarButton: '<a class="sceditor-button sceditor-button-{iconName}" ' +
 			'data-sceditor-command="{name}" unselectable="on">' +
 			'<div unselectable="on">{dispName}</div></a>',
 
@@ -6150,26 +6150,26 @@
 				});
 
 				each(menuItems.split(','), function (_, commandName) {
-					var	button, shortcut,
-						command  = commands[commandName];
+					let	command  = commands[commandName];
 
 					// The commandName must be a valid command and not excluded
 					if (!command || exclude.indexOf(commandName) > -1) {
 						return;
 					}
 
-					shortcut = command.shortcut;
-					button   = _tmpl('toolbarButton', {
+					let iconName = command.icon || commandName
+					let shortcut = command.shortcut;
+					let button   = _tmpl('toolbarButton', {
+						iconName: iconName,
 						name: commandName,
 						dispName: base._(command.name ||
 								command.tooltip || commandName)
 					}, true).firstChild;
 
 					if (icons.create) {
-						var icon = icons.create(commandName);
+						let icon = icons.create(iconName);
 						if (icon) {
-							insertBefore(icons.create(commandName),
-								button.firstChild);
+							insertBefore( icon, button.firstChild );
 							addClass(button, 'has-icon');
 						}
 					}
@@ -7857,13 +7857,12 @@
 		 */
 		updateActiveButtons = function () {
 			var firstBlock, parent;
-			var activeClass = 'active';
 			var doc         = wysiwygDocument;
 			var isSource    = base.sourceMode();
 
 			if (base.readOnly()) {
-				each(find(toolbar, activeClass), function (_, menuItem) {
-					removeClass(menuItem, activeClass);
+				each(find(toolbar, 'active'), function (_, menuItem) {
+					removeClass(menuItem, 'active');
 				});
 				return;
 			}
@@ -7896,7 +7895,7 @@
 				}
 
 				toggleClass(btn, 'disabled', isDisabled || state < 0);
-				toggleClass(btn, activeClass, state > 0);
+				toggleClass(btn, 'active', state > 0);
 			}
 
 			if (icons.update) {