Compare commits
17 Commits
V3-branch
...
angular-18
|
|
@ -6,6 +6,7 @@
|
|||
/out-tsc
|
||||
|
||||
# dependencies
|
||||
.angular/
|
||||
/node_modules
|
||||
package-lock.json
|
||||
|
||||
|
|
@ -26,6 +27,7 @@ package-lock.json
|
|||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"aot": true,
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
|
|
@ -31,7 +30,13 @@
|
|||
"node_modules/uikit/dist/js/uikit-icons.min.js",
|
||||
"src/assets/js/ResizeSensor.js",
|
||||
"src/assets/js/jquery.sticky-sidebar.js"
|
||||
]
|
||||
],
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"buildOptimizer": false,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
|
|
@ -45,7 +50,6 @@
|
|||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
|
|
@ -56,23 +60,24 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": ""
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "interactivemining:build"
|
||||
"buildTarget": "interactivemining:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "interactivemining:build:production"
|
||||
"buildTarget": "interactivemining:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "interactivemining:build"
|
||||
"buildTarget": "interactivemining:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
|
|
@ -98,18 +103,6 @@
|
|||
"src/assets"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -124,22 +117,10 @@
|
|||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "interactivemining:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "interactivemining",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
{
|
||||
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
|
||||
"whitelistedNonPeerDependencies": [
|
||||
"."
|
||||
]
|
||||
"allowedNonPeerDependencies": ["."]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,35 +13,34 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^11.2.14",
|
||||
"@angular/common": "^11.2.14",
|
||||
"@angular/compiler": "^11.2.14",
|
||||
"@angular/core": "^11.2.14",
|
||||
"@angular/forms": "^11.2.14",
|
||||
"@angular/localize": "^11.2.14",
|
||||
"@angular/platform-browser": "^11.2.14",
|
||||
"@angular/platform-browser-dynamic": "^11.2.14",
|
||||
"@angular/router": "^11.2.14",
|
||||
"@angular/animations": "^18.1.1",
|
||||
"@angular/common": "^18.1.1",
|
||||
"@angular/compiler": "^18.1.1",
|
||||
"@angular/core": "^18.1.1",
|
||||
"@angular/forms": "^18.1.1",
|
||||
"@angular/localize": "^18.1.1",
|
||||
"@angular/platform-browser": "^18.1.1",
|
||||
"@angular/platform-browser-dynamic": "^18.1.1",
|
||||
"@angular/router": "^18.1.1",
|
||||
"core-js": "^2.4.1",
|
||||
"file-saver": "^2.0.2",
|
||||
"jquery": "^3.4.1",
|
||||
"ng2-nouislider": "^1.8.2",
|
||||
"ngx-pagination": "^3.2.1",
|
||||
"ngx-pagination": "^6.0.3",
|
||||
"nouislider": "^13.1.5",
|
||||
"rxjs": "^6.5.1",
|
||||
"tslib": "^2.0.0",
|
||||
"uikit": "^3.1.5",
|
||||
"zone.js": "~0.10.2"
|
||||
"uikit": "^3.16.24",
|
||||
"zone.js": "~0.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.14",
|
||||
"@angular/cli": "^11.2.14",
|
||||
"@angular/compiler-cli": "^11.2.14",
|
||||
"@angular/language-service": "^11.2.14",
|
||||
"@angular-devkit/build-angular": "^18.1.1",
|
||||
"@angular/cli": "^18.1.1",
|
||||
"@angular/compiler-cli": "^18.1.1",
|
||||
"@angular/language-service": "^18.1.1",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/jasminewd2": "~2.0.6",
|
||||
"@types/node": "^12.11.1",
|
||||
"@types/node": "^16.18.50",
|
||||
"codelyzer": "^6.0.0",
|
||||
"jasmine-core": "~3.8.0",
|
||||
"jasmine-spec-reporter": "~5.0.0",
|
||||
|
|
@ -51,9 +50,9 @@
|
|||
"karma-coverage-istanbul-reporter": "~3.0.2",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "^1.6.0",
|
||||
"ng-packagr": "^11.2.4",
|
||||
"ng-packagr": "^18.1.0",
|
||||
"protractor": "~7.0.0",
|
||||
"ts-node": "~8.2.0",
|
||||
"typescript": "~4.0.7"
|
||||
"typescript": "~5.4.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { SettingsComponent } from './settings/settings.component';
|
|||
import { ResultspreviewComponent } from './resultspreview/resultspreview.component';
|
||||
import {ConfigurationService} from './configuration.service';
|
||||
import {StepsnavbarModule} from '../stepsnvabar/stepsnavbar.module';
|
||||
import { NouisliderModule } from 'ng2-nouislider';
|
||||
import {NouisliderModule} from '../ng2-nouislider/ng2-nouislider.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<span>High<br>recall</span>
|
||||
</div>
|
||||
<div class="uk-width-expand@m">
|
||||
<nouislider [config]="sliderConfig" [(ngModel)]="settings.wordssplitnum" (ngModelChange)="onSliderChange($event)"></nouislider>
|
||||
<nouislider [ngModel]="settings.wordssplitnum" [config]="sliderConfig" (change)="onSliderChange($event)"></nouislider>
|
||||
</div>
|
||||
<div class="uk-width-auto uk-grid-item-match">
|
||||
<span>High<br>precision</span>
|
||||
|
|
@ -121,19 +121,19 @@
|
|||
<p class="uk-text-small">Select among the following text preprocessing steps.</p>
|
||||
<form class="uk-form-stacked">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stopwords===1" (change)="stopwordsCheckBoxChange($event.target.checked)"> Stopword removal <span class="cm-tooltip" uk-icon="icon: info" title="<b>Remove</b> common words (e.g., <b>articles</b> like an, the etc., <b>prepositions</b> like after, to etc.)" uk-tooltip="pos: right"></span></label>
|
||||
<label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stopwords===1" (change)="stopwordsCheckBoxChange($event.target)"> Stopword removal <span class="cm-tooltip" uk-icon="icon: info" title="<b>Remove</b> common words (e.g., <b>articles</b> like an, the etc., <b>prepositions</b> like after, to etc.)" uk-tooltip="pos: right"></span></label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox" [checked]="settings.punctuation===1" (change)="punctuationCheckBoxChange($event.target.checked)"> Punctuation removal</label>
|
||||
<label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox" [checked]="settings.punctuation===1" (change)="punctuationCheckBoxChange($event.target)"> Punctuation removal</label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="all-lowercase-filter"><input id="all-lowercase-filter" class="uk-checkbox" type="checkbox" [checked]="settings.allLowercase===1" (change)="allLowercaseCheckBoxChange($event.target.checked)"> Convert everything to lower case</label>
|
||||
<label class="uk-form-label" for="all-lowercase-filter"><input id="all-lowercase-filter" class="uk-checkbox" type="checkbox" [checked]="settings.allLowercase===1" (change)="allLowercaseCheckBoxChange($event.target)"> Convert everything to lower case</label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="lowercase-filter"><input id="lowercase-filter" class="uk-checkbox" type="checkbox" [checked]="settings.lowercase===1" (change)="lowercaseCheckBoxChange($event.target.checked)"> Convert to lower-case only during evaluation of phrases</label>
|
||||
<label class="uk-form-label" for="lowercase-filter"><input id="lowercase-filter" class="uk-checkbox" type="checkbox" [checked]="settings.lowercase===1" (change)="lowercaseCheckBoxChange($event.target)"> Convert to lower-case only during evaluation of phrases</label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="stemming-filter"><input id="stemming-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stemming===1" (change)="stemmingCheckBoxChange($event.target.checked)"> Word stemming <span class="cm-tooltip" uk-icon="icon: info" title="Stemming is a process of text normalisation, in which the <b>variant forms of a word are reduced to a common form</b>, for <b>example</b>:<br>connection, connections, connective, connected, connecting<br><b>are reduced to connect</b>" uk-tooltip="pos: right"></span></label>
|
||||
<label class="uk-form-label" for="stemming-filter"><input id="stemming-filter" class="uk-checkbox" type="checkbox" [checked]="settings.stemming===1" (change)="stemmingCheckBoxChange($event.target)"> Word stemming <span class="cm-tooltip" uk-icon="icon: info" title="Stemming is a process of text normalisation, in which the <b>variant forms of a word are reduced to a common form</b>, for <b>example</b>:<br>connection, connections, connective, connected, connecting<br><b>are reduced to connect</b>" uk-tooltip="pos: right"></span></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -173,13 +173,13 @@
|
|||
<div class="cm-match-area left">
|
||||
<label class="uk-form-label" for="context-prev-words">Number of words before the match</label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" type="number" name="context-prev-words" min="0" max="50" id="context-prev-words" placeholder="Before match, words" value="20" [value]="settings.contextprev" (change)="contextprevChange($event.target.value)"/>
|
||||
<input class="uk-input" type="number" name="context-prev-words" min="0" max="50" id="context-prev-words" placeholder="Before match, words" value="20" [value]="settings.contextprev" (change)="contextprevChange($event.target)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-match-area right cm-margin-medium-bottom">
|
||||
<label class="uk-form-label" for="context-next-words">Number of words after the match</label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" type="number" name="context-next-words" min="0" max="50" id="context-next-words" placeholder="After match, words" value="10" [value]="settings.contextnext" (change)="contextnextChange($event.target.value)"/>
|
||||
<input class="uk-input" type="number" name="context-next-words" min="0" max="50" id="context-next-words" placeholder="After match, words" value="10" [value]="settings.contextnext" (change)="contextnextChange($event.target)"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {Settings} from './settings';
|
||||
import {Phrase} from './phrase';
|
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||
import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
|
||||
import {ConfigurationService} from '../configuration.service';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
|
||||
|
|
@ -35,12 +35,12 @@ export class SettingsComponent implements OnInit {
|
|||
public positiveSelectedRow = -1;
|
||||
public negativeSelectedRow = -1;
|
||||
|
||||
positivePhraseForm: FormGroup;
|
||||
negativePhraseForm: FormGroup;
|
||||
positivePhraseForm: UntypedFormGroup;
|
||||
negativePhraseForm: UntypedFormGroup;
|
||||
|
||||
public settings: Settings;
|
||||
|
||||
constructor(private formBuilder: FormBuilder,
|
||||
constructor(private formBuilder: UntypedFormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private configurationService: ConfigurationService) {
|
||||
|
|
@ -191,45 +191,47 @@ export class SettingsComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
contextprevChange(value): void {
|
||||
contextprevChange(eventTarget: EventTarget): void {
|
||||
let value = +(eventTarget as HTMLInputElement).value;
|
||||
if (value < 0 || value > 20) {
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('contextprev', value);
|
||||
localStorage.setItem('contextprev', value.toString());
|
||||
this.getSettingsFromLocalStorage();
|
||||
}
|
||||
|
||||
contextnextChange(value): void {
|
||||
contextnextChange(eventTarget: EventTarget): void {
|
||||
let value = +(eventTarget as HTMLInputElement).value;
|
||||
if (value < 0 || value > 20) {
|
||||
return;
|
||||
}
|
||||
localStorage.setItem('contextnext', value);
|
||||
localStorage.setItem('contextnext', value.toString());
|
||||
this.getSettingsFromLocalStorage();
|
||||
}
|
||||
|
||||
stopwordsCheckBoxChange(value: boolean): void {
|
||||
localStorage.setItem('stopwords', value ? '1' : '0');
|
||||
this.settings.stopwords = value ? 1 : 0;
|
||||
stopwordsCheckBoxChange(eventTarget: EventTarget): void {
|
||||
localStorage.setItem('stopwords', (eventTarget as HTMLInputElement).checked ? '1' : '0');
|
||||
this.settings.stopwords = (eventTarget as HTMLInputElement).checked ? 1 : 0;
|
||||
}
|
||||
|
||||
punctuationCheckBoxChange(value: boolean): void {
|
||||
localStorage.setItem('punctuation', value ? '1' : '0');
|
||||
this.settings.punctuation = value ? 1 : 0;
|
||||
punctuationCheckBoxChange(eventTarget: EventTarget): void {
|
||||
localStorage.setItem('punctuation', (eventTarget as HTMLInputElement).checked ? '1' : '0');
|
||||
this.settings.punctuation = (eventTarget as HTMLInputElement).checked ? 1 : 0;
|
||||
}
|
||||
|
||||
allLowercaseCheckBoxChange(value: boolean): void {
|
||||
localStorage.setItem('allLowercase', value ? '1' : '0');
|
||||
this.settings.allLowercase = value ? 1 : 0;
|
||||
allLowercaseCheckBoxChange(eventTarget: EventTarget): void {
|
||||
localStorage.setItem('allLowercase', (eventTarget as HTMLInputElement).checked ? '1' : '0');
|
||||
this.settings.allLowercase = (eventTarget as HTMLInputElement).checked ? 1 : 0;
|
||||
}
|
||||
|
||||
lowercaseCheckBoxChange(value: boolean): void {
|
||||
localStorage.setItem('lowercase', value ? '1' : '0');
|
||||
this.settings.lowercase = value ? 1 : 0;
|
||||
lowercaseCheckBoxChange(eventTarget: EventTarget): void {
|
||||
localStorage.setItem('lowercase', (eventTarget as HTMLInputElement).checked ? '1' : '0');
|
||||
this.settings.lowercase = (eventTarget as HTMLInputElement).checked ? 1 : 0;
|
||||
}
|
||||
|
||||
stemmingCheckBoxChange(value: boolean): void {
|
||||
localStorage.setItem('stemming', value ? '1' : '0');
|
||||
this.settings.stemming = value ? 1 : 0;
|
||||
stemmingCheckBoxChange(eventTarget: EventTarget): void {
|
||||
localStorage.setItem('stemming', (eventTarget as HTMLInputElement).checked ? '1' : '0');
|
||||
this.settings.stemming = (eventTarget as HTMLInputElement).checked ? 1 : 0;
|
||||
}
|
||||
|
||||
documentAreaChange(value: string): void {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div uk-form-custom>
|
||||
<input type="file" name="upload" id="codes-file-input" class="inputfile" (change)="onFilesChange($event.srcElement.files[0])" />
|
||||
<input type="file" name="upload" id="codes-file-input" class="inputfile" (change)="onFilesChange($event.srcElement)" />
|
||||
<button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1">Choose file</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,8 @@ export class ContentComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
onFilesChange(file: File) {
|
||||
onFilesChange(event: File | EventTarget) {
|
||||
let file = (event instanceof File)?event:(<HTMLInputElement>event).files[0];
|
||||
if (file !== null && file !== undefined) {
|
||||
const ext = file.name.split('.')[file.name.split('.').length - 1];
|
||||
const allowedExtensions = ['tsv', 'txt'];
|
||||
|
|
|
|||
|
|
@ -4,17 +4,12 @@ import {ConfigurationModule} from '../configuration/configuration.module';
|
|||
import {ManageprofilesModule} from '../manageprofiles/manageprofiles.module';
|
||||
import {SaveprofileModule} from '../saveprofile/saveprofile.module';
|
||||
import {ContentModule} from '../contents/contents.module';
|
||||
import {HttpClientModule} from '@angular/common/http';
|
||||
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ManageprofilesModule,
|
||||
ContentModule,
|
||||
ConfigurationModule,
|
||||
SaveprofileModule,
|
||||
HttpClientModule
|
||||
]
|
||||
})
|
||||
@NgModule({ imports: [CommonModule,
|
||||
ManageprofilesModule,
|
||||
ContentModule,
|
||||
ConfigurationModule,
|
||||
SaveprofileModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
|
||||
export class InteractiveMiningModule {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot} from '@angular/router';
|
||||
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
|
||||
import { Injectable } from '@angular/core';
|
||||
import {ConfigurationComponent} from '../configuration/configuration.component';
|
||||
import {ContentComponent} from '../contents/contents.component';
|
||||
|
||||
@Injectable()
|
||||
export class SaveProfileGuard implements CanDeactivate<ConfigurationComponent> {
|
||||
export class SaveProfileGuard {
|
||||
|
||||
canDeactivate(component: ConfigurationComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
|
|
@ -16,7 +16,7 @@ export class SaveProfileGuard implements CanDeactivate<ConfigurationComponent> {
|
|||
}
|
||||
|
||||
@Injectable()
|
||||
export class UploadContentGuard implements CanDeactivate<ContentComponent> {
|
||||
export class UploadContentGuard {
|
||||
|
||||
canDeactivate(component: ContentComponent,
|
||||
currentRoute: ActivatedRouteSnapshot,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,304 @@
|
|||
import * as noUiSlider from 'nouislider';
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
forwardRef,
|
||||
Input,
|
||||
OnInit,
|
||||
OnChanges,
|
||||
Output,
|
||||
Renderer2,
|
||||
NgZone,
|
||||
OnDestroy
|
||||
} from '@angular/core';
|
||||
import {
|
||||
ControlValueAccessor,
|
||||
FormControl,
|
||||
NG_VALUE_ACCESSOR
|
||||
} from '@angular/forms';
|
||||
|
||||
export interface NouiFormatter {
|
||||
to(value: number): string;
|
||||
from(value: string): number;
|
||||
}
|
||||
|
||||
export class DefaultFormatter implements NouiFormatter {
|
||||
to(value: number): string {
|
||||
// formatting with http://stackoverflow.com/a/26463364/478584
|
||||
return String(parseFloat(parseFloat(String(value)).toFixed(2)));
|
||||
};
|
||||
|
||||
from(value: string): number {
|
||||
return parseFloat(value);
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'nouislider',
|
||||
host: {
|
||||
'[class.ng2-nouislider]': 'true'
|
||||
},
|
||||
template: '<div [attr.disabled]="disabled ? true : undefined"></div>',
|
||||
styles: [`
|
||||
:host {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
`],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => NouisliderComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class NouisliderComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
|
||||
|
||||
public slider: any;
|
||||
public handles: any[];
|
||||
@Input() public disabled: boolean; // tslint:disable-line
|
||||
@Input() public behaviour: string;
|
||||
@Input() public connect: boolean[];
|
||||
@Input() public limit: number;
|
||||
@Input() public min: number;
|
||||
@Input() public max: number;
|
||||
@Input() public snap: boolean;
|
||||
@Input() public animate: boolean | boolean[];
|
||||
@Input() public range: any;
|
||||
@Input() public step: number;
|
||||
@Input() public format: NouiFormatter;
|
||||
@Input() public pageSteps: number;
|
||||
@Input() public config: any = {};
|
||||
@Input() public ngModel: number | number[];
|
||||
@Input() public keyboard: boolean;
|
||||
@Input() public onKeydown: any;
|
||||
@Input() public formControl: FormControl;
|
||||
@Input() public tooltips: Array<any>;
|
||||
@Output() public change: EventEmitter<any> = new EventEmitter(true);
|
||||
@Output() public update: EventEmitter<any> = new EventEmitter(true);
|
||||
@Output() public slide: EventEmitter<any> = new EventEmitter(true);
|
||||
@Output() public set: EventEmitter<any> = new EventEmitter(true);
|
||||
@Output() public start: EventEmitter<any> = new EventEmitter(true);
|
||||
@Output() public end: EventEmitter<any> = new EventEmitter(true);
|
||||
private value: any;
|
||||
private onChange: any = Function.prototype;
|
||||
private cleanups: VoidFunction[] = [];
|
||||
|
||||
constructor(private ngZone: NgZone, private el: ElementRef, private renderer : Renderer2) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
let inputsConfig = JSON.parse(
|
||||
JSON.stringify({
|
||||
behaviour: this.behaviour,
|
||||
connect: this.connect,
|
||||
limit: this.limit,
|
||||
start: this.formControl !== undefined ? this.formControl.value : this.ngModel,
|
||||
step: this.step,
|
||||
pageSteps: this.pageSteps,
|
||||
keyboard: this.keyboard,
|
||||
onKeydown: this.onKeydown,
|
||||
range: this.range || this.config.range || { min: this.min, max: this.max },
|
||||
tooltips: this.tooltips,
|
||||
snap: this.snap,
|
||||
animate: this.animate,
|
||||
}),
|
||||
);
|
||||
inputsConfig.tooltips = this.tooltips || this.config.tooltips;
|
||||
inputsConfig.format = this.format || this.config.format || new DefaultFormatter();
|
||||
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this.slider = noUiSlider.create(
|
||||
this.el.nativeElement.querySelector('div'),
|
||||
Object.assign(this.config, inputsConfig)
|
||||
);
|
||||
});
|
||||
|
||||
this.handles = [].slice.call(this.el.nativeElement.querySelectorAll('.noUi-handle'));
|
||||
|
||||
if (this.config.keyboard) {
|
||||
if (this.config.pageSteps === undefined) {
|
||||
this.config.pageSteps = 10;
|
||||
}
|
||||
|
||||
for (const handle of this.handles) {
|
||||
handle.setAttribute('tabindex', 0);
|
||||
|
||||
const onKeydown = this.config.onKeydown || this.defaultKeyHandler;
|
||||
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
this.cleanups.push(
|
||||
this.renderer.listen(handle, 'keydown', onKeydown),
|
||||
this.renderer.listen(handle, 'click', () => {
|
||||
handle.focus();
|
||||
}),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.slider.on('set', (values: string[], handle: number, unencoded: number[]) => {
|
||||
this.eventHandler(this.set, values, handle, unencoded);
|
||||
});
|
||||
|
||||
this.slider.on('update', (values: string[], handle: number, unencoded: number[]) => {
|
||||
if (this.update.observers.length > 0) {
|
||||
this.ngZone.run(() => {
|
||||
this.update.emit(this.toValues(values));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.slider.on('change', (values: string[], handle: number, unencoded: number[]) => {
|
||||
if (this.change.observers.length > 0) {
|
||||
this.ngZone.run(() => {
|
||||
this.change.emit(this.toValues(values));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.slider.on('slide', (values: string[], handle: number, unencoded: number[]) => {
|
||||
this.eventHandler(this.slide, values, handle, unencoded);
|
||||
});
|
||||
|
||||
this.slider.on('start', (values: string[], handle: number, unencoded: number[]) => {
|
||||
if (this.start.observers.length > 0) {
|
||||
this.ngZone.run(() => {
|
||||
this.start.emit(this.toValues(values));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.slider.on('end', (values: string[], handle: number, unencoded: number[]) => {
|
||||
if (this.end.observers.length > 0) {
|
||||
this.ngZone.run(() => {
|
||||
this.end.emit(this.toValues(values));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(changes: any) {
|
||||
if (this.slider && (changes.min || changes.max || changes.step || changes.range)) {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
setTimeout(() => {
|
||||
this.slider.updateOptions({
|
||||
range: Object.assign({}, {
|
||||
min: this.min,
|
||||
max: this.max
|
||||
}, this.range || {}),
|
||||
step: this.step
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.slider.destroy();
|
||||
|
||||
while (this.cleanups.length) {
|
||||
this.cleanups.pop()();
|
||||
}
|
||||
}
|
||||
|
||||
toValues(values: string[]): any | any[] {
|
||||
let v = values.map(this.config.format.from);
|
||||
return (v.length == 1 ? v[0] : v);
|
||||
}
|
||||
|
||||
writeValue(value: any): void {
|
||||
if (this.slider) {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
setTimeout(() => {
|
||||
this.slider.set(value);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
registerOnChange(fn: (value: any) => void) {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => {}): void {}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
isDisabled
|
||||
? this.renderer.setAttribute(this.el.nativeElement.childNodes[0], 'disabled', 'true')
|
||||
: this.renderer.removeAttribute(this.el.nativeElement.childNodes[0], 'disabled');
|
||||
}
|
||||
|
||||
private eventHandler = (emitter: EventEmitter<any>, values: string[], handle: number, unencoded: number[]) => {
|
||||
let v = this.toValues(values);
|
||||
let emitEvents = false;
|
||||
if(this.value === undefined) {
|
||||
this.value = v;
|
||||
return;
|
||||
}
|
||||
if(Array.isArray(v) && this.value[handle] != v[handle]) {
|
||||
emitEvents = true;
|
||||
}
|
||||
if(!Array.isArray(v) && this.value != v) {
|
||||
emitEvents = true;
|
||||
}
|
||||
if(emitEvents) {
|
||||
this.ngZone.run(() => {
|
||||
if (emitter.observers.length > 0) {
|
||||
emitter.emit(v);
|
||||
}
|
||||
this.onChange(v);
|
||||
});
|
||||
}
|
||||
if(Array.isArray(v)) {
|
||||
this.value[handle] = v[handle];
|
||||
} else {
|
||||
this.value = v;
|
||||
}
|
||||
}
|
||||
|
||||
private defaultKeyHandler = (e: KeyboardEvent) => {
|
||||
let stepSize: any[] = this.slider.steps();
|
||||
let index = parseInt((<HTMLElement>e.target).getAttribute('data-handle'));
|
||||
let sign = 1;
|
||||
let multiplier: number = 1;
|
||||
let step = 0;
|
||||
let delta = 0;
|
||||
|
||||
switch ( e.which ) {
|
||||
case 34: // PageDown
|
||||
multiplier = this.config.pageSteps;
|
||||
case 40: // ArrowDown
|
||||
case 37: // ArrowLeft
|
||||
sign = -1;
|
||||
step = stepSize[index][0];
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
case 33: // PageUp
|
||||
multiplier = this.config.pageSteps;
|
||||
case 38: // ArrowUp
|
||||
case 39: // ArrowRight
|
||||
step = stepSize[index][1];
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
delta = sign * multiplier * step;
|
||||
let newValue: number | number[];
|
||||
|
||||
if(Array.isArray(this.value)) {
|
||||
newValue = [].concat(this.value);
|
||||
newValue[index] = newValue[index] + delta;
|
||||
} else {
|
||||
newValue = this.value + delta;
|
||||
}
|
||||
|
||||
this.slider.set(newValue);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import {NgModule} from "@angular/core";
|
||||
import {NouisliderComponent} from "./ng2-nouislider.component";
|
||||
|
||||
@NgModule({
|
||||
exports: [NouisliderComponent],
|
||||
declarations: [NouisliderComponent],
|
||||
})
|
||||
export class NouisliderModule { }
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
.uk-slider{-webkit-tap-highlight-color:transparent;}.uk-slider-container{overflow:hidden;}.uk-slider-items{will-change:transform;position:relative}.uk-slider-items:not(.uk-grid){display:flex;margin:0;padding:0;list-style:none;-webkit-touch-callout:none}.uk-slider-items.uk-grid{flex-wrap:nowrap;}.uk-slider-items>*{flex:none;position:relative;touch-action:pan-y}
|
||||
|
||||
/*NoUiSlider CSS*/
|
||||
/*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;-webkit-transform-origin:0 0;transform-origin:0 0}html:not([dir=rtl]) .noUi-horizontal .noUi-origin{left:auto;right:0}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{position:absolute}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}html:not([dir=rtl]) .noUi-horizontal .noUi-handle{right:-17px;left:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%,0);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}
|
||||
/*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;left:0;height:100%;width:100%;-webkit-transform-origin:0 0;transform-origin:0 0} .noUi-horizontal .noUi-origin{left:auto;right:0}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{position:absolute}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px} .noUi-horizontal .noUi-handle{right:-17px;left:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%,0);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}
|
||||
/* Custom controls
|
||||
========================================================================== */
|
||||
/*
|
||||
|
|
@ -684,7 +684,8 @@
|
|||
.noUi-marker-horizontal.noUi-marker {
|
||||
width: 1px;
|
||||
}
|
||||
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
|
||||
|
||||
.noUi-horizontal .noUi-handle {
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,25 +38,15 @@ import '@angular/localize/init';
|
|||
// import 'core-js/es6/weak-map';
|
||||
// import 'core-js/es6/set';
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** Evergreen browsers require these. **/
|
||||
import 'core-js/es6/reflect';
|
||||
|
||||
|
||||
/**
|
||||
* Required to support Web Animations `@angular/animation`.
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import {
|
|||
|
||||
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
|
||||
declare const __karma__: any;
|
||||
declare const require: any;
|
||||
|
||||
// Prevent Karma from running prematurely.
|
||||
__karma__.loaded = function () {};
|
||||
|
|
@ -22,11 +21,9 @@ __karma__.loaded = function () {};
|
|||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
platformBrowserDynamicTesting(), {
|
||||
teardown: { destroyAfterEach: false }
|
||||
}
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
// Finally, start Karma to run the tests.
|
||||
__karma__.start();
|
||||
|
|
|
|||
|
|
@ -7,9 +7,8 @@
|
|||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"target": "es2015",
|
||||
"target": "ES2022",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
|
|
@ -18,6 +17,7 @@
|
|||
"dom"
|
||||
],
|
||||
"module": "es2020",
|
||||
"baseUrl": "./"
|
||||
"baseUrl": "./",
|
||||
"useDefineForClassFields": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue