Skip to content

L
luna
Commit ed215200 authored by ibuler's avatar ibuler
Browse files
Options

[Update] 升级到angular 7

parent 1dae1b73
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 426 additions and 175 deletions
.angular-cli.json deleted 100644 → 0
View file @ 1dae1b73
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "WebTerminal"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"static",
"theme/default/",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/animate.css/animate.min.css",
"../node_modules/xterm/dist/xterm.css",
"sass/style.scss",
"styles.css",
"assets/ztree/awesomeStyle/awesome.css"
],
"comment": [
"../node_modules/jquery-sparkline/jquery.sparkline.js",
"../node_modules/metismenu/dist/metisMenu.js",
"assets/slimscroll/jquery.slimscroll.min.js",
"../node_modules/tether/dist/js/tether.min.js"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/xterm/dist/xterm.js",
"assets/ztree/jquery.ztree.all.min.js",
"assets/ztree/jquery.ztree.exhide.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
angular.json 0 → 100644
View file @ ed215200
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"WebTerminal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/static",
"src/theme/default",
"src/favicon.ico"
],
"styles": [
"node_modules/animate.css/animate.min.css",
"node_modules/xterm/dist/xterm.css",
"src/sass/style.scss",
"src/styles.css",
"src/assets/ztree/awesomeStyle/awesome.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/xterm/dist/xterm.js",
"src/assets/ztree/jquery.ztree.all.min.js",
"src/assets/ztree/jquery.ztree.exhide.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "WebTerminal:build"
},
"configurations": {
"production": {
"browserTarget": "WebTerminal:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "WebTerminal:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/xterm/dist/xterm.js",
"src/assets/ztree/jquery.ztree.all.min.js",
"src/assets/ztree/jquery.ztree.exhide.min.js"
],
"styles": [
"node_modules/animate.css/animate.min.css",
"node_modules/xterm/dist/xterm.css",
"src/sass/style.scss",
"src/styles.css",
"src/assets/ztree/awesomeStyle/awesome.css"
],
"assets": [
"src/assets",
"src/static",
"src/theme/default",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"WebTerminal-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "WebTerminal:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "WebTerminal",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
\ No newline at end of file
karma.conf.js
View file @ ed215200
...@@ -4,24 +4,22 @@ ...@@ -4,24 +4,22 @@
module.exports = function (config) { module.exports = function (config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular/cli'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [ plugins: [
require('karma-jasmine'), require('karma-jasmine'),
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma') require('@angular-devkit/build-angular/plugins/karma')
], ],
client:{ client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ], dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true
}, },
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
colors: true, colors: true,
......
package-lock.json
View file @ ed215200
This diff is collapsed.
package.json
View file @ ed215200
...@@ -5,15 +5,14 @@ ...@@ -5,15 +5,14 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0", "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
"build": "ng build --environment prod --aot --prod --base-href=/luna/ --deploy '/luna/'", "build": "ng build --prod --base-href=/luna/ --output-path 'luna'",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"private": true, "private": true,
"other": { "abandon": {
"@swimlane/ngx-datatable": "^11.3.2", "@swimlane/ngx-datatable": "^11.3.2",
"ajv": "^6.5.0",
"body-parser": "^1.18.2", "body-parser": "^1.18.2",
"clipboard": "^1.7.1", "clipboard": "^1.7.1",
"compass-mixins": "^0.12.10", "compass-mixins": "^0.12.10",
...@@ -35,67 +34,65 @@ ...@@ -35,67 +34,65 @@
"sass-math": "^1.0.0", "sass-math": "^1.0.0",
"tether": "^1.4.4", "tether": "^1.4.4",
"npm-font-open-sans": "^1.1.0", "npm-font-open-sans": "^1.1.0",
"@swimlane/ngx-ui": "^25.11.0",
"utf-8-validate": "^5.0.2" "utf-8-validate": "^5.0.2"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "^5.2.11", "@angular/animations": "~7.2.0",
"@angular/cdk": "^5.2.4", "@angular/cdk": "^7.3.7",
"@angular/common": "^5.2.11", "@angular/common": "~7.2.0",
"@angular/compiler": "^5.2.11", "@angular/compiler": "~7.2.0",
"@angular/core": "^5.2.11", "@angular/core": "~7.2.0",
"@angular/flex-layout": "^5.0.0-beta.15", "@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^5.2.11", "@angular/forms": "~7.2.0",
"@angular/http": "^5.2.11", "@angular/http": "^7.2.15",
"@angular/material": "^5.2.0", "@angular/material": "^7.3.7",
"@angular/platform-browser": "^5.2.11", "@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "^5.2.11", "@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "^5.2.11", "@angular/router": "~7.2.0",
"@swimlane/ngx-ui": "^20.2.1",
"@types/jquery": "^3.3.6", "@types/jquery": "^3.3.6",
"@types/neffos.js": "^0.1.1", "@types/neffos.js": "^0.1.1",
"@types/socket.io-client": "^1.4.32", "ajv": "^6.5.0",
"rxjs": "5.5.6", "animate.css": "^3.6.1",
"zone.js": "0.8.20",
"uuid-js": "^0.7.5",
"xterm": "3.3.0",
"socket.io": "^1.4.32",
"socket.io-client": "^1.4.32",
"core-js": "2.5.3",
"neffos.js": "^0.1.19",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"popper.js": "^1.14.7", "codemirror": "^5.42.0",
"jquery": "^3.4.1", "core-js": "^2.5.4",
"font-awesome": "4.7.0",
"guacamole-common-js": "0.9.14-b", "guacamole-common-js": "0.9.14-b",
"ngx-cookie-service": "^1.0.10", "jquery": "^3.4.1",
"metismenu": "^2.7.9", "metismenu": "^2.7.9",
"ngx-logger": "^2.2.4", "neffos.js": "^0.1.19",
"animate.css": "^3.6.1", "ngx-cookie-service": "^1.0.10",
"tslib": "^1.9.0", "ngx-logger": "4.0.4",
"requirejs": "^2.3.5",
"ngx-progressbar": "^2.1.1", "ngx-progressbar": "^2.1.1",
"font-awesome": "4.7.0" "popper.js": "^1.14.7",
"requirejs": "^2.3.5",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.9.0",
"uuid-js": "^0.7.5",
"xterm": "3.3.0",
"zone.js": "~0.8.26"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/core": "^0.3.2", "@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/schematics": "^0.3.2", "@angular/cli": "~7.3.9",
"@angular/cli": "^1.7.4", "@angular/compiler-cli": "~7.2.0",
"@angular/compiler-cli": "^5.2.11", "@angular/language-service": "~7.2.0",
"@angular/language-service": "5.2.0", "@types/node": "~8.9.4",
"@types/jasmine": "2.8.4", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.2", "@types/jasminewd2": "~2.0.3",
"codelyzer": "4.0.2", "codelyzer": "~4.5.0",
"jasmine-core": "2.8.0", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "2.0.0", "karma": "~4.0.0",
"karma-chrome-launcher": "2.2.0", "karma-chrome-launcher": "~2.2.0",
"karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "~2.0.1",
"karma-coverage-istanbul-reporter": "1.3.3", "karma-jasmine": "~1.1.2",
"karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "^0.2.2",
"karma-jasmine-html-reporter": "0.2.2", "protractor": "~5.4.0",
"node-sass": "^4.11.0", "ts-node": "~7.0.0",
"protractor": "^5.4.2", "tslint": "~5.11.0",
"ts-node": "3.3.0", "typescript": "~3.2.2"
"tslint": "5.9.1",
"typescript": "2.6.2"
} }
} }
src/app/app.service.ts
View file @ ed215200
import {EventEmitter, Injectable, OnInit} from '@angular/core'; import {EventEmitter, Injectable, OnInit} from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {CookieService} from 'ngx-cookie-service'; import {CookieService} from 'ngx-cookie-service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {DataStore, User, Browser, i18n} from './globals'; import {DataStore, User, Browser, i18n} from './globals';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http'; import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {NGXLogger} from 'ngx-logger'; import {NGXLogger} from 'ngx-logger';
......
src/app/elements/asset-tree/asset-tree.component.ts
View file @ ed215200
import {Component, Input, OnInit, OnDestroy, ElementRef, ViewChild} from '@angular/core'; import {Component, Input, OnInit, OnDestroy, ElementRef, ViewChild} from '@angular/core';
import {MatDialog} from '@angular/material'; import {MatDialog} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {BehaviorSubject} from 'rxjs';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/app.service'; import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/app.service';
......
src/app/elements/content/content.component.scss
View file @ ed215200
...@@ -41,6 +41,10 @@ ...@@ -41,6 +41,10 @@
padding: 0 5px; padding: 0 5px;
} }
.scroll-button .right {
padding-left: 5px;
}
.scroll-button a.disabled { .scroll-button a.disabled {
color: #676A6D; color: #676A6D;
cursor: not-allowed; cursor: not-allowed;
......
src/app/elements/left-bar/left-bar.component.html
View file @ ed215200
<div class="sidebar" fxLayout="column" > <div class="sidebar" fxLayout="column" >
<div fxflex="1 1 30px" class="tree-filter"> <div fxflex="30px" class="tree-filter">
<elements-tree-filter ></elements-tree-filter> <elements-tree-filter ></elements-tree-filter>
</div> </div>
<div class="overflow ngx-scroll-overlay" fxflex="1 1 calc(100% - 60px)"> <div fxflex="calc(100% - 60px)" class="overflow ngx-scroll-overlay">
<elements-asset-tree ></elements-asset-tree> <elements-asset-tree ></elements-asset-tree>
</div> </div>
<div class="footer-version" fxflex="1 1 30px"> <div fxflex="30px" class="footer-version">
<p> Version <strong>{{version}}</strong></p> <p> Version <strong>{{version}}</strong></p>
</div> </div>
</div> </div>
src/app/elements/term/term.component.ts
View file @ ed215200
...@@ -3,11 +3,10 @@ import {ElementRef} from '@angular/core'; ...@@ -3,11 +3,10 @@ import {ElementRef} from '@angular/core';
import {Terminal} from 'xterm'; import {Terminal} from 'xterm';
import {fit} from 'xterm/lib/addons/fit/fit'; import {fit} from 'xterm/lib/addons/fit/fit';
import {LogService} from '@app/app.service'; import {LogService} from '@app/app.service';
import {Observable} from 'rxjs/Rx'; import {Observable, fromEvent} from 'rxjs';
import {debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as $ from 'jquery/dist/jquery.min.js'; import * as $ from 'jquery/dist/jquery.min.js';
import 'rxjs/Observable'; import 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({ @Component({
...@@ -27,9 +26,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit { ...@@ -27,9 +26,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
} }
ngOnInit() { ngOnInit() {
this.winSizeChange$ = Observable.fromEvent(window, 'resize') this.winSizeChange$ = fromEvent(window, 'resize').pipe(
.debounceTime(500) debounceTime(500),
.distinctUntilChanged(); distinctUntilChanged(),
);
this.winSizeChange$ this.winSizeChange$
.subscribe(() => { .subscribe(() => {
...@@ -45,7 +45,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit { ...@@ -45,7 +45,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
getWinSize() { getWinSize() {
let availableHeight = 0; let availableHeight = 0;
let availableWidth = 0; let availableWidth = 0;
if (document.fullscreenElement) { if (document['fullscreenElement']) {
availableWidth = document.body.clientWidth - 10; availableWidth = document.body.clientWidth - 10;
availableHeight = document.body.clientHeight; availableHeight = document.body.clientHeight;
} else { } else {
......
src/app/globals.ts
View file @ ed215200
'use strict'; 'use strict';
import {EventEmitter} from 'events/events'; import {EventEmitter} from 'events/events';
import * as io from 'socket.io-client';
import {Socket} from './utils/socket'; import {Socket} from './utils/socket';
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {BehaviorSubject} from 'rxjs';
import {ConnectEvt, User as _User } from './model'; import {ConnectEvt, User as _User } from './model';
import {DataStore as _DataStore, Browser as _Browser, Video as _Video, Monitor as _Monitor} from './model'; import {DataStore as _DataStore, Browser as _Browser, Video as _Video, Monitor as _Monitor} from './model';
...@@ -43,7 +42,6 @@ export async function getWsSocket() { ...@@ -43,7 +42,6 @@ export async function getWsSocket() {
const nsConn = await TermWS.connect(); const nsConn = await TermWS.connect();
if (!nsConn) { if (!nsConn) {
console.log('Try to using socket.io protocol'); console.log('Try to using socket.io protocol');
TermWS = io.connect('/ssh', {reconnectionAttempts: 10});
} }
DataStore.socket = TermWS; DataStore.socket = TermWS;
return TermWS; return TermWS;
......
src/app/pages/main/main.component.css
View file @ ed215200
#container {
height: calc(100% - 30px);
width: 100%;
padding: 0;
margin: 0;
background-color: #1f1b1b;
}
.content { .content {
height: 100%; height: 100%;
width: 100%;
padding: 0; padding: 0;
background-color: #1f1b1b; background-color: #1f1b1b;
/*background-color: red;*/ /*background-color: red;*/
margin: 0; margin: 0;
position: initial; position: initial;
min-width: 100px;
} }
/*.content {*/ /*.content {*/
/*overflow: hidden !important;*/ /*overflow: hidden !important;*/
/*}*/ /*}*/
elements-nav { .left-side {
height: 30px; min-width: 100px;
} }
#container { .handle {
outline: none;
-webkit-user-select: none;
user-select: none;
z-index: 9999;
height: 5px;
width: 1px;
display: block;
padding: 0; padding: 0;
margin: 0; margin: 0;
height: calc(100% - 30px); position: relative;
line-height: 0;
}
.handle-row {
top: 50%;
left: -8px;
transform: translateX(-50%) rotate(270deg);
cursor: col-resize;;
}
elements-nav {
height: 30px;
} }
/*.container-fluid {*/ /*.container-fluid {*/
/*padding-top: 30px;*/ /*padding-top: 30px;*/
/*}*/ /*}*/
src/app/pages/main/main.component.html
View file @ ed215200
<elements-nav></elements-nav> <elements-nav></elements-nav>
<div fxLayout="row wrap" id="container" class="container-fluid row" ngxSplit="row"> <div fxLayout="row" id="container" ngxSplit="row">
<div fxFlex="1 1 20%" minBasis="100px" maxBasis="800px" fxFlexFill ngxSplitArea *ngIf="DataStore.showLeftBar"> <div fxFlex="20%" fxFlexFill maxBasis="400px" minBasis="100px" ngxSplitArea *ngIf="DataStore.showLeftBar" class="left-side">
<elements-left-bar></elements-left-bar> <elements-left-bar></elements-left-bar>
</div> </div>
<div fxFlex="0" ngxSplitHandle (mouseup)="dragSplitBtn($event)"></div> <div ngxSplitHandle (mouseup)="dragSplitBtn($event)" class="handle handle-row" *ngIf="DataStore.showLeftBar" >
<div [fxFlex]="DataStore.showLeftBar ? '1 1 80%' : '1 1 100%'" ngxSplitArea class="content"> <i class="fa fa-window-minimize" style="color: white"></i>
</div>
<div [fxFlex]="DataStore.showLeftBar ? '80%' : '100%'" fxFlexFill ngxSplitArea class="content">
<elements-content></elements-content> <elements-content></elements-content>
</div> </div>
</div> </div>
src/app/plugins/MaterialModule.component.ts
View file @ ed215200
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
// MatAutocompleteModule, // MatAutocompleteModule,
MatButtonModule, MatButtonModule,
// MatButtonToggleModule, // MatButtonToggleModule,
// MatCardModule, MatCardModule,
// MatCheckboxModule, // MatCheckboxModule,
MatChipsModule, MatChipsModule,
// MatDatepickerModule, // MatDatepickerModule,
...@@ -40,7 +40,7 @@ import {CdkTableModule} from '@angular/cdk/table'; ...@@ -40,7 +40,7 @@ import {CdkTableModule} from '@angular/cdk/table';
// MatAutocompleteModule, // MatAutocompleteModule,
MatButtonModule, MatButtonModule,
// MatButtonToggleModule, // MatButtonToggleModule,
// MatCardModule, MatCardModule,
// MatCheckboxModule, // MatCheckboxModule,
MatChipsModule, MatChipsModule,
// MatStepperModule, // MatStepperModule,
......
src/app/plugins/plugins.ts
View file @ ed215200
import {MaterialModule} from './MaterialModule.component'; import {MaterialModule} from './MaterialModule.component';
import {NgxUIModule, SplitModule} from '@swimlane/ngx-ui'; // import {SplitModule, NgxUIModule} from '@swimlane/ngx-ui';
import {SplitModule} from '@app/plugins/split/split.module';
import {FlexLayoutModule} from '@angular/flex-layout';
import {LoggerModule, NgxLoggerLevel} from 'ngx-logger'; import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgProgressModule} from 'ngx-progressbar'; import {NgProgressModule} from 'ngx-progressbar';
// import {FlexLayoutModule} from '@angular/flex-layout';
export const PluginModules = [ export const PluginModules = [
BrowserAnimationsModule, BrowserAnimationsModule,
NgProgressModule, NgProgressModule,
MaterialModule, MaterialModule,
// FlexLayoutModule,
LoggerModule.forRoot({level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}), LoggerModule.forRoot({level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
NgxUIModule, SplitModule FlexLayoutModule,
SplitModule,
// NgxUIModule,
]; ];
src/app/plugins/split/split-area.directive.ts 0 → 100644
View file @ ed215200
import {Directive, Optional, Self} from '@angular/core';
import {DefaultFlexDirective} from '@angular/flex-layout';
@Directive({
selector: '[ngxSplitArea]',
host: {
style: 'overflow: auto;'
}
})
export class SplitAreaDirective {
constructor(@Optional() @Self() public flex: DefaultFlexDirective) {}
}
src/app/plugins/split/split-handle.directive.ts 0 → 100644
View file @ ed215200
import {Directive, ElementRef, Inject, Output} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {fromEvent, Observable} from 'rxjs';
import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators';
@Directive({
selector: '[ngxSplitHandle]',
host: {
class: 'ngx-split-handle',
title: 'Drag to resize'
}
})
export class SplitHandleDirective {
@Output() drag: Observable<{ x: number, y: number }>;
constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
let last = {x: 0, y: 0};
const scanPositionDelta = (event: MouseEvent) => {
const current = {x: event.screenX, y: event.screenY};
const delta = {x: current.x - last.x, y: current.y - last.y};
last = current;
return delta;
};
const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(scanPositionDelta));
const mousemove$ = fromEvent(window, 'mousemove').pipe(
throttleTime(50),
map(scanPositionDelta)
);
const mouseup$ = fromEvent(window, 'mouseup');
this.drag = mousedown$.pipe(switchMap(() => mousemove$.pipe(takeUntil(mouseup$))));
}
}
src/app/plugins/split/split.directive.ts 0 → 100644
View file @ ed215200
import {
AfterContentInit,
ContentChild,
ContentChildren,
Directive,
ElementRef,
Input,
OnDestroy,
QueryList,
} from '@angular/core';
import {FlexDirective} from '@angular/flex-layout';
import {Subscription} from 'rxjs';
import {SplitHandleDirective} from './split-handle.directive';
import {SplitAreaDirective} from './split-area.directive';
@Directive({
selector: '[ngxSplit]',
host: {
class: 'ngx-split'
}
})
export class SplitDirective implements AfterContentInit, OnDestroy {
@Input('ngxSplit') direction = 'row';
@ContentChild(SplitHandleDirective) handle: SplitHandleDirective;
@ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
private watcher: Subscription;
constructor(private elementRef: ElementRef) {}
ngAfterContentInit(): void {
this.watcher = this.handle.drag.subscribe(this.onDrag.bind(this));
}
ngOnDestroy() {
this.watcher.unsubscribe();
}
/**
* While dragging, continually update the `flex.activatedValue` for each area
* managed by the splitter.
*/
onDrag({x, y}: {x: number, y: number}): void {
const dragAmount = (this.direction === 'row') ? x : y;
this.areas.forEach((area, i) => {
// get the cur flex and the % in px
const flex = (area.flex as FlexDirective);
const delta = (i === 0) ? dragAmount : -dragAmount;
const currentValue = flex.activatedValue;
// Update Flex-Layout value to build/inject new flexbox CSS
flex.activatedValue = `${this.calculateSize(currentValue, delta)}`;
});
}
/**
* Use the pixel delta change to recalculate the area size (%)
* Note: flex value may be '', %, px, or '<grow> <shrink> <basis>'
*/
calculateSize(value: string, delta: number): number {
const containerSizePx = this.elementRef.nativeElement.clientWidth;
const elementSizePx = Math.round(valueToPixel(value, containerSizePx));
const elementSize = ((elementSizePx + delta) / containerSizePx) * 100;
return Math.round(elementSize * 100) / 100;
}
}
/** Convert the pixel or percentage value to a raw pixel float value */
function valueToPixel(value: string, parentWidth: number): number {
const size = parseFloat(value);
return !value.includes('px') ? parentWidth * (size / 100) : size;
}
src/app/plugins/split/split.module.ts 0 → 100644
View file @ ed215200
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FlexLayoutModule} from '@angular/flex-layout';
import {SplitDirective} from './split.directive';
import {SplitAreaDirective} from './split-area.directive';
import {SplitHandleDirective} from './split-handle.directive';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
],
declarations: [SplitDirective, SplitAreaDirective, SplitHandleDirective],
exports: [SplitDirective, SplitAreaDirective, SplitHandleDirective]
})
export class SplitModule {}
src/tsconfig.spec.json
View file @ ed215200
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
] ]
}, },
"files": [ "files": [
"test.ts" "test.ts",
"polyfills.ts"
], ],
"include": [ "include": [
"**/*.spec.ts", "**/*.spec.ts",
......
tsconfig.json
View file @ ed215200
...@@ -3,8 +3,12 @@ ...@@ -3,8 +3,12 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": "src", "baseUrl": "src",
"paths": { "paths": {
"@src/*": ["*"], "@src/*": [
"@app/*": ["app/*"] "*"
],
"@app/*": [
"app/*"
]
}, },
"allowJs": true, "allowJs": true,
"outDir": "./dist/out-tsc", "outDir": "./dist/out-tsc",
...@@ -21,6 +25,8 @@ ...@@ -21,6 +25,8 @@
"lib": [ "lib": [
"es2017", "es2017",
"dom" "dom"
] ],
"module": "es2015",
"allowSyntheticDefaultImports": true
} }
} }
tslint.json
View file @ ed215200
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
"eofline": true, "eofline": true,
"forin": true, "forin": true,
"import-blacklist": [ "import-blacklist": [
true, true
"rxjs"
], ],
"import-spacing": true, "import-spacing": true,
"indent": [ "indent": [
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment