message: Refactor popup component
diff: @@ -26,7 +26,7 @@ export class PopupViewModel {
  public onHide = () => {},
  public onShow = () => {},
  public cssClass: string = "",
  - targetElement: HTMLElement
  + private targetElement: HTMLElement
  ) {
  this.container = document.createElement("div");
  document.body.appendChild(this.container);
  @@ -34,16 +34,38 @@ export class PopupViewModel {
  ko.applyBindings(this, this.container);
  this.showSubscription = this.isVisible.subscribe((isVisible) => {
  - const rect = targetElement.getBoundingClientRect();
  - const popupContainer = <HTMLElement>(
  - this.container.children[0].children[0]
  - );
  + this.onIsVisibleChanged(isVisible);
  + });
  + }
  +
  + public get styleClass(): string {
  + var css = this.cssClass;
  + if (this.showPointer) {
  + css += " sv-popup--show-pointer";
  + css += ` sv-popup--${this.popupDirection()}`;
  + }
  +
  + return css;
  + }
  +
  + private onIsVisibleChanged(isVisible: boolean) {
  + if (isVisible) {
  + this.setupPopup();
  + this.onShow();
  + } else {
  + this.onHide();
  + }
  + }
  + private setupPopup() {
  + const rect = this.targetElement.getBoundingClientRect();
  + const popupContainer = <HTMLElement>this.container.children[0].children[0];
  this.popupDirection(
  - PopupUtils.calculatePopupDirection(verticalPosition, horizontalPosition)
  + PopupUtils.calculatePopupDirection(
  + this.verticalPosition,
  + this.horizontalPosition
  + )
  );
  -
  - if (this.isVisible) {
  do {
  var height = popupContainer.offsetHeight;
  var width = popupContainer.offsetWidth;
  @@ -51,8 +73,8 @@ export class PopupViewModel {
  rect,
  height,
  width,
  - verticalPosition,
  - horizontalPosition,
  + this.verticalPosition,
  + this.horizontalPosition,
  this.showPointer
  );
  this.left(pos.left);
  @@ -64,8 +86,8 @@ export class PopupViewModel {
  rect,
  pos.top,
  pos.left,
  - verticalPosition,
  - horizontalPosition
  + this.verticalPosition,
  + this.horizontalPosition
  )
  );
  }
  @@ -73,21 +95,6 @@ export class PopupViewModel {
  popupContainer.offsetWidth != width ||
  popupContainer.offsetHeight != height
  );
  - this.onShow();
  - } else {
  - this.onHide();
  - }
  - });
  - }
  -
  - public get styleClass(): string {
  - var css = this.cssClass;
  - if (this.showPointer) {
  - css += " sv-popup--show-pointer";
  - css += ` sv-popup--${this.popupDirection()}`;
  - }
  -
  - return css;
  }
  public clickOutside() {
  