fix: wrong popup in markdown preview (close #210) (#211)

* feat: button enable/disable * fix: wrong popup in markdown preview
nhn · Jan 2, 2020 · 84921a0 · 84921a0
1 parent d399bc7
commit 84921a0
Show file tree

Hide file tree

Showing 7 changed files with 235 additions and 4 deletions.
diff --git a/apps/core/src/css/tui-editor.css b/apps/core/src/css/tui-editor.css
@@ -776,74 +776,145 @@ only screen and (                min-resolution: 2dppx) {
     background-position: -172px -48px;
 }
 
+.tui-toolbar-icons.tui-heading:disabled {
+    background-position: -193px -48px;
+}
+
 .tui-toolbar-icons.tui-bold {
     background-position: -4px -4px;
 }
 
+.tui-toolbar-icons.tui-bold:disabled {
+    background-position: -25px -4px;
+}
+
 .tui-toolbar-icons.tui-italic {
     background-position: -4px -48px;
 }
 
+.tui-toolbar-icons.tui-italic:disabled {
+    background-position: -25px -48px;
+}
+
 .tui-toolbar-icons.tui-color {
     background-position: -172px -70px;
 }
 
+.tui-toolbar-icons.tui-color:disabled {
+    background-position: -193px -70px;
+}
+
 .tui-toolbar-icons.tui-strike {
     background-position: -4px -26px;
 }
 
+.tui-toolbar-icons.tui-strike:disabled {
+    background-position: -25px -26px;
+}
+
 .tui-toolbar-icons.tui-hrline {
     background-position: -46px -92px;
 }
 
+.tui-toolbar-icons.tui-hrline:disabled {
+    background-position: -67px -92px;
+}
+
 .tui-toolbar-icons.tui-quote {
     background-position: -4px -114px;
 }
 
+.tui-toolbar-icons.tui-quote:disabled {
+    background-position: -25px -114px;
+}
+
 .tui-toolbar-icons.tui-ul {
     background-position: -46px -4px;;
 }
 
+.tui-toolbar-icons.tui-ul:disabled {
+    background-position: -67px -4px;;
+}
+
 .tui-toolbar-icons.tui-ol {
     background-position: -46px -26px;
 }
 
+.tui-toolbar-icons.tui-ol:disabled {
+    background-position: -67px -26px;
+}
+
 .tui-toolbar-icons.tui-task {
     background-position: -130px -48px;
 }
 
+.tui-toolbar-icons.tui-task:disabled {
+    background-position: -151px -48px;
+}
+
 .tui-toolbar-icons.tui-indent {
     background-position: -46px -48px;
 }
 
+.tui-toolbar-icons.tui-indent:disabled {
+    background-position: -67px -48px;
+}
+
 .tui-toolbar-icons.tui-outdent {
     background-position: -46px -70px;
 }
 
+.tui-toolbar-icons.tui-outdent:disabled {
+    background-position: -67px -70px;
+}
+
 .tui-toolbar-icons.tui-table {
     background-position: -88px -92px;
 }
 
+.tui-toolbar-icons.tui-table:disabled {
+    background-position: -109px -92px;
+}
+
 .tui-toolbar-icons.tui-image {
     background-position: -130px -4px;
 }
 
+.tui-toolbar-icons.tui-image:disabled {
+    background-position: -151px -4px;
+}
+
 .tui-toolbar-icons.tui-link {
     background-position: -130px -26px;
 }
 
+.tui-toolbar-icons.tui-link:disabled {
+    background-position: -151px -26px;
+}
+
 .tui-toolbar-icons.tui-code {
     background-position: -130px -92px;
 }
 
+.tui-toolbar-icons.tui-code:disabled {
+    background-position: -151px -92px;
+}
+
 .tui-toolbar-icons.tui-codeblock {
     background-position: -130px -70px;
 }
 
+.tui-toolbar-icons.tui-codeblock:disabled {
+    background-position: -151px -70px;
+}
+
 .tui-toolbar-icons.tui-more {
     background-position: -172px -92px;
 }
 
+.tui-toolbar-icons.tui-more:disabled {
+    background-position: -193px -92px;
+}
 .tui-colorpicker-svg-slider {
     border: 1px solid #ebebeb;
 }

diff --git a/apps/core/src/js/eventManager.js b/apps/core/src/js/eventManager.js
@@ -20,6 +20,8 @@ const eventList = [
   'changeModeBefore',
   'changeMode',
   'changePreviewStyle',
+  'changePreviewTabPreview',
+  'changePreviewTabWrite',
   'openPopupAddLink',
   'openPopupAddImage',
   'openPopupAddTable',
@@ -255,6 +257,8 @@ class EventManager {
       if (handler.namespace !== namespace) {
         handlersToSurvive.push(handler);
       }
+
+      return null;
     });
 
     this.events.set(type, handlersToSurvive);

diff --git a/apps/core/src/js/ui/button.js b/apps/core/src/js/ui/button.js
@@ -88,6 +88,10 @@ class Button extends ToolbarItem {
   }
 
   _onClick() {
+    if (!this.isEnabled()) {
+      return;
+    }
+
     if (this._command) {
       this.trigger('command', this._command);
     } else if (this._event) {
@@ -98,12 +102,41 @@ class Button extends ToolbarItem {
   }
 
   _onOver() {
+    if (!this.isEnabled()) {
+      return;
+    }
+
     tooltip.show(this.$el, this._tooltip);
   }
 
   _onOut() {
     tooltip.hide();
   }
+
+  /**
+   * enable button
+   * @memberof Button
+   */
+  enable() {
+    this.$el.attr('disabled', false);
+  }
+
+  /**
+   * disable button
+   * @memberof Button
+   */
+  disable() {
+    this.$el.attr('disabled', true);
+  }
+
+  /**
+   * check whether this button is enabled
+   * @returns {Boolean} - true for enabled
+   * @memberof Button
+   */
+  isEnabled() {
+    return !(this.$el.attr('disabled'));
+  }
 }
 
 export default Button;
diff --git a/apps/core/src/js/ui/defaultUI.js b/apps/core/src/js/ui/defaultUI.js
@@ -197,8 +197,11 @@ class DefaultUI {
     this._markdownTab.on('itemClick', (ev, itemText) => {
       if (itemText === i18n.get('Preview')) {
         editor.eventManager.emit('previewNeedsRefresh');
+        editor.eventManager.emit('changePreviewTabPreview');
+        editor.eventManager.emit('closeAllPopup');
       } else {
         editor.getCodeMirror().focus();
+        editor.eventManager.emit('changePreviewTabWrite');
       }
     });
   }

diff --git a/apps/core/src/js/ui/toolbar.js b/apps/core/src/js/ui/toolbar.js
@@ -66,6 +66,33 @@ class Toolbar extends UIController {
         }
       });
     });
