2月メモ・リンク集

angular javascript html react ruby rails css メモ集 typescript

2月に調べたことのメモです。

f:id:ryotah:20180303165052p:plain f:id:ryotah:20180303165054p:plain

リサイザー

@Directive({
  selector: '[grabber]',
})
export class GrabberDirective {
  // ...
  constructor(
    private elm: ElementRef,
    @Host() @SkipSelf() private resizable: ResizableDirective
  ) { }
  // ...
}

Show More/Less コンポーネント

function getLineHeight(element: HTMLElement): number {
  let lineHeight = parseInt(
    window.getComputedStyle(element, undefined).getPropertyValue('lineHeight'),
    10
  );
  if (isNaN(lineHeight)) {
    const clone = element.cloneNode() as HTMLElement;
    clone.innerHTML = '<br>';
    element.appendChild(clone);
    lineHeight = clone.clientHeight;
    element.removeChild(clone);
  }
  return lineHeight;
}

ドラッグアンドドロップ（dnd）

実装の必要がなくなったので、参考にしようとしたリンクのみ。

Googleスプレッドシート的なスクロール

  • angular-scrollbar-like-spreadsheet - StackBlitz
    • コンテンツ（A）とスクロールエリア（B）を用意
    • A自体のスクロールバーは利用しない
    • Bの内部の要素をAの高さに合わせる
    • Bのスクロールに合わせてAを移動、A上発生したホイールイベントを利用してBを移動
// スクロール内部の高さを対象の高さに合わせる
const height = this.contentInner.nativeElement.clientHeight;
this.scrollInner.nativeElement.style.height = `${height}px`;

// スクロール時に
this.scroll.nativeElement.addEventListener('scroll', (e) => {      
  this.content.nativeElement.scrollTop = e.target.scrollTop;
});

// コンテンツエリアでマウホイールイベント発生時に
this.content.nativeElement.addEventListener('wheel', (e) => {
  const result = this.content.nativeElement.scrollTop + e.deltaY
  this.content.nativeElement.scrollTop = result;
  this.scroll.nativeElement.scrollTop = result;
});

AngularのDIに関して

Ruby, Rails関連

VS CodeでRubyを書く

.vscode/settings.json

"ruby.lint": {
  "rubocop": true,
  "ruby": {
      "unicode": true //Runs ruby -wc -Ku
  },
},

その他