File

src/app/form-components/slider-controller/slider-controller.component.ts

Implements

OnInit ControlValueAccessor AfterContentInit

Metadata

providers CUSTOM_TEXT_INPUT_CONTROL_VALUE_ACCESSOR
selector slider-controller
styleUrls slider-controller.component.css
templateUrl ./slider-controller.component.html

Index

Properties
Methods
Inputs
Accessors

Inputs

config

Type : any

Methods

registerOnChange
registerOnChange(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
setValue
setValue()
Returns : void
writeValue
writeValue(value: any)
Parameters :
Name Type Optional
value any No
Returns : void

Properties

contentInit
contentInit:
fillsize
fillsize: number
Type : number
Default value : 16
shell
shell: HTMLElement
Type : HTMLElement
shellView
shellView: ElementRef
Type : ElementRef
Decorators : ViewChild
slider
slider: any
Type : any
zindex
zindex: number
Type : number
Default value : 0

Accessors

thumbWidth
getthumbWidth()
thumbHeight
getthumbHeight()
thumbTop
getthumbTop()
thumbLeft
getthumbLeft()
fillWidth
getfillWidth()
fillHeight
getfillHeight()
fillTop
getfillTop()
fillLeft
getfillLeft()
trackWidth
gettrackWidth()
trackHeight
gettrackHeight()
trackTop
gettrackTop()
trackLeft
gettrackLeft()
import { Component, OnInit, Input, forwardRef, ViewChild, ElementRef, AfterContentInit } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

/** @ignore */ const noop = () => {};
/** @ignore */

export const CUSTOM_TEXT_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => SliderControllerComponent),
  multi: true
};

@Component({
  selector: 'slider-controller',
  templateUrl: './slider-controller.component.html',
  styleUrls: ['./slider-controller.component.css'],
  providers: [CUSTOM_TEXT_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class SliderControllerComponent implements OnInit, ControlValueAccessor, AfterContentInit {
  @Input()
  config: any;
  @ViewChild('sliderShell')
  shellView: ElementRef;
  shell: HTMLElement;
  slider: any;
  fillsize = 16;
  zindex = 0;
  contentInit;
  get thumbWidth(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      if (vertical) {
        return smallval;
      } else {
        return smallval / 2.5;
      }
    } else {
      return null;
    }
  }
  get thumbHeight(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      if (!vertical) {
        return smallval;
      } else {
        return smallval / 2.5;
      }
    } else {
      return null;
    }
  }
  get thumbTop(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;

      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;

      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;
      return vertical ? loc : 0;
    } else {
      return null;
    }
  }
  get thumbLeft(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;

      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;

      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;

      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;
      return vertical ? 0 : loc;
    } else {
      return null;
    }
  }

  get fillWidth(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;
      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;
      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;
      return vertical ? this.fillsize : loc + thumbsize / 2;
    } else {
      return null;
    }
  }
  get fillHeight(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;

      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;
      const fillsize = 16;
      const filloffset = smallval / 2 - fillsize / 2;
      return Math.max(0, vertical ? bigval - filloffset - fillsize - loc : fillsize);
    } else {
      return null;
    }
  }
  get fillTop(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;

      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;

      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;

      /* Fill */

      const fillsize = 16;
      const filloffset = smallval / 2 - fillsize / 2;
      return vertical ? loc + thumbsize : filloffset;
    } else {
      return null;
    }
  }
  get fillLeft(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      const filloffset = smallval / 2 - this.fillsize / 2;
      return vertical ? filloffset : 0;
    } else {
      return null;
    }
  }

  get trackWidth(): any {
    if (this.shell) {
      const val = this.slider;
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const pc = (val - this.config.min) / (this.config.max - this.config.min);
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;
      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;
      const tracksize = bigval - thumbsize;
      const loc = vertical ? (1 - pc) * tracksize : pc * tracksize;
      return vertical ? this.fillsize : loc + thumbsize / 2;
    } else {
      return null;
    }
  }
  get trackHeight(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const bigval = vertical ? shell.offsetHeight : shell.offsetWidth;
      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;
      return bigval - thumbsize * 1.25 > 0 ? bigval - thumbsize * 1.25 : null;
    } else {
      return null;
    }
  }
  get trackTop(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;

      const thumbsize = vertical ? this.thumbHeight : this.thumbWidth;

      return thumbsize / 2;
    } else {
      return null;
    }
  }
  get trackLeft(): any {
    if (this.shell) {
      const vertical = !!this.config.vertical;
      const shell = this.shell;
      const smallval = vertical ? shell.offsetWidth : shell.offsetHeight;
      const filloffset = smallval / 2 - this.fillsize / 2;
      return vertical ? filloffset : 0;
    } else {
      return null;
    }
  }

  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;

  ngOnInit() {
    this.shell = this.shellView.nativeElement;
    this.zindex = this.config.zindex || 0;
  }

  setValue() {
    this.onChangeCallback(this.slider);
    this.onTouchedCallback();
  }

  writeValue(value: any) {
    if (!(typeof value === 'undefined' || value === null)) {
      this.slider = value;
    }
  }
  registerOnChange(fn: any) {
    this.onChangeCallback = fn;
  }
  registerOnTouched(fn: any) {
    this.onTouchedCallback = fn;
  }
  ngAfterContentInit(): void {
    setTimeout(() => {
      this.contentInit = true;
    }, 0);
  }
}
<!-- 
    This file is part of Web Virtual DJ.

    Web Virtual DJ is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Web Virtual DJ is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Web Virtual DJ.  If not, see <https://www.gnu.org/licenses/>.
-->
<div class="slidershell {{config.track}}" #sliderShell [id]="config.id+'_slidershell'">
	<div *ngIf="config.fill" [ngClass]="{'sliderfill':!config.vertical,
	 'sliderfill-vertical':config.vertical}" [id]="config.id+'sliderfill'" [style.width]="fillWidth+'px'"
		[style.height]="fillHeight+'px'" [style.top]="fillTop+'px'" [style.left]="fillLeft+'px'"></div>
	<div *ngIf="config.fill && contentInit" [ngClass]="{'slidertrack':!config.vertical,
	 'slidertrack-vertical':config.vertical}" [id]="config.id+'slidertrack'" [style.width]="trackWidth+'px'"
		[style.height]="trackHeight+'px'" [style.top]="trackTop+'px'" [style.left]="trackLeft+'px'"></div>
	<div class="sliderthumb {{config.thumb}}" [id]="config.id+'sliderthumb'" [style.width]="thumbWidth+'px'"
		[style.height]="thumbHeight+'px'" [style.top]="thumbTop+'px'" [style.left]="thumbLeft+'px'"></div>
	<input [ngClass]="{'slider':!config.vertical,
	 'slidervertical':config.vertical}" [id]="config.id+'_input'" type="range" min="{{config.min}}" max="{{config.max}}"
		[(ngModel)]="slider" (ngModelChange)="setValue()" [attr.orient]="config.vertical?'vertical':null" />
</div>

result-matching ""

    No results matching ""