hook up listener for checklist

skurik · Jan 10, 2017 · adb980d · adb980d
1 parent 51c03ba
commit adb980d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/assets/core.styl b/assets/core.styl
@@ -55,10 +55,13 @@ resets(arr)
     list-style-type: none
   ul > li::before
     content: '\25CF'
-  ul[data-checked=true] > li::before,
-  ul[data-checked=false] > li::before
-    color: #777
-    cursor: pointer
+  ul[data-checked=true],
+  ul[data-checked=false]
+    pointer-events: none
+    > li::before
+      color: #777
+      cursor: pointer
+      pointer-events: all
   ul[data-checked=true] > li::before
     content: '\2611'
   ul[data-checked=false] > li::before

diff --git a/formats/list.js b/formats/list.js
@@ -61,6 +61,19 @@ class List extends Container {
     return undefined;
   }
 
+  constructor(domNode) {
+    super(domNode)
+    domNode.addEventListener('click', (e) => {
+      let format = this.statics.formats(domNode);
+      if (e.target.parentNode !== domNode) return;
+      if (format === 'checked') {
+        this.format('list', 'unchecked');
+      } else if(format === 'unchecked') {
+        this.format('list', 'checked');
+      }
+    });
+  }
+
   format(name, value) {
     if (this.children.length > 0) {
       this.children.tail.format(name, value);

diff --git a/modules/toolbar.js b/modules/toolbar.js
@@ -225,12 +225,6 @@ Toolbar.DEFAULTS = {
       }
       this.quill.format('direction', value, Quill.sources.USER);
     },
-    link: function(value) {
-      if (value === true) {
-        value = prompt('Enter link URL:');
-      }
-      this.quill.format('link', value, Quill.sources.USER);
-    },
     indent: function(value) {
       let range = this.quill.getSelection();
       let formats = this.quill.getFormat(range);
@@ -240,6 +234,25 @@ Toolbar.DEFAULTS = {
         if (formats.direction === 'rtl') modifier *= -1;
         this.quill.format('indent', indent + modifier, Quill.sources.USER);
       }
+    },
+    link: function(value) {
+      if (value === true) {
+        value = prompt('Enter link URL:');
+      }
+      this.quill.format('link', value, Quill.sources.USER);
+    },
+    list: function(value) {
+      let range = this.quill.getSelection();
+      let formats = this.quill.getFormat(range);
+      if (value === 'check') {
+        if (formats['list'] === 'checked' || formats['list'] === 'unchecked') {
+          this.quill.format('list', false, Quill.sources.USER);
+        } else {
+          this.quill.format('list', 'unchecked', Quill.sources.USER);
+        }
+      } else {
+        this.quill.format('list', value, Quill.sources.USER);
+      }
     }
   }
 }

diff --git a/ui/icons.js b/ui/icons.js
@@ -37,7 +37,7 @@ module.exports = {
   'list': {
     'ordered' : require('../assets/icons/list-ordered.svg'),
     'bullet'  : require('../assets/icons/list-bullet.svg'),
-    'unchecked' : require('../assets/icons/list-check.svg')
+    'check'   : require('../assets/icons/list-check.svg')
   },
   'script': {
     'sub'     : require('../assets/icons/subscript.svg'),