mirror of
https://github.com/bitgapp/eqMac.git
synced 2024-11-25 01:54:43 +03:00
made the UI work on macOS 10.12
This commit is contained in:
Nodeful
parent
afcff2fd09
commit
6fad587780
@ -13,7 +13,7 @@ import AMCoreAudio
|
||||
struct Constants {
|
||||
|
||||
#if DEBUG
|
||||
static let UI_ENDPOINT_URL = URL(string: "http://localhost:4200")!
|
||||
static let UI_ENDPOINT_URL = URL(string: "http://localhost:8080")!
|
||||
// static let UI_ENDPOINT_URL = URL(string: "https://ui-v1.eqmac.app")!
|
||||
static let DEBUG = true
|
||||
#else
|
||||
|
||||
@ -1048,7 +1048,7 @@
|
||||
CODE_SIGN_IDENTITY = "Developer ID Application";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
COMBINE_HIDPI_IMAGES = YES;
|
||||
CURRENT_PROJECT_VERSION = 0.3.4;
|
||||
CURRENT_PROJECT_VERSION = 0.3.5;
|
||||
DEFINES_MODULE = YES;
|
||||
DEVELOPMENT_TEAM = JZA6C97KJA;
|
||||
ENABLE_HARDENED_RUNTIME = YES;
|
||||
@ -1085,7 +1085,7 @@
|
||||
"$(PROJECT_DIR)/Source/Vendor",
|
||||
);
|
||||
MACOSX_DEPLOYMENT_TARGET = 10.12;
|
||||
MARKETING_VERSION = v0.3.4;
|
||||
MARKETING_VERSION = v0.3.5;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.bitgapp.eqmac;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
PROVISIONING_PROFILE_SPECIFIER = "";
|
||||
@ -1109,7 +1109,7 @@
|
||||
CODE_SIGN_IDENTITY = "Developer ID Application";
|
||||
CODE_SIGN_STYLE = Manual;
|
||||
COMBINE_HIDPI_IMAGES = YES;
|
||||
CURRENT_PROJECT_VERSION = 0.3.4;
|
||||
CURRENT_PROJECT_VERSION = 0.3.5;
|
||||
DEFINES_MODULE = YES;
|
||||
DEVELOPMENT_TEAM = JZA6C97KJA;
|
||||
ENABLE_HARDENED_RUNTIME = YES;
|
||||
@ -1146,7 +1146,7 @@
|
||||
"$(PROJECT_DIR)/Source/Vendor",
|
||||
);
|
||||
MACOSX_DEPLOYMENT_TARGET = 10.12;
|
||||
MARKETING_VERSION = v0.3.4;
|
||||
MARKETING_VERSION = v0.3.5;
|
||||
PRODUCT_BUNDLE_IDENTIFIER = com.bitgapp.eqmac;
|
||||
PRODUCT_NAME = "$(TARGET_NAME)";
|
||||
PROVISIONING_PROFILE_SPECIFIER = "";
|
||||
|
||||
6
native/pkg/introduction.txt
Normal file
6
native/pkg/introduction.txt
Normal file
@ -0,0 +1,6 @@
|
||||
You will be guided through the steps necessary to install eqMac.
|
||||
|
||||
⚠️ WARNING ⚠️
|
||||
If the Installer will need to install/update the Audio Driver (required for eqMac to work correctly), by the end of the installation:
|
||||
⚠️YOU MIGHT BE LOGGED OUT OF YOUR CURRENT USER SESSION
|
||||
so please save any work progress you might have!
|
||||
@ -13,61 +13,76 @@ if [ "$CURRENT_DRIVER_VERSION" != "$NEEDED_DRIVER_VERSION" ]; then
|
||||
# Copy driver into Plug-Ins folder
|
||||
cp -f -r "$DIR/eqMac.driver" /Library/Audio/Plug-Ins/HAL/ &>/dev/null
|
||||
|
||||
if osascript <<EOT
|
||||
tell application id "com.apple.systemuiserver"
|
||||
display dialog \
|
||||
"It is recommended you restart your Mac for the eqMac Audio Driver to function properly." \
|
||||
buttons {"Skip restart", "Restart Mac"} \
|
||||
default button "Restart Mac" \
|
||||
cancel button "Skip restart" \
|
||||
with icon POSIX file "/Applications/eqMac.app/Contents/Resources/AppIcon.icns"
|
||||
end tell
|
||||
EOT
|
||||
then
|
||||
echo "RESTART"
|
||||
open /Applications/eqMac.app
|
||||
# Restart CoreAudio
|
||||
coreaudiod_plist="/System/Library/LaunchDaemons/com.apple.audio.coreaudiod.plist"
|
||||
(launchctl kickstart -k system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill SIGTERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill TERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill 15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill -15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
(launchctl unload "$coreaudiod_plist" &>/dev/null && \
|
||||
launchctl load "$coreaudiod_plist" &>/dev/null) || \
|
||||
killall coreaudiod &>/dev/null)
|
||||
|
||||
# Logout
|
||||
pkill loginwindow
|
||||
# if osascript <<EOT
|
||||
# tell application id "com.apple.systemuiserver"
|
||||
# display dialog \
|
||||
# "It is recommended you restart your Mac for the eqMac Audio Driver to function properly." \
|
||||
# buttons {"Skip restart", "Restart Mac"} \
|
||||
# default button "Restart Mac" \
|
||||
# cancel button "Skip restart" \
|
||||
# with icon POSIX file "/Applications/eqMac.app/Contents/Resources/AppIcon.icns"
|
||||
# end tell
|
||||
# EOT
|
||||
# then
|
||||
# echo "RESTART"
|
||||
|
||||
osascript <<EOT
|
||||
ignoring application responses
|
||||
tell application "System Events" to restart
|
||||
end ignoring
|
||||
EOT
|
||||
pkill -9 "Installer"
|
||||
exit 0
|
||||
else
|
||||
echo "SKIP RESTART"
|
||||
# osascript <<EOT
|
||||
# ignoring application responses
|
||||
# tell application "System Events" to restart
|
||||
# end ignoring
|
||||
# EOT
|
||||
# pkill -9 "Installer"
|
||||
# exit 0
|
||||
# else
|
||||
# echo "SKIP RESTART"
|
||||
|
||||
# Restart CoreAudio
|
||||
coreaudiod_plist="/System/Library/LaunchDaemons/com.apple.audio.coreaudiod.plist"
|
||||
(launchctl kickstart -k system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill SIGTERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill TERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill 15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
launchctl kill -15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
(launchctl unload "$coreaudiod_plist" &>/dev/null && \
|
||||
launchctl load "$coreaudiod_plist" &>/dev/null) || \
|
||||
killall coreaudiod &>/dev/null) && \
|
||||
sleep 5
|
||||
# # Restart CoreAudio
|
||||
# coreaudiod_plist="/System/Library/LaunchDaemons/com.apple.audio.coreaudiod.plist"
|
||||
# (launchctl kickstart -k system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
# launchctl kill SIGTERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
# launchctl kill TERM system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
# launchctl kill 15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
# launchctl kill -15 system/com.apple.audio.coreaudiod &>/dev/null || \
|
||||
# (launchctl unload "$coreaudiod_plist" &>/dev/null && \
|
||||
# launchctl load "$coreaudiod_plist" &>/dev/null) || \
|
||||
# killall coreaudiod &>/dev/null)
|
||||
|
||||
# Wait until coreaudiod has restarted and device is ready to use.
|
||||
retries=5
|
||||
while [[ $retries -gt 0 ]]; do
|
||||
if ! system_profiler SPAudioDataType | grep "eqMac:" >/dev/null 2>&1; then
|
||||
retries=$((retries - 1))
|
||||
if [[ $retries -gt 0 ]]; then
|
||||
echo "Device not ready yet, waiting..."
|
||||
sleep 3
|
||||
else
|
||||
echo "ERROR: Device did not become active"
|
||||
exit 1
|
||||
fi
|
||||
else
|
||||
retries=0
|
||||
fi
|
||||
done
|
||||
echo "Device became active"
|
||||
# # Wait until CoreAudio restarts
|
||||
# sleep 5
|
||||
|
||||
open /Applications/eqMac.app
|
||||
fi
|
||||
# # Wait until coreaudiod has restarted and device is ready to use.
|
||||
# retries=5
|
||||
# while [[ $retries -gt 0 ]]; do
|
||||
# if ! system_profiler SPAudioDataType | grep "eqMac:" >/dev/null 2>&1; then
|
||||
# retries=$((retries - 1))
|
||||
# if [[ $retries -gt 0 ]]; then
|
||||
# echo "Device not ready yet, waiting..."
|
||||
# sleep 3
|
||||
# else
|
||||
# echo "ERROR: Device did not become active"
|
||||
# exit 1
|
||||
# fi
|
||||
# else
|
||||
# retries=0
|
||||
# fi
|
||||
# done
|
||||
# echo "Device became active"
|
||||
|
||||
# fi
|
||||
fi
|
||||
|
||||
open /Applications/eqMac.app
|
||||
|
||||
|
||||
@ -4,5 +4,7 @@ last 2 versions
|
||||
Firefox ESR
|
||||
safari 12.1
|
||||
safari 12
|
||||
safari 10.1
|
||||
safari 10
|
||||
not dead
|
||||
# IE 9-11
|
||||
4
ui/.vscode/launch.json
vendored
4
ui/.vscode/launch.json
vendored
@ -8,7 +8,7 @@
|
||||
"name": "Launch Client",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:4200/#",
|
||||
"url": "http://localhost:8080/#",
|
||||
"port": 9223,
|
||||
"sourceMaps": true,
|
||||
"diagnosticLogging": true,
|
||||
@ -24,7 +24,7 @@
|
||||
"type": "chrome",
|
||||
"request": "attach",
|
||||
"port": 9000,
|
||||
"url": "http://localhost:4200/#",
|
||||
"url": "http://localhost:8080/#",
|
||||
"webRoot": "${workspaceRoot}/src"
|
||||
}, {
|
||||
"name": "Deploy (production)",
|
||||
|
||||
12
ui/package-lock.json
generated
12
ui/package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "eqmac",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -2354,6 +2354,11 @@
|
||||
"@xtuc/long": "4.2.2"
|
||||
}
|
||||
},
|
||||
"@webcomponents/custom-elements": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.4.2.tgz",
|
||||
"integrity": "sha512-bLw2XH9+2NBwmn7BI6WA2oIo2eOfBpl+GjAqkF/qnkZ8kq3HY5tKYTxtKowWALAferTp3wKD8W6FSn5OyK+rtQ=="
|
||||
},
|
||||
"@xtuc/ieee754": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
||||
@ -10637,6 +10642,11 @@
|
||||
"minimalistic-assert": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"web-animations-js": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz",
|
||||
"integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA=="
|
||||
},
|
||||
"webpack": {
|
||||
"version": "4.39.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.39.2.tgz",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "eqmac",
|
||||
"version": "1.2.1",
|
||||
"scripts": {
|
||||
"start": "ng serve",
|
||||
"start": "ng serve --port 8080",
|
||||
"build": "rm -rf dist/ && ng build --prod && cd dist/ && zip -r -D ui.zip * -x '*.DS_Store' && cp ui.zip ../../native/app/Embedded",
|
||||
"deploy": "export $(egrep -v '^#' .env | xargs) && ./scripts/deploy.sh",
|
||||
"purge-cache": "./node_modules/.bin/ts-node -O '{\"module\":\"commonjs\"}' ./scripts/purge-cache.ts"
|
||||
@ -22,11 +22,13 @@
|
||||
"@angular/pwa": "^0.803.8",
|
||||
"@angular/router": "~8.2.9",
|
||||
"@angular/service-worker": "~8.2.9",
|
||||
"@webcomponents/custom-elements": "^1.4.2",
|
||||
"core-js": "^3.2.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"ng-click-outside": "^5.1.1",
|
||||
"rxjs": "~6.5.3",
|
||||
"ui-carousel": "^0.2.0",
|
||||
"web-animations-js": "^2.3.2",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -32,13 +32,13 @@ export class AppComponent implements OnInit, AfterContentInit {
|
||||
}
|
||||
|
||||
constructor (
|
||||
private utils: UtilitiesService,
|
||||
private ui: UIService,
|
||||
public utils: UtilitiesService,
|
||||
public ui: UIService,
|
||||
public matDialog: MatDialog,
|
||||
private transitions: TransitionService,
|
||||
private analytics: AnalyticsService,
|
||||
private app: ApplicationService,
|
||||
private settings: SettingsService
|
||||
public transitions: TransitionService,
|
||||
public analytics: AnalyticsService,
|
||||
public app: ApplicationService,
|
||||
public settings: SettingsService
|
||||
) { }
|
||||
|
||||
async ngOnInit () {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div fxLayout="column" fxLayoutAlign="space-around start" fxLayoutGap="10px">
|
||||
<div *ngFor="let row of options" fxLayout="row" fxFill fxLayoutGap="10px" fxLayoutAlign="space-between center">
|
||||
<div *ngFor="let option of row" [fxFlex]="100 / row.length" [style.width.%]="option.type === 'button' ? 100 : undefined">
|
||||
<div *ngFor="let row of options" fxLayout="row" style="width: 100%" fxLayoutGap="10px" fxLayoutAlign="space-between center">
|
||||
<div *ngFor="let option of row" [fxFlex]="100 / row.length" [ngStyle]="getOptionStyle(option.type)">
|
||||
<div *ngIf="option.type === 'checkbox'"
|
||||
fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="10px"
|
||||
(click)="toggleCheckbox(option)">
|
||||
|
||||
@ -41,7 +41,16 @@ export class OptionsComponent {
|
||||
@Input() options: Options = []
|
||||
@Output() checkboxToggled = new EventEmitter<CheckboxOption>()
|
||||
|
||||
constructor (private ref: ChangeDetectorRef) {}
|
||||
constructor (public ref: ChangeDetectorRef) {}
|
||||
|
||||
getOptionStyle (type: Option['type']) {
|
||||
let style: any = {}
|
||||
if (type === 'button') {
|
||||
style.width = '100%'
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
|
||||
toggleCheckbox (checkbox: CheckboxOption) {
|
||||
checkbox.value = !checkbox.value
|
||||
|
||||
@ -16,14 +16,14 @@ export class AnalyzerComponent implements OnInit {
|
||||
@ViewChild('container', {
|
||||
read: ElementRef,
|
||||
static: true
|
||||
}) container
|
||||
}) container
|
||||
|
||||
height = 0
|
||||
width = 0
|
||||
halfHeight = 0
|
||||
halfWidth = 0
|
||||
|
||||
constructor (private elRef: ElementRef) {}
|
||||
constructor (public elRef: ElementRef) {}
|
||||
|
||||
ngOnInit () {
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div (click)="click()" [class]="computeClass()" [style.height.px]="height" [style.width.px]="width">
|
||||
<div (click)="click()" [class]="computeClass()" [ngStyle]="style">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
@ -20,6 +20,13 @@ export class ButtonComponent implements OnInit {
|
||||
ngOnInit () {
|
||||
}
|
||||
|
||||
get style () {
|
||||
return {
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}px`
|
||||
}
|
||||
}
|
||||
|
||||
computeClass () {
|
||||
let className = 'button'
|
||||
className += ` ${this.type}`
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="wrapper" [style.height.px]="height" [style.transition-duration.ms]="animationDuration" #wrapper [style.width.%]="items.length * 100">
|
||||
<div class="wrapper" [ngStyle]="wrapperStyle" #wrapper>
|
||||
<ng-container *ngFor="let item of items;" class="item" [ngTemplateOutlet]="item.template"></ng-container>
|
||||
</div>
|
||||
|
||||
@ -43,9 +43,9 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
|
||||
}
|
||||
@Output() heightDiff = new EventEmitter<number>()
|
||||
@Output() heightChange = new EventEmitter<number>()
|
||||
private recalculateHeightTimer
|
||||
public recalculateHeightTimer
|
||||
|
||||
private _selectedItemId: string
|
||||
public _selectedItemId: string
|
||||
@Input() set selectedItemId (newSelectedItemId: string) {
|
||||
if (this._selectedItemId !== newSelectedItemId) {
|
||||
this._selectedItemId = newSelectedItemId
|
||||
@ -60,10 +60,18 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
|
||||
|
||||
@Output() itemCameIntoView = new EventEmitter<string>()
|
||||
constructor (
|
||||
private builder: AnimationBuilder
|
||||
public builder: AnimationBuilder
|
||||
) {
|
||||
}
|
||||
|
||||
get wrapperStyle () {
|
||||
return {
|
||||
height: `${this.height}px`,
|
||||
transitionDuration: `${this.animationDuration}ms`,
|
||||
width: `${this.items.length * 100}%`
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit () {
|
||||
for (const item of this.items.toArray()) {
|
||||
if (!item.eqmCarouselItem || typeof item.eqmCarouselItem !== 'string') {
|
||||
@ -104,21 +112,21 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
|
||||
this.selectedItemIdChange.emit(this.selectedItemId)
|
||||
}
|
||||
|
||||
private animate () {
|
||||
public animate () {
|
||||
const myAnimation: AnimationFactory = this.animation
|
||||
const player = myAnimation.create(this.wrapper.nativeElement)
|
||||
player.play()
|
||||
setTimeout(() => this.animationCompleted.emit(), this.animationDuration)
|
||||
}
|
||||
|
||||
private get animation () {
|
||||
public get animation () {
|
||||
const offset = this.currentIndex * 100 / this.items.length
|
||||
return this.builder.build([
|
||||
animate(`${this.animationDuration}ms ease-in`, style({ transform: `translateX(-${offset}%)` }))
|
||||
])
|
||||
}
|
||||
|
||||
private recalculateHeight () {
|
||||
public recalculateHeight () {
|
||||
const itemEl = this.itemElems && this.itemElems.toArray()[this.currentIndex].nativeElement.nextElementSibling
|
||||
itemEl && itemEl.offsetHeight && (this.height = itemEl.offsetHeight)
|
||||
}
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<div [class]="'divider ' + (_horizontal ? 'horizontal' : 'vertical')"></div>
|
||||
@ -1,16 +1,5 @@
|
||||
.divider {
|
||||
:host {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
}
|
||||
.horizontal {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px solid rgb(58, 59, 61);
|
||||
border-bottom: 1px solid rgb(96, 97, 101);
|
||||
}
|
||||
|
||||
.vertical {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border-left: 1px solid rgb(58, 59, 61);
|
||||
border-right: 1px solid rgb(96, 97, 101);
|
||||
}
|
||||
@ -1,27 +1,45 @@
|
||||
import { Component, OnInit, Input, ElementRef } from '@angular/core'
|
||||
import { Component, OnInit, Input, ElementRef, HostBinding } from '@angular/core'
|
||||
|
||||
@Component({
|
||||
selector: 'eqm-divider',
|
||||
templateUrl: './divider.component.html',
|
||||
styleUrls: ['./divider.component.scss']
|
||||
})
|
||||
export class DividerComponent implements OnInit {
|
||||
export class DividerComponent {
|
||||
@Input() orientation: 'vertical' | 'horizontal' = 'horizontal'
|
||||
|
||||
constructor (private elRef: ElementRef) { }
|
||||
_horizontal = true
|
||||
_vertical = false
|
||||
@Input()
|
||||
set horizontal (isHorizontal) {
|
||||
this._horizontal = isHorizontal
|
||||
this._vertical = !isHorizontal
|
||||
constructor (
|
||||
public elem: ElementRef
|
||||
) {}
|
||||
|
||||
@HostBinding('style.width')
|
||||
get width () {
|
||||
return this.orientation === 'vertical' ? '1px' : `${this.elem.nativeElement.parentElement.offsetWidth}`
|
||||
}
|
||||
|
||||
@Input()
|
||||
set vertical (isVertical) {
|
||||
this._vertical = isVertical
|
||||
this._horizontal = !isVertical
|
||||
@HostBinding('style.height')
|
||||
get height () {
|
||||
return this.orientation === 'vertical' ? `${this.elem.nativeElement.parentElement.offsetHeight}` : '1px'
|
||||
}
|
||||
ngOnInit () {
|
||||
|
||||
@HostBinding('style.border-left')
|
||||
get leftBorder () {
|
||||
return this.orientation === 'vertical' ? '1px solid rgb(58, 59, 61)' : undefined
|
||||
}
|
||||
|
||||
@HostBinding('style.border-right')
|
||||
get rightBorder () {
|
||||
return this.orientation === 'vertical' ? '1px solid rgb(96, 97, 101)' : undefined
|
||||
}
|
||||
|
||||
@HostBinding('style.border-top')
|
||||
get topBorder () {
|
||||
return this.orientation === 'horizontal' ? '1px solid rgb(58, 59, 61)' : undefined
|
||||
}
|
||||
|
||||
@HostBinding('style.border-bottom')
|
||||
get bottomtBorder () {
|
||||
return this.orientation === 'horizontal' ? '1px solid rgb(96, 97, 101)' : undefined
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,15 +7,6 @@
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 20px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.container {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
@ -28,6 +19,16 @@
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 20px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: calc(50% - 16px/2);
|
||||
}
|
||||
|
||||
$animation-duration: .2s;
|
||||
|
||||
.items-select-box{
|
||||
|
||||
@ -11,8 +11,8 @@ import { FadeInOutAnimation } from 'src/app/modules/animations'
|
||||
animations: [ FadeInOutAnimation ]
|
||||
})
|
||||
export class DropdownComponent implements OnInit {
|
||||
constructor (private utils: UtilitiesService, private zone: NgZone) { }
|
||||
private _items: any[] = []
|
||||
constructor (public utils: UtilitiesService, public zone: NgZone) { }
|
||||
public _items: any[] = []
|
||||
hasSelection = false
|
||||
@Input() editable = false
|
||||
@Input()
|
||||
@ -40,7 +40,7 @@ export class DropdownComponent implements OnInit {
|
||||
shown = false
|
||||
yCoordinate = 0
|
||||
direction: 'down' | 'up' = 'down'
|
||||
private padding = 5
|
||||
public padding = 5
|
||||
|
||||
async ngOnInit () {
|
||||
if (!this.items) this.items = []
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<div class="groove" [ngStyle]="grooveStyle"></div>
|
||||
<div class="groove-filling" [ngStyle]="grooveFillingStyle"></div>
|
||||
<div class="thumbNotch" [ngStyle]="thumbNotchStyle"></div>
|
||||
<div class="thumb" [ngStyle]="thumbStyle" (dblclick)="doubleclick()"></div>
|
||||
|
||||
<div class="container" #container [ngStyle]="containerStyle">
|
||||
<div class="groove" [ngStyle]="grooveStyle"></div>
|
||||
<div class="groove-filling" [ngStyle]="grooveFillingStyle"></div>
|
||||
<div class="thumbNotch" [ngStyle]="thumbNotchStyle"></div>
|
||||
<div class="thumb" [ngStyle]="thumbStyle" (dblclick)="doubleclick()"></div>
|
||||
</div>
|
||||
@ -1,24 +1,18 @@
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
:host.disabled {
|
||||
filter: grayscale(80%);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
.groove {
|
||||
position: absolute;
|
||||
* {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.groove-filling {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
}
|
||||
@ -28,9 +28,9 @@ export interface FlatSliderValueChangedEvent {
|
||||
})
|
||||
export class FlatSliderComponent {
|
||||
constructor (
|
||||
private utils: UtilitiesService,
|
||||
private elem: ElementRef,
|
||||
private sanitizer: DomSanitizer
|
||||
public utils: UtilitiesService,
|
||||
public elem: ElementRef,
|
||||
public sanitizer: DomSanitizer
|
||||
) {}
|
||||
|
||||
@Input() doubleClickToAnimateToMiddle = true
|
||||
@ -44,12 +44,14 @@ export class FlatSliderComponent {
|
||||
@Input() thickness = 2
|
||||
@Input() orientation: 'vertical' | 'horizontal' = 'horizontal'
|
||||
@Output() stickedToMiddle = new EventEmitter()
|
||||
@ViewChild('container', { static: true }) containerRef: ElementRef
|
||||
|
||||
get middleValue () {
|
||||
return typeof this.middle === 'number' ? this.middle : (this.min + this.max) / 2
|
||||
}
|
||||
|
||||
private defaultColor = '#4f8d71'
|
||||
private _enabled = true
|
||||
public defaultColor = '#4f8d71'
|
||||
public _enabled = true
|
||||
|
||||
@HostBinding('class.disabled') get disabled () { return !this.enabled }
|
||||
@Input()
|
||||
@ -59,7 +61,7 @@ export class FlatSliderComponent {
|
||||
}
|
||||
get enabled () { return this._enabled }
|
||||
|
||||
private _color = this.defaultColor
|
||||
public _color = this.defaultColor
|
||||
@Input()
|
||||
set color (newColor) {
|
||||
this.defaultColor = newColor
|
||||
@ -78,10 +80,10 @@ export class FlatSliderComponent {
|
||||
return hex
|
||||
}
|
||||
|
||||
private dragging = false
|
||||
private knobRadius = 4
|
||||
public dragging = false
|
||||
public knobRadius = 4
|
||||
|
||||
private _value = .5
|
||||
public _value = .5
|
||||
@Input()
|
||||
set value (newValue) {
|
||||
let value = this.clampValue(newValue)
|
||||
@ -112,13 +114,13 @@ export class FlatSliderComponent {
|
||||
@Output() userChangedValue = new EventEmitter<FlatSliderValueChangedEvent>()
|
||||
|
||||
get height () {
|
||||
return this.elem.nativeElement.offsetHeight
|
||||
return this.containerRef.nativeElement.offsetHeight
|
||||
}
|
||||
|
||||
get width () {
|
||||
return this.elem.nativeElement.offsetWidth
|
||||
return this.containerRef.nativeElement.offsetWidth
|
||||
}
|
||||
private clampValue (value) {
|
||||
public clampValue (value) {
|
||||
if (value < this.min) return this.min
|
||||
if (value > this.max) return this.max
|
||||
return value
|
||||
@ -133,7 +135,7 @@ export class FlatSliderComponent {
|
||||
}
|
||||
}
|
||||
|
||||
private getValueFromMouseEvent (event: MouseEvent) {
|
||||
public getValueFromMouseEvent (event: MouseEvent) {
|
||||
const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.elem.nativeElement)
|
||||
const progress = this.orientation === 'vertical' ? coords.y : coords.x
|
||||
const value = this.utils.mapValue(progress, this.knobRadius, (this.orientation === 'vertical' ? this.height : this.width) - this.knobRadius, this.min, this.max)
|
||||
@ -157,7 +159,7 @@ export class FlatSliderComponent {
|
||||
}
|
||||
}
|
||||
|
||||
private mouseInside = false
|
||||
public mouseInside = false
|
||||
@HostListener('mouseenter')
|
||||
onMouseEnter (): void {
|
||||
this.mouseInside = true
|
||||
@ -168,7 +170,7 @@ export class FlatSliderComponent {
|
||||
this.dragging = false
|
||||
}
|
||||
|
||||
private doubleclickTimeout = null
|
||||
public doubleclickTimeout = null
|
||||
doubleclick () {
|
||||
if (this.enabled && this.doubleClickToAnimateToMiddle) {
|
||||
if (this.doubleclickTimeout) {
|
||||
@ -211,34 +213,30 @@ export class FlatSliderComponent {
|
||||
return this.utils.mapValue(this.value, this.min, this.max, 0, 1)
|
||||
}
|
||||
|
||||
@HostBinding('style')
|
||||
get style (): SafeStyle {
|
||||
get containerStyle () {
|
||||
const styles: { [style: string]: string } = {}
|
||||
const thickness = this.knobRadius * 2 + 2
|
||||
const height = this.knobRadius * 2 + 2
|
||||
if (this.orientation === 'horizontal') {
|
||||
styles.width = `100%`
|
||||
styles.height = `${thickness}px`
|
||||
styles.flexDirection = 'column'
|
||||
styles.height = `${height}px`
|
||||
} else {
|
||||
styles.height = `100%`
|
||||
styles.width = `${thickness}px`
|
||||
styles.flexDirection = 'row'
|
||||
styles.width = `${height}px`
|
||||
}
|
||||
|
||||
const style = Object.entries(styles)
|
||||
.map(([ key, value ]) => `${key}: ${value}`)
|
||||
.join('; ')
|
||||
return this.sanitizer.bypassSecurityTrustStyle(style)
|
||||
return styles
|
||||
}
|
||||
|
||||
get grooveStyle () {
|
||||
const style: { [style: string]: string | number } = {}
|
||||
if (this.orientation === 'horizontal') {
|
||||
style.left = `${this.knobRadius}px`
|
||||
style.top = `calc(50% - ${this.thickness}px / 2)`
|
||||
style.width = `calc(100% - ${this.knobRadius * 2}px)`
|
||||
style.height = `${this.thickness}px`
|
||||
} else {
|
||||
style.bottom = `${this.knobRadius}px`
|
||||
style.top = `${this.knobRadius}px`
|
||||
style.left = `calc(50% - ${this.thickness}px / 2)`
|
||||
style.height = `calc(100% - ${this.knobRadius * 2}px)`
|
||||
style.width = `${this.thickness}px`
|
||||
}
|
||||
@ -250,10 +248,12 @@ export class FlatSliderComponent {
|
||||
const style: { [style: string]: string } = {}
|
||||
if (this.orientation === 'horizontal') {
|
||||
style.left = `${this.knobRadius}px`
|
||||
style.top = `calc(50% - ${this.thickness}px / 2)`
|
||||
style.width = `calc(${this.progress * 100}% - ${this.knobRadius}px)`
|
||||
style.height = `${this.thickness}px`
|
||||
} else {
|
||||
style.bottom = `${this.knobRadius}px`
|
||||
style.top = `${this.knobRadius}px`
|
||||
style.left = `calc(50% - ${this.thickness}px / 2)`
|
||||
style.height = `calc(${this.progress * 100}% - ${this.knobRadius * 2}px)`
|
||||
style.width = `${this.thickness}px`
|
||||
}
|
||||
@ -268,11 +268,9 @@ export class FlatSliderComponent {
|
||||
style.backgroundColor = this.value >= this.middleValue ? this.color : this.darkerColor
|
||||
|
||||
style.borderRadius = '100%'
|
||||
if (this.orientation === 'horizontal') {
|
||||
style.left = `${this.utils.mapValue(this.middleValue, this.min, this.max, 0, this.width)}px`
|
||||
} else {
|
||||
style.bottom = `${this.utils.mapValue(this.middleValue, this.min, this.max, 0, this.height)}px`
|
||||
}
|
||||
const center = `calc(50% - ${this.knobRadius}px)`
|
||||
style.left = center
|
||||
style.top = center
|
||||
|
||||
return style
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ export class IconComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
private _rotate = 0
|
||||
public _rotate = 0
|
||||
@Input()
|
||||
get rotate () {
|
||||
return this._rotate
|
||||
@ -61,7 +61,7 @@ export class IconComponent implements OnInit {
|
||||
|
||||
@Input() stroke: number = 0
|
||||
|
||||
constructor (private sanitizer: DomSanitizer) {}
|
||||
constructor (public sanitizer: DomSanitizer) {}
|
||||
ngOnInit () {
|
||||
}
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="cap-body" [ngStyle]="largeCapBodyStyle"></div>
|
||||
<!-- <div class="cap-body" [ngStyle]="largeCapBodyStyle"></div> -->
|
||||
<div class="indicator" [ngStyle]="largeCapIndicatorStyle">
|
||||
<svg class="inner-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="40px" height="40px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;"
|
||||
|
||||
@ -25,11 +25,11 @@ export class KnobComponent implements OnInit {
|
||||
@Input() size: 'large' | 'medium' | 'small' = 'medium'
|
||||
@Input() showScale = true
|
||||
id = uuid()
|
||||
private _min = -1
|
||||
public _min = -1
|
||||
@Input() set min (newMin) { this._min = newMin; this.calculateMiddleValue() }
|
||||
get min () { return this._min }
|
||||
|
||||
private _max = 1
|
||||
public _max = 1
|
||||
@Input() set max (newMax) { this._max = newMax; this.calculateMiddleValue() }
|
||||
get max () { return this._max }
|
||||
|
||||
@ -43,15 +43,15 @@ export class KnobComponent implements OnInit {
|
||||
@Input() stickToMiddle = false
|
||||
@Output() stickedToMiddle = new EventEmitter()
|
||||
|
||||
private dragging = false
|
||||
private setDraggingFalseTimeout: any = null
|
||||
private continueAnimation = false
|
||||
private dragStartDegr = 0
|
||||
public dragging = false
|
||||
public setDraggingFalseTimeout: any = null
|
||||
public continueAnimation = false
|
||||
public dragStartDegr = 0
|
||||
|
||||
@ViewChild('container', { static: true }) containerRef: ElementRef
|
||||
container: HTMLDivElement
|
||||
|
||||
private _value = 0
|
||||
public _value = 0
|
||||
@Output() valueChange = new EventEmitter<number>()
|
||||
@Output() userChangedValue = new EventEmitter<KnobValueChangedEvent>()
|
||||
@Input()
|
||||
@ -82,12 +82,12 @@ export class KnobComponent implements OnInit {
|
||||
}
|
||||
|
||||
middleValue: number = this.calculateMiddleValue()
|
||||
private calculateMiddleValue () {
|
||||
public calculateMiddleValue () {
|
||||
this.middleValue = (this.min + this.max) / 2
|
||||
return this.middleValue
|
||||
}
|
||||
|
||||
constructor (private utils: UtilitiesService) {}
|
||||
constructor (public utils: UtilitiesService) {}
|
||||
|
||||
async ngOnInit () {
|
||||
this.container = this.containerRef.nativeElement
|
||||
@ -239,7 +239,7 @@ export class KnobComponent implements OnInit {
|
||||
return
|
||||
}
|
||||
|
||||
private getDegreesFromEvent (event) {
|
||||
public getDegreesFromEvent (event) {
|
||||
const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.container)
|
||||
const knobCenterX = (this.container.clientWidth) / 2
|
||||
const knobCenterY = (this.container.clientHeight) / 2
|
||||
@ -247,7 +247,7 @@ export class KnobComponent implements OnInit {
|
||||
return rads * 100
|
||||
}
|
||||
|
||||
private getDistanceFromCenterOfElementAndEvent (event) {
|
||||
public getDistanceFromCenterOfElementAndEvent (event) {
|
||||
const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.container)
|
||||
const knobCenterX = (this.container.clientWidth) / 2
|
||||
const knobCenterY = (this.container.clientHeight) / 2
|
||||
@ -256,7 +256,7 @@ export class KnobComponent implements OnInit {
|
||||
return Math.sqrt(w * w + h * h)
|
||||
}
|
||||
|
||||
private clampValue (value) {
|
||||
public clampValue (value) {
|
||||
if (value > this.max) {
|
||||
value = this.max
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export class SelectBoxComponent implements OnInit {
|
||||
@Input() selectedItem = null
|
||||
@Output() itemSelected = new EventEmitter()
|
||||
@ViewChild('container', { read: ElementRef, static: true }) container
|
||||
private _nVisibleItems: number = 6
|
||||
public _nVisibleItems: number = 6
|
||||
@Input()
|
||||
set numberOfVisibleItems (value: number) {
|
||||
if (!isNaN(parseInt(value.toString(), 10))) {
|
||||
@ -39,24 +39,24 @@ export class SelectBoxComponent implements OnInit {
|
||||
hidden = true
|
||||
itemHeight = 25
|
||||
|
||||
constructor (private host: ElementRef) { }
|
||||
constructor (public host: ElementRef) { }
|
||||
|
||||
ngOnInit () {
|
||||
this.setDimensions()
|
||||
}
|
||||
|
||||
private setDimensions () {
|
||||
public setDimensions () {
|
||||
this.setHeight()
|
||||
this.setWidth()
|
||||
}
|
||||
|
||||
private setHeight () {
|
||||
public setHeight () {
|
||||
const lowest = Math.min(this._nVisibleItems, this.items.length)
|
||||
this.height = lowest * this.itemHeight + (this.numberOfVisibleItems < this.items.length ? this.itemHeight / 2 : 0)
|
||||
this.host.nativeElement.style.height = `${this.height}px`
|
||||
}
|
||||
|
||||
private setWidth () {
|
||||
public setWidth () {
|
||||
if (this.width) {
|
||||
this.host.nativeElement.style.height = `${this.height}px`
|
||||
}
|
||||
|
||||
@ -11,6 +11,14 @@
|
||||
transition-duration: .5s;
|
||||
}
|
||||
|
||||
.notches {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.groove {
|
||||
width: 7px;
|
||||
height: 89%;
|
||||
@ -29,6 +37,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: calc(50% - 21px / 2);
|
||||
width: 21px;
|
||||
height: 25px;
|
||||
background-color: rgb(56, 57, 61);
|
||||
@ -57,12 +66,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.notches {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host.disabled {
|
||||
filter: grayscale(80%);
|
||||
}
|
||||
@ -25,7 +25,7 @@ export interface SkeuomorphSliderValueChangedEvent {
|
||||
})
|
||||
export class SkeuomorphSliderComponent implements OnInit {
|
||||
|
||||
constructor (private utils: UtilitiesService, private elRef: ElementRef) {}
|
||||
constructor (public utils: UtilitiesService, public elRef: ElementRef) {}
|
||||
|
||||
@Input() min: number = 0
|
||||
@Input() max: number = 1
|
||||
@ -40,8 +40,8 @@ export class SkeuomorphSliderComponent implements OnInit {
|
||||
return typeof this.middle === 'number' ? this.middle : (this.min + this.max) / 2
|
||||
}
|
||||
|
||||
private dragging = false
|
||||
private doubleclickTimeout = null
|
||||
public dragging = false
|
||||
public doubleclickTimeout = null
|
||||
|
||||
@ViewChild('notches', { static: true }) notches
|
||||
@Output() userChangedValue = new EventEmitter<SkeuomorphSliderValueChangedEvent>()
|
||||
@ -50,7 +50,7 @@ export class SkeuomorphSliderComponent implements OnInit {
|
||||
|
||||
@HostBinding('class.disabled') @Input() disabled = false
|
||||
|
||||
private _value = .5
|
||||
public _value = .5
|
||||
@Input()
|
||||
set value (newValue) {
|
||||
let value = this.clampValue(newValue)
|
||||
@ -86,7 +86,7 @@ export class SkeuomorphSliderComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
private getValueFromMouseEvent (event) {
|
||||
public getValueFromMouseEvent (event) {
|
||||
const coords = this.utils.getCoordinatesInsideElementFromEvent(event, this.elRef.nativeElement)
|
||||
const y = coords.y
|
||||
const height = this.elRef.nativeElement.offsetHeight
|
||||
@ -95,7 +95,7 @@ export class SkeuomorphSliderComponent implements OnInit {
|
||||
return value
|
||||
}
|
||||
|
||||
private clampValue (value) {
|
||||
public clampValue (value) {
|
||||
if (value < this.min) {
|
||||
return this.min
|
||||
} else if (value > this.max) {
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
<div #arrow
|
||||
[hidden]="!showArrow"
|
||||
class="arrow-container"
|
||||
[ngStyle]="arrowStyle">
|
||||
<div
|
||||
class="arrow"></div>
|
||||
</div>
|
||||
<eqm-container class="tooltip" #tooltip>
|
||||
<ng-content></ng-content>
|
||||
<eqm-label *ngIf="text">
|
||||
{{text}}
|
||||
</eqm-label>
|
||||
</eqm-container>
|
||||
<div class="container" [ngStyle]="style">
|
||||
<div #arrow
|
||||
[hidden]="!showArrow"
|
||||
class="arrow-container"
|
||||
[ngStyle]="arrowStyle">
|
||||
<div
|
||||
class="arrow"></div>
|
||||
</div>
|
||||
<eqm-container class="tooltip" #tooltip>
|
||||
<ng-content></ng-content>
|
||||
<eqm-label *ngIf="text">
|
||||
{{text}}
|
||||
</eqm-label>
|
||||
</eqm-container>
|
||||
</div>
|
||||
@ -1,34 +1,37 @@
|
||||
:host {
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
// padding: 2px 3px;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
.tooltip {
|
||||
text-align: center;
|
||||
padding: 0px 4px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
|
||||
|
||||
.arrow {
|
||||
$ratio: 50%;
|
||||
width: $ratio;
|
||||
height: $ratio;
|
||||
transform: rotate(45deg);
|
||||
background-color: #222324;
|
||||
box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(70, 74, 77);
|
||||
border-radius: 10%;
|
||||
.tooltip {
|
||||
text-align: center;
|
||||
padding: 0px 4px;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
|
||||
|
||||
.arrow {
|
||||
$ratio: 50%;
|
||||
width: $ratio;
|
||||
height: $ratio;
|
||||
transform: rotate(45deg);
|
||||
background-color: #222324;
|
||||
box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(70, 74, 77);
|
||||
border-radius: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,8 +3,7 @@ import {
|
||||
OnInit,
|
||||
Input,
|
||||
ElementRef,
|
||||
ViewChild,
|
||||
HostBinding
|
||||
ViewChild
|
||||
} from '@angular/core'
|
||||
import { UtilitiesService } from '../../services/utilities.service'
|
||||
import { SafeStyle, DomSanitizer } from '@angular/platform-browser'
|
||||
@ -20,7 +19,7 @@ export class TooltipComponent implements OnInit {
|
||||
@Input() parent?: any
|
||||
@Input() positionSide: TooltipPositionSide = 'top'
|
||||
@Input() showArrow: Boolean = true
|
||||
private padding = 10
|
||||
public padding = 10
|
||||
|
||||
@ViewChild('arrow', {
|
||||
read: ElementRef,
|
||||
@ -33,24 +32,23 @@ export class TooltipComponent implements OnInit {
|
||||
}) tooltip
|
||||
|
||||
constructor (
|
||||
private elem: ElementRef,
|
||||
private utils: UtilitiesService,
|
||||
private sanitizer: DomSanitizer
|
||||
public elem: ElementRef,
|
||||
public utils: UtilitiesService,
|
||||
public sanitizer: DomSanitizer
|
||||
) {}
|
||||
|
||||
async ngOnInit () {
|
||||
await this.utils.delay(0)
|
||||
}
|
||||
|
||||
@HostBinding('style')
|
||||
get style (): SafeStyle {
|
||||
get style () {
|
||||
let x = -999
|
||||
let y = -999
|
||||
const body = document.body
|
||||
const html = document.documentElement
|
||||
const viewHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
|
||||
const viewWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
|
||||
const tooltipEl = this.elem.nativeElement
|
||||
const tooltipEl = this.tooltip.nativeElement
|
||||
const tooltipWidth = tooltipEl.offsetWidth + 3
|
||||
const tooltipHeight = tooltipEl.offsetHeight + 2
|
||||
const parentEl = this.parent.nativeElement
|
||||
@ -86,7 +84,10 @@ export class TooltipComponent implements OnInit {
|
||||
|
||||
const minY = this.padding
|
||||
if (y < minY) y = minY
|
||||
return this.sanitizer.bypassSecurityTrustStyle(`left: ${x}px; top: ${y}px`)
|
||||
return {
|
||||
left: `${x}px`,
|
||||
top: `${y}px`
|
||||
}
|
||||
}
|
||||
|
||||
get arrowStyle () {
|
||||
@ -96,9 +97,9 @@ export class TooltipComponent implements OnInit {
|
||||
let y = 0
|
||||
let angle = 0
|
||||
const style: { [style: string]: string } = {}
|
||||
const tooltipEl = this.elem.nativeElement
|
||||
const tooltipWidth = tooltipEl.offsetWidth + 3
|
||||
const tooltipHeight = tooltipEl.offsetHeight + 2
|
||||
const tooltipEl = this.tooltip.nativeElement
|
||||
const tooltipWidth = tooltipEl.offsetWidth
|
||||
const tooltipHeight = tooltipEl.offsetHeight
|
||||
const tooltipPosition = this.utils.getElementPosition(tooltipEl)
|
||||
|
||||
const parentEl = this.parent.nativeElement
|
||||
@ -106,9 +107,9 @@ export class TooltipComponent implements OnInit {
|
||||
const parentWidth = parentEl.offsetWidth
|
||||
const parentHeight = parentEl.offsetHeight
|
||||
|
||||
x = parentPosition.x + parentWidth / 2 - tooltipPosition.x - arrowSize / 2
|
||||
x = parentPosition.x + parentWidth / 2 - tooltipPosition.x - arrowSize / 2 + 3
|
||||
if (this.positionSide === 'top') {
|
||||
y = tooltipHeight - arrowSize / 2 - 3
|
||||
y = tooltipHeight - arrowSize / 2 + 4
|
||||
}
|
||||
|
||||
if (this.positionSide === 'top') {
|
||||
@ -116,7 +117,7 @@ export class TooltipComponent implements OnInit {
|
||||
}
|
||||
|
||||
if (this.positionSide === 'bottom') {
|
||||
y = -arrowSize / 2 + 2
|
||||
y = -arrowSize / 2 + 3
|
||||
}
|
||||
|
||||
style.top = `${y}px`
|
||||
|
||||
@ -10,9 +10,9 @@ export class TooltipDirective implements OnDestroy {
|
||||
@Input() eqmTooltipDelay = 100
|
||||
@Input() eqmTooltipPositionSide: TooltipPositionSide = 'top'
|
||||
@Input() eqmTooltipShowArrow: boolean = true
|
||||
private id: string
|
||||
private left: boolean
|
||||
constructor (private tooltipService: TooltipService, private element: ElementRef) { }
|
||||
public id: string
|
||||
public left: boolean
|
||||
constructor (public tooltipService: TooltipService, public element: ElementRef) { }
|
||||
|
||||
@HostListener('mouseenter')
|
||||
onMouseEnter (): void {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<eqm-loading *ngIf="!selectedPreset || !presets"></eqm-loading>
|
||||
<div *ngIf="selectedPreset && presets" fxLayoutAlign="start center" fxLayout="column" fxLayoutGap="10px" fxFill>
|
||||
<div fxLayout="row" [style.width.%]="95" fxLayoutAlign="space-around center" fxLayoutGap="10px">
|
||||
<div fxLayout="row" style="width: 95%" fxLayoutAlign="space-around center" fxLayoutGap="10px">
|
||||
<eqm-value-screen [disabled]="!enabled">Global:</eqm-value-screen>
|
||||
<div [style.width.%]="90">
|
||||
<div style="width: 90%">
|
||||
<eqm-flat-slider [enabled]="enabled" [min]="-24" [max]="24" [(value)]="global"
|
||||
(userChangedValue)="setGain('global', $event)" [stickToMiddle]="stickSlidersToMiddle"
|
||||
(stickedToMiddle)="performHapticFeedback()" orientation="horizontal">
|
||||
|
||||
@ -20,7 +20,7 @@ import { ApplicationService } from '../../../../services/app.service'
|
||||
export class AdvancedEqualizerComponent extends EqualizerComponent implements OnInit {
|
||||
@Input() enabled = true
|
||||
|
||||
private ShowDefaultPresetsCheckbox: CheckboxOption = {
|
||||
public ShowDefaultPresetsCheckbox: CheckboxOption = {
|
||||
key: 'show-default-presets',
|
||||
type: 'checkbox',
|
||||
label: 'Show Default Presets',
|
||||
@ -42,7 +42,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
], [
|
||||
this.ShowDefaultPresetsCheckbox
|
||||
]]
|
||||
private _presets: AdvancedEqualizerPreset[]
|
||||
public _presets: AdvancedEqualizerPreset[]
|
||||
@Output() presetsChange = new EventEmitter<AdvancedEqualizerPreset[]>()
|
||||
set presets (newPresets: AdvancedEqualizerPreset[]) {
|
||||
this._presets =
|
||||
@ -55,7 +55,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
}
|
||||
get presets () { return this._presets }
|
||||
|
||||
private _selectedPreset: AdvancedEqualizerPreset
|
||||
public _selectedPreset: AdvancedEqualizerPreset
|
||||
@Output() selectedPresetChange = new EventEmitter<AdvancedEqualizerPreset>()
|
||||
set selectedPreset (newSelectedPreset: AdvancedEqualizerPreset) {
|
||||
this._selectedPreset = newSelectedPreset
|
||||
@ -100,10 +100,10 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
}
|
||||
|
||||
constructor (
|
||||
private service: AdvancedEqualizerService,
|
||||
private transition: TransitionService,
|
||||
private change: ChangeDetectorRef,
|
||||
private app: ApplicationService
|
||||
public service: AdvancedEqualizerService,
|
||||
public transition: TransitionService,
|
||||
public change: ChangeDetectorRef,
|
||||
public app: ApplicationService
|
||||
) {
|
||||
super()
|
||||
this.getImportLegacyAvailable()
|
||||
@ -121,7 +121,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
])
|
||||
}
|
||||
|
||||
private async getImportLegacyAvailable () {
|
||||
public async getImportLegacyAvailable () {
|
||||
if (await this.service.getImportLegacyAvailable()) {
|
||||
this.settings[1].push(
|
||||
{
|
||||
@ -138,7 +138,7 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
)
|
||||
}
|
||||
}
|
||||
private async syncPresets () {
|
||||
public async syncPresets () {
|
||||
const [ presets, selectedPreset ] = await Promise.all([
|
||||
this.service.getPresets(),
|
||||
this.service.getSelectedPreset()
|
||||
@ -148,13 +148,13 @@ export class AdvancedEqualizerComponent extends EqualizerComponent implements On
|
||||
this.setSelectedPresetsGains()
|
||||
}
|
||||
|
||||
private async syncSettings () {
|
||||
public async syncSettings () {
|
||||
return Promise.all([
|
||||
this.syncShowDefaultPresets()
|
||||
])
|
||||
}
|
||||
|
||||
private async syncShowDefaultPresets () {
|
||||
public async syncShowDefaultPresets () {
|
||||
this.ShowDefaultPresetsCheckbox.value = await this.service.getShowDefaultPresets()
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div *ngIf="selectedPreset && presets" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="10px">
|
||||
<div fxLayout="row">
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxFill fxLayoutGap="10px" (click)="togglePeakLimiter()">
|
||||
<div fxLayout="row" fxLayoutAlign="center center" style="width: 100%;" fxLayoutGap="10px" (click)="togglePeakLimiter()">
|
||||
<eqm-checkbox [interactive]="false" [checked]="peakLimiter"></eqm-checkbox>
|
||||
<eqm-label>Peak Limiter</eqm-label>
|
||||
<eqm-question
|
||||
@ -17,7 +17,7 @@ Then increase the overall volume to compensate'
|
||||
</div>
|
||||
|
||||
<!-- Knobs -->
|
||||
<div *ngIf="!replaceKnobsWithSliders" class="basic-level-knobs" fxFill fxLayout="row"
|
||||
<div *ngIf="!replaceKnobsWithSliders" class="basic-level-knobs" style="width: 100%;" fxLayout="row"
|
||||
fxLayoutAlign="space-around center">
|
||||
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
|
||||
<eqm-label>BASS</eqm-label>
|
||||
|
||||
@ -24,7 +24,7 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
|
||||
|
||||
replaceKnobsWithSliders = false
|
||||
|
||||
private _presets: BasicEqualizerPreset[]
|
||||
public _presets: BasicEqualizerPreset[]
|
||||
@Output() presetsChange = new EventEmitter<BasicEqualizerPreset[]>()
|
||||
set presets (newPresets: BasicEqualizerPreset[]) {
|
||||
this._presets =
|
||||
@ -37,7 +37,7 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
|
||||
}
|
||||
get presets () { return this._presets }
|
||||
|
||||
private _selectedPreset: BasicEqualizerPreset
|
||||
public _selectedPreset: BasicEqualizerPreset
|
||||
@Output() selectedPresetChange = new EventEmitter<BasicEqualizerPreset>()
|
||||
set selectedPreset (newSelectedPreset: BasicEqualizerPreset) {
|
||||
this._selectedPreset = newSelectedPreset
|
||||
@ -48,11 +48,11 @@ export class BasicEqualizerComponent extends EqualizerComponent implements OnIni
|
||||
settings = []
|
||||
|
||||
constructor (
|
||||
private service: BasicEqualizerService,
|
||||
private app: ApplicationService,
|
||||
private ui: UIService,
|
||||
private change: ChangeDetectorRef,
|
||||
private transition: TransitionService
|
||||
public service: BasicEqualizerService,
|
||||
public app: ApplicationService,
|
||||
public ui: UIService,
|
||||
public change: ChangeDetectorRef,
|
||||
public transition: TransitionService
|
||||
) {
|
||||
super()
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div fxLayout="row" [style.padding.px]="5" fxLayoutAlign="space-between start" fxFill>
|
||||
<div fxLayout="row" [style.padding.px]="5" [style.width.%]="100" fxLayoutAlign="space-between start" >
|
||||
|
||||
<div fxFlex="20" fxLayoutAlign="start center">
|
||||
<eqm-toggle class="on-off" [(state)]="enabled" (stateChange)="setEnabled()"></eqm-toggle>
|
||||
@ -29,7 +29,7 @@
|
||||
<!-- <eqm-icon (click)="toggleVisibility()" [name]="hide ? 'show' : 'hide'"></eqm-icon> -->
|
||||
</div>
|
||||
</div>
|
||||
<div fxFill fxLayout="row">
|
||||
<div [style.width.%]="100" fxLayout="row">
|
||||
<eqm-equalizer-presets
|
||||
[disabled]="!enabled"
|
||||
class="presets"
|
||||
|
||||
@ -28,7 +28,7 @@ export class EqualizersComponent implements OnInit {
|
||||
loaded = false
|
||||
enabled = true
|
||||
hide = false
|
||||
activeEqualizer: EqualizerComponent
|
||||
activeEqualizer: EqualizerComponent = this.getEqualizerFromType('Basic')
|
||||
|
||||
presets: EqualizerPreset[] = []
|
||||
selectedPreset: EqualizerPreset
|
||||
@ -48,11 +48,11 @@ export class EqualizersComponent implements OnInit {
|
||||
this.equalizersService.setType(newType)
|
||||
}
|
||||
|
||||
private settingsDialog: MatDialogRef<OptionsDialogComponent>
|
||||
public settingsDialog: MatDialogRef<OptionsDialogComponent>
|
||||
|
||||
constructor (
|
||||
private equalizersService: EqualizersService,
|
||||
private dialog: MatDialog,
|
||||
public equalizersService: EqualizersService,
|
||||
public dialog: MatDialog,
|
||||
protected ui: UIService
|
||||
) { }
|
||||
|
||||
@ -108,7 +108,7 @@ export class EqualizersComponent implements OnInit {
|
||||
this.ui.dimensionsChanged.next({ heightDiff })
|
||||
}
|
||||
|
||||
private getEqualizerFromType (type: EqualizerType): EqualizerComponent {
|
||||
public getEqualizerFromType (type: EqualizerType): EqualizerComponent {
|
||||
switch (type) {
|
||||
case 'Basic': return this.basicEqualizer
|
||||
case 'Advanced': return this.advancedEqualizer
|
||||
|
||||
@ -23,7 +23,7 @@ export class EqualizerPresetsComponent implements OnInit {
|
||||
@Output() presetDeleted = new EventEmitter()
|
||||
|
||||
constructor (
|
||||
private dialog: MatDialog
|
||||
public dialog: MatDialog
|
||||
) { }
|
||||
|
||||
ngOnInit () {
|
||||
|
||||
@ -22,7 +22,7 @@ export class ReverbComponent implements OnInit {
|
||||
|
||||
@Output() visibilityToggled = new EventEmitter()
|
||||
|
||||
constructor (private reverbService: ReverbService) {}
|
||||
constructor (public reverbService: ReverbService) {}
|
||||
|
||||
ngOnInit () {
|
||||
this.getPresets()
|
||||
|
||||
@ -21,10 +21,10 @@ export class HeaderComponent implements OnInit {
|
||||
@Output() helpToggled = new EventEmitter()
|
||||
// mode: UIMode = 'popover'
|
||||
constructor (
|
||||
private app: ApplicationService,
|
||||
private ui: UIService,
|
||||
private dialog: MatDialog,
|
||||
private settings: SettingsService
|
||||
public app: ApplicationService,
|
||||
public ui: UIService,
|
||||
public dialog: MatDialog,
|
||||
public settings: SettingsService
|
||||
) { }
|
||||
|
||||
async ngOnInit () {
|
||||
|
||||
@ -30,7 +30,7 @@ export class HelpComponent implements OnInit {
|
||||
constructor (
|
||||
public app: ApplicationService,
|
||||
public CONST: ConstantsService,
|
||||
private ui: UIService
|
||||
public ui: UIService
|
||||
) {}
|
||||
|
||||
uiVersion = `${version} (${this.ui.isLocal ? 'Local' : 'Remote'})`
|
||||
|
||||
@ -9,7 +9,7 @@ import { OutputsService, Output } from './outputs.service'
|
||||
export class OutputsComponent implements OnInit {
|
||||
outputs: Output[]
|
||||
selected: Output
|
||||
constructor (private service: OutputsService) { }
|
||||
constructor (public service: OutputsService) { }
|
||||
|
||||
async ngOnInit () {
|
||||
await this.sync()
|
||||
|
||||
@ -93,7 +93,7 @@ export class SettingsComponent implements OnInit {
|
||||
public settingsService: SettingsService,
|
||||
public app: ApplicationService,
|
||||
public dialog: MatDialog,
|
||||
private ui: UIService
|
||||
public ui: UIService
|
||||
) {
|
||||
this.getDriverReinstallAvailable()
|
||||
}
|
||||
|
||||
@ -27,15 +27,15 @@ export class FileComponent implements OnInit, OnDestroy {
|
||||
name: null,
|
||||
duration: 0
|
||||
}
|
||||
private syncedOnce = false
|
||||
private progressProjectionInterval = null
|
||||
private progressSetDebouncer = null
|
||||
public syncedOnce = false
|
||||
public progressProjectionInterval = null
|
||||
public progressSetDebouncer = null
|
||||
selected = false
|
||||
meta: FileMeta = null
|
||||
playing = false
|
||||
progress = 0
|
||||
|
||||
constructor (private fileService: FileService, public utils: UtilitiesService, private app: ApplicationService) {
|
||||
constructor (public fileService: FileService, public utils: UtilitiesService, public app: ApplicationService) {
|
||||
this.setDefaultMeta()
|
||||
}
|
||||
|
||||
@ -50,11 +50,11 @@ export class FileComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private setDefaultMeta () {
|
||||
public setDefaultMeta () {
|
||||
this.meta = this.utils.deepCloneJSON(this.defaultMeta)
|
||||
}
|
||||
|
||||
private setProgressProjection () {
|
||||
public setProgressProjection () {
|
||||
const refreshFPS = 30
|
||||
|
||||
if (this.progressProjectionInterval) {
|
||||
|
||||
@ -14,7 +14,7 @@ export interface InputDevice {
|
||||
})
|
||||
export class InputComponent implements OnInit {
|
||||
|
||||
constructor (private inputService: InputService) { }
|
||||
constructor (public inputService: InputService) { }
|
||||
|
||||
devices: InputDevice[] = []
|
||||
selectedDevice: InputDevice = null
|
||||
|
||||
@ -9,7 +9,7 @@ import { SourceService, SourceType } from './source.service'
|
||||
export class SourceComponent implements OnInit {
|
||||
|
||||
source: SourceType = 'File'
|
||||
constructor (private sourceService: SourceService) { }
|
||||
constructor (public sourceService: SourceService) { }
|
||||
|
||||
ngOnInit () {
|
||||
this.setupEvents()
|
||||
|
||||
@ -19,8 +19,8 @@ export class BalanceComponent implements OnInit {
|
||||
|
||||
constructor (
|
||||
public balanceService: BalanceService,
|
||||
private app: ApplicationService,
|
||||
private ui: UIService
|
||||
public app: ApplicationService,
|
||||
public ui: UIService
|
||||
) { }
|
||||
|
||||
ngOnInit () {
|
||||
|
||||
@ -21,9 +21,9 @@ export class BoosterComponent implements OnInit {
|
||||
|
||||
constructor (
|
||||
public boosterService: BoosterService,
|
||||
private app: ApplicationService,
|
||||
private changeRef: ChangeDetectorRef,
|
||||
private ui: UIService
|
||||
public app: ApplicationService,
|
||||
public changeRef: ChangeDetectorRef,
|
||||
public ui: UIService
|
||||
) {}
|
||||
|
||||
ngOnInit () {
|
||||
@ -38,8 +38,8 @@ export class BoosterComponent implements OnInit {
|
||||
])
|
||||
}
|
||||
|
||||
private ignoreUpdates = false
|
||||
private ignoreUpdatesDebouncer: NodeJS.Timer
|
||||
public ignoreUpdates = false
|
||||
public ignoreUpdatesDebouncer: NodeJS.Timer
|
||||
protected setupEvents () {
|
||||
this.boosterService.onGainChanged(gain => {
|
||||
if (!this.ignoreUpdates) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div *ngIf="!replaceKnobsWithSliders" fxLayout="row" fxFill fxLayoutAlign="space-around stretch">
|
||||
<eqm-booster fxFlex="49%" [hide]="hide"></eqm-booster>
|
||||
<eqm-divider [vertical]="true"></eqm-divider>
|
||||
<eqm-divider orientation="vertical"></eqm-divider>
|
||||
<eqm-balance fxFlex="49%" [hide]="hide"></eqm-balance>
|
||||
</div>
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ export class VolumeBoosterBalanceComponent implements OnInit {
|
||||
replaceKnobsWithSliders = false
|
||||
@Output() visibilityToggled = new EventEmitter()
|
||||
constructor (
|
||||
private ui: UIService
|
||||
public ui: UIService
|
||||
) { }
|
||||
|
||||
async ngOnInit () {
|
||||
|
||||
@ -8,11 +8,11 @@ import { version } from '../../../package.json'
|
||||
})
|
||||
export class AnalyticsService {
|
||||
constructor (
|
||||
private utils: UtilitiesService,
|
||||
private app: ApplicationService
|
||||
public utils: UtilitiesService,
|
||||
public app: ApplicationService
|
||||
) {}
|
||||
|
||||
private async load () {
|
||||
public async load () {
|
||||
await this.utils.waitForProperty(window, 'ga')
|
||||
await this.utils.delay(1000)
|
||||
await this.utils.waitForProperty(ga, 'getAll')
|
||||
|
||||
@ -30,10 +30,10 @@ interface JSBridge {
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class BridgeService {
|
||||
private static bridgeLoadTimeout = 10000
|
||||
private static bridgeLoadPromise: Promise<JSBridge> = null
|
||||
public static bridgeLoadTimeout = 10000
|
||||
public static bridgeLoadPromise: Promise<JSBridge> = null
|
||||
|
||||
private get bridge () {
|
||||
public get bridge () {
|
||||
if (BridgeService.bridgeLoadPromise) {
|
||||
return BridgeService.bridgeLoadPromise
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ import { environment } from '../../environments/environment'
|
||||
})
|
||||
export class CookiesService {
|
||||
constructor (
|
||||
private CONST: ConstantsService
|
||||
public CONST: ConstantsService
|
||||
) {}
|
||||
set (key: string, value: any) {
|
||||
if (typeof value !== 'string') {
|
||||
|
||||
@ -5,7 +5,7 @@ export class Logger {
|
||||
this.console('log', ...something)
|
||||
}
|
||||
|
||||
private static console (func: 'log' , ...something: any[]) {
|
||||
public static console (func: 'log' , ...something: any[]) {
|
||||
if (!environment.production) {
|
||||
console[func](...something)
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
**/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
import 'web-animations-js' // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
|
||||
Loading…
Reference in New Issue
Block a user