2月メモ・リンク集
2月に調べたことのメモです。
- リサイザー
- Show More/Less コンポーネント
- ドラッグアンドドロップ(dnd)
- Googleスプレッドシート的なスクロール
- AngularのDIに関して
- Ruby, Rails関連
- その他
リサイザー
- angular-resizer - StackBlitz
- angular-resizer-directive - StackBlitz
ResizableComponent
をResizableDirective
とGrabberDirective
にわけた- window.getComputedStyle - Web API インターフェイス | MDN
@Directive({ selector: '[grabber]', }) export class GrabberDirective { // ... constructor( private elm: ElementRef, @Host() @SkipSelf() private resizable: ResizableDirective ) { } // ... }
- MouseEvent - Web API インターフェイス | MDN
- MouseEvent.offsetX (Y), MouseEvent.clientX (Y), MouseEvent.pageX (Y), MouseEvent.screenX (Y)
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)
実装の必要がなくなったので、参考にしようとしたリンクのみ。
- ネイティブ HTML5 ドラッグ&ドロップ - HTML5 Rocks
- Simple Drag and Drop with Angular 2
- react-dnd/react-dnd: Drag and Drop for React
- GitHub - akserg/ng2-dnd: Angular 2 Drag-and-Drop without dependencies
- GitHub - STRML/react-grid-layout: A draggable and resizable grid layout with responsive breakpoints, for React.
- Top 5 Angular 2 Drag and Drop Demos | AngularJS 4U
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を書く
- Ruby - Visual Studio Marketplace
- lint用に利用している
"ruby.lint": { "rubocop": true, "ruby": { "unicode": true //Runs ruby -wc -Ku }, },
その他
- Style Binding & NgStyle in Angular 2 ← Alligator.io
<p [style.font-size.em]="'3'">
という記述方法
- パフォーマンス
- ハイパフォーマンス・アニメーション - HTML5 Rocks
- ハイパフォーマンスCSS3アニメーション——60fpsを実現するベストプラクティス - WPJ
- スタイル -> レイアウト -> ペイント -> コンポジット
will-change