Add Option for Label After Checkbox (#21)

* Add option for placing label after checkbox. * Added a id property to the checkbox and a for property to the label using a timestamp. * Changed id from timestamp to large random number because multiple checkboxes can end up having the same timestamp. Also, added task-list-item-label class to trailing label which makes it easier for CSS styling. * Updated documentation for the labelAfter option. * Added task-item- to the id attribute to make it unique to the project.

Author: asommer70

README.md

@@ -49,6 +49,14 @@ purposes, pass a truthy value to the `label` property of the plugin options:
 var parser = md().use(taskLists, {label: true});
 ```
 
+To add the label after the checkbox pass a truthy value to `labelAfter` property:
+
+```js
+var parser = md().use(taskLists, {label: true, labelAfter: true});
+```
+
+**Note:** This option does require the `label` option to be truthy.
+
 The options can be combined, of course.
 
 ### Browser Usage

index.js

@@ -5,11 +5,13 @@
 
 var disableCheckboxes = true;
 var useLabelWrapper = false;
+var useLabelAfter = false;
 
 module.exports = function(md, options) {
 if (options) {
 disableCheckboxes = !options.enabled;
 useLabelWrapper = !!options.label;
+useLabelAfter = !!options.labelAfter;
 }
 
 md.core.ruler.after('inline', 'github-task-lists', function(state) {
@@ -58,8 +60,17 @@ function todoify(token, TokenConstructor) {
 token.content = token.content.slice(3);
 
 if (useLabelWrapper) {
-token.children.unshift(beginLabel(TokenConstructor));
-token.children.push(endLabel(TokenConstructor));
+if (useLabelAfter) {
+token.children.pop();
+
+// Use large random number as id property of the checkbox.
+var id = 'task-item-' + Math.ceil(Math.random() * (10000 * 1000) - 1000);
+token.children[0].content = token.children[0].content.slice(0, -1) + ' id="' + id + '">';
+token.children.push(afterLabel(token.content, id, TokenConstructor));
+} else {
+token.children.unshift(beginLabel(TokenConstructor));
+token.children.push(endLabel(TokenConstructor));
+}
 }
 }
 
@@ -88,6 +99,13 @@ function endLabel(TokenConstructor) {
 return token;
 }
 
+function afterLabel(content, id, TokenConstructor) {
+var token = new TokenConstructor('html_inline', '', 0);
+token.content = '<label class="task-list-item-label" for="' + id + '">' + content + '</label>';
+token.attrs = [{for: id}];
+return token;
+}
+
 function isInline(token) { return token.type === 'inline'; }
 function isParagraph(token) { return token.type === 'paragraph_open'; }
 function isListItem(token) { return token.type === 'list_item_open'; }

test/index.js

@@ -87,6 +87,12 @@ describe('markdown-it-task-lists', function() {
  assert($$('.task-list-item > label > input[type=checkbox].task-list-item-checkbox:not([disabled])').length > 0);
  });
 
+ it('adds label after items when options.label and options.labelAfter are truthy', function() {
+ var enabledLabeledParser = md().use(taskLists, {enabled: true, label: true, labelAfter: true});
+ var $$ = cheerio.load(enabledLabeledParser.render(fixtures.ordered));
+ assert( $$('.task-list-item > input[type=checkbox].task-list-item-checkbox:not([disabled])').next().is('label'));
+ });
+
  it('does NOT render [ ], "[ ]" (no space after closing bracket), [ x], [x ], or [ x ] as checkboxes', function () {
  var html = $.dirty.html();
  assert(~html.indexOf('<li>[ ]'));