fix and test toolbar active states

fix #816
slab · Jul 26, 2016 · 7da527a · 7da527a
1 parent fea4463
commit 7da527a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 7 deletions.
diff --git a/modules/toolbar.js b/modules/toolbar.js
@@ -84,7 +84,11 @@ class Toolbar extends Module {
           value = selected.value || false;
         }
       } else {
-        value = input.classList.contains('ql-active') ? false : input.value || true;
+        if (input.classList.contains('ql-active')) {
+          value = false;
+        } else {
+          value = input.value || !input.hasAttribute('value');
+        }
         e.preventDefault();
       }
       this.quill.focus();
@@ -112,7 +116,9 @@ class Toolbar extends Module {
       let [format, input] = pair;
       if (input.tagName === 'SELECT') {
         let option;
-        if (formats[format] == null) {
+        if (range == null) {
+          option = null;
+        } else if (formats[format] == null) {
           option = input.querySelector('option[selected]');
         } else if (!Array.isArray(formats[format])) {
           let value = formats[format];
@@ -127,12 +133,16 @@ class Toolbar extends Module {
         } else {
           option.selected = true;
         }
-      } if (input.value) {
-        let active = input.value === formats[format] ||
-                     (formats[format] != null && input.value === formats[format].toString());
-        input.classList.toggle('ql-active', active);
       } else {
-        input.classList.toggle('ql-active', formats[format] === true || (format === 'link' && formats[format] != null));
+        if (range == null) {
+          input.classList.remove('ql-active');
+        } else if (input.hasAttribute('value')) {
+          // both being null should match (default values)
+          // '1' should match with 1 (headers)
+          input.classList.toggle('ql-active', formats[format] == input.value || (formats[format] == null && !input.value));
+        } else {
+          input.classList.toggle('ql-active', formats[format] != null);
+        }
       }
     });
   }

diff --git a/test/unit/modules/toolbar.js b/test/unit/modules/toolbar.js
@@ -1,3 +1,4 @@
+import Quill from '../../../core/quill';
 import Toolbar, { addControls } from '../../../modules/toolbar';
 
 
@@ -95,4 +96,68 @@ describe('Toolbar', function() {
       `);
     });
   });
+
+  describe('active', function() {
+    beforeEach(function() {
+      let container = this.initialize(HTMLElement, `
+        <p>0123</p>
+        <p><strong>5678</strong></p>
+        <p><a href="http://quilljs.com/">0123</a></p>
+        <p class="ql-align-center">5678</p>
+        <p><span class="ql-size-small">01</span><span class="ql-size-large">23</span></p>
+      `);
+      this.quill = new Quill(container, {
+        modules: {
+          toolbar: [
+            ['bold', 'link'],
+            [{ 'size': ['small', false, 'large'] }],
+            [{ 'align': '' }, { 'align': 'center' }]
+          ]
+        },
+        theme: 'snow'
+      });
+    });
+
+    it('toggle button', function() {
+      let boldButton = this.container.parentNode.querySelector('button.ql-bold');
+      this.quill.setSelection(7);
+      expect(boldButton.classList.contains('ql-active')).toBe(true);
+      this.quill.setSelection(2);
+      expect(boldButton.classList.contains('ql-active')).toBe(false);
+    });
+
+    it('link', function() {
+      let linkButton = this.container.parentNode.querySelector('button.ql-link');
+      this.quill.setSelection(12);
+      expect(linkButton.classList.contains('ql-active')).toBe(true);
+      this.quill.setSelection(2);
+      expect(linkButton.classList.contains('ql-active')).toBe(false);
+    });
+
+    it('dropdown', function() {
+      let sizeSelect = this.container.parentNode.querySelector('select.ql-size');
+      this.quill.setSelection(21);
+      expect(sizeSelect.selectedIndex).toEqual(0);
+      this.quill.setSelection(23);
+      expect(sizeSelect.selectedIndex).toEqual(2);
+      this.quill.setSelection(21, 2);
+      expect(sizeSelect.selectedIndex).toBeLessThan(0);
+      this.quill.setSelection(2);
+      expect(sizeSelect.selectedIndex).toEqual(1);
+    });
+
+    it('custom button', function() {
+      let centerButton = this.container.parentNode.querySelector('button.ql-align[value="center"]');
+      let leftButton = this.container.parentNode.querySelector('button.ql-align[value]');
+      this.quill.setSelection(17);
+      expect(centerButton.classList.contains('ql-active')).toBe(true);
+      expect(leftButton.classList.contains('ql-active')).toBe(false);
+      this.quill.setSelection(2);
+      expect(centerButton.classList.contains('ql-active')).toBe(false);
+      expect(leftButton.classList.contains('ql-active')).toBe(true);
+      this.quill.blur();
+      expect(centerButton.classList.contains('ql-active')).toBe(false);
+      expect(leftButton.classList.contains('ql-active')).toBe(false);
+    });
+  });
 });