Expose button default config (replace MediumEditor.statics.ButtonsData)

spec/buttons.spec.js

@@ -1,6 +1,6 @@
 /*global MediumEditor, describe, it, expect, spyOn, AnchorForm,
          afterEach, beforeEach, jasmine, fireEvent, setupTestHelpers,
-         selectElementContentsAndFire, isOldIE, isIE, ButtonsData */
+         selectElementContentsAndFire, isOldIE, isIE */
 
 describe('Buttons TestCase', function () {
     'use strict';
@@ -64,12 +64,24 @@ describe('Buttons TestCase', function () {
         });
     });
 
+    describe('Button default config', function () {
+        it('should be accesible via defaults property of the button prototype', function () {
+            expect(MediumEditor.extensions.button.prototype.defaults['bold']).toBeTruthy();
+            expect(MediumEditor.extensions.button.prototype.defaults['anchor']).toBeFalsy();
+        });
+
+        it('should be check-able via static Button.isBuiltInButton() method', function () {
+            expect(MediumEditor.extensions.button.isBuiltInButton('bold')).toBe(true);
+            expect(MediumEditor.extensions.button.isBuiltInButton('anchor')).toBe(false);
+        });
+    });
+
     describe('Buttons with various labels', function () {
         var defaultLabels = {},
             fontAwesomeLabels = {},
             customLabels = {},
             allButtons = [],
-            buttonsData = ButtonsData,
+            buttonsData = MediumEditor.extensions.button.prototype.defaults,
             currButton,
             tempEl;
 

src/js/core.js

@@ -1,4 +1,4 @@
-/*global Util, ButtonsData, Selection, Extension,
+/*global Util, Selection, Extension,
     extensionDefaults, Events, editorDefaults*/
 
 function MediumEditor(elements, options) {
@@ -635,8 +635,8 @@ function MediumEditor(elements, options) {
                 default:
                     // All of the built-in buttons for MediumEditor are extensions
                     // so check to see if the extension we're creating is a built-in button
-                    if (ButtonsData.hasOwnProperty(name)) {
-                        extension = new MediumEditor.extensions.button(ButtonsData[name]);
+                    if (MediumEditor.extensions.button.isBuiltInButton(name)) {
+                        extension = new MediumEditor.extensions.button(name);
                     }
                     break;
             }

src/js/defaults/buttons.js

@@ -1,8 +1,8 @@
-var ButtonsData;
+var buttonDefaults;
 (function () {
     'use strict';
 
-    ButtonsData = {
+    buttonDefaults = {
         'bold': {
             name: 'bold',
             action: 'bold',

src/js/extensions/button.js

@@ -2,10 +2,95 @@ var Button;
 (function () {
     'use strict';
 
-    /*global Extension */
+    /*global Extension, buttonDefaults */
 
     Button = Extension.extend({
 
+        /* Button Options */
+
+        /* action: [string]
+         * The action argument to pass to MediumEditor.execAction()
+         * when the button is clicked
+         */
+        action: undefined,
+
+        /* aria: [string]
+         * The value to add as the aria-label attribute of the button
+         * element displayed in the toolbar.
+         * This is also used as the tooltip for the button
+         */
+        aria: undefined,
+
+        /* tagNames: [Array]
+         * NOTE: This is not used if useQueryState is set to true.
+         *
+         * Array of element tag names that would indicate that this
+         * button has already been applied. If this action has already
+         * been applied, the button will be displayed as 'active' in the toolbar
+         *
+         * Example:
+         * For 'bold', if the text is ever within a <b> or <strong>
+         * tag that indicates the text is already bold. So the array
+         * of tagNames for bold would be: ['b', 'strong']
+         */
+        tagNames: undefined,
+
+        /* style: [Object]
+         * NOTE: This is not used if useQueryState is set to true.
+         *
+         * A pair of css property & value(s) that indicate that this
+         * button has already been applied. If this action has already
+         * been applied, the button will be displayed as 'active' in the toolbar
+         * Properties of the object:
+         *   prop [String]: name of the css property
+         *   value [String]: value(s) of the css property
+         *                   multiple values can be separated by a '|'
+         *
+         * Example:
+         * For 'bold', if the text is ever within an element with a 'font-weight'
+         * style property set to '700' or 'bold', that indicates the text
+         * is already bold.  So the style object for bold would be:
+         * { prop: 'font-weight', value: '700|bold' }
+         */
+        style: undefined,
+
+        /* useQueryState: [boolean]
+         * Enables/disables whether this button should use the built-in
+         * document.queryCommandState() method to determine whether
+         * the action has already been applied.  If the action has already
+         * been applied, the button will be displayed as 'active' in the toolbar
+         *
+         * Example:
+         * For 'bold', if this is set to true, the code will call:
+         * document.queryCommandState('bold') which will return true if the
+         * browser thinks the text is already bold, and false otherwise
+         */
+        useQueryState: undefined,
+
+        /* contentDefault: [string]
+         * Default innerHTML to put inside the button
+         */
+        contentDefault: undefined,
+
+        /* contentFA: [string]
+         * The innerHTML to use for the content of the button
+         * if the `buttonLabels` option for MediumEditor is set to 'fontawesome'
+         */
+        contentFA: undefined,
+
+        /* buttonDefaults: [Object]
+         * Set of default config options for all of the built-in MediumEditor buttons
+         */
+        defaults: buttonDefaults,
+
+        constructor: function (options) {
+            if (Button.isBuiltInButton(options)) {
+                Extension.call(this, this.defaults[options]);
+            } else {
+                Extension.call(this, options);
+            }
+        },
+
         init: function () {
             Extension.prototype.init.apply(this, arguments);
 
@@ -125,4 +210,8 @@ var Button;
             return isMatch;
         }
     });
+
+    Button.isBuiltInButton = function (name) {
+        return (typeof name === 'string') && Button.prototype.defaults.hasOwnProperty(name);
+    };
 }());