+    eventManager.listen('changePreviewTabPreview', () => this.disableAllButton());
+    eventManager.listen('changePreviewTabWrite', () => this.enableAllButton());
+    eventManager.listen('changeMode', () => this.enableAllButton());
+  }
+
+  /**
+   * disable all toolbar button
+   * @memberof Toolbar
+   */
+  disableAllButton() {
+    this._items.forEach(item => {
+      if (item instanceof Button) {
+        item.disable();
+      }
+    });
+  }
+
+  /**
+   * enable all toolbar button
+   * @memberof Toolbar
+   */
+  enableAllButton() {
+    this._items.forEach(item => {
+      if (item instanceof Button) {
+        item.enable();
+      }
+    });
   }
 
   /**

diff --git a/apps/core/test/unit/ui/button.spec.js b/apps/core/test/unit/ui/button.spec.js
@@ -9,10 +9,6 @@ import Button from '../../../src/js/ui/button';
 describe('Button', () => {
   let button;
 
-  afterEach(() => {
-    $('body').empty();
-  });
-
   describe('creation', () => {
     it('should make button element', () => {
       button = new Button({});
@@ -76,6 +72,23 @@ describe('Button', () => {
       expect(passedEvent).toEqual('myevent');
     });
 
+    it('should not emmit clicked if disabled', () => {
+      let passedEvent;
+
+      button = new Button({
+        event: 'myevent'
+      });
+      button.disable();
+
+      button.on('event', (e, event) => {
+        passedEvent = event;
+      });
+
+      button.$el.trigger('click');
+
+      expect(passedEvent).toBeFalsy();
+    });
+
     it('should emit only command event prior to event, given event option will be ignored', () => {
       const eventHandler = jasmine.createSpy('eventHandler');
       const commandHandler = jasmine.createSpy('commandHandler');
@@ -94,4 +107,16 @@ describe('Button', () => {
       expect(eventHandler).not.toHaveBeenCalled();
     });
   });
+
+  describe('enable/disable', () => {
+    it('should remove/add disabled attr', () => {
+      button = new Button({});
+
+      button.disable();
+      expect(button.$el.attr('disabled')).toBeTruthy();
+
+      button.enable();
+      expect(button.$el.attr('disabled')).toBeFalsy();
+    });
+  });
 });
diff --git a/apps/core/test/unit/ui/toolbar.spec.js b/apps/core/test/unit/ui/toolbar.spec.js
@@ -429,6 +429,74 @@ describe('Toolbar', () => {
     });
   });
 
+  describe('enableAllButton', () => {
+    it('should call the enable of all the button in the toolbar', () => {
+      toolbar.addButton([{
+        className: 'test',
+        command: 'test',
+        text: 'test'
+      }, {
+        className: 'test2',
+        command: 'test2',
+        text: 'test2'
+      }]);
+      const buttons = toolbar.getItems();
+      spyOn(buttons[0], 'enable');
+      spyOn(buttons[1], 'enable');
+
+      toolbar.enableAllButton();
+
+      expect(buttons[0].enable).toHaveBeenCalled();
+      expect(buttons[1].enable).toHaveBeenCalled();
+    });
+
+    it('should be called onchangePreviewTabWrite', () => {
+      spyOn(toolbar, 'enableAllButton');
+
+      em.emit('changePreviewTabWrite');
+
+      expect(toolbar.enableAllButton).toHaveBeenCalled();
+    });
+
+    it('should be called onchangeMode', () => {
+      spyOn(toolbar, 'enableAllButton');
+
+      em.emit('changeMode');
+
+      expect(toolbar.enableAllButton).toHaveBeenCalled();
+    });
+  });
+
+  describe('disableAllButton', () => {
+    it('should call the disable of all the button in the toolbar', () => {
+      toolbar.addButton([{
+        className: 'test',
+        command: 'test',
+        text: 'test'
+      }, {
+        className: 'test2',
+        command: 'test2',
+        text: 'test2'
+      }]);
+      const buttons = toolbar.getItems();
+      spyOn(buttons[0], 'disable');
+      spyOn(buttons[1], 'disable');
+
+      toolbar.disableAllButton();
+
+      expect(buttons[0].disable).toHaveBeenCalled();
+      expect(buttons[1].disable).toHaveBeenCalled();
+    });
+
+    it('should be called changePreviewTabPreview', () => {
+      spyOn(toolbar, 'disableAllButton');
+
+      em.emit('changePreviewTabPreview');
+
+      expect(toolbar.disableAllButton).toHaveBeenCalled();
+    });
+  });
+
   describe('destroy', () => {
     beforeEach(() => {
       $('body').append(toolbar.$el);