Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(temperatureDragger): allow several draggers on a single page

Browse source
This commit is contained in:
Vladimir Lugovsky 2017-07-13 14:40:18 +03:00
parent 5d8769205c
commit edb098705f
3 changed files with 19 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -3,22 +3,22 @@
[attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
<defs>
<filter id="blurFilter" x="0" y="0" width="100%" height="100%">
<filter [attr.id]="'blurFilter' + svgControlId" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="1 1"/>
</feComponentTransfer>
</filter>
<clipPath id="sliderClip">
<clipPath [attr.id]="'sliderClip' + svgControlId">
<path [attr.d]="styles.clipPathStr" stroke="black"></path>
</clipPath>
</defs>
<g [attr.transform]="styles.arcTranslateStr">
<g class="toClip" clip-path="url(#sliderClip)">
<g class="toFilter" filter="url(#blurFilter)">
<g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
<g class="toFilter" [attr.filter]="'url(#blurFilter' + svgControlId +')'">
<path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
</g>
<!-- ngFor is a quirk fix for webkit rendering issues -->

5
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -53,6 +53,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
off: boolean = false;
oldValue: number;
svgControlId = new Date().getTime();
scaleFactor: number = 1;
bottomAngleRad = 0;
radius: number = 100;
@ -130,14 +131,14 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
const halfAngle = this.bottomAngleRad / 2;
const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect();
const svgAreaFactor = svgBoundingRect.width / svgBoundingRect.height;
const svgAreaFactor = svgBoundingRect.height && svgBoundingRect.width / svgBoundingRect.height || 1;
const svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius);
const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
: 0;
this.scaleFactor = svgBoundingRect.width / VIEW_BOX_SIZE;
this.scaleFactor = svgBoundingRect.width / VIEW_BOX_SIZE || 1;
this.styles.viewBox = `0 0 ${VIEW_BOX_SIZE} ${svgHeight}`;

24
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -40,19 +40,19 @@
<span>Humidity placeholder</span>
<!--<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"-->
<!--[arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"-->
<!--[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">-->
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"
[arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
<!--<div class="temperature" [ngClass]="{ 'off': humidityOff }">-->
<!--<div class="value">-->
<!--{{ humidityOff ? '&#45;&#45;' : (humidity | ngxRound) }}-->
<!--</div>-->
<!--<div class="desc">-->
<!--Celsius-->
<!--</div>-->
<!--</div>-->
<!--</ngx-temperature-dragger>-->
<div class="temperature" [ngClass]="{ 'off': humidityOff }">
<div class="value">
{{ humidityOff ? '--' : (humidity | ngxRound) }}
</div>
<div class="desc">
Celsius
</div>
</div>
</ngx-temperature-dragger>
</nga-tab>
</nga-tabset>
</nga-card>