Merge pull request #3 from jywarren/additional-buttons

Additional buttons

Author: jywarren

README.md

@@ -46,7 +46,8 @@ inlineMarkdownEditor({
   defaultMarkdown: function(markdown) {}, // a markdown parser
   buildSectionForm: function() {}, // return a string containing the form element
   onComplete: function(response, markdown, html, el, uniqueId, form, o) {}, // run on completing AJAX post
-  isEditable: function(markdown) {} // returns boolean; whether a given subsection should get an inline form; default skips HTML and horizontal rules
+  isEditable: function(markdown) {}, // returns boolean; whether a given subsection should get an inline form; default skips HTML and horizontal rules
+  extraButtons: { 'fa-icon-name': function(element) {} } // object with keys of icon names for additional buttons with associated actions for each; returns jQuery element upon construction
 
 });
 ```
@@ -68,6 +69,7 @@ Tests are set up with Jasmine, and can be run with `npm test`.
 ## Goals
 
 * configurable editors
+  * plan for swappable editors; will need to specify both constructor and onEditorSubmit in processSection
 * better modularization of processSection.js
 * more tests
 

dist/inlineMarkdownEditor.js

@@ -10239,27 +10239,43 @@ inlineMarkdownEditor = function inlineMarkdownEditor(o) {
   o.originalMarkdown = el.html();
   // split by double-newline:
   var sections = o.originalMarkdown.split('\n\n');
+  var editableSections = [];
+  // we also do this inside processSection, but independently track here:
+  sections.forEach(function forEachSection(section, index) {
+    if (o.isEditable(section, o.originalMarkdown)) editableSections.push(section);
+  });
   el.html('');
+  // we might start running processSections only on editableSections...
   o.processSections(sections, o);
   el.show();
   return {
     element: el,
     sections: sections,
+    editableSections: editableSections,
     options: o
   };
 }
 module.exports = inlineMarkdownEditor;
 
 },{"./buildSectionForm.js":94,"./defaultMarkdown.js":95,"./insertEditLink.js":97,"./isEditable.js":98,"./onComplete.js":99,"./onFail.js":100,"./processSections.js":102}],97:[function(require,module,exports){
-module.exports = function insertEditLink(uniqueId, el, form, onEdit, editor) {
+module.exports = function insertEditLink(uniqueId, el, form, onEdit, editor, o) {
   var editBtns = "";
   editBtns += "<span class='inline-edit-btns inline-edit-btns-" + uniqueId + "'>";
-  editBtns +=   "<a class='inline-edit-btn inline-edit-link inline-edit-link-" + uniqueId + "'><i class='fa fa-pencil'></i></a>";
-  // editBtns +=   "<a class='inline-edit-btn inline-edit-image inline-edit-image-" + uniqueId + "'><i class='fa fa-image'></i></a>";
-  editBtns +=   "<i>Edit</i>";
+  editBtns +=   "<a class='inline-edit-btn inline-edit-btn-editor-" + uniqueId + " inline-edit-btn-" + uniqueId + "'><i class='fa fa-pencil'></i></a>";
+  if (o.extraButtons) {
+    Object.keys(o.extraButtons).forEach(function(key, index) {
+      editBtns +=   "<a class='inline-edit-btn inline-edit-btn-" + key + " inline-edit-btn-" + uniqueId + " inline-edit-btn-" + uniqueId + "-" + key + "'><i class='fa " + key + "'></i></a>";
+    });
+  }
   editBtns += "</span>";
   el.append(editBtns);
-  $('.inline-edit-link-' + uniqueId).click(function inlineEditLinkClick(e) {
+  if (o.extraButtons) {
+    Object.keys(o.extraButtons).forEach(function(key, index) {
+    // run respective functions and pass in the elements
+    o.extraButtons[key]($('.inline-edit-btn-' + uniqueId + '-' + key), uniqueId);
+    });
+  }
+  $('.inline-edit-btn-editor-' + uniqueId).click(function inlineEditLinkClick(e) {
     e.preventDefault();
     form.toggle();
     if (onEdit) onEdit(); // callback
@@ -10290,7 +10306,7 @@ module.exports = function onComplete(response, markdown, html, el, uniqueId, for
     // replace the section but reset our html and markdown
     html = o.defaultMarkdown(markdown);
     el.html(html);
-    o.insertEditLink(uniqueId, el, form);
+    o.insertEditLink(uniqueId, el, form, false, false, o);
     if (o.postProcessor) o.postProcessor(el); // add #hashtag and @callout links, extra CSS and deep links
   } else {
     message.html('<b style="color:#a33">There was an error</b> -- the wiki page may have changed while you were editing; save your content in the clipboard and try refreshing the page.');
@@ -10327,7 +10343,8 @@ module.exports = function processSection(markdown, o) {
       var formHtml = o.buildSectionForm(uniqueId, _markdown);
       el.after(formHtml);
       var form = $('#' + uniqueId);
-      o.insertEditLink(uniqueId, el, form, onEdit);
+      o.insertEditLink(uniqueId, el, form, onEdit, false, o);
+      // plan for swappable editors; will need to specify both constructor and onEditorSubmit
       function onEdit() {
         if (o.wysiwyg && $('#' + uniqueId).find('.wk-container').length === 0) {
           // insert rich editor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-markdown-editor",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "An inline wysiwyg markdown document editor based on replacing string subsections. WYSIWYG possible via woofmark.",
   "main": "dist/inlineMarkdownEditor.js",
   "scripts": {

spec/javascripts/customizations_spec.js

@@ -0,0 +1,27 @@
+describe("Customization functions", function() {
+
+  var editor;
+
+  it("adds new buttons and runs their setup functions", function() {
+    var fixture = loadFixtures('index.html');
+    var buttonSetupRunCount = 0;
+    editor = inlineMarkdownEditor({
+      replaceUrl: '/wiki/replace/',
+      selector: '.markdown',
+      extraButtons: {
+        // here we specify a button icon and a function to be run on it
+        'fa-book': function exampleBookFunction(element, uniqueId) {
+          expect(element).not.toBeUndefined();
+          expect(element.length).toBe(1);
+          expect($('.inline-edit-btn-' + uniqueId).length).toBe(2); // two because there are two buttons per section
+          expect($('.inline-edit-btn-' + uniqueId + '-fa-book').length).toBe(1);
+          buttonSetupRunCount += 1;
+        }
+      }
+    });
+    expect(buttonSetupRunCount).toBe(editor.editableSections.length);
+    expect($('.inline-edit-btns a i.fa-book').length).toBe(editor.editableSections.length);
+    expect($('.inline-edit-btn-fa-book').length).toBe(editor.editableSections.length);
+  });
+
+});

spec/javascripts/editor_spec.js

@@ -35,6 +35,7 @@ describe("Editor", function() {
     expect(editor.sections.length).toBe(6);
     expect($('.inline-section').length).toBe(6);
     expect(editor.sections[0]).toBe('');
+    expect(editor.editableSections.length).toBe(3);
     expect($('.inline-edit-form').length).toBe(3);
     expect($('.inline-edit-form textarea').length).toBe(3);
   });

src/inlineMarkdownEditor.js

@@ -10,12 +10,19 @@ inlineMarkdownEditor = function inlineMarkdownEditor(o) {
   o.originalMarkdown = el.html();
   // split by double-newline:
   var sections = o.originalMarkdown.split('\n\n');
+  var editableSections = [];
+  // we also do this inside processSection, but independently track here:
+  sections.forEach(function forEachSection(section, index) {
+    if (o.isEditable(section, o.originalMarkdown)) editableSections.push(section);
+  });
   el.html('');
+  // we might start running processSections only on editableSections...
   o.processSections(sections, o);
   el.show();
   return {
     element: el,
     sections: sections,
+    editableSections: editableSections,
     options: o
   };
 }

src/insertEditLink.js

@@ -1,12 +1,21 @@
-module.exports = function insertEditLink(uniqueId, el, form, onEdit, editor) {
+module.exports = function insertEditLink(uniqueId, el, form, onEdit, editor, o) {
   var editBtns = "";
   editBtns += "<span class='inline-edit-btns inline-edit-btns-" + uniqueId + "'>";
-  editBtns +=   "<a class='inline-edit-btn inline-edit-link inline-edit-link-" + uniqueId + "'><i class='fa fa-pencil'></i></a>";
-  // editBtns +=   "<a class='inline-edit-btn inline-edit-image inline-edit-image-" + uniqueId + "'><i class='fa fa-image'></i></a>";
-  editBtns +=   "<i>Edit</i>";
+  editBtns +=   "<a class='inline-edit-btn inline-edit-btn-editor-" + uniqueId + " inline-edit-btn-" + uniqueId + "'><i class='fa fa-pencil'></i></a>";
+  if (o.extraButtons) {
+    Object.keys(o.extraButtons).forEach(function(key, index) {
+      editBtns +=   "<a class='inline-edit-btn inline-edit-btn-" + key + " inline-edit-btn-" + uniqueId + " inline-edit-btn-" + uniqueId + "-" + key + "'><i class='fa " + key + "'></i></a>";
+    });
+  }
   editBtns += "</span>";
   el.append(editBtns);
-  $('.inline-edit-link-' + uniqueId).click(function inlineEditLinkClick(e) {
+  if (o.extraButtons) {
+    Object.keys(o.extraButtons).forEach(function(key, index) {
+    // run respective functions and pass in the elements
+    o.extraButtons[key]($('.inline-edit-btn-' + uniqueId + '-' + key), uniqueId);
+    });
+  }
+  $('.inline-edit-btn-editor-' + uniqueId).click(function inlineEditLinkClick(e) {
     e.preventDefault();
     form.toggle();
     if (onEdit) onEdit(); // callback

src/onComplete.js

@@ -8,7 +8,7 @@ module.exports = function onComplete(response, markdown, html, el, uniqueId, for
     // replace the section but reset our html and markdown
     html = o.defaultMarkdown(markdown);
     el.html(html);
-    o.insertEditLink(uniqueId, el, form);
+    o.insertEditLink(uniqueId, el, form, false, false, o);
     if (o.postProcessor) o.postProcessor(el); // add #hashtag and @callout links, extra CSS and deep links
   } else {
     message.html('<b style="color:#a33">There was an error</b> -- the wiki page may have changed while you were editing; save your content in the clipboard and try refreshing the page.');

src/processSection.js

@@ -21,7 +21,8 @@ module.exports = function processSection(markdown, o) {
       var formHtml = o.buildSectionForm(uniqueId, _markdown);
       el.after(formHtml);
       var form = $('#' + uniqueId);
-      o.insertEditLink(uniqueId, el, form, onEdit);
+      o.insertEditLink(uniqueId, el, form, onEdit, false, o);
+      // plan for swappable editors; will need to specify both constructor and onEditorSubmit
       function onEdit() {
         if (o.wysiwyg && $('#' + uniqueId).find('.wk-container').length === 0) {
           // insert rich editor