Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: customize toolbar (ref #85) #124

Merged
merged 6 commits into from Apr 3, 2018

Conversation

@kyuwoo-choi
Copy link
Member

commented Apr 2, 2018

image

refactoring

  • remove DefaultToolbar
  • add ToolbarItemFactory

feature

  • create ToolbarItems from options
  • create default ToolbarItems from default options

example

var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        useCommandShortcut: true,
        initialValue: content,
        exts: ['scrollSync', 'uml', 'chart', 'mark', 'table', 'taskCounter'],
        toolbarItems: [
          'heading',
          'bold',
          'divider',
          'indent',
          'outdent',
          {
            type: 'button',
            options: {
              name: 'test',
              className: 'custom-button-1',
              event: 'lol',
              tooltip: 'custom button 1'
            }
          },
          {
            type: 'button',
            options: {
              $el: $('<div style="float:left;width:100px;font-size: 10px;text-align:center;line-height: 30px">custom element</div>'),
              name: 'test2',
              className: 'custom-button-2',
              command: 'CustomCommand',
              tooltip: 'custom button 2'
            }
          }
        ]
      });

no deprecated entities in the diagram

kyuwoo-choi added some commits Mar 4, 2018

@kyuwoo-choi kyuwoo-choi force-pushed the feature/customize-toolbar branch from f5eb6ce to 8c09e31 Apr 3, 2018

*/
/* eslint-disable complexity */
static create(name, options) {
let toolbarItem;

This comment has been minimized.

Copy link
@jinwoo-kim-nhn

jinwoo-kim-nhn Apr 3, 2018

static 맴버 하나뿐인 클래스인데 그냥 class로 선언하는것보다 object 리터럴로 선언하는게 직관적이지 않을까요?

This comment has been minimized.

Copy link
@kyuwoo-choi

kyuwoo-choi Apr 3, 2018

Author Member

맞아요. 필요한건 사실 함수 하나뿐이긴 한데.
이것이 팩토리 패턴으로 사용된다는 것을 명확하게 하니라 통상적인 구조 그대로 유지했어요.

@jinwoo-kim-nhn

This comment has been minimized.

Copy link

commented Apr 3, 2018

완료했습니다. 수고하셨습니다.

@shiren
Copy link
Member

left a comment

작업 깔끔하게 잘했네요~ 수고하셨습니다.

eventManager.listen('stateChange', ev => {
this._items.forEach(item => {
if (item._state) {
if (ev[item._state]) {

This comment has been minimized.

Copy link
@shiren

shiren Apr 3, 2018

Member

구조 괜찮네요..
음 조금 아이디어를 더하면 state를 키로 item을 매핑하는 객체 하나를 더 하거나 toolbar에 해당 기능을 구현해서 item을 쉽게 꺼낼 수 있게 하면 더 좋을것 같아요(getItemByState()?) 아무래도 매번 루프를 도는것 보다는 나을것 같아요. 꽤 호출되는 이벤트니까요..

This comment has been minimized.

Copy link
@kyuwoo-choi

kyuwoo-choi Apr 3, 2018

Author Member

좋습니다. 리팩토링은 하면 할수록 하고싶은게 계속 있네요. ㅋㅋ

_toolbar;

/**
* @memberof DefaultUI

This comment has been minimized.

Copy link
@seonim-ryu

seonim-ryu Apr 3, 2018

Member

요건 설명이 누락되었네요ㅎㅎ

This comment has been minimized.

Copy link
@kyuwoo-choi

kyuwoo-choi Apr 3, 2018

Author Member

😉


return $el;
}

/**
* _setButton
* @param {Button} button - button instance

This comment has been minimized.

Copy link
@seonim-ryu

seonim-ryu Apr 3, 2018

Member

if (!(button instanceof Button)) 조건문 체크를 봐서는 인스턴스가 아닌 경우도 있는 것 같네요~
{Button|object} 이렇게 명시해야될 것 같습니다.

This comment has been minimized.

Copy link
@kyuwoo-choi

kyuwoo-choi Apr 3, 2018

Author Member

ㅎㅎㅎ 정신없이 리팩토링하다가 넘어간게 몇개 어렴풋이 있는데.
역시 잡아주시는군요. 감사합니다.

@seonim-ryu
Copy link
Member

left a comment

[4/3] 리뷰 완료하였습니다~ 코드 깔끔하네요 👍

@kyuwoo-choi kyuwoo-choi merged commit cae38ea into master Apr 3, 2018

@kyuwoo-choi kyuwoo-choi added this to the 1.1.0 milestone Apr 3, 2018

@kyuwoo-choi

This comment has been minimized.

Copy link
Member Author

commented Apr 3, 2018

아 별생각없이 머지 눌러버렸네요. 리뷰 내용은 별도 커밋으로 올립니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.