Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +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)"> [attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
<defs> <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" /> <feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
<feComponentTransfer> <feComponentTransfer>
<feFuncA type="discrete" tableValues="1 1"/> <feFuncA type="discrete" tableValues="1 1"/>
</feComponentTransfer> </feComponentTransfer>
</filter> </filter>
<clipPath id="sliderClip"> <clipPath [attr.id]="'sliderClip' + svgControlId">
<path [attr.d]="styles.clipPathStr" stroke="black"></path> <path [attr.d]="styles.clipPathStr" stroke="black"></path>
</clipPath> </clipPath>
</defs> </defs>
<g [attr.transform]="styles.arcTranslateStr"> <g [attr.transform]="styles.arcTranslateStr">
<g class="toClip" clip-path="url(#sliderClip)"> <g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
<g class="toFilter" filter="url(#blurFilter)"> <g class="toFilter" [attr.filter]="'url(#blurFilter' + svgControlId +')'">
<path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path> <path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
</g> </g>
<!-- ngFor is a quirk fix for webkit rendering issues --> <!-- 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; off: boolean = false;
oldValue: number; oldValue: number;
svgControlId = new Date().getTime();
scaleFactor: number = 1; scaleFactor: number = 1;
bottomAngleRad = 0; bottomAngleRad = 0;
radius: number = 100; radius: number = 100;
@ -130,14 +131,14 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
const halfAngle = this.bottomAngleRad / 2; const halfAngle = this.bottomAngleRad / 2;
const svgBoundingRect = this.svgRoot.nativeElement.getBoundingClientRect(); 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 svgHeight = VIEW_BOX_SIZE / svgAreaFactor;
const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius); const thumbMaxRadius = Math.max(this.thumbRadius, this.thumbDashRadius);
const thumbMargin = 2 * thumbMaxRadius > this.arcThickness const thumbMargin = 2 * thumbMaxRadius > this.arcThickness
? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor ? (thumbMaxRadius - this.arcThickness / 2) / this.scaleFactor
: 0; : 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}`; 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> <span>Humidity placeholder</span>
<!--<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"--> <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"
<!--[arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"--> [arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
<!--[fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">--> [fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
<!--<div class="temperature" [ngClass]="{ 'off': humidityOff }">--> <div class="temperature" [ngClass]="{ 'off': humidityOff }">
<!--<div class="value">--> <div class="value">
<!--{{ humidityOff ? '&#45;&#45;' : (humidity | ngxRound) }}--> {{ humidityOff ? '--' : (humidity | ngxRound) }}
<!--</div>--> </div>
<!--<div class="desc">--> <div class="desc">
<!--Celsius--> Celsius
<!--</div>--> </div>
<!--</div>--> </div>
<!--</ngx-temperature-dragger>--> </ngx-temperature-dragger>
</nga-tab> </nga-tab>
</nga-tabset> </nga-tabset>
</nga-card> </nga-card>