File
Metadata
selector |
app-ngx-grippie |
styleUrls |
ngx-grippie.component.scss |
templateUrl |
./ngx-grippie.component.html |
HostListeners
document:mousemove
|
Arguments : '$event'
|
document:mousemove(event: MouseEvent)
|
|
document:mouseup
|
Arguments : '$event'
|
document:mouseup(event: MouseEvent)
|
|
mousedown
|
Arguments : '$event'
|
mousedown(event: MouseEvent, resizer?: Function)
|
|
grabber
|
grabber:
|
Default value : false
|
|
oldY
|
oldY:
|
Default value : 0
|
|
import { Component, OnInit, HostListener } from '@angular/core';
import { NgxEditorComponent } from '../ngx-editor.component';
@Component({
selector: 'app-ngx-grippie',
templateUrl: './ngx-grippie.component.html',
styleUrls: ['./ngx-grippie.component.scss']
})
export class NgxGrippieComponent {
height: number;
oldY = 0;
grabber = false;
/**
*
* @param _editorComponent editor component
*/
constructor(private _editorComponent: NgxEditorComponent) { }
@HostListener('document:mousemove', ['$event']) onMouseMove(event: MouseEvent) {
if (!this.grabber) {
return;
}
this._editorComponent.resizeTextArea(event.clientY - this.oldY);
this.oldY = event.clientY;
}
@HostListener('document:mouseup', ['$event']) onMouseUp(event: MouseEvent) {
this.grabber = false;
}
@HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) {
this.grabber = true;
this.oldY = event.clientY;
event.preventDefault();
}
}
<div class="ngx-editor-grippie">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="651.6 235 26 5"
width="26" height="5">
<g id="sprites">
<path d=" M 651.6 235 L 653.6 235 L 653.6 237 L 651.6 237 M 654.6 238 L 656.6 238 L 656.6 240 L 654.6 240 M 660.6 238 L 662.6 238 L 662.6 240 L 660.6 240 M 666.6 238 L 668.6 238 L 668.6 240 L 666.6 240 M 672.6 238 L 674.6 238 L 674.6 240 L 672.6 240 M 657.6 235 L 659.6 235 L 659.6 237 L 657.6 237 M 663.6 235 L 665.6 235 L 665.6 237 L 663.6 237 M 669.6 235 L 671.6 235 L 671.6 237 L 669.6 237 M 675.6 235 L 677.6 235 L 677.6 237 L 675.6 237"
fill="rgb(147,153,159)" />
</g>
</svg>
</div>
Legend
Html element with directive