File

src/app/ngx-editor/ngx-grippie/ngx-grippie.component.ts

Metadata

selector app-ngx-grippie
styleUrls ngx-grippie.component.scss
templateUrl ./ngx-grippie.component.html

Index

Properties
HostListeners

Constructor

constructor(_editorComponent: NgxEditorComponent)

Constructor

Parameters :
Name Type Optional Description
_editorComponent NgxEditorComponent no

Editor component

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)

Properties

grabber
grabber:
Default value : false

set to true on mousedown event

height
height: number
Type : number

height of the editor

oldY
oldY: number
Type : number
Default value : 0

previous value befor resizing the editor

import { Component, 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 of the editor */
  height: number;
  /** previous value befor resizing the editor */
  oldY = 0;
  /** set to true on mousedown event */
  grabber = false;

  /**
   * Constructor
   *
   * @param _editorComponent Editor component
   */
  constructor(private _editorComponent: NgxEditorComponent) { }

  /**
   *
   * @param event Mouseevent
   *
   * Update the height of the editor when the grabber is dragged
   */
  @HostListener('document:mousemove', ['$event']) onMouseMove(event: MouseEvent) {

    if (!this.grabber) {
      return;
    }

    this._editorComponent.resizeTextArea(event.clientY - this.oldY);
    this.oldY = event.clientY;
  }

  /**
   *
   * @param event Mouseevent
   *
   * set the grabber to false on mouse up action
   */
  @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
Component
Html element with directive

results matching ""

    No results matching ""